@refraction-ui/react 0.21.0 → 0.22.0

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/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,7 +4,7 @@ import {
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-badge/dist/index.js
 import * as React from "react";
@@ -32,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",

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 =\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 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      // 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"],
+  "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";

package/dist/react-button.js

@@ -2,9 +2,9 @@ import {
   Button,
   buttonTokens,
   buttonVariants
-} from "./chunk-NKCWOPNX.js";
-import "./chunk-WK2IIUFO.js";
-import "./chunk-ZF3OHCGV.js";
+} from "./chunk-3Y2T26QD.js";
+import "./chunk-QDMLIDYN.js";
+import "./chunk-2Q6HHFAN.js";
 export {
   Button,
   buttonTokens,

package/dist/react-calendar.js

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

package/dist/react-call-controls.js

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

package/dist/react-callout.js

@@ -4,7 +4,7 @@ import {
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-callout/dist/index.js
 import * as React from "react";
@@ -14,7 +14,9 @@ function createCallout(props = {}) {
   const ariaProps = {};
   if (props.role) {
     ariaProps.role = props.role;
-  } else {
+  } else if (props.destructive) {
+    ariaProps.role = "alert";
+  } else if (props.labelled) {
     ariaProps.role = "region";
   }
   return {
@@ -60,7 +62,10 @@ var calloutDescriptionVariants = cva({
 import { jsx } from "react/jsx-runtime";
 var Callout = React.forwardRef(
   function Callout2({ className, variant, asChild = false, ...props }, ref) {
-    const api = createCallout({ role: variant === "destructive" ? "alert" : "region" });
+    const api = createCallout({
+      destructive: variant === "destructive",
+      labelled: Boolean(props["aria-label"] || props["aria-labelledby"])
+    });
     const classes = cn(calloutVariants({ variant }), className);
     if (asChild) {
       return /* @__PURE__ */ jsx(

package/dist/react-callout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../callout/src/callout.ts", "../../callout/src/callout.styles.ts", "../../react-callout/src/callout.tsx"],
-  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface CalloutProps {\n  /** Optional accessible role override */\n  role?: string\n}\n\nexport interface CalloutAPI {\n  ariaProps: Partial<AccessibilityProps>\n  dataAttributes: Record<string, string>\n}\n\nexport function createCallout(props: CalloutProps = {}): CalloutAPI {\n  const ariaProps: Partial<AccessibilityProps> = {}\n  \n  // Callouts are usually alert or region depending on severity\n  if (props.role) {\n    ariaProps.role = props.role\n  } else {\n    ariaProps.role = 'region'\n  }\n\n  return {\n    ariaProps,\n    dataAttributes: { 'data-slot': 'callout' },\n  }\n}\n\nexport function createCalloutIcon(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-icon' } }\n}\n\nexport function createCalloutContent(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-content' } }\n}\n\nexport function createCalloutTitle(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-title' } }\n}\n\nexport function createCalloutDescription(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-description' } }\n}", "import { cva } from '@refraction-ui/shared'\n\nexport const calloutVariants = cva({\n  base: 'relative w-full rounded-lg border p-4 text-sm flex gap-3',\n  variants: {\n    variant: {\n      default: 'bg-muted/50 border-border text-foreground',\n      destructive: 'bg-destructive/10 border-destructive/20 text-destructive',\n      success: 'bg-success/10 border-success/20 text-success',\n      warning: 'bg-warning/10 border-warning/20 text-warning',\n      info: 'bg-info/10 border-info/20 text-info',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport const calloutTitleVariants = cva({\n  base: 'font-semibold leading-none tracking-tight mb-1',\n})\n\nexport const calloutDescriptionVariants = cva({\n  base: 'text-sm opacity-90 leading-relaxed',\n})\n", "import * as React from 'react'\nimport {\n  createCallout,\n  createCalloutIcon,\n  createCalloutContent,\n  createCalloutTitle,\n  createCalloutDescription,\n  calloutVariants,\n  calloutTitleVariants,\n  calloutDescriptionVariants,\n} from '@refraction-ui/callout'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info'\n  /** Merge the callout's classes/props onto the single child element instead\n   * of rendering a `<div>` (Radix-style `asChild`). Expects exactly one React\n   * element child. */\n  asChild?: boolean\n}\n\nexport const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(\n  function Callout({ className, variant, asChild = false, ...props }, ref) {\n    const api = createCallout({ role: variant === 'destructive' ? 'alert' : 'region' })\n    const classes = cn(calloutVariants({ variant }), 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      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CalloutIcon({ className, ...props }, ref) {\n    const api = createCalloutIcon()\n    return (\n      <div\n        ref={ref}\n        className={cn('flex-shrink-0 mt-0.5', className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CalloutContent({ className, ...props }, ref) {\n    const api = createCalloutContent()\n    return (\n      <div\n        ref={ref}\n        className={cn('flex-1', className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  function CalloutTitle({ className, ...props }, ref) {\n    const api = createCalloutTitle()\n    return (\n      <h5\n        ref={ref}\n        className={cn(calloutTitleVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CalloutDescription({ className, ...props }, ref) {\n    const api = createCalloutDescription()\n    return (\n      <div\n        ref={ref}\n        className={cn(calloutDescriptionVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n"],
-  "mappings": ";;;;;;;;;;;;AAYO,SAAS,cAAc,QAAsB,CAAA,GAAgB;AAClE,QAAM,YAAyC,CAAA;AAG/C,MAAI,MAAM,MAAM;AACd,cAAU,OAAO,MAAM;EACzB,OAAO;AACL,cAAU,OAAO;EACnB;AAEA,SAAO;IACL;IACA,gBAAgB,EAAE,aAAa,UAAA;EAAU;AAE7C;AAEO,SAAS,oBAAgE;AAC9E,SAAO,EAAE,gBAAgB,EAAE,aAAa,eAAA,EAAe;AACzD;AAEO,SAAS,uBAAmE;AACjF,SAAO,EAAE,gBAAgB,EAAE,aAAa,kBAAA,EAAkB;AAC5D;AAEO,SAAS,qBAAiE;AAC/E,SAAO,EAAE,gBAAgB,EAAE,aAAa,gBAAA,EAAgB;AAC1D;AAEO,SAAS,2BAAuE;AACrF,SAAO,EAAE,gBAAgB,EAAE,aAAa,sBAAA,EAAsB;AAChE;ACxCO,IAAM,kBAAkB,IAAI;EACjC,MAAM;EACN,UAAU;IACR,SAAS;MACP,SAAS;MACT,aAAa;MACb,SAAS;MACT,SAAS;MACT,MAAM;IAAA;EACR;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAEM,IAAM,uBAAuB,IAAI;EACtC,MAAM;AACR,CAAC;AAEM,IAAM,6BAA6B,IAAI;EAC5C,MAAM;AACR,CAAC;;;;ACFM,IAAM,UAAgB;EAC3B,SAASA,SAAQ,EAAE,WAAW,SAAS,UAAU,OAAO,GAAG,MAAA,GAAS,KAAK;AACvE,UAAM,MAAM,cAAc,EAAE,MAAM,YAAY,gBAAgB,UAAU,SAAA,CAAU;AAClF,UAAM,UAAU,GAAG,gBAAgB,EAAE,QAAA,CAAS,GAAG,SAAS;AAE1D,QAAI,SAAS;AACX,aACE;QAAC;QAAA;UACC;UACA,WAAW;UACV,GAAG,IAAI;UACP,GAAG,IAAI;UACP,GAAG;QAAA;MAAA;IAGV;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW;QACV,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,cAAoB;EAC/B,SAASC,aAAY,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACjD,UAAM,MAAM,kBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,wBAAwB,SAAS;QAC9C,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,iBAAuB;EAClC,SAASC,gBAAe,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACpD,UAAM,MAAM,qBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,UAAU,SAAS;QAChC,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,eAAqB;EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAClD,UAAM,MAAM,mBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,qBAAA,GAAwB,SAAS;QAC9C,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,qBAA2B;EACtC,SAASC,oBAAmB,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACxD,UAAM,MAAM,yBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,2BAAA,GAA8B,SAAS;QACpD,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;",
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface CalloutProps {\n  /** Explicit role; always wins. */\n  role?: string\n  /** Destructive callouts are announced (`role=\"alert\"`). */\n  destructive?: boolean\n  /**\n   * Whether the callout has an accessible name (`aria-label` /\n   * `aria-labelledby`). Only a named callout becomes a `region` landmark — an\n   * unnamed region is an axe violation and landmark noise.\n   */\n  labelled?: boolean\n}\n\nexport interface CalloutAPI {\n  ariaProps: Partial<AccessibilityProps>\n  dataAttributes: Record<string, string>\n}\n\nexport function createCallout(props: CalloutProps = {}): CalloutAPI {\n  const ariaProps: Partial<AccessibilityProps> = {}\n  \n  if (props.role) {\n    ariaProps.role = props.role\n  } else if (props.destructive) {\n    ariaProps.role = 'alert'\n  } else if (props.labelled) {\n    ariaProps.role = 'region'\n  }\n\n  return {\n    ariaProps,\n    dataAttributes: { 'data-slot': 'callout' },\n  }\n}\n\nexport function createCalloutIcon(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-icon' } }\n}\n\nexport function createCalloutContent(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-content' } }\n}\n\nexport function createCalloutTitle(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-title' } }\n}\n\nexport function createCalloutDescription(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-description' } }\n}", "import { cva } from '@refraction-ui/shared'\n\nexport const calloutVariants = cva({\n  base: 'relative w-full rounded-lg border p-4 text-sm flex gap-3',\n  variants: {\n    variant: {\n      default: 'bg-muted/50 border-border text-foreground',\n      destructive: 'bg-destructive/10 border-destructive/20 text-destructive',\n      success: 'bg-success/10 border-success/20 text-success',\n      warning: 'bg-warning/10 border-warning/20 text-warning',\n      info: 'bg-info/10 border-info/20 text-info',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport const calloutTitleVariants = cva({\n  base: 'font-semibold leading-none tracking-tight mb-1',\n})\n\nexport const calloutDescriptionVariants = cva({\n  base: 'text-sm opacity-90 leading-relaxed',\n})\n", "import * as React from 'react'\nimport {\n  createCallout,\n  createCalloutIcon,\n  createCalloutContent,\n  createCalloutTitle,\n  createCalloutDescription,\n  calloutVariants,\n  calloutTitleVariants,\n  calloutDescriptionVariants,\n} from '@refraction-ui/callout'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info'\n  /** Merge the callout's classes/props onto the single child element instead\n   * of rendering a `<div>` (Radix-style `asChild`). Expects exactly one React\n   * element child. */\n  asChild?: boolean\n}\n\nexport const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(\n  function Callout({ className, variant, asChild = false, ...props }, ref) {\n    const api = createCallout({\n      destructive: variant === 'destructive',\n      labelled: Boolean(props['aria-label'] || props['aria-labelledby']),\n    })\n    const classes = cn(calloutVariants({ variant }), 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      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CalloutIcon({ className, ...props }, ref) {\n    const api = createCalloutIcon()\n    return (\n      <div\n        ref={ref}\n        className={cn('flex-shrink-0 mt-0.5', className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CalloutContent({ className, ...props }, ref) {\n    const api = createCalloutContent()\n    return (\n      <div\n        ref={ref}\n        className={cn('flex-1', className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  function CalloutTitle({ className, ...props }, ref) {\n    const api = createCalloutTitle()\n    return (\n      <h5\n        ref={ref}\n        className={cn(calloutTitleVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CalloutDescription({ className, ...props }, ref) {\n    const api = createCalloutDescription()\n    return (\n      <div\n        ref={ref}\n        className={cn(calloutDescriptionVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;;;AAoBO,SAAS,cAAc,QAAsB,CAAA,GAAgB;AAClE,QAAM,YAAyC,CAAA;AAE/C,MAAI,MAAM,MAAM;AACd,cAAU,OAAO,MAAM;EACzB,WAAW,MAAM,aAAa;AAC5B,cAAU,OAAO;EACnB,WAAW,MAAM,UAAU;AACzB,cAAU,OAAO;EACnB;AAEA,SAAO;IACL;IACA,gBAAgB,EAAE,aAAa,UAAA;EAAU;AAE7C;AAEO,SAAS,oBAAgE;AAC9E,SAAO,EAAE,gBAAgB,EAAE,aAAa,eAAA,EAAe;AACzD;AAEO,SAAS,uBAAmE;AACjF,SAAO,EAAE,gBAAgB,EAAE,aAAa,kBAAA,EAAkB;AAC5D;AAEO,SAAS,qBAAiE;AAC/E,SAAO,EAAE,gBAAgB,EAAE,aAAa,gBAAA,EAAgB;AAC1D;AAEO,SAAS,2BAAuE;AACrF,SAAO,EAAE,gBAAgB,EAAE,aAAa,sBAAA,EAAsB;AAChE;ACjDO,IAAM,kBAAkB,IAAI;EACjC,MAAM;EACN,UAAU;IACR,SAAS;MACP,SAAS;MACT,aAAa;MACb,SAAS;MACT,SAAS;MACT,MAAM;IAAA;EACR;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAEM,IAAM,uBAAuB,IAAI;EACtC,MAAM;AACR,CAAC;AAEM,IAAM,6BAA6B,IAAI;EAC5C,MAAM;AACR,CAAC;;;;ACFM,IAAM,UAAgB;EAC3B,SAASA,SAAQ,EAAE,WAAW,SAAS,UAAU,OAAO,GAAG,MAAA,GAAS,KAAK;AACvE,UAAM,MAAM,cAAc;MACxB,aAAa,YAAY;MACzB,UAAU,QAAQ,MAAM,YAAY,KAAK,MAAM,iBAAiB,CAAC;IAAA,CAClE;AACD,UAAM,UAAU,GAAG,gBAAgB,EAAE,QAAA,CAAS,GAAG,SAAS;AAE1D,QAAI,SAAS;AACX,aACE;QAAC;QAAA;UACC;UACA,WAAW;UACV,GAAG,IAAI;UACP,GAAG,IAAI;UACP,GAAG;QAAA;MAAA;IAGV;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW;QACV,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,cAAoB;EAC/B,SAASC,aAAY,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACjD,UAAM,MAAM,kBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,wBAAwB,SAAS;QAC9C,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,iBAAuB;EAClC,SAASC,gBAAe,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACpD,UAAM,MAAM,qBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,UAAU,SAAS;QAChC,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,eAAqB;EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAClD,UAAM,MAAM,mBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,qBAAA,GAAwB,SAAS;QAC9C,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,qBAA2B;EACtC,SAASC,oBAAmB,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACxD,UAAM,MAAM,yBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,2BAAA,GAA8B,SAAS;QACpD,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;",
   "names": ["Callout", "CalloutIcon", "CalloutContent", "CalloutTitle", "CalloutDescription"]
 }

package/dist/react-card-grid.js

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

package/dist/react-card.js

@@ -4,7 +4,7 @@ import {
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-card/dist/index.js
 import * as React from "react";
@@ -94,9 +94,9 @@ var cardFooterVariants = cva({
 // ../react-card/dist/index.js
 import { jsx } from "react/jsx-runtime";
 var Card = React.forwardRef(
-  function Card2({ className, variant, asChild = false, ...props }, ref) {
+  function Card2({ className, variant, padding, asChild = false, ...props }, ref) {
     const api = createCard();
-    const classes = cn(cardVariants({ variant }), className);
+    const classes = cn(cardVariants({ variant, padding }), className);
     if (asChild) {
       return /* @__PURE__ */ jsx(
         Slot,
@@ -136,10 +136,10 @@ var CardHeader = React.forwardRef(
   }
 );
 var CardTitle = React.forwardRef(
-  function CardTitle2({ className, ...props }, ref) {
+  function CardTitle2({ className, as: Heading = "h3", ...props }, ref) {
     const api = createCardTitle();
     return /* @__PURE__ */ jsx(
-      "h3",
+      Heading,
       {
         ref,
         className: cn(cardTitleVariants(), className),