@humain/ui 2.4.1 → 2.4.3

package/dist/index24.js.map

@@ -1 +1 @@
-{"version":3,"file":"index24.js","names":[],"sources":["../src/components/ui/selection-group.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { Minus } from 'lucide-react';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type SelectionColor =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'destructive';\n\nexport type SelectionSize = 'sm' | 'md' | 'lg';\n\nexport type SelectionVariant =\n  | 'default'\n  | 'card'\n  | 'pill'\n  | 'stacked'\n  | 'icon-simple'\n  | 'icon-card'\n  | 'avatar'\n  | 'payment'\n  | 'simple'\n  | 'chip';\n\nexport interface SelectionItem {\n  /** Unique value for the option */\n  value: string;\n  /** Display label */\n  label: string;\n  /** Whether this option is disabled */\n  disabled?: boolean;\n  /** Secondary text (e.g., \"$10/month\") */\n  subtext?: string;\n  /** Supporting description text */\n  description?: string;\n  /** Leading icon component */\n  icon?: React.ReactNode;\n  /** Avatar element */\n  avatar?: React.ReactNode;\n  /** Image URL */\n  image?: string;\n  /** Alt text for the image (defaults to \"\" if omitted) */\n  imageAlt?: string;\n  /** Position of the image */\n  imagePosition?: 'top' | 'left' | 'trailing';\n  /** Badge element */\n  badge?: React.ReactNode;\n  /** Dot color for chip variant (named color or hex) */\n  dotColor?: string;\n  /** Price display (e.g., \"$10\") */\n  price?: string;\n  /** Price period (e.g., \"per month\") */\n  pricePeriod?: string;\n  /** Payment icon element */\n  paymentIcon?: React.ReactNode;\n  /** Action buttons */\n  actions?: React.ReactNode;\n}\n\n// =============================================================================\n// Hooks\n// =============================================================================\n\ninterface UseSelectionStateOptions {\n  /** Controlled value */\n  value?: string;\n  /** Default value for uncontrolled mode */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n}\n\n/**\n * Hook for managing single selection state (radio behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useSelectionState(\n  options: UseSelectionStateOptions = {},\n): [string | undefined, (value: string) => void] {\n  const { value: controlledValue, defaultValue, onValueChange } = options;\n\n  const [internalValue, setInternalValue] = React.useState<string | undefined>(\n    defaultValue,\n  );\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValue = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return [selectedValue, setValue];\n}\n\ninterface UseMultiSelectionStateOptions {\n  /** Controlled value */\n  value?: string[];\n  /** Default value for uncontrolled mode */\n  defaultValue?: string[];\n  /** Callback when value changes */\n  onValueChange?: (value: string[]) => void;\n}\n\n/**\n * Hook for managing multi selection state (checkbox behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useMultiSelectionState(\n  options: UseMultiSelectionStateOptions = {},\n): [string[], (value: string, checked: boolean) => void] {\n  const { value: controlledValue, defaultValue = [], onValueChange } = options;\n\n  const [internalValue, setInternalValue] =\n    React.useState<string[]>(defaultValue);\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValues = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (itemValue: string, checked: boolean) => {\n      const newValue = checked\n        ? [...selectedValues, itemValue]\n        : selectedValues.filter((v) => v !== itemValue);\n\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, selectedValues, onValueChange],\n  );\n\n  return [selectedValues, setValue];\n}\n\n// =============================================================================\n// Color Mappings\n// =============================================================================\n\nexport const selectionColorClasses: Record<\n  SelectionColor,\n  {\n    indicator: string;\n    indicatorChecked: string;\n    border: string;\n    bg: string;\n    text: string;\n  }\n> = {\n  primary: {\n    indicator: 'border-primary',\n    indicatorChecked: 'bg-primary',\n    border: 'border-primary',\n    bg: 'bg-primary',\n    text: 'text-primary-foreground',\n  },\n  secondary: {\n    indicator: 'border-secondary',\n    indicatorChecked: 'bg-secondary-foreground',\n    border: 'border-secondary',\n    bg: 'bg-secondary',\n    text: 'text-secondary-foreground',\n  },\n  success: {\n    indicator: 'border-success',\n    indicatorChecked: 'bg-success',\n    border: 'border-success',\n    bg: 'bg-success',\n    text: 'text-primary-foreground',\n  },\n  warning: {\n    indicator: 'border-warning',\n    indicatorChecked: 'bg-warning',\n    border: 'border-warning',\n    bg: 'bg-warning',\n    text: 'text-primary-foreground',\n  },\n  info: {\n    indicator: 'border-info',\n    indicatorChecked: 'bg-info',\n    border: 'border-info',\n    bg: 'bg-info',\n    text: 'text-primary-foreground',\n  },\n  destructive: {\n    indicator: 'border-destructive',\n    indicatorChecked: 'bg-destructive',\n    border: 'border-destructive',\n    bg: 'bg-destructive',\n    text: 'text-primary-foreground',\n  },\n};\n\n// =============================================================================\n// CVA Variants\n// =============================================================================\n\n/**\n * Selection group container variants.\n * Used for the outer wrapper of a group of selection items.\n */\nexport const selectionGroupVariants = cva('flex', {\n  variants: {\n    orientation: {\n      horizontal: 'flex-row flex-wrap',\n      vertical: 'flex-col',\n    },\n    gap: {\n      sm: 'gap-2',\n      md: 'gap-3',\n      lg: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    gap: 'md',\n  },\n});\n\n/**\n * Selection indicator variants (for both radio and checkbox).\n * Renders as a rounded indicator with border.\n */\nexport const selectionIndicatorVariants = cva(\n  'shrink-0 rounded-full border shadow-xs transition-all flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4',\n        md: 'size-5',\n        lg: 'size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Checkbox indicator variants (square with rounded corners).\n */\nexport const checkboxIndicatorVariants = cva(\n  'shrink-0 border shadow-xs transition-[border-color,background-color,color,box-shadow] duration-200 ease-out motion-reduce:transition-none flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4 rounded-[4px]',\n        md: 'size-5 rounded-[5px]',\n        lg: 'size-6 rounded-[6px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Inner dot sizes for radio indicators when checked.\n */\nexport const innerDotSizes: Record<SelectionSize, string> = {\n  sm: 'size-2',\n  md: 'size-3',\n  lg: 'size-4',\n};\n\n/**\n * Text size classes for selection labels.\n */\nexport const textSizeClasses: Record<SelectionSize, string> = {\n  sm: 'text-sm',\n  md: 'text-sm',\n  lg: 'text-sm',\n};\n\n/**\n * Icon size classes for checkbox indicators.\n */\nexport const iconSizeClasses: Record<SelectionSize, string> = {\n  sm: 'size-3',\n  md: 'size-3.5',\n  lg: 'size-5',\n};\n\n// =============================================================================\n// Draw-on checkmark SVG (shared delight animation)\n// =============================================================================\n\nexport const CHECKMARK_PATH = 'M4 12l5 5L20 6';\n\nexport function DrawCheck({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={3}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={cn(className, 'delight-check-draw')}\n    >\n      <path d={CHECKMARK_PATH} />\n    </svg>\n  );\n}\n\n// =============================================================================\n// SelectionIndicator Component\n// =============================================================================\n\nexport interface SelectionIndicatorProps {\n  /** Type of indicator to render */\n  type: 'checkbox' | 'radio';\n  /** Whether the indicator is checked */\n  checked?: boolean;\n  /** Whether the indicator is disabled */\n  disabled?: boolean;\n  /** Size of the indicator */\n  size?: SelectionSize;\n  /** Color of the indicator */\n  color?: SelectionColor;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether the checkbox is in indeterminate state (checkbox only) */\n  indeterminate?: boolean;\n}\n\n/**\n * SelectionIndicator renders either a checkbox or radio indicator based on type.\n * For checkbox: renders a check icon when checked.\n * For radio: renders an inner dot when checked.\n */\nconst SelectionIndicator = React.forwardRef<\n  HTMLSpanElement,\n  SelectionIndicatorProps\n>(\n  (\n    {\n      type,\n      checked = false,\n      disabled = false,\n      size = 'sm',\n      color = 'primary',\n      className,\n      indeterminate = false,\n    },\n    ref,\n  ) => {\n    const colors = selectionColorClasses[color];\n\n    if (type === 'checkbox') {\n      return (\n        <span\n          ref={ref}\n          data-slot=\"selection-indicator\"\n          data-type=\"checkbox\"\n          data-checked={checked}\n          data-indeterminate={indeterminate || undefined}\n          className={cn(\n            checkboxIndicatorVariants({ size }),\n            checked || indeterminate\n              ? cn(\n                  colors.indicatorChecked,\n                  colors.border,\n                  colors.text,\n                  'border',\n                  'delight-check-bounce',\n                )\n              : 'border-input bg-background',\n            disabled && 'opacity-50',\n            className,\n          )}\n          aria-hidden=\"true\"\n        >\n          {(checked || indeterminate) &&\n            (indeterminate ? (\n              <Minus\n                className={cn(\n                  iconSizeClasses[size],\n                  'animate-[scale-in_150ms_ease-out] motion-reduce:animate-none',\n                )}\n                strokeWidth={3}\n              />\n            ) : (\n              <DrawCheck className={iconSizeClasses[size]} />\n            ))}\n        </span>\n      );\n    }\n\n    // Radio type\n    return (\n      <span\n        ref={ref}\n        data-slot=\"selection-indicator\"\n        data-type=\"radio\"\n        data-checked={checked}\n        className={cn(\n          selectionIndicatorVariants({ size }),\n          'transition-[background-color,border-color] duration-150 motion-reduce:transition-none',\n          'border-input bg-transparent',\n          disabled && 'opacity-50',\n          className,\n        )}\n        aria-hidden=\"true\"\n      >\n        <span\n          className={cn(\n            'rounded-full transition-transform duration-150 ease-out motion-reduce:transition-none',\n            colors.indicatorChecked,\n            innerDotSizes[size],\n            checked ? 'scale-100' : 'scale-0',\n          )}\n        />\n      </span>\n    );\n  },\n);\n\nSelectionIndicator.displayName = 'SelectionIndicator';\n\n// =============================================================================\n// FeaturedIcon Component\n// =============================================================================\n\nexport interface FeaturedIconProps {\n  /** The icon content to display */\n  children: React.ReactNode;\n  /** Size of the featured icon container */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n// Hoisted outside component to avoid recreation on every render\nconst featuredIconContainerSizes: Record<SelectionSize, string> = {\n  sm: 'size-8',\n  md: 'size-10',\n  lg: 'size-12',\n};\n\nconst featuredIconInnerSizes: Record<SelectionSize, string> = {\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n};\n\n/**\n * FeaturedIcon is a container for icons with border and shadow.\n * Used in icon-simple and icon-card variants.\n */\nconst FeaturedIcon = React.forwardRef<HTMLDivElement, FeaturedIconProps>(\n  ({ children, size = 'sm', className }, ref) => {\n    const containerSize = featuredIconContainerSizes[size];\n    const innerSize = featuredIconInnerSizes[size];\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"featured-icon\"\n        className={cn(\n          'shrink-0 rounded-md border border-border bg-card/60',\n          'flex items-center justify-center',\n          'dark:border-border',\n          containerSize,\n          className,\n        )}\n        style={{\n          boxShadow: 'var(--shadow-inset-ring)',\n        }}\n      >\n        <div className={cn('text-secondary-foreground', innerSize)}>\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n\nFeaturedIcon.displayName = 'FeaturedIcon';\n\n// =============================================================================\n// ColorDot Component\n// =============================================================================\n\nexport type ColorDotColor =\n  | 'gray'\n  | 'orange'\n  | 'red'\n  | 'darkRed'\n  | 'brand'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | string; // Allow custom hex colors\n\nconst dotColorMap: Record<string, string> = {\n  gray: 'bg-muted',\n  orange: 'bg-warning',\n  red: 'bg-destructive',\n  darkRed: 'bg-destructive-hover',\n  brand: 'bg-primary/10',\n  success: 'bg-success/10',\n  warning: 'bg-warning/10',\n  error: 'bg-destructive/10',\n};\n\nconst dotSizeMap: Record<SelectionSize, string> = {\n  sm: 'size-[10px]',\n  md: 'size-3',\n  lg: 'size-3.5',\n};\n\nexport interface ColorDotProps {\n  /** Color of the dot (named color or hex) */\n  color?: ColorDotColor;\n  /** Size of the dot */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * ColorDot renders a colored dot for chip variant.\n * Supports named colors (gray, orange, red, etc.) and hex colors.\n */\nconst ColorDot = React.forwardRef<HTMLSpanElement, ColorDotProps>(\n  ({ color, size = 'sm', className }, ref) => {\n    if (!color) return null;\n\n    const colorClass = dotColorMap[color];\n    const isHexColor = color.startsWith('#');\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"color-dot\"\n        className={cn(\n          'shrink-0 rounded-full',\n          dotSizeMap[size],\n          !isHexColor && colorClass,\n          className,\n        )}\n        style={isHexColor ? { backgroundColor: color } : undefined}\n        aria-hidden=\"true\"\n      />\n    );\n  },\n);\n\nColorDot.displayName = 'ColorDot';\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nexport { ColorDot, FeaturedIcon, SelectionIndicator };\n"],"mappings":"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"}
+{"version":3,"file":"index24.js","names":[],"sources":["../src/components/ui/selection-group.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { Minus } from 'lucide-react';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type SelectionColor =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'destructive';\n\nexport type SelectionSize = 'sm' | 'md' | 'lg';\n\nexport type SelectionVariant =\n  | 'default'\n  | 'card'\n  | 'pill'\n  | 'stacked'\n  | 'icon-simple'\n  | 'icon-card'\n  | 'avatar'\n  | 'payment'\n  | 'simple'\n  | 'chip';\n\nexport interface SelectionItem {\n  /** Unique value for the option */\n  value: string;\n  /** Display label */\n  label: string;\n  /** Whether this option is disabled */\n  disabled?: boolean;\n  /** Secondary text (e.g., \"$10/month\") */\n  subtext?: string;\n  /** Supporting description text */\n  description?: string;\n  /** Leading icon component */\n  icon?: React.ReactNode;\n  /** Avatar element */\n  avatar?: React.ReactNode;\n  /** Image URL */\n  image?: string;\n  /** Alt text for the image (defaults to \"\" if omitted) */\n  imageAlt?: string;\n  /** Position of the image */\n  imagePosition?: 'top' | 'left' | 'trailing';\n  /** Badge element */\n  badge?: React.ReactNode;\n  /** Dot color for chip variant (named color or hex) */\n  dotColor?: string;\n  /** Price display (e.g., \"$10\") */\n  price?: string;\n  /** Price period (e.g., \"per month\") */\n  pricePeriod?: string;\n  /** Payment icon element */\n  paymentIcon?: React.ReactNode;\n  /** Action buttons */\n  actions?: React.ReactNode;\n}\n\n// =============================================================================\n// Hooks\n// =============================================================================\n\ninterface UseSelectionStateOptions {\n  /** Controlled value */\n  value?: string;\n  /** Default value for uncontrolled mode */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n}\n\n/**\n * Hook for managing single selection state (radio behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useSelectionState(\n  options: UseSelectionStateOptions = {},\n): [string | undefined, (value: string) => void] {\n  const { value: controlledValue, defaultValue, onValueChange } = options;\n\n  const [internalValue, setInternalValue] = React.useState<string | undefined>(\n    defaultValue,\n  );\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValue = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return [selectedValue, setValue];\n}\n\ninterface UseMultiSelectionStateOptions {\n  /** Controlled value */\n  value?: string[];\n  /** Default value for uncontrolled mode */\n  defaultValue?: string[];\n  /** Callback when value changes */\n  onValueChange?: (value: string[]) => void;\n}\n\n/**\n * Hook for managing multi selection state (checkbox behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useMultiSelectionState(\n  options: UseMultiSelectionStateOptions = {},\n): [string[], (value: string, checked: boolean) => void] {\n  const { value: controlledValue, defaultValue = [], onValueChange } = options;\n\n  const [internalValue, setInternalValue] =\n    React.useState<string[]>(defaultValue);\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValues = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (itemValue: string, checked: boolean) => {\n      const newValue = checked\n        ? [...selectedValues, itemValue]\n        : selectedValues.filter((v) => v !== itemValue);\n\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, selectedValues, onValueChange],\n  );\n\n  return [selectedValues, setValue];\n}\n\n// =============================================================================\n// Color Mappings\n// =============================================================================\n\nexport const selectionColorClasses: Record<\n  SelectionColor,\n  {\n    indicator: string;\n    indicatorChecked: string;\n    border: string;\n    bg: string;\n    text: string;\n  }\n> = {\n  primary: {\n    indicator: 'border-primary',\n    indicatorChecked: 'bg-primary',\n    border: 'border-primary',\n    bg: 'bg-primary',\n    text: 'text-primary-foreground',\n  },\n  secondary: {\n    indicator: 'border-secondary',\n    indicatorChecked: 'bg-secondary-foreground',\n    border: 'border-secondary',\n    bg: 'bg-secondary',\n    text: 'text-secondary-foreground',\n  },\n  success: {\n    indicator: 'border-success',\n    indicatorChecked: 'bg-success',\n    border: 'border-success',\n    bg: 'bg-success',\n    text: 'text-primary-foreground',\n  },\n  warning: {\n    indicator: 'border-warning',\n    indicatorChecked: 'bg-warning',\n    border: 'border-warning',\n    bg: 'bg-warning',\n    text: 'text-primary-foreground',\n  },\n  info: {\n    indicator: 'border-info',\n    indicatorChecked: 'bg-info',\n    border: 'border-info',\n    bg: 'bg-info',\n    text: 'text-primary-foreground',\n  },\n  destructive: {\n    indicator: 'border-destructive',\n    indicatorChecked: 'bg-destructive',\n    border: 'border-destructive',\n    bg: 'bg-destructive',\n    text: 'text-primary-foreground',\n  },\n};\n\n// =============================================================================\n// CVA Variants\n// =============================================================================\n\n/**\n * Selection group container variants.\n * Used for the outer wrapper of a group of selection items.\n */\nexport const selectionGroupVariants = cva('flex', {\n  variants: {\n    orientation: {\n      horizontal: 'flex-row flex-wrap',\n      vertical: 'flex-col',\n    },\n    gap: {\n      sm: 'gap-2',\n      md: 'gap-3',\n      lg: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    gap: 'md',\n  },\n});\n\n/**\n * Selection indicator variants (for both radio and checkbox).\n * Renders as a rounded indicator with border.\n */\nexport const selectionIndicatorVariants = cva(\n  'shrink-0 rounded-full border shadow-xs transition-all flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4',\n        md: 'size-5',\n        lg: 'size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Checkbox indicator variants (square with rounded corners).\n */\nexport const checkboxIndicatorVariants = cva(\n  'shrink-0 border shadow-xs transition-[border-color,background-color,color,box-shadow] duration-200 ease-out motion-reduce:transition-none flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4 rounded-[4px]',\n        md: 'size-5 rounded-[5px]',\n        lg: 'size-6 rounded-[6px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Inner dot sizes for radio indicators when checked.\n */\nexport const innerDotSizes: Record<SelectionSize, string> = {\n  sm: 'size-2',\n  md: 'size-3',\n  lg: 'size-4',\n};\n\n/**\n * Text size classes for selection labels.\n */\nexport const textSizeClasses: Record<SelectionSize, string> = {\n  sm: 'text-sm',\n  md: 'text-sm',\n  lg: 'text-sm',\n};\n\n/**\n * Icon size classes for checkbox indicators.\n */\nexport const iconSizeClasses: Record<SelectionSize, string> = {\n  sm: 'size-3',\n  md: 'size-3.5',\n  lg: 'size-5',\n};\n\n// =============================================================================\n// Draw-on checkmark SVG (shared delight animation)\n// =============================================================================\n\nexport const CHECKMARK_PATH = 'M4 12l5 5L20 6';\n\nexport function DrawCheck({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={3}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={cn(className, 'delight-check-draw')}\n    >\n      <path d={CHECKMARK_PATH} />\n    </svg>\n  );\n}\n\n// =============================================================================\n// SelectionIndicator Component\n// =============================================================================\n\nexport interface SelectionIndicatorProps {\n  /** Type of indicator to render */\n  type: 'checkbox' | 'radio';\n  /** Whether the indicator is checked */\n  checked?: boolean;\n  /** Whether the indicator is disabled */\n  disabled?: boolean;\n  /** Size of the indicator */\n  size?: SelectionSize;\n  /** Color of the indicator */\n  color?: SelectionColor;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether the checkbox is in indeterminate state (checkbox only) */\n  indeterminate?: boolean;\n}\n\n/**\n * SelectionIndicator renders either a checkbox or radio indicator based on type.\n * For checkbox: renders a check icon when checked.\n * For radio: renders an inner dot when checked.\n */\nconst SelectionIndicator = React.forwardRef<\n  HTMLSpanElement,\n  SelectionIndicatorProps\n>(\n  (\n    {\n      type,\n      checked = false,\n      disabled = false,\n      size = 'sm',\n      color = 'primary',\n      className,\n      indeterminate = false,\n    },\n    ref,\n  ) => {\n    const colors = selectionColorClasses[color];\n\n    if (type === 'checkbox') {\n      return (\n        <span\n          ref={ref}\n          data-slot=\"selection-indicator\"\n          data-type=\"checkbox\"\n          data-checked={checked}\n          data-indeterminate={indeterminate || undefined}\n          className={cn(\n            checkboxIndicatorVariants({ size }),\n            checked || indeterminate\n              ? cn(\n                  colors.indicatorChecked,\n                  colors.border,\n                  colors.text,\n                  'border',\n                  'delight-check-bounce',\n                )\n              : 'border-input bg-background',\n            disabled && 'opacity-50',\n            className,\n          )}\n          aria-hidden=\"true\"\n        >\n          {(checked || indeterminate) &&\n            (indeterminate ? (\n              <Minus\n                className={cn(\n                  iconSizeClasses[size],\n                  'animate-[scale-in_150ms_ease-out] motion-reduce:animate-none',\n                )}\n                strokeWidth={3}\n              />\n            ) : (\n              <DrawCheck className={iconSizeClasses[size]} />\n            ))}\n        </span>\n      );\n    }\n\n    // Radio type\n    return (\n      <span\n        ref={ref}\n        data-slot=\"selection-indicator\"\n        data-type=\"radio\"\n        data-checked={checked}\n        className={cn(\n          selectionIndicatorVariants({ size }),\n          'transition-[background-color,border-color] duration-150 motion-reduce:transition-none',\n          'border-input bg-transparent',\n          disabled && 'opacity-50',\n          className,\n        )}\n        aria-hidden=\"true\"\n      >\n        <span\n          className={cn(\n            'rounded-full transition-transform duration-150 ease-out motion-reduce:transition-none',\n            colors.indicatorChecked,\n            innerDotSizes[size],\n            checked ? 'scale-100' : 'scale-0',\n          )}\n        />\n      </span>\n    );\n  },\n);\n\nSelectionIndicator.displayName = 'SelectionIndicator';\n\n// =============================================================================\n// FeaturedIcon Component\n// =============================================================================\n\nexport interface FeaturedIconProps {\n  /** The icon content to display */\n  children: React.ReactNode;\n  /** Size of the featured icon container */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n// Hoisted outside component to avoid recreation on every render\nconst featuredIconContainerSizes: Record<SelectionSize, string> = {\n  sm: 'size-8',\n  md: 'size-10',\n  lg: 'size-12',\n};\n\nconst featuredIconInnerSizes: Record<SelectionSize, string> = {\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n};\n\n/**\n * FeaturedIcon is a container for icons with border and shadow.\n * Used in icon-simple and icon-card variants.\n */\nconst FeaturedIcon = React.forwardRef<HTMLDivElement, FeaturedIconProps>(\n  ({ children, size = 'sm', className }, ref) => {\n    const containerSize = featuredIconContainerSizes[size];\n    const innerSize = featuredIconInnerSizes[size];\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"featured-icon\"\n        className={cn(\n          'shrink-0 rounded-md border border-border bg-card/60',\n          'flex items-center justify-center',\n          'dark:border-border',\n          containerSize,\n          className,\n        )}\n        style={{\n          boxShadow: 'var(--shadow-inset-ring)',\n        }}\n      >\n        <div\n          className={cn(\n            'text-secondary-foreground [&>svg]:block [&>svg]:size-full',\n            innerSize,\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n\nFeaturedIcon.displayName = 'FeaturedIcon';\n\n// =============================================================================\n// ColorDot Component\n// =============================================================================\n\nexport type ColorDotColor =\n  | 'gray'\n  | 'orange'\n  | 'red'\n  | 'darkRed'\n  | 'brand'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | string; // Allow custom hex colors\n\nconst dotColorMap: Record<string, string> = {\n  gray: 'bg-muted',\n  orange: 'bg-warning',\n  red: 'bg-destructive',\n  darkRed: 'bg-destructive-hover',\n  brand: 'bg-primary/10',\n  success: 'bg-success/10',\n  warning: 'bg-warning/10',\n  error: 'bg-destructive/10',\n};\n\nconst dotSizeMap: Record<SelectionSize, string> = {\n  sm: 'size-[10px]',\n  md: 'size-3',\n  lg: 'size-3.5',\n};\n\nexport interface ColorDotProps {\n  /** Color of the dot (named color or hex) */\n  color?: ColorDotColor;\n  /** Size of the dot */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * ColorDot renders a colored dot for chip variant.\n * Supports named colors (gray, orange, red, etc.) and hex colors.\n */\nconst ColorDot = React.forwardRef<HTMLSpanElement, ColorDotProps>(\n  ({ color, size = 'sm', className }, ref) => {\n    if (!color) return null;\n\n    const colorClass = dotColorMap[color];\n    const isHexColor = color.startsWith('#');\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"color-dot\"\n        className={cn(\n          'shrink-0 rounded-full',\n          dotSizeMap[size],\n          !isHexColor && colorClass,\n          className,\n        )}\n        style={isHexColor ? { backgroundColor: color } : undefined}\n        aria-hidden=\"true\"\n      />\n    );\n  },\n);\n\nColorDot.displayName = 'ColorDot';\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nexport { ColorDot, FeaturedIcon, SelectionIndicator };\n"],"mappings":"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"}