@devalok/shilp-sutra 0.39.0 → 0.40.1

package/dist/_chunks/badge-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-group.js","names":[],"sources":["../../src/ui/badge.tsx","../../src/ui/badge-group.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { durations,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Color map — single source of truth for all badge color × variant combos ──\nconst colorMap = {\n  default: { bg: 'bg-surface-raised-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  accent:  { bg: 'bg-accent-3',  fg: 'text-accent-11',  border: 'border-accent-7',  solid: 'bg-accent-9',  solidFg: 'text-accent-fg' },\n  error:   { bg: 'bg-error-3',   fg: 'text-error-11',   border: 'border-error-7',   solid: 'bg-error-9',   solidFg: 'text-error-fg' },\n  success: { bg: 'bg-success-3', fg: 'text-success-11', border: 'border-success-7', solid: 'bg-success-9', solidFg: 'text-success-fg' },\n  warning: { bg: 'bg-warning-3', fg: 'text-warning-11', border: 'border-warning-7', solid: 'bg-warning-9', solidFg: 'text-warning-fg' },\n  info:    { bg: 'bg-info-3',    fg: 'text-info-11',    border: 'border-info-7',    solid: 'bg-info-9',    solidFg: 'text-info-fg' },\n  neutral: { bg: 'bg-surface-raised-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  teal:    { bg: 'bg-category-teal-3',    fg: 'text-category-teal-11',    border: 'border-category-teal-7',    solid: 'bg-category-teal-9',    solidFg: 'text-white' },\n  amber:   { bg: 'bg-category-amber-3',   fg: 'text-category-amber-11',   border: 'border-category-amber-7',   solid: 'bg-category-amber-9',   solidFg: 'text-white' },\n  slate:   { bg: 'bg-category-slate-3',   fg: 'text-category-slate-11',   border: 'border-category-slate-7',   solid: 'bg-category-slate-9',   solidFg: 'text-white' },\n  indigo:  { bg: 'bg-category-indigo-3',  fg: 'text-category-indigo-11',  border: 'border-category-indigo-7',  solid: 'bg-category-indigo-9',  solidFg: 'text-white' },\n  cyan:    { bg: 'bg-category-cyan-3',    fg: 'text-category-cyan-11',    border: 'border-category-cyan-7',    solid: 'bg-category-cyan-9',    solidFg: 'text-white' },\n  orange:  { bg: 'bg-category-orange-3',  fg: 'text-category-orange-11',  border: 'border-category-orange-7',  solid: 'bg-category-orange-9',  solidFg: 'text-white' },\n  emerald: { bg: 'bg-category-emerald-3', fg: 'text-category-emerald-11', border: 'border-category-emerald-7', solid: 'bg-category-emerald-9', solidFg: 'text-white' },\n} as const\n\ntype BadgeColor = keyof typeof colorMap | 'custom'\n\n/** Derive color classes for a given variant + color pair */\nfunction getColorClasses(variant: 'subtle' | 'solid' | 'outline' | 'soft', color: BadgeColor): string {\n  if (color === 'custom') return ''\n  const c = colorMap[color]\n  switch (variant) {\n    case 'subtle':  return cn(c.bg, c.fg, c.border)\n    case 'solid':   return cn(c.solid, c.solidFg, 'border-transparent')\n    case 'outline': return cn('bg-transparent', c.fg, c.border)\n    case 'soft':    return cn(c.bg, c.fg, 'border-transparent')\n  }\n}\n\nconst badgeVariants = cva(\n  'relative inline-flex items-center rounded-pill font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n  {\n    variants: {\n      variant: {\n        subtle: 'border',\n        solid: 'border border-transparent',\n        outline: 'border',\n        soft: 'border border-transparent',\n      },\n      size: {\n        xs: 'h-4 px-ds-02b text-ds-xs gap-ds-02',\n        sm: 'h-5 px-ds-03 text-ds-xs gap-ds-02',\n        md: 'h-6 px-2.5 text-ds-xs gap-ds-02b', /* px-2.5=10px — no exact DS token */\n        lg: 'h-7 px-ds-04 text-ds-sm gap-ds-02b',\n      },\n    },\n    defaultVariants: {\n      variant: 'subtle',\n      size: 'md',\n    },\n  },\n)\n\n/** Icon sizing per badge size */\nconst iconSizeMap: Record<string, string> = {\n  xs: '[&>svg]:h-2.5 [&>svg]:w-2.5',\n  sm: '[&>svg]:h-3 [&>svg]:w-3',\n  md: '[&>svg]:h-3 [&>svg]:w-3',\n  lg: '[&>svg]:h-3.5 [&>svg]:w-3.5',\n}\n\n/** Reduced left padding when leading content (icon/dot/selected) is present */\nconst paddingLeftWithIcon: Record<string, string> = {\n  xs: 'pl-ds-02',\n  sm: 'pl-ds-02b',\n  md: 'pl-ds-03',\n  lg: 'pl-2.5', /* 10px — no exact DS token */\n}\n\n/** Reduced right padding when trailing content (dismiss/endIcon) is present */\nconst paddingRightWithTrailing: Record<string, string> = {\n  xs: 'pr-ds-01',\n  sm: 'pr-ds-02',\n  md: 'pr-ds-02',\n  lg: 'pr-ds-02b',\n}\n\n/**\n * Badge — a compact inline label with a two-axis variant system.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"subtle\"` | `\"solid\"` | `\"outline\"` | `\"soft\"`\n * - `color` controls **semantic intent/category**: 16 built-in colors + `\"custom\"` (CSS variable)\n *\n * **Interactive:** Pass `onClick` to make it a button. Pass `selected` for toggle state.\n * **Dismissible:** Pass `onDismiss` to show a dismiss button.\n * **Custom colors:** Set `color=\"custom\"` and CSS variable `--badge-color` on a parent or via `style`.\n * For light custom colors on solid variant, set `--badge-fg-color` to a dark value.\n *\n * @example\n * <Badge color=\"success\">Active</Badge>\n *\n * @example\n * <Badge variant=\"solid\" size=\"sm\" dot>3 new</Badge>\n *\n * @example\n * <Badge color=\"custom\" style={{ '--badge-color': '#8b5cf6' } as React.CSSProperties}>\n *   Custom\n * </Badge>\n */\ninterface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    VariantProps<typeof badgeVariants> {\n  /** Semantic intent or category color. Use `\"custom\"` with `--badge-color` CSS variable. */\n  color?: BadgeColor\n  asChild?: boolean\n  startIcon?: React.ReactElement | null\n  endIcon?: React.ReactElement | null\n  dot?: boolean\n  onDismiss?: () => void\n  selected?: boolean\n  disabled?: boolean\n  maxWidth?: number\n  /**\n   * Truncate children with ellipsis when they overflow the badge width.\n   * Use with a fixed width (e.g. `className=\"w-20\"`) or `maxWidth` for\n   * constrained pill badges. Always adds a title tooltip on the full text.\n   */\n  truncate?: boolean\n  circle?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLElement, BadgeProps>(\n  (\n    {\n      className,\n      variant,\n      color,\n      size,\n      asChild,\n      startIcon,\n      endIcon,\n      dot,\n      onDismiss,\n      onClick,\n      selected,\n      disabled,\n      maxWidth,\n      truncate,\n      circle,\n      children,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const prefersReducedMotion = useReducedMotion()\n    const resolvedVariant = variant ?? 'subtle'\n    const resolvedColor = color ?? 'default'\n    const resolvedSize = size ?? 'md'\n\n    // When both onClick + onDismiss, use div with role=\"button\" to avoid nested <button>\n    const Comp = asChild\n      ? Slot\n      : onClick && onDismiss\n        ? 'div'\n        : onClick\n          ? 'button'\n          : 'span'\n\n    // Custom color inline styles via CSS variable\n    const customStyles =\n      resolvedColor === 'custom'\n        ? {\n            ...(resolvedVariant === 'subtle' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 15%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 40%, transparent)',\n            }),\n            ...(resolvedVariant === 'solid' && {\n              backgroundColor: 'var(--badge-color)',\n              color: 'var(--badge-fg-color, white)',\n              borderColor: 'transparent',\n            }),\n            ...(resolvedVariant === 'outline' && {\n              backgroundColor: 'transparent',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 50%, transparent)',\n            }),\n            ...(resolvedVariant === 'soft' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 12%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'transparent',\n            }),\n          }\n        : undefined\n\n    // Keyboard handler for div[role=\"button\"] (onClick + onDismiss case)\n    const handleKeyDown =\n      onClick && onDismiss\n        ? (e: React.KeyboardEvent<HTMLElement>) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              if (!disabled) onClick(e as unknown as React.MouseEvent<HTMLElement>)\n            }\n            props.onKeyDown?.(e)\n          }\n        : props.onKeyDown\n\n    const hasLeading = !!(dot || startIcon || (onClick && selected && !startIcon && !dot))\n    const hasTrailing = !!(onDismiss || endIcon)\n\n    return (\n      <Comp\n        ref={ref as React.Ref<never>}\n        className={cn(\n          badgeVariants({ variant: resolvedVariant, size: resolvedSize }),\n          getColorClasses(resolvedVariant, resolvedColor),\n          hasLeading && paddingLeftWithIcon[resolvedSize],\n          hasTrailing && paddingRightWithTrailing[resolvedSize],\n          onClick &&\n            'cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]',\n          selected && 'ring-1 ring-current/20 transition-shadow duration-fast-02',\n          disabled && 'opacity-action-disabled pointer-events-none saturate-[0.3]',\n          circle && 'justify-center px-0 aspect-square',\n          className,\n        )}\n        style={{ ...style, ...customStyles, ...(maxWidth ? { maxWidth } : undefined) }}\n        onClick={disabled ? undefined : (onClick as React.MouseEventHandler<HTMLElement>)}\n        onKeyDown={handleKeyDown}\n        {...(Comp === 'button' && { type: 'button' as const })}\n        {...(Comp === 'button' && disabled ? { disabled: true } : {})}\n        {...(Comp === 'div' && onClick ? { role: 'button' as const, tabIndex: 0 } : {})}\n        {...props}\n      >\n        {/* Dot indicator — animated entrance + continuous pulse */}\n        <AnimatePresence>\n          {dot && (\n            <motion.span\n              key=\"dot\"\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              exit={{ scale: 0 }}\n              transition={springs.snappy}\n              className=\"relative inline-flex h-1.5 w-1.5 shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <motion.span\n                className=\"absolute inset-0 rounded-pill bg-current\"\n                animate={prefersReducedMotion ? undefined : { scale: [1, 2.5], opacity: [0.35, 0] }}\n                transition={prefersReducedMotion ? { duration: 0 } : { repeat: Infinity, repeatDelay: 0.3, duration: 1.2, ease: [0, 0, 0.58, 1] }}\n              />\n              <span className=\"relative h-1.5 w-1.5 rounded-pill bg-current\" />\n            </motion.span>\n          )}\n        </AnimatePresence>\n\n        {/* Selected check icon — always mounted for interactive badges */}\n        {onClick && !startIcon && !dot && (\n          <motion.span\n            initial={false}\n            animate={selected\n              ? { opacity: 1, scale: 1, width: 'auto', marginRight: 0 }\n              : { opacity: 0, scale: 0.5, width: 0, marginRight: -4 }\n            }\n            transition={{ type: 'tween', duration: durations.moderate01, ease: [0.2, 0, 0.38, 0.9] }}  /* ease-productive-standard */\n            className=\"inline-flex shrink-0 overflow-hidden\"\n            aria-hidden={!selected}\n          >\n            <Icon icon={IconCheck} size=\"xs\" />\n          </motion.span>\n        )}\n\n        {/* Start icon */}\n        {startIcon && (\n          <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{startIcon}</span>\n        )}\n\n        {/* Children — with optional truncation */}\n        {truncate || maxWidth ? (\n          <span\n            className=\"truncate\"\n            title={typeof children === 'string' ? children : undefined}\n          >\n            {children}\n          </span>\n        ) : (\n          children\n        )}\n\n        {/* End icon */}\n        {endIcon && (\n          <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{endIcon}</span>\n        )}\n\n        {/* Dismiss button */}\n        {onDismiss && (\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              onDismiss()\n            }}\n            className={cn(\n              'shrink-0 rounded-pill text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9',\n              resolvedSize === 'xs'\n                ? 'p-0 -mr-0.5 min-w-[16px] min-h-[16px]'\n                : 'p-px',\n            )}\n            aria-label={\n              `Remove ${typeof children === 'string' ? children : ''}`.trim() || 'Remove'\n            }\n          >\n            <Icon icon={IconX} size=\"xs\" />\n          </button>\n        )}\n      </Comp>\n    )\n  },\n)\nBadge.displayName = 'Badge'\n\nimport { BadgeGroup } from './badge-group'\nimport { BadgeIndicator } from './badge-indicator'\n\nconst BadgeCompound = Object.assign(Badge, {\n  Indicator: BadgeIndicator,\n  Group: BadgeGroup,\n})\n\nexport { BadgeCompound as Badge, type BadgeColor,type BadgeProps, badgeVariants }\n","'use client'\n\nimport * as React from 'react'\n\nimport { Badge, type BadgeProps } from './badge'\nimport { cn } from './lib/utils'\n\nconst GAP_CLASSES = {\n  tight: 'gap-1',\n  default: 'gap-1.5',\n  loose: 'gap-2',\n} as const\n\nexport interface BadgeGroupProps {\n  max?: number\n  gap?: keyof typeof GAP_CLASSES\n  size?: BadgeProps['size']\n  onOverflowClick?: () => void\n  className?: string\n  children: React.ReactNode\n}\n\nexport function BadgeGroup({\n  max,\n  gap = 'default',\n  size,\n  onOverflowClick,\n  className,\n  children,\n}: BadgeGroupProps) {\n  const childArray = React.Children.toArray(children)\n  const total = childArray.length\n  const hasOverflow = max !== undefined && total > max\n  const visible = hasOverflow ? childArray.slice(0, max) : childArray\n  const overflowCount = hasOverflow ? total - max! : 0\n\n  return (\n    <div className={cn('flex flex-wrap items-center', GAP_CLASSES[gap], className)}>\n      {visible}\n      {hasOverflow && (\n        <Badge\n          variant=\"outline\"\n          color=\"neutral\"\n          size={size ?? 'sm'}\n          onClick={onOverflowClick}\n        >\n          +{overflowCount}\n        </Badge>\n      )}\n    </div>\n  )\n}\n\nBadgeGroup.displayName = 'BadgeGroup'\n"],"mappings":"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"}
+{"version":3,"file":"badge-group.js","names":[],"sources":["../../src/ui/badge.tsx","../../src/ui/badge-group.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport type { IconInput } from './lib/icon-input'\nimport { durations,springs } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n// ── Color map — single source of truth for all badge color × variant combos ──\nconst colorMap = {\n  default: { bg: 'bg-surface-raised-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  accent:  { bg: 'bg-accent-3',  fg: 'text-accent-11',  border: 'border-accent-7',  solid: 'bg-accent-9',  solidFg: 'text-accent-fg' },\n  error:   { bg: 'bg-error-3',   fg: 'text-error-11',   border: 'border-error-7',   solid: 'bg-error-9',   solidFg: 'text-error-fg' },\n  success: { bg: 'bg-success-3', fg: 'text-success-11', border: 'border-success-7', solid: 'bg-success-9', solidFg: 'text-success-fg' },\n  warning: { bg: 'bg-warning-3', fg: 'text-warning-11', border: 'border-warning-7', solid: 'bg-warning-9', solidFg: 'text-warning-fg' },\n  info:    { bg: 'bg-info-3',    fg: 'text-info-11',    border: 'border-info-7',    solid: 'bg-info-9',    solidFg: 'text-info-fg' },\n  neutral: { bg: 'bg-surface-raised-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  teal:    { bg: 'bg-category-teal-3',    fg: 'text-category-teal-11',    border: 'border-category-teal-7',    solid: 'bg-category-teal-9',    solidFg: 'text-white' },\n  amber:   { bg: 'bg-category-amber-3',   fg: 'text-category-amber-11',   border: 'border-category-amber-7',   solid: 'bg-category-amber-9',   solidFg: 'text-white' },\n  slate:   { bg: 'bg-category-slate-3',   fg: 'text-category-slate-11',   border: 'border-category-slate-7',   solid: 'bg-category-slate-9',   solidFg: 'text-white' },\n  indigo:  { bg: 'bg-category-indigo-3',  fg: 'text-category-indigo-11',  border: 'border-category-indigo-7',  solid: 'bg-category-indigo-9',  solidFg: 'text-white' },\n  cyan:    { bg: 'bg-category-cyan-3',    fg: 'text-category-cyan-11',    border: 'border-category-cyan-7',    solid: 'bg-category-cyan-9',    solidFg: 'text-white' },\n  orange:  { bg: 'bg-category-orange-3',  fg: 'text-category-orange-11',  border: 'border-category-orange-7',  solid: 'bg-category-orange-9',  solidFg: 'text-white' },\n  emerald: { bg: 'bg-category-emerald-3', fg: 'text-category-emerald-11', border: 'border-category-emerald-7', solid: 'bg-category-emerald-9', solidFg: 'text-white' },\n} as const\n\ntype BadgeColor = keyof typeof colorMap | 'custom'\n\n/** Derive color classes for a given variant + color pair */\nfunction getColorClasses(variant: 'subtle' | 'solid' | 'outline' | 'soft', color: BadgeColor): string {\n  if (color === 'custom') return ''\n  const c = colorMap[color]\n  switch (variant) {\n    case 'subtle':  return cn(c.bg, c.fg, c.border)\n    case 'solid':   return cn(c.solid, c.solidFg, 'border-transparent')\n    case 'outline': return cn('bg-transparent', c.fg, c.border)\n    case 'soft':    return cn(c.bg, c.fg, 'border-transparent')\n  }\n}\n\nconst badgeVariants = cva(\n  'relative inline-flex items-center rounded-pill font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n  {\n    variants: {\n      variant: {\n        subtle: 'border',\n        solid: 'border border-transparent',\n        outline: 'border',\n        soft: 'border border-transparent',\n      },\n      size: {\n        xs: 'h-4 px-ds-02b text-ds-xs gap-ds-02',\n        sm: 'h-5 px-ds-03 text-ds-xs gap-ds-02',\n        md: 'h-6 px-2.5 text-ds-xs gap-ds-02b', /* px-2.5=10px — no exact DS token */\n        lg: 'h-7 px-ds-04 text-ds-sm gap-ds-02b',\n      },\n    },\n    defaultVariants: {\n      variant: 'subtle',\n      size: 'md',\n    },\n  },\n)\n\n/** Icon sizing per badge size */\nconst iconSizeMap: Record<string, string> = {\n  xs: '[&>svg]:h-2.5 [&>svg]:w-2.5',\n  sm: '[&>svg]:h-3 [&>svg]:w-3',\n  md: '[&>svg]:h-3 [&>svg]:w-3',\n  lg: '[&>svg]:h-3.5 [&>svg]:w-3.5',\n}\n\n/** Reduced left padding when leading content (icon/dot/selected) is present */\nconst paddingLeftWithIcon: Record<string, string> = {\n  xs: 'pl-ds-02',\n  sm: 'pl-ds-02b',\n  md: 'pl-ds-03',\n  lg: 'pl-2.5', /* 10px — no exact DS token */\n}\n\n/** Reduced right padding when trailing content (dismiss/endIcon) is present */\nconst paddingRightWithTrailing: Record<string, string> = {\n  xs: 'pr-ds-01',\n  sm: 'pr-ds-02',\n  md: 'pr-ds-02',\n  lg: 'pr-ds-02b',\n}\n\n/**\n * Badge — a compact inline label with a two-axis variant system.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"subtle\"` | `\"solid\"` | `\"outline\"` | `\"soft\"`\n * - `color` controls **semantic intent/category**: 16 built-in colors + `\"custom\"` (CSS variable)\n *\n * **Interactive:** Pass `onClick` to make it a button. Pass `selected` for toggle state.\n * **Dismissible:** Pass `onDismiss` to show a dismiss button.\n * **Custom colors:** Set `color=\"custom\"` and CSS variable `--badge-color` on a parent or via `style`.\n * For light custom colors on solid variant, set `--badge-fg-color` to a dark value.\n *\n * @example\n * <Badge color=\"success\">Active</Badge>\n *\n * @example\n * <Badge variant=\"solid\" size=\"sm\" dot>3 new</Badge>\n *\n * @example\n * <Badge color=\"custom\" style={{ '--badge-color': '#8b5cf6' } as React.CSSProperties}>\n *   Custom\n * </Badge>\n */\ninterface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    VariantProps<typeof badgeVariants> {\n  /** Semantic intent or category color. Use `\"custom\"` with `--badge-color` CSS variable. */\n  color?: BadgeColor\n  asChild?: boolean\n  startIcon?: IconInput\n  endIcon?: IconInput\n  dot?: boolean\n  onDismiss?: () => void\n  selected?: boolean\n  disabled?: boolean\n  maxWidth?: number\n  /**\n   * Truncate children with ellipsis when they overflow the badge width.\n   * Use with a fixed width (e.g. `className=\"w-20\"`) or `maxWidth` for\n   * constrained pill badges. Always adds a title tooltip on the full text.\n   */\n  truncate?: boolean\n  circle?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLElement, BadgeProps>(\n  (\n    {\n      className,\n      variant,\n      color,\n      size,\n      asChild,\n      startIcon,\n      endIcon,\n      dot,\n      onDismiss,\n      onClick,\n      selected,\n      disabled,\n      maxWidth,\n      truncate,\n      circle,\n      children,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const prefersReducedMotion = useReducedMotion()\n    const resolvedVariant = variant ?? 'subtle'\n    const resolvedColor = color ?? 'default'\n    const resolvedSize = size ?? 'md'\n\n    // When both onClick + onDismiss, use div with role=\"button\" to avoid nested <button>\n    const Comp = asChild\n      ? Slot\n      : onClick && onDismiss\n        ? 'div'\n        : onClick\n          ? 'button'\n          : 'span'\n\n    // Custom color inline styles via CSS variable\n    const customStyles =\n      resolvedColor === 'custom'\n        ? {\n            ...(resolvedVariant === 'subtle' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 15%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 40%, transparent)',\n            }),\n            ...(resolvedVariant === 'solid' && {\n              backgroundColor: 'var(--badge-color)',\n              color: 'var(--badge-fg-color, white)',\n              borderColor: 'transparent',\n            }),\n            ...(resolvedVariant === 'outline' && {\n              backgroundColor: 'transparent',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 50%, transparent)',\n            }),\n            ...(resolvedVariant === 'soft' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 12%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'transparent',\n            }),\n          }\n        : undefined\n\n    // Keyboard handler for div[role=\"button\"] (onClick + onDismiss case)\n    const handleKeyDown =\n      onClick && onDismiss\n        ? (e: React.KeyboardEvent<HTMLElement>) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              if (!disabled) onClick(e as unknown as React.MouseEvent<HTMLElement>)\n            }\n            props.onKeyDown?.(e)\n          }\n        : props.onKeyDown\n\n    const hasLeading = !!(dot || startIcon || (onClick && selected && !startIcon && !dot))\n    const hasTrailing = !!(onDismiss || endIcon)\n\n    return (\n      <Comp\n        ref={ref as React.Ref<never>}\n        className={cn(\n          badgeVariants({ variant: resolvedVariant, size: resolvedSize }),\n          getColorClasses(resolvedVariant, resolvedColor),\n          hasLeading && paddingLeftWithIcon[resolvedSize],\n          hasTrailing && paddingRightWithTrailing[resolvedSize],\n          onClick &&\n            'cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]',\n          selected && 'ring-1 ring-current/20 transition-shadow duration-fast-02',\n          disabled && 'opacity-action-disabled pointer-events-none saturate-[0.3]',\n          circle && 'justify-center px-0 aspect-square',\n          className,\n        )}\n        style={{ ...style, ...customStyles, ...(maxWidth ? { maxWidth } : undefined) }}\n        onClick={disabled ? undefined : (onClick as React.MouseEventHandler<HTMLElement>)}\n        onKeyDown={handleKeyDown}\n        {...(Comp === 'button' && { type: 'button' as const })}\n        {...(Comp === 'button' && disabled ? { disabled: true } : {})}\n        {...(Comp === 'div' && onClick ? { role: 'button' as const, tabIndex: 0 } : {})}\n        {...props}\n      >\n        {/* Dot indicator — animated entrance + continuous pulse */}\n        <AnimatePresence>\n          {dot && (\n            <motion.span\n              key=\"dot\"\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              exit={{ scale: 0 }}\n              transition={springs.snappy}\n              className=\"relative inline-flex h-1.5 w-1.5 shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <motion.span\n                className=\"absolute inset-0 rounded-pill bg-current\"\n                animate={prefersReducedMotion ? undefined : { scale: [1, 2.5], opacity: [0.35, 0] }}\n                transition={prefersReducedMotion ? { duration: 0 } : { repeat: Infinity, repeatDelay: 0.3, duration: 1.2, ease: [0, 0, 0.58, 1] }}\n              />\n              <span className=\"relative h-1.5 w-1.5 rounded-pill bg-current\" />\n            </motion.span>\n          )}\n        </AnimatePresence>\n\n        {/* Selected check icon — always mounted for interactive badges */}\n        {onClick && !startIcon && !dot && (\n          <motion.span\n            initial={false}\n            animate={selected\n              ? { opacity: 1, scale: 1, width: 'auto', marginRight: 0 }\n              : { opacity: 0, scale: 0.5, width: 0, marginRight: -4 }\n            }\n            transition={{ type: 'tween', duration: durations.moderate01, ease: [0.2, 0, 0.38, 0.9] }}  /* ease-productive-standard */\n            className=\"inline-flex shrink-0 overflow-hidden\"\n            aria-hidden={!selected}\n          >\n            <Icon icon={IconCheck} size=\"xs\" />\n          </motion.span>\n        )}\n\n        {/* Start icon */}\n        {startIcon && (\n          <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{normalizeIcon(startIcon)}</span>\n        )}\n\n        {/* Children — with optional truncation */}\n        {truncate || maxWidth ? (\n          <span\n            className=\"truncate\"\n            title={typeof children === 'string' ? children : undefined}\n          >\n            {children}\n          </span>\n        ) : (\n          children\n        )}\n\n        {/* End icon */}\n        {endIcon && (\n          <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{normalizeIcon(endIcon)}</span>\n        )}\n\n        {/* Dismiss button */}\n        {onDismiss && (\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              onDismiss()\n            }}\n            className={cn(\n              'shrink-0 rounded-pill text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9',\n              resolvedSize === 'xs'\n                ? 'p-0 -mr-0.5 min-w-[16px] min-h-[16px]'\n                : 'p-px',\n            )}\n            aria-label={\n              `Remove ${typeof children === 'string' ? children : ''}`.trim() || 'Remove'\n            }\n          >\n            <Icon icon={IconX} size=\"xs\" />\n          </button>\n        )}\n      </Comp>\n    )\n  },\n)\nBadge.displayName = 'Badge'\n\nimport { BadgeGroup } from './badge-group'\nimport { BadgeIndicator } from './badge-indicator'\n\nconst BadgeCompound = Object.assign(Badge, {\n  Indicator: BadgeIndicator,\n  Group: BadgeGroup,\n})\n\nexport { BadgeCompound as Badge, type BadgeColor,type BadgeProps, badgeVariants }\n","'use client'\n\nimport * as React from 'react'\n\nimport { Badge, type BadgeProps } from './badge'\nimport { cn } from './lib/utils'\n\nconst GAP_CLASSES = {\n  tight: 'gap-1',\n  default: 'gap-1.5',\n  loose: 'gap-2',\n} as const\n\nexport interface BadgeGroupProps {\n  max?: number\n  gap?: keyof typeof GAP_CLASSES\n  size?: BadgeProps['size']\n  onOverflowClick?: () => void\n  className?: string\n  children: React.ReactNode\n}\n\nexport function BadgeGroup({\n  max,\n  gap = 'default',\n  size,\n  onOverflowClick,\n  className,\n  children,\n}: BadgeGroupProps) {\n  const childArray = React.Children.toArray(children)\n  const total = childArray.length\n  const hasOverflow = max !== undefined && total > max\n  const visible = hasOverflow ? childArray.slice(0, max) : childArray\n  const overflowCount = hasOverflow ? total - max! : 0\n\n  return (\n    <div className={cn('flex flex-wrap items-center', GAP_CLASSES[gap], className)}>\n      {visible}\n      {hasOverflow && (\n        <Badge\n          variant=\"outline\"\n          color=\"neutral\"\n          size={size ?? 'sm'}\n          onClick={onOverflowClick}\n        >\n          +{overflowCount}\n        </Badge>\n      )}\n    </div>\n  )\n}\n\nBadgeGroup.displayName = 'BadgeGroup'\n"],"mappings":"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"}

package/dist/_chunks/chart-container.js

@@ -0,0 +1,50 @@
+"use client";
+import { cn as e } from "../ui/lib/utils.js";
+import * as t from "react";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/ui/charts/_internal/types.ts
+var s = {
+	top: 20,
+	right: 20,
+	bottom: 40,
+	left: 50
+}, c = t.forwardRef(({ height: t = 300, margin: c, className: l, ariaLabel: u = "Chart", ariaDescription: d, children: f, ...p }, m) => {
+	let h = r(null), [g, _] = i(0), v = {
+		...s,
+		...c
+	};
+	n(() => {
+		if (!h.current) return;
+		let e = new ResizeObserver((e) => {
+			let t = e[0];
+			t && _(t.contentRect.width);
+		});
+		return e.observe(h.current), () => e.disconnect();
+	}, []);
+	let y = Math.max(0, g - v.left - v.right), b = Math.max(0, t - v.top - v.bottom);
+	return /* @__PURE__ */ a("div", {
+		ref: (e) => {
+			h.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
+		},
+		className: e("relative w-full", l),
+		...p,
+		children: g > 0 && /* @__PURE__ */ o("svg", {
+			width: g,
+			height: t,
+			role: "img",
+			"aria-label": u,
+			children: [d && /* @__PURE__ */ a("desc", { children: d }), /* @__PURE__ */ a("g", {
+				transform: `translate(${v.left},${v.top})`,
+				children: f({
+					width: y,
+					height: b,
+					margin: v
+				})
+			})]
+		})
+	});
+});
+c.displayName = "ChartContainer";
+//#endregion
+export { c as t };

package/dist/_chunks/chart-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-container.js","names":[],"sources":["../../src/ui/charts/_internal/types.ts","../../src/ui/charts/chart-container.tsx"],"sourcesContent":["export interface ChartMargin {\n  top: number\n  right: number\n  bottom: number\n  left: number\n}\n\nexport const DEFAULT_MARGIN: ChartMargin = {\n  top: 20,\n  right: 20,\n  bottom: 40,\n  left: 50,\n}\n\nexport interface DataPoint {\n  [key: string]: string | number | Date\n}\n\nexport interface Series {\n  key: string\n  label: string\n  color?: string\n}\n\nexport type ChartColor =\n  | 'chart-1'\n  | 'chart-2'\n  | 'chart-3'\n  | 'chart-4'\n  | 'chart-5'\n  | 'chart-6'\n  | 'chart-7'\n  | 'chart-8'\n","'use client'\n\nimport * as React from 'react'\nimport { useEffect,useRef, useState } from 'react'\n\nimport { cn } from '../lib/utils'\nimport type { ChartMargin } from './_internal/types'\nimport { DEFAULT_MARGIN } from './_internal/types'\n\nexport interface ChartContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Fixed height in pixels */\n  height?: number\n  /** Chart margins */\n  margin?: Partial<ChartMargin>\n  className?: string\n  /** Accessible label for the chart SVG */\n  ariaLabel?: string\n  /** Accessible description for screen readers — summarize key data points */\n  ariaDescription?: string\n  /** Render function receiving inner dimensions (width/height minus margins) */\n  children: (dimensions: {\n    width: number\n    height: number\n    margin: ChartMargin\n  }) => React.ReactNode\n}\n\nexport const ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(\n  (\n    {\n      height = 300,\n      margin: marginOverride,\n      className,\n      ariaLabel = 'Chart',\n      ariaDescription,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  const margin = { ...DEFAULT_MARGIN, ...marginOverride }\n\n  useEffect(() => {\n    if (!containerRef.current) return\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setWidth(entry.contentRect.width)\n    })\n    observer.observe(containerRef.current)\n    return () => observer.disconnect()\n  }, [])\n\n  const innerWidth = Math.max(0, width - margin.left - margin.right)\n  const innerHeight = Math.max(0, height - margin.top - margin.bottom)\n\n  return (\n    <div\n      ref={(node) => {\n        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      }}\n      className={cn('relative w-full', className)}\n      {...props}\n    >\n      {width > 0 && (\n        <svg width={width} height={height} role=\"img\" aria-label={ariaLabel}>\n          {ariaDescription && <desc>{ariaDescription}</desc>}\n          <g transform={`translate(${margin.left},${margin.top})`}>\n            {children({ width: innerWidth, height: innerHeight, margin })}\n          </g>\n        </svg>\n      )}\n    </div>\n  )\n  },\n)\nChartContainer.displayName = 'ChartContainer'\n"],"mappings":";;;;;AAOA,IAAa,IAA8B;CACzC,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CACP,ECeY,IAAiB,EAAM,YAEhC,EACE,YAAS,KACT,QAAQ,GACR,cACA,eAAY,SACZ,oBACA,aACA,GAAG,KAEL,MACG;CACL,IAAM,IAAe,EAAuB,KAAK,EAC3C,CAAC,GAAO,KAAY,EAAS,EAAE,EAE/B,IAAS;EAAE,GAAG;EAAgB,GAAG;EAAgB;AAEvD,SAAgB;AACd,MAAI,CAAC,EAAa,QAAS;EAC3B,IAAM,IAAW,IAAI,gBAAgB,MAAY;GAC/C,IAAM,IAAQ,EAAQ;AACtB,GAAI,KAAO,EAAS,EAAM,YAAY,MAAM;IAC5C;AAEF,SADA,EAAS,QAAQ,EAAa,QAAQ,QACzB,EAAS,YAAY;IACjC,EAAE,CAAC;CAEN,IAAM,IAAa,KAAK,IAAI,GAAG,IAAQ,EAAO,OAAO,EAAO,MAAM,EAC5D,IAAc,KAAK,IAAI,GAAG,IAAS,EAAO,MAAM,EAAO,OAAO;AAEpE,QACE,kBAAC,OAAD;EACE,MAAM,MAAS;AAEb,GADC,EAA+D,UAAU,GACtE,OAAO,KAAQ,aAAY,EAAI,EAAK,GAC/B,MAAM,EAAsD,UAAU;;EAEjF,WAAW,EAAG,mBAAmB,EAAU;EAC3C,GAAI;YAEH,IAAQ,KACP,kBAAC,OAAD;GAAY;GAAe;GAAQ,MAAK;GAAM,cAAY;aAA1D,CACG,KAAmB,kBAAC,QAAD,EAAA,UAAO,GAAuB,CAAA,EAClD,kBAAC,KAAD;IAAG,WAAW,aAAa,EAAO,KAAK,GAAG,EAAO,IAAI;cAClD,EAAS;KAAE,OAAO;KAAY,QAAQ;KAAa;KAAQ,CAAC;IAC3D,CAAA,CACA;;EAEJ,CAAA;EAGT;AACD,EAAe,cAAc"}