@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/dist/components/Table.cjs.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
-const Txt = require('../Txt-C7rZCmrg.cjs');
+const Txt = require('../Txt-B4-2nLaI.cjs');
 
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
@@ -16,14 +16,14 @@ const Table = ({ className, children, size = "default", style }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("table", { className: utils_cn.cn("w-full", rowSize[size], className), style, children });
 };
 const Thead = ({ className, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: utils_cn.cn("h-table-header border-b border-border1 bg-surface2/80", className), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: utils_cn.cn("h-table-header border-b border-border bg-card", className), children }) });
 };
 const Th = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
       className: utils_cn.cn(
-        "h-full text-left text-ui-xs font-medium tracking-wide whitespace-nowrap text-neutral2 uppercase first:pl-3 last:pr-3",
+        "h-full text-left text-meta tracking-wide whitespace-nowrap text-placeholder uppercase first:pl-3 last:pr-3",
         className
       ),
       ...props,
@@ -60,13 +60,13 @@ const Row = React.forwardRef(
       "tr",
       {
         className: utils_cn.cn(
-          "border-b border-border1",
+          "border-b border-border",
           // Smooth hover transition
           "transition-colors duration-normal ease-out-custom",
-          "hover:bg-surface3",
+          "hover:bg-fill-subtle",
           // Focus state
-          "focus:bg-surface3 focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset",
-          selected && "bg-surface4",
+          "focus:bg-fill-subtle focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset",
+          selected && "bg-fill-hover",
           onClick && "cursor-pointer",
           className
         ),
@@ -98,25 +98,25 @@ const formatDateCell = (date) => {
 };
 
 const Cell = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: utils_cn.cn("text-neutral5 first:pl-3 last:pr-3", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex size-full shrink-0 items-center"), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: utils_cn.cn("text-foreground first:pl-3 last:pr-3", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex size-full shrink-0 items-center"), children }) });
 };
 const TxtCell = ({ className, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className, children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-smd", className: "w-full truncate", children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className, children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body-sm", className: "w-full truncate", children }) });
 };
 const DateTimeCell = ({ dateTime, ...props }) => {
   const { day, time } = formatDateCell(dateTime);
   return /* @__PURE__ */ jsxRuntime.jsx(Cell, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-sm", className: "text-neutral3", children: day }),
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", children: day }),
     " ",
-    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-md", children: time })
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body", children: time })
   ] }) });
 };
 const EntryCell = ({ name, description, icon, meta, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Cell, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3.5", children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "lg", className: "text-neutral5", children: icon }),
+    icon && /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "lg", className: "text-foreground", children: icon }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-md", className: "text-neutral6", children: name }),
-      description && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-xs", className: "max-w-dropdown-max-height text-neutral3 w-full truncate pt-1", children: description })
+      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body", tone: "ink", children: name }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "muted", className: "w-full max-w-75 truncate pt-1", children: description })
     ] }),
     meta
   ] }) });

