@flanksource/clicky-ui 0.3.26 → 0.3.28

package/dist/components/ListMenu.cjs

@@ -31,12 +31,14 @@ function ListMenuHeader({ className, ...props }) {
   );
 }
 function ListMenuItem({
+  variant = "default",
   active = false,
   selected = false,
   accentClassName = "border-transparent",
   interactive = true,
   itemKey,
   hideCheckbox = false,
+  checkboxLabel = "Select item",
   className,
   onClick,
   children,
@@ -61,7 +63,7 @@ function ListMenuItem({
         type: "checkbox",
         className: "mt-0.5 size-4 shrink-0 rounded border-input",
         checked: rowSelected,
-        "aria-label": "Select item",
+        "aria-label": checkboxLabel,
         onClick: (event) => {
           event.stopPropagation();
           if (event.shiftKey) {
@@ -81,6 +83,7 @@ function ListMenuItem({
         "min-w-0 overflow-hidden border-l-2 transition-colors",
         interactive && "cursor-pointer",
         active ? "border-primary bg-primary/10" : rowSelected ? "border-primary/40 bg-primary/5 hover:bg-primary/10" : utils.cn(accentClassName, interactive && "hover:bg-muted"),
+        variant === "compact" && "px-density-2 py-1 text-xs",
         className
       ),
       onClick: handleClick,

package/dist/components/ListMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListMenu.cjs","sources":["../../src/components/ListMenu.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"./button\";\nimport {\n  ListMenuSelectionContext,\n  useListMenuSelectionContext,\n  type ListMenuSelection,\n} from \"./use-list-menu-selection\";\n\nexport type ListMenuProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Enables multi-select. Pass the object returned by `useListMenuSelection`;\n   * rows that set `itemKey` then become selectable via checkbox or Shift+Click.\n   */\n  selection?: ListMenuSelection;\n  /** Render a leading checkbox on selectable rows (default true when `selection` is set). */\n  showCheckboxes?: boolean;\n};\n\nexport function ListMenu({\n  className,\n  selection,\n  showCheckboxes = true,\n  children,\n  ...props\n}: ListMenuProps) {\n  const menu = (\n    <div className={cn(\"divide-y divide-border\", className)} {...props}>\n      {children}\n    </div>\n  );\n  if (!selection) return menu;\n  return (\n    <ListMenuSelectionContext.Provider value={{ selection, showCheckboxes }}>\n      {menu}\n    </ListMenuSelectionContext.Provider>\n  );\n}\n\nexport type ListMenuSectionProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuSection({ className, ...props }: ListMenuSectionProps) {\n  return <div className={className} {...props} />;\n}\n\nexport type ListMenuHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuHeader({ className, ...props }: ListMenuHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"sticky top-0 z-10 flex w-full items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type ListMenuItemProps = HTMLAttributes<HTMLDivElement> & {\n  /** Applies the primary selected-row treatment used for the open/detail row. */\n  active?: boolean;\n  /** Applies the softer selected treatment used for checkbox or multi-select rows. */\n  selected?: boolean;\n  /** Left-border class when neither active nor selected. */\n  accentClassName?: string;\n  /** Whether the row gets pointer and hover affordances. */\n  interactive?: boolean;\n  /** Stable key that opts the row into `ListMenu` multi-select. */\n  itemKey?: string;\n  /** Hide the leading checkbox for this row even when selection is enabled. */\n  hideCheckbox?: boolean;\n};\n\nexport function ListMenuItem({\n  active = false,\n  selected = false,\n  accentClassName = \"border-transparent\",\n  interactive = true,\n  itemKey,\n  hideCheckbox = false,\n  className,\n  onClick,\n  children,\n  ...props\n}: ListMenuItemProps) {\n  const ctx = useListMenuSelectionContext();\n  const selectable = ctx !== null && itemKey !== undefined;\n  const rowSelected = selectable ? ctx.selection.isSelected(itemKey) : selected;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (selectable && event.shiftKey) {\n      event.preventDefault();\n      ctx.selection.toggle(itemKey, { shiftKey: true });\n      return;\n    }\n    onClick?.(event);\n  };\n\n  const showCheckbox = selectable && ctx.showCheckboxes && !hideCheckbox;\n  const body =\n    selectable && showCheckbox ? (\n      <div className=\"flex items-start gap-2\">\n        <input\n          type=\"checkbox\"\n          className=\"mt-0.5 size-4 shrink-0 rounded border-input\"\n          checked={rowSelected}\n          aria-label=\"Select item\"\n          onClick={(event) => {\n            event.stopPropagation();\n            if (event.shiftKey) {\n              event.preventDefault();\n              ctx.selection.toggle(itemKey, { shiftKey: true });\n            }\n          }}\n          onChange={() => ctx.selection.toggle(itemKey)}\n        />\n        <div className=\"min-w-0 flex-1\">{children}</div>\n      </div>\n    ) : (\n      children\n    );\n\n  return (\n    <div\n      className={cn(\n        \"min-w-0 overflow-hidden border-l-2 transition-colors\",\n        interactive && \"cursor-pointer\",\n        active\n          ? \"border-primary bg-primary/10\"\n          : rowSelected\n            ? \"border-primary/40 bg-primary/5 hover:bg-primary/10\"\n            : cn(accentClassName, interactive && \"hover:bg-muted\"),\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {body}\n    </div>\n  );\n}\n\nexport type ListMenuAction = {\n  label: ReactNode;\n  /** Receives the currently selected keys (ordered as in the menu). */\n  onClick: (selectedKeys: string[]) => void;\n  icon?: ReactNode;\n  disabled?: boolean;\n  variant?: ButtonProps[\"variant\"];\n};\n\nexport type ListMenuActionBarProps = HTMLAttributes<HTMLDivElement> & {\n  /** Selection to act on; falls back to the enclosing `ListMenu` selection context. */\n  selection?: ListMenuSelection;\n  /** Bulk actions executed across every selected key. */\n  actions?: ListMenuAction[];\n  /** Override the \"{n} selected\" summary. */\n  renderLabel?: (count: number) => ReactNode;\n  /** Hide the whole bar when nothing is selected (default true). */\n  hideWhenEmpty?: boolean;\n  /** Label for the clear button; pass null to hide it. */\n  clearLabel?: ReactNode;\n};\n\nexport function ListMenuActionBar({\n  selection: selectionProp,\n  actions = [],\n  renderLabel,\n  hideWhenEmpty = true,\n  clearLabel = \"Clear\",\n  className,\n  children,\n  ...props\n}: ListMenuActionBarProps) {\n  const ctx = useListMenuSelectionContext();\n  const selection = selectionProp ?? ctx?.selection;\n  if (!selection) return null;\n  const { count } = selection;\n  if (hideWhenEmpty && count === 0) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-sm font-medium text-foreground\">\n        {renderLabel ? renderLabel(count) : `${count} selected`}\n      </span>\n      <div className=\"ml-auto flex items-center gap-1\">\n        {actions.map((action, i) => (\n          <Button\n            key={i}\n            type=\"button\"\n            size=\"sm\"\n            variant={action.variant ?? \"outline\"}\n            disabled={action.disabled || count === 0}\n            onClick={() => action.onClick(selection.selectedKeys)}\n          >\n            {action.icon}\n            {action.label}\n          </Button>\n        ))}\n        {children}\n        {clearLabel !== null && (\n          <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => selection.clear()}>\n            {clearLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","cn","ListMenuSelectionContext","useListMenuSelectionContext","jsxs","Button"],"mappings":"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"}
+{"version":3,"file":"ListMenu.cjs","sources":["../../src/components/ListMenu.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"./button\";\nimport {\n  ListMenuSelectionContext,\n  useListMenuSelectionContext,\n  type ListMenuSelection,\n} from \"./use-list-menu-selection\";\n\nexport type ListMenuProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Enables multi-select. Pass the object returned by `useListMenuSelection`;\n   * rows that set `itemKey` then become selectable via checkbox or Shift+Click.\n   */\n  selection?: ListMenuSelection;\n  /** Render a leading checkbox on selectable rows (default true when `selection` is set). */\n  showCheckboxes?: boolean;\n};\n\nexport function ListMenu({\n  className,\n  selection,\n  showCheckboxes = true,\n  children,\n  ...props\n}: ListMenuProps) {\n  const menu = (\n    <div className={cn(\"divide-y divide-border\", className)} {...props}>\n      {children}\n    </div>\n  );\n  if (!selection) return menu;\n  return (\n    <ListMenuSelectionContext.Provider value={{ selection, showCheckboxes }}>\n      {menu}\n    </ListMenuSelectionContext.Provider>\n  );\n}\n\nexport type ListMenuSectionProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuSection({ className, ...props }: ListMenuSectionProps) {\n  return <div className={className} {...props} />;\n}\n\nexport type ListMenuHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuHeader({ className, ...props }: ListMenuHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"sticky top-0 z-10 flex w-full items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type ListMenuItemProps = HTMLAttributes<HTMLDivElement> & {\n  /** Row density. Compact is intended for single-line values and controls. */\n  variant?: \"default\" | \"compact\";\n  /** Applies the primary selected-row treatment used for the open/detail row. */\n  active?: boolean;\n  /** Applies the softer selected treatment used for checkbox or multi-select rows. */\n  selected?: boolean;\n  /** Left-border class when neither active nor selected. */\n  accentClassName?: string;\n  /** Whether the row gets pointer and hover affordances. */\n  interactive?: boolean;\n  /** Stable key that opts the row into `ListMenu` multi-select. */\n  itemKey?: string;\n  /** Hide the leading checkbox for this row even when selection is enabled. */\n  hideCheckbox?: boolean;\n  /** Accessible name for the leading checkbox. Defaults to \"Select item\". */\n  checkboxLabel?: string;\n};\n\nexport function ListMenuItem({\n  variant = \"default\",\n  active = false,\n  selected = false,\n  accentClassName = \"border-transparent\",\n  interactive = true,\n  itemKey,\n  hideCheckbox = false,\n  checkboxLabel = \"Select item\",\n  className,\n  onClick,\n  children,\n  ...props\n}: ListMenuItemProps) {\n  const ctx = useListMenuSelectionContext();\n  const selectable = ctx !== null && itemKey !== undefined;\n  const rowSelected = selectable ? ctx.selection.isSelected(itemKey) : selected;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (selectable && event.shiftKey) {\n      event.preventDefault();\n      ctx.selection.toggle(itemKey, { shiftKey: true });\n      return;\n    }\n    onClick?.(event);\n  };\n\n  const showCheckbox = selectable && ctx.showCheckboxes && !hideCheckbox;\n  const body =\n    selectable && showCheckbox ? (\n      <div className=\"flex items-start gap-2\">\n        <input\n          type=\"checkbox\"\n          className=\"mt-0.5 size-4 shrink-0 rounded border-input\"\n          checked={rowSelected}\n          aria-label={checkboxLabel}\n          onClick={(event) => {\n            event.stopPropagation();\n            if (event.shiftKey) {\n              event.preventDefault();\n              ctx.selection.toggle(itemKey, { shiftKey: true });\n            }\n          }}\n          onChange={() => ctx.selection.toggle(itemKey)}\n        />\n        <div className=\"min-w-0 flex-1\">{children}</div>\n      </div>\n    ) : (\n      children\n    );\n\n  return (\n    <div\n      className={cn(\n        \"min-w-0 overflow-hidden border-l-2 transition-colors\",\n        interactive && \"cursor-pointer\",\n        active\n          ? \"border-primary bg-primary/10\"\n          : rowSelected\n            ? \"border-primary/40 bg-primary/5 hover:bg-primary/10\"\n            : cn(accentClassName, interactive && \"hover:bg-muted\"),\n        variant === \"compact\" && \"px-density-2 py-1 text-xs\",\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {body}\n    </div>\n  );\n}\n\nexport type ListMenuAction = {\n  label: ReactNode;\n  /** Receives the currently selected keys (ordered as in the menu). */\n  onClick: (selectedKeys: string[]) => void;\n  icon?: ReactNode;\n  disabled?: boolean;\n  variant?: ButtonProps[\"variant\"];\n};\n\nexport type ListMenuActionBarProps = HTMLAttributes<HTMLDivElement> & {\n  /** Selection to act on; falls back to the enclosing `ListMenu` selection context. */\n  selection?: ListMenuSelection;\n  /** Bulk actions executed across every selected key. */\n  actions?: ListMenuAction[];\n  /** Override the \"{n} selected\" summary. */\n  renderLabel?: (count: number) => ReactNode;\n  /** Hide the whole bar when nothing is selected (default true). */\n  hideWhenEmpty?: boolean;\n  /** Label for the clear button; pass null to hide it. */\n  clearLabel?: ReactNode;\n};\n\nexport function ListMenuActionBar({\n  selection: selectionProp,\n  actions = [],\n  renderLabel,\n  hideWhenEmpty = true,\n  clearLabel = \"Clear\",\n  className,\n  children,\n  ...props\n}: ListMenuActionBarProps) {\n  const ctx = useListMenuSelectionContext();\n  const selection = selectionProp ?? ctx?.selection;\n  if (!selection) return null;\n  const { count } = selection;\n  if (hideWhenEmpty && count === 0) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-sm font-medium text-foreground\">\n        {renderLabel ? renderLabel(count) : `${count} selected`}\n      </span>\n      <div className=\"ml-auto flex items-center gap-1\">\n        {actions.map((action, i) => (\n          <Button\n            key={i}\n            type=\"button\"\n            size=\"sm\"\n            variant={action.variant ?? \"outline\"}\n            disabled={action.disabled || count === 0}\n            onClick={() => action.onClick(selection.selectedKeys)}\n          >\n            {action.icon}\n            {action.label}\n          </Button>\n        ))}\n        {children}\n        {clearLabel !== null && (\n          <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => selection.clear()}>\n            {clearLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","cn","ListMenuSelectionContext","useListMenuSelectionContext","jsxs","Button"],"mappings":"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"}

package/dist/components/ListMenu.d.ts

@@ -16,6 +16,8 @@ export declare function ListMenuSection({ className, ...props }: ListMenuSection
 export type ListMenuHeaderProps = HTMLAttributes<HTMLDivElement>;
 export declare function ListMenuHeader({ className, ...props }: ListMenuHeaderProps): import("react/jsx-runtime").JSX.Element;
 export type ListMenuItemProps = HTMLAttributes<HTMLDivElement> & {
+    /** Row density. Compact is intended for single-line values and controls. */
+    variant?: "default" | "compact";
     /** Applies the primary selected-row treatment used for the open/detail row. */
     active?: boolean;
     /** Applies the softer selected treatment used for checkbox or multi-select rows. */
@@ -28,8 +30,10 @@ export type ListMenuItemProps = HTMLAttributes<HTMLDivElement> & {
     itemKey?: string;
     /** Hide the leading checkbox for this row even when selection is enabled. */
     hideCheckbox?: boolean;
+    /** Accessible name for the leading checkbox. Defaults to "Select item". */
+    checkboxLabel?: string;
 };
-export declare function ListMenuItem({ active, selected, accentClassName, interactive, itemKey, hideCheckbox, className, onClick, children, ...props }: ListMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListMenuItem({ variant, active, selected, accentClassName, interactive, itemKey, hideCheckbox, checkboxLabel, className, onClick, children, ...props }: ListMenuItemProps): import("react/jsx-runtime").JSX.Element;
 export type ListMenuAction = {
     label: ReactNode;
     /** Receives the currently selected keys (ordered as in the menu). */

package/dist/components/ListMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListMenu.d.ts","sourceRoot":"","sources":["../../src/components/ListMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3D;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,SAAS,EACT,cAAqB,EACrB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CAYf;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAE5E;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjE,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAU1E;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,MAAc,EACd,QAAgB,EAChB,eAAsC,EACtC,WAAkB,EAClB,OAAO,EACP,YAAoB,EACpB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAwDnB;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,OAAO,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACpE,qFAAqF;IACrF,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC3C,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EAAE,aAAa,EACxB,OAAY,EACZ,WAAW,EACX,aAAoB,EACpB,UAAoB,EACpB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,kDAyCxB"}
+{"version":3,"file":"ListMenu.d.ts","sourceRoot":"","sources":["../../src/components/ListMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3D;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,SAAS,EACT,cAAqB,EACrB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CAYf;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAE5E;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjE,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAU1E;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,OAAmB,EACnB,MAAc,EACd,QAAgB,EAChB,eAAsC,EACtC,WAAkB,EAClB,OAAO,EACP,YAAoB,EACpB,aAA6B,EAC7B,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAyDnB;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,OAAO,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACpE,qFAAqF;IACrF,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC3C,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EAAE,aAAa,EACxB,OAAY,EACZ,WAAW,EACX,aAAoB,EACpB,UAAoB,EACpB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,kDAyCxB"}

package/dist/components/ListMenu.js

@@ -29,12 +29,14 @@ function ListMenuHeader({ className, ...props }) {
   );
 }
 function ListMenuItem({
+  variant = "default",
   active = false,
   selected = false,
   accentClassName = "border-transparent",
   interactive = true,
   itemKey,
   hideCheckbox = false,
+  checkboxLabel = "Select item",
   className,
   onClick,
   children,
@@ -59,7 +61,7 @@ function ListMenuItem({
         type: "checkbox",
         className: "mt-0.5 size-4 shrink-0 rounded border-input",
         checked: rowSelected,
-        "aria-label": "Select item",
+        "aria-label": checkboxLabel,
         onClick: (event) => {
           event.stopPropagation();
           if (event.shiftKey) {
@@ -79,6 +81,7 @@ function ListMenuItem({
         "min-w-0 overflow-hidden border-l-2 transition-colors",
         interactive && "cursor-pointer",
         active ? "border-primary bg-primary/10" : rowSelected ? "border-primary/40 bg-primary/5 hover:bg-primary/10" : cn(accentClassName, interactive && "hover:bg-muted"),
+        variant === "compact" && "px-density-2 py-1 text-xs",
         className
       ),
       onClick: handleClick,

package/dist/components/ListMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListMenu.js","sources":["../../src/components/ListMenu.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"./button\";\nimport {\n  ListMenuSelectionContext,\n  useListMenuSelectionContext,\n  type ListMenuSelection,\n} from \"./use-list-menu-selection\";\n\nexport type ListMenuProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Enables multi-select. Pass the object returned by `useListMenuSelection`;\n   * rows that set `itemKey` then become selectable via checkbox or Shift+Click.\n   */\n  selection?: ListMenuSelection;\n  /** Render a leading checkbox on selectable rows (default true when `selection` is set). */\n  showCheckboxes?: boolean;\n};\n\nexport function ListMenu({\n  className,\n  selection,\n  showCheckboxes = true,\n  children,\n  ...props\n}: ListMenuProps) {\n  const menu = (\n    <div className={cn(\"divide-y divide-border\", className)} {...props}>\n      {children}\n    </div>\n  );\n  if (!selection) return menu;\n  return (\n    <ListMenuSelectionContext.Provider value={{ selection, showCheckboxes }}>\n      {menu}\n    </ListMenuSelectionContext.Provider>\n  );\n}\n\nexport type ListMenuSectionProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuSection({ className, ...props }: ListMenuSectionProps) {\n  return <div className={className} {...props} />;\n}\n\nexport type ListMenuHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuHeader({ className, ...props }: ListMenuHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"sticky top-0 z-10 flex w-full items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type ListMenuItemProps = HTMLAttributes<HTMLDivElement> & {\n  /** Applies the primary selected-row treatment used for the open/detail row. */\n  active?: boolean;\n  /** Applies the softer selected treatment used for checkbox or multi-select rows. */\n  selected?: boolean;\n  /** Left-border class when neither active nor selected. */\n  accentClassName?: string;\n  /** Whether the row gets pointer and hover affordances. */\n  interactive?: boolean;\n  /** Stable key that opts the row into `ListMenu` multi-select. */\n  itemKey?: string;\n  /** Hide the leading checkbox for this row even when selection is enabled. */\n  hideCheckbox?: boolean;\n};\n\nexport function ListMenuItem({\n  active = false,\n  selected = false,\n  accentClassName = \"border-transparent\",\n  interactive = true,\n  itemKey,\n  hideCheckbox = false,\n  className,\n  onClick,\n  children,\n  ...props\n}: ListMenuItemProps) {\n  const ctx = useListMenuSelectionContext();\n  const selectable = ctx !== null && itemKey !== undefined;\n  const rowSelected = selectable ? ctx.selection.isSelected(itemKey) : selected;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (selectable && event.shiftKey) {\n      event.preventDefault();\n      ctx.selection.toggle(itemKey, { shiftKey: true });\n      return;\n    }\n    onClick?.(event);\n  };\n\n  const showCheckbox = selectable && ctx.showCheckboxes && !hideCheckbox;\n  const body =\n    selectable && showCheckbox ? (\n      <div className=\"flex items-start gap-2\">\n        <input\n          type=\"checkbox\"\n          className=\"mt-0.5 size-4 shrink-0 rounded border-input\"\n          checked={rowSelected}\n          aria-label=\"Select item\"\n          onClick={(event) => {\n            event.stopPropagation();\n            if (event.shiftKey) {\n              event.preventDefault();\n              ctx.selection.toggle(itemKey, { shiftKey: true });\n            }\n          }}\n          onChange={() => ctx.selection.toggle(itemKey)}\n        />\n        <div className=\"min-w-0 flex-1\">{children}</div>\n      </div>\n    ) : (\n      children\n    );\n\n  return (\n    <div\n      className={cn(\n        \"min-w-0 overflow-hidden border-l-2 transition-colors\",\n        interactive && \"cursor-pointer\",\n        active\n          ? \"border-primary bg-primary/10\"\n          : rowSelected\n            ? \"border-primary/40 bg-primary/5 hover:bg-primary/10\"\n            : cn(accentClassName, interactive && \"hover:bg-muted\"),\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {body}\n    </div>\n  );\n}\n\nexport type ListMenuAction = {\n  label: ReactNode;\n  /** Receives the currently selected keys (ordered as in the menu). */\n  onClick: (selectedKeys: string[]) => void;\n  icon?: ReactNode;\n  disabled?: boolean;\n  variant?: ButtonProps[\"variant\"];\n};\n\nexport type ListMenuActionBarProps = HTMLAttributes<HTMLDivElement> & {\n  /** Selection to act on; falls back to the enclosing `ListMenu` selection context. */\n  selection?: ListMenuSelection;\n  /** Bulk actions executed across every selected key. */\n  actions?: ListMenuAction[];\n  /** Override the \"{n} selected\" summary. */\n  renderLabel?: (count: number) => ReactNode;\n  /** Hide the whole bar when nothing is selected (default true). */\n  hideWhenEmpty?: boolean;\n  /** Label for the clear button; pass null to hide it. */\n  clearLabel?: ReactNode;\n};\n\nexport function ListMenuActionBar({\n  selection: selectionProp,\n  actions = [],\n  renderLabel,\n  hideWhenEmpty = true,\n  clearLabel = \"Clear\",\n  className,\n  children,\n  ...props\n}: ListMenuActionBarProps) {\n  const ctx = useListMenuSelectionContext();\n  const selection = selectionProp ?? ctx?.selection;\n  if (!selection) return null;\n  const { count } = selection;\n  if (hideWhenEmpty && count === 0) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-sm font-medium text-foreground\">\n        {renderLabel ? renderLabel(count) : `${count} selected`}\n      </span>\n      <div className=\"ml-auto flex items-center gap-1\">\n        {actions.map((action, i) => (\n          <Button\n            key={i}\n            type=\"button\"\n            size=\"sm\"\n            variant={action.variant ?? \"outline\"}\n            disabled={action.disabled || count === 0}\n            onClick={() => action.onClick(selection.selectedKeys)}\n          >\n            {action.icon}\n            {action.label}\n          </Button>\n        ))}\n        {children}\n        {clearLabel !== null && (\n          <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => selection.clear()}>\n            {clearLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListMenu.js","sources":["../../src/components/ListMenu.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"./button\";\nimport {\n  ListMenuSelectionContext,\n  useListMenuSelectionContext,\n  type ListMenuSelection,\n} from \"./use-list-menu-selection\";\n\nexport type ListMenuProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Enables multi-select. Pass the object returned by `useListMenuSelection`;\n   * rows that set `itemKey` then become selectable via checkbox or Shift+Click.\n   */\n  selection?: ListMenuSelection;\n  /** Render a leading checkbox on selectable rows (default true when `selection` is set). */\n  showCheckboxes?: boolean;\n};\n\nexport function ListMenu({\n  className,\n  selection,\n  showCheckboxes = true,\n  children,\n  ...props\n}: ListMenuProps) {\n  const menu = (\n    <div className={cn(\"divide-y divide-border\", className)} {...props}>\n      {children}\n    </div>\n  );\n  if (!selection) return menu;\n  return (\n    <ListMenuSelectionContext.Provider value={{ selection, showCheckboxes }}>\n      {menu}\n    </ListMenuSelectionContext.Provider>\n  );\n}\n\nexport type ListMenuSectionProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuSection({ className, ...props }: ListMenuSectionProps) {\n  return <div className={className} {...props} />;\n}\n\nexport type ListMenuHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuHeader({ className, ...props }: ListMenuHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"sticky top-0 z-10 flex w-full items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type ListMenuItemProps = HTMLAttributes<HTMLDivElement> & {\n  /** Row density. Compact is intended for single-line values and controls. */\n  variant?: \"default\" | \"compact\";\n  /** Applies the primary selected-row treatment used for the open/detail row. */\n  active?: boolean;\n  /** Applies the softer selected treatment used for checkbox or multi-select rows. */\n  selected?: boolean;\n  /** Left-border class when neither active nor selected. */\n  accentClassName?: string;\n  /** Whether the row gets pointer and hover affordances. */\n  interactive?: boolean;\n  /** Stable key that opts the row into `ListMenu` multi-select. */\n  itemKey?: string;\n  /** Hide the leading checkbox for this row even when selection is enabled. */\n  hideCheckbox?: boolean;\n  /** Accessible name for the leading checkbox. Defaults to \"Select item\". */\n  checkboxLabel?: string;\n};\n\nexport function ListMenuItem({\n  variant = \"default\",\n  active = false,\n  selected = false,\n  accentClassName = \"border-transparent\",\n  interactive = true,\n  itemKey,\n  hideCheckbox = false,\n  checkboxLabel = \"Select item\",\n  className,\n  onClick,\n  children,\n  ...props\n}: ListMenuItemProps) {\n  const ctx = useListMenuSelectionContext();\n  const selectable = ctx !== null && itemKey !== undefined;\n  const rowSelected = selectable ? ctx.selection.isSelected(itemKey) : selected;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (selectable && event.shiftKey) {\n      event.preventDefault();\n      ctx.selection.toggle(itemKey, { shiftKey: true });\n      return;\n    }\n    onClick?.(event);\n  };\n\n  const showCheckbox = selectable && ctx.showCheckboxes && !hideCheckbox;\n  const body =\n    selectable && showCheckbox ? (\n      <div className=\"flex items-start gap-2\">\n        <input\n          type=\"checkbox\"\n          className=\"mt-0.5 size-4 shrink-0 rounded border-input\"\n          checked={rowSelected}\n          aria-label={checkboxLabel}\n          onClick={(event) => {\n            event.stopPropagation();\n            if (event.shiftKey) {\n              event.preventDefault();\n              ctx.selection.toggle(itemKey, { shiftKey: true });\n            }\n          }}\n          onChange={() => ctx.selection.toggle(itemKey)}\n        />\n        <div className=\"min-w-0 flex-1\">{children}</div>\n      </div>\n    ) : (\n      children\n    );\n\n  return (\n    <div\n      className={cn(\n        \"min-w-0 overflow-hidden border-l-2 transition-colors\",\n        interactive && \"cursor-pointer\",\n        active\n          ? \"border-primary bg-primary/10\"\n          : rowSelected\n            ? \"border-primary/40 bg-primary/5 hover:bg-primary/10\"\n            : cn(accentClassName, interactive && \"hover:bg-muted\"),\n        variant === \"compact\" && \"px-density-2 py-1 text-xs\",\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {body}\n    </div>\n  );\n}\n\nexport type ListMenuAction = {\n  label: ReactNode;\n  /** Receives the currently selected keys (ordered as in the menu). */\n  onClick: (selectedKeys: string[]) => void;\n  icon?: ReactNode;\n  disabled?: boolean;\n  variant?: ButtonProps[\"variant\"];\n};\n\nexport type ListMenuActionBarProps = HTMLAttributes<HTMLDivElement> & {\n  /** Selection to act on; falls back to the enclosing `ListMenu` selection context. */\n  selection?: ListMenuSelection;\n  /** Bulk actions executed across every selected key. */\n  actions?: ListMenuAction[];\n  /** Override the \"{n} selected\" summary. */\n  renderLabel?: (count: number) => ReactNode;\n  /** Hide the whole bar when nothing is selected (default true). */\n  hideWhenEmpty?: boolean;\n  /** Label for the clear button; pass null to hide it. */\n  clearLabel?: ReactNode;\n};\n\nexport function ListMenuActionBar({\n  selection: selectionProp,\n  actions = [],\n  renderLabel,\n  hideWhenEmpty = true,\n  clearLabel = \"Clear\",\n  className,\n  children,\n  ...props\n}: ListMenuActionBarProps) {\n  const ctx = useListMenuSelectionContext();\n  const selection = selectionProp ?? ctx?.selection;\n  if (!selection) return null;\n  const { count } = selection;\n  if (hideWhenEmpty && count === 0) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-sm font-medium text-foreground\">\n        {renderLabel ? renderLabel(count) : `${count} selected`}\n      </span>\n      <div className=\"ml-auto flex items-center gap-1\">\n        {actions.map((action, i) => (\n          <Button\n            key={i}\n            type=\"button\"\n            size=\"sm\"\n            variant={action.variant ?? \"outline\"}\n            disabled={action.disabled || count === 0}\n            onClick={() => action.onClick(selection.selectedKeys)}\n          >\n            {action.icon}\n            {action.label}\n          </Button>\n        ))}\n        {children}\n        {clearLabel !== null && (\n          <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => selection.clear()}>\n            {clearLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/SegmentedControl.cjs

@@ -76,7 +76,8 @@ function SegmentedControl({
               size === "lg" && "rounded-lg text-left",
               option.description ? "whitespace-normal" : "whitespace-nowrap",
               SIZE_CLASSES[size],
-              active ? size === "lg" ? "border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25" : "border-border bg-card text-foreground shadow-sm" : size === "lg" ? "border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm" : "text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground"
+              active ? size === "lg" ? "border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25" : "border-border bg-card text-foreground shadow-sm" : size === "lg" ? "border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm" : "text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground",
+              active && option.activeClassName
             ),
             children: [
               option.icon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -85,7 +86,8 @@ function SegmentedControl({
                   ...typeof option.icon === "string" ? { name: option.icon } : { icon: option.icon },
                   className: utils.cn(
                     size === "lg" ? "size-4 shrink-0" : "size-3.5 shrink-0",
-                    size === "lg" && (active ? "text-primary" : "text-muted-foreground")
+                    size === "lg" && (active ? "text-primary" : "text-muted-foreground"),
+                    option.iconClassName
                   )
                 }
               ),

package/dist/components/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.cjs","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\" | \"lg\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Optional secondary line, used by larger card-like segmented controls. */\n  description?: ReactNode;\n  /** Native title attribute. */\n  title?: string;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser and `lg` is card-like. */\n  size?: SegmentedSize;\n  /** Allows segments to wrap instead of overflowing horizontally. */\n  wrap?: boolean;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"h-full px-control-px text-sm gap-1.5\",\n  lg: \"min-h-[4.25rem] min-w-44 flex-1 px-density-3 py-density-3 gap-density-2 text-sm\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  wrap = false,\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\n        \"inline-flex items-center rounded-md bg-muted p-0.5\",\n        size === \"md\" && \"h-control-h\",\n        size === \"lg\" && \"gap-density-2 bg-transparent p-0\",\n        wrap && \"flex-wrap\",\n        className,\n      )}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center rounded-[5px] border border-transparent font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              size === \"lg\" && \"rounded-lg text-left\",\n              option.description ? \"whitespace-normal\" : \"whitespace-nowrap\",\n              SIZE_CLASSES[size],\n              active\n                ? size === \"lg\"\n                  ? \"border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25\"\n                  : \"border-border bg-card text-foreground shadow-sm\"\n                : size === \"lg\"\n                  ? \"border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm\"\n                  : \"text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground\",\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\"\n                  ? { name: option.icon }\n                  : { icon: option.icon })}\n                className={cn(\n                  size === \"lg\" ? \"size-4 shrink-0\" : \"size-3.5 shrink-0\",\n                  size === \"lg\" &&\n                    (active ? \"text-primary\" : \"text-muted-foreground\"),\n                )}\n              />\n            )}\n            <span\n              className={cn(\n                \"min-w-0\",\n                size === \"lg\" &&\n                  \"flex flex-col items-start text-left leading-tight\",\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n              {option.description && (\n                <span\n                  className={cn(\n                    \"mt-0.5 max-w-56 whitespace-normal break-words text-[11px] font-normal leading-snug\",\n                    active\n                      ? \"text-muted-foreground\"\n                      : \"text-muted-foreground/80\",\n                  )}\n                >\n                  {option.description}\n                </span>\n              )}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["useRef","jsx","cn","jsxs","Icon"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.cjs","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\" | \"lg\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Classes applied to the leading icon. */\n  iconClassName?: string;\n  /** Classes applied to this segment only while selected. */\n  activeClassName?: string;\n  /** Optional secondary line, used by larger card-like segmented controls. */\n  description?: ReactNode;\n  /** Native title attribute. */\n  title?: string;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser and `lg` is card-like. */\n  size?: SegmentedSize;\n  /** Allows segments to wrap instead of overflowing horizontally. */\n  wrap?: boolean;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"h-full px-control-px text-sm gap-1.5\",\n  lg: \"min-h-[4.25rem] min-w-44 flex-1 px-density-3 py-density-3 gap-density-2 text-sm\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  wrap = false,\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\n        \"inline-flex items-center rounded-md bg-muted p-0.5\",\n        size === \"md\" && \"h-control-h\",\n        size === \"lg\" && \"gap-density-2 bg-transparent p-0\",\n        wrap && \"flex-wrap\",\n        className,\n      )}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center rounded-[5px] border border-transparent font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              size === \"lg\" && \"rounded-lg text-left\",\n              option.description ? \"whitespace-normal\" : \"whitespace-nowrap\",\n              SIZE_CLASSES[size],\n              active\n                ? size === \"lg\"\n                  ? \"border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25\"\n                  : \"border-border bg-card text-foreground shadow-sm\"\n                : size === \"lg\"\n                  ? \"border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm\"\n                  : \"text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground\",\n              active && option.activeClassName,\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\"\n                  ? { name: option.icon }\n                  : { icon: option.icon })}\n                className={cn(\n                  size === \"lg\" ? \"size-4 shrink-0\" : \"size-3.5 shrink-0\",\n                  size === \"lg\" &&\n                    (active ? \"text-primary\" : \"text-muted-foreground\"),\n                  option.iconClassName,\n                )}\n              />\n            )}\n            <span\n              className={cn(\n                \"min-w-0\",\n                size === \"lg\" &&\n                  \"flex flex-col items-start text-left leading-tight\",\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n              {option.description && (\n                <span\n                  className={cn(\n                    \"mt-0.5 max-w-56 whitespace-normal break-words text-[11px] font-normal leading-snug\",\n                    active\n                      ? \"text-muted-foreground\"\n                      : \"text-muted-foreground/80\",\n                  )}\n                >\n                  {option.description}\n                </span>\n              )}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["useRef","jsx","cn","jsxs","Icon"],"mappings":"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"}

package/dist/components/SegmentedControl.d.ts

@@ -8,6 +8,10 @@ export type SegmentedOption<T extends string = string> = {
     label: ReactNode;
     /** Optional leading icon (imported `Ui*` component or runtime name). */
     icon?: string | StaticIconComponent;
+    /** Classes applied to the leading icon. */
+    iconClassName?: string;
+    /** Classes applied to this segment only while selected. */
+    activeClassName?: string;
     /** Optional secondary line, used by larger card-like segmented controls. */
     description?: ReactNode;
     /** Native title attribute. */

package/dist/components/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/components/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACvD,yCAAyC;IACzC,EAAE,EAAE,CAAC,CAAC;IACN,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,4EAA4E;IAC5E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC7D,oCAAoC;IACpC,KAAK,EAAE,CAAC,CAAC;IACT,yDAAyD;IACzD,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,gGAAgG;IAChG,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAW,EACX,IAAY,EACZ,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CA2G1B"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/components/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACvD,yCAAyC;IACzC,EAAE,EAAE,CAAC,CAAC;IACN,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC7D,oCAAoC;IACpC,KAAK,EAAE,CAAC,CAAC;IACT,yDAAyD;IACzD,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,gGAAgG;IAChG,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAW,EACX,IAAY,EACZ,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CA6G1B"}

package/dist/components/SegmentedControl.js

@@ -74,7 +74,8 @@ function SegmentedControl({
               size === "lg" && "rounded-lg text-left",
               option.description ? "whitespace-normal" : "whitespace-nowrap",
               SIZE_CLASSES[size],
-              active ? size === "lg" ? "border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25" : "border-border bg-card text-foreground shadow-sm" : size === "lg" ? "border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm" : "text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground"
+              active ? size === "lg" ? "border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25" : "border-border bg-card text-foreground shadow-sm" : size === "lg" ? "border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm" : "text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground",
+              active && option.activeClassName
             ),
             children: [
               option.icon && /* @__PURE__ */ jsx(
@@ -83,7 +84,8 @@ function SegmentedControl({
                   ...typeof option.icon === "string" ? { name: option.icon } : { icon: option.icon },
                   className: cn(
                     size === "lg" ? "size-4 shrink-0" : "size-3.5 shrink-0",
-                    size === "lg" && (active ? "text-primary" : "text-muted-foreground")
+                    size === "lg" && (active ? "text-primary" : "text-muted-foreground"),
+                    option.iconClassName
                   )
                 }
               ),

package/dist/components/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\" | \"lg\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Optional secondary line, used by larger card-like segmented controls. */\n  description?: ReactNode;\n  /** Native title attribute. */\n  title?: string;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser and `lg` is card-like. */\n  size?: SegmentedSize;\n  /** Allows segments to wrap instead of overflowing horizontally. */\n  wrap?: boolean;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"h-full px-control-px text-sm gap-1.5\",\n  lg: \"min-h-[4.25rem] min-w-44 flex-1 px-density-3 py-density-3 gap-density-2 text-sm\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  wrap = false,\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\n        \"inline-flex items-center rounded-md bg-muted p-0.5\",\n        size === \"md\" && \"h-control-h\",\n        size === \"lg\" && \"gap-density-2 bg-transparent p-0\",\n        wrap && \"flex-wrap\",\n        className,\n      )}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center rounded-[5px] border border-transparent font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              size === \"lg\" && \"rounded-lg text-left\",\n              option.description ? \"whitespace-normal\" : \"whitespace-nowrap\",\n              SIZE_CLASSES[size],\n              active\n                ? size === \"lg\"\n                  ? \"border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25\"\n                  : \"border-border bg-card text-foreground shadow-sm\"\n                : size === \"lg\"\n                  ? \"border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm\"\n                  : \"text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground\",\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\"\n                  ? { name: option.icon }\n                  : { icon: option.icon })}\n                className={cn(\n                  size === \"lg\" ? \"size-4 shrink-0\" : \"size-3.5 shrink-0\",\n                  size === \"lg\" &&\n                    (active ? \"text-primary\" : \"text-muted-foreground\"),\n                )}\n              />\n            )}\n            <span\n              className={cn(\n                \"min-w-0\",\n                size === \"lg\" &&\n                  \"flex flex-col items-start text-left leading-tight\",\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n              {option.description && (\n                <span\n                  className={cn(\n                    \"mt-0.5 max-w-56 whitespace-normal break-words text-[11px] font-normal leading-snug\",\n                    active\n                      ? \"text-muted-foreground\"\n                      : \"text-muted-foreground/80\",\n                  )}\n                >\n                  {option.description}\n                </span>\n              )}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\" | \"lg\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Classes applied to the leading icon. */\n  iconClassName?: string;\n  /** Classes applied to this segment only while selected. */\n  activeClassName?: string;\n  /** Optional secondary line, used by larger card-like segmented controls. */\n  description?: ReactNode;\n  /** Native title attribute. */\n  title?: string;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser and `lg` is card-like. */\n  size?: SegmentedSize;\n  /** Allows segments to wrap instead of overflowing horizontally. */\n  wrap?: boolean;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"h-full px-control-px text-sm gap-1.5\",\n  lg: \"min-h-[4.25rem] min-w-44 flex-1 px-density-3 py-density-3 gap-density-2 text-sm\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  wrap = false,\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\n        \"inline-flex items-center rounded-md bg-muted p-0.5\",\n        size === \"md\" && \"h-control-h\",\n        size === \"lg\" && \"gap-density-2 bg-transparent p-0\",\n        wrap && \"flex-wrap\",\n        className,\n      )}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center rounded-[5px] border border-transparent font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              size === \"lg\" && \"rounded-lg text-left\",\n              option.description ? \"whitespace-normal\" : \"whitespace-nowrap\",\n              SIZE_CLASSES[size],\n              active\n                ? size === \"lg\"\n                  ? \"border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25\"\n                  : \"border-border bg-card text-foreground shadow-sm\"\n                : size === \"lg\"\n                  ? \"border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm\"\n                  : \"text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground\",\n              active && option.activeClassName,\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\"\n                  ? { name: option.icon }\n                  : { icon: option.icon })}\n                className={cn(\n                  size === \"lg\" ? \"size-4 shrink-0\" : \"size-3.5 shrink-0\",\n                  size === \"lg\" &&\n                    (active ? \"text-primary\" : \"text-muted-foreground\"),\n                  option.iconClassName,\n                )}\n              />\n            )}\n            <span\n              className={cn(\n                \"min-w-0\",\n                size === \"lg\" &&\n                  \"flex flex-col items-start text-left leading-tight\",\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n              {option.description && (\n                <span\n                  className={cn(\n                    \"mt-0.5 max-w-56 whitespace-normal break-words text-[11px] font-normal leading-snug\",\n                    active\n                      ? \"text-muted-foreground\"\n                      : \"text-muted-foreground/80\",\n                  )}\n                >\n                  {option.description}\n                </span>\n              )}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/clipboard.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+async function copyText(text) {
+  var _a;
+  if (typeof navigator !== "undefined" && ((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return;
+    } catch {
+    }
+  }
+  if (typeof document === "undefined" || typeof document.execCommand !== "function") {
+    throw new Error("Browser rejected the copy request");
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  let copied = false;
+  try {
+    copied = document.execCommand("copy");
+  } catch {
+    copied = false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+  if (!copied) throw new Error("Browser rejected the copy request");
+}
+function useCopyFlash(resetMs = 1500) {
+  const [state, setState] = react.useState("idle");
+  const timer = react.useRef(null);
+  react.useEffect(
+    () => () => {
+      if (timer.current !== null) clearTimeout(timer.current);
+    },
+    []
+  );
+  const copy = react.useCallback(
+    (text) => {
+      void copyText(text).then(
+        () => setState("copied"),
+        () => setState("error")
+      );
+      if (timer.current !== null) clearTimeout(timer.current);
+      timer.current = setTimeout(() => {
+        timer.current = null;
+        setState("idle");
+      }, resetMs);
+    },
+    [resetMs]
+  );
+  return { state, copy };
+}
+exports.copyText = copyText;
+exports.useCopyFlash = useCopyFlash;
+//# sourceMappingURL=clipboard.cjs.map

package/dist/components/clipboard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.cjs","sources":["../../src/components/clipboard.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport type CopyFlashState = \"idle\" | \"copied\" | \"error\";\n\n// copyText writes text to the clipboard, falling back to a hidden-textarea\n// execCommand(\"copy\") when the async Clipboard API is unavailable or rejects —\n// an insecure (http) origin, or an embedded WebView where writeText is denied.\n// Rejects when both paths fail so callers can surface the failure instead of a\n// copy button that silently does nothing.\nexport async function copyText(text: string): Promise<void> {\n  if (typeof navigator !== \"undefined\" && navigator.clipboard?.writeText) {\n    try {\n      await navigator.clipboard.writeText(text);\n      return;\n    } catch {\n      // Fall through to the user-gesture copy path below.\n    }\n  }\n  // execCommand is absent in jsdom and deprecated in browsers, so treat a\n  // missing one as a rejection rather than letting a TypeError escape.\n  if (typeof document === \"undefined\" || typeof document.execCommand !== \"function\") {\n    throw new Error(\"Browser rejected the copy request\");\n  }\n  const textarea = document.createElement(\"textarea\");\n  textarea.value = text;\n  textarea.style.position = \"fixed\";\n  textarea.style.opacity = \"0\";\n  document.body.appendChild(textarea);\n  textarea.focus();\n  textarea.select();\n  let copied = false;\n  try {\n    copied = document.execCommand(\"copy\");\n  } catch {\n    copied = false;\n  } finally {\n    document.body.removeChild(textarea);\n  }\n  if (!copied) throw new Error(\"Browser rejected the copy request\");\n}\n\n/**\n * Drives a copy affordance's transient feedback: `copy(text)` writes to the\n * clipboard and flips `state` to `copied`/`error`, reverting after `resetMs`.\n * The pending timer is cleared on unmount so it never sets state after the\n * component is gone.\n */\nexport function useCopyFlash(resetMs = 1500): {\n  state: CopyFlashState;\n  copy: (text: string) => void;\n} {\n  const [state, setState] = useState<CopyFlashState>(\"idle\");\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timer.current !== null) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const copy = useCallback(\n    (text: string) => {\n      void copyText(text).then(\n        () => setState(\"copied\"),\n        () => setState(\"error\"),\n      );\n      if (timer.current !== null) clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        timer.current = null;\n        setState(\"idle\");\n      }, resetMs);\n    },\n    [resetMs],\n  );\n\n  return { state, copy };\n}\n"],"names":["useState","useRef","useEffect","useCallback"],"mappings":";;;AASA,eAAsB,SAAS,MAA6B;;AAC1D,MAAI,OAAO,cAAc,iBAAe,eAAU,cAAV,mBAAqB,YAAW;AACtE,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,IAAI;AACxC;AAAA,IACF,QAAQ;AAAA,IAER;AAAA,EACF;AAGA,MAAI,OAAO,aAAa,eAAe,OAAO,SAAS,gBAAgB,YAAY;AACjF,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AACA,QAAM,WAAW,SAAS,cAAc,UAAU;AAClD,WAAS,QAAQ;AACjB,WAAS,MAAM,WAAW;AAC1B,WAAS,MAAM,UAAU;AACzB,WAAS,KAAK,YAAY,QAAQ;AAClC,WAAS,MAAA;AACT,WAAS,OAAA;AACT,MAAI,SAAS;AACb,MAAI;AACF,aAAS,SAAS,YAAY,MAAM;AAAA,EACtC,QAAQ;AACN,aAAS;AAAA,EACX,UAAA;AACE,aAAS,KAAK,YAAY,QAAQ;AAAA,EACpC;AACA,MAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,mCAAmC;AAClE;AAQO,SAAS,aAAa,UAAU,MAGrC;AACA,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAyB,MAAM;AACzD,QAAM,QAAQC,MAAAA,OAA6C,IAAI;AAE/DC,QAAAA;AAAAA,IACE,MAAM,MAAM;AACV,UAAI,MAAM,YAAY,KAAM,cAAa,MAAM,OAAO;AAAA,IACxD;AAAA,IACA,CAAA;AAAA,EAAC;AAGH,QAAM,OAAOC,MAAAA;AAAAA,IACX,CAAC,SAAiB;AAChB,WAAK,SAAS,IAAI,EAAE;AAAA,QAClB,MAAM,SAAS,QAAQ;AAAA,QACvB,MAAM,SAAS,OAAO;AAAA,MAAA;AAExB,UAAI,MAAM,YAAY,KAAM,cAAa,MAAM,OAAO;AACtD,YAAM,UAAU,WAAW,MAAM;AAC/B,cAAM,UAAU;AAChB,iBAAS,MAAM;AAAA,MACjB,GAAG,OAAO;AAAA,IACZ;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAGV,SAAO,EAAE,OAAO,KAAA;AAClB;;;"}

package/dist/components/clipboard.d.ts

@@ -0,0 +1,13 @@
+export type CopyFlashState = "idle" | "copied" | "error";
+export declare function copyText(text: string): Promise<void>;
+/**
+ * Drives a copy affordance's transient feedback: `copy(text)` writes to the
+ * clipboard and flips `state` to `copied`/`error`, reverting after `resetMs`.
+ * The pending timer is cleared on unmount so it never sets state after the
+ * component is gone.
+ */
+export declare function useCopyFlash(resetMs?: number): {
+    state: CopyFlashState;
+    copy: (text: string) => void;
+};
+//# sourceMappingURL=clipboard.d.ts.map

package/dist/components/clipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../../src/components/clipboard.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAOzD,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CA8B1D;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,OAAO,SAAO,GAAG;IAC5C,KAAK,EAAE,cAAc,CAAC;IACtB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,CA2BA"}

package/dist/components/clipboard.js

@@ -0,0 +1,60 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+async function copyText(text) {
+  var _a;
+  if (typeof navigator !== "undefined" && ((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return;
+    } catch {
+    }
+  }
+  if (typeof document === "undefined" || typeof document.execCommand !== "function") {
+    throw new Error("Browser rejected the copy request");
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  let copied = false;
+  try {
+    copied = document.execCommand("copy");
+  } catch {
+    copied = false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+  if (!copied) throw new Error("Browser rejected the copy request");
+}
+function useCopyFlash(resetMs = 1500) {
+  const [state, setState] = useState("idle");
+  const timer = useRef(null);
+  useEffect(
+    () => () => {
+      if (timer.current !== null) clearTimeout(timer.current);
+    },
+    []
+  );
+  const copy = useCallback(
+    (text) => {
+      void copyText(text).then(
+        () => setState("copied"),
+        () => setState("error")
+      );
+      if (timer.current !== null) clearTimeout(timer.current);
+      timer.current = setTimeout(() => {
+        timer.current = null;
+        setState("idle");
+      }, resetMs);
+    },
+    [resetMs]
+  );
+  return { state, copy };
+}
+export {
+  copyText,
+  useCopyFlash
+};
+//# sourceMappingURL=clipboard.js.map

package/dist/components/clipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.js","sources":["../../src/components/clipboard.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport type CopyFlashState = \"idle\" | \"copied\" | \"error\";\n\n// copyText writes text to the clipboard, falling back to a hidden-textarea\n// execCommand(\"copy\") when the async Clipboard API is unavailable or rejects —\n// an insecure (http) origin, or an embedded WebView where writeText is denied.\n// Rejects when both paths fail so callers can surface the failure instead of a\n// copy button that silently does nothing.\nexport async function copyText(text: string): Promise<void> {\n  if (typeof navigator !== \"undefined\" && navigator.clipboard?.writeText) {\n    try {\n      await navigator.clipboard.writeText(text);\n      return;\n    } catch {\n      // Fall through to the user-gesture copy path below.\n    }\n  }\n  // execCommand is absent in jsdom and deprecated in browsers, so treat a\n  // missing one as a rejection rather than letting a TypeError escape.\n  if (typeof document === \"undefined\" || typeof document.execCommand !== \"function\") {\n    throw new Error(\"Browser rejected the copy request\");\n  }\n  const textarea = document.createElement(\"textarea\");\n  textarea.value = text;\n  textarea.style.position = \"fixed\";\n  textarea.style.opacity = \"0\";\n  document.body.appendChild(textarea);\n  textarea.focus();\n  textarea.select();\n  let copied = false;\n  try {\n    copied = document.execCommand(\"copy\");\n  } catch {\n    copied = false;\n  } finally {\n    document.body.removeChild(textarea);\n  }\n  if (!copied) throw new Error(\"Browser rejected the copy request\");\n}\n\n/**\n * Drives a copy affordance's transient feedback: `copy(text)` writes to the\n * clipboard and flips `state` to `copied`/`error`, reverting after `resetMs`.\n * The pending timer is cleared on unmount so it never sets state after the\n * component is gone.\n */\nexport function useCopyFlash(resetMs = 1500): {\n  state: CopyFlashState;\n  copy: (text: string) => void;\n} {\n  const [state, setState] = useState<CopyFlashState>(\"idle\");\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timer.current !== null) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const copy = useCallback(\n    (text: string) => {\n      void copyText(text).then(\n        () => setState(\"copied\"),\n        () => setState(\"error\"),\n      );\n      if (timer.current !== null) clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        timer.current = null;\n        setState(\"idle\");\n      }, resetMs);\n    },\n    [resetMs],\n  );\n\n  return { state, copy };\n}\n"],"names":[],"mappings":";AASA,eAAsB,SAAS,MAA6B;;AAC1D,MAAI,OAAO,cAAc,iBAAe,eAAU,cAAV,mBAAqB,YAAW;AACtE,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,IAAI;AACxC;AAAA,IACF,QAAQ;AAAA,IAER;AAAA,EACF;AAGA,MAAI,OAAO,aAAa,eAAe,OAAO,SAAS,gBAAgB,YAAY;AACjF,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AACA,QAAM,WAAW,SAAS,cAAc,UAAU;AAClD,WAAS,QAAQ;AACjB,WAAS,MAAM,WAAW;AAC1B,WAAS,MAAM,UAAU;AACzB,WAAS,KAAK,YAAY,QAAQ;AAClC,WAAS,MAAA;AACT,WAAS,OAAA;AACT,MAAI,SAAS;AACb,MAAI;AACF,aAAS,SAAS,YAAY,MAAM;AAAA,EACtC,QAAQ;AACN,aAAS;AAAA,EACX,UAAA;AACE,aAAS,KAAK,YAAY,QAAQ;AAAA,EACpC;AACA,MAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,mCAAmC;AAClE;AAQO,SAAS,aAAa,UAAU,MAGrC;AACA,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAyB,MAAM;AACzD,QAAM,QAAQ,OAA6C,IAAI;AAE/D;AAAA,IACE,MAAM,MAAM;AACV,UAAI,MAAM,YAAY,KAAM,cAAa,MAAM,OAAO;AAAA,IACxD;AAAA,IACA,CAAA;AAAA,EAAC;AAGH,QAAM,OAAO;AAAA,IACX,CAAC,SAAiB;AAChB,WAAK,SAAS,IAAI,EAAE;AAAA,QAClB,MAAM,SAAS,QAAQ;AAAA,QACvB,MAAM,SAAS,OAAO;AAAA,MAAA;AAExB,UAAI,MAAM,YAAY,KAAM,cAAa,MAAM,OAAO;AACtD,YAAM,UAAU,WAAW,MAAM;AAC/B,cAAM,UAAU;AAChB,iBAAS,MAAM;AAAA,MACjB,GAAG,OAAO;AAAA,IACZ;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAGV,SAAO,EAAE,OAAO,KAAA;AAClB;"}

package/dist/components/json-schema-form-array.cjs

@@ -15,6 +15,7 @@ const jsonSchemaFormResolve = require("./json-schema-form-resolve.cjs");
 const jsonSchemaFormErrors = require("./json-schema-form-errors.cjs");
 const jsonSchemaFormTableArray = require("./json-schema-form-table-array.cjs");
 const jsonSchemaFormTagsCombobox = require("./json-schema-form-tags-combobox.cjs");
+const jsonSchemaFormListArray = require("./json-schema-form-list-array.cjs");
 const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
 const UiAdd = require("../icons/components/UiAdd.cjs");
 const TAG_SEPARATORS = [","];
@@ -25,6 +26,20 @@ function ArrayControl({
 }) {
   const readOnly = ctx.readOnly || field.readOnly === true;
   const choices = enumItemOptions(field);
+  const scalarType = jsonSchemaFormResolve.scalarItemsType(field.itemSchema);
+  if (field.arrayDisplay === "list") {
+    if (scalarType !== "string") {
+      throw new Error(`${field.key} uses x-array-display list without string items`);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      jsonSchemaFormListArray.CompactListArray,
+      {
+        field,
+        fieldId,
+        readOnly
+      }
+    );
+  }
   if (field.arrayDisplay === "filter-pills" && choices.length > 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       FilterPillArray,
@@ -48,7 +63,6 @@ function ArrayControl({
       }
     );
   }
-  const scalarType = jsonSchemaFormResolve.scalarItemsType(field.itemSchema);
   if (field.arrayDisplay !== "stacked" && scalarType) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       jsonSchemaFormTagsCombobox.TagsComboboxControl,