Add the design-system controls the organization surface needs

New: Checkbox, MultiSelect, DatePicker, DateRangePicker, CopyField,
SecretField, FileField, StatusTag, InlineNotice and Pagination.

Extended, with existing callers unchanged: DataTable (custom cells, row
target, row action, sort, paging, windowing), SearchableSelect (server
search), RecipientField (controlled, validate, error), EmptyState graphic,
SettingsRow leading art, Switch disabled, and text field hints and native
attributes.

The workbench's controls page consumes each new export until feature routes
do.

Author: waleedlatif1

apps/sim/platform/app/workbench/controls/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from 'next'
+import { ControlsWorkbench } from '@/platform/preview/controls-workbench'
+
+export const metadata: Metadata = {
+  title: 'Platform form and data controls',
+  description: 'Exercise the form, status and data table controls in either theme.',
+}
+
+interface ControlsPageProps {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}
+
+export default async function Page({ searchParams }: ControlsPageProps) {
+  const { theme } = await searchParams
+  return <ControlsWorkbench theme={theme === 'dark' ? 'dark' : 'light'} />
+}

apps/sim/platform/design-system/components/checkbox/checkbox.module.css

@@ -0,0 +1,56 @@
+.checkbox {
+  display: inline-flex;
+  align-items: flex-start;
+  min-inline-size: 0;
+  gap: var(--ui-row-gap);
+  color: var(--ui-ink);
+  cursor: pointer;
+}
+
+.checkbox[data-disabled] {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+.box {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: var(--spacing-16);
+  block-size: var(--spacing-16);
+  margin-block-start: var(--spacing-2);
+  border: var(--spacing-stroke-default) solid var(--ui-border);
+  border-radius: var(--radius-4);
+  background: var(--ui-reading);
+}
+
+.checkbox:not([data-disabled]):hover .box:not([data-checked], [data-indeterminate]) {
+  border-color: var(--control-hover-border);
+}
+
+.box:is([data-checked], [data-indeterminate]) {
+  border-color: var(--control-primary-fill);
+  background: var(--control-primary-fill);
+}
+
+.indicator {
+  display: inline-grid;
+  place-items: center;
+}
+
+.dash {
+  inline-size: var(--spacing-8);
+  block-size: var(--spacing-stroke-default);
+  background: var(--control-on-solid);
+}
+
+.copy {
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--ui-stack-gap);
+  overflow-wrap: anywhere;
+}
+
+.description {
+  color: var(--ui-secondary);
+}

apps/sim/platform/design-system/components/checkbox/checkbox.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useId } from 'react'
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox'
+import styles from '@/platform/design-system/components/checkbox/checkbox.module.css'
+import { Icon } from '@/platform/design-system/components/icon/icon'
+
+interface CheckboxProps {
+  label: string
+  description?: string
+  /** Name the box for assistive technology only, for a grid or table that labels it visually. */
+  labelHidden?: boolean
+  checked?: boolean
+  defaultChecked?: boolean
+  indeterminate?: boolean
+  disabled?: boolean
+  name?: string
+  value?: string
+  onCheckedChange?: (checked: boolean) => void
+}
+
+export function Checkbox({
+  label,
+  description,
+  labelHidden,
+  checked,
+  defaultChecked,
+  indeterminate,
+  disabled,
+  name,
+  value,
+  onCheckedChange,
+}: CheckboxProps) {
+  const id = useId()
+  return (
+    <label htmlFor={id} className={styles.checkbox} data-disabled={disabled || undefined}>
+      <BaseCheckbox.Root
+        id={id}
+        className={styles.box}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        indeterminate={indeterminate}
+        disabled={disabled}
+        name={name}
+        value={value}
+        onCheckedChange={onCheckedChange}
+      >
+        <BaseCheckbox.Indicator className={styles.indicator} data-solid data-type='T050'>
+          {indeterminate ? <span className={styles.dash} /> : <Icon name='I072' />}
+        </BaseCheckbox.Indicator>
+      </BaseCheckbox.Root>
+      <span className={styles.copy} data-visually-hidden={labelHidden || undefined}>
+        <span data-type='T043'>{label}</span>
+        {description && (
+          <span className={styles.description} data-type='T060'>
+            {description}
+          </span>
+        )}
+      </span>
+    </label>
+  )
+}

apps/sim/platform/design-system/components/data-display/data-display.module.css

@@ -66,7 +66,7 @@
   inline-size: calc(var(--ui-table-wide) + var(--spacing-16));
 }
 .table th {
-  height: var(--spacing-app-control-md);
+  height: var(--ui-table-head);
 }
 .table td {
   height: var(--spacing-40);
@@ -76,6 +76,56 @@
   background: var(--ui-hover);
   clip-path: inset(0 round var(--radius-item));
 }
+.table tbody tr.spacer:hover {
+  background: transparent;
+}
+.table .spacer td {
+  height: auto;
+  padding: 0;
+}
+.table tr[data-openable] {
+  position: relative;
+  cursor: pointer;
+}
+.rowTarget {
+  display: block;
+  inline-size: 100%;
+  color: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+.rowTarget::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+}
+.table [data-kind="action"] {
+  position: relative;
+  inline-size: calc(var(--spacing-app-control-sm) + var(--spacing-16));
+  padding-inline: 0;
+  text-align: end;
+}
+.sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-action-gap);
+  color: inherit;
+  cursor: pointer;
+}
+.virtualViewport {
+  max-block-size: calc(100dvh - var(--ui-table-viewport-offset));
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.virtualViewport .table {
+  inline-size: 100%;
+}
+.virtualViewport th {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+  background: var(--ui-canvas);
+}
 @container (width < 48rem) {
   .table [data-from="wide"] {
     display: none;
@@ -102,7 +152,6 @@
   .header {
     min-block-size: var(--spacing-app-touch-target);
   }
-  .table th,
   .table td {
     height: var(--spacing-app-touch-target);
   }