package/dist/components/Table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs.js","sources":["../../src/ds/components/Table/Table.tsx","../../src/ds/components/Table/utils.ts","../../src/ds/components/Table/Cells.tsx","../../src/ds/components/Table/use-table-keyboard-navigation.ts"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode, ThHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TableProps {\n  className?: string;\n  children: ReactNode;\n  size?: 'default' | 'small';\n  style?: CSSProperties;\n}\n\nconst rowSize = {\n  default: '[&>tbody>tr]:h-table-row',\n  small: '[&>tbody>tr]:h-table-row-small',\n};\n\nexport const Table = ({ className, children, size = 'default', style }: TableProps) => {\n  return (\n    <table className={cn('w-full', rowSize[size], className)} style={style}>\n      {children}\n    </table>\n  );\n};\n\nexport interface TheadProps {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Thead = ({ className, children }: TheadProps) => {\n  return (\n    <thead>\n      <tr className={cn('h-table-header border-b border-border1 bg-surface2/80', className)}>{children}</tr>\n    </thead>\n  );\n};\n\nexport interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\nexport const Th = ({ className, children, ...props }: ThProps) => {\n  return (\n    <th\n      className={cn(\n        'h-full text-left text-ui-xs font-medium tracking-wide whitespace-nowrap text-neutral2 uppercase first:pl-3 last:pr-3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport interface TbodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Tbody = ({ className, children, ...props }: TbodyProps) => {\n  return (\n    <tbody className={cn('', className)} {...props}>\n      {children}\n    </tbody>\n  );\n};\n\nexport interface RowProps {\n  className?: string;\n  children: ReactNode;\n  selected?: boolean;\n  style?: CSSProperties;\n  onClick?: () => void;\n  tabIndex?: number;\n  /** When true, row receives focus and scrolls into view */\n  isActive?: boolean;\n}\n\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(\n  ({ className, children, selected = false, style, onClick, isActive = false, ...props }, ref) => {\n    const internalRef = useRef<HTMLTableRowElement>(null);\n\n    // Merge forwarded ref with internal ref\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else {\n        ref.current = internalRef.current;\n      }\n    }, [ref]);\n\n    // Focus and scroll into view when active\n    useEffect(() => {\n      if (isActive && internalRef.current) {\n        internalRef.current.focus();\n        internalRef.current.scrollIntoView({ block: 'nearest' });\n      }\n    }, [isActive]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n      if (event.key === 'Enter' && onClick) {\n        onClick();\n      }\n    };\n\n    return (\n      <tr\n        className={cn(\n          'border-b border-border1',\n          // Smooth hover transition\n          'transition-colors duration-normal ease-out-custom',\n          'hover:bg-surface3',\n          // Focus state\n          'focus:bg-surface3 focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset',\n          selected && 'bg-surface4',\n          onClick && 'cursor-pointer',\n          className,\n        )}\n        style={style}\n        onClick={onClick}\n        ref={internalRef}\n        tabIndex={onClick ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        data-active={isActive || undefined}\n        {...props}\n      >\n        {children}\n      </tr>\n    );\n  },\n);\n","export const formatDateCell = (date: Date) => {\n  // Format the month as a short text representation\n  const month = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(date).toUpperCase();\n  const day = date.getDate();\n\n  const formattedDay = `${month} ${day}`;\n\n  const time = new Intl.DateTimeFormat('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n    hour12: false, // Use 24-hour format\n  }).format(date);\n\n  return { day: formattedDay, time };\n};\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { Txt } from '../Txt';\nimport { formatDateCell } from './utils';\nimport { cn } from '@/lib/utils';\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const Cell = ({ className, children, ...props }: CellProps) => {\n  return (\n    <td className={cn('text-neutral5 first:pl-3 last:pr-3', className)} {...props}>\n      <div className={cn('flex size-full shrink-0 items-center')}>{children}</div>\n    </td>\n  );\n};\n\nexport const TxtCell = ({ className, children }: CellProps) => {\n  return (\n    <Cell className={className}>\n      <Txt as=\"span\" variant=\"ui-smd\" className=\"w-full truncate\">\n        {children}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface DateTimeCellProps extends Omit<CellProps, 'children'> {\n  dateTime: Date;\n}\n\nexport const DateTimeCell = ({ dateTime, ...props }: DateTimeCellProps) => {\n  const { day, time } = formatDateCell(dateTime);\n\n  return (\n    <Cell {...props}>\n      <div className=\"shrink-0\">\n        <Txt as=\"span\" variant=\"ui-sm\" className=\"text-neutral3\">\n          {day}\n        </Txt>{' '}\n        <Txt as=\"span\" variant=\"ui-md\">\n          {time}\n        </Txt>\n      </div>\n    </Cell>\n  );\n};\n\nexport interface EntryCellProps extends Omit<CellProps, 'children'> {\n  name: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  meta?: React.ReactNode;\n}\n\nexport const EntryCell = ({ name, description, icon, meta, ...props }: EntryCellProps) => {\n  return (\n    <Cell {...props}>\n      <div className=\"flex items-center gap-3.5\">\n        {icon && (\n          <Icon size=\"lg\" className=\"text-neutral5\">\n            {icon}\n          </Icon>\n        )}\n\n        <div className=\"flex flex-col gap-0\">\n          <Txt as=\"span\" variant=\"ui-md\" className=\"text-neutral6\">\n            {name}\n          </Txt>\n          {description && (\n            <Txt as=\"span\" variant=\"ui-xs\" className=\"max-w-dropdown-max-height text-neutral3 w-full truncate pt-1\">\n              {description}\n            </Txt>\n          )}\n        </div>\n        {meta}\n      </div>\n    </Cell>\n  );\n};\n","import { useState, useCallback, useEffect } from 'react';\n\nexport interface UseTableKeyboardNavigationOptions {\n  /** Number of items in the list */\n  itemCount: number;\n  /** Initial active index (-1 = none) */\n  initialIndex?: number;\n  /** Wrap around at boundaries */\n  wrap?: boolean;\n  /** Callback when Enter pressed on active row */\n  onSelect?: (index: number) => void;\n  /** When true, registers keyboard handlers globally on the document */\n  global?: boolean;\n}\n\nexport interface UseTableKeyboardNavigationReturn {\n  /** Currently active index (-1 if none) */\n  activeIndex: number;\n  /** Set active index programmatically */\n  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n  /** Returns props to spread on the Tbody element. Returns null when global is true. */\n  getKeyboardProps: () => { onKeyDown: (e: React.KeyboardEvent) => void; tabIndex: number } | null;\n}\n\nexport function useTableKeyboardNavigation({\n  itemCount,\n  initialIndex = -1,\n  wrap = false,\n  onSelect,\n  global = false,\n}: UseTableKeyboardNavigationOptions): UseTableKeyboardNavigationReturn {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent | React.KeyboardEvent) => {\n      // No-op for empty list\n      if (itemCount === 0) return;\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return 0;\n            if (prev >= itemCount - 1) {\n              return wrap ? 0 : itemCount - 1;\n            }\n            return prev + 1;\n          });\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return itemCount - 1;\n            if (prev <= 0) {\n              return wrap ? itemCount - 1 : 0;\n            }\n            return prev - 1;\n          });\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          setActiveIndex(0);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          setActiveIndex(itemCount - 1);\n          break;\n        }\n        case 'Enter': {\n          if (activeIndex >= 0 && onSelect) {\n            e.preventDefault();\n            onSelect(activeIndex);\n          }\n          break;\n        }\n      }\n    },\n    [itemCount, wrap, activeIndex, onSelect],\n  );\n\n  // Register global keyboard handlers when global option is enabled\n  useEffect(() => {\n    if (!global) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [global, handleKeyDown]);\n\n  const getKeyboardProps = useCallback(() => {\n    if (global) return null;\n    return { onKeyDown: handleKeyDown as (e: React.KeyboardEvent) => void, tabIndex: 0 };\n  }, [global, handleKeyDown]);\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    getKeyboardProps,\n  };\n}\n"],"names":["jsx","cn","forwardRef","useRef","useEffect","Txt","jsxs","Icon","useState","useCallback"],"mappings":"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"}
+{"version":3,"file":"Table.cjs.js","sources":["../../src/ds/components/Table/Table.tsx","../../src/ds/components/Table/utils.ts","../../src/ds/components/Table/Cells.tsx","../../src/ds/components/Table/use-table-keyboard-navigation.ts"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode, ThHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TableProps {\n  className?: string;\n  children: ReactNode;\n  size?: 'default' | 'small';\n  style?: CSSProperties;\n}\n\nconst rowSize = {\n  default: '[&>tbody>tr]:h-table-row',\n  small: '[&>tbody>tr]:h-table-row-small',\n};\n\nexport const Table = ({ className, children, size = 'default', style }: TableProps) => {\n  return (\n    <table className={cn('w-full', rowSize[size], className)} style={style}>\n      {children}\n    </table>\n  );\n};\n\nexport interface TheadProps {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Thead = ({ className, children }: TheadProps) => {\n  return (\n    <thead>\n      <tr className={cn('h-table-header border-b border-border bg-card', className)}>{children}</tr>\n    </thead>\n  );\n};\n\nexport interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\nexport const Th = ({ className, children, ...props }: ThProps) => {\n  return (\n    <th\n      className={cn(\n        'h-full text-left text-meta tracking-wide whitespace-nowrap text-placeholder uppercase first:pl-3 last:pr-3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport interface TbodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Tbody = ({ className, children, ...props }: TbodyProps) => {\n  return (\n    <tbody className={cn('', className)} {...props}>\n      {children}\n    </tbody>\n  );\n};\n\nexport interface RowProps {\n  className?: string;\n  children: ReactNode;\n  selected?: boolean;\n  style?: CSSProperties;\n  onClick?: () => void;\n  tabIndex?: number;\n  /** When true, row receives focus and scrolls into view */\n  isActive?: boolean;\n}\n\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(\n  ({ className, children, selected = false, style, onClick, isActive = false, ...props }, ref) => {\n    const internalRef = useRef<HTMLTableRowElement>(null);\n\n    // Merge forwarded ref with internal ref\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else {\n        ref.current = internalRef.current;\n      }\n    }, [ref]);\n\n    // Focus and scroll into view when active\n    useEffect(() => {\n      if (isActive && internalRef.current) {\n        internalRef.current.focus();\n        internalRef.current.scrollIntoView({ block: 'nearest' });\n      }\n    }, [isActive]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n      if (event.key === 'Enter' && onClick) {\n        onClick();\n      }\n    };\n\n    return (\n      <tr\n        className={cn(\n          'border-b border-border',\n          // Smooth hover transition\n          'transition-colors duration-normal ease-out-custom',\n          'hover:bg-fill-subtle',\n          // Focus state\n          'focus:bg-fill-subtle focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset',\n          selected && 'bg-fill-hover',\n          onClick && 'cursor-pointer',\n          className,\n        )}\n        style={style}\n        onClick={onClick}\n        ref={internalRef}\n        tabIndex={onClick ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        data-active={isActive || undefined}\n        {...props}\n      >\n        {children}\n      </tr>\n    );\n  },\n);\n","export const formatDateCell = (date: Date) => {\n  // Format the month as a short text representation\n  const month = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(date).toUpperCase();\n  const day = date.getDate();\n\n  const formattedDay = `${month} ${day}`;\n\n  const time = new Intl.DateTimeFormat('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n    hour12: false, // Use 24-hour format\n  }).format(date);\n\n  return { day: formattedDay, time };\n};\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { Txt } from '../Txt';\nimport { formatDateCell } from './utils';\nimport { cn } from '@/lib/utils';\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const Cell = ({ className, children, ...props }: CellProps) => {\n  return (\n    <td className={cn('text-foreground first:pl-3 last:pr-3', className)} {...props}>\n      <div className={cn('flex size-full shrink-0 items-center')}>{children}</div>\n    </td>\n  );\n};\n\nexport const TxtCell = ({ className, children }: CellProps) => {\n  return (\n    <Cell className={className}>\n      <Txt as=\"span\" variant=\"body-sm\" className=\"w-full truncate\">\n        {children}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface DateTimeCellProps extends Omit<CellProps, 'children'> {\n  dateTime: Date;\n}\n\nexport const DateTimeCell = ({ dateTime, ...props }: DateTimeCellProps) => {\n  const { day, time } = formatDateCell(dateTime);\n\n  return (\n    <Cell {...props}>\n      <div className=\"shrink-0\">\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n          {day}\n        </Txt>{' '}\n        <Txt as=\"span\" variant=\"body\">\n          {time}\n        </Txt>\n      </div>\n    </Cell>\n  );\n};\n\nexport interface EntryCellProps extends Omit<CellProps, 'children'> {\n  name: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  meta?: React.ReactNode;\n}\n\nexport const EntryCell = ({ name, description, icon, meta, ...props }: EntryCellProps) => {\n  return (\n    <Cell {...props}>\n      <div className=\"flex items-center gap-3.5\">\n        {icon && (\n          <Icon size=\"lg\" className=\"text-foreground\">\n            {icon}\n          </Icon>\n        )}\n\n        <div className=\"flex flex-col gap-0\">\n          <Txt as=\"span\" variant=\"body\" tone=\"ink\">\n            {name}\n          </Txt>\n          {description && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"w-full max-w-75 truncate pt-1\">\n              {description}\n            </Txt>\n          )}\n        </div>\n        {meta}\n      </div>\n    </Cell>\n  );\n};\n","import { useState, useCallback, useEffect } from 'react';\n\nexport interface UseTableKeyboardNavigationOptions {\n  /** Number of items in the list */\n  itemCount: number;\n  /** Initial active index (-1 = none) */\n  initialIndex?: number;\n  /** Wrap around at boundaries */\n  wrap?: boolean;\n  /** Callback when Enter pressed on active row */\n  onSelect?: (index: number) => void;\n  /** When true, registers keyboard handlers globally on the document */\n  global?: boolean;\n}\n\nexport interface UseTableKeyboardNavigationReturn {\n  /** Currently active index (-1 if none) */\n  activeIndex: number;\n  /** Set active index programmatically */\n  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n  /** Returns props to spread on the Tbody element. Returns null when global is true. */\n  getKeyboardProps: () => { onKeyDown: (e: React.KeyboardEvent) => void; tabIndex: number } | null;\n}\n\nexport function useTableKeyboardNavigation({\n  itemCount,\n  initialIndex = -1,\n  wrap = false,\n  onSelect,\n  global = false,\n}: UseTableKeyboardNavigationOptions): UseTableKeyboardNavigationReturn {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent | React.KeyboardEvent) => {\n      // No-op for empty list\n      if (itemCount === 0) return;\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return 0;\n            if (prev >= itemCount - 1) {\n              return wrap ? 0 : itemCount - 1;\n            }\n            return prev + 1;\n          });\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return itemCount - 1;\n            if (prev <= 0) {\n              return wrap ? itemCount - 1 : 0;\n            }\n            return prev - 1;\n          });\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          setActiveIndex(0);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          setActiveIndex(itemCount - 1);\n          break;\n        }\n        case 'Enter': {\n          if (activeIndex >= 0 && onSelect) {\n            e.preventDefault();\n            onSelect(activeIndex);\n          }\n          break;\n        }\n      }\n    },\n    [itemCount, wrap, activeIndex, onSelect],\n  );\n\n  // Register global keyboard handlers when global option is enabled\n  useEffect(() => {\n    if (!global) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [global, handleKeyDown]);\n\n  const getKeyboardProps = useCallback(() => {\n    if (global) return null;\n    return { onKeyDown: handleKeyDown as (e: React.KeyboardEvent) => void, tabIndex: 0 };\n  }, [global, handleKeyDown]);\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    getKeyboardProps,\n  };\n}\n"],"names":["jsx","cn","forwardRef","useRef","useEffect","Txt","jsxs","Icon","useState","useCallback"],"mappings":"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"}

package/dist/components/Table.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useEffect, useState, useCallback } from 'react';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 import { Icon } from '../icons/Icon.es.js';
-import { T as Txt } from '../Txt-hyo2FKuO.js';
+import { T as Txt } from '../Txt-DTh3Pa_a.js';
 
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
@@ -12,14 +12,14 @@ const Table = ({ className, children, size = "default", style }) => {
   return /* @__PURE__ */ jsx("table", { className: cn("w-full", rowSize[size], className), style, children });
 };
 const Thead = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: cn("h-table-header border-b border-border1 bg-surface2/80", className), children }) });
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: cn("h-table-header border-b border-border bg-card", className), children }) });
 };
 const Th = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsx(
     "th",
     {
       className: cn(
-        "h-full text-left text-ui-xs font-medium tracking-wide whitespace-nowrap text-neutral2 uppercase first:pl-3 last:pr-3",
+        "h-full text-left text-meta tracking-wide whitespace-nowrap text-placeholder uppercase first:pl-3 last:pr-3",
         className
       ),
       ...props,
@@ -56,13 +56,13 @@ const Row = forwardRef(
       "tr",
       {
         className: cn(
-          "border-b border-border1",
+          "border-b border-border",
           // Smooth hover transition
           "transition-colors duration-normal ease-out-custom",
-          "hover:bg-surface3",
+          "hover:bg-fill-subtle",
           // Focus state
-          "focus:bg-surface3 focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset",
-          selected && "bg-surface4",
+          "focus:bg-fill-subtle focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset",
+          selected && "bg-fill-hover",
           onClick && "cursor-pointer",
           className
         ),
@@ -94,25 +94,25 @@ const formatDateCell = (date) => {
 };
 
 const Cell = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsx("td", { className: cn("text-neutral5 first:pl-3 last:pr-3", className), ...props, children: /* @__PURE__ */ jsx("div", { className: cn("flex size-full shrink-0 items-center"), children }) });
+  return /* @__PURE__ */ jsx("td", { className: cn("text-foreground first:pl-3 last:pr-3", className), ...props, children: /* @__PURE__ */ jsx("div", { className: cn("flex size-full shrink-0 items-center"), children }) });
 };
 const TxtCell = ({ className, children }) => {
-  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-smd", className: "w-full truncate", children }) });
+  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body-sm", className: "w-full truncate", children }) });
 };
 const DateTimeCell = ({ dateTime, ...props }) => {
   const { day, time } = formatDateCell(dateTime);
   return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-neutral3", children: day }),
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", tone: "muted", children: day }),
     " ",
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", children: time })
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body", children: time })
   ] }) });
 };
 const EntryCell = ({ name, description, icon, meta, ...props }) => {
   return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3.5", children: [
-    icon && /* @__PURE__ */ jsx(Icon, { size: "lg", className: "text-neutral5", children: icon }),
+    icon && /* @__PURE__ */ jsx(Icon, { size: "lg", className: "text-foreground", children: icon }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
-      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "text-neutral6", children: name }),
-      description && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-xs", className: "max-w-dropdown-max-height text-neutral3 w-full truncate pt-1", children: description })
+      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body", tone: "ink", children: name }),
+      description && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "muted", className: "w-full max-w-75 truncate pt-1", children: description })
     ] }),
     meta
   ] }) });

