@refraction-ui/react 0.20.1 → 0.22.0

package/dist/internal/react-select/index.d.cts

@@ -3,17 +3,25 @@ import * as React from 'react';
 export { SelectAPI, SelectOption, selectContentVariants, selectItemVariants, selectTokens, selectTriggerVariants } from '../select/index.cjs';
 
 interface SelectProps {
+    /** Selected value (controlled). */
     value?: string;
+    /** Initially selected value (uncontrolled). */
+    defaultValue?: string;
     onValueChange?: (value: string) => void;
     disabled?: boolean;
     children?: React.ReactNode;
+    /** Shown by `SelectValue` while nothing is selected. */
     placeholder?: string;
+    /** Class for the positioning wrapper the select renders around its parts. */
+    className?: string;
 }
 /**
  * Select -- dropdown select with accessible keyboard and ARIA support.
- * Compound component: Select > SelectTrigger + SelectContent > SelectItem.
+ * Compound component: Select > SelectTrigger (> SelectValue) + SelectContent > SelectItem.
+ * Renders a `relative` wrapper so the listbox floats under the trigger, and
+ * closes on a pointer press outside it.
  */
-declare function Select({ value, onValueChange, disabled, children, placeholder, }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ value: controlledValue, defaultValue, onValueChange, disabled, children, placeholder, className, }: SelectProps): react_jsx_runtime.JSX.Element;
 interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     size?: 'sm' | 'default' | 'lg';
 }
@@ -26,5 +34,15 @@ interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
 }
 declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Shown while nothing is selected. Defaults to the `Select` placeholder. */
+    placeholder?: React.ReactNode;
+}
+/**
+ * SelectValue -- place inside `SelectTrigger` to show the selected item's
+ * label (its `SelectItem` children), or the placeholder when nothing is
+ * selected. Pass `children` to render the value yourself.
+ */
+declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 
-export { Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps };
+export { Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

package/dist/internal/react-select/index.d.ts

@@ -3,17 +3,25 @@ import * as React from 'react';
 export { SelectAPI, SelectOption, selectContentVariants, selectItemVariants, selectTokens, selectTriggerVariants } from '../select/index.js';
 
 interface SelectProps {
+    /** Selected value (controlled). */
     value?: string;
+    /** Initially selected value (uncontrolled). */
+    defaultValue?: string;
     onValueChange?: (value: string) => void;
     disabled?: boolean;
     children?: React.ReactNode;
+    /** Shown by `SelectValue` while nothing is selected. */
     placeholder?: string;
+    /** Class for the positioning wrapper the select renders around its parts. */
+    className?: string;
 }
 /**
  * Select -- dropdown select with accessible keyboard and ARIA support.
- * Compound component: Select > SelectTrigger + SelectContent > SelectItem.
+ * Compound component: Select > SelectTrigger (> SelectValue) + SelectContent > SelectItem.
+ * Renders a `relative` wrapper so the listbox floats under the trigger, and
+ * closes on a pointer press outside it.
  */
-declare function Select({ value, onValueChange, disabled, children, placeholder, }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ value: controlledValue, defaultValue, onValueChange, disabled, children, placeholder, className, }: SelectProps): react_jsx_runtime.JSX.Element;
 interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     size?: 'sm' | 'default' | 'lg';
 }
@@ -26,5 +34,15 @@ interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
 }
 declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Shown while nothing is selected. Defaults to the `Select` placeholder. */
