@chassis-ui/react 0.0.0-20260831090525

package/src/components/switch/Switch.tsx

@@ -0,0 +1,246 @@
+import React, { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react'
+import classNames from 'classnames'
+import { AriaSwitchProps, useSwitch } from 'react-aria'
+import { useToggleState } from 'react-stately'
+
+import { useForkedRef } from '../../hooks'
+import { ContextColor } from '../../types'
+import { validationClassName } from '../../utils/validationClassName'
+
+import { FormLabel } from '../form/FormLabel'
+
+export interface SwitchProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'checked' | 'defaultChecked' | 'onChange' | 'size'
+> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+  /**
+   * Sets the color of the switch indicator to one of Chassis context colors.
+   */
+  color?: ContextColor
+  /**
+   * Whether the switch is selected, uncontrolled.
+   */
+  defaultSelected?: boolean
+  /**
+   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+   */
+  id?: string
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean
+  /**
+   * Whether the switch is selected, controlled.
+   */
+  isSelected?: boolean
+  /**
+   * The element represents a caption for a component.
+   */
+  label?: ReactNode
+  /**
+   * Callback fired when the selected state changes.
+   */
+  onChange?: (isSelected: boolean) => void
+  /**
+   * Size the component small or large.
+   */
+  size?: 'small' | 'large'
+  /**
+   * Specifies the type of component.
+   */
+  type?: 'checkbox' | 'radio'
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean
+}
+
+type SwitchVariantProps = Omit<SwitchProps, 'type'>
+
+interface RenderSwitchOptions {
+  checkInputClassName: string
+  className: string
+  input: ReactNode
+  label?: ReactNode
+}
+
+// Mirrors renderFormCheck's nested-label/bare-span shape — Switch inlines its own markup (see
+// FORMS.md) rather than sharing that helper directly, since `role="switch"` placement didn't fit
+// it cleanly. Keep this in sync with renderFormCheck by eye if either changes.
+const renderSwitch = ({ checkInputClassName, className, input, label }: RenderSwitchOptions) => {
+  if (!label) {
+    return <span className={checkInputClassName}>{input}</span>
+  }
+  return (
+    <FormLabel customClassName={className}>
+      <span className={checkInputClassName}>{input}</span>
+      {label}
+    </FormLabel>
+  )
+}
+
+interface RenderSwitchInputOptions {
+  className?: string
+  color?: ContextColor
+  forkedRef: React.Ref<HTMLInputElement>
+  id?: string
+  inputProps: InputHTMLAttributes<HTMLInputElement>
+  invalid?: boolean
+  label?: ReactNode
+  size?: 'small' | 'large'
+  valid?: boolean
+}
+
+// Shared className-building/markup for `SwitchCheckbox`/`SwitchRadio` — the two variants only
+// differ in how `inputProps` gets built (a react-aria hook vs. a hand-wired radio), everything
+// after that is identical.
+const renderSwitchInput = ({
+  className,
+  color,
+  forkedRef,
+  id,
+  inputProps,
+  invalid,
+  label,
+  size,
+  valid
+}: RenderSwitchInputOptions) => {
+  const inputClassName = classNames(validationClassName(invalid, valid))
+  const checkInputClassName = classNames('check-input', color, validationClassName(invalid, valid))
+  const _className = classNames(
+    'form-check form-switch',
+    size,
+    validationClassName(invalid, valid),
+    className
+  )
+
+  return renderSwitch({
+    checkInputClassName,
+    className: _className,
+    input: <input {...inputProps} className={inputClassName} id={id} ref={forkedRef} />,
+    label
+  })
+}
+
+// Checkbox-backed switch: a real toggle, so it goes through react-aria's useSwitch/useToggleState
+// like Checkbox does. Split into its own component (rather than branching inside one Switch on
+// `type`) so SwitchRadio below never has to call these hooks just to discard their result —
+// calling them unconditionally and ignoring the output risked react-aria's own dev-mode warnings
+// (e.g. its missing-accessible-name check) firing for state that was never actually rendered.
+const SwitchCheckbox = forwardRef<HTMLInputElement, SwitchVariantProps>(
+  (
+    {
+      className,
+      color,
+      defaultSelected,
+      disabled,
+      id,
+      invalid,
+      isSelected,
+      label,
+      onChange,
+      size,
+      valid,
+      ...rest
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const forkedRef = useForkedRef(ref, inputRef)
+
+    const toggleState = useToggleState({
+      defaultSelected,
+      isDisabled: disabled,
+      isSelected,
+      onChange
+    })
+
+    const { inputProps: switchProps } = useSwitch(
+      {
+        ...rest,
+        children: label,
+        isDisabled: disabled,
+        isInvalid: invalid,
+        value: rest.value as string | undefined
+      } as AriaSwitchProps,
+      toggleState,
+      inputRef
+    )
+
+    return renderSwitchInput({
+      className,
+      color,
+      forkedRef,
+      id,
+      inputProps: switchProps,
+      invalid,
+      label,
+      size,
+      valid
+    })
+  }
+)
+SwitchCheckbox.displayName = 'SwitchCheckbox'
+
+// Radio-backed switch: react-aria has no ungrouped radio hook (see Checkbox's own split for the
+// same reason), so this stays a native, hand-wired `<input type="radio" role="switch">` — no
+// react-aria hook to call here at all.
+const SwitchRadio = forwardRef<HTMLInputElement, SwitchVariantProps>(
+  (
+    {
+      className,
+      color,
+      defaultSelected,
+      disabled,
+      id,
+      invalid,
+      isSelected,
+      label,
+      onChange,
+      size,
+      valid,
+      ...rest
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const forkedRef = useForkedRef(ref, inputRef)
+
+    const radioProps = {
+      ...rest,
+      'aria-invalid': invalid,
+      checked: isSelected,
+      defaultChecked: defaultSelected,
+      disabled,
+      onChange: onChange
+        ? (event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.checked)
+        : undefined,
+      role: 'switch' as const,
+      type: 'radio' as const
+    }
+
+    return renderSwitchInput({
+      className,
+      color,
+      forkedRef,
+      id,
+      inputProps: radioProps,
+      invalid,
+      label,
+      size,
+      valid
+    })
+  }
+)
+SwitchRadio.displayName = 'SwitchRadio'
+
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  ({ type = 'checkbox', ...rest }, ref) =>
+    type === 'radio' ? <SwitchRadio {...rest} ref={ref} /> : <SwitchCheckbox {...rest} ref={ref} />
+)
+
+Switch.displayName = 'Switch'

package/src/components/switch/index.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch'
+export type { SwitchProps } from './Switch'

package/src/components/table/Table.css

@@ -0,0 +1,39 @@
+/*
+ * Table's `<table>`/`<thead>`/`<tbody>`/`<tr>`/`<th>`/`<td>` chrome reuses chassis-css's
+ * existing `.table` class as-is (colors, borders, striping, hover, the `.active` row highlight —
+ * now driven by real selection state instead of a manual prop). Only the pieces with no
+ * chassis-css equivalent are new here: the sort indicator and the selection-checkbox column,
+ * both built on `@chassis-ui/tokens`' public `--cx-*` tokens for the same reason as
+ * DatePicker's calendar grid.
+ */
+
+.table-sort-icon {
+  display: inline-block;
+  margin-inline-start: var(--cx-space-2xsmall);
+  font-size: .75em;
+  opacity: .6;
+}
+
+[aria-sort="ascending"] .table-sort-icon,
+[aria-sort="descending"] .table-sort-icon {
+  opacity: 1;
+}
+
+[role="columnheader"][aria-sort] {
+  cursor: pointer;
+  user-select: none;
+}
+
+.table-selection-cell {
+  width: 1%;
+  padding-inline-end: 0;
+  text-align: center;
+}
+
+.table [role="row"]:focus-visible,
+.table [role="gridcell"]:focus-visible,
+.table [role="columnheader"]:focus-visible,
+.table [role="rowheader"]:focus-visible {
+  outline: var(--cx-border-width-xlarge) solid var(--cx-primary);
+  outline-offset: -2px;
+}

package/src/components/table/Table.tsx

@@ -0,0 +1,390 @@
+import React, { ReactElement, ReactNode, Ref, forwardRef, useRef } from 'react'
+import classNames from 'classnames'
+import {
+  AriaCheckboxProps,
+  Key,
+  useCheckbox,
+  useTable,
+  useTableCell,
+  useTableColumnHeader,
+  useTableHeaderRow,
+  useTableRow,
+  useTableRowGroup,
+  useTableSelectAllCheckbox,
+  useTableSelectionCheckbox
+} from 'react-aria'
+import {
+  Selection,
+  SortDescriptor,
+  TableBodyProps,
+  TableHeaderProps,
+  TableState,
+  useTableState,
+  useToggleState
+} from 'react-stately'
+
+import { useForkedRef } from '../../hooks/useForkedRef'
+import { ContextColor } from '../../types'
+import './Table.css'
+
+// `GridNode<T>` (from `@react-types/shared`) isn't re-exported by either package's public
+// surface — derived from the hooks' own parameter types instead of adding an undeclared
+// dependency on react-aria/react-stately's shared internals package.
+type ColumnNode<T> = Parameters<typeof useTableColumnHeader<T>>[0]['node']
+type RowNode<T> = Parameters<typeof useTableRow<T>>[0]['node']
+type CellNode<T> = Parameters<typeof useTableCell<T>>[0]['node']
+
+export interface TableProps<T extends object> {
+  /**
+   * An accessible label for the table, used when there's no visible heading.
+   */
+  'aria-label'?: string
+  /**
+   * Identifies a visible heading element for the table.
+   */
+  'aria-labelledby'?: string
+  /**
+   * Set the vertical alignment of cell content.
+   */
+  align?: 'bottom' | 'middle' | 'top'
+  /**
+   * Add borders on all sides of the table and cells.
+   */
+  bordered?: boolean
+  /**
+   * Remove borders on all sides of the table and cells.
+   */
+  borderless?: boolean
+  /**
+   * Content shown above the table, functioning as a heading for it.
+   */
+  caption?: ReactNode
+  /**
+   * A `TableHeader` and a `TableBody`, each built from `TableColumn`/`TableRow`/
+   * `TableCell` — read as data to build the table's collection. Not rendered directly.
+   */
+  children: [
+    ReactElement<TableHeaderProps<T> & { className?: string }>,
+    ReactElement<TableBodyProps<T> & { className?: string }>
+  ]
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+  /**
+   * Sets the color of the component.
+   */
+  color?: ContextColor
+  /**
+   * A list of row keys to disable. Disabled rows cannot be selected, focused, or interacted with.
+   */
+  disabledKeys?: Iterable<Key>
+  /**
+   * Content shown below the table in a `<tfoot>`, e.g. a totals row. Rendered as plain markup —
+   * not part of the keyboard-navigable grid.
+   */
+  footer?: ReactNode
+  /**
+   * Enable a hover state on table rows.
+   */
+  hover?: boolean
+  /**
+   * `id` forwarded to the table element.
+   */
+  id?: string
+  /**
+   * Handler that is called when the selection changes.
+   */
+  onSelectionChange?: (keys: Selection) => void
+  /**
+   * Handler that is called when a column is sorted.
+   */
+  onSortChange?: (descriptor: SortDescriptor) => void
+  /**
+   * Make any table responsive across all viewports or pick a maximum breakpoint.
+   */
+  responsive?: boolean | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'
+  /**
+   * The currently selected row keys (controlled).
+   */
+  selectedKeys?: Selection
+  /**
+   * The type of selection that is allowed.
+   */
+  selectionMode?: 'none' | 'single' | 'multiple'
+  /**
+   * Make table more compact by cutting all cell padding.
+   */
+  small?: boolean
+  /**
+   * The current sort column and direction.
+   */
+  sortDescriptor?: SortDescriptor
+  /**
+   * Convert rows into stacked label/value blocks below a container width, for tables with too
+   * many columns to read comfortably even with horizontal scrolling. `true` always stacks; a
+   * breakpoint name stacks only below it. Implies `responsive` when `responsive` isn't set
+   * separately, since stacking needs the same `.table-responsive` container-query ancestor.
+   * Labels come from each `TableColumn`'s text (or its `textValue`, for non-text headers).
+   */
+  stacked?: boolean | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'
+  /**
+   * Add zebra-striping to table rows.
+   */
+  striped?: boolean
+}
+
+const TableInner = <T extends object>(
+  {
+    align,
+    bordered,
+    borderless,
+    caption,
+    children,
+    className,
+    color,
+    disabledKeys,
+    footer,
+    hover,
+    id,
+    onSelectionChange,
+    onSortChange,
+    responsive,
+    selectedKeys,
+    selectionMode = 'none',
+    small,
+    sortDescriptor,
+    stacked,
+    striped,
+    ...rest
+  }: TableProps<T>,
+  forwardedRef: Ref<HTMLTableElement>
+) => {
+  const state = useTableState<T>({
+    children,
+    disabledKeys,
+    onSelectionChange,
+    onSortChange,
+    selectedKeys,
+    selectionMode,
+    showSelectionCheckboxes: selectionMode === 'multiple',
+    sortDescriptor
+  })
+
+  const internalRef = useRef<HTMLTableElement>(null)
+  const ref = useForkedRef(internalRef, forwardedRef)
+  const { gridProps } = useTable(
+    { 'aria-label': rest['aria-label'], 'aria-labelledby': rest['aria-labelledby'], id },
+    state,
+    internalRef
+  )
+
+  const _className = classNames(
+    'table',
+    color,
+    {
+      [`align-${align}`]: align,
+      bordered,
+      borderless,
+      hoverable: hover,
+      small,
+      stacked: stacked === true,
+      striped
+    },
+    typeof stacked === 'string' ? `max-${stacked}:stacked` : undefined,
+    className
+  )
+
+  const tableEl = (
+    <table {...gridProps} className={_className || undefined} ref={ref}>
+      {caption && <caption>{caption}</caption>}
+      <TableRowGroup className={children[0].props.className} type="thead">
+        {state.collection.headerRows.map((headerRow) => (
+          <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
+            {[...(state.collection.getChildren?.(headerRow.key) ?? [])].map((column) =>
+              column.props?.isSelectionCell ? (
+                <TableSelectAllCell key={column.key} column={column} state={state} />
+              ) : (
+                <TableColumnHeader key={column.key} column={column} state={state} />
+              )
+            )}
+          </TableHeaderRow>
+        ))}
+      </TableRowGroup>
+      <TableRowGroup className={children[1].props.className} type="tbody">
+        {[...state.collection.body.childNodes].map((row) => (
+          <TableRow key={row.key} item={row} state={state}>
+            {[...(state.collection.getChildren?.(row.key) ?? [])].map((cell) =>
+              cell.props?.isSelectionCell ? (
+                <TableSelectionCell key={cell.key} cell={cell} state={state} />
+              ) : (
+                <TableCell key={cell.key} cell={cell} stacked={!!stacked} state={state} />
+              )
+            )}
+          </TableRow>
+        ))}
+      </TableRowGroup>
+      {footer && <tfoot>{footer}</tfoot>}
+    </table>
+  )
+
+  if (!responsive && !stacked) return tableEl
+
+  const wrapperClassName = responsive
+    ? typeof responsive === 'boolean'
+      ? 'table-responsive'
+      : `max-${responsive}:table-responsive`
+    : 'table-responsive'
+
+  return <div className={wrapperClassName}>{tableEl}</div>
+}
+
+// `forwardRef` erases type parameters, so the generic component is cast back to a generic
+// signature for callers — same reasoning as `TableHeader`/`TableBody`'s casts above.
+export const Table = forwardRef(TableInner) as <T extends object>(
+  props: TableProps<T> & { ref?: Ref<HTMLTableElement> }
+) => ReactElement
+
+;(Table as { displayName?: string }).displayName = 'Table'
+
+const TableRowGroup = ({
+  className,
+  type: Element,
+  children
+}: {
+  children: ReactNode
+  className?: string
+  type: 'thead' | 'tbody'
+}) => {
+  const { rowGroupProps } = useTableRowGroup()
+  return (
+    <Element {...rowGroupProps} className={className || undefined}>
+      {children}
+    </Element>
+  )
+}
+
+interface TableHeaderRowProps<T> {
+  children: ReactNode
+  item: RowNode<T>
+  state: TableState<T>
+}
+
+const TableHeaderRow = <T extends object>({ children, item, state }: TableHeaderRowProps<T>) => {
+  const ref = useRef<HTMLTableRowElement>(null)
+  const { rowProps } = useTableHeaderRow({ node: item }, state, ref)
+  return (
+    <tr {...rowProps} ref={ref}>
+      {children}
+    </tr>
+  )
+}
+
+interface TableColumnHeaderProps<T> {
+  column: ColumnNode<T>
+  state: TableState<T>
+}
+
+const TableColumnHeader = <T extends object>({ column, state }: TableColumnHeaderProps<T>) => {
+  const ref = useRef<HTMLTableCellElement>(null)
+  const { columnHeaderProps } = useTableColumnHeader({ node: column }, state, ref)
+  const sortActive = state.sortDescriptor?.column === column.key
+  const sortIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼'
+
+  return (
+    <th
+      {...columnHeaderProps}
+      className={column.props?.className || undefined}
+      colSpan={column.colSpan ?? undefined}
+      ref={ref}
+    >
+      {column.rendered}
+      {column.props?.allowsSorting && (
+        <span aria-hidden="true" className="table-sort-icon">
+          {sortActive ? sortIcon : '⇅'}
+        </span>
+      )}
+    </th>
+  )
+}
+
+interface TableSelectAllCellProps<T> {
+  column: ColumnNode<T>
+  state: TableState<T>
+}
+
+const TableSelectAllCell = <T extends object>({ column, state }: TableSelectAllCellProps<T>) => {
+  const ref = useRef<HTMLTableCellElement>(null)
+  const { columnHeaderProps } = useTableColumnHeader({ node: column }, state, ref)
+  const { checkboxProps } = useTableSelectAllCheckbox(state)
+
+  return (
+    <th {...columnHeaderProps} className="table-selection-cell" ref={ref}>
+      <TableCheckbox checkboxProps={checkboxProps} />
+    </th>
+  )
+}
+
+interface TableRowProps<T> {
+  children: ReactNode
+  item: RowNode<T>
+  state: TableState<T>
+}
+
+const TableRow = <T extends object>({ children, item, state }: TableRowProps<T>) => {
+  const ref = useRef<HTMLTableRowElement>(null)
+  const { rowProps } = useTableRow({ node: item }, state, ref)
+  const isSelected = state.selectionManager.isSelected(item.key)
+
+  return (
+    <tr
+      {...rowProps}
+      className={classNames({ active: isSelected }, item.props?.className)}
+      ref={ref}
+    >
+      {children}
+    </tr>
+  )
+}
+
+interface TableCellProps<T> {
+  cell: CellNode<T>
+  stacked?: boolean
+  state: TableState<T>
+}
+
+const TableCell = <T extends object>({ cell, stacked, state }: TableCellProps<T>) => {
+  const ref = useRef<HTMLTableCellElement>(null)
+  const { gridCellProps } = useTableCell({ node: cell }, state, ref)
+
+  return (
+    <td
+      {...gridCellProps}
+      className={cell.props?.className || undefined}
+      data-cell={stacked ? cell.column?.textValue || undefined : undefined}
+      ref={ref}
+    >
+      {cell.rendered}
+    </td>
+  )
+}
+
+const TableSelectionCell = <T extends object>({ cell, state }: TableCellProps<T>) => {
+  const ref = useRef<HTMLTableCellElement>(null)
+  const { gridCellProps } = useTableCell({ node: cell }, state, ref)
+  const { checkboxProps } = useTableSelectionCheckbox({ key: cell.parentKey! }, state)
+
+  return (
+    <td {...gridCellProps} className="table-selection-cell" ref={ref}>
+      <TableCheckbox checkboxProps={checkboxProps} />
+    </td>
+  )
+}
+
+const TableCheckbox = ({ checkboxProps }: { checkboxProps: AriaCheckboxProps }) => {
+  const toggleState = useToggleState(checkboxProps)
+  const ref = useRef<HTMLInputElement>(null)
+  const { inputProps } = useCheckbox(checkboxProps, toggleState, ref)
+
+  return <input {...inputProps} className="check-input" ref={ref} />
+}

package/src/components/table/TableBody.tsx

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react'
+import { TableBody as StatelyTableBody } from 'react-stately'
+
+export interface TableBodyProps<T> {
+  /**
+   * `TableRow` elements, or a render function paired with `items` for dynamic row generation.
+   */
+  children: ReactElement | ReactElement[] | ((item: T) => ReactElement)
+  /**
+   * A string of all className you want applied to the `<tbody>` element.
+   */
+  className?: string
+  /**
+   * A list of row data objects, rendered via the function form of `children`.
+   */
+  items?: Iterable<T>
+}
+
+/**
+ * Collection node, data-only — read by `Table` to build the table's row collection. Never
+ * rendered directly.
+ */
+export const TableBody = StatelyTableBody as unknown as <T>(
+  props: TableBodyProps<T>
+) => ReactElement