@devalok/shilp-sutra 0.57.0 → 0.59.0

package/dist/ui/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../src/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from \"@primitives/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { motion } from \"framer-motion\"\nimport * as React from \"react\"\n\nimport { Dot, type DotColor, type DotSize } from \"./dot\"\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\nimport { Skeleton } from \"./skeleton\"\n\n// ── Contexts so AvatarFallback can inherit shape & size from Avatar ──\ntype AvatarShape = 'circle' | 'square' | 'rounded'\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nconst AvatarShapeContext = React.createContext<AvatarShape>('circle')\nconst AvatarSizeContext = React.createContext<AvatarSize>('md')\n\nexport const avatarVariants = cva(\n  'relative flex shrink-0 overflow-hidden',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n      shape: {\n        circle: 'rounded-pill',\n        square: 'rounded-none',\n        rounded: 'rounded-control',\n      },\n    },\n    defaultVariants: { size: 'md', shape: 'circle' },\n  }\n)\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport type AvatarRing = 'none' | 'lead' | 'admin' | 'client'\n\n// Presence status → shared Dot intent colour.\nconst statusDotColor: Record<AvatarStatus, DotColor> = {\n  online: 'success',\n  offline: 'neutral',\n  busy: 'error',\n  away: 'warning',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  busy: 'Busy',\n  away: 'Away',\n}\n\n/** Avatar size → Dot size (the status dot scales with the avatar). */\nconst statusDotSize: Record<AvatarSize, DotSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'lg',\n}\n\n// ── Role ring ───────────────────────────────────────────────────────────────\n\nconst ringColorMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-accent-7',\n  admin: 'ring-warning-7',\n  client: 'ring-info-7',\n}\n\nconst ringShapeMap: Record<string, string> = {\n  circle: 'rounded-pill',\n  square: 'rounded-none',\n  rounded: 'rounded-control',\n}\n\n// ── Fallback font sizes that scale with avatar size ─────────────────────────\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n  xs: 'text-body-xs',\n  sm: 'text-body-xs',\n  md: 'text-body-sm',\n  lg: 'text-body-md',\n  xl: 'text-heading-xs',\n}\n\n// ── Deterministic fallback colors ───────────────────────────────────────────\n\nconst FALLBACK_COLORS = [\n  { bg: 'bg-accent-3', text: 'text-accent-11' },\n  { bg: 'bg-success-3', text: 'text-success-11' },\n  { bg: 'bg-warning-3', text: 'text-warning-11' },\n  { bg: 'bg-error-3', text: 'text-error-11' },\n  { bg: 'bg-info-3', text: 'text-info-11' },\n  { bg: 'bg-category-teal-3', text: 'text-category-teal-11' },\n  { bg: 'bg-category-indigo-3', text: 'text-category-indigo-11' },\n  { bg: 'bg-category-cyan-3', text: 'text-category-cyan-11' },\n] as const\n\n/**\n * Simple string hash that produces a deterministic index into FALLBACK_COLORS.\n * Uses djb2 for a reasonable distribution with short strings.\n */\nfunction getFallbackColor(seed: string): (typeof FALLBACK_COLORS)[number] {\n  let hash = 5381\n  for (let i = 0; i < seed.length; i++) {\n    hash = ((hash << 5) + hash + seed.charCodeAt(i)) | 0\n  }\n  const index = Math.abs(hash) % FALLBACK_COLORS.length\n  return FALLBACK_COLORS[index]\n}\n\n/**\n * Props for Avatar — a user/entity image container with size, shape, and presence-status variants.\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` | `xl` — the status dot scales with the avatar size.\n *\n * **Shapes:** `circle` (default, round) | `square` (sharp corners) | `rounded` (rounded corners, for bots/apps)\n *\n * **Status dot:** `status=\"online\"` (green) | `\"offline\"` (muted) | `\"busy\"` (red) | `\"away\"` (amber).\n * The dot renders with `role=\"img\"` and an accessible `aria-label` — it is not purely decorative.\n *\n * **Role ring:** `ring=\"lead\"` (accent) | `\"admin\"` (warning) | `\"client\"` (info) — a colored ring\n * around the avatar indicating the user's role.\n *\n * **Badge:** `badge={5}` (number) | `badge=\"dot\"` (notification dot) | `badge={<Icon />}` (custom).\n * Numbers > 99 display as \"99+\". Badge is hidden when `0` or `undefined`.\n *\n * **Loading:** `loading={true}` shows a pulse skeleton placeholder.\n *\n * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.\n *\n * @example\n * // User avatar with photo and fallback initials:\n * <Avatar size=\"md\">\n *   <AvatarImage src={user.avatarUrl} alt={user.name} />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Online presence indicator in a team roster:\n * <Avatar size=\"lg\" status=\"online\">\n *   <AvatarImage src={user.photoUrl} alt={user.name} />\n *   <AvatarFallback>{user.initials}</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Square shape for a bot/integration logo:\n * <Avatar shape=\"square\" size=\"xl\">\n *   <AvatarImage src=\"/logos/github.png\" alt=\"GitHub\" />\n * </Avatar>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AvatarProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>,\n    VariantProps<typeof avatarVariants> {\n  /** Optional status indicator displayed as a dot at the bottom-right corner */\n  status?: AvatarStatus\n  /** Role ring color indicator */\n  ring?: AvatarRing\n  /** Badge overlay: number, 'dot', or custom ReactNode */\n  badge?: number | 'dot' | React.ReactNode\n  /** Show loading skeleton instead of content */\n  loading?: boolean\n  children?: React.ReactNode\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, ring, badge, loading, children, ...props }, ref) => {\n  const resolvedShape = shape ?? 'circle'\n\n  // Build ring classes for the outer wrapper\n  const ringClasses = ring && ring !== 'none'\n    ? cn('ring-2 ring-offset-2 ring-offset-surface-panel', ringColorMap[ring], ringShapeMap[resolvedShape])\n    : undefined\n\n  // Loading skeleton — early return\n  if (loading) {\n    return (\n      <span ref={ref} className={cn('relative inline-flex shrink-0', ringClasses)}>\n        <Skeleton\n          className={cn(avatarVariants({ size, shape }))}\n          data-slot=\"avatar-skeleton\"\n        />\n      </span>\n    )\n  }\n\n  // Determine whether to render badge\n  const showBadge = badge !== undefined && badge !== 0\n\n  return (\n    <AvatarShapeContext.Provider value={resolvedShape}>\n    <AvatarSizeContext.Provider value={size ?? 'md'}>\n    <span className={cn('relative inline-flex shrink-0', ringClasses)}>\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      {status && (\n        <span\n          className=\"absolute bottom-0 right-0\"\n          role=\"img\"\n          aria-label={statusLabelMap[status]}\n        >\n          {/* Shared Dot primitive: colour + contrast ring; wrapper owns position + a11y. */}\n          <Dot color={statusDotColor[status]} size={statusDotSize[size ?? 'md']} withBorder aria-hidden />\n        </span>\n      )}\n      {showBadge && (\n        badge === 'dot' ? (\n          <span\n            className=\"absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill bg-error-9 ring-2 ring-surface-panel\"\n            data-slot=\"avatar-badge-dot\"\n            aria-hidden=\"true\"\n          />\n        ) : typeof badge === 'number' ? (\n          <motion.span\n            initial={{ scale: 0 }}\n            animate={{ scale: 1 }}\n            transition={springs.smooth}\n            className=\"absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-panel\"\n            data-slot=\"avatar-badge\"\n            role=\"status\"\n            aria-label={`${badge > 99 ? '99+' : badge} notifications`}\n          >\n            {badge > 99 ? '99+' : badge}\n          </motion.span>\n        ) : (\n          <span className=\"absolute -right-1 -top-1\" data-slot=\"avatar-badge-custom\">\n            {badge}\n          </span>\n        )\n      )}\n    </span>\n    </AvatarSizeContext.Provider>\n    </AvatarShapeContext.Provider>\n  )\n})\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <motion.span\n    initial={{ scale: 0.96 }}\n    animate={{ opacity: 1, scale: 1 }}\n    transition={springs.smooth}\n    className=\"absolute inset-0 h-full w-full\"\n  >\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"aspect-square h-full w-full\", className)}\n      {...props}\n    />\n  </motion.span>\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  /**\n   * Seed string for deterministic color selection.\n   * Falls back to the text content of `children` if not provided.\n   */\n  colorSeed?: string\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, colorSeed, children, ...props }, ref) => {\n  // Derive seed: explicit colorSeed > children text content > empty string\n  const childrenText = typeof children === 'string' ? children : ''\n  const seed = colorSeed ?? childrenText\n  const color = getFallbackColor(seed)\n\n  // Inherit shape and size from parent Avatar via context\n  const shape = React.useContext(AvatarShapeContext)\n  const size = React.useContext(AvatarSizeContext)\n  const shapeClass = shape === 'square' ? 'rounded-none' : shape === 'rounded' ? 'rounded-control' : 'rounded-pill'\n\n  // Letter-spacing based on character count\n  const tracking = childrenText.length === 1 ? 'tracking-wide' : 'tracking-normal'\n\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex h-full w-full items-center justify-center font-semibold',\n        shapeClass,\n        fallbackTextSizeMap[size],\n        color.bg,\n        color.text,\n        tracking,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarFallback,AvatarImage }\n"],"mappings":"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"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../../src/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from \"@primitives/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { motion } from \"framer-motion\"\nimport * as React from \"react\"\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { Dot, type DotColor, type DotSize } from \"./dot\"\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\nimport { Skeleton } from \"./skeleton\"\n\n// ── Contexts so AvatarFallback can inherit shape & size from Avatar ──\ntype AvatarShape = 'circle' | 'square' | 'rounded'\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nconst AvatarShapeContext = React.createContext<AvatarShape>('circle')\nconst AvatarSizeContext = React.createContext<AvatarSize>('md')\n\nexport const avatarVariants = cva(\n  'relative flex shrink-0 overflow-hidden',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n      shape: {\n        circle: 'rounded-pill',\n        square: 'rounded-none',\n        rounded: 'rounded-control',\n      },\n    },\n    defaultVariants: { size: 'md', shape: 'circle' },\n  }\n)\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport type AvatarRing = 'none' | 'lead' | 'admin' | 'client'\n\n// Presence status → shared Dot intent colour.\nconst statusDotColor: Record<AvatarStatus, DotColor> = {\n  online: 'success',\n  offline: 'neutral',\n  busy: 'error',\n  away: 'warning',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  busy: 'Busy',\n  away: 'Away',\n}\n\n/** Avatar size → Dot size (the status dot scales with the avatar). */\nconst statusDotSize: Record<AvatarSize, DotSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'lg',\n}\n\n// ── Role ring ───────────────────────────────────────────────────────────────\n\nconst ringColorMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-accent-7',\n  admin: 'ring-warning-7',\n  client: 'ring-info-7',\n}\n\nconst ringShapeMap: Record<string, string> = {\n  circle: 'rounded-pill',\n  square: 'rounded-none',\n  rounded: 'rounded-control',\n}\n\n// ── Fallback font sizes that scale with avatar size ─────────────────────────\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n  xs: 'text-body-xs',\n  sm: 'text-body-xs',\n  md: 'text-body-sm',\n  lg: 'text-body-md',\n  xl: 'text-heading-xs',\n}\n\n// ── Deterministic fallback colors ───────────────────────────────────────────\n\nconst FALLBACK_COLORS = [\n  { bg: 'bg-accent-3', text: 'text-accent-11' },\n  { bg: 'bg-success-3', text: 'text-success-11' },\n  { bg: 'bg-warning-3', text: 'text-warning-11' },\n  { bg: 'bg-error-3', text: 'text-error-11' },\n  { bg: 'bg-info-3', text: 'text-info-11' },\n  { bg: 'bg-category-teal-3', text: 'text-category-teal-11' },\n  { bg: 'bg-category-indigo-3', text: 'text-category-indigo-11' },\n  { bg: 'bg-category-cyan-3', text: 'text-category-cyan-11' },\n] as const\n\n/**\n * Simple string hash that produces a deterministic index into FALLBACK_COLORS.\n * Uses djb2 for a reasonable distribution with short strings.\n */\nfunction getFallbackColor(seed: string): (typeof FALLBACK_COLORS)[number] {\n  let hash = 5381\n  for (let i = 0; i < seed.length; i++) {\n    hash = ((hash << 5) + hash + seed.charCodeAt(i)) | 0\n  }\n  const index = Math.abs(hash) % FALLBACK_COLORS.length\n  return FALLBACK_COLORS[index]\n}\n\n/**\n * Props for Avatar — a user/entity image container with size, shape, and presence-status variants.\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` | `xl` — the status dot scales with the avatar size.\n *\n * **Shapes:** `circle` (default, round) | `square` (sharp corners) | `rounded` (rounded corners, for bots/apps)\n *\n * **Status dot:** `status=\"online\"` (green) | `\"offline\"` (muted) | `\"busy\"` (red) | `\"away\"` (amber).\n * The dot renders with `role=\"img\"` and an accessible `aria-label` — it is not purely decorative.\n *\n * **Role ring:** `ring=\"lead\"` (accent) | `\"admin\"` (warning) | `\"client\"` (info) — a colored ring\n * around the avatar indicating the user's role.\n *\n * **Badge:** `badge={5}` (number) | `badge=\"dot\"` (notification dot) | `badge={<Icon />}` (custom).\n * Numbers > 99 display as \"99+\". Badge is hidden when `0` or `undefined`.\n *\n * **Loading:** `loading={true}` shows a pulse skeleton placeholder.\n *\n * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.\n *\n * @example\n * // User avatar with photo and fallback initials:\n * <Avatar size=\"md\">\n *   <AvatarImage src={user.avatarUrl} alt={user.name} />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Online presence indicator in a team roster:\n * <Avatar size=\"lg\" status=\"online\">\n *   <AvatarImage src={user.photoUrl} alt={user.name} />\n *   <AvatarFallback>{user.initials}</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Square shape for a bot/integration logo:\n * <Avatar shape=\"square\" size=\"xl\">\n *   <AvatarImage src=\"/logos/github.png\" alt=\"GitHub\" />\n * </Avatar>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AvatarProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>,\n    VariantProps<typeof avatarVariants> {\n  /** Optional status indicator displayed as a dot at the bottom-right corner */\n  status?: AvatarStatus\n  /** Role ring color indicator */\n  ring?: AvatarRing\n  /** Badge overlay: number, 'dot', or custom ReactNode */\n  badge?: number | 'dot' | React.ReactNode\n  /** Show loading skeleton instead of content */\n  loading?: boolean\n  children?: React.ReactNode\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, ring, badge, loading, children, ...props }, ref) => {\n  const resolvedShape = shape ?? 'circle'\n\n  // Build ring classes for the outer wrapper\n  const ringClasses = ring && ring !== 'none'\n    ? cn('ring-2 ring-offset-2 ring-offset-surface-panel', ringColorMap[ring], ringShapeMap[resolvedShape])\n    : undefined\n\n  // Loading skeleton — early return\n  if (loading) {\n    return (\n      <span ref={ref} className={cn('relative inline-flex shrink-0', ringClasses)}>\n        <Skeleton\n          className={cn(avatarVariants({ size, shape }))}\n          data-slot=\"avatar-skeleton\"\n        />\n      </span>\n    )\n  }\n\n  // Determine whether to render badge\n  const showBadge = badge !== undefined && badge !== 0\n\n  return (\n    <MotionPreference>\n      <AvatarShapeContext.Provider value={resolvedShape}>\n      <AvatarSizeContext.Provider value={size ?? 'md'}>\n      <span className={cn('relative inline-flex shrink-0', ringClasses)}>\n        <AvatarPrimitive.Root\n          ref={ref}\n          className={cn(avatarVariants({ size, shape }), className)}\n          {...props}\n        >\n          {children}\n        </AvatarPrimitive.Root>\n        {status && (\n          <span\n            className=\"absolute bottom-0 right-0\"\n            role=\"img\"\n            aria-label={statusLabelMap[status]}\n          >\n            {/* Shared Dot primitive: colour + contrast ring; wrapper owns position + a11y. */}\n            <Dot color={statusDotColor[status]} size={statusDotSize[size ?? 'md']} withBorder aria-hidden />\n          </span>\n        )}\n        {showBadge && (\n          badge === 'dot' ? (\n            <span\n              className=\"absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill bg-error-9 ring-2 ring-surface-panel\"\n              data-slot=\"avatar-badge-dot\"\n              aria-hidden=\"true\"\n            />\n          ) : typeof badge === 'number' ? (\n            <motion.span\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              transition={springs.smooth}\n              className=\"absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-panel\"\n              data-slot=\"avatar-badge\"\n              role=\"status\"\n              aria-label={`${badge > 99 ? '99+' : badge} notifications`}\n            >\n              {badge > 99 ? '99+' : badge}\n            </motion.span>\n          ) : (\n            <span className=\"absolute -right-1 -top-1\" data-slot=\"avatar-badge-custom\">\n              {badge}\n            </span>\n          )\n        )}\n      </span>\n      </AvatarSizeContext.Provider>\n      </AvatarShapeContext.Provider>\n    </MotionPreference>\n  )\n})\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <MotionPreference>\n    <motion.span\n      initial={{ scale: 0.96 }}\n      animate={{ opacity: 1, scale: 1 }}\n      transition={springs.smooth}\n      className=\"absolute inset-0 h-full w-full\"\n    >\n      <AvatarPrimitive.Image\n        ref={ref}\n        className={cn(\"aspect-square h-full w-full\", className)}\n        {...props}\n      />\n    </motion.span>\n  </MotionPreference>\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  /**\n   * Seed string for deterministic color selection.\n   * Falls back to the text content of `children` if not provided.\n   */\n  colorSeed?: string\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, colorSeed, children, ...props }, ref) => {\n  // Derive seed: explicit colorSeed > children text content > empty string\n  const childrenText = typeof children === 'string' ? children : ''\n  const seed = colorSeed ?? childrenText\n  const color = getFallbackColor(seed)\n\n  // Inherit shape and size from parent Avatar via context\n  const shape = React.useContext(AvatarShapeContext)\n  const size = React.useContext(AvatarSizeContext)\n  const shapeClass = shape === 'square' ? 'rounded-none' : shape === 'rounded' ? 'rounded-control' : 'rounded-pill'\n\n  // Letter-spacing based on character count\n  const tracking = childrenText.length === 1 ? 'tracking-wide' : 'tracking-normal'\n\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex h-full w-full items-center justify-center font-semibold',\n        shapeClass,\n        fallbackTextSizeMap[size],\n        color.bg,\n        color.text,\n        tracking,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarFallback,AvatarImage }\n"],"mappings":"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"}