+    placeholder?: React.ReactNode;
+}
+/**
+ * SelectValue -- place inside `SelectTrigger` to show the selected item's
+ * label (its `SelectItem` children), or the placeholder when nothing is
+ * selected. Pass `children` to render the value yourself.
+ */
+declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 
-export { Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps };
+export { Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

package/dist/internal/react-separator/index.d.cts

@@ -1,9 +1,14 @@
 import * as React from 'react';
-import { SeparatorOrientation } from '../separator/index.cjs';
+import { SeparatorOrientation, SeparatorTone } from '../separator/index.cjs';
 
 interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Orientation of the separator. Defaults to `'horizontal'`. */
     orientation?: SeparatorOrientation;
+    /**
+     * Line tone. `'default'` uses the standard border token; `'subtle'` uses the
+     * hairline `border-subtle` token for a lighter rule (issue #485).
+     */
+    tone?: SeparatorTone;
     /**
      * Optional centered label. Only meaningful for horizontal separators —
      * renders a line on each side of the label (a "labeled divider").

package/dist/internal/react-separator/index.d.ts

@@ -1,9 +1,14 @@
 import * as React from 'react';
-import { SeparatorOrientation } from '../separator/index.js';
+import { SeparatorOrientation, SeparatorTone } from '../separator/index.js';
 
 interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Orientation of the separator. Defaults to `'horizontal'`. */
     orientation?: SeparatorOrientation;
+    /**
+     * Line tone. `'default'` uses the standard border token; `'subtle'` uses the
+     * hairline `border-subtle` token for a lighter rule (issue #485).
+     */
+    tone?: SeparatorTone;
     /**
      * Optional centered label. Only meaningful for horizontal separators —
      * renders a line on each side of the label (a "labeled divider").

package/dist/internal/select/index.d.cts

@@ -12,6 +12,15 @@ interface SelectProps {
     disabled?: boolean;
     open?: boolean;
     name?: string;
+    /**
+     * Element ids to link trigger and listbox. Adapters should pass ids that
+     * are stable across renders (e.g. React `useId`); when omitted, fresh ids
+     * are generated on every call.
+     */
+    ids?: {
+        trigger: string;
+        content: string;
+    };
 }
 interface SelectAPI {
     /** Trigger element ARIA + keyboard props */
@@ -65,5 +74,9 @@ declare const selectItemVariants: (props?: ({
 } & {
     className?: string;
 }) | undefined) => string;
+/** Positioning context: the listbox floats under the trigger. */
+declare const selectRootClass = "relative";
+/** The selected label inside the trigger; truncates, dims the placeholder. */
+declare const selectValueClass = "truncate text-left data-[placeholder]:text-muted-foreground";
 
-export { type SelectAPI, type SelectOption, type SelectProps, createSelect, selectContentVariants, selectItemVariants, selectTokens, selectTriggerVariants };
+export { type SelectAPI, type SelectOption, type SelectProps, createSelect, selectContentVariants, selectItemVariants, selectRootClass, selectTokens, selectTriggerVariants, selectValueClass };

package/dist/internal/select/index.d.ts

@@ -12,6 +12,15 @@ interface SelectProps {
     disabled?: boolean;
     open?: boolean;
     name?: string;
+    /**
+     * Element ids to link trigger and listbox. Adapters should pass ids that
+     * are stable across renders (e.g. React `useId`); when omitted, fresh ids
+     * are generated on every call.
+     */
+    ids?: {
+        trigger: string;
+        content: string;
+    };
 }
 interface SelectAPI {
     /** Trigger element ARIA + keyboard props */
@@ -65,5 +74,9 @@ declare const selectItemVariants: (props?: ({
 } & {
     className?: string;
 }) | undefined) => string;
+/** Positioning context: the listbox floats under the trigger. */
+declare const selectRootClass = "relative";
+/** The selected label inside the trigger; truncates, dims the placeholder. */
+declare const selectValueClass = "truncate text-left data-[placeholder]:text-muted-foreground";
 
-export { type SelectAPI, type SelectOption, type SelectProps, createSelect, selectContentVariants, selectItemVariants, selectTokens, selectTriggerVariants };
+export { type SelectAPI, type SelectOption, type SelectProps, createSelect, selectContentVariants, selectItemVariants, selectRootClass, selectTokens, selectTriggerVariants, selectValueClass };

package/dist/internal/separator/index.d.cts

@@ -43,13 +43,18 @@ declare function createSeparator(props?: SeparatorProps): SeparatorAPI;
  */
 declare const separatorVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | undefined;
+    tone?: "default" | "subtle" | undefined;
     labeled?: "true" | "false" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
+/** Line tone for the separator rule and labeled-divider flanks. */
+type SeparatorTone = 'default' | 'subtle';
 /** Class for each flanking line in the labeled-divider variant. */
 declare const separatorLineClass = "h-px flex-1 bg-border";
+/** Hairline variant of {@link separatorLineClass} (issue #485). */
+declare const separatorSubtleLineClass = "h-px flex-1 bg-border-subtle";
 /** Class for the centered label in the labeled-divider variant. */
 declare const separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
 
-export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, createSeparator, separatorLabelClass, separatorLineClass, separatorVariants };
+export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, type SeparatorTone, createSeparator, separatorLabelClass, separatorLineClass, separatorSubtleLineClass, separatorVariants };

package/dist/internal/separator/index.d.ts

@@ -43,13 +43,18 @@ declare function createSeparator(props?: SeparatorProps): SeparatorAPI;
  */
 declare const separatorVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | undefined;
+    tone?: "default" | "subtle" | undefined;
     labeled?: "true" | "false" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
+/** Line tone for the separator rule and labeled-divider flanks. */
+type SeparatorTone = 'default' | 'subtle';
 /** Class for each flanking line in the labeled-divider variant. */
 declare const separatorLineClass = "h-px flex-1 bg-border";
+/** Hairline variant of {@link separatorLineClass} (issue #485). */
+declare const separatorSubtleLineClass = "h-px flex-1 bg-border-subtle";
 /** Class for the centered label in the labeled-divider variant. */
 declare const separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
 
