Merge branch 'wip/org-ds' into wip/platform-org-wiring

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);
   }