@proteos/ui 0.31.0

package/src/components/table/table.tsx

@@ -0,0 +1,543 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import {
+  attachClosestEdge,
+  type Edge,
+  extractClosestEdge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'
+import { GripVertical, X } from 'lucide-react'
+import {
+  type CSSProperties,
+  type HTMLAttributes,
+  type MouseEvent,
+  type Ref,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Table — pure presentational chrome.
+   Div + ARIA grid roles (not semantic <table>) so virtualizers can position
+   rows absolutely. The slot pattern mirrors Card: each slot owns its own
+   spacing; the root carries no padding. The same primitives compose for
+   short non-virtualized tables and for the virtualized DataTable layer.
+   ========================================================================= */
+
+const tableStyles = tv({
+  base: ['flex flex-col overflow-hidden min-h-0', 'text-[14px] text-ink-2'],
+  variants: {
+    variant: {
+      // Tables sit on the page bg, not the raised surface color — rows read
+      // as part of the page, framed by the panel border (Tonio's call, 2026-07).
+      panel: ['bg-bg border border-rule rounded-lg', 'shadow-[var(--shadow-rest)]'],
+      bare: '',
+    },
+  },
+  defaultVariants: { variant: 'panel' },
+})
+
+export type TableVariants = VariantProps<typeof tableStyles>
+export type TableProps = HTMLAttributes<HTMLDivElement> &
+  TableVariants & {
+    'aria-label'?: string
+  }
+
+export function Table({ variant, className, ...props }: TableProps) {
+  return <div role="grid" {...props} className={cn(tableStyles({ variant }), className)} />
+}
+
+/* ---------- Header row ---------------------------------------------------- */
+
+const tableHeaderStyles = tv({
+  base: [
+    'flex items-stretch shrink-0',
+    'bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
+    'border-b border-rule',
+  ],
+  variants: {
+    sticky: { true: 'sticky top-0 z-[2]', false: '' },
+  },
+  defaultVariants: { sticky: false },
+})
+
+export type TableHeaderProps = HTMLAttributes<HTMLDivElement> & {
+  sticky?: boolean
+}
+
+export function TableHeader({ sticky, className, ...props }: TableHeaderProps) {
+  return <div role="row" {...props} className={cn(tableHeaderStyles({ sticky }), className)} />
+}
+
+/* ---------- Header cell --------------------------------------------------- */
+
+export const tableHeaderCellStyles = tv({
+  base: [
+    // `relative` is the default positioning context (for the drag-edge
+    // indicator + sort affordance). Declared as a class — not an inline
+    // style — so the `sticky` variant below can override it; an inline
+    // `position` would always win and a sticky gutter header could never
+    // freeze.
+    'relative',
+    'flex items-center gap-[7px] shrink-0 select-none',
+    'px-[14px] h-[36px]',
+    'border-r border-rule-2 last:border-r-0',
+    'font-mono text-[10.5px] font-normal uppercase tracking-[0.08em]',
+    'text-ink-4',
+    'transition-[background-color,color] duration-150',
+  ],
+  variants: {
+    align: {
+      left: 'justify-start text-left',
+      right: 'justify-end text-right',
+      center: 'justify-center text-center',
+    },
+    interactive: {
+      true: [
+        'cursor-pointer outline-none appearance-none border-0 border-r border-rule-2 last:border-r-0 bg-transparent',
+        'hover:bg-surface-2 hover:text-ink-2',
+        'focus-visible:shadow-[var(--shadow-focus)]',
+      ],
+      false: '',
+    },
+    active: {
+      true: 'text-ink',
+      false: '',
+    },
+    sticky: {
+      left: 'sticky left-0 z-[3] bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
+      right: 'sticky right-0 z-[3] bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
+      false: '',
+    },
+  },
+  defaultVariants: { align: 'left', interactive: false, active: false, sticky: false },
+})
+
+export type SortDirection = 'asc' | 'desc' | null
+
+/** Discriminator stored on every column drag payload. */
+export const COLUMN_DRAG_KIND = 'proteos:table:column' as const
+
+export type ColumnDragData = {
+  kind: typeof COLUMN_DRAG_KIND
+  columnId: string
+}
+
+export function isColumnDragData(
+  data: Record<string | symbol, unknown>,
+): data is ColumnDragData & Record<string | symbol, unknown> {
+  return data.kind === COLUMN_DRAG_KIND && typeof data.columnId === 'string'
+}
+
+type DragState =
+  | { kind: 'idle' }
+  | { kind: 'dragging' }
+  | { kind: 'over'; edge: Extract<Edge, 'left' | 'right'> }
+
+export type TableHeaderCellProps = Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> & {
+  width?: number | string
+  align?: 'left' | 'right' | 'center'
+  /** Pin the cell to the left or right edge during horizontal scroll. */
+  sticky?: 'left' | 'right' | false
+  /**
+   * When non-null, renders a sort affordance and treats clicks on the cell
+   * body as a sort toggle. `null` (the default) is "not sortable".
+   */
+  sortDirection?: SortDirection
+  onSortToggle?: () => void
+  /**
+   * Make the header draggable for column reorder. Requires `columnId`.
+   * The cell registers pragmatic-dnd `draggable` + `dropTargetForElements`
+   * with left/right edge detection; the actual reorder runs in a global
+   * `monitorForElements` (e.g. inside DataTable) by reading the published
+   * `ColumnDragData`.
+   */
+  draggable?: boolean
+  columnId?: string
+  /**
+   * When provided, renders a trailing `×` button. Click events
+   * `stopPropagation` so removal never starts a drag or toggles sort.
+   */
+  onRemove?: () => void
+  /** Aria label fragment used in the remove button label and any drag a11y. */
+  ariaLabel?: string
+}
+
+export function TableHeaderCell({
+  width,
+  align = 'left',
+  className,
+  style,
+  children,
+  sortDirection = null,
+  onSortToggle,
+  draggable: isDraggable = false,
+  columnId,
+  onRemove,
+  ariaLabel,
+  sticky = false,
+  ...rest
+}: TableHeaderCellProps) {
+  const cellRef = useRef<HTMLDivElement | null>(null)
+  const handleRef = useRef<HTMLSpanElement | null>(null)
+  const [dragState, setDragState] = useState<DragState>({ kind: 'idle' })
+
+  useEffect(() => {
+    if (!isDraggable || !columnId) return
+    const cell = cellRef.current
+    const handle = handleRef.current
+    if (!cell || !handle) return
+
+    const data: ColumnDragData = { kind: COLUMN_DRAG_KIND, columnId }
+
+    return combine(
+      draggable({
+        element: cell,
+        dragHandle: handle,
+        getInitialData: () => ({ ...data }),
+        onDragStart: () => setDragState({ kind: 'dragging' }),
+        onDrop: () => setDragState({ kind: 'idle' }),
+      }),
+      dropTargetForElements({
+        element: cell,
+        canDrop: ({ source }) =>
+          isColumnDragData(source.data) && source.data.columnId !== columnId,
+        getData: ({ input, element }) =>
+          attachClosestEdge(
+            { ...data },
+            { input, element, allowedEdges: ['left', 'right'] },
+          ),
+        getIsSticky: () => true,
+        onDragEnter: ({ self }) => {
+          const edge = extractClosestEdge(self.data)
+          if (edge === 'left' || edge === 'right') setDragState({ kind: 'over', edge })
+        },
+        onDrag: ({ self }) => {
+          const edge = extractClosestEdge(self.data)
+          if (edge === 'left' || edge === 'right') {
+            setDragState((prev) =>
+              prev.kind === 'over' && prev.edge === edge ? prev : { kind: 'over', edge },
+            )
+          }
+        },
+        onDragLeave: () => setDragState({ kind: 'idle' }),
+        onDrop: () => setDragState({ kind: 'idle' }),
+      }),
+    )
+  }, [isDraggable, columnId])
+
+  const widthStyle: CSSProperties = width != null ? { width, flexBasis: width } : {}
+  const isSortable = !!onSortToggle
+  const active = sortDirection !== null
+
+  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+    if (!isSortable) return
+    const target = e.target as HTMLElement
+    if (target.closest('[data-dnd-handle="true"]')) return
+    if (target.closest('[data-column-remove="true"]')) return
+    onSortToggle?.()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!isSortable) return
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      onSortToggle?.()
+    }
+  }
+
+  const ariaSort: 'ascending' | 'descending' | 'none' | undefined = isSortable
+    ? sortDirection === 'asc'
+      ? 'ascending'
+      : sortDirection === 'desc'
+        ? 'descending'
+        : 'none'
+    : undefined
+
+  return (
+    <div
+      {...rest}
+      ref={cellRef}
+      role="columnheader"
+      aria-sort={ariaSort}
+      tabIndex={isSortable ? 0 : undefined}
+      style={{ ...widthStyle, ...style }}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        tableHeaderCellStyles({ align, interactive: isSortable, active, sticky }),
+        'group/header',
+        dragState.kind === 'dragging' ? 'opacity-40' : '',
+        className,
+      )}
+    >
+      {isDraggable && columnId ? (
+        <span
+          ref={handleRef}
+          data-dnd-handle="true"
+          aria-hidden="true"
+          className={cn(
+            'inline-flex items-center justify-center shrink-0 -ml-1.5',
+            'cursor-grab active:cursor-grabbing text-ink-4',
+            'opacity-0 group-hover/header:opacity-100 transition-opacity',
+          )}
+        >
+          <GripVertical className="size-3" />
+        </span>
+      ) : null}
+
+      <span
+        className={cn(
+          'flex items-center gap-[7px] min-w-0 flex-1',
+          align === 'right' ? 'justify-end' : align === 'center' ? 'justify-center' : 'justify-start',
+        )}
+      >
+        <span className="truncate">{children}</span>
+        {isSortable ? <SortIcon dir={sortDirection} active={active} /> : null}
+      </span>
+
+      {onRemove ? (
+        <button
+          type="button"
+          data-column-remove="true"
+          aria-label={`Remove column ${ariaLabel ?? 'column'}`}
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove()
+          }}
+          className={cn(
+            'inline-flex items-center justify-center shrink-0 size-4 rounded',
+            'text-ink-4 hover:text-ink hover:bg-surface-2',
+            'opacity-0 group-hover/header:opacity-100 focus-visible:opacity-100',
+            'transition-opacity outline-none focus-visible:shadow-[var(--shadow-focus)]',
+          )}
+        >
+          <X className="size-3" />
+        </button>
+      ) : null}
+
+      {dragState.kind === 'over' ? (
+        <div
+          aria-hidden="true"
+          className={cn(
+            'pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-accent',
+            dragState.edge === 'left' ? '-left-px' : '-right-px',
+          )}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+function SortIcon({ dir, active }: { dir: SortDirection; active: boolean }) {
+  return (
+    <svg
+      width="8"
+      height="11"
+      viewBox="0 0 8 11"
+      aria-hidden="true"
+      className={cn('shrink-0', active ? 'text-accent' : 'text-ink-4')}
+    >
+      <path d="M4 0.5 L7.5 4 L0.5 4 Z" fill="currentColor" opacity={dir === 'asc' ? 1 : 0.22} />
+      <path d="M4 10.5 L0.5 7 L7.5 7 Z" fill="currentColor" opacity={dir === 'desc' ? 1 : 0.22} />
+    </svg>
+  )
+}
+
+/**
+ * Trailing flexible spacer so the header row fills the full row width when
+ * the sum of column widths is less than the viewport. Matches the design's
+ * `pt-th--spacer`.
+ */
+export function TableHeaderSpacer({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      aria-hidden="true"
+      {...props}
+      className={cn('flex-1 h-[36px] border-r-0', 'bg-transparent pointer-events-none', className)}
+    />
+  )
+}
+
+/* ---------- Body / scroll container -------------------------------------- */
+
+/* Scrollbar chrome shared by `TableBody` (standalone short-table scroller)
+   and `TableScroller` (the virtualized DataTable's single both-axes scroller). */
+const scrollbarChrome = [
+  '[scrollbar-width:thin]',
+  '[scrollbar-color:var(--color-rule)_transparent]',
+  '[&::-webkit-scrollbar]:size-3',
+  '[&::-webkit-scrollbar-thumb]:rounded-pill',
+  '[&::-webkit-scrollbar-thumb]:bg-rule',
+  '[&::-webkit-scrollbar-thumb]:border-[3px]',
+  '[&::-webkit-scrollbar-thumb]:border-solid',
+  '[&::-webkit-scrollbar-thumb]:border-bg',
+  '[&::-webkit-scrollbar-thumb:hover]:bg-ink-4',
+  '[&::-webkit-scrollbar-corner]:bg-bg',
+] as const
+
+const tableBodyStyles = tv({
+  base: ['flex-1 min-h-0 overflow-auto relative', ...scrollbarChrome],
+})
+
+export type TableBodyProps = HTMLAttributes<HTMLDivElement> & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export function TableBody({ className, ref, ...props }: TableBodyProps) {
+  return <div role="rowgroup" ref={ref} {...props} className={cn(tableBodyStyles(), className)} />
+}
+
+/* ---------- Scroller ------------------------------------------------------ */
+
+/* `TableScroller` — the single scroll container for the virtualized
+   DataTable. It scrolls on BOTH axes so a min-width content track (sticky
+   header + rows) scrolls horizontally as one unit, the sticky header pins to
+   the top on vertical scroll, and any `sticky left-0` gutter column freezes
+   to the left on horizontal scroll (Excel-style). `relative` makes it the
+   offsetParent so the virtualizer can measure the row list's offset (the
+   sticky header's height) for its `scrollMargin`. Presentational: ARIA sees
+   through it to the header row + rowgroup it contains. */
+const tableScrollerStyles = tv({
+  base: ['relative flex-1 min-h-0 overflow-auto', ...scrollbarChrome],
+})
+
+export function TableScroller({ className, ref, ...props }: TableBodyProps) {
+  return (
+    <div role="presentation" ref={ref} {...props} className={cn(tableScrollerStyles(), className)} />
+  )
+}
+
+/* ---------- Row ----------------------------------------------------------- */
+
+/* Stripe + hover tint rows by mixing ink into the page bg they sit on. Ink is
+   always the opposing pole of bg, so one formula holds in every theme —
+   stripes darken on paper/light and lighten on dark. surface-2 can't do this:
+   it's a surface-relative step and collapses into bg in the light theme.
+   Strength is a per-theme knob (--row-stripe/--row-hover in styles.css) since a
+   near-white base shows a given delta more; --row-hover > --row-stripe keeps
+   the states ordered in every theme. */
+const rowStripeBg = 'bg-[color-mix(in_oklab,var(--color-ink)_var(--row-stripe),var(--color-bg))]'
+const rowHoverBg =
+  'hover:bg-[color-mix(in_oklab,var(--color-ink)_var(--row-hover),var(--color-bg))]'
+
+const tableRowStyles = tv({
+  base: ['flex items-stretch', 'border-b border-rule-2 last:border-b-0', 'bg-bg'],
+  variants: {
+    alt: {
+      true: rowStripeBg,
+      false: '',
+    },
+    interactive: {
+      true: `cursor-pointer ${rowHoverBg}`,
+      false: rowHoverBg,
+    },
+    absolute: {
+      true: 'absolute left-0 right-0',
+      false: '',
+    },
+  },
+  compoundVariants: [{ alt: true, interactive: true, class: rowHoverBg }],
+  defaultVariants: { alt: false, interactive: false, absolute: false },
+})
+
+export type TableRowProps = HTMLAttributes<HTMLDivElement> & {
+  alt?: boolean
+  interactive?: boolean
+  /**
+   * Position the row absolutely (used by virtualizers that translate rows
+   * into place via inline `style.transform`).
+   */
+  absolute?: boolean
+  onRowClick?: (e: MouseEvent<HTMLDivElement>) => void
+}
+
+export function TableRow({
+  alt,
+  interactive,
+  absolute,
+  className,
+  onRowClick,
+  onClick,
+  ...props
+}: TableRowProps) {
+  return (
+    <div
+      role="row"
+      {...props}
+      onClick={(e) => {
+        onClick?.(e)
+        onRowClick?.(e)
+      }}
+      className={cn(tableRowStyles({ alt, interactive, absolute }), className)}
+    />
+  )
+}
+
+/* ---------- Cell ---------------------------------------------------------- */
+
+export const tableCellStyles = tv({
+  base: [
+    'flex items-center shrink-0 min-w-0',
+    'px-[14px]',
+    'whitespace-nowrap overflow-hidden text-ellipsis',
+    'font-sans text-[13px] tracking-[-0.005em]',
+    'text-ink-2',
+  ],
+  variants: {
+    align: {
+      left: 'justify-start text-left',
+      right: 'justify-end text-right [font-variant-numeric:tabular-nums]',
+      center: 'justify-center text-center',
+    },
+    mono: {
+      true: 'font-mono text-[12.5px] [font-feature-settings:"tnum","zero"]',
+      false: '',
+    },
+    ink: {
+      true: 'text-ink',
+      false: '',
+    },
+    sticky: {
+      // Sticky cells inherit the row's background via bg-inherit so the
+      // alternating-zebra + hover states pass through.
+      left: 'sticky left-0 z-[1] bg-inherit',
+      right: 'sticky right-0 z-[1] bg-inherit',
+      false: '',
+    },
+  },
+  defaultVariants: { align: 'left', mono: false, ink: false, sticky: false },
+})
+
+export type TableCellProps = HTMLAttributes<HTMLDivElement> & {
+  width?: number | string
+  align?: 'left' | 'right' | 'center'
+  mono?: boolean
+  ink?: boolean
+  /** Pin the cell to the left or right edge during horizontal scroll. */
+  sticky?: 'left' | 'right' | false
+}
+
+export function TableCell({
+  width,
+  align,
+  mono,
+  ink,
+  sticky,
+  className,
+  style,
+  ...props
+}: TableCellProps) {
+  const widthStyle: CSSProperties = width != null ? { width, flexBasis: width } : {}
+  return (
+    <div
+      role="gridcell"
+      {...props}
+      style={{ ...widthStyle, ...style }}
+      className={cn(tableCellStyles({ align, mono, ink, sticky }), className)}
+    />
+  )
+}

package/src/components/tabs/index.ts

@@ -0,0 +1,8 @@
+export type {
+  TabsListProps,
+  TabsPanelProps,
+  TabsRootProps,
+  TabsTriggerProps,
+  TabsVariants,
+} from './tabs'
+export { Tabs, tabsStyles } from './tabs'

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,141 @@
+import type { ReactNode } from 'react'
+import {
+  Tab as AriaTab,
+  TabList as AriaTabList,
+  TabPanel as AriaTabPanel,
+  Tabs as AriaTabs,
+  type TabListProps as AriaTabListProps,
+  type TabPanelProps as AriaTabPanelProps,
+  type TabProps as AriaTabProps,
+  type TabsProps as AriaTabsProps,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Tabs — generic tab strip wrapping RAC `<Tabs>` / `<TabList>` / `<Tab>` /
+   `<TabPanel>`. Chrome only — no product knowledge. Used in the page
+   renderer's `TabsElement` and the page-designer inspector (`Style /
+   Settings / Rules`).
+
+   Sub-component form (`<Tabs.Root>` / `<Tabs.List>` / `<Tabs.Trigger>` /
+   `<Tabs.Panel>`) so each tab's content participates separately in the
+   designer drop-zone tree. The compound names follow the lib's existing
+   slot-style components (Card, Modal).
+   ========================================================================= */
+
+export const tabsStyles = tv({
+  slots: {
+    root: 'flex flex-col gap-3 outline-none',
+    list: 'flex gap-[18px] border-b border-rule pl-0.5',
+    trigger: [
+      'cursor-pointer outline-none select-none',
+      'border-b-[1.5px] -mb-px transition-[color,border-color] duration-150',
+      'text-ink-3 border-transparent',
+      'data-[hovered]:text-ink',
+      'data-[selected]:text-ink data-[selected]:border-accent',
+      'data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed',
+      'data-[focus-visible]:shadow-[var(--shadow-focus)] data-[focus-visible]:rounded-sm',
+    ],
+    panel: 'outline-none',
+  },
+  variants: {
+    size: {
+      sm: {
+        list: 'gap-3',
+        trigger:
+          'py-1.5 font-mono text-[11px] uppercase tracking-[0.08em]',
+      },
+      md: {
+        list: 'gap-[18px]',
+        trigger: 'py-2 text-[13px]',
+      },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type TabsVariants = VariantProps<typeof tabsStyles>
+
+export type TabsRootProps = Omit<AriaTabsProps, 'children'> &
+  TabsVariants & {
+    children?: ReactNode
+  }
+
+function Root({ size, className, children, ...props }: TabsRootProps) {
+  const styles = tabsStyles({ size })
+  return (
+    <AriaTabs
+      {...props}
+      className={(rp) =>
+        cn(styles.root(), typeof className === 'function' ? className(rp) : className)
+      }
+    >
+      {children}
+    </AriaTabs>
+  )
+}
+
+export type TabsListProps = Omit<AriaTabListProps<object>, 'children'> &
+  TabsVariants & {
+    children?: ReactNode
+  }
+
+function List({ size, className, children, ...props }: TabsListProps) {
+  const styles = tabsStyles({ size })
+  return (
+    <AriaTabList
+      {...(props as AriaTabListProps<object>)}
+      className={(rp) =>
+        cn(styles.list(), typeof className === 'function' ? className(rp) : className)
+      }
+    >
+      {children as never}
+    </AriaTabList>
+  )
+}
+
+export type TabsTriggerProps = Omit<AriaTabProps, 'children'> &
+  TabsVariants & {
+    children?: ReactNode
+  }
+
+function Trigger({ size, className, children, ...props }: TabsTriggerProps) {
+  const styles = tabsStyles({ size })
+  return (
+    <AriaTab
+      {...props}
+      className={(rp) =>
+        cn(styles.trigger(), typeof className === 'function' ? className(rp) : className)
+      }
+    >
+      {children}
+    </AriaTab>
+  )
+}
+
+export type TabsPanelProps = Omit<AriaTabPanelProps, 'children'> & {
+  children?: ReactNode
+}
+
+function Panel({ className, children, ...props }: TabsPanelProps) {
+  const styles = tabsStyles({})
+  return (
+    <AriaTabPanel
+      {...props}
+      className={(rp) =>
+        cn(styles.panel(), typeof className === 'function' ? className(rp) : className)
+      }
+    >
+      {children}
+    </AriaTabPanel>
+  )
+}
+
+export const Tabs = Object.assign(Root, {
+  Root,
+  List,
+  Trigger,
+  Panel,
+})

package/src/components/tag-input/index.ts

@@ -0,0 +1,2 @@
+export type { TagInputProps } from './tag-input'
+export { TagInput } from './tag-input'