-export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, createSeparator, separatorLabelClass, separatorLineClass, separatorVariants };
+export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, type SeparatorTone, createSeparator, separatorLabelClass, separatorLineClass, separatorSubtleLineClass, separatorVariants };

package/dist/internal/shared/index.d.cts

@@ -373,9 +373,12 @@ declare function resetIdCounter(): void;
  * Handles conditional classes, arrays, and falsy values.
  * No external dependencies (no clsx, no tailwind-merge).
  *
- * For Tailwind class conflict resolution (e.g., 'p-2 p-4' → 'p-4'),
- * consumers can use @refraction-ui/tailwind-config which provides
- * a tw-merge-aware variant of this function.
+ * It does NOT resolve Tailwind conflicts: `cn('p-2', 'p-4')` keeps both and
+ * the stylesheet order decides. Components therefore keep size-owned
+ * utilities (height, text size, padding) out of their cva `base` and only in
+ * the matching variant, so a variant prop always wins; a consumer `className`
+ * that must beat a component utility can use Tailwind's `!` important
+ * modifier (e.g. `!h-7`).
  */
 type ClassValue = string | number | boolean | undefined | null | ClassValue[];
 type ClassRecord = Record<string, boolean | undefined | null>;

package/dist/internal/shared/index.d.ts

@@ -373,9 +373,12 @@ declare function resetIdCounter(): void;
  * Handles conditional classes, arrays, and falsy values.
  * No external dependencies (no clsx, no tailwind-merge).
  *
- * For Tailwind class conflict resolution (e.g., 'p-2 p-4' → 'p-4'),
- * consumers can use @refraction-ui/tailwind-config which provides
- * a tw-merge-aware variant of this function.
+ * It does NOT resolve Tailwind conflicts: `cn('p-2', 'p-4')` keeps both and
+ * the stylesheet order decides. Components therefore keep size-owned
+ * utilities (height, text size, padding) out of their cva `base` and only in
+ * the matching variant, so a variant prop always wins; a consumer `className`
+ * that must beat a component utility can use Tailwind's `!` important
+ * modifier (e.g. `!h-7`).
  */
 type ClassValue = string | number | boolean | undefined | null | ClassValue[];
 type ClassRecord = Record<string, boolean | undefined | null>;

package/dist/internal/tabs/index.d.cts

@@ -30,6 +30,13 @@ interface TabsAPI {
     idPrefix: string;
 }
 declare function createTabs(props?: TabsProps): TabsAPI;