package/dist/ui/badge-indicator.d.ts

@@ -5,18 +5,14 @@ declare const PLACEMENT_CLASSES: {
     readonly 'bottom-right': "-bottom-1 -right-1";
     readonly 'bottom-left': "-bottom-1 -left-1";
 };
-declare const COLOR_CLASSES: {
-    readonly error: "bg-error-9 text-error-fg";
-    readonly success: "bg-success-9 text-success-fg";
-    readonly warning: "bg-warning-9 text-warning-fg";
-    readonly accent: "bg-accent-9 text-accent-fg";
-    readonly info: "bg-info-9 text-info-fg";
-};
+/** The five palettes this indicator offers. Colour itself is a role. */
+declare const COLOR_NAMES: readonly ["error", "success", "warning", "accent", "info"];
 export interface BadgeIndicatorProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
     count?: number;
     max?: number;
     dot?: boolean;
-    color?: keyof typeof COLOR_CLASSES;
+    /** Palette name. Any registered palette works, not just these five. */
+    color?: (typeof COLOR_NAMES)[number] | (string & {});
     invisible?: boolean;
     showZero?: boolean;
     placement?: keyof typeof PLACEMENT_CLASSES;

package/dist/ui/badge-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge-indicator.d.ts","sourceRoot":"","sources":["../../src/ui/badge-indicator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,iBAAiB;;;;;CAKb,CAAA;AAEV,QAAA,MAAM,aAAa;;;;;;CAMT,CAAA;AAEV,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,OAAO,aAAa,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAA;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,eAAO,MAAM,cAAc,6FA8CzB,CAAA"}
+{"version":3,"file":"badge-indicator.d.ts","sourceRoot":"","sources":["../../src/ui/badge-indicator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,iBAAiB;;;;;CAKb,CAAA;AAEV,wEAAwE;AACxE,QAAA,MAAM,WAAW,4DAA6D,CAAA;AAK9E,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,uEAAuE;IACvE,KAAK,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAA;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,eAAO,MAAM,cAAc,6FA+CzB,CAAA"}

package/dist/ui/badge-indicator.js

@@ -10,13 +10,7 @@ var c = {
 	"top-left": "-top-1 -left-1",
 	"bottom-right": "-bottom-1 -right-1",
 	"bottom-left": "-bottom-1 -left-1"
-}, l = {
-	error: "bg-error-9 text-error-fg",
-	success: "bg-success-9 text-success-fg",
-	warning: "bg-warning-9 text-warning-fg",
-	accent: "bg-accent-9 text-accent-fg",
-	info: "bg-info-9 text-info-fg"
-}, u = n.forwardRef(function({ count: n, max: u = 99, dot: d = !1, color: f = "error", invisible: p = !1, showZero: m = !1, placement: h = "top-right", className: g, children: _, ...v }, y) {
+}, l = "bg-palette-solid text-palette-fg", u = n.forwardRef(function({ count: n, max: u = 99, dot: d = !1, color: f = "error", invisible: p = !1, showZero: m = !1, placement: h = "top-right", className: g, children: _, ...v }, y) {
 	let b = s(), x = !p && (d || n !== void 0 && (n > 0 || m)), S = n !== void 0 && n > u ? `${u}+` : n;
 	return /* @__PURE__ */ i("span", {
 		ref: y,
@@ -36,7 +30,8 @@ var c = {
 				opacity: 0
 			},
 			transition: e.smooth,
-			className: t("absolute flex items-center justify-center rounded-pill font-sans font-semibold ring-2 ring-surface-panel", l[f], c[h], d ? "h-2.5 w-2.5" : "min-w-[18px] h-[18px] px-1 text-[11px] leading-none"),
+			"data-palette": f,
+			className: t("absolute flex items-center justify-center rounded-pill font-sans font-semibold ring-2 ring-surface-panel", l, c[h], d ? "h-2.5 w-2.5" : "min-w-[18px] h-[18px] px-1 text-[11px] leading-none"),
 			children: !d && S
 		}, "indicator") })]
 	});