package/dist/components/Table.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.es.js","sources":["../../src/ds/components/Table/Table.tsx","../../src/ds/components/Table/utils.ts","../../src/ds/components/Table/Cells.tsx","../../src/ds/components/Table/use-table-keyboard-navigation.ts"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode, ThHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TableProps {\n  className?: string;\n  children: ReactNode;\n  size?: 'default' | 'small';\n  style?: CSSProperties;\n}\n\nconst rowSize = {\n  default: '[&>tbody>tr]:h-table-row',\n  small: '[&>tbody>tr]:h-table-row-small',\n};\n\nexport const Table = ({ className, children, size = 'default', style }: TableProps) => {\n  return (\n    <table className={cn('w-full', rowSize[size], className)} style={style}>\n      {children}\n    </table>\n  );\n};\n\nexport interface TheadProps {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Thead = ({ className, children }: TheadProps) => {\n  return (\n    <thead>\n      <tr className={cn('h-table-header border-b border-border1 bg-surface2/80', className)}>{children}</tr>\n    </thead>\n  );\n};\n\nexport interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\nexport const Th = ({ className, children, ...props }: ThProps) => {\n  return (\n    <th\n      className={cn(\n        'h-full text-left text-ui-xs font-medium tracking-wide whitespace-nowrap text-neutral2 uppercase first:pl-3 last:pr-3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport interface TbodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Tbody = ({ className, children, ...props }: TbodyProps) => {\n  return (\n    <tbody className={cn('', className)} {...props}>\n      {children}\n    </tbody>\n  );\n};\n\nexport interface RowProps {\n  className?: string;\n  children: ReactNode;\n  selected?: boolean;\n  style?: CSSProperties;\n  onClick?: () => void;\n  tabIndex?: number;\n  /** When true, row receives focus and scrolls into view */\n  isActive?: boolean;\n}\n\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(\n  ({ className, children, selected = false, style, onClick, isActive = false, ...props }, ref) => {\n    const internalRef = useRef<HTMLTableRowElement>(null);\n\n    // Merge forwarded ref with internal ref\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else {\n        ref.current = internalRef.current;\n      }\n    }, [ref]);\n\n    // Focus and scroll into view when active\n    useEffect(() => {\n      if (isActive && internalRef.current) {\n        internalRef.current.focus();\n        internalRef.current.scrollIntoView({ block: 'nearest' });\n      }\n    }, [isActive]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n      if (event.key === 'Enter' && onClick) {\n        onClick();\n      }\n    };\n\n    return (\n      <tr\n        className={cn(\n          'border-b border-border1',\n          // Smooth hover transition\n          'transition-colors duration-normal ease-out-custom',\n          'hover:bg-surface3',\n          // Focus state\n          'focus:bg-surface3 focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset',\n          selected && 'bg-surface4',\n          onClick && 'cursor-pointer',\n          className,\n        )}\n        style={style}\n        onClick={onClick}\n        ref={internalRef}\n        tabIndex={onClick ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        data-active={isActive || undefined}\n        {...props}\n      >\n        {children}\n      </tr>\n    );\n  },\n);\n","export const formatDateCell = (date: Date) => {\n  // Format the month as a short text representation\n  const month = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(date).toUpperCase();\n  const day = date.getDate();\n\n  const formattedDay = `${month} ${day}`;\n\n  const time = new Intl.DateTimeFormat('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n    hour12: false, // Use 24-hour format\n  }).format(date);\n\n  return { day: formattedDay, time };\n};\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { Txt } from '../Txt';\nimport { formatDateCell } from './utils';\nimport { cn } from '@/lib/utils';\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const Cell = ({ className, children, ...props }: CellProps) => {\n  return (\n    <td className={cn('text-neutral5 first:pl-3 last:pr-3', className)} {...props}>\n      <div className={cn('flex size-full shrink-0 items-center')}>{children}</div>\n    </td>\n  );\n};\n\nexport const TxtCell = ({ className, children }: CellProps) => {\n  return (\n    <Cell className={className}>\n      <Txt as=\"span\" variant=\"ui-smd\" className=\"w-full truncate\">\n        {children}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface DateTimeCellProps extends Omit<CellProps, 'children'> {\n  dateTime: Date;\n}\n\nexport const DateTimeCell = ({ dateTime, ...props }: DateTimeCellProps) => {\n  const { day, time } = formatDateCell(dateTime);\n\n  return (\n    <Cell {...props}>\n      <div className=\"shrink-0\">\n        <Txt as=\"span\" variant=\"ui-sm\" className=\"text-neutral3\">\n          {day}\n        </Txt>{' '}\n        <Txt as=\"span\" variant=\"ui-md\">\n          {time}\n        </Txt>\n      </div>\n    </Cell>\n  );\n};\n\nexport interface EntryCellProps extends Omit<CellProps, 'children'> {\n  name: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  meta?: React.ReactNode;\n}\n\nexport const EntryCell = ({ name, description, icon, meta, ...props }: EntryCellProps) => {\n  return (\n    <Cell {...props}>\n      <div className=\"flex items-center gap-3.5\">\n        {icon && (\n          <Icon size=\"lg\" className=\"text-neutral5\">\n            {icon}\n          </Icon>\n        )}\n\n        <div className=\"flex flex-col gap-0\">\n          <Txt as=\"span\" variant=\"ui-md\" className=\"text-neutral6\">\n            {name}\n          </Txt>\n          {description && (\n            <Txt as=\"span\" variant=\"ui-xs\" className=\"max-w-dropdown-max-height text-neutral3 w-full truncate pt-1\">\n              {description}\n            </Txt>\n          )}\n        </div>\n        {meta}\n      </div>\n    </Cell>\n  );\n};\n","import { useState, useCallback, useEffect } from 'react';\n\nexport interface UseTableKeyboardNavigationOptions {\n  /** Number of items in the list */\n  itemCount: number;\n  /** Initial active index (-1 = none) */\n  initialIndex?: number;\n  /** Wrap around at boundaries */\n  wrap?: boolean;\n  /** Callback when Enter pressed on active row */\n  onSelect?: (index: number) => void;\n  /** When true, registers keyboard handlers globally on the document */\n  global?: boolean;\n}\n\nexport interface UseTableKeyboardNavigationReturn {\n  /** Currently active index (-1 if none) */\n  activeIndex: number;\n  /** Set active index programmatically */\n  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n  /** Returns props to spread on the Tbody element. Returns null when global is true. */\n  getKeyboardProps: () => { onKeyDown: (e: React.KeyboardEvent) => void; tabIndex: number } | null;\n}\n\nexport function useTableKeyboardNavigation({\n  itemCount,\n  initialIndex = -1,\n  wrap = false,\n  onSelect,\n  global = false,\n}: UseTableKeyboardNavigationOptions): UseTableKeyboardNavigationReturn {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent | React.KeyboardEvent) => {\n      // No-op for empty list\n      if (itemCount === 0) return;\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return 0;\n            if (prev >= itemCount - 1) {\n              return wrap ? 0 : itemCount - 1;\n            }\n            return prev + 1;\n          });\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return itemCount - 1;\n            if (prev <= 0) {\n              return wrap ? itemCount - 1 : 0;\n            }\n            return prev - 1;\n          });\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          setActiveIndex(0);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          setActiveIndex(itemCount - 1);\n          break;\n        }\n        case 'Enter': {\n          if (activeIndex >= 0 && onSelect) {\n            e.preventDefault();\n            onSelect(activeIndex);\n          }\n          break;\n        }\n      }\n    },\n    [itemCount, wrap, activeIndex, onSelect],\n  );\n\n  // Register global keyboard handlers when global option is enabled\n  useEffect(() => {\n    if (!global) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [global, handleKeyDown]);\n\n  const getKeyboardProps = useCallback(() => {\n    if (global) return null;\n    return { onKeyDown: handleKeyDown as (e: React.KeyboardEvent) => void, tabIndex: 0 };\n  }, [global, handleKeyDown]);\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    getKeyboardProps,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.es.js","sources":["../../src/ds/components/Table/Table.tsx","../../src/ds/components/Table/utils.ts","../../src/ds/components/Table/Cells.tsx","../../src/ds/components/Table/use-table-keyboard-navigation.ts"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode, ThHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TableProps {\n  className?: string;\n  children: ReactNode;\n  size?: 'default' | 'small';\n  style?: CSSProperties;\n}\n\nconst rowSize = {\n  default: '[&>tbody>tr]:h-table-row',\n  small: '[&>tbody>tr]:h-table-row-small',\n};\n\nexport const Table = ({ className, children, size = 'default', style }: TableProps) => {\n  return (\n    <table className={cn('w-full', rowSize[size], className)} style={style}>\n      {children}\n    </table>\n  );\n};\n\nexport interface TheadProps {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Thead = ({ className, children }: TheadProps) => {\n  return (\n    <thead>\n      <tr className={cn('h-table-header border-b border-border bg-card', className)}>{children}</tr>\n    </thead>\n  );\n};\n\nexport interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\nexport const Th = ({ className, children, ...props }: ThProps) => {\n  return (\n    <th\n      className={cn(\n        'h-full text-left text-meta tracking-wide whitespace-nowrap text-placeholder uppercase first:pl-3 last:pr-3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport interface TbodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Tbody = ({ className, children, ...props }: TbodyProps) => {\n  return (\n    <tbody className={cn('', className)} {...props}>\n      {children}\n    </tbody>\n  );\n};\n\nexport interface RowProps {\n  className?: string;\n  children: ReactNode;\n  selected?: boolean;\n  style?: CSSProperties;\n  onClick?: () => void;\n  tabIndex?: number;\n  /** When true, row receives focus and scrolls into view */\n  isActive?: boolean;\n}\n\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(\n  ({ className, children, selected = false, style, onClick, isActive = false, ...props }, ref) => {\n    const internalRef = useRef<HTMLTableRowElement>(null);\n\n    // Merge forwarded ref with internal ref\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else {\n        ref.current = internalRef.current;\n      }\n    }, [ref]);\n\n    // Focus and scroll into view when active\n    useEffect(() => {\n      if (isActive && internalRef.current) {\n        internalRef.current.focus();\n        internalRef.current.scrollIntoView({ block: 'nearest' });\n      }\n    }, [isActive]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n      if (event.key === 'Enter' && onClick) {\n        onClick();\n      }\n    };\n\n    return (\n      <tr\n        className={cn(\n          'border-b border-border',\n          // Smooth hover transition\n          'transition-colors duration-normal ease-out-custom',\n          'hover:bg-fill-subtle',\n          // Focus state\n          'focus:bg-fill-subtle focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset',\n          selected && 'bg-fill-hover',\n          onClick && 'cursor-pointer',\n          className,\n        )}\n        style={style}\n        onClick={onClick}\n        ref={internalRef}\n        tabIndex={onClick ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        data-active={isActive || undefined}\n        {...props}\n      >\n        {children}\n      </tr>\n    );\n  },\n);\n","export const formatDateCell = (date: Date) => {\n  // Format the month as a short text representation\n  const month = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(date).toUpperCase();\n  const day = date.getDate();\n\n  const formattedDay = `${month} ${day}`;\n\n  const time = new Intl.DateTimeFormat('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n    hour12: false, // Use 24-hour format\n  }).format(date);\n\n  return { day: formattedDay, time };\n};\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { Txt } from '../Txt';\nimport { formatDateCell } from './utils';\nimport { cn } from '@/lib/utils';\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const Cell = ({ className, children, ...props }: CellProps) => {\n  return (\n    <td className={cn('text-foreground first:pl-3 last:pr-3', className)} {...props}>\n      <div className={cn('flex size-full shrink-0 items-center')}>{children}</div>\n    </td>\n  );\n};\n\nexport const TxtCell = ({ className, children }: CellProps) => {\n  return (\n    <Cell className={className}>\n      <Txt as=\"span\" variant=\"body-sm\" className=\"w-full truncate\">\n        {children}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface DateTimeCellProps extends Omit<CellProps, 'children'> {\n  dateTime: Date;\n}\n\nexport const DateTimeCell = ({ dateTime, ...props }: DateTimeCellProps) => {\n  const { day, time } = formatDateCell(dateTime);\n\n  return (\n    <Cell {...props}>\n      <div className=\"shrink-0\">\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n          {day}\n        </Txt>{' '}\n        <Txt as=\"span\" variant=\"body\">\n          {time}\n        </Txt>\n      </div>\n    </Cell>\n  );\n};\n\nexport interface EntryCellProps extends Omit<CellProps, 'children'> {\n  name: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  meta?: React.ReactNode;\n}\n\nexport const EntryCell = ({ name, description, icon, meta, ...props }: EntryCellProps) => {\n  return (\n    <Cell {...props}>\n      <div className=\"flex items-center gap-3.5\">\n        {icon && (\n          <Icon size=\"lg\" className=\"text-foreground\">\n            {icon}\n          </Icon>\n        )}\n\n        <div className=\"flex flex-col gap-0\">\n          <Txt as=\"span\" variant=\"body\" tone=\"ink\">\n            {name}\n          </Txt>\n          {description && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"w-full max-w-75 truncate pt-1\">\n              {description}\n            </Txt>\n          )}\n        </div>\n        {meta}\n      </div>\n    </Cell>\n  );\n};\n","import { useState, useCallback, useEffect } from 'react';\n\nexport interface UseTableKeyboardNavigationOptions {\n  /** Number of items in the list */\n  itemCount: number;\n  /** Initial active index (-1 = none) */\n  initialIndex?: number;\n  /** Wrap around at boundaries */\n  wrap?: boolean;\n  /** Callback when Enter pressed on active row */\n  onSelect?: (index: number) => void;\n  /** When true, registers keyboard handlers globally on the document */\n  global?: boolean;\n}\n\nexport interface UseTableKeyboardNavigationReturn {\n  /** Currently active index (-1 if none) */\n  activeIndex: number;\n  /** Set active index programmatically */\n  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n  /** Returns props to spread on the Tbody element. Returns null when global is true. */\n  getKeyboardProps: () => { onKeyDown: (e: React.KeyboardEvent) => void; tabIndex: number } | null;\n}\n\nexport function useTableKeyboardNavigation({\n  itemCount,\n  initialIndex = -1,\n  wrap = false,\n  onSelect,\n  global = false,\n}: UseTableKeyboardNavigationOptions): UseTableKeyboardNavigationReturn {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent | React.KeyboardEvent) => {\n      // No-op for empty list\n      if (itemCount === 0) return;\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return 0;\n            if (prev >= itemCount - 1) {\n              return wrap ? 0 : itemCount - 1;\n            }\n            return prev + 1;\n          });\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return itemCount - 1;\n            if (prev <= 0) {\n              return wrap ? itemCount - 1 : 0;\n            }\n            return prev - 1;\n          });\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          setActiveIndex(0);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          setActiveIndex(itemCount - 1);\n          break;\n        }\n        case 'Enter': {\n          if (activeIndex >= 0 && onSelect) {\n            e.preventDefault();\n            onSelect(activeIndex);\n          }\n          break;\n        }\n      }\n    },\n    [itemCount, wrap, activeIndex, onSelect],\n  );\n\n  // Register global keyboard handlers when global option is enabled\n  useEffect(() => {\n    if (!global) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [global, handleKeyDown]);\n\n  const getKeyboardProps = useCallback(() => {\n    if (global) return null;\n    return { onKeyDown: handleKeyDown as (e: React.KeyboardEvent) => void, tabIndex: 0 };\n  }, [global, handleKeyDown]);\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    getKeyboardProps,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Tabs.cjs.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const tabsRoot = require('../tabs-root-DcnvZuD4.cjs');
-const tabsTab = require('../tabs-tab-tRgFBx85.cjs');
-const tabsContent = require('../tabs-content-CRKte85r.cjs');
+const tabsRoot = require('../tabs-root-C5ABfm1F.cjs');
+const tabsTab = require('../tabs-tab-DA466DbX.cjs');
+const tabsContent = require('../tabs-content-Bz6CZuv9.cjs');
 
 
 

package/dist/components/Tabs.es.js

@@ -1,4 +1,4 @@
-export { T as TabList, a as Tabs } from '../tabs-root-yY2eNDS2.js';
-export { T as Tab } from '../tabs-tab-CgMaandp.js';
-export { T as TabContent } from '../tabs-content-Drm6Y6Ul.js';
+export { T as TabList, a as Tabs } from '../tabs-root-CcEQrwTM.js';
+export { T as Tab } from '../tabs-tab-BycF4dvx.js';
+export { T as TabContent } from '../tabs-content-CKC4kIpH.js';
 //# sourceMappingURL=Tabs.es.js.map

package/dist/components/Text.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function TextAndIcon({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/Text.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 function TextAndIcon({ children, className }) {
   return /* @__PURE__ */ jsx(

package/dist/components/Textarea.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const textarea = require('../textarea-C7vLvn3E.cjs');
+const textarea = require('../textarea-5b6XcMrq.cjs');
 
 
 

package/dist/components/Textarea.es.js

@@ -1,2 +1,2 @@
-export { T as Textarea } from '../textarea-BmR73nqC.js';
+export { T as Textarea } from '../textarea-DdnzLrI9.js';
 //# sourceMappingURL=Textarea.es.js.map

package/dist/components/ThemeToggle.cjs.js

@@ -7,8 +7,9 @@ const radio = require('@base-ui/react/radio');
 const radioGroup = require('@base-ui/react/radio-group');
 const lucideReact = require('lucide-react');
 const themeProvider = require('../theme-provider-aO5-jZVp.cjs');
+const primitives_raisedSurface = require('../primitives/raised-surface.cjs.js');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 const DEFAULT_OPTIONS = [
   { value: "system", label: "System", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, {}) },
@@ -28,14 +29,14 @@ const SIZE_CONFIG = {
     itemWidth: 20,
     root: "gap-px p-px",
     indicator: "inset-y-px left-px",
-    item: "h-4 [&_svg]:h-icon-sm [&_svg]:w-icon-sm"
+    item: "h-4 [&_svg]:size-icon-xs"
   },
   sm: {
     itemGap: 1,
     itemWidth: 24,
     root: "gap-px p-px",
     indicator: "inset-y-px left-px",
-    item: "h-5 [&_svg]:h-icon-sm [&_svg]:w-icon-sm"
+    item: "h-5 [&_svg]:size-icon-xs"
   }
 };
 const ThemeToggle = ({
@@ -69,7 +70,8 @@ const ThemeToggle = ({
       onValueChange: handleChange,
       "aria-label": ariaLabel,
       className: utils_cn.cn(
-        "relative inline-flex w-fit items-center rounded-full border border-border1 bg-surface3",
+        primitives_raisedSurface.raisedSurfaceStyle,
+        "relative inline-flex w-fit items-center rounded-full",
         sizeConfig.root,
         className
       ),
@@ -79,7 +81,7 @@ const ThemeToggle = ({
           {
             "aria-hidden": "true",
             className: utils_cn.cn(
-              "pointer-events-none absolute rounded-full bg-surface5 motion-reduce:transition-none",
+              "pointer-events-none absolute rounded-full bg-fill-hover motion-reduce:transition-none",
               primitives_transitions.transitions.transform,
               sizeConfig.indicator
             ),
@@ -95,7 +97,7 @@ const ThemeToggle = ({
             className: utils_cn.cn(
               "relative inline-flex cursor-pointer items-center justify-center rounded-full",
               // Base UI exposes `data-checked` instead of Radix's `data-state="checked"`.
-              "text-icon3 hover:text-icon6 data-[checked]:text-icon6",
+              "text-muted-foreground hover:text-foreground data-[checked]:text-foreground",
               sizeConfig.item,
               "focus-visible:outline-hidden",
               "active:scale-90 motion-reduce:transition-none",

package/dist/components/ThemeToggle.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.cjs.js","sources":["../../src/ds/components/ThemeToggle/theme-toggle.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport { useTheme } from '../ThemeProvider';\nimport type { Theme } from '../ThemeProvider/theme-context';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThemeToggleOption {\n  value: Theme;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst DEFAULT_OPTIONS: ReadonlyArray<ThemeToggleOption> = [\n  { value: 'system', label: 'System', icon: <Monitor /> },\n  { value: 'light', label: 'Light', icon: <Sun /> },\n  { value: 'dark', label: 'Dark', icon: <Moon /> },\n];\n\nconst SIZE_CONFIG = {\n  md: {\n    itemGap: 2,\n    itemWidth: 28,\n    root: 'gap-0.5 p-0.5',\n    indicator: 'inset-y-0.5 left-0.5',\n    item: 'h-6 [&_svg]:size-3.5',\n  },\n  xs: {\n    itemGap: 1,\n    itemWidth: 20,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-4 [&_svg]:h-icon-sm [&_svg]:w-icon-sm',\n  },\n  sm: {\n    itemGap: 1,\n    itemWidth: 24,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-5 [&_svg]:h-icon-sm [&_svg]:w-icon-sm',\n  },\n} as const;\n\ntype RadioRootProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'\n> & {\n  className?: string;\n};\n\ntype ControlledProps = { value: Theme; onChange: (next: Theme) => void };\ntype UncontrolledProps = { value?: undefined; onChange?: undefined };\n\nexport type ThemeToggleProps = RadioRootProps & {\n  options?: ReadonlyArray<ThemeToggleOption>;\n  size?: keyof typeof SIZE_CONFIG;\n} & (ControlledProps | UncontrolledProps);\n\nexport const ThemeToggle = ({\n  value,\n  onChange,\n  options = DEFAULT_OPTIONS,\n  size = 'md',\n  className,\n  'aria-label': ariaLabel = 'Theme',\n  ...rest\n}: ThemeToggleProps) => {\n  const { theme, setTheme } = useTheme();\n  const current = value ?? theme;\n  const commit = onChange ?? setTheme;\n  const effectiveCurrent = options.some(option => option.value === current) ? current : (options[0]?.value ?? 'system');\n\n  const handleChange = (next: unknown) => {\n    const match = options.find(opt => opt.value === next);\n    if (match) commit(match.value);\n  };\n\n  const activeIndex = Math.max(\n    0,\n    options.findIndex(option => option.value === effectiveCurrent),\n  );\n  const sizeConfig = SIZE_CONFIG[size];\n  const indicatorOffset = activeIndex * (sizeConfig.itemWidth + sizeConfig.itemGap);\n\n  return (\n    <RadioGroupPrimitive\n      {...rest}\n      value={effectiveCurrent}\n      onValueChange={handleChange}\n      aria-label={ariaLabel}\n      className={cn(\n        'relative inline-flex w-fit items-center rounded-full border border-border1 bg-surface3',\n        sizeConfig.root,\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute rounded-full bg-surface5 motion-reduce:transition-none',\n          transitions.transform,\n          sizeConfig.indicator,\n        )}\n        style={{ width: sizeConfig.itemWidth, transform: `translateX(${indicatorOffset}px)` }}\n      />\n      {options.map(option => (\n        <RadioPrimitive.Root\n          key={option.value}\n          value={option.value}\n          aria-label={option.label}\n          style={{ width: sizeConfig.itemWidth }}\n          className={cn(\n            'relative inline-flex cursor-pointer items-center justify-center rounded-full',\n            // Base UI exposes `data-checked` instead of Radix's `data-state=\"checked\"`.\n            'text-icon3 hover:text-icon6 data-[checked]:text-icon6',\n            sizeConfig.item,\n            'focus-visible:outline-hidden',\n            'active:scale-90 motion-reduce:transition-none',\n            transitions.colors,\n            transitions.transform,\n          )}\n        >\n          <span aria-hidden=\"true\" className=\"pointer-events-none inline-flex items-center justify-center\">\n            {option.icon}\n          </span>\n        </RadioPrimitive.Root>\n      ))}\n    </RadioGroupPrimitive>\n  );\n};\n"],"names":["jsx","Monitor","Sun","Moon","useTheme","jsxs","RadioGroupPrimitive","cn","transitions","RadioPrimitive"],"mappings":"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"}
+{"version":3,"file":"ThemeToggle.cjs.js","sources":["../../src/ds/components/ThemeToggle/theme-toggle.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport { useTheme } from '../ThemeProvider';\nimport type { Theme } from '../ThemeProvider/theme-context';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThemeToggleOption {\n  value: Theme;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst DEFAULT_OPTIONS: ReadonlyArray<ThemeToggleOption> = [\n  { value: 'system', label: 'System', icon: <Monitor /> },\n  { value: 'light', label: 'Light', icon: <Sun /> },\n  { value: 'dark', label: 'Dark', icon: <Moon /> },\n];\n\nconst SIZE_CONFIG = {\n  md: {\n    itemGap: 2,\n    itemWidth: 28,\n    root: 'gap-0.5 p-0.5',\n    indicator: 'inset-y-0.5 left-0.5',\n    item: 'h-6 [&_svg]:size-3.5',\n  },\n  xs: {\n    itemGap: 1,\n    itemWidth: 20,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-4 [&_svg]:size-icon-xs',\n  },\n  sm: {\n    itemGap: 1,\n    itemWidth: 24,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-5 [&_svg]:size-icon-xs',\n  },\n} as const;\n\ntype RadioRootProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'\n> & {\n  className?: string;\n};\n\ntype ControlledProps = { value: Theme; onChange: (next: Theme) => void };\ntype UncontrolledProps = { value?: undefined; onChange?: undefined };\n\nexport type ThemeToggleProps = RadioRootProps & {\n  options?: ReadonlyArray<ThemeToggleOption>;\n  size?: keyof typeof SIZE_CONFIG;\n} & (ControlledProps | UncontrolledProps);\n\nexport const ThemeToggle = ({\n  value,\n  onChange,\n  options = DEFAULT_OPTIONS,\n  size = 'md',\n  className,\n  'aria-label': ariaLabel = 'Theme',\n  ...rest\n}: ThemeToggleProps) => {\n  const { theme, setTheme } = useTheme();\n  const current = value ?? theme;\n  const commit = onChange ?? setTheme;\n  const effectiveCurrent = options.some(option => option.value === current) ? current : (options[0]?.value ?? 'system');\n\n  const handleChange = (next: unknown) => {\n    const match = options.find(opt => opt.value === next);\n    if (match) commit(match.value);\n  };\n\n  const activeIndex = Math.max(\n    0,\n    options.findIndex(option => option.value === effectiveCurrent),\n  );\n  const sizeConfig = SIZE_CONFIG[size];\n  const indicatorOffset = activeIndex * (sizeConfig.itemWidth + sizeConfig.itemGap);\n\n  return (\n    <RadioGroupPrimitive\n      {...rest}\n      value={effectiveCurrent}\n      onValueChange={handleChange}\n      aria-label={ariaLabel}\n      className={cn(\n        raisedSurfaceStyle,\n        'relative inline-flex w-fit items-center rounded-full',\n        sizeConfig.root,\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute rounded-full bg-fill-hover motion-reduce:transition-none',\n          transitions.transform,\n          sizeConfig.indicator,\n        )}\n        style={{ width: sizeConfig.itemWidth, transform: `translateX(${indicatorOffset}px)` }}\n      />\n      {options.map(option => (\n        <RadioPrimitive.Root\n          key={option.value}\n          value={option.value}\n          aria-label={option.label}\n          style={{ width: sizeConfig.itemWidth }}\n          className={cn(\n            'relative inline-flex cursor-pointer items-center justify-center rounded-full',\n            // Base UI exposes `data-checked` instead of Radix's `data-state=\"checked\"`.\n            'text-muted-foreground hover:text-foreground data-[checked]:text-foreground',\n            sizeConfig.item,\n            'focus-visible:outline-hidden',\n            'active:scale-90 motion-reduce:transition-none',\n            transitions.colors,\n            transitions.transform,\n          )}\n        >\n          <span aria-hidden=\"true\" className=\"pointer-events-none inline-flex items-center justify-center\">\n            {option.icon}\n          </span>\n        </RadioPrimitive.Root>\n      ))}\n    </RadioGroupPrimitive>\n  );\n};\n"],"names":["jsx","Monitor","Sun","Moon","useTheme","jsxs","RadioGroupPrimitive","cn","raisedSurfaceStyle","transitions","RadioPrimitive"],"mappings":"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"}

package/dist/components/ThemeToggle.es.js

@@ -3,8 +3,9 @@ import { Radio } from '@base-ui/react/radio';
 import { RadioGroup } from '@base-ui/react/radio-group';
 import { Monitor, Sun, Moon } from 'lucide-react';
 import { u as useTheme } from '../theme-provider-C9ih9jSS.js';
+import { raisedSurfaceStyle } from '../primitives/raised-surface.es.js';
 import { transitions } from '../primitives/transitions.es.js';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 const DEFAULT_OPTIONS = [
   { value: "system", label: "System", icon: /* @__PURE__ */ jsx(Monitor, {}) },
@@ -24,14 +25,14 @@ const SIZE_CONFIG = {
     itemWidth: 20,
     root: "gap-px p-px",
     indicator: "inset-y-px left-px",
-    item: "h-4 [&_svg]:h-icon-sm [&_svg]:w-icon-sm"
+    item: "h-4 [&_svg]:size-icon-xs"
   },
   sm: {
     itemGap: 1,
     itemWidth: 24,
     root: "gap-px p-px",
     indicator: "inset-y-px left-px",
-    item: "h-5 [&_svg]:h-icon-sm [&_svg]:w-icon-sm"
+    item: "h-5 [&_svg]:size-icon-xs"
   }
 };
 const ThemeToggle = ({
@@ -65,7 +66,8 @@ const ThemeToggle = ({
       onValueChange: handleChange,
       "aria-label": ariaLabel,
       className: cn(
-        "relative inline-flex w-fit items-center rounded-full border border-border1 bg-surface3",
+        raisedSurfaceStyle,
+        "relative inline-flex w-fit items-center rounded-full",
         sizeConfig.root,
         className
       ),
@@ -75,7 +77,7 @@ const ThemeToggle = ({
           {
             "aria-hidden": "true",
             className: cn(
-              "pointer-events-none absolute rounded-full bg-surface5 motion-reduce:transition-none",
+              "pointer-events-none absolute rounded-full bg-fill-hover motion-reduce:transition-none",
               transitions.transform,
               sizeConfig.indicator
             ),
@@ -91,7 +93,7 @@ const ThemeToggle = ({
             className: cn(
               "relative inline-flex cursor-pointer items-center justify-center rounded-full",
               // Base UI exposes `data-checked` instead of Radix's `data-state="checked"`.
-              "text-icon3 hover:text-icon6 data-[checked]:text-icon6",
+              "text-muted-foreground hover:text-foreground data-[checked]:text-foreground",
               sizeConfig.item,
               "focus-visible:outline-hidden",
               "active:scale-90 motion-reduce:transition-none",

package/dist/components/ThemeToggle.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.es.js","sources":["../../src/ds/components/ThemeToggle/theme-toggle.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport { useTheme } from '../ThemeProvider';\nimport type { Theme } from '../ThemeProvider/theme-context';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThemeToggleOption {\n  value: Theme;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst DEFAULT_OPTIONS: ReadonlyArray<ThemeToggleOption> = [\n  { value: 'system', label: 'System', icon: <Monitor /> },\n  { value: 'light', label: 'Light', icon: <Sun /> },\n  { value: 'dark', label: 'Dark', icon: <Moon /> },\n];\n\nconst SIZE_CONFIG = {\n  md: {\n    itemGap: 2,\n    itemWidth: 28,\n    root: 'gap-0.5 p-0.5',\n    indicator: 'inset-y-0.5 left-0.5',\n    item: 'h-6 [&_svg]:size-3.5',\n  },\n  xs: {\n    itemGap: 1,\n    itemWidth: 20,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-4 [&_svg]:h-icon-sm [&_svg]:w-icon-sm',\n  },\n  sm: {\n    itemGap: 1,\n    itemWidth: 24,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-5 [&_svg]:h-icon-sm [&_svg]:w-icon-sm',\n  },\n} as const;\n\ntype RadioRootProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'\n> & {\n  className?: string;\n};\n\ntype ControlledProps = { value: Theme; onChange: (next: Theme) => void };\ntype UncontrolledProps = { value?: undefined; onChange?: undefined };\n\nexport type ThemeToggleProps = RadioRootProps & {\n  options?: ReadonlyArray<ThemeToggleOption>;\n  size?: keyof typeof SIZE_CONFIG;\n} & (ControlledProps | UncontrolledProps);\n\nexport const ThemeToggle = ({\n  value,\n  onChange,\n  options = DEFAULT_OPTIONS,\n  size = 'md',\n  className,\n  'aria-label': ariaLabel = 'Theme',\n  ...rest\n}: ThemeToggleProps) => {\n  const { theme, setTheme } = useTheme();\n  const current = value ?? theme;\n  const commit = onChange ?? setTheme;\n  const effectiveCurrent = options.some(option => option.value === current) ? current : (options[0]?.value ?? 'system');\n\n  const handleChange = (next: unknown) => {\n    const match = options.find(opt => opt.value === next);\n    if (match) commit(match.value);\n  };\n\n  const activeIndex = Math.max(\n    0,\n    options.findIndex(option => option.value === effectiveCurrent),\n  );\n  const sizeConfig = SIZE_CONFIG[size];\n  const indicatorOffset = activeIndex * (sizeConfig.itemWidth + sizeConfig.itemGap);\n\n  return (\n    <RadioGroupPrimitive\n      {...rest}\n      value={effectiveCurrent}\n      onValueChange={handleChange}\n      aria-label={ariaLabel}\n      className={cn(\n        'relative inline-flex w-fit items-center rounded-full border border-border1 bg-surface3',\n        sizeConfig.root,\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute rounded-full bg-surface5 motion-reduce:transition-none',\n          transitions.transform,\n          sizeConfig.indicator,\n        )}\n        style={{ width: sizeConfig.itemWidth, transform: `translateX(${indicatorOffset}px)` }}\n      />\n      {options.map(option => (\n        <RadioPrimitive.Root\n          key={option.value}\n          value={option.value}\n          aria-label={option.label}\n          style={{ width: sizeConfig.itemWidth }}\n          className={cn(\n            'relative inline-flex cursor-pointer items-center justify-center rounded-full',\n            // Base UI exposes `data-checked` instead of Radix's `data-state=\"checked\"`.\n            'text-icon3 hover:text-icon6 data-[checked]:text-icon6',\n            sizeConfig.item,\n            'focus-visible:outline-hidden',\n            'active:scale-90 motion-reduce:transition-none',\n            transitions.colors,\n            transitions.transform,\n          )}\n        >\n          <span aria-hidden=\"true\" className=\"pointer-events-none inline-flex items-center justify-center\">\n            {option.icon}\n          </span>\n        </RadioPrimitive.Root>\n      ))}\n    </RadioGroupPrimitive>\n  );\n};\n"],"names":["RadioGroupPrimitive","RadioPrimitive"],"mappings":"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"}
+{"version":3,"file":"ThemeToggle.es.js","sources":["../../src/ds/components/ThemeToggle/theme-toggle.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport { useTheme } from '../ThemeProvider';\nimport type { Theme } from '../ThemeProvider/theme-context';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThemeToggleOption {\n  value: Theme;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst DEFAULT_OPTIONS: ReadonlyArray<ThemeToggleOption> = [\n  { value: 'system', label: 'System', icon: <Monitor /> },\n  { value: 'light', label: 'Light', icon: <Sun /> },\n  { value: 'dark', label: 'Dark', icon: <Moon /> },\n];\n\nconst SIZE_CONFIG = {\n  md: {\n    itemGap: 2,\n    itemWidth: 28,\n    root: 'gap-0.5 p-0.5',\n    indicator: 'inset-y-0.5 left-0.5',\n    item: 'h-6 [&_svg]:size-3.5',\n  },\n  xs: {\n    itemGap: 1,\n    itemWidth: 20,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-4 [&_svg]:size-icon-xs',\n  },\n  sm: {\n    itemGap: 1,\n    itemWidth: 24,\n    root: 'gap-px p-px',\n    indicator: 'inset-y-px left-px',\n    item: 'h-5 [&_svg]:size-icon-xs',\n  },\n} as const;\n\ntype RadioRootProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'\n> & {\n  className?: string;\n};\n\ntype ControlledProps = { value: Theme; onChange: (next: Theme) => void };\ntype UncontrolledProps = { value?: undefined; onChange?: undefined };\n\nexport type ThemeToggleProps = RadioRootProps & {\n  options?: ReadonlyArray<ThemeToggleOption>;\n  size?: keyof typeof SIZE_CONFIG;\n} & (ControlledProps | UncontrolledProps);\n\nexport const ThemeToggle = ({\n  value,\n  onChange,\n  options = DEFAULT_OPTIONS,\n  size = 'md',\n  className,\n  'aria-label': ariaLabel = 'Theme',\n  ...rest\n}: ThemeToggleProps) => {\n  const { theme, setTheme } = useTheme();\n  const current = value ?? theme;\n  const commit = onChange ?? setTheme;\n  const effectiveCurrent = options.some(option => option.value === current) ? current : (options[0]?.value ?? 'system');\n\n  const handleChange = (next: unknown) => {\n    const match = options.find(opt => opt.value === next);\n    if (match) commit(match.value);\n  };\n\n  const activeIndex = Math.max(\n    0,\n    options.findIndex(option => option.value === effectiveCurrent),\n  );\n  const sizeConfig = SIZE_CONFIG[size];\n  const indicatorOffset = activeIndex * (sizeConfig.itemWidth + sizeConfig.itemGap);\n\n  return (\n    <RadioGroupPrimitive\n      {...rest}\n      value={effectiveCurrent}\n      onValueChange={handleChange}\n      aria-label={ariaLabel}\n      className={cn(\n        raisedSurfaceStyle,\n        'relative inline-flex w-fit items-center rounded-full',\n        sizeConfig.root,\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute rounded-full bg-fill-hover motion-reduce:transition-none',\n          transitions.transform,\n          sizeConfig.indicator,\n        )}\n        style={{ width: sizeConfig.itemWidth, transform: `translateX(${indicatorOffset}px)` }}\n      />\n      {options.map(option => (\n        <RadioPrimitive.Root\n          key={option.value}\n          value={option.value}\n          aria-label={option.label}\n          style={{ width: sizeConfig.itemWidth }}\n          className={cn(\n            'relative inline-flex cursor-pointer items-center justify-center rounded-full',\n            // Base UI exposes `data-checked` instead of Radix's `data-state=\"checked\"`.\n            'text-muted-foreground hover:text-foreground data-[checked]:text-foreground',\n            sizeConfig.item,\n            'focus-visible:outline-hidden',\n            'active:scale-90 motion-reduce:transition-none',\n            transitions.colors,\n            transitions.transform,\n          )}\n        >\n          <span aria-hidden=\"true\" className=\"pointer-events-none inline-flex items-center justify-center\">\n            {option.icon}\n          </span>\n        </RadioPrimitive.Root>\n      ))}\n    </RadioGroupPrimitive>\n  );\n};\n"],"names":["RadioGroupPrimitive","RadioPrimitive"],"mappings":"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"}