+/**
+ * Roving-focus target for a key press inside a tab list (WAI-ARIA Tabs
+ * pattern). Given the index of the focused tab among the ENABLED tabs, returns
+ * the index to move to, or `null` when the key is not a navigation key for this
+ * orientation. Arrow keys wrap; Home/End jump to the ends.
+ */
+declare function getNextTabIndex(current: number, key: string, count: number, orientation?: 'horizontal' | 'vertical'): number | null;
 
 declare const tabsListVariants: (props?: ({
     [x: string]: string | undefined;
@@ -42,4 +49,4 @@ declare const tabsTriggerVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 
-export { type TabsAPI, type TabsProps, type TabsState, createTabs, tabsListVariants, tabsTriggerVariants };
+export { type TabsAPI, type TabsProps, type TabsState, createTabs, getNextTabIndex, tabsListVariants, tabsTriggerVariants };

package/dist/internal/tabs/index.d.ts

@@ -30,6 +30,13 @@ interface TabsAPI {
     idPrefix: string;
 }
 declare function createTabs(props?: TabsProps): TabsAPI;
+/**
+ * Roving-focus target for a key press inside a tab list (WAI-ARIA Tabs
+ * pattern). Given the index of the focused tab among the ENABLED tabs, returns
+ * the index to move to, or `null` when the key is not a navigation key for this
+ * orientation. Arrow keys wrap; Home/End jump to the ends.
+ */
+declare function getNextTabIndex(current: number, key: string, count: number, orientation?: 'horizontal' | 'vertical'): number | null;
 
 declare const tabsListVariants: (props?: ({
     [x: string]: string | undefined;
@@ -42,4 +49,4 @@ declare const tabsTriggerVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 
-export { type TabsAPI, type TabsProps, type TabsState, createTabs, tabsListVariants, tabsTriggerVariants };
+export { type TabsAPI, type TabsProps, type TabsState, createTabs, getNextTabIndex, tabsListVariants, tabsTriggerVariants };

package/dist/react-accordion.js

@@ -5,7 +5,7 @@ import {
 import {
   cn,
   devWarn
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-accordion/dist/index.js
 import * as React from "react";

package/dist/react-action-list.js

@@ -0,0 +1,74 @@
+import {
+  cn,
+  cva
+} from "./chunk-2Q6HHFAN.js";
+
+// ../react-action-list/dist/index.js
+import * as React from "react";
+
+// ../action-list/dist/index.js
+function createActionListItem(props = {}) {
+  const { disabled = false, density = "default" } = props;
+  const dataAttributes = {
+    "data-slot": "action-list-item",
+    "data-density": density
+  };
+  if (disabled) dataAttributes["data-disabled"] = "";
+  const ariaProps = {};
+  if (disabled) ariaProps["aria-disabled"] = true;
+  return { ariaProps, dataAttributes };
+}
+var actionListClass = "m-0 flex list-none flex-col divide-y divide-border-subtle p-0";
+var actionListItemVariants = cva({
+  base: "flex w-full items-center gap-4 bg-transparent text-left text-sm text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  variants: {
+    density: {
+      default: "px-4 py-3",
+      compact: "px-3 py-2"
+    }
+  },
+  defaultVariants: {
+    density: "default"
+  }
+});
+var actionListItemBodyClass = "flex min-w-0 flex-1 flex-col gap-0.5";
+var actionListItemTitleClass = "break-words font-semibold text-foreground";
+var actionListItemDescriptionClass = "break-words text-xs text-muted-foreground";
+var actionListItemMetaClass = "break-words text-xs text-muted-foreground";
+var actionListItemTrailingClass = "flex flex-none items-center gap-4 text-xs tabular-nums text-muted-foreground";
+
+// ../react-action-list/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var ActionList = React.forwardRef(function ActionList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("ul", { ref, className: cn(actionListClass, className), "data-slot": "action-list", ...props });
+});
+var ActionListItem = React.forwardRef(
+  function ActionListItem2({ title, description, meta, trailing, density = "default", disabled, className, ...props }, ref) {
+    const api = createActionListItem({ disabled, density });
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled,
+        className: cn(actionListItemVariants({ density }), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: actionListItemBodyClass, children: [
+            /* @__PURE__ */ jsx("span", { className: actionListItemTitleClass, children: title }),
+            description != null && /* @__PURE__ */ jsx("span", { className: actionListItemDescriptionClass, children: description }),
+            meta != null && /* @__PURE__ */ jsx("span", { className: actionListItemMetaClass, children: meta })
+          ] }),
+          trailing != null && /* @__PURE__ */ jsx("span", { className: actionListItemTrailingClass, children: trailing })
+        ]
+      }
+    ) });
+  }
+);
+export {
+  ActionList,
+  ActionListItem
+};
+//# sourceMappingURL=react-action-list.js.map

