@proteos/ui 0.78.0 → 0.80.0

package/src/components/ava-action-review/ava-action-review.tsx

@@ -0,0 +1,612 @@
+import {
+  AlertCircle,
+  ArrowRight,
+  CornerDownRight,
+  Plus,
+  Search,
+  TriangleAlert,
+  Undo2,
+  X,
+} from 'lucide-react'
+import { type HTMLAttributes, type ReactNode, useLayoutEffect, useRef, useState } from 'react'
+import {
+  Dialog as AriaDialog,
+  Input as AriaInput,
+  Popover as AriaPopover,
+  Autocomplete,
+  DialogTrigger,
+  Header,
+  MenuSection,
+  SearchField,
+  useFilter,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { Button } from '../button/button'
+import { Menu, MenuItem } from '../menu/menu'
+
+/* =========================================================================
+   AvaActionReview — what Ava prepared, for the person to adjust and decide:
+   a fixed head, a body that alone scrolls, and a foot that keeps the buttons
+   at the bottom right of whatever hosts it. The same shell reviews a record
+   proposal and an action's prepared inputs, in hosts from a 240px column to
+   a 768px palette, so the layout answers to its CONTAINER, never the viewport.
+
+   Slot composition (Card pattern): the root carries no padding; each slot
+   owns its own spacing, 12px below the container breakpoint and 16px above.
+
+     <AvaActionReview>
+       <AvaActionReviewHead>
+         <AvaActionReviewTitle eyebrow="Update" action={…}>Acme</AvaActionReviewTitle>
+         <AvaActionReviewReason>…</AvaActionReviewReason>
+         <AvaActionReviewSummary meta="5 suggested">…</AvaActionReviewSummary>
+         <AvaActionReviewProblem>…</AvaActionReviewProblem>
+       </AvaActionReviewHead>
+       <AvaActionReviewBody>
+         <AvaActionReviewErrors errors={[…]} />
+         <AvaActionReviewRows>
+           <AvaActionReviewRow label from to state … />
+         </AvaActionReviewRows>
+       </AvaActionReviewBody>
+       <AvaActionReviewFooter>
+         <AvaActionReviewAddField options={…} onPick={…} />
+         <AvaActionReviewActions>…buttons…</AvaActionReviewActions>
+       </AvaActionReviewFooter>
+     </AvaActionReview>
+
+   Row states:
+     changed    — a value the reviewer can still edit or drop.
+     added      — the reviewer brought this field in; nothing to write until
+                  they edit it.
+     unresolved — the proposer knew WHICH field but not the value; the right
+                  cell is expected to be an empty editor and `hint` says why.
+                  Consumers block "apply" while any row is here.
+     rejected   — the proposer could NOT do what was asked for this field
+                  (read-only, no such option …); `to` carries the explanation
+                  and nothing is applied for the row.
+     removed    — dropped from the change set; collapses to one line with a
+                  restore button so the decision stays reversible.
+   ========================================================================= */
+
+export const avaActionReviewStyles = tv({
+  slots: {
+    root: '@container flex h-full min-h-0 min-w-0 flex-1 flex-col text-ink',
+    // In a short host the head gives way and scrolls before the body would
+    // collapse and push the foot out of the box (a long summary, many problems).
+    head: [
+      'flex min-h-0 flex-col gap-1.5 overflow-y-auto [scrollbar-width:thin] [&>*]:shrink-0',
+      'border-b border-rule-2 px-3 pt-3 pb-2.5 @md:px-4',
+    ],
+    title: 'flex min-w-0 items-baseline gap-2',
+    eyebrow: 'shrink-0 font-mono text-[10.5px] font-medium uppercase tracking-[0.08em] text-ink-4',
+    titleText: 'min-w-0 flex-1 truncate text-[13.5px] font-medium',
+    titleAction: 'shrink-0 self-center',
+    reason: 'text-[12px] leading-[1.4] text-ink-3',
+    summary: 'text-[13px] leading-[1.45] text-ink-2',
+    summaryMore: 'flex flex-wrap items-baseline gap-2.5',
+    summaryMeta: 'font-mono text-[11px] leading-[1.4] text-ink-3',
+    problem: [
+      'flex gap-1.5 rounded-sm px-2 py-1 text-[12.5px] leading-[1.4] text-warning',
+      'bg-[color-mix(in_oklab,var(--color-warning)_10%,var(--color-surface))]',
+    ],
+    body: 'min-h-20 flex-1 overflow-y-auto [scrollbar-width:thin]',
+    rows: 'flex flex-col px-3 @md:px-4',
+    errors: [
+      'mx-3 mt-2.5 flex gap-2 rounded-md px-3 py-2 text-[13px] text-danger @md:mx-4',
+      'bg-[color-mix(in_oklab,var(--color-danger)_8%,var(--color-surface))]',
+    ],
+    footer:
+      'flex shrink-0 flex-wrap items-center justify-between gap-1.5 border-t border-rule-2 px-3 py-2 @md:px-4',
+    actions: 'ml-auto flex items-center gap-1',
+    hint: 'basis-full text-[12px] leading-[1.35] text-ink-3',
+  },
+})
+
+export const avaActionReviewRowStyles = tv({
+  slots: {
+    // fieldset resets (UA border / padding / min-content width) included. The
+    // hairline comes after `border-0`: a row's own reset would otherwise beat
+    // a divider set on its parent.
+    root: 'm-0 flex min-w-0 flex-col gap-1.5 border-0 border-t border-rule-2 px-0 pt-2 pb-2.5 first:border-t-0',
+    labelRow: [
+      'flex min-h-7 items-center gap-2',
+      'font-mono text-[10.5px] uppercase tracking-[0.08em] text-ink-4',
+    ],
+    tag: 'rounded-full px-1.5 py-px text-[10px] normal-case tracking-normal',
+    cells: 'grid grid-cols-[16px_minmax(0,1fr)] items-start gap-x-1.5 gap-y-1',
+    from: 'col-span-full min-w-0',
+    arrow: 'flex h-8 items-center justify-center text-ink-4 [&_svg]:size-3.5',
+    arrowStacked: '',
+    arrowBeside: 'hidden',
+    to: 'min-w-0',
+    hint: 'text-[12px] text-ink-3',
+    error: 'text-[12px] text-danger',
+    removed: 'whitespace-nowrap font-sans text-[12.5px] italic normal-case tracking-normal',
+  },
+  variants: {
+    state: {
+      changed: {},
+      added: {
+        tag: 'bg-surface-2 text-ink-3',
+      },
+      unresolved: {
+        tag: 'bg-[color-mix(in_oklab,var(--color-warning)_12%,var(--color-surface))] text-warning',
+      },
+      rejected: {
+        tag: 'bg-[color-mix(in_oklab,var(--color-danger)_10%,var(--color-surface))] text-danger',
+      },
+      removed: { root: 'pt-0.5 pb-0.5' },
+    },
+    /** Long values read better one above the other at any width. */
+    isLong: {
+      false: {
+        cells: '@md:grid-cols-[minmax(0,1fr)_14px_minmax(0,1fr)] @md:gap-x-2.5 @md:gap-y-0',
+        from: '@md:col-auto',
+        arrowStacked: '@md:hidden',
+        arrowBeside: '@md:block',
+      },
+      true: {},
+    },
+  },
+  defaultVariants: { state: 'changed', isLong: false },
+})
+
+export type AvaActionReviewRowVariants = VariantProps<typeof avaActionReviewRowStyles>
+export type AvaActionReviewRowState = NonNullable<AvaActionReviewRowVariants['state']>
+
+/* ---------- root + slots ---------- */
+
+export type AvaActionReviewProps = HTMLAttributes<HTMLDivElement>
+
+export function AvaActionReview({ className, children, ...props }: AvaActionReviewProps) {
+  return (
+    <div {...props} className={cn(avaActionReviewStyles().root(), className)}>
+      {children}
+    </div>
+  )
+}
+
+export function AvaActionReviewHead({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div {...props} className={cn(avaActionReviewStyles().head(), className)}>
+      {children}
+    </div>
+  )
+}
+
+export interface AvaActionReviewTitleProps extends HTMLAttributes<HTMLDivElement> {
+  /** What Ava is about to do, in one word ("Update", "Create"). */
+  eyebrow?: ReactNode
+  /** Sits at the line's end (the upsert's Change). */
+  action?: ReactNode
+}
+
+export function AvaActionReviewTitle({
+  eyebrow,
+  action,
+  className,
+  children,
+  ...props
+}: AvaActionReviewTitleProps) {
+  const styles = avaActionReviewStyles()
+  return (
+    <div {...props} className={cn(styles.title(), className)}>
+      {eyebrow ? <span className={styles.eyebrow()}>{eyebrow}</span> : null}
+      <span className={styles.titleText()}>{children}</span>
+      {action ? <span className={styles.titleAction()}>{action}</span> : null}
+    </div>
+  )
+}
+
+export function AvaActionReviewReason({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p {...props} className={cn(avaActionReviewStyles().reason(), className)}>
+      {children}
+    </p>
+  )
+}
+
+export interface AvaActionReviewSummaryProps extends HTMLAttributes<HTMLDivElement> {
+  /** A short machine fact beside More ("5 suggested"). */
+  meta?: ReactNode
+  moreLabel?: string
+  lessLabel?: string
+}
+
+/** Ava's own words, clamped to two lines; More appears only when they run longer. */
+export function AvaActionReviewSummary({
+  meta,
+  moreLabel = 'More',
+  lessLabel = 'Less',
+  className,
+  children,
+  ...props
+}: AvaActionReviewSummaryProps) {
+  const styles = avaActionReviewStyles()
+  const textRef = useRef<HTMLParagraphElement>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [isClamped, setIsClamped] = useState(false)
+
+  // Whether the text overflows depends on the host's width, which can change
+  // (a resizable column), so it is measured rather than guessed from length.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `children` changes what overflows.
+  useLayoutEffect(() => {
+    const text = textRef.current
+    if (!text || isOpen) return
+    const measure = () => setIsClamped(text.scrollHeight > text.clientHeight + 1)
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(measure)
+    observer.observe(text)
+    return () => observer.disconnect()
+  }, [isOpen, children])
+
+  const canToggle = isOpen || isClamped
+  return (
+    <div {...props} className={cn('flex flex-col gap-1', className)}>
+      {children ? (
+        <p ref={textRef} className={cn(styles.summary(), !isOpen && 'line-clamp-2')}>
+          {children}
+        </p>
+      ) : null}
+      {canToggle || meta ? (
+        <div className={styles.summaryMore()}>
+          {canToggle ? (
+            <Button
+              variant="link"
+              size="sm"
+              className="h-auto py-0 text-[12.5px]"
+              aria-expanded={isOpen}
+              onPress={() => setIsOpen((open) => !open)}
+            >
+              {isOpen ? lessLabel : moreLabel}
+            </Button>
+          ) : null}
+          {meta ? <span className={styles.summaryMeta()}>{meta}</span> : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+/** Something Ava could not do, kept in sight rather than folded away. */
+export function AvaActionReviewProblem({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div {...props} className={cn(avaActionReviewStyles().problem(), className)}>
+      <TriangleAlert className="mt-[3px] size-3 shrink-0" aria-hidden />
+      <span className="min-w-0">{children}</span>
+    </div>
+  )
+}
+
+export function AvaActionReviewBody({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div {...props} className={cn(avaActionReviewStyles().body(), className)}>
+      {children}
+    </div>
+  )
+}
+
+export function AvaActionReviewRows({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div {...props} className={cn(avaActionReviewStyles().rows(), className)}>
+      {children}
+    </div>
+  )
+}
+
+export interface AvaActionReviewErrorsProps extends HTMLAttributes<HTMLDivElement> {
+  /** Problems that are not tied to one field. Renders nothing when empty. */
+  errors: ReadonlyArray<string>
+}
+
+export function AvaActionReviewErrors({ errors, className, ...props }: AvaActionReviewErrorsProps) {
+  if (errors.length === 0) return null
+  return (
+    <div {...props} role="alert" className={cn(avaActionReviewStyles().errors(), className)}>
+      <AlertCircle className="mt-px size-4 shrink-0" aria-hidden />
+      <ul className="flex min-w-0 flex-col gap-1">
+        {errors.map((error) => (
+          <li key={error}>{error}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export function AvaActionReviewFooter({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div {...props} className={cn(avaActionReviewStyles().footer(), className)}>
+      {children}
+    </div>
+  )
+}
+
+/** The decision buttons, kept together at the right when the foot wraps. */
+export function AvaActionReviewActions({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div {...props} className={cn(avaActionReviewStyles().actions(), className)}>
+      {children}
+    </div>
+  )
+}
+
+/** A full-width line above the foot's buttons (why Apply is blocked). */
+export function AvaActionReviewHint({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span {...props} className={cn(avaActionReviewStyles().hint(), className)}>
+      {children}
+    </span>
+  )
+}
+
+/* ---------- add a field ---------- */
+
+export interface AvaActionReviewAddFieldOption {
+  id: string
+  label: string
+  icon?: ReactNode
+}
+
+export interface AvaActionReviewAddFieldGroup {
+  /** Shown above the group; omit for a single, unlabelled list. */
+  label?: string
+  options: ReadonlyArray<AvaActionReviewAddFieldOption>
+}
+
+export interface AvaActionReviewAddFieldProps {
+  groups: ReadonlyArray<AvaActionReviewAddFieldGroup>
+  onPick: (id: string) => void
+  /** Identifies the trigger, so a host can hand focus back to it. */
+  id?: string
+  isDisabled?: boolean
+  label?: string
+  searchLabel?: string
+  emptyText?: string
+}
+
+/** The foot's "Add field": a filterable list of what the proposer left out. */
+export function AvaActionReviewAddField({
+  groups,
+  onPick,
+  id,
+  isDisabled = false,
+  label = 'Add field',
+  searchLabel = 'Find a field',
+  emptyText = 'No other fields match.',
+}: AvaActionReviewAddFieldProps) {
+  const { contains } = useFilter({ sensitivity: 'base' })
+  return (
+    <DialogTrigger>
+      <Button
+        {...(id !== undefined ? { id } : {})}
+        variant="ghost"
+        size="sm"
+        className="px-1.5"
+        isDisabled={isDisabled}
+      >
+        <Plus aria-hidden />
+        {label}
+      </Button>
+      <AriaPopover
+        placement="top start"
+        offset={6}
+        className={cn(
+          'w-[260px] max-w-[calc(100vw-2rem)] rounded-md border border-rule bg-surface p-1',
+          'shadow-[var(--shadow-float)] outline-none',
+          'entering:animate-enter-slide-up exiting:animate-exit-slide-up',
+        )}
+      >
+        <AriaDialog aria-label={label} className="flex max-h-[290px] flex-col outline-none">
+          {({ close }) => (
+            <Autocomplete filter={contains}>
+              <SearchField
+                aria-label={searchLabel}
+                autoFocus
+                className={cn(
+                  'mb-1 flex shrink-0 items-center gap-1.5 rounded-sm border border-rule px-2 py-1',
+                  'focus-within:border-accent',
+                )}
+              >
+                <Search className="size-3.5 shrink-0 text-ink-4" aria-hidden />
+                <AriaInput
+                  placeholder={searchLabel}
+                  className="w-full min-w-0 bg-transparent text-[13px] outline-none placeholder:text-ink-4"
+                />
+              </SearchField>
+              <Menu
+                aria-label={label}
+                className="min-h-0 overflow-y-auto [scrollbar-width:thin]"
+                onAction={(key) => {
+                  onPick(String(key))
+                  close()
+                }}
+                renderEmptyState={() => (
+                  <div className="px-2.5 py-2 text-[12.5px] text-ink-3">{emptyText}</div>
+                )}
+              >
+                {groups.map((group, index) => (
+                  <MenuSection key={group.label ?? index}>
+                    {group.label ? (
+                      <Header className="px-2.5 pt-2 pb-1 font-mono text-[10.5px] uppercase tracking-[0.08em] text-ink-4">
+                        {group.label}
+                      </Header>
+                    ) : null}
+                    {group.options.map((option) => (
+                      <MenuItem
+                        key={option.id}
+                        id={option.id}
+                        textValue={option.label}
+                        {...(option.icon ? { icon: option.icon } : {})}
+                      >
+                        {option.label}
+                      </MenuItem>
+                    ))}
+                  </MenuSection>
+                ))}
+              </Menu>
+            </Autocomplete>
+          )}
+        </AriaDialog>
+      </AriaPopover>
+    </DialogTrigger>
+  )
+}
+
+/* ---------- row ---------- */
+
+export interface AvaActionReviewRowProps
+  extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'children' | 'className'> {
+  /** The field's label — rendered in the page-layout field-label style. */
+  label: ReactNode
+  /** Current value cell (typically a read-only display). Omit for a value
+   *  that has no "before" — a record being created — and the row shows
+   *  `to` alone, without the arrow. */
+  from?: ReactNode
+  /** Proposed value cell (an editor bound to the change, or the rejection text). */
+  to: ReactNode
+  state?: AvaActionReviewRowState
+  /** Keep the two cells one above the other at every width. */
+  isLong?: boolean
+  /** Why the value is unresolved, or any other one-line note under the cells. */
+  hint?: ReactNode
+  /** Validation error for the proposed value. */
+  errorMessage?: string
+  /** Drop this change. Renders the remove button when given (not in `removed`). */
+  onRemove?: () => void
+  /** Bring a removed change back. Renders the restore button in `removed`. */
+  onRestore?: () => void
+  /** Accessible names for the two buttons. */
+  removeLabel?: string
+  restoreLabel?: string
+  /** Accessible names for the two cells. */
+  fromLabel?: string
+  toLabel?: string
+  /** Text of the `added` / `unresolved` / `rejected` tags next to the label. */
+  addedLabel?: string
+  unresolvedLabel?: string
+  rejectedLabel?: string
+  /** Text shown beside the label while `removed`. */
+  removedText?: string
+  className?: string
+}
+
+export function AvaActionReviewRow({
+  label,
+  from,
+  to,
+  state = 'changed',
+  isLong = false,
+  hint,
+  errorMessage,
+  onRemove,
+  onRestore,
+  removeLabel = 'Remove change',
+  restoreLabel = 'Restore change',
+  fromLabel = 'Current',
+  toLabel = 'New',
+  addedLabel = 'added',
+  unresolvedLabel = 'needs a value',
+  rejectedLabel = 'not possible',
+  removedText = 'Kept as it is',
+  className,
+  ...props
+}: AvaActionReviewRowProps) {
+  const styles = avaActionReviewRowStyles({ state, isLong })
+  const isRemoved = state === 'removed'
+  // A rejected row has nothing to compare: `to` is the explanation.
+  const hasCells = from !== undefined && state !== 'rejected'
+  // A fieldset: the row IS a group of one field's cells (implicit `group`
+  // role), reset from the UA's border / padding / min-content width.
+  return (
+    <fieldset
+      {...props}
+      data-state={state}
+      {...(errorMessage ? { 'aria-invalid': true } : {})}
+      className={cn(styles.root(), className)}
+    >
+      <div className={styles.labelRow()}>
+        <span className="truncate">{isRemoved ? <s>{label}</s> : label}</span>
+        {isRemoved ? <span className={styles.removed()}>{removedText}</span> : null}
+        {state === 'added' ? <span className={styles.tag()}>{addedLabel}</span> : null}
+        {state === 'unresolved' ? <span className={styles.tag()}>{unresolvedLabel}</span> : null}
+        {state === 'rejected' ? <span className={styles.tag()}>{rejectedLabel}</span> : null}
+        <span className="ml-auto flex items-center">
+          {isRemoved
+            ? onRestore && (
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={restoreLabel}
+                  onPress={onRestore}
+                >
+                  <Undo2 />
+                </Button>
+              )
+            : onRemove && (
+                <Button variant="ghost" size="icon-sm" aria-label={removeLabel} onPress={onRemove}>
+                  <X />
+                </Button>
+              )}
+        </span>
+      </div>
+      {isRemoved ? null : hasCells ? (
+        <div className={styles.cells()}>
+          <div className={styles.from()}>
+            <span className="sr-only">{fromLabel}</span>
+            {from}
+          </div>
+          <div className={styles.arrow()} aria-hidden>
+            <CornerDownRight className={styles.arrowStacked()} />
+            <ArrowRight className={styles.arrowBeside()} />
+          </div>
+          <div className={styles.to()}>
+            <span className="sr-only">{toLabel}</span>
+            {to}
+          </div>
+        </div>
+      ) : (
+        <div className={styles.to()}>{to}</div>
+      )}
+      {!isRemoved && hint ? <div className={styles.hint()}>{hint}</div> : null}
+      {!isRemoved && errorMessage ? (
+        <div className={styles.error()} role="alert">
+          {errorMessage}
+        </div>
+      ) : null}
+    </fieldset>
+  )
+}

package/src/components/ava-action-review/index.ts

@@ -0,0 +1,30 @@
+export type {
+  AvaActionReviewAddFieldGroup,
+  AvaActionReviewAddFieldOption,
+  AvaActionReviewAddFieldProps,
+  AvaActionReviewErrorsProps,
+  AvaActionReviewProps,
+  AvaActionReviewRowProps,
+  AvaActionReviewRowState,
+  AvaActionReviewRowVariants,
+  AvaActionReviewSummaryProps,
+  AvaActionReviewTitleProps,
+} from './ava-action-review'
+export {
+  AvaActionReview,
+  AvaActionReviewActions,
+  AvaActionReviewAddField,
+  AvaActionReviewBody,
+  AvaActionReviewErrors,
+  AvaActionReviewFooter,
+  AvaActionReviewHead,
+  AvaActionReviewHint,
+  AvaActionReviewProblem,
+  AvaActionReviewReason,
+  AvaActionReviewRow,
+  AvaActionReviewRows,
+  AvaActionReviewSummary,
+  AvaActionReviewTitle,
+  avaActionReviewRowStyles,
+  avaActionReviewStyles,
+} from './ava-action-review'

package/src/components/checkbox/checkbox.tsx

@@ -5,12 +5,15 @@ import {
 } from 'react-aria-components'
 
 import { cn } from '../../lib/cn'
+import type { FieldSize } from '../field/field'
 
 export type CheckboxProps = Omit<AriaCheckboxProps, 'children'> & {
   children?: ReactNode
+  /** `sm` for dense rows. Defaults to `md`. */
+  size?: FieldSize
 }
 
-export function Checkbox({ children, className, ...props }: CheckboxProps) {
+export function Checkbox({ children, className, size = 'md', ...props }: CheckboxProps) {
   return (
     <AriaCheckbox
       {...props}
@@ -23,8 +26,9 @@ export function Checkbox({ children, className, ...props }: CheckboxProps) {
           // scroll clipping, and focusing it makes the browser scroll a
           // container the user cannot scroll back (the roles permission
           // matrix, where toggling a row threw the page off-screen).
-          'group relative inline-flex items-center gap-2.5 cursor-pointer',
-          'font-sans text-[14px] text-ink-2 select-none',
+          'group relative inline-flex items-center cursor-pointer',
+          size === 'sm' ? 'gap-2 text-[13px]' : 'gap-2.5 text-[14px]',
+          'font-sans text-ink-2 select-none',
           'data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed',
           typeof className === 'function' ? className(renderProps) : className,
         )
@@ -36,7 +40,8 @@ export function Checkbox({ children, className, ...props }: CheckboxProps) {
             aria-hidden
             className={cn(
               'relative inline-flex items-center justify-center shrink-0',
-              'size-[18px] rounded-[4px] border bg-surface',
+              size === 'sm' ? 'size-4' : 'size-[18px]',
+              'rounded-[4px] border bg-surface',
               'border-ink-4',
               'transition-[background-color,border-color,box-shadow] duration-150',
               // hovered
@@ -49,12 +54,13 @@ export function Checkbox({ children, className, ...props }: CheckboxProps) {
             )}
           >
             {renderProps.isIndeterminate ? (
-              <span className="block h-px w-2.5 bg-surface" />
+              <span className={cn('block h-px bg-surface', size === 'sm' ? 'w-2' : 'w-2.5')} />
             ) : (
               <svg
                 viewBox="0 0 12 12"
                 className={cn(
-                  'size-3 text-surface transition-opacity duration-150',
+                  size === 'sm' ? 'size-2.5' : 'size-3',
+                  'text-surface transition-opacity duration-150',
                   renderProps.isSelected ? 'opacity-100' : 'opacity-0',
                 )}
                 aria-hidden