package/dist/ui/badge-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-indicator.js","names":[],"sources":["../../src/ui/badge-indicator.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst PLACEMENT_CLASSES = {\n  'top-right': '-top-1 -right-1',\n  'top-left': '-top-1 -left-1',\n  'bottom-right': '-bottom-1 -right-1',\n  'bottom-left': '-bottom-1 -left-1',\n} as const\n\nconst COLOR_CLASSES = {\n  error: 'bg-error-9 text-error-fg',\n  success: 'bg-success-9 text-success-fg',\n  warning: 'bg-warning-9 text-warning-fg',\n  accent: 'bg-accent-9 text-accent-fg',\n  info: 'bg-info-9 text-info-fg',\n} as const\n\nexport interface BadgeIndicatorProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n  count?: number\n  max?: number\n  dot?: boolean\n  color?: keyof typeof COLOR_CLASSES\n  invisible?: boolean\n  showZero?: boolean\n  placement?: keyof typeof PLACEMENT_CLASSES\n  children: React.ReactNode\n}\n\nexport const BadgeIndicator = React.forwardRef<HTMLSpanElement, BadgeIndicatorProps>(\n  function BadgeIndicator(\n    {\n      count,\n      max = 99,\n      dot = false,\n      color = 'error',\n      invisible = false,\n      showZero = false,\n      placement = 'top-right',\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const prefersReduced = useReducedMotion()\n    const show = !invisible && (dot || (count !== undefined && (count > 0 || showZero)))\n    const displayCount = count !== undefined && count > max ? `${max}+` : count\n\n    return (\n      <span ref={ref} className={cn('relative inline-flex', className)} {...rest}>\n        {children}\n      <AnimatePresence>\n        {show && (\n          <motion.span\n            key=\"indicator\"\n            initial={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            animate={prefersReduced ? { opacity: 1 } : { scale: 1, opacity: 1 }}\n            exit={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            transition={springs.smooth}\n            className={cn(\n              'absolute flex items-center justify-center rounded-pill font-sans font-semibold ring-2 ring-surface-panel',\n              COLOR_CLASSES[color],\n              PLACEMENT_CLASSES[placement],\n              dot\n                ? 'h-2.5 w-2.5'\n                : 'min-w-[18px] h-[18px] px-1 text-[11px] leading-none',\n            )}\n          >\n            {!dot && displayCount}\n          </motion.span>\n        )}\n      </AnimatePresence>\n    </span>\n  )\n})\n\nBadgeIndicator.displayName = 'BadgeIndicator'\n"],"mappings":";;;;;;;AAQA,IAAM,IAAoB;CACxB,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,eAAe;AACjB,GAEM,IAAgB;CACpB,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACR,GAaa,IAAiB,EAAM,WAClC,SACE,EACE,UACA,SAAM,IACN,SAAM,IACN,WAAQ,SACR,eAAY,IACZ,cAAW,IACX,eAAY,aACZ,cACA,aACA,GAAG,KAEL,GACA;CACA,IAAM,IAAiB,EAAiB,GAClC,IAAO,CAAC,MAAc,KAAQ,MAAU,KAAA,MAAc,IAAQ,KAAK,KACnE,IAAe,MAAU,KAAA,KAAa,IAAQ,IAAM,GAAG,EAAI,KAAK;CAEtE,OACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAG,wBAAwB,CAAS;EAAG,GAAI;YAAtE,CACG,GACH,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,MAAR;GAEE,SAAS,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAClE,SAAS,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAClE,MAAM,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAC/D,YAAY,EAAQ;GACpB,WAAW,EACT,4GACA,EAAc,IACd,EAAkB,IAClB,IACI,gBACA,qDACN;aAEC,CAAC,KAAO;EACE,GAfP,WAeO,EAEA,CAAA,CACb;;AAEV,CAAC;AAED,EAAe,cAAc"}
+{"version":3,"file":"badge-indicator.js","names":[],"sources":["../../src/ui/badge-indicator.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst PLACEMENT_CLASSES = {\n  'top-right': '-top-1 -right-1',\n  'top-left': '-top-1 -left-1',\n  'bottom-right': '-bottom-1 -right-1',\n  'bottom-left': '-bottom-1 -left-1',\n} as const\n\n/** The five palettes this indicator offers. Colour itself is a role. */\nconst COLOR_NAMES = ['error', 'success', 'warning', 'accent', 'info'] as const\n\n/** One line for every palette — the hue comes from `data-palette`. */\nconst COLOR_CLASSES = 'bg-palette-solid text-palette-fg'\n\nexport interface BadgeIndicatorProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n  count?: number\n  max?: number\n  dot?: boolean\n  /** Palette name. Any registered palette works, not just these five. */\n  color?: (typeof COLOR_NAMES)[number] | (string & {})\n  invisible?: boolean\n  showZero?: boolean\n  placement?: keyof typeof PLACEMENT_CLASSES\n  children: React.ReactNode\n}\n\nexport const BadgeIndicator = React.forwardRef<HTMLSpanElement, BadgeIndicatorProps>(\n  function BadgeIndicator(\n    {\n      count,\n      max = 99,\n      dot = false,\n      color = 'error',\n      invisible = false,\n      showZero = false,\n      placement = 'top-right',\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const prefersReduced = useReducedMotion()\n    const show = !invisible && (dot || (count !== undefined && (count > 0 || showZero)))\n    const displayCount = count !== undefined && count > max ? `${max}+` : count\n\n    return (\n      <span ref={ref} className={cn('relative inline-flex', className)} {...rest}>\n        {children}\n      <AnimatePresence>\n        {show && (\n          <motion.span\n            key=\"indicator\"\n            initial={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            animate={prefersReduced ? { opacity: 1 } : { scale: 1, opacity: 1 }}\n            exit={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            transition={springs.smooth}\n            data-palette={color}\n            className={cn(\n              'absolute flex items-center justify-center rounded-pill font-sans font-semibold ring-2 ring-surface-panel',\n              COLOR_CLASSES,\n              PLACEMENT_CLASSES[placement],\n              dot\n                ? 'h-2.5 w-2.5'\n                : 'min-w-[18px] h-[18px] px-1 text-[11px] leading-none',\n            )}\n          >\n            {!dot && displayCount}\n          </motion.span>\n        )}\n      </AnimatePresence>\n    </span>\n  )\n})\n\nBadgeIndicator.displayName = 'BadgeIndicator'\n"],"mappings":";;;;;;;AAQA,IAAM,IAAoB;CACxB,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,eAAe;AACjB,GAMM,IAAgB,oCAcT,IAAiB,EAAM,WAClC,SACE,EACE,UACA,SAAM,IACN,SAAM,IACN,WAAQ,SACR,eAAY,IACZ,cAAW,IACX,eAAY,aACZ,cACA,aACA,GAAG,KAEL,GACA;CACA,IAAM,IAAiB,EAAiB,GAClC,IAAO,CAAC,MAAc,KAAQ,MAAU,KAAA,MAAc,IAAQ,KAAK,KACnE,IAAe,MAAU,KAAA,KAAa,IAAQ,IAAM,GAAG,EAAI,KAAK;CAEtE,OACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAG,wBAAwB,CAAS;EAAG,GAAI;YAAtE,CACG,GACH,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,MAAR;GAEE,SAAS,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAClE,SAAS,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAClE,MAAM,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAC/D,YAAY,EAAQ;GACpB,gBAAc;GACd,WAAW,EACT,4GACA,GACA,EAAkB,IAClB,IACI,gBACA,qDACN;aAEC,CAAC,KAAO;EACE,GAhBP,WAgBO,EAEA,CAAA,CACb;;AAEV,CAAC;AAED,EAAe,cAAc"}

package/dist/ui/badge.d.ts

@@ -115,7 +115,14 @@ declare const colorMap: {
         readonly solidFg: "text-category-fg";
     };
 };
-type BadgeColor = keyof typeof colorMap | 'custom';
+/**
+ * A palette name. These fourteen ship with the design system; any palette
+ * registered in CSS (`[data-palette='…']`) works too, which is why the type
+ * stays open. `custom` is the older escape hatch — it drives colour through
+ * inline styles from a `--badge-color` variable and is superseded by
+ * registering a palette, but still works.
+ */
+type BadgeColor = keyof typeof colorMap | 'custom' | (string & {});
 declare const badgeVariants: (props?: ({
     variant?: "outline" | "solid" | "subtle" | "soft" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;

package/dist/ui/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAeJ,CAAA;AAEV,KAAK,UAAU,GAAG,MAAM,OAAO,QAAQ,GAAG,QAAQ,CAAA;AAgBlD,QAAA,MAAM,aAAa;;;8EAsBlB,CAAA;AA0BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AA6LD,QAAA,MAAM,aAAa;;;CAGjB,CAAA;AAEF,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,KAAK,UAAU,EAAC,KAAK,UAAU,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAeJ,CAAA;AAEV;;;;;;GAMG;AACH,KAAK,UAAU,GAAG,MAAM,OAAO,QAAQ,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAqBlE,QAAA,MAAM,aAAa;;;8EAsBlB,CAAA;AA0BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAkMD,QAAA,MAAM,aAAa;;;CAGjB,CAAA;AAEF,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,KAAK,UAAU,EAAC,KAAK,UAAU,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,wEAAwE;IACxE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFA0CX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,QAAA,MAAM,cAAc;;8EAoBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,wEAAwE;IACxE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFA6CX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/banner.js

@@ -1,36 +1,37 @@
 "use client";
 import { motionProps as e, springs as t } from "./lib/motion.js";
-import { cn as n } from "./lib/utils.js";
-import { Icon as r } from "./icon.js";
-import * as i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { IconAlertCircle as s, IconAlertTriangle as c, IconCircleCheck as l, IconInfoCircle as u, IconX as d } from "@tabler/icons-react";
-import { AnimatePresence as f, motion as p } from "framer-motion";
-import { cva as m } from "class-variance-authority";
+import { MotionPreference as n } from "../_chunks/motion-preference.js";
+import { cn as r } from "./lib/utils.js";
+import { Icon as i } from "./icon.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { IconAlertCircle as c, IconAlertTriangle as l, IconCircleCheck as u, IconInfoCircle as d, IconX as f } from "@tabler/icons-react";
+import { AnimatePresence as p, motion as m } from "framer-motion";
+import { cva as h } from "class-variance-authority";
 //#region src/ui/banner.tsx
-var h = m("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-body-md font-medium border-b", {
+var g = h("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-body-md font-medium border-b", {
 	variants: { color: {
-		info: "bg-info-3 border-info-7 text-info-11",
-		success: "bg-success-3 border-success-7 text-success-11",
-		warning: "bg-warning-3 border-warning-7 text-warning-11",
-		error: "bg-error-3 border-error-7 text-error-11",
+		info: "bg-palette-soft border-palette-border text-palette-text",
+		success: "bg-palette-soft border-palette-border text-palette-text",
+		warning: "bg-palette-soft border-palette-border text-palette-text",
+		error: "bg-palette-soft border-palette-border text-palette-text",
 		neutral: "bg-surface-panel border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted"
 	} },
 	defaultVariants: { color: "info" }
-}), g = {
-	info: u,
-	success: l,
-	warning: c,
-	error: s,
-	neutral: u
-}, _ = i.forwardRef(({ className: s, color: c = "info", actions: l, onDismiss: u, children: m, ..._ }, v) => {
-	let y = g[c ?? "info"], [b, x] = i.useState(!0), S = i.useCallback(() => {
-		x(!1);
+}), _ = {
+	info: d,
+	success: u,
+	warning: l,
+	error: c,
+	neutral: d
+}, v = a.forwardRef(({ className: c, color: l = "info", actions: u, onDismiss: d, children: h, ...v }, y) => {
+	let b = _[l ?? "info"], [x, S] = a.useState(!0), C = a.useCallback(() => {
+		S(!1);
 	}, []);
-	return /* @__PURE__ */ a(f, {
-		onExitComplete: u,
-		children: b && /* @__PURE__ */ o(p.div, {
-			ref: v,
+	return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(p, {
+		onExitComplete: d,
+		children: x && /* @__PURE__ */ s(m.div, {
+			ref: y,
 			initial: {
 				height: "auto",
 				opacity: 1
@@ -40,38 +41,39 @@ var h = m("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-body-md
 				opacity: 0
 			},
 			transition: t.snappy,
-			className: n(h({ color: c }), "overflow-hidden", s),
+			"data-palette": l,
+			className: r(g({ color: l }), "overflow-hidden", c),
 			role: "alert",
-			...e(_),
+			...e(v),
 			children: [
-				/* @__PURE__ */ a(r, {
-					icon: y,
+				/* @__PURE__ */ o(i, {
+					icon: b,
 					size: "md",
 					className: "shrink-0"
 				}),
-				/* @__PURE__ */ a("div", {
+				/* @__PURE__ */ o("div", {
 					className: "min-w-0 flex-1",
-					children: m
+					children: h
 				}),
-				l && /* @__PURE__ */ a("div", {
+				u && /* @__PURE__ */ o("div", {
 					className: "flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10",
-					children: l
+					children: u
 				}),
-				u && /* @__PURE__ */ a("button", {
+				d && /* @__PURE__ */ o("button", {
 					type: "button",
-					onClick: S,
+					onClick: C,
 					className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
 					"aria-label": "Dismiss",
 					title: "Dismiss",
-					children: /* @__PURE__ */ a(r, {
-						icon: d,
+					children: /* @__PURE__ */ o(i, {
+						icon: f,
 						size: "sm"
 					})
 				})
 			]
 		})
-	});
+	}) });
 });
-_.displayName = "Banner";
+v.displayName = "Banner";
 //#endregion
-export { _ as Banner, h as bannerVariants };
+export { v as Banner, g as bannerVariants };

package/dist/ui/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","names":[],"sources":["../../src/ui/banner.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst bannerVariants = cva(\n  'flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-body-md font-medium border-b',\n  {\n    variants: {\n      color: {\n        info:\n          'bg-info-3 border-info-7 text-info-11',\n        success:\n          'bg-success-3 border-success-7 text-success-11',\n        warning:\n          'bg-warning-3 border-warning-7 text-warning-11',\n        error:\n          'bg-error-3 border-error-7 text-error-11',\n        neutral:\n          'bg-surface-panel border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n    },\n    defaultVariants: { color: 'info' },\n  },\n)\n\nconst BANNER_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Banner — a full-width notification strip with a colored icon, message, optional\n * action slot, and an optional dismiss button. Renders with `role=\"alert\"`.\n *\n * **Colors:** `info` (default) | `success` | `warning` | `error` | `neutral`\n *\n * **Banner vs Alert:** Banner spans the full width of its container (e.g., top of a page or section).\n * Alert is an inline block inside page content. Use Banner for system-level announcements.\n *\n * **`actions` slot:** Accepts any React node(s) — typically one or more `<Button variant=\"ghost\" size=\"sm\">`.\n * Multiple actions wrap gracefully on narrow viewports.\n * **Dismissible:** Provide `onDismiss` to show an × button.\n *\n * @example\n * // Maintenance warning at top of the dashboard:\n * <Banner color=\"warning\">\n *   Scheduled maintenance on Sunday 2am–4am UTC. Expect brief downtime.\n * </Banner>\n *\n * @example\n * // Success banner with a CTA action button:\n * <Banner color=\"success\" actions={<Button variant=\"ghost\" size=\"sm\">View report</Button>}>\n *   Your export is ready.\n * </Banner>\n *\n * @example\n * // Dismissible info banner for a new feature announcement:\n * <Banner color=\"info\" onDismiss={() => markAsSeen('feature-x')}>\n *   New: You can now assign tasks directly from the calendar view.\n * </Banner>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface BannerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof bannerVariants> {\n  /** Action slot — accepts any React node(s), typically ghost Buttons. */\n  actions?: React.ReactNode\n  onDismiss?: () => void\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  ({ className, color = 'info', actions, onDismiss, children, ...props }, ref) => {\n    const BannerIcon = BANNER_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    return (\n      <AnimatePresence onExitComplete={onDismiss}>\n        {isVisible && (\n          <motion.div\n            ref={ref}\n            initial={{ height: 'auto', opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={springs.snappy}\n            className={cn(bannerVariants({ color }), 'overflow-hidden', className)}\n            role=\"alert\"\n            {...motionProps(props)}\n          >\n            <Icon icon={BannerIcon} size=\"md\" className=\"shrink-0\" />\n            <div className=\"min-w-0 flex-1\">{children}</div>\n            {actions && (\n              <div className=\"flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10\">{actions}</div>\n            )}\n            {onDismiss && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className=\"shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n                aria-label=\"Dismiss\"\n                title=\"Dismiss\"\n              >\n                <Icon icon={IconX} size=\"sm\" />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    )\n  },\n)\nBanner.displayName = 'Banner'\n\nexport { Banner, bannerVariants }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAiB,EACrB,6FACA;CACE,UAAU,EACR,OAAO;EACL,MACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,SACE;CACJ,EACF;CACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CACF,GAEM,IAAqE;CACzE,MAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,SAAS;AACX,GA0CM,IAAS,EAAM,YAClB,EAAE,cAAW,WAAQ,QAAQ,YAAS,cAAW,aAAU,GAAG,KAAS,MAAQ;CAC9E,IAAM,IAAa,EAAa,KAAS,SACnC,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAI,GAE/C,IAAgB,EAAM,kBAAkB;EAC5C,EAAa,EAAK;CACpB,GAAG,CAAC,CAAC;CAEL,OACE,kBAAC,GAAD;EAAiB,gBAAgB;YAC9B,KACC,kBAAC,EAAO,KAAR;GACO;GACL,SAAS;IAAE,QAAQ;IAAQ,SAAS;GAAE;GACtC,MAAM;IAAE,QAAQ;IAAG,SAAS;GAAE;GAC9B,YAAY,EAAQ;GACpB,WAAW,EAAG,EAAe,EAAE,SAAM,CAAC,GAAG,mBAAmB,CAAS;GACrE,MAAK;GACL,GAAI,EAAY,CAAK;aAPvB;IASE,kBAAC,GAAD;KAAM,MAAM;KAAY,MAAK;KAAK,WAAU;IAAY,CAAA;IACxD,kBAAC,OAAD;KAAK,WAAU;KAAkB;IAAc,CAAA;IAC9C,KACC,kBAAC,OAAD;KAAK,WAAU;eAAwK;IAAa,CAAA;IAErM,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;KACV,cAAW;KACX,OAAM;eAEN,kBAAC,GAAD;MAAM,MAAM;MAAO,MAAK;KAAM,CAAA;IACxB,CAAA;GAEA;;CAEC,CAAA;AAErB,CACF;AACA,EAAO,cAAc"}
+{"version":3,"file":"banner.js","names":[],"sources":["../../src/ui/banner.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst bannerVariants = cva(\n  'flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-body-md font-medium border-b',\n  {\n    variants: {\n      // A banner is a full-bleed strip, so it takes the `soft` fill (step 3)\n      // rather than the fainter `subtle` a Card uses — the two are separate\n      // roles precisely so that difference survives.\n      color: {\n        info: 'bg-palette-soft border-palette-border text-palette-text',\n        success: 'bg-palette-soft border-palette-border text-palette-text',\n        warning: 'bg-palette-soft border-palette-border text-palette-text',\n        error: 'bg-palette-soft border-palette-border text-palette-text',\n        // Neutral is a plain strip, not a grey coloured one: surface ground,\n        // full-contrast label, icon stepped back.\n        neutral:\n          'bg-surface-panel border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n    },\n    defaultVariants: { color: 'info' },\n  },\n)\n\nconst BANNER_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Banner — a full-width notification strip with a colored icon, message, optional\n * action slot, and an optional dismiss button. Renders with `role=\"alert\"`.\n *\n * **Colors:** `info` (default) | `success` | `warning` | `error` | `neutral`\n *\n * **Banner vs Alert:** Banner spans the full width of its container (e.g., top of a page or section).\n * Alert is an inline block inside page content. Use Banner for system-level announcements.\n *\n * **`actions` slot:** Accepts any React node(s) — typically one or more `<Button variant=\"ghost\" size=\"sm\">`.\n * Multiple actions wrap gracefully on narrow viewports.\n * **Dismissible:** Provide `onDismiss` to show an × button.\n *\n * @example\n * // Maintenance warning at top of the dashboard:\n * <Banner color=\"warning\">\n *   Scheduled maintenance on Sunday 2am–4am UTC. Expect brief downtime.\n * </Banner>\n *\n * @example\n * // Success banner with a CTA action button:\n * <Banner color=\"success\" actions={<Button variant=\"ghost\" size=\"sm\">View report</Button>}>\n *   Your export is ready.\n * </Banner>\n *\n * @example\n * // Dismissible info banner for a new feature announcement:\n * <Banner color=\"info\" onDismiss={() => markAsSeen('feature-x')}>\n *   New: You can now assign tasks directly from the calendar view.\n * </Banner>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface BannerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof bannerVariants> {\n  /** Action slot — accepts any React node(s), typically ghost Buttons. */\n  actions?: React.ReactNode\n  onDismiss?: () => void\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  ({ className, color = 'info', actions, onDismiss, children, ...props }, ref) => {\n    const BannerIcon = BANNER_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    return (\n      <MotionPreference>\n        <AnimatePresence onExitComplete={onDismiss}>\n          {isVisible && (\n            <motion.div\n              ref={ref}\n              initial={{ height: 'auto', opacity: 1 }}\n              exit={{ height: 0, opacity: 0 }}\n              transition={springs.snappy}\n              data-palette={color}\n              className={cn(bannerVariants({ color }), 'overflow-hidden', className)}\n              role=\"alert\"\n              {...motionProps(props)}\n            >\n              <Icon icon={BannerIcon} size=\"md\" className=\"shrink-0\" />\n              <div className=\"min-w-0 flex-1\">{children}</div>\n              {actions && (\n                <div className=\"flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10\">{actions}</div>\n              )}\n              {onDismiss && (\n                <button\n                  type=\"button\"\n                  onClick={handleDismiss}\n                  className=\"shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n                  aria-label=\"Dismiss\"\n                  title=\"Dismiss\"\n                >\n                  <Icon icon={IconX} size=\"sm\" />\n                </button>\n              )}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </MotionPreference>\n    )\n  },\n)\nBanner.displayName = 'Banner'\n\nexport { Banner, bannerVariants }\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,IAAiB,EACrB,6FACA;CACE,UAAU,EAIR,OAAO;EACL,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EAGP,SACE;CACJ,EACF;CACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CACF,GAEM,IAAqE;CACzE,MAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,SAAS;AACX,GA0CM,IAAS,EAAM,YAClB,EAAE,cAAW,WAAQ,QAAQ,YAAS,cAAW,aAAU,GAAG,KAAS,MAAQ;CAC9E,IAAM,IAAa,EAAa,KAAS,SACnC,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAI,GAE/C,IAAgB,EAAM,kBAAkB;EAC5C,EAAa,EAAK;CACpB,GAAG,CAAC,CAAC;CAEL,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAiB,gBAAgB;YAC9B,KACC,kBAAC,EAAO,KAAR;GACO;GACL,SAAS;IAAE,QAAQ;IAAQ,SAAS;GAAE;GACtC,MAAM;IAAE,QAAQ;IAAG,SAAS;GAAE;GAC9B,YAAY,EAAQ;GACpB,gBAAc;GACd,WAAW,EAAG,EAAe,EAAE,SAAM,CAAC,GAAG,mBAAmB,CAAS;GACrE,MAAK;GACL,GAAI,EAAY,CAAK;aARvB;IAUE,kBAAC,GAAD;KAAM,MAAM;KAAY,MAAK;KAAK,WAAU;IAAY,CAAA;IACxD,kBAAC,OAAD;KAAK,WAAU;KAAkB;IAAc,CAAA;IAC9C,KACC,kBAAC,OAAD;KAAK,WAAU;eAAwK;IAAa,CAAA;IAErM,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;KACV,cAAW;KACX,OAAM;eAEN,kBAAC,GAAD;MAAM,MAAM;MAAO,MAAK;KAAM,CAAA;IACxB,CAAA;GAEA;;CAEC,CAAA,EACD,CAAA;AAEtB,CACF;AACA,EAAO,cAAc"}

package/dist/ui/button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../src/ui/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAK3C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAEtE,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAGD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,mBAAmB,CAAA;CAC9B;AAGD,QAAA,MAAM,sBAAsB,8CAA2D,CAAA;AAEvF,wBAAgB,cAAc,4BAE7B;AAED,wBAAgB,kBAAkB,kCAEjC;AAID;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,YAAY,GAAG,UAAU,GACrC,KAAK,CAAC,aAAa,GAAG,SAAS,CAsBjC;AAID,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3F,2EAA2E;IAC3E,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,yEAAyE;IACzE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC9B,yEAAyE;IACzE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,wEAAwE;IACxE,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAyBD,QAAA,MAAM,WAAW,yFA6DhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../src/ui/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAK3C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAEtE,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAGD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,mBAAmB,CAAA;CAC9B;AAGD,QAAA,MAAM,sBAAsB,8CAA2D,CAAA;AAEvF,wBAAgB,cAAc,4BAE7B;AAED,wBAAgB,kBAAkB,kCAEjC;AAID;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,YAAY,GAAG,UAAU,GACrC,KAAK,CAAC,aAAa,GAAG,SAAS,CAsBjC;AAID,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3F,2EAA2E;IAC3E,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,yEAAyE;IACzE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC9B,yEAAyE;IACzE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,wEAAwE;IACxE,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AA0BD,QAAA,MAAM,WAAW,yFA8DhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/button-group.js

@@ -43,29 +43,8 @@ function c(e, t) {
 	}
 }
 function l(e, t) {
-	if (e === "solid") {
-		let e = {
-			accent: "bg-accent-11/20",
-			error: "bg-error-11/20",
-			success: "bg-success-11/20",
-			warning: "bg-warning-11/20",
-			info: "bg-info-11/20",
-			neutral: "bg-neutral-8/30"
-		};
-		return e[t ?? "accent"] ?? e.accent;
-	}
-	if (e === "soft") {
-		let e = {
-			accent: "bg-accent-5",
-			error: "bg-error-5",
-			success: "bg-success-5",
-			warning: "bg-warning-5",
-			info: "bg-info-5",
-			neutral: "bg-neutral-4"
-		};
-		return e[t ?? "accent"] ?? e.accent;
-	}
-	return "bg-surface-border";
+	let n = t === "neutral";
+	return e === "solid" ? n ? "bg-neutral-8/30" : "bg-palette-solid-active/20" : e === "soft" ? n ? "bg-neutral-4" : "bg-palette-soft-active" : "bg-surface-border";
 }
 var u = t.forwardRef(({ className: o, variant: s, color: c, weight: u, shape: d, size: f, disabled: p, orientation: m = "horizontal", attached: h = !0, fullWidth: g, children: _, ...v }, y) => {
 	let b = g || m === "vertical", x = t.useMemo(() => ({
@@ -103,6 +82,7 @@ var u = t.forwardRef(({ className: o, variant: s, color: c, weight: u, shape: d,
 				let u = o > 0 && s !== "outline";
 				return /* @__PURE__ */ r(t.Fragment, { children: [u && /* @__PURE__ */ n("div", {
 					"aria-hidden": !0,
+					"data-palette": c ?? void 0,
 					className: e("shrink-0 self-stretch", m === "horizontal" ? "w-px" : "h-px", l(s ?? void 0, c ?? void 0))
 				}), /* @__PURE__ */ n(a.Provider, {
 					value: { position: w(o) },

package/dist/ui/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","names":[],"sources":["../../src/ui/button-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport type { ButtonProps } from './button'\nimport { cn } from './lib/utils'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport type ButtonGroupPosition = 'first' | 'middle' | 'last' | 'only'\n\ninterface ButtonGroupContextValue {\n  variant?: ButtonProps['variant']\n  color?: ButtonProps['color']\n  weight?: ButtonProps['weight']\n  shape?: ButtonProps['shape']\n  size?: ButtonProps['size']\n  disabled?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  attached?: boolean\n  /** Internal: signals Button children to stretch to fill available width */\n  _stretch?: boolean\n}\n\n// Separate context for position (changes per child) vs group settings (same for all)\ninterface ButtonGroupItemContext {\n  position: ButtonGroupPosition\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue>({})\nconst ButtonGroupItemContext = React.createContext<ButtonGroupItemContext | null>(null)\n\nexport function useButtonGroup() {\n  return React.useContext(ButtonGroupContext)\n}\n\nexport function useButtonGroupItem() {\n  return React.useContext(ButtonGroupItemContext)\n}\n\n// ── Radius helper (consumed by Button internally) ───────────────\n\n/**\n * Returns inline style for border-radius AND border-collapse based on position\n * in an attached ButtonGroup. Inner borders are removed (not overlapped) to\n * guarantee consistent 1px borders regardless of wrapper nesting.\n */\nexport function getGroupPositionStyle(\n  position: ButtonGroupPosition,\n  orientation: 'horizontal' | 'vertical',\n): React.CSSProperties | undefined {\n  if (position === 'only') return undefined\n\n  if (orientation === 'horizontal') {\n    switch (position) {\n      case 'first':\n        return { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderRightWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }\n    }\n  } else {\n    switch (position) {\n      case 'first':\n        return { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottomWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderBottomWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderTopRightRadius: 0 }\n    }\n  }\n}\n\n// ── Props ───────────────────────────────────────────────────────\n\nexport interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Shared variant applied to all child Buttons (children can override). */\n  variant?: ButtonProps['variant']\n  /** Shared color applied to all child Buttons (children can override). */\n  color?: ButtonProps['color']\n  /** Shared weight applied to all child Buttons (children can override). */\n  weight?: ButtonProps['weight']\n  /** Shared shape applied to all child Buttons (children can override). */\n  shape?: ButtonProps['shape']\n  /** Shared size applied to all child Buttons (children can override). */\n  size?: ButtonProps['size']\n  /** Disable all child Buttons. */\n  disabled?: boolean\n  /** Layout direction. @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical'\n  /** Whether buttons are visually attached (merged) or spaced apart. @default true */\n  attached?: boolean\n  /** Stretch to full width of parent container. */\n  fullWidth?: boolean\n}\n\n// ── Divider colors (for non-outline variants that lack visible borders) ──\n\nfunction getDividerColor(variant?: string, color?: string): string {\n  if (variant === 'solid') {\n    const map: Record<string, string> = {\n      accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n      warning: 'bg-warning-11/20', info: 'bg-info-11/20', neutral: 'bg-neutral-8/30',\n    }\n    return map[color ?? 'accent'] ?? map.accent\n  }\n  if (variant === 'soft') {\n    const map: Record<string, string> = {\n      accent: 'bg-accent-5', error: 'bg-error-5', success: 'bg-success-5',\n      warning: 'bg-warning-5', info: 'bg-info-5', neutral: 'bg-neutral-4',\n    }\n    return map[color ?? 'accent'] ?? map.accent\n  }\n  // ghost, link, etc.\n  return 'bg-surface-border'\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ className, variant, color, weight, shape, size, disabled, orientation = 'horizontal', attached = true, fullWidth, children, ...props }, ref) => {\n    const shouldStretch = fullWidth || orientation === 'vertical'\n    const groupValue = React.useMemo(\n      () => ({ variant, color, weight, shape, size, disabled, orientation, attached, _stretch: shouldStretch }),\n      [variant, color, weight, shape, size, disabled, orientation, attached, shouldStretch],\n    )\n\n    const validChildren = React.Children.toArray(children).filter(React.isValidElement)\n    const total = validChildren.length\n\n    function getPosition(index: number): ButtonGroupPosition {\n      if (total === 1) return 'only'\n      if (index === 0) return 'first'\n      if (index === total - 1) return 'last'\n      return 'middle'\n    }\n\n    return (\n      <ButtonGroupContext.Provider value={groupValue}>\n        <div\n          ref={ref}\n          role=\"group\"\n          className={cn(\n            'inline-flex',\n            fullWidth && 'w-full',\n            fullWidth && orientation === 'horizontal' && '[&>*]:flex-1',\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col items-stretch',\n            !attached && 'gap-ds-02',\n            // Focus isolation — lift focused/hovered button above siblings\n            '[&>*:focus-within]:z-10 [&>*:hover]:z-10',\n            className,\n          )}\n          {...props}\n        >\n          {attached\n            ? validChildren.map((child, i) => {\n                const needsDivider = i > 0 && variant !== 'outline'\n                return (\n                  <React.Fragment key={i}>\n                    {needsDivider && (\n                      <div\n                        aria-hidden\n                        className={cn(\n                          'shrink-0 self-stretch',\n                          orientation === 'horizontal' ? 'w-px' : 'h-px',\n                          getDividerColor(variant ?? undefined, color ?? undefined),\n                        )}\n                      />\n                    )}\n                    <ButtonGroupItemContext.Provider value={{ position: getPosition(i) }}>\n                      {child}\n                    </ButtonGroupItemContext.Provider>\n                  </React.Fragment>\n                )\n              })\n            : children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  },\n)\nButtonGroup.displayName = 'ButtonGroup'\n\nexport { ButtonGroup }\n"],"mappings":";;;;;AA6BA,IAAM,IAAqB,EAAM,cAAuC,CAAC,CAAC,GACpE,IAAyB,EAAM,cAA6C,IAAI;AAEtF,SAAgB,IAAiB;CAC/B,OAAO,EAAM,WAAW,CAAkB;AAC5C;AAEA,SAAgB,IAAqB;CACnC,OAAO,EAAM,WAAW,CAAsB;AAChD;AASA,SAAgB,EACd,GACA,GACiC;CAC7B,UAAa,QAEjB,IAAI,MAAgB,cAClB,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,sBAAsB;GAAG,yBAAyB;GAAG,kBAAkB;EAAE;EACpF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,kBAAkB;EAAE;EAChD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,wBAAwB;EAAE;CAC/D;MAEA,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,wBAAwB;GAAG,yBAAyB;GAAG,mBAAmB;EAAE;EACvF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,mBAAmB;EAAE;EACjD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,sBAAsB;EAAE;CAC7D;AAEJ;AA2BA,SAAS,EAAgB,GAAkB,GAAwB;CACjE,IAAI,MAAY,SAAS;EACvB,IAAM,IAA8B;GAClC,QAAQ;GAAmB,OAAO;GAAkB,SAAS;GAC7D,SAAS;GAAoB,MAAM;GAAiB,SAAS;EAC/D;EACA,OAAO,EAAI,KAAS,aAAa,EAAI;CACvC;CACA,IAAI,MAAY,QAAQ;EACtB,IAAM,IAA8B;GAClC,QAAQ;GAAe,OAAO;GAAc,SAAS;GACrD,SAAS;GAAgB,MAAM;GAAa,SAAS;EACvD;EACA,OAAO,EAAI,KAAS,aAAa,EAAI;CACvC;CAEA,OAAO;AACT;AAIA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,YAAS,UAAO,WAAQ,UAAO,SAAM,aAAU,iBAAc,cAAc,cAAW,IAAM,cAAW,aAAU,GAAG,KAAS,MAAQ;CACjJ,IAAM,IAAgB,KAAa,MAAgB,YAC7C,IAAa,EAAM,eAChB;EAAE;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU,UAAU;CAAc,IACvG;EAAC;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU;CAAa,CACtF,GAEM,IAAgB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,OAAO,EAAM,cAAc,GAC5E,IAAQ,EAAc;CAE5B,SAAS,EAAY,GAAoC;EAIvD,OAHI,MAAU,IAAU,SACpB,MAAU,IAAU,UACpB,MAAU,IAAQ,IAAU,SACzB;CACT;CAEA,OACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;YAClC,kBAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW,EACT,eACA,KAAa,UACb,KAAa,MAAgB,gBAAgB,gBAC7C,MAAgB,eAAe,aAAa,0BAC5C,CAAC,KAAY,aAEb,4CACA,CACF;GACA,GAAI;aAEH,IACG,EAAc,KAAK,GAAO,MAAM;IAC9B,IAAM,IAAe,IAAI,KAAK,MAAY;IAC1C,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,KACC,kBAAC,OAAD;KACE,eAAA;KACA,WAAW,EACT,yBACA,MAAgB,eAAe,SAAS,QACxC,EAAgB,KAAW,KAAA,GAAW,KAAS,KAAA,CAAS,CAC1D;IACD,CAAA,GAEH,kBAAC,EAAuB,UAAxB;KAAiC,OAAO,EAAE,UAAU,EAAY,CAAC,EAAE;eAChE;IAC8B,CAAA,CACnB,EAAA,GAdK,CAcL;GAEpB,CAAC,IACD;EACD,CAAA;CACsB,CAAA;AAEjC,CACF;AACA,EAAY,cAAc"}
+{"version":3,"file":"button-group.js","names":[],"sources":["../../src/ui/button-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport type { ButtonProps } from './button'\nimport { cn } from './lib/utils'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport type ButtonGroupPosition = 'first' | 'middle' | 'last' | 'only'\n\ninterface ButtonGroupContextValue {\n  variant?: ButtonProps['variant']\n  color?: ButtonProps['color']\n  weight?: ButtonProps['weight']\n  shape?: ButtonProps['shape']\n  size?: ButtonProps['size']\n  disabled?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  attached?: boolean\n  /** Internal: signals Button children to stretch to fill available width */\n  _stretch?: boolean\n}\n\n// Separate context for position (changes per child) vs group settings (same for all)\ninterface ButtonGroupItemContext {\n  position: ButtonGroupPosition\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue>({})\nconst ButtonGroupItemContext = React.createContext<ButtonGroupItemContext | null>(null)\n\nexport function useButtonGroup() {\n  return React.useContext(ButtonGroupContext)\n}\n\nexport function useButtonGroupItem() {\n  return React.useContext(ButtonGroupItemContext)\n}\n\n// ── Radius helper (consumed by Button internally) ───────────────\n\n/**\n * Returns inline style for border-radius AND border-collapse based on position\n * in an attached ButtonGroup. Inner borders are removed (not overlapped) to\n * guarantee consistent 1px borders regardless of wrapper nesting.\n */\nexport function getGroupPositionStyle(\n  position: ButtonGroupPosition,\n  orientation: 'horizontal' | 'vertical',\n): React.CSSProperties | undefined {\n  if (position === 'only') return undefined\n\n  if (orientation === 'horizontal') {\n    switch (position) {\n      case 'first':\n        return { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderRightWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }\n    }\n  } else {\n    switch (position) {\n      case 'first':\n        return { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottomWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderBottomWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderTopRightRadius: 0 }\n    }\n  }\n}\n\n// ── Props ───────────────────────────────────────────────────────\n\nexport interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Shared variant applied to all child Buttons (children can override). */\n  variant?: ButtonProps['variant']\n  /** Shared color applied to all child Buttons (children can override). */\n  color?: ButtonProps['color']\n  /** Shared weight applied to all child Buttons (children can override). */\n  weight?: ButtonProps['weight']\n  /** Shared shape applied to all child Buttons (children can override). */\n  shape?: ButtonProps['shape']\n  /** Shared size applied to all child Buttons (children can override). */\n  size?: ButtonProps['size']\n  /** Disable all child Buttons. */\n  disabled?: boolean\n  /** Layout direction. @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical'\n  /** Whether buttons are visually attached (merged) or spaced apart. @default true */\n  attached?: boolean\n  /** Stretch to full width of parent container. */\n  fullWidth?: boolean\n}\n\n// ── Divider colors (for non-outline variants that lack visible borders) ──\n\n// One line per variant instead of one per variant × colour. The hue comes from\n// `data-palette` on the divider, which mirrors the group's own colour.\n//\n// `neutral` diverges in both cases, and both predate this work: its solid\n// divider is 30% rather than 20% (a flat grey needs more presence than a\n// saturated one to read at 1px), and its soft divider sits one step lighter\n// than the role gives. SplitButton carries the same two, which is a sign the\n// divergence belongs to neutral rather than to either component.\nfunction getDividerColor(variant?: string, color?: string): string {\n  const isNeutral = color === 'neutral'\n  if (variant === 'solid') {\n    return isNeutral ? 'bg-neutral-8/30' : 'bg-palette-solid-active/20'\n  }\n  if (variant === 'soft') {\n    return isNeutral ? 'bg-neutral-4' : 'bg-palette-soft-active'\n  }\n  // ghost, link, etc.\n  return 'bg-surface-border'\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ className, variant, color, weight, shape, size, disabled, orientation = 'horizontal', attached = true, fullWidth, children, ...props }, ref) => {\n    const shouldStretch = fullWidth || orientation === 'vertical'\n    const groupValue = React.useMemo(\n      () => ({ variant, color, weight, shape, size, disabled, orientation, attached, _stretch: shouldStretch }),\n      [variant, color, weight, shape, size, disabled, orientation, attached, shouldStretch],\n    )\n\n    const validChildren = React.Children.toArray(children).filter(React.isValidElement)\n    const total = validChildren.length\n\n    function getPosition(index: number): ButtonGroupPosition {\n      if (total === 1) return 'only'\n      if (index === 0) return 'first'\n      if (index === total - 1) return 'last'\n      return 'middle'\n    }\n\n    return (\n      <ButtonGroupContext.Provider value={groupValue}>\n        <div\n          ref={ref}\n          role=\"group\"\n          className={cn(\n            'inline-flex',\n            fullWidth && 'w-full',\n            fullWidth && orientation === 'horizontal' && '[&>*]:flex-1',\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col items-stretch',\n            !attached && 'gap-ds-02',\n            // Focus isolation — lift focused/hovered button above siblings\n            '[&>*:focus-within]:z-10 [&>*:hover]:z-10',\n            className,\n          )}\n          {...props}\n        >\n          {attached\n            ? validChildren.map((child, i) => {\n                const needsDivider = i > 0 && variant !== 'outline'\n                return (\n                  <React.Fragment key={i}>\n                    {needsDivider && (\n                      <div\n                        aria-hidden\n                        data-palette={color ?? undefined}\n                        className={cn(\n                          'shrink-0 self-stretch',\n                          orientation === 'horizontal' ? 'w-px' : 'h-px',\n                          getDividerColor(variant ?? undefined, color ?? undefined),\n                        )}\n                      />\n                    )}\n                    <ButtonGroupItemContext.Provider value={{ position: getPosition(i) }}>\n                      {child}\n                    </ButtonGroupItemContext.Provider>\n                  </React.Fragment>\n                )\n              })\n            : children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  },\n)\nButtonGroup.displayName = 'ButtonGroup'\n\nexport { ButtonGroup }\n"],"mappings":";;;;;AA6BA,IAAM,IAAqB,EAAM,cAAuC,CAAC,CAAC,GACpE,IAAyB,EAAM,cAA6C,IAAI;AAEtF,SAAgB,IAAiB;CAC/B,OAAO,EAAM,WAAW,CAAkB;AAC5C;AAEA,SAAgB,IAAqB;CACnC,OAAO,EAAM,WAAW,CAAsB;AAChD;AASA,SAAgB,EACd,GACA,GACiC;CAC7B,UAAa,QAEjB,IAAI,MAAgB,cAClB,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,sBAAsB;GAAG,yBAAyB;GAAG,kBAAkB;EAAE;EACpF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,kBAAkB;EAAE;EAChD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,wBAAwB;EAAE;CAC/D;MAEA,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,wBAAwB;GAAG,yBAAyB;GAAG,mBAAmB;EAAE;EACvF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,mBAAmB;EAAE;EACjD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,sBAAsB;EAAE;CAC7D;AAEJ;AAmCA,SAAS,EAAgB,GAAkB,GAAwB;CACjE,IAAM,IAAY,MAAU;CAQ5B,OAPI,MAAY,UACP,IAAY,oBAAoB,+BAErC,MAAY,SACP,IAAY,iBAAiB,2BAG/B;AACT;AAIA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,YAAS,UAAO,WAAQ,UAAO,SAAM,aAAU,iBAAc,cAAc,cAAW,IAAM,cAAW,aAAU,GAAG,KAAS,MAAQ;CACjJ,IAAM,IAAgB,KAAa,MAAgB,YAC7C,IAAa,EAAM,eAChB;EAAE;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU,UAAU;CAAc,IACvG;EAAC;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU;CAAa,CACtF,GAEM,IAAgB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,OAAO,EAAM,cAAc,GAC5E,IAAQ,EAAc;CAE5B,SAAS,EAAY,GAAoC;EAIvD,OAHI,MAAU,IAAU,SACpB,MAAU,IAAU,UACpB,MAAU,IAAQ,IAAU,SACzB;CACT;CAEA,OACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;YAClC,kBAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW,EACT,eACA,KAAa,UACb,KAAa,MAAgB,gBAAgB,gBAC7C,MAAgB,eAAe,aAAa,0BAC5C,CAAC,KAAY,aAEb,4CACA,CACF;GACA,GAAI;aAEH,IACG,EAAc,KAAK,GAAO,MAAM;IAC9B,IAAM,IAAe,IAAI,KAAK,MAAY;IAC1C,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,KACC,kBAAC,OAAD;KACE,eAAA;KACA,gBAAc,KAAS,KAAA;KACvB,WAAW,EACT,yBACA,MAAgB,eAAe,SAAS,QACxC,EAAgB,KAAW,KAAA,GAAW,KAAS,KAAA,CAAS,CAC1D;IACD,CAAA,GAEH,kBAAC,EAAuB,UAAxB;KAAiC,OAAO,EAAE,UAAU,EAAY,CAAC,EAAE;eAChE;IAC8B,CAAA,CACnB,EAAA,GAfK,CAeL;GAEpB,CAAC,IACD;EACD,CAAA;CACsB,CAAA;AAEjC,CACF;AACA,EAAY,cAAc"}

package/dist/ui/button.d.ts

@@ -59,7 +59,16 @@ export declare const buttonVariants: (props?: ({
  *   Edit
  * </Button>
  */
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, Omit<VariantProps<typeof buttonVariants>, 'color'> {
+    /**
+     * Palette name. The six built-ins keep their exact previous appearance; any
+     * other palette registered in CSS (`[data-palette='…']`) now works too, which
+     * it could not before.
+     *
+     * Widened from a closed union to `union | (string & {})`, so every existing
+     * value still type-checks — a widening, not a narrowing.
+     */
+    color?: NonNullable<VariantProps<typeof buttonVariants>['color']> | (string & {});
     asChild?: boolean;
     /** Button shape — 'pill' applies rounded-pill for chip/tag-like buttons */
     shape?: 'default' | 'pill';

package/dist/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,eAAO,MAAM,cAAc;;;;;8EAuF1B,CAAA;AAoDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,sEAAsE;IACtE,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxE,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEvD,2EAA2E;IAC3E,eAAe,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;IAEjF,+FAA+F;IAC/F,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,QAAA,MAAM,MAAM,uFAgSX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,eAAO,MAAM,cAAc;;;;;8EAiF1B,CAAA;AAoDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAClE,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,OAAO,CAAC;IACpD;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IACjF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,sEAAsE;IACtE,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxE,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEvD,2EAA2E;IAC3E,eAAe,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;IAEjF,+FAA+F;IAC/F,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,QAAA,MAAM,MAAM,uFAySX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}