package/dist/react-action-list.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../action-list/src/action-list.ts", "../../action-list/src/action-list.styles.ts", "../../react-action-list/src/action-list.tsx"],
+  "sourcesContent": ["/** Row padding. */\nexport type ActionListDensity = 'default' | 'compact'\n\nexport interface ActionListItemProps {\n  disabled?: boolean\n  density?: ActionListDensity\n}\n\nexport interface ActionListItemAPI {\n  /** ARIA attributes for the row button. */\n  ariaProps: Record<string, string | number | boolean>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic props for one ActionList row. Each row is ONE\n * action (open, select, go to) rendered as a native button, so it is reachable\n * by Tab and activated by Enter / Space — unlike a clickable table row.\n */\nexport function createActionListItem(props: ActionListItemProps = {}): ActionListItemAPI {\n  const { disabled = false, density = 'default' } = props\n  const dataAttributes: Record<string, string> = {\n    'data-slot': 'action-list-item',\n    'data-density': density,\n  }\n  if (disabled) dataAttributes['data-disabled'] = ''\n  const ariaProps: Record<string, string | number | boolean> = {}\n  if (disabled) ariaProps['aria-disabled'] = true\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** The list: rows separated by hairlines, no bullets. */\nexport const actionListClass = 'm-0 flex list-none flex-col divide-y divide-border-subtle p-0'\n\n/** A row button: full width, whole row is the hit target. */\nexport const actionListItemVariants = cva({\n  base:\n    'flex w-full items-center gap-4 bg-transparent text-left text-sm text-foreground transition-colors ' +\n    'hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring ' +\n    'disabled:pointer-events-none disabled:opacity-50',\n  variants: {\n    density: {\n      default: 'px-4 py-3',\n      compact: 'px-3 py-2',\n    },\n  },\n  defaultVariants: {\n    density: 'default',\n  },\n})\n\n/** Leading text column (title, description, meta). */\nexport const actionListItemBodyClass = 'flex min-w-0 flex-1 flex-col gap-0.5'\n/** Primary line. */\nexport const actionListItemTitleClass = 'break-words font-semibold text-foreground'\n/** Supporting line under the title. */\nexport const actionListItemDescriptionClass = 'break-words text-xs text-muted-foreground'\n/** Tertiary line (owner, tags, ids). */\nexport const actionListItemMetaClass = 'break-words text-xs text-muted-foreground'\n/** Trailing column (dates, sizes, counts). */\nexport const actionListItemTrailingClass =\n  'flex flex-none items-center gap-4 text-xs tabular-nums text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  createActionListItem,\n  actionListClass,\n  actionListItemVariants,\n  actionListItemBodyClass,\n  actionListItemTitleClass,\n  actionListItemDescriptionClass,\n  actionListItemMetaClass,\n  actionListItemTrailingClass,\n  type ActionListDensity,\n} from '@refraction-ui/action-list'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { ActionListDensity }\n\nexport interface ActionListProps extends React.HTMLAttributes<HTMLUListElement> {}\n\n/** ActionList — a vertical list whose rows are each one action. Renders a `<ul>`. */\nexport const ActionList = React.forwardRef<HTMLUListElement, ActionListProps>(function ActionList(\n  { className, ...props },\n  ref,\n) {\n  return <ul ref={ref} className={cn(actionListClass, className)} data-slot=\"action-list\" {...props} />\n})\n\nexport interface ActionListItemProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title' | 'type'> {\n  /** Primary line (required). */\n  title: React.ReactNode\n  /** Optional supporting line under the title. */\n  description?: React.ReactNode\n  /** Optional tertiary line (owner, tags, ids). */\n  meta?: React.ReactNode\n  /** Optional trailing column (dates, sizes, counts). */\n  trailing?: React.ReactNode\n  /** Row padding. Defaults to `default`. */\n  density?: ActionListDensity\n}\n\n/**\n * ActionListItem — one row: an `<li>` holding a full-width native button with\n * a title, optional supporting lines and a trailing column. The ref and all\n * button props go to the button.\n */\nexport const ActionListItem = React.forwardRef<HTMLButtonElement, ActionListItemProps>(\n  function ActionListItem(\n    { title, description, meta, trailing, density = 'default', disabled, className, ...props },\n    ref,\n  ) {\n    const api = createActionListItem({ disabled, density })\n    return (\n      <li>\n        <button\n          ref={ref}\n          type=\"button\"\n          disabled={disabled}\n          className={cn(actionListItemVariants({ density }), className)}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          <span className={actionListItemBodyClass}>\n            <span className={actionListItemTitleClass}>{title}</span>\n            {description != null && (\n              <span className={actionListItemDescriptionClass}>{description}</span>\n            )}\n            {meta != null && <span className={actionListItemMetaClass}>{meta}</span>}\n          </span>\n          {trailing != null && <span className={actionListItemTrailingClass}>{trailing}</span>}\n        </button>\n      </li>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAoBO,SAAS,qBAAqB,QAA6B,CAAA,GAAuB;AACvF,QAAM,EAAE,WAAW,OAAO,UAAU,UAAA,IAAc;AAClD,QAAM,iBAAyC;IAC7C,aAAa;IACb,gBAAgB;EAAA;AAElB,MAAI,SAAU,gBAAe,eAAe,IAAI;AAChD,QAAM,YAAuD,CAAA;AAC7D,MAAI,SAAU,WAAU,eAAe,IAAI;AAC3C,SAAO,EAAE,WAAW,eAAA;AACtB;AC3BO,IAAM,kBAAkB;AAGxB,IAAM,yBAAyB,IAAI;EACxC,MACE;EAGF,UAAU;IACR,SAAS;MACP,SAAS;MACT,SAAS;IAAA;EACX;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAGM,IAAM,0BAA0B;AAEhC,IAAM,2BAA2B;AAEjC,IAAM,iCAAiC;AAEvC,IAAM,0BAA0B;AAEhC,IAAM,8BACX;;;;ACbK,IAAM,aAAmB,iBAA8C,SAASA,YACrF,EAAE,WAAW,GAAG,MAAA,GAChB,KACA;AACA,SAAO,oBAAC,MAAA,EAAG,KAAU,WAAW,GAAG,iBAAiB,SAAS,GAAG,aAAU,eAAe,GAAG,MAAA,CAAO;AACrG,CAAC;AAqBM,IAAM,iBAAuB;EAClC,SAASC,gBACP,EAAE,OAAO,aAAa,MAAM,UAAU,UAAU,WAAW,UAAU,WAAW,GAAG,MAAA,GACnF,KACA;AACA,UAAM,MAAM,qBAAqB,EAAE,UAAU,QAAA,CAAS;AACtD,WAAA,oBACG,MAAA,EACC,UAAA;MAAC;MAAA;QACC;QACA,MAAK;QACL;QACA,WAAW,GAAG,uBAAuB,EAAE,QAAA,CAAS,GAAG,SAAS;QAC3D,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAEJ,UAAA;UAAA,qBAAC,QAAA,EAAK,WAAW,yBACf,UAAA;YAAA,oBAAC,QAAA,EAAK,WAAW,0BAA2B,UAAA,MAAA,CAAM;YACjD,eAAe,QACd,oBAAC,QAAA,EAAK,WAAW,gCAAiC,UAAA,YAAA,CAAY;YAE/D,QAAQ,QAAQ,oBAAC,QAAA,EAAK,WAAW,yBAA0B,UAAA,KAAA,CAAK;UAAA,EAAA,CACnE;UACC,YAAY,QAAQ,oBAAC,QAAA,EAAK,WAAW,6BAA8B,UAAA,SAAA,CAAS;QAAA;MAAA;IAAA,EAC/E,CACF;EAEJ;AACF;",
+  "names": ["ActionList", "ActionListItem"]
+}

