@refraction-ui/react 0.19.2 → 0.20.0

package/dist/react-avatar-group.js

@@ -94,11 +94,11 @@ var avatarPresenceDotVariants = cva({
       xl: "h-4 w-4"
     },
     status: {
-      online: "bg-green-500",
+      online: "bg-success",
       offline: "bg-gray-400",
-      away: "bg-yellow-500",
-      busy: "bg-red-500",
-      dnd: "bg-red-500"
+      away: "bg-warning",
+      busy: "bg-destructive",
+      dnd: "bg-destructive"
     }
   },
   defaultVariants: {

package/dist/react-avatar-group.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../avatar-group/src/avatar-group.ts", "../../avatar-group/src/avatar-group.styles.ts", "../../react-avatar-group/src/avatar-group.tsx"],
-  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\nimport { generateId } from '@refraction-ui/shared'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport type PresenceStatus = 'online' | 'offline' | 'away' | 'busy' | 'dnd'\n\nexport interface AvatarUser {\n  /** Unique identifier */\n  id: string\n  /** Display name */\n  name: string\n  /** Avatar image URL */\n  src?: string\n  /** Online presence status */\n  status?: PresenceStatus\n}\n\nexport interface AvatarGroupProps {\n  /** Array of users to display */\n  users: AvatarUser[]\n  /** Maximum number of visible avatars */\n  max?: number\n  /** Avatar size */\n  size?: AvatarSize\n}\n\nexport interface AvatarGroupAPI {\n  /** Users that are visible (within max limit) */\n  visibleUsers: AvatarUser[]\n  /** Number of overflow users */\n  overflowCount: number\n  /** All overflow users (for tooltip/popup) */\n  overflowUsers: AvatarUser[]\n  /** ARIA props for the group container */\n  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** Get ARIA props for an individual avatar */\n  getAvatarAriaProps(user: AvatarUser): Record<string, unknown>\n  /** Get initials from a user's name */\n  getInitials(name: string): string\n  /** Get the overflow badge ARIA props */\n  overflowBadgeProps: Record<string, unknown>\n  /** Generated IDs */\n  ids: {\n    group: string\n    label: string\n  }\n}\n\nexport const AVATAR_SIZES: Record<AvatarSize, { width: number; fontSize: number }> = {\n  xs: { width: 24, fontSize: 10 },\n  sm: { width: 32, fontSize: 12 },\n  md: { width: 40, fontSize: 14 },\n  lg: { width: 48, fontSize: 16 },\n  xl: { width: 64, fontSize: 20 },\n}\n\nexport function getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/)\n  if (parts.length === 0) return ''\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n}\n\nexport function createAvatarGroup(props: AvatarGroupProps): AvatarGroupAPI {\n  const { users, max, size = 'md' } = props\n\n  const visibleUsers = max && max > 0 ? users.slice(0, max) : users\n  const overflowUsers = max && max > 0 ? users.slice(max) : []\n  const overflowCount = overflowUsers.length\n\n  const groupId = generateId('rfr-avatar-group')\n  const labelId = generateId('rfr-avatar-group-label')\n\n  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    role: 'group',\n    'aria-label': `${users.length} users`,\n    id: groupId,\n  }\n\n  function getAvatarAriaProps(user: AvatarUser): Record<string, unknown> {\n    const label = user.status ? `${user.name} (${user.status})` : user.name\n    return {\n      role: 'img',\n      'aria-label': label,\n    }\n  }\n\n  const overflowBadgeProps: Record<string, unknown> = {\n    role: 'button',\n    'aria-label': `${overflowCount} more users`,\n  }\n\n  return {\n    visibleUsers,\n    overflowCount,\n    overflowUsers,\n    ariaProps,\n    getAvatarAriaProps,\n    getInitials,\n    overflowBadgeProps,\n    ids: {\n      group: groupId,\n      label: labelId,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const avatarGroupStyles =\n  'flex items-center -space-x-2'\n\nexport const avatarVariants = cva({\n  base: 'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium overflow-hidden ring-2 ring-background',\n  variants: {\n    size: {\n      xs: 'h-6 w-6 text-[10px]',\n      sm: 'h-8 w-8 text-xs',\n      md: 'h-10 w-10 text-sm',\n      lg: 'h-12 w-12 text-base',\n      xl: 'h-16 w-16 text-xl',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const avatarOverflowBadgeVariants = cva({\n  base: 'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium ring-2 ring-background',\n  variants: {\n    size: {\n      xs: 'h-6 w-6 text-[10px]',\n      sm: 'h-8 w-8 text-xs',\n      md: 'h-10 w-10 text-sm',\n      lg: 'h-12 w-12 text-base',\n      xl: 'h-16 w-16 text-xl',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const avatarImageStyles =\n  'h-full w-full object-cover'\n\nexport const avatarPresenceDotVariants = cva({\n  base: 'absolute bottom-0 right-0 rounded-full border-2 border-background',\n  variants: {\n    size: {\n      xs: 'h-2 w-2',\n      sm: 'h-2.5 w-2.5',\n      md: 'h-3 w-3',\n      lg: 'h-3.5 w-3.5',\n      xl: 'h-4 w-4',\n    },\n    status: {\n      online: 'bg-green-500',\n      offline: 'bg-gray-400',\n      away: 'bg-yellow-500',\n      busy: 'bg-red-500',\n      dnd: 'bg-red-500',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    status: 'offline',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createAvatarGroup,\n  avatarGroupStyles,\n  avatarVariants,\n  avatarOverflowBadgeVariants,\n  avatarImageStyles,\n  avatarPresenceDotVariants,\n  type AvatarUser,\n  type AvatarSize,\n} from '@refraction-ui/avatar-group'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface AvatarGroupProps {\n  users: AvatarUser[]\n  max?: number\n  size?: AvatarSize\n  className?: string\n}\n\nexport const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup({ users, max, size = 'md', className }, ref) {\n  const api = createAvatarGroup({ users, max, size })\n\n  return React.createElement(\n    'div',\n    { ref, ...api.ariaProps, className: cn(avatarGroupStyles, className) },\n    api.visibleUsers.map((user) =>\n      React.createElement(\n        'div',\n        {\n          key: user.id,\n          className: avatarVariants({ size }),\n          ...api.getAvatarAriaProps(user),\n        },\n        user.src\n          ? React.createElement('img', {\n              src: user.src,\n              alt: user.name,\n              className: avatarImageStyles,\n            })\n          : React.createElement('span', null, api.getInitials(user.name)),\n        user.status &&\n          React.createElement('span', {\n            className: avatarPresenceDotVariants({ size, status: user.status }),\n          }),\n      ),\n    ),\n    api.overflowCount > 0 &&\n      React.createElement(\n        'div',\n        {\n          className: avatarOverflowBadgeVariants({ size }),\n          ...api.overflowBadgeProps,\n        },\n        `+${api.overflowCount}`,\n      ),\n  )\n  },\n)\n"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\nimport { generateId } from '@refraction-ui/shared'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport type PresenceStatus = 'online' | 'offline' | 'away' | 'busy' | 'dnd'\n\nexport interface AvatarUser {\n  /** Unique identifier */\n  id: string\n  /** Display name */\n  name: string\n  /** Avatar image URL */\n  src?: string\n  /** Online presence status */\n  status?: PresenceStatus\n}\n\nexport interface AvatarGroupProps {\n  /** Array of users to display */\n  users: AvatarUser[]\n  /** Maximum number of visible avatars */\n  max?: number\n  /** Avatar size */\n  size?: AvatarSize\n}\n\nexport interface AvatarGroupAPI {\n  /** Users that are visible (within max limit) */\n  visibleUsers: AvatarUser[]\n  /** Number of overflow users */\n  overflowCount: number\n  /** All overflow users (for tooltip/popup) */\n  overflowUsers: AvatarUser[]\n  /** ARIA props for the group container */\n  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** Get ARIA props for an individual avatar */\n  getAvatarAriaProps(user: AvatarUser): Record<string, unknown>\n  /** Get initials from a user's name */\n  getInitials(name: string): string\n  /** Get the overflow badge ARIA props */\n  overflowBadgeProps: Record<string, unknown>\n  /** Generated IDs */\n  ids: {\n    group: string\n    label: string\n  }\n}\n\nexport const AVATAR_SIZES: Record<AvatarSize, { width: number; fontSize: number }> = {\n  xs: { width: 24, fontSize: 10 },\n  sm: { width: 32, fontSize: 12 },\n  md: { width: 40, fontSize: 14 },\n  lg: { width: 48, fontSize: 16 },\n  xl: { width: 64, fontSize: 20 },\n}\n\nexport function getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/)\n  if (parts.length === 0) return ''\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n}\n\nexport function createAvatarGroup(props: AvatarGroupProps): AvatarGroupAPI {\n  const { users, max, size = 'md' } = props\n\n  const visibleUsers = max && max > 0 ? users.slice(0, max) : users\n  const overflowUsers = max && max > 0 ? users.slice(max) : []\n  const overflowCount = overflowUsers.length\n\n  const groupId = generateId('rfr-avatar-group')\n  const labelId = generateId('rfr-avatar-group-label')\n\n  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    role: 'group',\n    'aria-label': `${users.length} users`,\n    id: groupId,\n  }\n\n  function getAvatarAriaProps(user: AvatarUser): Record<string, unknown> {\n    const label = user.status ? `${user.name} (${user.status})` : user.name\n    return {\n      role: 'img',\n      'aria-label': label,\n    }\n  }\n\n  const overflowBadgeProps: Record<string, unknown> = {\n    role: 'button',\n    'aria-label': `${overflowCount} more users`,\n  }\n\n  return {\n    visibleUsers,\n    overflowCount,\n    overflowUsers,\n    ariaProps,\n    getAvatarAriaProps,\n    getInitials,\n    overflowBadgeProps,\n    ids: {\n      group: groupId,\n      label: labelId,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const avatarGroupStyles =\n  'flex items-center -space-x-2'\n\nexport const avatarVariants = cva({\n  base: 'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium overflow-hidden ring-2 ring-background',\n  variants: {\n    size: {\n      xs: 'h-6 w-6 text-[10px]',\n      sm: 'h-8 w-8 text-xs',\n      md: 'h-10 w-10 text-sm',\n      lg: 'h-12 w-12 text-base',\n      xl: 'h-16 w-16 text-xl',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const avatarOverflowBadgeVariants = cva({\n  base: 'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium ring-2 ring-background',\n  variants: {\n    size: {\n      xs: 'h-6 w-6 text-[10px]',\n      sm: 'h-8 w-8 text-xs',\n      md: 'h-10 w-10 text-sm',\n      lg: 'h-12 w-12 text-base',\n      xl: 'h-16 w-16 text-xl',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const avatarImageStyles =\n  'h-full w-full object-cover'\n\nexport const avatarPresenceDotVariants = cva({\n  base: 'absolute bottom-0 right-0 rounded-full border-2 border-background',\n  variants: {\n    size: {\n      xs: 'h-2 w-2',\n      sm: 'h-2.5 w-2.5',\n      md: 'h-3 w-3',\n      lg: 'h-3.5 w-3.5',\n      xl: 'h-4 w-4',\n    },\n    status: {\n      online: 'bg-success',\n      offline: 'bg-gray-400',\n      away: 'bg-warning',\n      busy: 'bg-destructive',\n      dnd: 'bg-destructive',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    status: 'offline',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createAvatarGroup,\n  avatarGroupStyles,\n  avatarVariants,\n  avatarOverflowBadgeVariants,\n  avatarImageStyles,\n  avatarPresenceDotVariants,\n  type AvatarUser,\n  type AvatarSize,\n} from '@refraction-ui/avatar-group'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface AvatarGroupProps {\n  users: AvatarUser[]\n  max?: number\n  size?: AvatarSize\n  className?: string\n}\n\nexport const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup({ users, max, size = 'md', className }, ref) {\n  const api = createAvatarGroup({ users, max, size })\n\n  return React.createElement(\n    'div',\n    { ref, ...api.ariaProps, className: cn(avatarGroupStyles, className) },\n    api.visibleUsers.map((user) =>\n      React.createElement(\n        'div',\n        {\n          key: user.id,\n          className: avatarVariants({ size }),\n          ...api.getAvatarAriaProps(user),\n        },\n        user.src\n          ? React.createElement('img', {\n              src: user.src,\n              alt: user.name,\n              className: avatarImageStyles,\n            })\n          : React.createElement('span', null, api.getInitials(user.name)),\n        user.status &&\n          React.createElement('span', {\n            className: avatarPresenceDotVariants({ size, status: user.status }),\n          }),\n      ),\n    ),\n    api.overflowCount > 0 &&\n      React.createElement(\n        'div',\n        {\n          className: avatarOverflowBadgeVariants({ size }),\n          ...api.overflowBadgeProps,\n        },\n        `+${api.overflowCount}`,\n      ),\n  )\n  },\n)\n"],
   "mappings": "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",
   "names": ["AvatarGroup"]
 }

package/dist/react-badge.js

@@ -1,3 +1,6 @@
+import {
+  Slot
+} from "./chunk-WSPJTQAV.js";
 import {
   cn,
   cva
@@ -47,9 +50,22 @@ var badgeVariants = cva({
 // ../react-badge/dist/index.js
 import { jsx } from "react/jsx-runtime";
 var Badge = React.forwardRef(
-  function Badge2({ variant, size, className, children, ...props }, ref) {
+  function Badge2({ variant, size, asChild = false, className, children, ...props }, ref) {
     const api = createBadge({ variant, size });
     const classes = cn(badgeVariants({ variant, size }), className);
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          className: classes,
+          ...api.ariaProps,
+          ...api.dataAttributes,
+          ...props,
+          children
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {

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'\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: BadgeVariant\n  size?: BadgeSize\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, className, children, ...props }, ref) {\n    const api = createBadge({ variant, size })\n    const classes = cn(badgeVariants({ variant, size }), className)\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;;;;ACHM,IAAM,QAAc;EACzB,SAASA,OAAM,EAAE,SAAS,MAAM,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AACpE,UAAM,MAAM,YAAY,EAAE,SAAS,KAAA,CAAM;AACzC,UAAM,UAAU,GAAG,cAAc,EAAE,SAAS,KAAA,CAAM,GAAG,SAAS;AAE9D,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 = '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;",
   "names": ["Badge"]
 }

package/dist/react-callout.js

@@ -1,3 +1,6 @@
+import {
+  Slot
+} from "./chunk-WSPJTQAV.js";
 import {
   cn,
   cva
@@ -39,7 +42,7 @@ var calloutVariants = cva({
       destructive: "bg-destructive/10 border-destructive/20 text-destructive",
       success: "bg-success/10 border-success/20 text-success",
       warning: "bg-warning/10 border-warning/20 text-warning",
-      info: "bg-blue-500/10 border-blue-500/20 text-blue-700 dark:text-blue-400"
+      info: "bg-info/10 border-info/20 text-info"
     }
   },
   defaultVariants: {
@@ -56,13 +59,26 @@ var calloutDescriptionVariants = cva({
 // ../react-callout/dist/index.js
 import { jsx } from "react/jsx-runtime";
 var Callout = React.forwardRef(
-  function Callout2({ className, variant, ...props }, ref) {
+  function Callout2({ className, variant, asChild = false, ...props }, ref) {
     const api = createCallout({ role: variant === "destructive" ? "alert" : "region" });
+    const classes = cn(calloutVariants({ variant }), className);
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          className: classes,
+          ...api.ariaProps,
+          ...api.dataAttributes,
+          ...props
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: cn(calloutVariants({ variant }), className),
+        className: classes,
         ...api.ariaProps,
         ...api.dataAttributes,
         ...props

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-blue-500/10 border-blue-500/20 text-blue-700 dark:text-blue-400',\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'\n\nexport interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info'\n}\n\nexport const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(\n  function Callout({ className, variant, ...props }, ref) {\n    const api = createCallout({ role: variant === 'destructive' ? 'alert' : 'region' })\n    return (\n      <div\n        ref={ref}\n        className={cn(calloutVariants({ variant }), className)}\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;;;;ACPM,IAAM,UAAgB;EAC3B,SAASA,SAAQ,EAAE,WAAW,SAAS,GAAG,MAAA,GAAS,KAAK;AACtD,UAAM,MAAM,cAAc,EAAE,MAAM,YAAY,gBAAgB,UAAU,SAAA,CAAU;AAClF,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,gBAAgB,EAAE,QAAA,CAAS,GAAG,SAAS;QACpD,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  /** 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;",
   "names": ["Callout", "CalloutIcon", "CalloutContent", "CalloutTitle", "CalloutDescription"]
 }

package/dist/react-card.js

@@ -1,3 +1,6 @@
+import {
+  Slot
+} from "./chunk-WSPJTQAV.js";
 import {
   cn,
   cva
@@ -82,13 +85,26 @@ var cardFooterVariants = cva({
 // ../react-card/dist/index.js
 import { jsx } from "react/jsx-runtime";
 var Card = React.forwardRef(
-  function Card2({ className, ...props }, ref) {
+  function Card2({ className, asChild = false, ...props }, ref) {
     const api = createCard();
+    const classes = cn(cardVariants(), className);
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          className: classes,
+          ...api.ariaProps,
+          ...api.dataAttributes,
+          ...props
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: cn(cardVariants(), className),
+        className: classes,
         ...api.ariaProps,
         ...api.dataAttributes,
         ...props

package/dist/react-card.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../card/src/card.ts", "../../card/src/card.styles.ts", "../../react-card/src/card.tsx"],
-  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface CardProps {\n  /** Optional accessible role override */\n  role?: string\n}\n\nexport interface CardAPI {\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\nexport function createCard(props: CardProps = {}): CardAPI {\n  const ariaProps: Partial<AccessibilityProps> = {}\n  if (props.role) {\n    ariaProps.role = props.role\n  }\n\n  return {\n    ariaProps,\n    dataAttributes: { 'data-slot': 'card' },\n  }\n}\n\nexport function createCardHeader(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-header' } }\n}\n\nexport function createCardTitle(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-title' } }\n}\n\nexport function createCardDescription(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-description' } }\n}\n\nexport function createCardContent(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-content' } }\n}\n\nexport function createCardFooter(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-footer' } }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const cardTokens: TokenContract = {\n  name: 'card',\n  tokens: {\n    bg: { variable: '--rfr-card-bg', fallback: 'hsl(var(--card))' },\n    fg: { variable: '--rfr-card-fg', fallback: 'hsl(var(--card-foreground))' },\n    border: { variable: '--rfr-card-border', fallback: 'hsl(var(--border))' },\n  },\n}\n\nexport const cardVariants = cva({\n  base: 'rounded-lg border bg-card text-card-foreground shadow',\n  variants: {\n    padding: {\n      none: '',\n      default: 'p-6',\n      compact: 'p-4',\n    },\n  },\n  defaultVariants: {\n    padding: 'none',\n  },\n})\n\nexport const cardHeaderVariants = cva({\n  base: 'flex flex-col space-y-1.5 p-6',\n})\n\nexport const cardTitleVariants = cva({\n  base: 'font-semibold leading-none tracking-tight',\n  variants: {\n    size: {\n      sm: 'text-lg',\n      default: 'text-2xl',\n      lg: 'text-3xl',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nexport const cardDescriptionVariants = cva({\n  base: 'text-sm text-muted-foreground',\n})\n\nexport const cardContentVariants = cva({\n  base: 'p-6 pt-0',\n})\n\nexport const cardFooterVariants = cva({\n  base: 'flex items-center p-6 pt-0',\n})\n", "import * as React from 'react'\nimport {\n  createCard,\n  createCardHeader,\n  createCardTitle,\n  createCardDescription,\n  createCardContent,\n  createCardFooter,\n  cardVariants,\n  cardHeaderVariants,\n  cardTitleVariants,\n  cardDescriptionVariants,\n  cardContentVariants,\n  cardFooterVariants,\n} from '@refraction-ui/card'\nimport { cn } from '@refraction-ui/shared'\n\n/**\n * Card -- a container with rounded corners, border, and shadow.\n */\nexport const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function Card({ className, ...props }, ref) {\n    const api = createCard()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardVariants(), className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardHeader -- top section of a card, typically contains title and description.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardHeader({ className, ...props }, ref) {\n    const api = createCardHeader()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardHeaderVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardTitle -- heading within a card header.\n */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  function CardTitle({ className, ...props }, ref) {\n    const api = createCardTitle()\n    return (\n      <h3\n        ref={ref}\n        className={cn(cardTitleVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardDescription -- subtext within a card header.\n */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  function CardDescription({ className, ...props }, ref) {\n    const api = createCardDescription()\n    return (\n      <p\n        ref={ref}\n        className={cn(cardDescriptionVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardContent -- main body content area of a card.\n */\nexport const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardContent({ className, ...props }, ref) {\n    const api = createCardContent()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardContentVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardFooter -- bottom section of a card, typically contains actions.\n */\nexport const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardFooter({ className, ...props }, ref) {\n    const api = createCardFooter()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardFooterVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface CardProps {\n  /** Optional accessible role override */\n  role?: string\n}\n\nexport interface CardAPI {\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\nexport function createCard(props: CardProps = {}): CardAPI {\n  const ariaProps: Partial<AccessibilityProps> = {}\n  if (props.role) {\n    ariaProps.role = props.role\n  }\n\n  return {\n    ariaProps,\n    dataAttributes: { 'data-slot': 'card' },\n  }\n}\n\nexport function createCardHeader(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-header' } }\n}\n\nexport function createCardTitle(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-title' } }\n}\n\nexport function createCardDescription(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-description' } }\n}\n\nexport function createCardContent(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-content' } }\n}\n\nexport function createCardFooter(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-footer' } }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const cardTokens: TokenContract = {\n  name: 'card',\n  tokens: {\n    bg: { variable: '--rfr-card-bg', fallback: 'hsl(var(--card))' },\n    fg: { variable: '--rfr-card-fg', fallback: 'hsl(var(--card-foreground))' },\n    border: { variable: '--rfr-card-border', fallback: 'hsl(var(--border))' },\n  },\n}\n\nexport const cardVariants = cva({\n  base: 'rounded-lg border bg-card text-card-foreground shadow',\n  variants: {\n    padding: {\n      none: '',\n      default: 'p-6',\n      compact: 'p-4',\n    },\n  },\n  defaultVariants: {\n    padding: 'none',\n  },\n})\n\nexport const cardHeaderVariants = cva({\n  base: 'flex flex-col space-y-1.5 p-6',\n})\n\nexport const cardTitleVariants = cva({\n  base: 'font-semibold leading-none tracking-tight',\n  variants: {\n    size: {\n      sm: 'text-lg',\n      default: 'text-2xl',\n      lg: 'text-3xl',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nexport const cardDescriptionVariants = cva({\n  base: 'text-sm text-muted-foreground',\n})\n\nexport const cardContentVariants = cva({\n  base: 'p-6 pt-0',\n})\n\nexport const cardFooterVariants = cva({\n  base: 'flex items-center p-6 pt-0',\n})\n", "import * as React from 'react'\nimport {\n  createCard,\n  createCardHeader,\n  createCardTitle,\n  createCardDescription,\n  createCardContent,\n  createCardFooter,\n  cardVariants,\n  cardHeaderVariants,\n  cardTitleVariants,\n  cardDescriptionVariants,\n  cardContentVariants,\n  cardFooterVariants,\n} from '@refraction-ui/card'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Merge the card's classes/props onto the single child element instead of\n   * rendering a `<div>` (Radix-style `asChild`) — e.g.\n   * `<Card asChild><a href=\"/x\">…</a></Card>` for a clickable card. Expects\n   * exactly one React element child. */\n  asChild?: boolean\n}\n\n/**\n * Card -- a container with rounded corners, border, and shadow.\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  function Card({ className, asChild = false, ...props }, ref) {\n    const api = createCard()\n    const classes = cn(cardVariants(), 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\n/**\n * CardHeader -- top section of a card, typically contains title and description.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardHeader({ className, ...props }, ref) {\n    const api = createCardHeader()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardHeaderVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardTitle -- heading within a card header.\n */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  function CardTitle({ className, ...props }, ref) {\n    const api = createCardTitle()\n    return (\n      <h3\n        ref={ref}\n        className={cn(cardTitleVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardDescription -- subtext within a card header.\n */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  function CardDescription({ className, ...props }, ref) {\n    const api = createCardDescription()\n    return (\n      <p\n        ref={ref}\n        className={cn(cardDescriptionVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardContent -- main body content area of a card.\n */\nexport const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardContent({ className, ...props }, ref) {\n    const api = createCardContent()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardContentVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardFooter -- bottom section of a card, typically contains actions.\n */\nexport const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardFooter({ className, ...props }, ref) {\n    const api = createCardFooter()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardFooterVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n"],
+  "mappings": "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",
   "names": ["Card", "CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"]
 }

package/dist/react-empty-state.js

@@ -33,8 +33,8 @@ var emptyStateIconChipVariants = cva({
   variants: {
     tone: {
       neutral: "bg-muted text-muted-foreground",
-      success: "bg-green-500/10 text-green-600",
-      warning: "bg-yellow-500/10 text-yellow-600",
+      success: "bg-success/10 text-success",
+      warning: "bg-warning/10 text-warning",
       danger: "bg-destructive/10 text-destructive"
     }
   },

package/dist/react-empty-state.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../empty-state/src/empty-state.ts", "../../empty-state/src/empty-state.styles.ts", "../../react-empty-state/src/empty-state.tsx"],
-  "sourcesContent": ["export type EmptyStateTone = 'neutral' | 'success' | 'warning' | 'danger'\n\nexport interface EmptyStateOptions {\n  /** Tone that tints the icon chip. Defaults to `neutral`. */\n  tone?: EmptyStateTone\n}\n\nexport interface EmptyStateAPI {\n  /** Data attributes for CSS styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Headless EmptyState core — JSX-free. Resolves the tone into the data\n * attributes that adapters spread onto the root element.\n */\nexport function createEmptyState(options: EmptyStateOptions = {}): EmptyStateAPI {\n  const { tone = 'neutral' } = options\n\n  const dataAttributes: Record<string, string> = {\n    'data-tone': tone,\n  }\n\n  return {\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Container for the EmptyState column. The `bordered` variant wraps the\n * content in a card surface.\n */\nexport const emptyStateVariants = cva({\n  base: 'flex flex-col items-center text-center gap-3 p-8',\n  variants: {\n    bordered: {\n      true: 'rounded-xl border border-border bg-card',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    bordered: 'false',\n  },\n})\n\n/**\n * Tone-tinted classes for the icon chip. Tone styling lives here as a single\n * source of truth (no scattered inline literals in the adapters).\n */\nexport const emptyStateIconChipVariants = cva({\n  base: 'flex size-12 items-center justify-center rounded-full',\n  variants: {\n    tone: {\n      neutral: 'bg-muted text-muted-foreground',\n      success: 'bg-green-500/10 text-green-600',\n      warning: 'bg-yellow-500/10 text-yellow-600',\n      danger: 'bg-destructive/10 text-destructive',\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n})\n\n/** Layout class helpers for the title/description/actions slots. */\nexport const emptyStateTitleClass = 'text-lg font-semibold text-foreground'\nexport const emptyStateDescriptionClass = 'text-sm text-muted-foreground'\nexport const emptyStateActionsClass = 'flex items-center justify-center gap-2'\n", "import * as React from 'react'\nimport { cn } from '@refraction-ui/shared'\nimport {\n  createEmptyState,\n  emptyStateVariants,\n  emptyStateIconChipVariants,\n  emptyStateTitleClass,\n  emptyStateDescriptionClass,\n  emptyStateActionsClass,\n  type EmptyStateTone,\n} from '@refraction-ui/empty-state'\n\nexport type { EmptyStateTone }\n\nexport interface EmptyStateProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Optional icon rendered inside a tone-tinted rounded chip. */\n  icon?: React.ReactNode\n  /** Tone that tints the icon chip. Defaults to `neutral`. */\n  tone?: EmptyStateTone\n  /** Primary heading. */\n  title: React.ReactNode\n  /** Optional supporting copy (supports rich children). */\n  description?: React.ReactNode\n  /** Optional action row (e.g. buttons), centered under the description. */\n  actions?: React.ReactNode\n  /** Wrap the content in a bordered card surface. */\n  bordered?: boolean\n}\n\n/**\n * EmptyState — a centered column for empty/zero/result states and inline\n * confirmations. The icon chip is tinted via `tone`; pass `bordered` to render\n * it on a card surface.\n *\n * Styling and tone resolution come from the headless @refraction-ui/empty-state\n * core (no inline class literals here).\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  function EmptyState(\n    {\n      icon,\n      tone = 'neutral',\n      title,\n      description,\n      actions,\n      bordered = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const api = createEmptyState({ tone })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          emptyStateVariants({ bordered: bordered ? 'true' : 'false' }),\n          className,\n        )}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {icon != null && (\n          <div aria-hidden=\"true\" className={emptyStateIconChipVariants({ tone })}>\n            {icon}\n          </div>\n        )}\n        <h3 className={emptyStateTitleClass}>{title}</h3>\n        {description != null && (\n          <p className={emptyStateDescriptionClass}>{description}</p>\n        )}\n        {actions != null && (\n          <div className={emptyStateActionsClass}>{actions}</div>\n        )}\n      </div>\n    )\n  },\n)\n\nexport interface ConfirmationCardProps extends EmptyStateProps {}\n\n/**\n * ConfirmationCard — a thin preset of {@link EmptyState} with `bordered`\n * defaulting to `true`, for inline confirmation states (e.g. \"Check your email\").\n */\nexport const ConfirmationCard = React.forwardRef<\n  HTMLDivElement,\n  ConfirmationCardProps\n>(function ConfirmationCard({ bordered = true, ...props }, ref) {\n    return (\n    <EmptyState ref={ref} bordered={bordered} {...props} />\n  )\n  })\n"],
+  "sourcesContent": ["export type EmptyStateTone = 'neutral' | 'success' | 'warning' | 'danger'\n\nexport interface EmptyStateOptions {\n  /** Tone that tints the icon chip. Defaults to `neutral`. */\n  tone?: EmptyStateTone\n}\n\nexport interface EmptyStateAPI {\n  /** Data attributes for CSS styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Headless EmptyState core — JSX-free. Resolves the tone into the data\n * attributes that adapters spread onto the root element.\n */\nexport function createEmptyState(options: EmptyStateOptions = {}): EmptyStateAPI {\n  const { tone = 'neutral' } = options\n\n  const dataAttributes: Record<string, string> = {\n    'data-tone': tone,\n  }\n\n  return {\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Container for the EmptyState column. The `bordered` variant wraps the\n * content in a card surface.\n */\nexport const emptyStateVariants = cva({\n  base: 'flex flex-col items-center text-center gap-3 p-8',\n  variants: {\n    bordered: {\n      true: 'rounded-xl border border-border bg-card',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    bordered: 'false',\n  },\n})\n\n/**\n * Tone-tinted classes for the icon chip. Tone styling lives here as a single\n * source of truth (no scattered inline literals in the adapters).\n */\nexport const emptyStateIconChipVariants = cva({\n  base: 'flex size-12 items-center justify-center rounded-full',\n  variants: {\n    tone: {\n      neutral: 'bg-muted text-muted-foreground',\n      success: 'bg-success/10 text-success',\n      warning: 'bg-warning/10 text-warning',\n      danger: 'bg-destructive/10 text-destructive',\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n})\n\n/** Layout class helpers for the title/description/actions slots. */\nexport const emptyStateTitleClass = 'text-lg font-semibold text-foreground'\nexport const emptyStateDescriptionClass = 'text-sm text-muted-foreground'\nexport const emptyStateActionsClass = 'flex items-center justify-center gap-2'\n", "import * as React from 'react'\nimport { cn } from '@refraction-ui/shared'\nimport {\n  createEmptyState,\n  emptyStateVariants,\n  emptyStateIconChipVariants,\n  emptyStateTitleClass,\n  emptyStateDescriptionClass,\n  emptyStateActionsClass,\n  type EmptyStateTone,\n} from '@refraction-ui/empty-state'\n\nexport type { EmptyStateTone }\n\nexport interface EmptyStateProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Optional icon rendered inside a tone-tinted rounded chip. */\n  icon?: React.ReactNode\n  /** Tone that tints the icon chip. Defaults to `neutral`. */\n  tone?: EmptyStateTone\n  /** Primary heading. */\n  title: React.ReactNode\n  /** Optional supporting copy (supports rich children). */\n  description?: React.ReactNode\n  /** Optional action row (e.g. buttons), centered under the description. */\n  actions?: React.ReactNode\n  /** Wrap the content in a bordered card surface. */\n  bordered?: boolean\n}\n\n/**\n * EmptyState — a centered column for empty/zero/result states and inline\n * confirmations. The icon chip is tinted via `tone`; pass `bordered` to render\n * it on a card surface.\n *\n * Styling and tone resolution come from the headless @refraction-ui/empty-state\n * core (no inline class literals here).\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  function EmptyState(\n    {\n      icon,\n      tone = 'neutral',\n      title,\n      description,\n      actions,\n      bordered = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const api = createEmptyState({ tone })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          emptyStateVariants({ bordered: bordered ? 'true' : 'false' }),\n          className,\n        )}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {icon != null && (\n          <div aria-hidden=\"true\" className={emptyStateIconChipVariants({ tone })}>\n            {icon}\n          </div>\n        )}\n        <h3 className={emptyStateTitleClass}>{title}</h3>\n        {description != null && (\n          <p className={emptyStateDescriptionClass}>{description}</p>\n        )}\n        {actions != null && (\n          <div className={emptyStateActionsClass}>{actions}</div>\n        )}\n      </div>\n    )\n  },\n)\n\nexport interface ConfirmationCardProps extends EmptyStateProps {}\n\n/**\n * ConfirmationCard — a thin preset of {@link EmptyState} with `bordered`\n * defaulting to `true`, for inline confirmation states (e.g. \"Check your email\").\n */\nexport const ConfirmationCard = React.forwardRef<\n  HTMLDivElement,\n  ConfirmationCardProps\n>(function ConfirmationCard({ bordered = true, ...props }, ref) {\n    return (\n    <EmptyState ref={ref} bordered={bordered} {...props} />\n  )\n  })\n"],
   "mappings": ";;;;;;;;;AAgBO,SAAS,iBAAiB,UAA6B,CAAA,GAAmB;AAC/E,QAAM,EAAE,OAAO,UAAA,IAAc;AAE7B,QAAM,iBAAyC;IAC7C,aAAa;EAAA;AAGf,SAAO;IACL;EAAA;AAEJ;ACpBO,IAAM,qBAAqB,IAAI;EACpC,MAAM;EACN,UAAU;IACR,UAAU;MACR,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,UAAU;EAAA;AAEd,CAAC;AAMM,IAAM,6BAA6B,IAAI;EAC5C,MAAM;EACN,UAAU;IACR,MAAM;MACJ,SAAS;MACT,SAAS;MACT,SAAS;MACT,QAAQ;IAAA;EACV;EAEF,iBAAiB;IACf,MAAM;EAAA;AAEV,CAAC;AAGM,IAAM,uBAAuB;AAC7B,IAAM,6BAA6B;AACnC,IAAM,yBAAyB;;;;ACH/B,IAAM,aAAmB;EAC9B,SAASA,YACP;IACE;IACA,OAAO;IACP;IACA;IACA;IACA,WAAW;IACX;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,MAAM,iBAAiB,EAAE,KAAA,CAAM;AAErC,WACE;MAAC;MAAA;QACC;QACA,WAAW;UACT,mBAAmB,EAAE,UAAU,WAAW,SAAS,QAAA,CAAS;UAC5D;QAAA;QAED,GAAG,IAAI;QACP,GAAG;QAEH,UAAA;UAAA,QAAQ,QACP,oBAAC,OAAA,EAAI,eAAY,QAAO,WAAW,2BAA2B,EAAE,KAAA,CAAM,GACnE,UAAA,KAAA,CACH;UAEF,oBAAC,MAAA,EAAG,WAAW,sBAAuB,UAAA,MAAA,CAAM;UAC3C,eAAe,QACd,oBAAC,KAAA,EAAE,WAAW,4BAA6B,UAAA,YAAA,CAAY;UAExD,WAAW,QACV,oBAAC,OAAA,EAAI,WAAW,wBAAyB,UAAA,QAAA,CAAQ;QAAA;MAAA;IAAA;EAIzD;AACF;AAQO,IAAM,mBAAyB,iBAGpC,SAASC,kBAAiB,EAAE,WAAW,MAAM,GAAG,MAAA,GAAS,KAAK;AAC5D,SACA,oBAAC,YAAA,EAAW,KAAU,UAAqB,GAAG,MAAA,CAAO;AAEvD,CAAC;",
   "names": ["EmptyState", "ConfirmationCard"]
 }

package/dist/react-input.js

@@ -1,7 +1,7 @@
 import {
   Input,
   inputVariants
-} from "./chunk-UJ6BBWQM.js";
+} from "./chunk-TOZBR4GL.js";
 import "./chunk-ZF3OHCGV.js";
 export {
   Input,

package/dist/react-link-card.js

@@ -1,3 +1,6 @@
+import {
+  Slot
+} from "./chunk-WSPJTQAV.js";
 import {
   cn
 } from "./chunk-ZF3OHCGV.js";
@@ -15,8 +18,19 @@ function createLinkCard(_props = {}) {
 // ../react-link-card/dist/index.js
 import { jsx } from "react/jsx-runtime";
 var LinkCard = React.forwardRef(
-  function LinkCard2({ className, ...props }, ref) {
+  function LinkCard2({ className, asChild = false, ...props }, ref) {
     const api = createLinkCard(props);
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          className: cn(className),
+          ...api.dataAttributes,
+          ...props
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
       "a",
       {

package/dist/react-link-card.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../link-card/src/link-card.ts", "../../react-link-card/src/link-card.tsx"],
-  "sourcesContent": ["export interface LinkCardProps {\n  href?: string\n}\n\nexport function createLinkCard(_props: LinkCardProps = {}) {\n  return {\n    dataAttributes: { 'data-slot': 'link-card' }\n  }\n}", "import * as React from 'react'\nimport { createLinkCard } from '@refraction-ui/link-card'\nimport { cn } from '@refraction-ui/shared'\n\nexport const LinkCard = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(\n  function LinkCard({ className, ...props }, ref) {\n    const api = createLinkCard(props)\n    return (\n      <a\n        ref={ref}\n        className={cn(className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  }\n)\n"],
-  "mappings": ";;;;;;;;AAIO,SAAS,eAAe,SAAwB,CAAA,GAAI;AACzD,SAAO;IACL,gBAAgB,EAAE,aAAa,YAAA;EAAY;AAE/C;;;;ACJO,IAAM,WAAiB;EAC5B,SAASA,UAAS,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAC9C,UAAM,MAAM,eAAe,KAAK;AAChC,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,SAAS;QACtB,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;",
+  "sourcesContent": ["export interface LinkCardProps {\n  href?: string\n}\n\nexport function createLinkCard(_props: LinkCardProps = {}) {\n  return {\n    dataAttributes: { 'data-slot': 'link-card' }\n  }\n}", "import * as React from 'react'\nimport { createLinkCard } from '@refraction-ui/link-card'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface LinkCardProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Merge the link card's classes/props onto the single child element\n   * instead of rendering an `<a>` (Radix-style `asChild`) — e.g. compose with\n   * a router `<Link>`. Expects exactly one React element child. */\n  asChild?: boolean\n}\n\nexport const LinkCard = React.forwardRef<HTMLAnchorElement, LinkCardProps>(\n  function LinkCard({ className, asChild = false, ...props }, ref) {\n    const api = createLinkCard(props)\n\n    if (asChild) {\n      return (\n        <Slot\n          ref={ref as React.Ref<HTMLElement>}\n          className={cn(className)}\n          {...api.dataAttributes}\n          {...props}\n        />\n      )\n    }\n\n    return (\n      <a\n        ref={ref}\n        className={cn(className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  }\n)\n"],
+  "mappings": ";;;;;;;;;;;AAIO,SAAS,eAAe,SAAwB,CAAA,GAAI;AACzD,SAAO;IACL,gBAAgB,EAAE,aAAa,YAAA;EAAY;AAE/C;;;;ACIO,IAAM,WAAiB;EAC5B,SAASA,UAAS,EAAE,WAAW,UAAU,OAAO,GAAG,MAAA,GAAS,KAAK;AAC/D,UAAM,MAAM,eAAe,KAAK;AAEhC,QAAI,SAAS;AACX,aACE;QAAC;QAAA;UACC;UACA,WAAW,GAAG,SAAS;UACtB,GAAG,IAAI;UACP,GAAG;QAAA;MAAA;IAGV;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,SAAS;QACtB,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;",
   "names": ["LinkCard"]
 }

package/dist/react-password-input.js

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-UJ6BBWQM.js";
+} from "./chunk-TOZBR4GL.js";
 import {
   cn,
   cva

package/dist/react-presence-indicator.js

@@ -41,11 +41,11 @@ var presenceDotVariants = cva({
   base: "inline-block rounded-full",
   variants: {
     status: {
-      online: "bg-green-500",
+      online: "bg-success",
       offline: "bg-gray-400",
-      away: "bg-yellow-500",
-      busy: "bg-red-500",
-      dnd: "bg-red-500"
+      away: "bg-warning",
+      busy: "bg-destructive",
+      dnd: "bg-destructive"
     },
     size: {
       sm: "h-2 w-2",

package/dist/react-presence-indicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../presence-indicator/src/presence-indicator.ts", "../../presence-indicator/src/presence-indicator.styles.ts", "../../react-presence-indicator/src/presence-indicator.tsx"],
-  "sourcesContent": ["export type PresenceStatus = 'online' | 'offline' | 'away' | 'busy' | 'dnd'\n\nexport interface PresenceProps {\n  /** The presence status to display */\n  status: PresenceStatus\n  /** Show a text label alongside the indicator */\n  showLabel?: boolean\n  /** Custom label override */\n  label?: string\n}\n\nexport interface PresenceAPI {\n  /** ARIA attributes for the indicator */\n  ariaProps: Record<string, string | number | boolean>\n  /** CSS color for the status dot */\n  color: string\n  /** Human-readable label for the status */\n  label: string\n  /** Whether to show the label text */\n  showLabel: boolean\n  /** The current status */\n  status: PresenceStatus\n}\n\nconst STATUS_COLORS: Record<PresenceStatus, string> = {\n  online: 'green',\n  offline: 'gray',\n  away: 'yellow',\n  busy: 'red',\n  dnd: 'red',\n}\n\nconst STATUS_LABELS: Record<PresenceStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  away: 'Away',\n  busy: 'Busy',\n  dnd: 'Do Not Disturb',\n}\n\nexport { STATUS_COLORS, STATUS_LABELS }\n\nexport function createPresence(props: PresenceProps): PresenceAPI {\n  const { status, showLabel: showLabelProp = false, label: labelOverride } = props\n\n  const color = STATUS_COLORS[status]\n  const label = labelOverride ?? STATUS_LABELS[status]\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'status',\n    'aria-label': label,\n  }\n\n  return {\n    ariaProps,\n    color,\n    label,\n    showLabel: showLabelProp,\n    status,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const presenceDotVariants = cva({\n  base: 'inline-block rounded-full',\n  variants: {\n    status: {\n      online: 'bg-green-500',\n      offline: 'bg-gray-400',\n      away: 'bg-yellow-500',\n      busy: 'bg-red-500',\n      dnd: 'bg-red-500',\n    },\n    size: {\n      sm: 'h-2 w-2',\n      md: 'h-2.5 w-2.5',\n      lg: 'h-3 w-3',\n    },\n  },\n  defaultVariants: {\n    status: 'offline',\n    size: 'md',\n  },\n})\n\nexport const presenceContainerStyles =\n  'inline-flex items-center gap-1.5'\n\nexport const presenceLabelStyles =\n  'text-sm text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  createPresence,\n  presenceDotVariants,\n  presenceContainerStyles,\n  presenceLabelStyles,\n  type PresenceStatus,\n} from '@refraction-ui/presence-indicator'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface PresenceIndicatorProps {\n  status: PresenceStatus\n  showLabel?: boolean\n  label?: string\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n}\n\nexport const PresenceIndicator = React.forwardRef<HTMLSpanElement, PresenceIndicatorProps>(\n  function PresenceIndicator({ status, showLabel = false, label, size = 'md', className }, ref) {\n  const api = createPresence({ status, showLabel, label })\n\n  return React.createElement(\n    'span',\n    { ref, ...api.ariaProps, className: cn(presenceContainerStyles, className) },\n    React.createElement('span', {\n      className: presenceDotVariants({ status, size }),\n    }),\n    api.showLabel &&\n      React.createElement('span', { className: presenceLabelStyles }, api.label),\n  )\n  },\n)\n"],
+  "sourcesContent": ["export type PresenceStatus = 'online' | 'offline' | 'away' | 'busy' | 'dnd'\n\nexport interface PresenceProps {\n  /** The presence status to display */\n  status: PresenceStatus\n  /** Show a text label alongside the indicator */\n  showLabel?: boolean\n  /** Custom label override */\n  label?: string\n}\n\nexport interface PresenceAPI {\n  /** ARIA attributes for the indicator */\n  ariaProps: Record<string, string | number | boolean>\n  /** CSS color for the status dot */\n  color: string\n  /** Human-readable label for the status */\n  label: string\n  /** Whether to show the label text */\n  showLabel: boolean\n  /** The current status */\n  status: PresenceStatus\n}\n\nconst STATUS_COLORS: Record<PresenceStatus, string> = {\n  online: 'green',\n  offline: 'gray',\n  away: 'yellow',\n  busy: 'red',\n  dnd: 'red',\n}\n\nconst STATUS_LABELS: Record<PresenceStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  away: 'Away',\n  busy: 'Busy',\n  dnd: 'Do Not Disturb',\n}\n\nexport { STATUS_COLORS, STATUS_LABELS }\n\nexport function createPresence(props: PresenceProps): PresenceAPI {\n  const { status, showLabel: showLabelProp = false, label: labelOverride } = props\n\n  const color = STATUS_COLORS[status]\n  const label = labelOverride ?? STATUS_LABELS[status]\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'status',\n    'aria-label': label,\n  }\n\n  return {\n    ariaProps,\n    color,\n    label,\n    showLabel: showLabelProp,\n    status,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const presenceDotVariants = cva({\n  base: 'inline-block rounded-full',\n  variants: {\n    status: {\n      online: 'bg-success',\n      offline: 'bg-gray-400',\n      away: 'bg-warning',\n      busy: 'bg-destructive',\n      dnd: 'bg-destructive',\n    },\n    size: {\n      sm: 'h-2 w-2',\n      md: 'h-2.5 w-2.5',\n      lg: 'h-3 w-3',\n    },\n  },\n  defaultVariants: {\n    status: 'offline',\n    size: 'md',\n  },\n})\n\nexport const presenceContainerStyles =\n  'inline-flex items-center gap-1.5'\n\nexport const presenceLabelStyles =\n  'text-sm text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  createPresence,\n  presenceDotVariants,\n  presenceContainerStyles,\n  presenceLabelStyles,\n  type PresenceStatus,\n} from '@refraction-ui/presence-indicator'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface PresenceIndicatorProps {\n  status: PresenceStatus\n  showLabel?: boolean\n  label?: string\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n}\n\nexport const PresenceIndicator = React.forwardRef<HTMLSpanElement, PresenceIndicatorProps>(\n  function PresenceIndicator({ status, showLabel = false, label, size = 'md', className }, ref) {\n  const api = createPresence({ status, showLabel, label })\n\n  return React.createElement(\n    'span',\n    { ref, ...api.ariaProps, className: cn(presenceContainerStyles, className) },\n    React.createElement('span', {\n      className: presenceDotVariants({ status, size }),\n    }),\n    api.showLabel &&\n      React.createElement('span', { className: presenceLabelStyles }, api.label),\n  )\n  },\n)\n"],
   "mappings": ";;;;;;;;;AAwBA,IAAM,gBAAgD;EACpD,QAAQ;EACR,SAAS;EACT,MAAM;EACN,MAAM;EACN,KAAK;AACP;AAEA,IAAM,gBAAgD;EACpD,QAAQ;EACR,SAAS;EACT,MAAM;EACN,MAAM;EACN,KAAK;AACP;AAIO,SAAS,eAAe,OAAmC;AAChE,QAAM,EAAE,QAAQ,WAAW,gBAAgB,OAAO,OAAO,cAAA,IAAkB;AAE3E,QAAM,QAAQ,cAAc,MAAM;AAClC,QAAM,QAAQ,iBAAiB,cAAc,MAAM;AAEnD,QAAM,YAAuD;IAC3D,MAAM;IACN,cAAc;EAAA;AAGhB,SAAO;IACL;IACA;IACA;IACA,WAAW;IACX;EAAA;AAEJ;AC1DO,IAAM,sBAAsB,IAAI;EACrC,MAAM;EACN,UAAU;IACR,QAAQ;MACN,QAAQ;MACR,SAAS;MACT,MAAM;MACN,MAAM;MACN,KAAK;IAAA;IAEP,MAAM;MACJ,IAAI;MACJ,IAAI;MACJ,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,QAAQ;IACR,MAAM;EAAA;AAEV,CAAC;AAEM,IAAM,0BACX;AAEK,IAAM,sBACX;;;ACVK,IAAM,oBAA0B;EACrC,SAASA,mBAAkB,EAAE,QAAQ,YAAY,OAAO,OAAO,OAAO,MAAM,UAAA,GAAa,KAAK;AAC9F,UAAM,MAAM,eAAe,EAAE,QAAQ,WAAW,MAAA,CAAO;AAEvD,WAAa;MACX;MACA,EAAE,KAAK,GAAG,IAAI,WAAW,WAAW,GAAG,yBAAyB,SAAS,EAAA;MACnE,oBAAc,QAAQ;QAC1B,WAAW,oBAAoB,EAAE,QAAQ,KAAA,CAAM;MAAA,CAChD;MACD,IAAI,aACI,oBAAc,QAAQ,EAAE,WAAW,oBAAA,GAAuB,IAAI,KAAK;IAAA;EAE7E;AACF;",
   "names": ["PresenceIndicator"]
 }

package/dist/react-progress-display.js

@@ -45,8 +45,8 @@ var statCardVariants = cva({
     color: {
       default: "bg-card text-card-foreground",
       primary: "bg-primary/10 text-primary border-primary/20",
-      success: "bg-green-500/10 text-green-700 border-green-500/20",
-      warning: "bg-yellow-500/10 text-yellow-700 border-yellow-500/20",
+      success: "bg-success/10 text-success border-success/20",
+      warning: "bg-warning/10 text-warning border-warning/20",
       destructive: "bg-destructive/10 text-destructive border-destructive/20"
     }
   },

package/dist/react-progress-display.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../progress-display/src/progress-display.ts", "../../progress-display/src/progress-display.styles.ts", "../../react-progress-display/src/progress-display.tsx"],
-  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface StatCardData {\n  label: string\n  value: number\n  icon?: string\n  color?: string\n}\n\nexport interface BadgeData {\n  name: string\n  description: string\n  icon: string\n  unlockedAt?: string\n  isUnlocked: boolean\n}\n\nexport interface ProgressDisplayProps {\n  stats: StatCardData[]\n  badges: BadgeData[]\n  level?: number\n  accuracy?: number\n}\n\nexport interface ProgressDisplayAPI {\n  /** The computed stats array */\n  stats: StatCardData[]\n  /** The badges array */\n  badges: BadgeData[]\n  /** ARIA props for the stats region */\n  ariaProps: Partial<AccessibilityProps>\n  /** Get ARIA props for a specific badge */\n  getBadgeAriaProps: (badge: BadgeData) => Partial<AccessibilityProps>\n}\n\nexport function createProgressDisplay(props: ProgressDisplayProps): ProgressDisplayAPI {\n  const { stats, badges } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'region',\n    'aria-label': 'Progress statistics',\n  }\n\n  function getBadgeAriaProps(badge: BadgeData): Partial<AccessibilityProps> {\n    const label = badge.isUnlocked\n      ? `${badge.name}: ${badge.description}`\n      : `${badge.name}: ${badge.description} (locked)`\n\n    return {\n      'aria-label': label,\n    }\n  }\n\n  return {\n    stats,\n    badges,\n    ariaProps,\n    getBadgeAriaProps,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const statsGridVariants = cva({\n  base: 'grid gap-4',\n  variants: {\n    columns: {\n      '2': 'grid-cols-2',\n      '3': 'grid-cols-3',\n      '4': 'grid-cols-4',\n    },\n  },\n  defaultVariants: {\n    columns: '3',\n  },\n})\n\nexport const statCardVariants = cva({\n  base: 'rounded-lg border p-4 text-center shadow-sm',\n  variants: {\n    color: {\n      default: 'bg-card text-card-foreground',\n      primary: 'bg-primary/10 text-primary border-primary/20',\n      success: 'bg-green-500/10 text-green-700 border-green-500/20',\n      warning: 'bg-yellow-500/10 text-yellow-700 border-yellow-500/20',\n      destructive: 'bg-destructive/10 text-destructive border-destructive/20',\n    },\n  },\n  defaultVariants: {\n    color: 'default',\n  },\n})\n\nexport const badgeGridVariants = cva({\n  base: 'grid gap-4',\n  variants: {\n    columns: {\n      '3': 'grid-cols-3',\n      '4': 'grid-cols-4',\n      '5': 'grid-cols-5',\n    },\n  },\n  defaultVariants: {\n    columns: '4',\n  },\n})\n\nexport const badgeItemVariants = cva({\n  base: 'flex flex-col items-center gap-2 rounded-lg border p-4 text-center transition-opacity',\n  variants: {\n    state: {\n      unlocked: 'opacity-100 bg-card',\n      locked: 'opacity-50 bg-muted grayscale',\n    },\n  },\n  defaultVariants: {\n    state: 'locked',\n  },\n})\n\nexport const progressBarVariants = cva({\n  base: 'h-2 w-full overflow-hidden rounded-full bg-secondary',\n  variants: {\n    size: {\n      sm: 'h-1',\n      md: 'h-2',\n      lg: 'h-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createProgressDisplay,\n  statsGridVariants,\n  statCardVariants,\n  badgeGridVariants,\n  badgeItemVariants,\n  progressBarVariants,\n  type StatCardData,\n  type BadgeData,\n} from '@refraction-ui/progress-display'\nimport { cn } from '@refraction-ui/shared'\n\n/* ------------------------------------------------------------------ */\n/*  StatsGrid                                                          */\n/* ------------------------------------------------------------------ */\n\nexport interface StatsGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  stats: StatCardData[]\n  badges?: BadgeData[]\n}\n\nexport const StatsGrid = React.forwardRef<HTMLDivElement, StatsGridProps>(\n  function StatsGrid({ stats, badges = [], className, ...props }, ref) {\n    const api = createProgressDisplay({ stats, badges })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(statsGridVariants(), className)}\n        {...api.ariaProps}\n        {...props}\n      >\n        {api.stats.map((stat) => (\n          <div\n            key={stat.label}\n            className={statCardVariants({\n              color: (stat.color as 'default' | 'primary' | 'success' | 'warning' | 'destructive') ?? 'default',\n            })}\n          >\n            {stat.icon && <span className=\"text-2xl\">{stat.icon}</span>}\n            <div className=\"text-2xl font-bold\">{stat.value}</div>\n            <div className=\"text-sm text-muted-foreground\">{stat.label}</div>\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  ProgressBar                                                        */\n/* ------------------------------------------------------------------ */\n\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: number\n  max?: number\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  function ProgressBar({ value, max = 100, size, className, ...props }, ref) {\n    const percent = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        ref={ref}\n        className={cn(progressBarVariants({ size }), className)}\n        role=\"progressbar\"\n        aria-valuenow={value}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-primary transition-all\"\n          style={{ width: `${percent}%` }}\n        />\n      </div>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  BadgeDisplay                                                       */\n/* ------------------------------------------------------------------ */\n\nexport interface BadgeDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n  badges: BadgeData[]\n}\n\nexport const BadgeDisplay = React.forwardRef<HTMLDivElement, BadgeDisplayProps>(\n  function BadgeDisplay({ badges, className, ...props }, ref) {\n    const api = createProgressDisplay({ stats: [], badges })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(badgeGridVariants(), className)}\n        {...props}\n      >\n        {api.badges.map((badge) => (\n          <div\n            key={badge.name}\n            className={badgeItemVariants({\n              state: badge.isUnlocked ? 'unlocked' : 'locked',\n            })}\n            {...api.getBadgeAriaProps(badge)}\n          >\n            <span className=\"text-3xl\">{badge.icon}</span>\n            <span className=\"font-medium\">{badge.name}</span>\n            {!badge.isUnlocked && (\n              <span className=\"text-xs text-muted-foreground\">Locked</span>\n            )}\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\n"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface StatCardData {\n  label: string\n  value: number\n  icon?: string\n  color?: string\n}\n\nexport interface BadgeData {\n  name: string\n  description: string\n  icon: string\n  unlockedAt?: string\n  isUnlocked: boolean\n}\n\nexport interface ProgressDisplayProps {\n  stats: StatCardData[]\n  badges: BadgeData[]\n  level?: number\n  accuracy?: number\n}\n\nexport interface ProgressDisplayAPI {\n  /** The computed stats array */\n  stats: StatCardData[]\n  /** The badges array */\n  badges: BadgeData[]\n  /** ARIA props for the stats region */\n  ariaProps: Partial<AccessibilityProps>\n  /** Get ARIA props for a specific badge */\n  getBadgeAriaProps: (badge: BadgeData) => Partial<AccessibilityProps>\n}\n\nexport function createProgressDisplay(props: ProgressDisplayProps): ProgressDisplayAPI {\n  const { stats, badges } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'region',\n    'aria-label': 'Progress statistics',\n  }\n\n  function getBadgeAriaProps(badge: BadgeData): Partial<AccessibilityProps> {\n    const label = badge.isUnlocked\n      ? `${badge.name}: ${badge.description}`\n      : `${badge.name}: ${badge.description} (locked)`\n\n    return {\n      'aria-label': label,\n    }\n  }\n\n  return {\n    stats,\n    badges,\n    ariaProps,\n    getBadgeAriaProps,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const statsGridVariants = cva({\n  base: 'grid gap-4',\n  variants: {\n    columns: {\n      '2': 'grid-cols-2',\n      '3': 'grid-cols-3',\n      '4': 'grid-cols-4',\n    },\n  },\n  defaultVariants: {\n    columns: '3',\n  },\n})\n\nexport const statCardVariants = cva({\n  base: 'rounded-lg border p-4 text-center shadow-sm',\n  variants: {\n    color: {\n      default: 'bg-card text-card-foreground',\n      primary: 'bg-primary/10 text-primary border-primary/20',\n      success: 'bg-success/10 text-success border-success/20',\n      warning: 'bg-warning/10 text-warning border-warning/20',\n      destructive: 'bg-destructive/10 text-destructive border-destructive/20',\n    },\n  },\n  defaultVariants: {\n    color: 'default',\n  },\n})\n\nexport const badgeGridVariants = cva({\n  base: 'grid gap-4',\n  variants: {\n    columns: {\n      '3': 'grid-cols-3',\n      '4': 'grid-cols-4',\n      '5': 'grid-cols-5',\n    },\n  },\n  defaultVariants: {\n    columns: '4',\n  },\n})\n\nexport const badgeItemVariants = cva({\n  base: 'flex flex-col items-center gap-2 rounded-lg border p-4 text-center transition-opacity',\n  variants: {\n    state: {\n      unlocked: 'opacity-100 bg-card',\n      locked: 'opacity-50 bg-muted grayscale',\n    },\n  },\n  defaultVariants: {\n    state: 'locked',\n  },\n})\n\nexport const progressBarVariants = cva({\n  base: 'h-2 w-full overflow-hidden rounded-full bg-secondary',\n  variants: {\n    size: {\n      sm: 'h-1',\n      md: 'h-2',\n      lg: 'h-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createProgressDisplay,\n  statsGridVariants,\n  statCardVariants,\n  badgeGridVariants,\n  badgeItemVariants,\n  progressBarVariants,\n  type StatCardData,\n  type BadgeData,\n} from '@refraction-ui/progress-display'\nimport { cn } from '@refraction-ui/shared'\n\n/* ------------------------------------------------------------------ */\n/*  StatsGrid                                                          */\n/* ------------------------------------------------------------------ */\n\nexport interface StatsGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  stats: StatCardData[]\n  badges?: BadgeData[]\n}\n\nexport const StatsGrid = React.forwardRef<HTMLDivElement, StatsGridProps>(\n  function StatsGrid({ stats, badges = [], className, ...props }, ref) {\n    const api = createProgressDisplay({ stats, badges })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(statsGridVariants(), className)}\n        {...api.ariaProps}\n        {...props}\n      >\n        {api.stats.map((stat) => (\n          <div\n            key={stat.label}\n            className={statCardVariants({\n              color: (stat.color as 'default' | 'primary' | 'success' | 'warning' | 'destructive') ?? 'default',\n            })}\n          >\n            {stat.icon && <span className=\"text-2xl\">{stat.icon}</span>}\n            <div className=\"text-2xl font-bold\">{stat.value}</div>\n            <div className=\"text-sm text-muted-foreground\">{stat.label}</div>\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  ProgressBar                                                        */\n/* ------------------------------------------------------------------ */\n\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: number\n  max?: number\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  function ProgressBar({ value, max = 100, size, className, ...props }, ref) {\n    const percent = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        ref={ref}\n        className={cn(progressBarVariants({ size }), className)}\n        role=\"progressbar\"\n        aria-valuenow={value}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-primary transition-all\"\n          style={{ width: `${percent}%` }}\n        />\n      </div>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  BadgeDisplay                                                       */\n/* ------------------------------------------------------------------ */\n\nexport interface BadgeDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n  badges: BadgeData[]\n}\n\nexport const BadgeDisplay = React.forwardRef<HTMLDivElement, BadgeDisplayProps>(\n  function BadgeDisplay({ badges, className, ...props }, ref) {\n    const api = createProgressDisplay({ stats: [], badges })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(badgeGridVariants(), className)}\n        {...props}\n      >\n        {api.badges.map((badge) => (\n          <div\n            key={badge.name}\n            className={badgeItemVariants({\n              state: badge.isUnlocked ? 'unlocked' : 'locked',\n            })}\n            {...api.getBadgeAriaProps(badge)}\n          >\n            <span className=\"text-3xl\">{badge.icon}</span>\n            <span className=\"font-medium\">{badge.name}</span>\n            {!badge.isUnlocked && (\n              <span className=\"text-xs text-muted-foreground\">Locked</span>\n            )}\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\n"],
   "mappings": "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",
   "names": ["StatsGrid", "ProgressBar", "BadgeDisplay"]
 }

package/dist/react-slot.js

@@ -0,0 +1,7 @@
+import {
+  Slot
+} from "./chunk-WSPJTQAV.js";
+export {
+  Slot
+};
+//# sourceMappingURL=react-slot.js.map

package/dist/react-slot.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/react-status-indicator.js

@@ -45,10 +45,10 @@ var statusDotVariants = cva({
   base: "inline-block h-2 w-2 rounded-full",
   variants: {
     type: {
-      success: "bg-green-500",
-      error: "bg-red-500",
-      warning: "bg-yellow-500",
-      info: "bg-blue-500",
+      success: "bg-success",
+      error: "bg-destructive",
+      warning: "bg-warning",
+      info: "bg-info",
       pending: "bg-orange-500",
       neutral: "bg-gray-400"
     }
@@ -61,10 +61,10 @@ var statusPulseVariants = cva({
   base: "animate-pulse inline-block h-2 w-2 rounded-full",
   variants: {
     type: {
-      success: "bg-green-500",
-      error: "bg-red-500",
-      warning: "bg-yellow-500",
-      info: "bg-blue-500",
+      success: "bg-success",
+      error: "bg-destructive",
+      warning: "bg-warning",
+      info: "bg-info",
       pending: "bg-orange-500",
       neutral: "bg-gray-400"
     }

package/dist/react-status-indicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../status-indicator/src/status-indicator.ts", "../../status-indicator/src/status-indicator.styles.ts", "../../react-status-indicator/src/status-indicator.tsx"],
-  "sourcesContent": ["export type StatusType = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'neutral'\n\nexport interface StatusProps {\n  /** The status type */\n  type: StatusType\n  /** Label to display alongside the status dot */\n  label?: string\n  /** Whether to show a pulse animation (primarily for 'pending' status) */\n  pulse?: boolean\n}\n\nexport interface StatusAPI {\n  /** ARIA attributes for the status indicator */\n  ariaProps: Record<string, string | number | boolean>\n  /** The status type */\n  type: StatusType\n  /** The display label */\n  label: string\n  /** Whether to show pulse animation */\n  pulse: boolean\n  /** CSS color class name for the dot */\n  color: string\n}\n\nconst STATUS_INDICATOR_COLORS: Record<StatusType, string> = {\n  success: 'green',\n  error: 'red',\n  warning: 'yellow',\n  info: 'blue',\n  pending: 'orange',\n  neutral: 'gray',\n}\n\nconst STATUS_INDICATOR_LABELS: Record<StatusType, string> = {\n  success: 'Success',\n  error: 'Error',\n  warning: 'Warning',\n  info: 'Info',\n  pending: 'Pending',\n  neutral: 'Neutral',\n}\n\nexport {\n  STATUS_INDICATOR_COLORS as STATUS_COLORS,\n  STATUS_INDICATOR_LABELS as STATUS_LABELS,\n}\n\nexport function createStatusIndicator(props: StatusProps): StatusAPI {\n  const { type, label: labelOverride, pulse: pulseOverride } = props\n\n  const color = STATUS_INDICATOR_COLORS[type]\n  const label = labelOverride ?? STATUS_INDICATOR_LABELS[type]\n  const pulse = pulseOverride ?? (type === 'pending')\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'status',\n    'aria-label': label,\n  }\n\n  return {\n    ariaProps,\n    type,\n    label,\n    pulse,\n    color,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const statusContainerStyles =\n  'inline-flex items-center gap-1.5'\n\nexport const statusDotVariants = cva({\n  base: 'inline-block h-2 w-2 rounded-full',\n  variants: {\n    type: {\n      success: 'bg-green-500',\n      error: 'bg-red-500',\n      warning: 'bg-yellow-500',\n      info: 'bg-blue-500',\n      pending: 'bg-orange-500',\n      neutral: 'bg-gray-400',\n    },\n  },\n  defaultVariants: {\n    type: 'neutral',\n  },\n})\n\nexport const statusPulseVariants = cva({\n  base: 'animate-pulse inline-block h-2 w-2 rounded-full',\n  variants: {\n    type: {\n      success: 'bg-green-500',\n      error: 'bg-red-500',\n      warning: 'bg-yellow-500',\n      info: 'bg-blue-500',\n      pending: 'bg-orange-500',\n      neutral: 'bg-gray-400',\n    },\n  },\n  defaultVariants: {\n    type: 'pending',\n  },\n})\n\nexport const statusLabelStyles =\n  'text-sm text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  createStatusIndicator,\n  statusContainerStyles,\n  statusDotVariants,\n  statusPulseVariants,\n  statusLabelStyles,\n  type StatusType,\n} from '@refraction-ui/status-indicator'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface StatusIndicatorProps {\n  type: StatusType\n  /** Explicit text label. Takes precedence over `children`. */\n  label?: string\n  /** Composable label content. Used when `label` is omitted. */\n  children?: React.ReactNode\n  pulse?: boolean\n  showLabel?: boolean\n  className?: string\n}\n\n/** Best ARIA-label: explicit prop wins, then string children, else headless default. */\nfunction deriveAriaLabel(\n  label: string | undefined,\n  children: React.ReactNode,\n  fallback: string,\n): string {\n  if (label) return label\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children)\n  }\n  return fallback\n}\n\nexport const StatusIndicator = React.forwardRef<HTMLSpanElement, StatusIndicatorProps>(\n  function StatusIndicator({ type, label, children, pulse, showLabel = true, className }, ref) {\n  const api = createStatusIndicator({ type, label, pulse })\n  const ariaLabel = deriveAriaLabel(label, children, api.label)\n  const visibleLabel: React.ReactNode = label ?? children ?? api.label\n\n  const dotClassName = api.pulse\n    ? statusPulseVariants({ type })\n    : statusDotVariants({ type })\n\n  return (\n    <span\n      ref={ref}\n      {...api.ariaProps}\n      aria-label={ariaLabel}\n      className={cn(statusContainerStyles, className)}\n    >\n      <span className={dotClassName} />\n      {showLabel && <span className={statusLabelStyles}>{visibleLabel}</span>}\n    </span>\n  )\n  },\n)\n"],
+  "sourcesContent": ["export type StatusType = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'neutral'\n\nexport interface StatusProps {\n  /** The status type */\n  type: StatusType\n  /** Label to display alongside the status dot */\n  label?: string\n  /** Whether to show a pulse animation (primarily for 'pending' status) */\n  pulse?: boolean\n}\n\nexport interface StatusAPI {\n  /** ARIA attributes for the status indicator */\n  ariaProps: Record<string, string | number | boolean>\n  /** The status type */\n  type: StatusType\n  /** The display label */\n  label: string\n  /** Whether to show pulse animation */\n  pulse: boolean\n  /** CSS color class name for the dot */\n  color: string\n}\n\nconst STATUS_INDICATOR_COLORS: Record<StatusType, string> = {\n  success: 'green',\n  error: 'red',\n  warning: 'yellow',\n  info: 'blue',\n  pending: 'orange',\n  neutral: 'gray',\n}\n\nconst STATUS_INDICATOR_LABELS: Record<StatusType, string> = {\n  success: 'Success',\n  error: 'Error',\n  warning: 'Warning',\n  info: 'Info',\n  pending: 'Pending',\n  neutral: 'Neutral',\n}\n\nexport {\n  STATUS_INDICATOR_COLORS as STATUS_COLORS,\n  STATUS_INDICATOR_LABELS as STATUS_LABELS,\n}\n\nexport function createStatusIndicator(props: StatusProps): StatusAPI {\n  const { type, label: labelOverride, pulse: pulseOverride } = props\n\n  const color = STATUS_INDICATOR_COLORS[type]\n  const label = labelOverride ?? STATUS_INDICATOR_LABELS[type]\n  const pulse = pulseOverride ?? (type === 'pending')\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'status',\n    'aria-label': label,\n  }\n\n  return {\n    ariaProps,\n    type,\n    label,\n    pulse,\n    color,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const statusContainerStyles =\n  'inline-flex items-center gap-1.5'\n\nexport const statusDotVariants = cva({\n  base: 'inline-block h-2 w-2 rounded-full',\n  variants: {\n    type: {\n      success: 'bg-success',\n      error: 'bg-destructive',\n      warning: 'bg-warning',\n      info: 'bg-info',\n      pending: 'bg-orange-500',\n      neutral: 'bg-gray-400',\n    },\n  },\n  defaultVariants: {\n    type: 'neutral',\n  },\n})\n\nexport const statusPulseVariants = cva({\n  base: 'animate-pulse inline-block h-2 w-2 rounded-full',\n  variants: {\n    type: {\n      success: 'bg-success',\n      error: 'bg-destructive',\n      warning: 'bg-warning',\n      info: 'bg-info',\n      pending: 'bg-orange-500',\n      neutral: 'bg-gray-400',\n    },\n  },\n  defaultVariants: {\n    type: 'pending',\n  },\n})\n\nexport const statusLabelStyles =\n  'text-sm text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  createStatusIndicator,\n  statusContainerStyles,\n  statusDotVariants,\n  statusPulseVariants,\n  statusLabelStyles,\n  type StatusType,\n} from '@refraction-ui/status-indicator'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface StatusIndicatorProps {\n  type: StatusType\n  /** Explicit text label. Takes precedence over `children`. */\n  label?: string\n  /** Composable label content. Used when `label` is omitted. */\n  children?: React.ReactNode\n  pulse?: boolean\n  showLabel?: boolean\n  className?: string\n}\n\n/** Best ARIA-label: explicit prop wins, then string children, else headless default. */\nfunction deriveAriaLabel(\n  label: string | undefined,\n  children: React.ReactNode,\n  fallback: string,\n): string {\n  if (label) return label\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children)\n  }\n  return fallback\n}\n\nexport const StatusIndicator = React.forwardRef<HTMLSpanElement, StatusIndicatorProps>(\n  function StatusIndicator({ type, label, children, pulse, showLabel = true, className }, ref) {\n  const api = createStatusIndicator({ type, label, pulse })\n  const ariaLabel = deriveAriaLabel(label, children, api.label)\n  const visibleLabel: React.ReactNode = label ?? children ?? api.label\n\n  const dotClassName = api.pulse\n    ? statusPulseVariants({ type })\n    : statusDotVariants({ type })\n\n  return (\n    <span\n      ref={ref}\n      {...api.ariaProps}\n      aria-label={ariaLabel}\n      className={cn(statusContainerStyles, className)}\n    >\n      <span className={dotClassName} />\n      {showLabel && <span className={statusLabelStyles}>{visibleLabel}</span>}\n    </span>\n  )\n  },\n)\n"],
   "mappings": ";;;;;;;;;AAwBA,IAAM,0BAAsD;EAC1D,SAAS;EACT,OAAO;EACP,SAAS;EACT,MAAM;EACN,SAAS;EACT,SAAS;AACX;AAEA,IAAM,0BAAsD;EAC1D,SAAS;EACT,OAAO;EACP,SAAS;EACT,MAAM;EACN,SAAS;EACT,SAAS;AACX;AAOO,SAAS,sBAAsB,OAA+B;AACnE,QAAM,EAAE,MAAM,OAAO,eAAe,OAAO,cAAA,IAAkB;AAE7D,QAAM,QAAQ,wBAAwB,IAAI;AAC1C,QAAM,QAAQ,iBAAiB,wBAAwB,IAAI;AAC3D,QAAM,QAAQ,iBAAkB,SAAS;AAEzC,QAAM,YAAuD;IAC3D,MAAM;IACN,cAAc;EAAA;AAGhB,SAAO;IACL;IACA;IACA;IACA;IACA;EAAA;AAEJ;AChEO,IAAM,wBACX;AAEK,IAAM,oBAAoB,IAAI;EACnC,MAAM;EACN,UAAU;IACR,MAAM;MACJ,SAAS;MACT,OAAO;MACP,SAAS;MACT,MAAM;MACN,SAAS;MACT,SAAS;IAAA;EACX;EAEF,iBAAiB;IACf,MAAM;EAAA;AAEV,CAAC;AAEM,IAAM,sBAAsB,IAAI;EACrC,MAAM;EACN,UAAU;IACR,MAAM;MACJ,SAAS;MACT,OAAO;MACP,SAAS;MACT,MAAM;MACN,SAAS;MACT,SAAS;IAAA;EACX;EAEF,iBAAiB;IACf,MAAM;EAAA;AAEV,CAAC;AAEM,IAAM,oBACX;;;;ACjBF,SAAS,gBACP,OACA,UACA,UACQ;AACR,MAAI,MAAO,QAAO;AAClB,MAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAChE,WAAO,OAAO,QAAQ;EACxB;AACA,SAAO;AACT;AAEO,IAAM,kBAAwB;EACnC,SAASA,iBAAgB,EAAE,MAAM,OAAO,UAAU,OAAO,YAAY,MAAM,UAAA,GAAa,KAAK;AAC7F,UAAM,MAAM,sBAAsB,EAAE,MAAM,OAAO,MAAA,CAAO;AACxD,UAAM,YAAY,gBAAgB,OAAO,UAAU,IAAI,KAAK;AAC5D,UAAM,eAAgC,SAAS,YAAY,IAAI;AAE/D,UAAM,eAAe,IAAI,QACrB,oBAAoB,EAAE,KAAA,CAAM,IAC5B,kBAAkB,EAAE,KAAA,CAAM;AAE9B,WACE;MAAC;MAAA;QACC;QACC,GAAG,IAAI;QACR,cAAY;QACZ,WAAW,GAAG,uBAAuB,SAAS;QAE9C,UAAA;UAAA,oBAAC,QAAA,EAAK,WAAW,aAAA,CAAc;UAC9B,aAAa,oBAAC,QAAA,EAAK,WAAW,mBAAoB,UAAA,aAAA,CAAa;QAAA;MAAA;IAAA;EAGpE;AACF;",
   "names": ["StatusIndicator"]
 }