package/dist/react-ai.js

@@ -1,6 +1,6 @@
 import {
   devWarn
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-ai/dist/index.js
 import * as React from "react";

package/dist/react-analytics.js

@@ -1,6 +1,6 @@
 import {
   devWarn
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-analytics/dist/index.js
 import * as React from "react";

package/dist/react-animated-text.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-animated-text/dist/index.js
 import * as React from "react";

package/dist/react-app-shell.js

@@ -2,7 +2,7 @@ import {
   cn,
   devWarn,
   generateId
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-app-shell/dist/index.js
 import * as React from "react";

package/dist/react-audience-feature-card.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-audience-feature-card/dist/index.js
 import * as React from "react";

package/dist/react-audio-room.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-audio-room/dist/index.js
 import * as React from "react";

package/dist/react-auth.js

@@ -1,6 +1,6 @@
 import {
   devWarn
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-auth/dist/index.js
 import * as React2 from "react";

package/dist/react-avatar-group.js

@@ -2,7 +2,7 @@ import {
   cn,
   cva,
   generateId
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-avatar-group/dist/index.js
 import * as React from "react";

package/dist/react-avatar.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-avatar/dist/index.js
 import * as React from "react";

package/dist/react-badge.js

@@ -4,13 +4,20 @@ import {
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-badge/dist/index.js
 import * as React from "react";
 
 // ../badge/dist/index.js
-var statusVariants = ["success", "warning", "destructive"];
+var statusVariants = [
+  "success",
+  "warning",
+  "destructive",
+  "positive",
+  "caution",
+  "done"
+];
 function createBadge(props = {}) {
   const { variant = "default" } = props;
   const ariaProps = {};
@@ -25,7 +32,7 @@ function createBadge(props = {}) {
   };
 }
 var badgeVariants = cva({
-  base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  base: "inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   variants: {
     variant: {
       default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
@@ -34,7 +41,12 @@ var badgeVariants = cva({
       destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80 font-semibold",
       outline: "text-foreground",
       success: "border-transparent bg-success text-success-foreground shadow hover:bg-success/80 font-semibold",
-      warning: "border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold"
+      warning: "border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold",
+      // Second brand accent + extended status roles (issue #485).
+      tertiary: "border-transparent bg-tertiary text-tertiary-foreground shadow hover:bg-tertiary/80 font-semibold",
+      positive: "border-transparent bg-positive text-positive-foreground shadow hover:bg-positive/80 font-semibold",
+      caution: "border-transparent bg-caution text-caution-foreground shadow hover:bg-caution/80 font-semibold",
+      done: "border-transparent bg-done text-info-foreground shadow hover:bg-done/80 font-semibold"
     },
     size: {
       sm: "px-2 py-0 text-[10px]",

package/dist/react-badge.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../badge/src/badge.ts", "../../badge/src/badge.styles.ts", "../../react-badge/src/badge.tsx"],
-  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning'\nexport type BadgeSize = 'sm' | 'md'\n\nexport interface BadgeProps {\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport interface BadgeAPI {\n  /** ARIA attributes to spread on the element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n}\n\nconst statusVariants: BadgeVariant[] = ['success', 'warning', 'destructive']\n\n/** Icon name for status badge variants — non-color indicator for colorblind safety */\nconst BADGE_ICONS: Partial<Record<BadgeVariant, string>> = {\n  success: 'check',\n  warning: 'alert',\n  destructive: 'x',\n}\n\n/** Get the icon name for a badge variant (undefined for non-status variants) */\nexport function getBadgeIcon(variant: BadgeVariant): string | undefined {\n  return BADGE_ICONS[variant]\n}\n\nexport function createBadge(props: BadgeProps = {}): BadgeAPI {\n  const { variant = 'default' } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {}\n\n  if (statusVariants.includes(variant)) {\n    ariaProps.role = 'status'\n  }\n\n  const dataAttributes: Record<string, string> = {}\n  dataAttributes['data-variant'] = variant\n\n  return {\n    ariaProps,\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const badgeVariants = cva({\n  base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  variants: {\n    variant: {\n      default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n      primary: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n      secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n      destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80 font-semibold',\n      outline: 'text-foreground',\n      success: 'border-transparent bg-success text-success-foreground shadow hover:bg-success/80 font-semibold',\n      warning: 'border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold',\n    },\n    size: {\n      sm: 'px-2 py-0 text-[10px]',\n      md: 'px-2.5 py-0.5 text-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createBadge,\n  badgeVariants,\n  type BadgeVariant,\n  type BadgeSize,\n} from '@refraction-ui/badge'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: BadgeVariant\n  size?: BadgeSize\n  /** Merge the badge's classes/props onto the single child element instead of\n   * rendering a `<div>` (Radix-style `asChild`) — e.g.\n   * `<Badge asChild><a href=\"/x\">…</a></Badge>` for a linked badge. Expects\n   * exactly one React element child. */\n  asChild?: boolean\n}\n\n/**\n * Badge component — renders a styled badge with variant and size support.\n *\n * Uses the headless @refraction-ui/badge core for state and ARIA attributes.\n * Styling via Tailwind utility classes (no external CSS-in-JS).\n */\nexport const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(\n  function Badge({ variant, size, asChild = false, className, children, ...props }, ref) {\n    const api = createBadge({ variant, size })\n    const classes = cn(badgeVariants({ variant, size }), className)\n\n    if (asChild) {\n      return (\n        <Slot\n          ref={ref as React.Ref<HTMLElement>}\n          className={classes}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          {children}\n        </Slot>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n"],
-  "mappings": ";;;;;;;;;;;;AAiBA,IAAM,iBAAiC,CAAC,WAAW,WAAW,aAAa;AAcpE,SAAS,YAAY,QAAoB,CAAA,GAAc;AAC5D,QAAM,EAAE,UAAU,UAAA,IAAc;AAEhC,QAAM,YAAyC,CAAA;AAE/C,MAAI,eAAe,SAAS,OAAO,GAAG;AACpC,cAAU,OAAO;EACnB;AAEA,QAAM,iBAAyC,CAAA;AAC/C,iBAAe,cAAc,IAAI;AAEjC,SAAO;IACL;IACA;EAAA;AAEJ;AC7CO,IAAM,gBAAgB,IAAI;EAC/B,MAAM;EACN,UAAU;IACR,SAAS;MACP,SAAS;MACT,SAAS;MACT,WAAW;MACX,aAAa;MACb,SAAS;MACT,SAAS;MACT,SAAS;IAAA;IAEX,MAAM;MACJ,IAAI;MACJ,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,SAAS;IACT,MAAM;EAAA;AAEV,CAAC;;;;ACGM,IAAM,QAAc;EACzB,SAASA,OAAM,EAAE,SAAS,MAAM,UAAU,OAAO,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AACrF,UAAM,MAAM,YAAY,EAAE,SAAS,KAAA,CAAM;AACzC,UAAM,UAAU,GAAG,cAAc,EAAE,SAAS,KAAA,CAAM,GAAG,SAAS;AAE9D,QAAI,SAAS;AACX,aACE;QAAC;QAAA;UACC;UACA,WAAW;UACV,GAAG,IAAI;UACP,GAAG,IAAI;UACP,GAAG;UAEH;QAAA;MAAA;IAGP;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW;QACV,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAEH;MAAA;IAAA;EAGP;AACF;",
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type BadgeVariant =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'destructive'\n  | 'outline'\n  | 'success'\n  | 'warning'\n  // Issue #485 — second brand accent + extended status roles.\n  | 'tertiary'\n  | 'positive'\n  | 'caution'\n  | 'done'\nexport type BadgeSize = 'sm' | 'md'\n\nexport interface BadgeProps {\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport interface BadgeAPI {\n  /** ARIA attributes to spread on the element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n}\n\nconst statusVariants: BadgeVariant[] = [\n  'success',\n  'warning',\n  'destructive',\n  'positive',\n  'caution',\n  'done',\n]\n\n/** Icon name for status badge variants — non-color indicator for colorblind safety */\nconst BADGE_ICONS: Partial<Record<BadgeVariant, string>> = {\n  success: 'check',\n  warning: 'alert',\n  destructive: 'x',\n  positive: 'check',\n  caution: 'alert',\n  done: 'check',\n}\n\n/** Get the icon name for a badge variant (undefined for non-status variants) */\nexport function getBadgeIcon(variant: BadgeVariant): string | undefined {\n  return BADGE_ICONS[variant]\n}\n\nexport function createBadge(props: BadgeProps = {}): BadgeAPI {\n  const { variant = 'default' } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {}\n\n  if (statusVariants.includes(variant)) {\n    ariaProps.role = 'status'\n  }\n\n  const dataAttributes: Record<string, string> = {}\n  dataAttributes['data-variant'] = variant\n\n  return {\n    ariaProps,\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const badgeVariants = cva({\n  base: 'inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  variants: {\n    variant: {\n      default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n      primary: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n      secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n      destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80 font-semibold',\n      outline: 'text-foreground',\n      success: 'border-transparent bg-success text-success-foreground shadow hover:bg-success/80 font-semibold',\n      warning: 'border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold',\n      // Second brand accent + extended status roles (issue #485).\n      tertiary: 'border-transparent bg-tertiary text-tertiary-foreground shadow hover:bg-tertiary/80 font-semibold',\n      positive: 'border-transparent bg-positive text-positive-foreground shadow hover:bg-positive/80 font-semibold',\n      caution: 'border-transparent bg-caution text-caution-foreground shadow hover:bg-caution/80 font-semibold',\n      done: 'border-transparent bg-done text-info-foreground shadow hover:bg-done/80 font-semibold',\n    },\n    size: {\n      sm: 'px-2 py-0 text-[10px]',\n      md: 'px-2.5 py-0.5 text-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createBadge,\n  badgeVariants,\n  type BadgeVariant,\n  type BadgeSize,\n} from '@refraction-ui/badge'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: BadgeVariant\n  size?: BadgeSize\n  /** Merge the badge's classes/props onto the single child element instead of\n   * rendering a `<div>` (Radix-style `asChild`) — e.g.\n   * `<Badge asChild><a href=\"/x\">…</a></Badge>` for a linked badge. Expects\n   * exactly one React element child. */\n  asChild?: boolean\n}\n\n/**\n * Badge component — renders a styled badge with variant and size support.\n *\n * Uses the headless @refraction-ui/badge core for state and ARIA attributes.\n * Styling via Tailwind utility classes (no external CSS-in-JS).\n */\nexport const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(\n  function Badge({ variant, size, asChild = false, className, children, ...props }, ref) {\n    const api = createBadge({ variant, size })\n    const classes = cn(badgeVariants({ variant, size }), className)\n\n    if (asChild) {\n      return (\n        <Slot\n          ref={ref as React.Ref<HTMLElement>}\n          className={classes}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          {children}\n        </Slot>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;;;AA6BA,IAAM,iBAAiC;EACrC;EACA;EACA;EACA;EACA;EACA;AACF;AAiBO,SAAS,YAAY,QAAoB,CAAA,GAAc;AAC5D,QAAM,EAAE,UAAU,UAAA,IAAc;AAEhC,QAAM,YAAyC,CAAA;AAE/C,MAAI,eAAe,SAAS,OAAO,GAAG;AACpC,cAAU,OAAO;EACnB;AAEA,QAAM,iBAAyC,CAAA;AAC/C,iBAAe,cAAc,IAAI;AAEjC,SAAO;IACL;IACA;EAAA;AAEJ;ACnEO,IAAM,gBAAgB,IAAI;EAC/B,MAAM;EACN,UAAU;IACR,SAAS;MACP,SAAS;MACT,SAAS;MACT,WAAW;MACX,aAAa;MACb,SAAS;MACT,SAAS;MACT,SAAS;;MAET,UAAU;MACV,UAAU;MACV,SAAS;MACT,MAAM;IAAA;IAER,MAAM;MACJ,IAAI;MACJ,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,SAAS;IACT,MAAM;EAAA;AAEV,CAAC;;;;ACFM,IAAM,QAAc;EACzB,SAASA,OAAM,EAAE,SAAS,MAAM,UAAU,OAAO,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AACrF,UAAM,MAAM,YAAY,EAAE,SAAS,KAAA,CAAM;AACzC,UAAM,UAAU,GAAG,cAAc,EAAE,SAAS,KAAA,CAAM,GAAG,SAAS;AAE9D,QAAI,SAAS;AACX,aACE;QAAC;QAAA;UACC;UACA,WAAW;UACV,GAAG,IAAI;UACP,GAAG,IAAI;UACP,GAAG;UAEH;QAAA;MAAA;IAGP;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW;QACV,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAEH;MAAA;IAAA;EAGP;AACF;",
   "names": ["Badge"]
 }

package/dist/react-bottom-nav.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-bottom-nav/dist/index.js
 import * as React from "react";

package/dist/react-brand-network-cell.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-brand-network-cell/dist/index.js
 import * as React from "react";

package/dist/react-breadcrumbs.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-breadcrumbs/dist/index.js
 import * as React from "react";

package/dist/react-browser-chrome-mock.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-browser-chrome-mock/dist/index.js
 import * as React from "react";