erp-pro-ui 0.2.5 → 0.2.7

package/dist/chunks/{chip-CqcdcSs2.mjs.map → chip-DBlSQcqR.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"chip-CqcdcSs2.mjs","names":[],"sources":["../../src/components/data-display/chip/Chip.tsx","../../src/components/data-display/chip/SpecialChip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { CloseIcon } from \"../../icons\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\n\nexport type ChipVariant = \"filled\" | \"outlined\" | \"soft\" | \"glass\";\nexport type ChipColor =\n  | \"default\"\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\nexport type ChipSize = \"xs\" |\"sm\" | \"md\" | \"lg\";\n\nexport interface ChipProps {\n  /** The content of the chip */\n  children: React.ReactNode;\n  /** The variant style of the chip */\n  variant?: ChipVariant;\n  /** The color scheme of the chip */\n  color?: ChipColor;\n  /** The size of the chip */\n  size?: ChipSize;\n  /** Icon or element to display at the start */\n  startIcon?: React.ReactNode;\n  /** Icon or element to display at the end */\n  endIcon?: React.ReactNode;\n  /** Makes the chip removable with an X button */\n  onRemove?: () => void;\n  /** Makes the chip clickable */\n  onClick?: () => void;\n  /** Whether the chip is disabled */\n  disabled?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Whether the chip should have a dot indicator */\n  dot?: boolean;\n  /** Dot color (uses chip color by default) */\n  dotColor?: string;\n  /** Maximum width for the chip - text will truncate with ellipsis if exceeded */\n  maxWidth?: number | string;\n}\n\nconst sizeStyles: Record<ChipSize, string> = {\n  xs: \"px-1.5 py-0.5 text-xs gap-1\",\n  sm: \"px-2.5 py-1 text-xs gap-1.5\",\n  md: \"px-3 py-1.5 text-sm gap-2\",\n  lg: \"px-4 py-2 text-base gap-2.5\",\n};\n\nconst dotSizeStyles: Record<ChipSize, string> = {\n  xs: \"w-1 h-1\",\n  sm: \"w-1.5 h-1.5\",\n  md: \"w-2 h-2\",\n  lg: \"w-2.5 h-2.5\",\n};\n\nconst iconSizeStyles: Record<ChipSize, string> = {\n  xs: \"w-2 h-2\",\n  sm: \"w-3.5 h-3.5\",\n  md: \"w-4 h-4\",\n  lg: \"w-5 h-5\",\n};\n\nconst colorStyles: Record<ChipVariant, Record<ChipColor, string>> = {\n  filled: {\n    default: \"bg-ds-surface-2 text-ds-1 shadow-sm border border-ds-border-2\",\n    primary:\n      \"bg-ds-accent text-ds-on-accent shadow-md shadow-ds-accent/25 border border-ds-border-accent\",\n    secondary:\n      \"bg-ds-accent-subtle text-ds-1 shadow-sm border border-ds-border-accent\",\n    success:\n      \"bg-ds-state-success-surface text-ds-state-success-text shadow-sm border border-ds-state-success-border\",\n    warning:\n      \"bg-ds-state-warning-surface text-ds-state-warning-text shadow-sm border border-ds-state-warning-border\",\n    error:\n      \"bg-ds-state-error-surface text-ds-state-error-text shadow-sm border border-ds-state-error-border\",\n    info: \"bg-ds-state-info-surface text-ds-state-info-text shadow-sm border border-ds-state-info-border\",\n  },\n  outlined: {\n    default:\n      \"border-2 border-ds-border-3 text-ds-2 bg-transparent hover:bg-ds-surface-2\",\n    primary:\n      \"border-2 border-ds-border-accent bg-transparent text-ds-accent hover:bg-ds-accent-subtle\",\n    secondary:\n      \"border-2 border-ds-border-3 text-ds-1 bg-transparent hover:bg-ds-surface-2\",\n    success:\n      \"border-2 border-ds-state-success-border text-ds-state-success-text bg-transparent hover:bg-ds-state-success-surface\",\n    warning:\n      \"border-2 border-ds-state-warning-border text-ds-state-warning-text bg-transparent hover:bg-ds-state-warning-surface\",\n    error:\n      \"border-2 border-ds-state-error-border text-ds-state-error-text bg-transparent hover:bg-ds-state-error-surface\",\n    info: \"border-2 border-ds-state-info-border text-ds-state-info-text bg-transparent hover:bg-ds-state-info-surface\",\n  },\n  soft: {\n    default:\n      \"bg-ds-surface-2 text-ds-1 backdrop-blur-sm border border-ds-border-2\",\n    primary:\n      \"border border-ds-border-accent/20 bg-ds-accent-subtle text-ds-1 backdrop-blur-sm\",\n    secondary:\n      \"bg-ds-surface-3/30 text-ds-1 backdrop-blur-sm border border-ds-border-3/50\",\n    success:\n      \"bg-ds-state-success-surface text-ds-state-success-text backdrop-blur-sm border border-ds-state-success-border/70\",\n    warning:\n      \"bg-ds-state-warning-surface text-ds-state-warning-text backdrop-blur-sm border border-ds-state-warning-border/70\",\n    error:\n      \"bg-ds-state-error-surface text-ds-state-error-text backdrop-blur-sm border border-ds-state-error-border/70\",\n    info: \"bg-ds-state-info-surface text-ds-state-info-text backdrop-blur-sm border border-ds-state-info-border/70\",\n  },\n  glass: {\n    default:\n      \"bg-ds-surface-1/70 text-ds-1 backdrop-blur-xl border border-ds-border-2/40 shadow-lg\",\n    primary:\n      \"border border-ds-border-accent/20 bg-ds-accent/15 text-ds-1 backdrop-blur-xl shadow-lg shadow-ds-accent/10\",\n    secondary:\n      \"bg-ds-surface-3/45 text-ds-1 backdrop-blur-xl border border-ds-border-3/50 shadow-lg\",\n    success:\n      \"bg-ds-state-success-surface/65 text-ds-state-success-text backdrop-blur-xl border border-ds-state-success-border/60 shadow-lg\",\n    warning:\n      \"bg-ds-state-warning-surface/65 text-ds-state-warning-text backdrop-blur-xl border border-ds-state-warning-border/60 shadow-lg\",\n    error:\n      \"bg-ds-state-error-surface/65 text-ds-state-error-text backdrop-blur-xl border border-ds-state-error-border/60 shadow-lg\",\n    info: \"bg-ds-state-info-surface/65 text-ds-state-info-text backdrop-blur-xl border border-ds-state-info-border/60 shadow-lg\",\n  },\n};\n\nconst dotColorStyles: Record<ChipColor, string> = {\n  default: \"bg-ds-3\",\n  primary: \"bg-ds-accent\",\n  secondary: \"bg-ds-border-3\",\n  success: \"bg-ds-state-success\",\n  warning: \"bg-ds-state-warning\",\n  error: \"bg-ds-state-danger\",\n  info: \"bg-ds-state-info\",\n};\n\nconst Chip = forwardRef<HTMLSpanElement, ChipProps>(\n  (\n    {\n      children,\n      variant = \"soft\",\n      color = \"default\",\n      size = \"xs\",\n      startIcon,\n      endIcon,\n      onRemove,\n      onClick,\n      disabled = false,\n      className = \"\",\n      dot = false,\n      dotColor,\n      maxWidth,\n    },\n    ref,\n  ) => {\n    const isClickable = onClick !== undefined;\n    const isRemovable = onRemove !== undefined;\n\n    const baseStyles = `\n      inline-flex items-center font-medium rounded-md transition-all duration-200\n      ${sizeStyles[size]}\n      ${colorStyles[variant][color]}\n      ${\n        isClickable && !disabled\n          ? \"cursor-pointer hover:scale-105 hover:shadow-lg active:scale-95\"\n          : \"\"\n      }\n      ${disabled ? \"opacity-50 cursor-not-allowed grayscale\" : \"\"}\n      ${maxWidth ? \"max-w-full\" : \"\"}\n      ${className}\n    `;\n\n    const handleClick = () => {\n      if (!disabled && onClick) {\n        onClick();\n      }\n    };\n\n    const handleRemove = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (!disabled && onRemove) {\n        onRemove();\n      }\n    };\n\n    return (\n      <span\n        ref={ref}\n        className={baseStyles}\n        onClick={handleClick}\n        role={isClickable ? \"button\" : undefined}\n        tabIndex={isClickable && !disabled ? 0 : undefined}\n        style={\n          maxWidth\n            ? {\n                maxWidth:\n                  typeof maxWidth === \"number\" ? `${maxWidth}px` : maxWidth,\n              }\n            : undefined\n        }\n        onKeyDown={(e) => {\n          if (\n            isClickable &&\n            !disabled &&\n            (e.key === \"Enter\" || e.key === \" \")\n          ) {\n            e.preventDefault();\n            onClick?.();\n          }\n        }}\n      >\n        {dot && (\n          <span\n            className={`rounded-full shrink-0 animate-pulse ${\n              dotSizeStyles[size]\n            } ${dotColor ? \"\" : dotColorStyles[color]}`}\n            style={dotColor ? { backgroundColor: dotColor } : undefined}\n          />\n        )}\n        {startIcon && (\n          <span className={`inline-flex shrink-0 items-center justify-center ${iconSizeStyles[size]}`}>\n            {startIcon}\n          </span>\n        )}\n        <TruncatedText\n          as=\"span\"\n          showTitleOnHover\n          className=\"max-w-full font-semibold\"\n        >\n          {children}\n        </TruncatedText>\n        {endIcon && !isRemovable && (\n          <span className={`inline-flex shrink-0 items-center justify-center ${iconSizeStyles[size]}`}>{endIcon}</span>\n        )}\n        {isRemovable && (\n          <button\n            type=\"button\"\n            onClick={handleRemove}\n            disabled={disabled}\n            className={`\n              shrink-0 rounded-full p-0.5 ml-1 transition-all duration-200\n              hover:bg-ds-surface-3/35 hover:scale-110\n              focus:outline-none focus:ring-2 focus:ring-current focus:ring-offset-1\n              ${disabled ? \"cursor-not-allowed\" : \"cursor-pointer\"}\n            `}\n            aria-label=\"Remove\"\n          >\n            <CloseIcon className={iconSizeStyles[size]} aria-hidden=\"true\" />\n          </button>\n        )}\n      </span>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\nexport { Chip };\n","import type { ReactNode } from \"react\";\n\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport type SplitChipDirection = \"auto\" | \"ltr\" | \"rtl\";\n\nexport interface SplitChipProps {\n  leftLabel: ReactNode;\n  rightLabel: ReactNode;\n  dir?: SplitChipDirection;\n  rightLabelDir?: SplitChipDirection;\n  truncateRight?: boolean;\n  rightMaxWidth?: string | number;\n  showRightTitleOnHover?: boolean;\n  className?: string;\n  leftClassName?: string;\n  rightClassName?: string;\n}\n\nexport function SplitChip({\n  leftLabel,\n  rightLabel,\n  dir = \"auto\",\n  rightLabelDir = \"ltr\",\n  truncateRight = false,\n  rightMaxWidth = \"10rem\",\n  showRightTitleOnHover = true,\n  className,\n  leftClassName,\n  rightClassName,\n}: SplitChipProps) {\n  const isRtl = dir === \"rtl\";\n\n  return (\n    <span\n      dir={dir}\n      className={mergeClassNames(\n        \"inline-flex items-center overflow-hidden rounded-md border border-ds-border-2 bg-ds-surface-2\",\n        className,\n      )}\n    >\n      <span\n        className={mergeClassNames(\n          \"bg-ds-surface-3 px-2 py-1 text-xs font-medium uppercase tracking-[0.05em] text-ds-2\",\n          isRtl ? \"border-l border-ds-border-2\" : \"border-r border-ds-border-2\",\n          leftClassName,\n        )}\n      >\n        {leftLabel}\n      </span>\n      <span\n        dir={rightLabelDir}\n        className={mergeClassNames(\n          \"min-w-0 px-2 py-1 text-xs font-medium text-ds-1\",\n          rightClassName,\n        )}\n      >\n        {truncateRight ? (\n          <TruncatedText\n            maxWidth={rightMaxWidth}\n            showTitleOnHover={showRightTitleOnHover}\n          >\n            {rightLabel}\n          </TruncatedText>\n        ) : (\n          rightLabel\n        )}\n      </span>\n    </span>\n  );\n}\n\nexport type StatusDotChipTone = \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport interface StatusDotChipProps {\n  label: string;\n  tone?: StatusDotChipTone;\n  className?: string;\n}\n\nconst toneClasses: Record<StatusDotChipTone, string> = {\n  success:\n    \"bg-ds-state-success-surface text-ds-state-success-text border-ds-state-success-border\",\n  warning:\n    \"bg-ds-state-warning-surface text-ds-state-warning-text border-ds-state-warning-border\",\n  danger:\n    \"bg-ds-state-error-surface text-ds-state-error-text border-ds-state-error-border\",\n  info: \"bg-ds-state-info-surface text-ds-state-info-text border-ds-state-info-border\",\n};\n\nconst dotToneClasses: Record<StatusDotChipTone, string> = {\n  success: \"bg-ds-state-success\",\n  warning: \"bg-ds-state-warning\",\n  danger: \"bg-ds-state-danger\",\n  info: \"bg-ds-state-info\",\n};\n\nexport function StatusDotChip({\n  label,\n  tone = \"info\",\n  className,\n}: StatusDotChipProps) {\n  return (\n    <span\n      className={mergeClassNames(\n        \"inline-flex items-center gap-2 rounded-md border px-3 py-1 text-sm font-medium\",\n        toneClasses[tone],\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={mergeClassNames(\n          \"h-2.5 w-2.5 rounded-full\",\n          dotToneClasses[tone],\n        )}\n      />\n      <span>{label}</span>\n    </span>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"chip-DBlSQcqR.mjs","names":[],"sources":["../../src/components/data-display/chip/Chip.tsx","../../src/components/data-display/chip/SpecialChip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { CloseIcon } from \"../../icons\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\n\nexport type ChipVariant = \"filled\" | \"outlined\" | \"soft\" | \"glass\";\nexport type ChipColor =\n  | \"default\"\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\nexport type ChipSize = \"xs\" |\"sm\" | \"md\" | \"lg\";\n\nexport interface ChipProps {\n  /** The content of the chip */\n  children: React.ReactNode;\n  /** The variant style of the chip */\n  variant?: ChipVariant;\n  /** The color scheme of the chip */\n  color?: ChipColor;\n  /** The size of the chip */\n  size?: ChipSize;\n  /** Icon or element to display at the start */\n  startIcon?: React.ReactNode;\n  /** Icon or element to display at the end */\n  endIcon?: React.ReactNode;\n  /** Makes the chip removable with an X button */\n  onRemove?: () => void;\n  /** Makes the chip clickable */\n  onClick?: () => void;\n  /** Whether the chip is disabled */\n  disabled?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Whether the chip should have a dot indicator */\n  dot?: boolean;\n  /** Dot color (uses chip color by default) */\n  dotColor?: string;\n  /** Maximum width for the chip - text will truncate with ellipsis if exceeded */\n  maxWidth?: number | string;\n}\n\nconst sizeStyles: Record<ChipSize, string> = {\n  xs: \"px-1.5 py-0.5 text-xs gap-1\",\n  sm: \"px-2.5 py-1 text-xs gap-1.5\",\n  md: \"px-3 py-1.5 text-sm gap-2\",\n  lg: \"px-4 py-2 text-base gap-2.5\",\n};\n\nconst dotSizeStyles: Record<ChipSize, string> = {\n  xs: \"w-1 h-1\",\n  sm: \"w-1.5 h-1.5\",\n  md: \"w-2 h-2\",\n  lg: \"w-2.5 h-2.5\",\n};\n\nconst iconSizeStyles: Record<ChipSize, string> = {\n  xs: \"w-2 h-2\",\n  sm: \"w-3.5 h-3.5\",\n  md: \"w-4 h-4\",\n  lg: \"w-5 h-5\",\n};\n\nconst colorStyles: Record<ChipVariant, Record<ChipColor, string>> = {\n  filled: {\n    default: \"bg-ds-surface-2 text-ds-1 shadow-sm border border-ds-border-2\",\n    primary:\n      \"bg-ds-accent text-ds-on-accent shadow-md shadow-ds-accent/25 border border-ds-border-accent\",\n    secondary:\n      \"bg-ds-accent-subtle text-ds-1 shadow-sm border border-ds-border-accent\",\n    success:\n      \"bg-ds-state-success-surface text-ds-state-success-text shadow-sm border border-ds-state-success-border\",\n    warning:\n      \"bg-ds-state-warning-surface text-ds-state-warning-text shadow-sm border border-ds-state-warning-border\",\n    error:\n      \"bg-ds-state-error-surface text-ds-state-error-text shadow-sm border border-ds-state-error-border\",\n    info: \"bg-ds-state-info-surface text-ds-state-info-text shadow-sm border border-ds-state-info-border\",\n  },\n  outlined: {\n    default:\n      \"border-2 border-ds-border-3 text-ds-2 bg-transparent hover:bg-ds-surface-2\",\n    primary:\n      \"border-2 border-ds-border-accent bg-transparent text-ds-accent hover:bg-ds-accent-subtle\",\n    secondary:\n      \"border-2 border-ds-border-3 text-ds-1 bg-transparent hover:bg-ds-surface-2\",\n    success:\n      \"border-2 border-ds-state-success-border text-ds-state-success-text bg-transparent hover:bg-ds-state-success-surface\",\n    warning:\n      \"border-2 border-ds-state-warning-border text-ds-state-warning-text bg-transparent hover:bg-ds-state-warning-surface\",\n    error:\n      \"border-2 border-ds-state-error-border text-ds-state-error-text bg-transparent hover:bg-ds-state-error-surface\",\n    info: \"border-2 border-ds-state-info-border text-ds-state-info-text bg-transparent hover:bg-ds-state-info-surface\",\n  },\n  soft: {\n    default:\n      \"bg-ds-surface-2 text-ds-1 backdrop-blur-sm border border-ds-border-2\",\n    primary:\n      \"border border-ds-border-accent/20 bg-ds-accent-subtle text-ds-1 backdrop-blur-sm\",\n    secondary:\n      \"bg-ds-surface-3/30 text-ds-1 backdrop-blur-sm border border-ds-border-3/50\",\n    success:\n      \"bg-ds-state-success-surface text-ds-state-success-text backdrop-blur-sm border border-ds-state-success-border/70\",\n    warning:\n      \"bg-ds-state-warning-surface text-ds-state-warning-text backdrop-blur-sm border border-ds-state-warning-border/70\",\n    error:\n      \"bg-ds-state-error-surface text-ds-state-error-text backdrop-blur-sm border border-ds-state-error-border/70\",\n    info: \"bg-ds-state-info-surface text-ds-state-info-text backdrop-blur-sm border border-ds-state-info-border/70\",\n  },\n  glass: {\n    default:\n      \"bg-ds-surface-1/70 text-ds-1 backdrop-blur-xl border border-ds-border-2/40 shadow-lg\",\n    primary:\n      \"border border-ds-border-accent/20 bg-ds-accent/15 text-ds-1 backdrop-blur-xl shadow-lg shadow-ds-accent/10\",\n    secondary:\n      \"bg-ds-surface-3/45 text-ds-1 backdrop-blur-xl border border-ds-border-3/50 shadow-lg\",\n    success:\n      \"bg-ds-state-success-surface/65 text-ds-state-success-text backdrop-blur-xl border border-ds-state-success-border/60 shadow-lg\",\n    warning:\n      \"bg-ds-state-warning-surface/65 text-ds-state-warning-text backdrop-blur-xl border border-ds-state-warning-border/60 shadow-lg\",\n    error:\n      \"bg-ds-state-error-surface/65 text-ds-state-error-text backdrop-blur-xl border border-ds-state-error-border/60 shadow-lg\",\n    info: \"bg-ds-state-info-surface/65 text-ds-state-info-text backdrop-blur-xl border border-ds-state-info-border/60 shadow-lg\",\n  },\n};\n\nconst dotColorStyles: Record<ChipColor, string> = {\n  default: \"bg-ds-3\",\n  primary: \"bg-ds-accent\",\n  secondary: \"bg-ds-border-3\",\n  success: \"bg-ds-state-success\",\n  warning: \"bg-ds-state-warning\",\n  error: \"bg-ds-state-danger\",\n  info: \"bg-ds-state-info\",\n};\n\nconst Chip = forwardRef<HTMLSpanElement, ChipProps>(\n  (\n    {\n      children,\n      variant = \"soft\",\n      color = \"default\",\n      size = \"xs\",\n      startIcon,\n      endIcon,\n      onRemove,\n      onClick,\n      disabled = false,\n      className = \"\",\n      dot = false,\n      dotColor,\n      maxWidth,\n    },\n    ref,\n  ) => {\n    const isClickable = onClick !== undefined;\n    const isRemovable = onRemove !== undefined;\n\n    const baseStyles = `\n      inline-flex items-center font-medium rounded-md transition-all duration-200\n      ${sizeStyles[size]}\n      ${colorStyles[variant][color]}\n      ${\n        isClickable && !disabled\n          ? \"cursor-pointer hover:scale-105 hover:shadow-lg active:scale-95\"\n          : \"\"\n      }\n      ${disabled ? \"opacity-50 cursor-not-allowed grayscale\" : \"\"}\n      ${maxWidth ? \"max-w-full\" : \"\"}\n      ${className}\n    `;\n\n    const handleClick = () => {\n      if (!disabled && onClick) {\n        onClick();\n      }\n    };\n\n    const handleRemove = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (!disabled && onRemove) {\n        onRemove();\n      }\n    };\n\n    return (\n      <span\n        ref={ref}\n        className={baseStyles}\n        onClick={handleClick}\n        role={isClickable ? \"button\" : undefined}\n        tabIndex={isClickable && !disabled ? 0 : undefined}\n        style={\n          maxWidth\n            ? {\n                maxWidth:\n                  typeof maxWidth === \"number\" ? `${maxWidth}px` : maxWidth,\n              }\n            : undefined\n        }\n        onKeyDown={(e) => {\n          if (\n            isClickable &&\n            !disabled &&\n            (e.key === \"Enter\" || e.key === \" \")\n          ) {\n            e.preventDefault();\n            onClick?.();\n          }\n        }}\n      >\n        {dot && (\n          <span\n            className={`rounded-full shrink-0 animate-pulse ${\n              dotSizeStyles[size]\n            } ${dotColor ? \"\" : dotColorStyles[color]}`}\n            style={dotColor ? { backgroundColor: dotColor } : undefined}\n          />\n        )}\n        {startIcon && (\n          <span className={`inline-flex shrink-0 items-center justify-center ${iconSizeStyles[size]}`}>\n            {startIcon}\n          </span>\n        )}\n        <TruncatedText\n          as=\"span\"\n          showTitleOnHover\n          className=\"max-w-full font-semibold\"\n        >\n          {children}\n        </TruncatedText>\n        {endIcon && !isRemovable && (\n          <span className={`inline-flex shrink-0 items-center justify-center ${iconSizeStyles[size]}`}>{endIcon}</span>\n        )}\n        {isRemovable && (\n          <button\n            type=\"button\"\n            onClick={handleRemove}\n            disabled={disabled}\n            className={`\n              shrink-0 rounded-full p-0.5 ml-1 transition-all duration-200\n              hover:bg-ds-surface-3/35 hover:scale-110\n              focus:outline-none focus:ring-2 focus:ring-current focus:ring-offset-1\n              ${disabled ? \"cursor-not-allowed\" : \"cursor-pointer\"}\n            `}\n            aria-label=\"Remove\"\n          >\n            <CloseIcon className={iconSizeStyles[size]} aria-hidden=\"true\" />\n          </button>\n        )}\n      </span>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\nexport { Chip };\n","import type { ReactNode } from \"react\";\n\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport type SplitChipDirection = \"auto\" | \"ltr\" | \"rtl\";\n\nexport interface SplitChipProps {\n  leftLabel: ReactNode;\n  rightLabel: ReactNode;\n  dir?: SplitChipDirection;\n  rightLabelDir?: SplitChipDirection;\n  truncateRight?: boolean;\n  rightMaxWidth?: string | number;\n  showRightTitleOnHover?: boolean;\n  className?: string;\n  leftClassName?: string;\n  rightClassName?: string;\n}\n\nexport function SplitChip({\n  leftLabel,\n  rightLabel,\n  dir = \"auto\",\n  rightLabelDir = \"ltr\",\n  truncateRight = false,\n  rightMaxWidth = \"10rem\",\n  showRightTitleOnHover = true,\n  className,\n  leftClassName,\n  rightClassName,\n}: SplitChipProps) {\n  const isRtl = dir === \"rtl\";\n\n  return (\n    <span\n      dir={dir}\n      className={mergeClassNames(\n        \"inline-flex items-center overflow-hidden rounded-md border border-ds-border-2 bg-ds-surface-2\",\n        className,\n      )}\n    >\n      <span\n        className={mergeClassNames(\n          \"bg-ds-surface-3 px-2 py-1 text-xs font-medium uppercase tracking-[0.05em] text-ds-2\",\n          isRtl ? \"border-l border-ds-border-2\" : \"border-r border-ds-border-2\",\n          leftClassName,\n        )}\n      >\n        {leftLabel}\n      </span>\n      <span\n        dir={rightLabelDir}\n        className={mergeClassNames(\n          \"min-w-0 px-2 py-1 text-xs font-medium text-ds-1\",\n          rightClassName,\n        )}\n      >\n        {truncateRight ? (\n          <TruncatedText\n            maxWidth={rightMaxWidth}\n            showTitleOnHover={showRightTitleOnHover}\n          >\n            {rightLabel}\n          </TruncatedText>\n        ) : (\n          rightLabel\n        )}\n      </span>\n    </span>\n  );\n}\n\nexport type StatusDotChipTone = \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport interface StatusDotChipProps {\n  label: string;\n  tone?: StatusDotChipTone;\n  className?: string;\n}\n\nconst toneClasses: Record<StatusDotChipTone, string> = {\n  success:\n    \"bg-ds-state-success-surface text-ds-state-success-text border-ds-state-success-border\",\n  warning:\n    \"bg-ds-state-warning-surface text-ds-state-warning-text border-ds-state-warning-border\",\n  danger:\n    \"bg-ds-state-error-surface text-ds-state-error-text border-ds-state-error-border\",\n  info: \"bg-ds-state-info-surface text-ds-state-info-text border-ds-state-info-border\",\n};\n\nconst dotToneClasses: Record<StatusDotChipTone, string> = {\n  success: \"bg-ds-state-success\",\n  warning: \"bg-ds-state-warning\",\n  danger: \"bg-ds-state-danger\",\n  info: \"bg-ds-state-info\",\n};\n\nexport function StatusDotChip({\n  label,\n  tone = \"info\",\n  className,\n}: StatusDotChipProps) {\n  return (\n    <span\n      className={mergeClassNames(\n        \"inline-flex items-center gap-2 rounded-md border px-3 py-1 text-sm font-medium\",\n        toneClasses[tone],\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={mergeClassNames(\n          \"h-2.5 w-2.5 rounded-full\",\n          dotToneClasses[tone],\n        )}\n      />\n      <span>{label}</span>\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{chroma-grid-DcZ9f4Ui.cjs → chroma-grid-CTDtdFUm.cjs}

@@ -1,5 +1,4 @@
-require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-LRbEQHYs.cjs");
+const require_utils = require("./utils-CoA0q63n.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -218,4 +217,4 @@ Object.defineProperty(exports, "ChromaGrid", {
 	}
 });
 
-//# sourceMappingURL=chroma-grid-DcZ9f4Ui.cjs.map
+//# sourceMappingURL=chroma-grid-CTDtdFUm.cjs.map

package/dist/chunks/{chroma-grid-DcZ9f4Ui.cjs.map → chroma-grid-CTDtdFUm.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"chroma-grid-DcZ9f4Ui.cjs","names":[],"sources":["../../src/components/effects/chroma-grid/ChromaGrid.tsx"],"sourcesContent":["import { useState, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { ChromaGridProps, ChromaGridItem } from \"./types\";\n\nconst borderRadiusMap = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  \"2xl\": \"rounded-2xl\",\n};\n\nconst defaultColors = [\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-info) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-warning) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent-hover) 0%, var(--ds-color-success) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-success) 100%)\",\n];\n\nconst getAnimation = (\n  animation: string,\n  index: number,\n  staggerDelay: number,\n) => {\n  const delay = (index * staggerDelay) / 1000;\n\n  switch (animation) {\n    case \"wave\":\n      return {\n        initial: { opacity: 0, y: 30, rotateX: -15 },\n        animate: { opacity: 1, y: 0, rotateX: 0 },\n        transition: { delay, duration: 0.6, ease: [0.23, 1, 0.32, 1] as const },\n      };\n    case \"pulse\":\n      return {\n        initial: { scale: 0.8, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 200,\n        },\n      };\n    case \"fadeIn\":\n      return {\n        initial: { opacity: 0 },\n        animate: { opacity: 1 },\n        transition: { delay, duration: 0.4 },\n      };\n    case \"scale\":\n      return {\n        initial: { scale: 0, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 300,\n          damping: 20,\n        },\n      };\n    default:\n      return {};\n  }\n};\n\nconst getHoverEffect = (effect: string) => {\n  switch (effect) {\n    case \"lift\":\n      return { y: -8, transition: { duration: 0.3 } };\n    case \"glow\":\n      return {\n        boxShadow:\n          \"0 0 30px color-mix(in srgb, var(--ds-color-accent) 45%, transparent)\",\n        transition: { duration: 0.3 },\n      };\n    case \"scale\":\n      return { scale: 1.05, transition: { duration: 0.3 } };\n    case \"tilt\":\n      return { rotateY: 5, rotateX: 5, transition: { duration: 0.3 } };\n    default:\n      return {};\n  }\n};\n\ninterface GridItemProps {\n  item: ChromaGridItem;\n  index: number;\n  animation: string;\n  staggerDelay: number;\n  hoverEffect: string;\n  variant: string;\n  borderRadius: string;\n  minHeight: number;\n  spotlight: boolean;\n}\n\nconst GridItem = ({\n  item,\n  index,\n  animation,\n  staggerDelay,\n  hoverEffect,\n  variant,\n  borderRadius,\n  minHeight,\n  spotlight,\n}: GridItemProps) => {\n  const itemRef = useRef<HTMLDivElement>(null);\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const color = item.color || defaultColors[index % defaultColors.length];\n  const animationProps = getAnimation(animation, index, staggerDelay);\n  const hoverProps = getHoverEffect(hoverEffect);\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (!itemRef.current || !spotlight) return;\n    const rect = itemRef.current.getBoundingClientRect();\n    setMousePosition({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  const gridSpan =\n    item.size && item.size > 1\n      ? { gridColumn: `span ${item.size}`, gridRow: `span ${item.size}` }\n      : {};\n\n  const variantStyles = {\n    glass: {\n      backgroundColor: \"rgba(255, 255, 255, 0.1)\",\n      backdropFilter: \"blur(20px)\",\n      WebkitBackdropFilter: \"blur(20px)\",\n    },\n    solid: {},\n    gradient: { background: color },\n  };\n\n  return (\n    <motion.div\n      ref={itemRef}\n      className={mergeClassNames(\n        \"relative overflow-hidden cursor-pointer transition-shadow\",\n        borderRadiusMap[borderRadius as keyof typeof borderRadiusMap],\n        variant === \"glass\" && \"border border-ds-border-2/50\",\n        item.className,\n      )}\n      style={{\n        minHeight:\n          item.size && item.size > 1 ? minHeight * item.size : minHeight,\n        ...gridSpan,\n        ...variantStyles[variant as keyof typeof variantStyles],\n        ...(variant !== \"glass\" && { background: color }),\n      }}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={item.onClick}\n      {...animationProps}\n      whileHover={hoverProps}\n    >\n      {/* Spotlight effect */}\n      {spotlight && isHovered && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          style={{\n            background: `radial-gradient(300px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.2), transparent 70%)`,\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.2 }}\n        />\n      )}\n\n      {/* Glass overlay for gradient variant */}\n      {variant === \"gradient\" && (\n        <div className=\"absolute inset-0 bg-ds-canvas/15\" />\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10 h-full flex flex-col justify-center items-center p-6 text-center\">\n        {item.icon && (\n          <div className=\"text-4xl text-ds-on-accent mb-3 drop-shadow-lg\">\n            {item.icon}\n          </div>\n        )}\n        {item.title && (\n          <h3 className=\"text-lg font-bold text-ds-on-accent mb-1 drop-shadow-md\">\n            {item.title}\n          </h3>\n        )}\n        {item.description && (\n          <p className=\"text-sm text-ds-on-accent/80 drop-shadow-sm\">\n            {item.description}\n          </p>\n        )}\n        {item.content}\n      </div>\n    </motion.div>\n  );\n};\n\nexport const ChromaGrid = ({\n  items,\n  className,\n  columns = 3,\n  gap = 16,\n  minHeight = 200,\n  animation = \"wave\",\n  staggerDelay = 100,\n  hoverEffect = \"lift\",\n  variant = \"gradient\",\n  borderRadius = \"xl\",\n  spotlight = true,\n  style,\n}: ChromaGridProps) => {\n  return (\n    <div\n      className={mergeClassNames(\"grid w-full\", className)}\n      style={{\n        gridTemplateColumns: `repeat(${columns}, 1fr)`,\n        gap: `${gap}px`,\n        ...style,\n      }}\n    >\n      {items.map((item, index) => (\n        <GridItem\n          key={item.id}\n          item={item}\n          index={index}\n          animation={animation}\n          staggerDelay={staggerDelay}\n          hoverEffect={hoverEffect}\n          variant={variant}\n          borderRadius={borderRadius}\n          minHeight={minHeight}\n          spotlight={spotlight}\n        />\n      ))}\n    </div>\n  );\n};\n\nChromaGrid.displayName = \"ChromaGrid\";\n\nexport default ChromaGrid;\n"],"mappings":"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"}
+{"version":3,"file":"chroma-grid-CTDtdFUm.cjs","names":[],"sources":["../../src/components/effects/chroma-grid/ChromaGrid.tsx"],"sourcesContent":["import { useState, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { ChromaGridProps, ChromaGridItem } from \"./types\";\n\nconst borderRadiusMap = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  \"2xl\": \"rounded-2xl\",\n};\n\nconst defaultColors = [\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-info) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-warning) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent-hover) 0%, var(--ds-color-success) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-success) 100%)\",\n];\n\nconst getAnimation = (\n  animation: string,\n  index: number,\n  staggerDelay: number,\n) => {\n  const delay = (index * staggerDelay) / 1000;\n\n  switch (animation) {\n    case \"wave\":\n      return {\n        initial: { opacity: 0, y: 30, rotateX: -15 },\n        animate: { opacity: 1, y: 0, rotateX: 0 },\n        transition: { delay, duration: 0.6, ease: [0.23, 1, 0.32, 1] as const },\n      };\n    case \"pulse\":\n      return {\n        initial: { scale: 0.8, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 200,\n        },\n      };\n    case \"fadeIn\":\n      return {\n        initial: { opacity: 0 },\n        animate: { opacity: 1 },\n        transition: { delay, duration: 0.4 },\n      };\n    case \"scale\":\n      return {\n        initial: { scale: 0, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 300,\n          damping: 20,\n        },\n      };\n    default:\n      return {};\n  }\n};\n\nconst getHoverEffect = (effect: string) => {\n  switch (effect) {\n    case \"lift\":\n      return { y: -8, transition: { duration: 0.3 } };\n    case \"glow\":\n      return {\n        boxShadow:\n          \"0 0 30px color-mix(in srgb, var(--ds-color-accent) 45%, transparent)\",\n        transition: { duration: 0.3 },\n      };\n    case \"scale\":\n      return { scale: 1.05, transition: { duration: 0.3 } };\n    case \"tilt\":\n      return { rotateY: 5, rotateX: 5, transition: { duration: 0.3 } };\n    default:\n      return {};\n  }\n};\n\ninterface GridItemProps {\n  item: ChromaGridItem;\n  index: number;\n  animation: string;\n  staggerDelay: number;\n  hoverEffect: string;\n  variant: string;\n  borderRadius: string;\n  minHeight: number;\n  spotlight: boolean;\n}\n\nconst GridItem = ({\n  item,\n  index,\n  animation,\n  staggerDelay,\n  hoverEffect,\n  variant,\n  borderRadius,\n  minHeight,\n  spotlight,\n}: GridItemProps) => {\n  const itemRef = useRef<HTMLDivElement>(null);\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const color = item.color || defaultColors[index % defaultColors.length];\n  const animationProps = getAnimation(animation, index, staggerDelay);\n  const hoverProps = getHoverEffect(hoverEffect);\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (!itemRef.current || !spotlight) return;\n    const rect = itemRef.current.getBoundingClientRect();\n    setMousePosition({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  const gridSpan =\n    item.size && item.size > 1\n      ? { gridColumn: `span ${item.size}`, gridRow: `span ${item.size}` }\n      : {};\n\n  const variantStyles = {\n    glass: {\n      backgroundColor: \"rgba(255, 255, 255, 0.1)\",\n      backdropFilter: \"blur(20px)\",\n      WebkitBackdropFilter: \"blur(20px)\",\n    },\n    solid: {},\n    gradient: { background: color },\n  };\n\n  return (\n    <motion.div\n      ref={itemRef}\n      className={mergeClassNames(\n        \"relative overflow-hidden cursor-pointer transition-shadow\",\n        borderRadiusMap[borderRadius as keyof typeof borderRadiusMap],\n        variant === \"glass\" && \"border border-ds-border-2/50\",\n        item.className,\n      )}\n      style={{\n        minHeight:\n          item.size && item.size > 1 ? minHeight * item.size : minHeight,\n        ...gridSpan,\n        ...variantStyles[variant as keyof typeof variantStyles],\n        ...(variant !== \"glass\" && { background: color }),\n      }}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={item.onClick}\n      {...animationProps}\n      whileHover={hoverProps}\n    >\n      {/* Spotlight effect */}\n      {spotlight && isHovered && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          style={{\n            background: `radial-gradient(300px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.2), transparent 70%)`,\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.2 }}\n        />\n      )}\n\n      {/* Glass overlay for gradient variant */}\n      {variant === \"gradient\" && (\n        <div className=\"absolute inset-0 bg-ds-canvas/15\" />\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10 h-full flex flex-col justify-center items-center p-6 text-center\">\n        {item.icon && (\n          <div className=\"text-4xl text-ds-on-accent mb-3 drop-shadow-lg\">\n            {item.icon}\n          </div>\n        )}\n        {item.title && (\n          <h3 className=\"text-lg font-bold text-ds-on-accent mb-1 drop-shadow-md\">\n            {item.title}\n          </h3>\n        )}\n        {item.description && (\n          <p className=\"text-sm text-ds-on-accent/80 drop-shadow-sm\">\n            {item.description}\n          </p>\n        )}\n        {item.content}\n      </div>\n    </motion.div>\n  );\n};\n\nexport const ChromaGrid = ({\n  items,\n  className,\n  columns = 3,\n  gap = 16,\n  minHeight = 200,\n  animation = \"wave\",\n  staggerDelay = 100,\n  hoverEffect = \"lift\",\n  variant = \"gradient\",\n  borderRadius = \"xl\",\n  spotlight = true,\n  style,\n}: ChromaGridProps) => {\n  return (\n    <div\n      className={mergeClassNames(\"grid w-full\", className)}\n      style={{\n        gridTemplateColumns: `repeat(${columns}, 1fr)`,\n        gap: `${gap}px`,\n        ...style,\n      }}\n    >\n      {items.map((item, index) => (\n        <GridItem\n          key={item.id}\n          item={item}\n          index={index}\n          animation={animation}\n          staggerDelay={staggerDelay}\n          hoverEffect={hoverEffect}\n          variant={variant}\n          borderRadius={borderRadius}\n          minHeight={minHeight}\n          spotlight={spotlight}\n        />\n      ))}\n    </div>\n  );\n};\n\nChromaGrid.displayName = \"ChromaGrid\";\n\nexport default ChromaGrid;\n"],"mappings":"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"}

package/dist/chunks/{chroma-grid-opB2DBtS.mjs → chroma-grid-DuLTfGVP.mjs}

@@ -1,4 +1,4 @@
-import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
+import { n as mergeClassNames } from "./utils-Dc7j29ec.mjs";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
@@ -212,4 +212,4 @@ ChromaGrid.displayName = "ChromaGrid";
 //#endregion
 export { ChromaGrid as t };
 
-//# sourceMappingURL=chroma-grid-opB2DBtS.mjs.map
+//# sourceMappingURL=chroma-grid-DuLTfGVP.mjs.map

package/dist/chunks/{chroma-grid-opB2DBtS.mjs.map → chroma-grid-DuLTfGVP.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"chroma-grid-opB2DBtS.mjs","names":[],"sources":["../../src/components/effects/chroma-grid/ChromaGrid.tsx"],"sourcesContent":["import { useState, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { ChromaGridProps, ChromaGridItem } from \"./types\";\n\nconst borderRadiusMap = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  \"2xl\": \"rounded-2xl\",\n};\n\nconst defaultColors = [\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-info) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-warning) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent-hover) 0%, var(--ds-color-success) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-success) 100%)\",\n];\n\nconst getAnimation = (\n  animation: string,\n  index: number,\n  staggerDelay: number,\n) => {\n  const delay = (index * staggerDelay) / 1000;\n\n  switch (animation) {\n    case \"wave\":\n      return {\n        initial: { opacity: 0, y: 30, rotateX: -15 },\n        animate: { opacity: 1, y: 0, rotateX: 0 },\n        transition: { delay, duration: 0.6, ease: [0.23, 1, 0.32, 1] as const },\n      };\n    case \"pulse\":\n      return {\n        initial: { scale: 0.8, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 200,\n        },\n      };\n    case \"fadeIn\":\n      return {\n        initial: { opacity: 0 },\n        animate: { opacity: 1 },\n        transition: { delay, duration: 0.4 },\n      };\n    case \"scale\":\n      return {\n        initial: { scale: 0, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 300,\n          damping: 20,\n        },\n      };\n    default:\n      return {};\n  }\n};\n\nconst getHoverEffect = (effect: string) => {\n  switch (effect) {\n    case \"lift\":\n      return { y: -8, transition: { duration: 0.3 } };\n    case \"glow\":\n      return {\n        boxShadow:\n          \"0 0 30px color-mix(in srgb, var(--ds-color-accent) 45%, transparent)\",\n        transition: { duration: 0.3 },\n      };\n    case \"scale\":\n      return { scale: 1.05, transition: { duration: 0.3 } };\n    case \"tilt\":\n      return { rotateY: 5, rotateX: 5, transition: { duration: 0.3 } };\n    default:\n      return {};\n  }\n};\n\ninterface GridItemProps {\n  item: ChromaGridItem;\n  index: number;\n  animation: string;\n  staggerDelay: number;\n  hoverEffect: string;\n  variant: string;\n  borderRadius: string;\n  minHeight: number;\n  spotlight: boolean;\n}\n\nconst GridItem = ({\n  item,\n  index,\n  animation,\n  staggerDelay,\n  hoverEffect,\n  variant,\n  borderRadius,\n  minHeight,\n  spotlight,\n}: GridItemProps) => {\n  const itemRef = useRef<HTMLDivElement>(null);\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const color = item.color || defaultColors[index % defaultColors.length];\n  const animationProps = getAnimation(animation, index, staggerDelay);\n  const hoverProps = getHoverEffect(hoverEffect);\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (!itemRef.current || !spotlight) return;\n    const rect = itemRef.current.getBoundingClientRect();\n    setMousePosition({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  const gridSpan =\n    item.size && item.size > 1\n      ? { gridColumn: `span ${item.size}`, gridRow: `span ${item.size}` }\n      : {};\n\n  const variantStyles = {\n    glass: {\n      backgroundColor: \"rgba(255, 255, 255, 0.1)\",\n      backdropFilter: \"blur(20px)\",\n      WebkitBackdropFilter: \"blur(20px)\",\n    },\n    solid: {},\n    gradient: { background: color },\n  };\n\n  return (\n    <motion.div\n      ref={itemRef}\n      className={mergeClassNames(\n        \"relative overflow-hidden cursor-pointer transition-shadow\",\n        borderRadiusMap[borderRadius as keyof typeof borderRadiusMap],\n        variant === \"glass\" && \"border border-ds-border-2/50\",\n        item.className,\n      )}\n      style={{\n        minHeight:\n          item.size && item.size > 1 ? minHeight * item.size : minHeight,\n        ...gridSpan,\n        ...variantStyles[variant as keyof typeof variantStyles],\n        ...(variant !== \"glass\" && { background: color }),\n      }}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={item.onClick}\n      {...animationProps}\n      whileHover={hoverProps}\n    >\n      {/* Spotlight effect */}\n      {spotlight && isHovered && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          style={{\n            background: `radial-gradient(300px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.2), transparent 70%)`,\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.2 }}\n        />\n      )}\n\n      {/* Glass overlay for gradient variant */}\n      {variant === \"gradient\" && (\n        <div className=\"absolute inset-0 bg-ds-canvas/15\" />\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10 h-full flex flex-col justify-center items-center p-6 text-center\">\n        {item.icon && (\n          <div className=\"text-4xl text-ds-on-accent mb-3 drop-shadow-lg\">\n            {item.icon}\n          </div>\n        )}\n        {item.title && (\n          <h3 className=\"text-lg font-bold text-ds-on-accent mb-1 drop-shadow-md\">\n            {item.title}\n          </h3>\n        )}\n        {item.description && (\n          <p className=\"text-sm text-ds-on-accent/80 drop-shadow-sm\">\n            {item.description}\n          </p>\n        )}\n        {item.content}\n      </div>\n    </motion.div>\n  );\n};\n\nexport const ChromaGrid = ({\n  items,\n  className,\n  columns = 3,\n  gap = 16,\n  minHeight = 200,\n  animation = \"wave\",\n  staggerDelay = 100,\n  hoverEffect = \"lift\",\n  variant = \"gradient\",\n  borderRadius = \"xl\",\n  spotlight = true,\n  style,\n}: ChromaGridProps) => {\n  return (\n    <div\n      className={mergeClassNames(\"grid w-full\", className)}\n      style={{\n        gridTemplateColumns: `repeat(${columns}, 1fr)`,\n        gap: `${gap}px`,\n        ...style,\n      }}\n    >\n      {items.map((item, index) => (\n        <GridItem\n          key={item.id}\n          item={item}\n          index={index}\n          animation={animation}\n          staggerDelay={staggerDelay}\n          hoverEffect={hoverEffect}\n          variant={variant}\n          borderRadius={borderRadius}\n          minHeight={minHeight}\n          spotlight={spotlight}\n        />\n      ))}\n    </div>\n  );\n};\n\nChromaGrid.displayName = \"ChromaGrid\";\n\nexport default ChromaGrid;\n"],"mappings":"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"}
+{"version":3,"file":"chroma-grid-DuLTfGVP.mjs","names":[],"sources":["../../src/components/effects/chroma-grid/ChromaGrid.tsx"],"sourcesContent":["import { useState, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { ChromaGridProps, ChromaGridItem } from \"./types\";\n\nconst borderRadiusMap = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  \"2xl\": \"rounded-2xl\",\n};\n\nconst defaultColors = [\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-info) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-warning) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent-hover) 0%, var(--ds-color-success) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-success) 100%)\",\n];\n\nconst getAnimation = (\n  animation: string,\n  index: number,\n  staggerDelay: number,\n) => {\n  const delay = (index * staggerDelay) / 1000;\n\n  switch (animation) {\n    case \"wave\":\n      return {\n        initial: { opacity: 0, y: 30, rotateX: -15 },\n        animate: { opacity: 1, y: 0, rotateX: 0 },\n        transition: { delay, duration: 0.6, ease: [0.23, 1, 0.32, 1] as const },\n      };\n    case \"pulse\":\n      return {\n        initial: { scale: 0.8, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 200,\n        },\n      };\n    case \"fadeIn\":\n      return {\n        initial: { opacity: 0 },\n        animate: { opacity: 1 },\n        transition: { delay, duration: 0.4 },\n      };\n    case \"scale\":\n      return {\n        initial: { scale: 0, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 300,\n          damping: 20,\n        },\n      };\n    default:\n      return {};\n  }\n};\n\nconst getHoverEffect = (effect: string) => {\n  switch (effect) {\n    case \"lift\":\n      return { y: -8, transition: { duration: 0.3 } };\n    case \"glow\":\n      return {\n        boxShadow:\n          \"0 0 30px color-mix(in srgb, var(--ds-color-accent) 45%, transparent)\",\n        transition: { duration: 0.3 },\n      };\n    case \"scale\":\n      return { scale: 1.05, transition: { duration: 0.3 } };\n    case \"tilt\":\n      return { rotateY: 5, rotateX: 5, transition: { duration: 0.3 } };\n    default:\n      return {};\n  }\n};\n\ninterface GridItemProps {\n  item: ChromaGridItem;\n  index: number;\n  animation: string;\n  staggerDelay: number;\n  hoverEffect: string;\n  variant: string;\n  borderRadius: string;\n  minHeight: number;\n  spotlight: boolean;\n}\n\nconst GridItem = ({\n  item,\n  index,\n  animation,\n  staggerDelay,\n  hoverEffect,\n  variant,\n  borderRadius,\n  minHeight,\n  spotlight,\n}: GridItemProps) => {\n  const itemRef = useRef<HTMLDivElement>(null);\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const color = item.color || defaultColors[index % defaultColors.length];\n  const animationProps = getAnimation(animation, index, staggerDelay);\n  const hoverProps = getHoverEffect(hoverEffect);\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (!itemRef.current || !spotlight) return;\n    const rect = itemRef.current.getBoundingClientRect();\n    setMousePosition({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  const gridSpan =\n    item.size && item.size > 1\n      ? { gridColumn: `span ${item.size}`, gridRow: `span ${item.size}` }\n      : {};\n\n  const variantStyles = {\n    glass: {\n      backgroundColor: \"rgba(255, 255, 255, 0.1)\",\n      backdropFilter: \"blur(20px)\",\n      WebkitBackdropFilter: \"blur(20px)\",\n    },\n    solid: {},\n    gradient: { background: color },\n  };\n\n  return (\n    <motion.div\n      ref={itemRef}\n      className={mergeClassNames(\n        \"relative overflow-hidden cursor-pointer transition-shadow\",\n        borderRadiusMap[borderRadius as keyof typeof borderRadiusMap],\n        variant === \"glass\" && \"border border-ds-border-2/50\",\n        item.className,\n      )}\n      style={{\n        minHeight:\n          item.size && item.size > 1 ? minHeight * item.size : minHeight,\n        ...gridSpan,\n        ...variantStyles[variant as keyof typeof variantStyles],\n        ...(variant !== \"glass\" && { background: color }),\n      }}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={item.onClick}\n      {...animationProps}\n      whileHover={hoverProps}\n    >\n      {/* Spotlight effect */}\n      {spotlight && isHovered && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          style={{\n            background: `radial-gradient(300px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.2), transparent 70%)`,\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.2 }}\n        />\n      )}\n\n      {/* Glass overlay for gradient variant */}\n      {variant === \"gradient\" && (\n        <div className=\"absolute inset-0 bg-ds-canvas/15\" />\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10 h-full flex flex-col justify-center items-center p-6 text-center\">\n        {item.icon && (\n          <div className=\"text-4xl text-ds-on-accent mb-3 drop-shadow-lg\">\n            {item.icon}\n          </div>\n        )}\n        {item.title && (\n          <h3 className=\"text-lg font-bold text-ds-on-accent mb-1 drop-shadow-md\">\n            {item.title}\n          </h3>\n        )}\n        {item.description && (\n          <p className=\"text-sm text-ds-on-accent/80 drop-shadow-sm\">\n            {item.description}\n          </p>\n        )}\n        {item.content}\n      </div>\n    </motion.div>\n  );\n};\n\nexport const ChromaGrid = ({\n  items,\n  className,\n  columns = 3,\n  gap = 16,\n  minHeight = 200,\n  animation = \"wave\",\n  staggerDelay = 100,\n  hoverEffect = \"lift\",\n  variant = \"gradient\",\n  borderRadius = \"xl\",\n  spotlight = true,\n  style,\n}: ChromaGridProps) => {\n  return (\n    <div\n      className={mergeClassNames(\"grid w-full\", className)}\n      style={{\n        gridTemplateColumns: `repeat(${columns}, 1fr)`,\n        gap: `${gap}px`,\n        ...style,\n      }}\n    >\n      {items.map((item, index) => (\n        <GridItem\n          key={item.id}\n          item={item}\n          index={index}\n          animation={animation}\n          staggerDelay={staggerDelay}\n          hoverEffect={hoverEffect}\n          variant={variant}\n          borderRadius={borderRadius}\n          minHeight={minHeight}\n          spotlight={spotlight}\n        />\n      ))}\n    </div>\n  );\n};\n\nChromaGrid.displayName = \"ChromaGrid\";\n\nexport default ChromaGrid;\n"],"mappings":";;;;;AAKA,IAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,IAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,gBACJ,WACA,OACA,iBACG;CACH,MAAM,QAAS,QAAQ,eAAgB;CAEvC,QAAQ,WAAR;EACE,KAAK,QACH,OAAO;GACL,SAAS;IAAE,SAAS;IAAG,GAAG;IAAI,SAAS;GAAI;GAC3C,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG,SAAS;GAAE;GACxC,YAAY;IAAE;IAAO,UAAU;IAAK,MAAM;KAAC;KAAM;KAAG;KAAM;IAAC;GAAW;EACxE;EACF,KAAK,SACH,OAAO;GACL,SAAS;IAAE,OAAO;IAAK,SAAS;GAAE;GAClC,SAAS;IAAE,OAAO;IAAG,SAAS;GAAE;GAChC,YAAY;IACV;IACA,UAAU;IACV,MAAM;IACN,WAAW;GACb;EACF;EACF,KAAK,UACH,OAAO;GACL,SAAS,EAAE,SAAS,EAAE;GACtB,SAAS,EAAE,SAAS,EAAE;GACtB,YAAY;IAAE;IAAO,UAAU;GAAI;EACrC;EACF,KAAK,SACH,OAAO;GACL,SAAS;IAAE,OAAO;IAAG,SAAS;GAAE;GAChC,SAAS;IAAE,OAAO;IAAG,SAAS;GAAE;GAChC,YAAY;IACV;IACA,UAAU;IACV,MAAM;IACN,WAAW;IACX,SAAS;GACX;EACF;EACF,SACE,OAAO,CAAC;CACZ;AACF;AAEA,IAAM,kBAAkB,WAAmB;CACzC,QAAQ,QAAR;EACE,KAAK,QACH,OAAO;GAAE,GAAG;GAAI,YAAY,EAAE,UAAU,GAAI;EAAE;EAChD,KAAK,QACH,OAAO;GACL,WACE;GACF,YAAY,EAAE,UAAU,GAAI;EAC9B;EACF,KAAK,SACH,OAAO;GAAE,OAAO;GAAM,YAAY,EAAE,UAAU,GAAI;EAAE;EACtD,KAAK,QACH,OAAO;GAAE,SAAS;GAAG,SAAS;GAAG,YAAY,EAAE,UAAU,GAAI;EAAE;EACjE,SACE,OAAO,CAAC;CACZ;AACF;AAcA,IAAM,YAAY,EAChB,MACA,OACA,WACA,cACA,aACA,SACA,cACA,WACA,gBACmB;CACnB,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,eAAe,oBAAoB,SAAS;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CACjE,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,MAAM,QAAQ,KAAK,SAAS,cAAc,QAAQ,cAAc;CAChE,MAAM,iBAAiB,aAAa,WAAW,OAAO,YAAY;CAClE,MAAM,aAAa,eAAe,WAAW;CAE7C,MAAM,mBAAmB,MAAwB;EAC/C,IAAI,CAAC,QAAQ,WAAW,CAAC,WAAW;EACpC,MAAM,OAAO,QAAQ,QAAQ,sBAAsB;EACnD,iBAAiB;GACf,GAAG,EAAE,UAAU,KAAK;GACpB,GAAG,EAAE,UAAU,KAAK;EACtB,CAAC;CACH;CAEA,MAAM,WACJ,KAAK,QAAQ,KAAK,OAAO,IACrB;EAAE,YAAY,QAAQ,KAAK;EAAQ,SAAS,QAAQ,KAAK;CAAO,IAChE,CAAC;CAEP,MAAM,gBAAgB;EACpB,OAAO;GACL,iBAAiB;GACjB,gBAAgB;GAChB,sBAAsB;EACxB;EACA,OAAO,CAAC;EACR,UAAU,EAAE,YAAY,MAAM;CAChC;CAEA,OACE,qBAAC,OAAO,KAAR;EACE,KAAK;EACL,WAAW,gBACT,6DACA,gBAAgB,eAChB,YAAY,WAAW,gCACvB,KAAK,SACP;EACA,OAAO;GACL,WACE,KAAK,QAAQ,KAAK,OAAO,IAAI,YAAY,KAAK,OAAO;GACvD,GAAG;GACH,GAAG,cAAc;GACjB,GAAI,YAAY,WAAW,EAAE,YAAY,MAAM;EACjD;EACA,aAAa;EACb,oBAAoB,aAAa,IAAI;EACrC,oBAAoB,aAAa,KAAK;EACtC,SAAS,KAAK;EACd,GAAI;EACJ,YAAY;YApBd;GAuBG,aAAa,aACZ,oBAAC,OAAO,KAAR;IACE,WAAU;IACV,OAAO,EACL,YAAY,mCAAmC,cAAc,EAAE,KAAK,cAAc,EAAE,6CACtF;IACA,SAAS,EAAE,SAAS,EAAE;IACtB,SAAS,EAAE,SAAS,EAAE;IACtB,YAAY,EAAE,UAAU,GAAI;GAC7B,CAAA;GAIF,YAAY,cACX,oBAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;GAIrD,qBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAK,QACJ,oBAAC,OAAD;MAAK,WAAU;gBACZ,KAAK;KACH,CAAA;KAEN,KAAK,SACJ,oBAAC,MAAD;MAAI,WAAU;gBACX,KAAK;KACJ,CAAA;KAEL,KAAK,eACJ,oBAAC,KAAD;MAAG,WAAU;gBACV,KAAK;KACL,CAAA;KAEJ,KAAK;IACH;;EACK;;AAEhB;AAEA,IAAa,cAAc,EACzB,OACA,WACA,UAAU,GACV,MAAM,IACN,YAAY,KACZ,YAAY,QACZ,eAAe,KACf,cAAc,QACd,UAAU,YACV,eAAe,MACf,YAAY,MACZ,YACqB;CACrB,OACE,oBAAC,OAAD;EACE,WAAW,gBAAgB,eAAe,SAAS;EACnD,OAAO;GACL,qBAAqB,UAAU,QAAQ;GACvC,KAAK,GAAG,IAAI;GACZ,GAAG;EACL;YAEC,MAAM,KAAK,MAAM,UAChB,oBAAC,UAAD;GAEQ;GACC;GACI;GACG;GACD;GACJ;GACK;GACH;GACA;EACZ,GAVM,KAAK,EAUX,CACF;CACE,CAAA;AAET;AAEA,WAAW,cAAc"}

package/dist/chunks/{color-palette-pLh6En3n.cjs → color-palette-DQQ9UV0N.cjs}

@@ -1,4 +1,4 @@
-const require_chunk = require("./chunk-B_GkZjkl.cjs");
+const require_chunk = require("./chunk-D6vf50IK.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -381,4 +381,4 @@ Object.defineProperty(exports, "textGroup", {
 	}
 });
 
-//# sourceMappingURL=color-palette-pLh6En3n.cjs.map
+//# sourceMappingURL=color-palette-DQQ9UV0N.cjs.map

package/dist/chunks/{color-palette-pLh6En3n.cjs.map → color-palette-DQQ9UV0N.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"color-palette-pLh6En3n.cjs","names":[],"sources":["../../src/components/data-display/color-palette/ColorPalette.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface TokenSwatch {\n  /** Tailwind class displayed as the main label, e.g. \"bg-ds-surface-1\" */\n  twClass: string;\n  /** Underlying CSS variable, e.g. \"var(--ds-surface-1)\" */\n  cssVar: string;\n  /** Short role description */\n  role: string;\n  /** Hint for readable label on the swatch itself */\n  textOnColor?: \"light\" | \"dark\" | \"auto\";\n}\n\nexport interface TokenGroup {\n  /** Section heading */\n  name: string;\n  swatches: TokenSwatch[];\n}\n\nexport interface ColorPaletteProps {\n  /** Override the built-in groups with custom data */\n  groups?: TokenGroup[];\n  className?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Canonical token groups (correct --ds-* CSS variables)\n// ---------------------------------------------------------------------------\n\nexport const surfaceGroup: TokenGroup = {\n  name: \"Surfaces\",\n  swatches: [\n    { twClass: \"bg-ds-canvas\",    cssVar: \"var(--ds-surface-canvas)\", role: \"Page / app canvas\",      textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-1\", cssVar: \"var(--ds-surface-1)\",      role: \"Card / panel\",           textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-2\", cssVar: \"var(--ds-surface-2)\",      role: \"Elevated (modal/popover)\", textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-3\", cssVar: \"var(--ds-surface-3)\",      role: \"Highest elevated\",       textOnColor: \"dark\" },\n    { twClass: \"bg-ds-accent-subtle\", cssVar: \"var(--ds-color-accent-subtle)\", role: \"Accent tinted surface\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const textGroup: TokenGroup = {\n  name: \"Text\",\n  swatches: [\n    { twClass: \"text-ds-1\", cssVar: \"var(--ds-text-1)\", role: \"Primary text\",         textOnColor: \"light\" },\n    { twClass: \"text-ds-2\", cssVar: \"var(--ds-text-2)\", role: \"Secondary / labels\",   textOnColor: \"light\" },\n    { twClass: \"text-ds-3\", cssVar: \"var(--ds-text-3)\", role: \"Muted / hints\",        textOnColor: \"light\" },\n    { twClass: \"text-ds-on-accent\", cssVar: \"var(--ds-color-on-accent)\", role: \"On accent bg\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const borderGroup: TokenGroup = {\n  name: \"Borders\",\n  swatches: [\n    { twClass: \"border-ds-border-1\",     cssVar: \"var(--ds-border-1)\",    role: \"Strong border\",    textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-2\",     cssVar: \"var(--ds-border-2)\",    role: \"Default border\",   textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-3\",     cssVar: \"var(--ds-border-3)\",    role: \"Subtle divider\",   textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-4\",     cssVar: \"var(--ds-border-4)\",    role: \"Faintest border\",  textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-field\", cssVar: \"var(--ds-border-field)\", role: \"Input field border\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const accentGroup: TokenGroup = {\n  name: \"Accent\",\n  swatches: [\n    { twClass: \"bg-ds-accent\",       cssVar: \"var(--ds-color-accent)\",       role: \"Brand / interactive\",  textOnColor: \"light\" },\n    { twClass: \"bg-ds-accent-hover\", cssVar: \"var(--ds-color-accent-hover)\", role: \"Hover state\",          textOnColor: \"light\" },\n    { twClass: \"ring-ds-focus\",      cssVar: \"var(--ds-color-focus-ring)\",   role: \"Focus ring\",           textOnColor: \"light\" },\n  ],\n};\n\nexport const accentScaleGroup: TokenGroup = {\n  name: \"Accent Scale\",\n  swatches: [\n    { twClass: \"--ds-accent-50\",  cssVar: \"var(--ds-accent-50)\",  role: \"Lightest\",  textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-100\", cssVar: \"var(--ds-accent-100)\", role: \"100\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-200\", cssVar: \"var(--ds-accent-200)\", role: \"200\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-300\", cssVar: \"var(--ds-accent-300)\", role: \"300\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-400\", cssVar: \"var(--ds-accent-400)\", role: \"400\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-500\", cssVar: \"var(--ds-accent-500)\", role: \"Base (500)\", textOnColor: \"light\" },\n    { twClass: \"--ds-accent-600\", cssVar: \"var(--ds-accent-600)\", role: \"600\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-700\", cssVar: \"var(--ds-accent-700)\", role: \"700\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-800\", cssVar: \"var(--ds-accent-800)\", role: \"800\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-900\", cssVar: \"var(--ds-accent-900)\", role: \"Darkest\",   textOnColor: \"light\" },\n  ],\n};\n\nexport const brandGroup: TokenGroup = {\n  name: \"Brand Themes\",\n  swatches: [\n    { twClass: \"bg-ds-brand-purple\", cssVar: \"var(--ds-brand-purple)\", role: \"Purple (default)\", textOnColor: \"light\" },\n    { twClass: \"bg-ds-brand-teal\",   cssVar: \"var(--ds-brand-teal)\",   role: \"Teal\",             textOnColor: \"light\" },\n    { twClass: \"bg-ds-brand-yellow\", cssVar: \"var(--ds-brand-yellow)\", role: \"Yellow\",           textOnColor: \"dark\"  },\n    { twClass: \"bg-ds-brand-green\",  cssVar: \"var(--ds-brand-green)\",  role: \"Green\",            textOnColor: \"light\" },\n  ],\n};\n\nexport const statusGroup: TokenGroup = {\n  name: \"Status\",\n  swatches: [\n    { twClass: \"bg-ds-state-success\", cssVar: \"var(--ds-color-success)\", role: \"Success\",  textOnColor: \"light\" },\n    { twClass: \"bg-ds-state-warning\", cssVar: \"var(--ds-color-warning)\", role: \"Warning\",  textOnColor: \"dark\"  },\n    { twClass: \"bg-ds-state-danger\",  cssVar: \"var(--ds-color-danger)\",  role: \"Danger\",   textOnColor: \"light\" },\n    { twClass: \"bg-ds-state-info\",    cssVar: \"var(--ds-color-info)\",    role: \"Info\",     textOnColor: \"light\" },\n  ],\n};\n\nexport const defaultGroups: TokenGroup[] = [\n  surfaceGroup,\n  textGroup,\n  borderGroup,\n  accentGroup,\n  accentScaleGroup,\n  brandGroup,\n  statusGroup,\n];\n\n// ---------------------------------------------------------------------------\n// SwatchCard\n// ---------------------------------------------------------------------------\n\nfunction SwatchCard({ swatch }: { swatch: TokenSwatch }) {\n  const swatchRef = React.useRef<HTMLDivElement>(null);\n  const [hex, setHex] = React.useState<string>(\"\");\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    const el = swatchRef.current;\n    if (!el) return;\n    const bg = getComputedStyle(el).backgroundColor;\n    setHex(bg || \"\");\n  }, [swatch.cssVar]);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(swatch.twClass).catch(() => {});\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleCopy}\n      onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \" \") handleCopy(); }}\n      title={`Copy ${swatch.twClass}`}\n      className=\"group flex flex-col gap-0 rounded-xl border border-ds-border-2 overflow-hidden text-start cursor-pointer transition hover:shadow-md hover:border-ds-border-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus\"\n    >\n      {/* Color preview */}\n      <div\n        ref={swatchRef}\n        className=\"relative h-16 w-full flex items-end px-2 pb-1.5\"\n        style={{ backgroundColor: swatch.cssVar }}\n      >\n        {copied && (\n          <span className=\"absolute inset-0 flex items-center justify-center text-xs font-semibold bg-black/30 text-white rounded-t-xl\">\n            Copied!\n          </span>\n        )}\n        <span\n          className=\"font-mono text-[9px] leading-none opacity-70\"\n          style={{ color: swatch.textOnColor === \"light\" ? \"#fff\" : \"#000\" }}\n        >\n          {hex || \"LIVE\"}\n        </span>\n      </div>\n\n      {/* Meta */}\n      <div className=\"flex flex-col gap-0.5 px-3 py-2.5 bg-ds-surface-1\">\n        <span className=\"text-[11px] font-semibold font-mono text-ds-1 truncate\">\n          {swatch.twClass}\n        </span>\n        <span className=\"text-[10px] font-mono text-ds-3 truncate\">\n          {swatch.cssVar}\n        </span>\n        <span className=\"text-[10px] text-ds-2 mt-0.5\">{swatch.role}</span>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ColorPalette\n// ---------------------------------------------------------------------------\n\nexport default function ColorPalette({ groups, className }: ColorPaletteProps) {\n  const displayGroups = groups ?? defaultGroups;\n\n  return (\n    <div className={`space-y-8 ${className ?? \"\"}`}>\n      {displayGroups.map((group) => (\n        <section key={group.name}>\n          <h3 className=\"mb-3 text-sm font-semibold uppercase tracking-widest text-ds-2\">\n            {group.name}\n          </h3>\n          <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6\">\n            {group.swatches.map((swatch) => (\n              <SwatchCard key={swatch.twClass} swatch={swatch} />\n            ))}\n          </div>\n        </section>\n      ))}\n    </div>\n  );\n}\n\nexport { ColorPalette };\n"],"mappings":"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"}
+{"version":3,"file":"color-palette-DQQ9UV0N.cjs","names":[],"sources":["../../src/components/data-display/color-palette/ColorPalette.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface TokenSwatch {\n  /** Tailwind class displayed as the main label, e.g. \"bg-ds-surface-1\" */\n  twClass: string;\n  /** Underlying CSS variable, e.g. \"var(--ds-surface-1)\" */\n  cssVar: string;\n  /** Short role description */\n  role: string;\n  /** Hint for readable label on the swatch itself */\n  textOnColor?: \"light\" | \"dark\" | \"auto\";\n}\n\nexport interface TokenGroup {\n  /** Section heading */\n  name: string;\n  swatches: TokenSwatch[];\n}\n\nexport interface ColorPaletteProps {\n  /** Override the built-in groups with custom data */\n  groups?: TokenGroup[];\n  className?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Canonical token groups (correct --ds-* CSS variables)\n// ---------------------------------------------------------------------------\n\nexport const surfaceGroup: TokenGroup = {\n  name: \"Surfaces\",\n  swatches: [\n    { twClass: \"bg-ds-canvas\",    cssVar: \"var(--ds-surface-canvas)\", role: \"Page / app canvas\",      textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-1\", cssVar: \"var(--ds-surface-1)\",      role: \"Card / panel\",           textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-2\", cssVar: \"var(--ds-surface-2)\",      role: \"Elevated (modal/popover)\", textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-3\", cssVar: \"var(--ds-surface-3)\",      role: \"Highest elevated\",       textOnColor: \"dark\" },\n    { twClass: \"bg-ds-accent-subtle\", cssVar: \"var(--ds-color-accent-subtle)\", role: \"Accent tinted surface\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const textGroup: TokenGroup = {\n  name: \"Text\",\n  swatches: [\n    { twClass: \"text-ds-1\", cssVar: \"var(--ds-text-1)\", role: \"Primary text\",         textOnColor: \"light\" },\n    { twClass: \"text-ds-2\", cssVar: \"var(--ds-text-2)\", role: \"Secondary / labels\",   textOnColor: \"light\" },\n    { twClass: \"text-ds-3\", cssVar: \"var(--ds-text-3)\", role: \"Muted / hints\",        textOnColor: \"light\" },\n    { twClass: \"text-ds-on-accent\", cssVar: \"var(--ds-color-on-accent)\", role: \"On accent bg\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const borderGroup: TokenGroup = {\n  name: \"Borders\",\n  swatches: [\n    { twClass: \"border-ds-border-1\",     cssVar: \"var(--ds-border-1)\",    role: \"Strong border\",    textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-2\",     cssVar: \"var(--ds-border-2)\",    role: \"Default border\",   textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-3\",     cssVar: \"var(--ds-border-3)\",    role: \"Subtle divider\",   textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-4\",     cssVar: \"var(--ds-border-4)\",    role: \"Faintest border\",  textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-field\", cssVar: \"var(--ds-border-field)\", role: \"Input field border\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const accentGroup: TokenGroup = {\n  name: \"Accent\",\n  swatches: [\n    { twClass: \"bg-ds-accent\",       cssVar: \"var(--ds-color-accent)\",       role: \"Brand / interactive\",  textOnColor: \"light\" },\n    { twClass: \"bg-ds-accent-hover\", cssVar: \"var(--ds-color-accent-hover)\", role: \"Hover state\",          textOnColor: \"light\" },\n    { twClass: \"ring-ds-focus\",      cssVar: \"var(--ds-color-focus-ring)\",   role: \"Focus ring\",           textOnColor: \"light\" },\n  ],\n};\n\nexport const accentScaleGroup: TokenGroup = {\n  name: \"Accent Scale\",\n  swatches: [\n    { twClass: \"--ds-accent-50\",  cssVar: \"var(--ds-accent-50)\",  role: \"Lightest\",  textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-100\", cssVar: \"var(--ds-accent-100)\", role: \"100\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-200\", cssVar: \"var(--ds-accent-200)\", role: \"200\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-300\", cssVar: \"var(--ds-accent-300)\", role: \"300\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-400\", cssVar: \"var(--ds-accent-400)\", role: \"400\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-500\", cssVar: \"var(--ds-accent-500)\", role: \"Base (500)\", textOnColor: \"light\" },\n    { twClass: \"--ds-accent-600\", cssVar: \"var(--ds-accent-600)\", role: \"600\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-700\", cssVar: \"var(--ds-accent-700)\", role: \"700\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-800\", cssVar: \"var(--ds-accent-800)\", role: \"800\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-900\", cssVar: \"var(--ds-accent-900)\", role: \"Darkest\",   textOnColor: \"light\" },\n  ],\n};\n\nexport const brandGroup: TokenGroup = {\n  name: \"Brand Themes\",\n  swatches: [\n    { twClass: \"bg-ds-brand-purple\", cssVar: \"var(--ds-brand-purple)\", role: \"Purple (default)\", textOnColor: \"light\" },\n    { twClass: \"bg-ds-brand-teal\",   cssVar: \"var(--ds-brand-teal)\",   role: \"Teal\",             textOnColor: \"light\" },\n    { twClass: \"bg-ds-brand-yellow\", cssVar: \"var(--ds-brand-yellow)\", role: \"Yellow\",           textOnColor: \"dark\"  },\n    { twClass: \"bg-ds-brand-green\",  cssVar: \"var(--ds-brand-green)\",  role: \"Green\",            textOnColor: \"light\" },\n  ],\n};\n\nexport const statusGroup: TokenGroup = {\n  name: \"Status\",\n  swatches: [\n    { twClass: \"bg-ds-state-success\", cssVar: \"var(--ds-color-success)\", role: \"Success\",  textOnColor: \"light\" },\n    { twClass: \"bg-ds-state-warning\", cssVar: \"var(--ds-color-warning)\", role: \"Warning\",  textOnColor: \"dark\"  },\n    { twClass: \"bg-ds-state-danger\",  cssVar: \"var(--ds-color-danger)\",  role: \"Danger\",   textOnColor: \"light\" },\n    { twClass: \"bg-ds-state-info\",    cssVar: \"var(--ds-color-info)\",    role: \"Info\",     textOnColor: \"light\" },\n  ],\n};\n\nexport const defaultGroups: TokenGroup[] = [\n  surfaceGroup,\n  textGroup,\n  borderGroup,\n  accentGroup,\n  accentScaleGroup,\n  brandGroup,\n  statusGroup,\n];\n\n// ---------------------------------------------------------------------------\n// SwatchCard\n// ---------------------------------------------------------------------------\n\nfunction SwatchCard({ swatch }: { swatch: TokenSwatch }) {\n  const swatchRef = React.useRef<HTMLDivElement>(null);\n  const [hex, setHex] = React.useState<string>(\"\");\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    const el = swatchRef.current;\n    if (!el) return;\n    const bg = getComputedStyle(el).backgroundColor;\n    setHex(bg || \"\");\n  }, [swatch.cssVar]);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(swatch.twClass).catch(() => {});\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleCopy}\n      onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \" \") handleCopy(); }}\n      title={`Copy ${swatch.twClass}`}\n      className=\"group flex flex-col gap-0 rounded-xl border border-ds-border-2 overflow-hidden text-start cursor-pointer transition hover:shadow-md hover:border-ds-border-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus\"\n    >\n      {/* Color preview */}\n      <div\n        ref={swatchRef}\n        className=\"relative h-16 w-full flex items-end px-2 pb-1.5\"\n        style={{ backgroundColor: swatch.cssVar }}\n      >\n        {copied && (\n          <span className=\"absolute inset-0 flex items-center justify-center text-xs font-semibold bg-black/30 text-white rounded-t-xl\">\n            Copied!\n          </span>\n        )}\n        <span\n          className=\"font-mono text-[9px] leading-none opacity-70\"\n          style={{ color: swatch.textOnColor === \"light\" ? \"#fff\" : \"#000\" }}\n        >\n          {hex || \"LIVE\"}\n        </span>\n      </div>\n\n      {/* Meta */}\n      <div className=\"flex flex-col gap-0.5 px-3 py-2.5 bg-ds-surface-1\">\n        <span className=\"text-[11px] font-semibold font-mono text-ds-1 truncate\">\n          {swatch.twClass}\n        </span>\n        <span className=\"text-[10px] font-mono text-ds-3 truncate\">\n          {swatch.cssVar}\n        </span>\n        <span className=\"text-[10px] text-ds-2 mt-0.5\">{swatch.role}</span>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ColorPalette\n// ---------------------------------------------------------------------------\n\nexport default function ColorPalette({ groups, className }: ColorPaletteProps) {\n  const displayGroups = groups ?? defaultGroups;\n\n  return (\n    <div className={`space-y-8 ${className ?? \"\"}`}>\n      {displayGroups.map((group) => (\n        <section key={group.name}>\n          <h3 className=\"mb-3 text-sm font-semibold uppercase tracking-widest text-ds-2\">\n            {group.name}\n          </h3>\n          <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6\">\n            {group.swatches.map((swatch) => (\n              <SwatchCard key={swatch.twClass} swatch={swatch} />\n            ))}\n          </div>\n        </section>\n      ))}\n    </div>\n  );\n}\n\nexport { ColorPalette };\n"],"mappings":"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"}

package/dist/chunks/{color-palette-C3lesasJ.mjs → color-palette-G1HUXWJP.mjs}

@@ -326,4 +326,4 @@ function ColorPalette({ groups, className }) {
 //#endregion
 export { brandGroup as a, surfaceGroup as c, borderGroup as i, textGroup as l, accentGroup as n, defaultGroups as o, accentScaleGroup as r, statusGroup as s, ColorPalette as t };
 
-//# sourceMappingURL=color-palette-C3lesasJ.mjs.map
+//# sourceMappingURL=color-palette-G1HUXWJP.mjs.map

package/dist/chunks/{color-palette-C3lesasJ.mjs.map → color-palette-G1HUXWJP.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"color-palette-C3lesasJ.mjs","names":[],"sources":["../../src/components/data-display/color-palette/ColorPalette.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface TokenSwatch {\n  /** Tailwind class displayed as the main label, e.g. \"bg-ds-surface-1\" */\n  twClass: string;\n  /** Underlying CSS variable, e.g. \"var(--ds-surface-1)\" */\n  cssVar: string;\n  /** Short role description */\n  role: string;\n  /** Hint for readable label on the swatch itself */\n  textOnColor?: \"light\" | \"dark\" | \"auto\";\n}\n\nexport interface TokenGroup {\n  /** Section heading */\n  name: string;\n  swatches: TokenSwatch[];\n}\n\nexport interface ColorPaletteProps {\n  /** Override the built-in groups with custom data */\n  groups?: TokenGroup[];\n  className?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Canonical token groups (correct --ds-* CSS variables)\n// ---------------------------------------------------------------------------\n\nexport const surfaceGroup: TokenGroup = {\n  name: \"Surfaces\",\n  swatches: [\n    { twClass: \"bg-ds-canvas\",    cssVar: \"var(--ds-surface-canvas)\", role: \"Page / app canvas\",      textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-1\", cssVar: \"var(--ds-surface-1)\",      role: \"Card / panel\",           textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-2\", cssVar: \"var(--ds-surface-2)\",      role: \"Elevated (modal/popover)\", textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-3\", cssVar: \"var(--ds-surface-3)\",      role: \"Highest elevated\",       textOnColor: \"dark\" },\n    { twClass: \"bg-ds-accent-subtle\", cssVar: \"var(--ds-color-accent-subtle)\", role: \"Accent tinted surface\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const textGroup: TokenGroup = {\n  name: \"Text\",\n  swatches: [\n    { twClass: \"text-ds-1\", cssVar: \"var(--ds-text-1)\", role: \"Primary text\",         textOnColor: \"light\" },\n    { twClass: \"text-ds-2\", cssVar: \"var(--ds-text-2)\", role: \"Secondary / labels\",   textOnColor: \"light\" },\n    { twClass: \"text-ds-3\", cssVar: \"var(--ds-text-3)\", role: \"Muted / hints\",        textOnColor: \"light\" },\n    { twClass: \"text-ds-on-accent\", cssVar: \"var(--ds-color-on-accent)\", role: \"On accent bg\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const borderGroup: TokenGroup = {\n  name: \"Borders\",\n  swatches: [\n    { twClass: \"border-ds-border-1\",     cssVar: \"var(--ds-border-1)\",    role: \"Strong border\",    textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-2\",     cssVar: \"var(--ds-border-2)\",    role: \"Default border\",   textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-3\",     cssVar: \"var(--ds-border-3)\",    role: \"Subtle divider\",   textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-4\",     cssVar: \"var(--ds-border-4)\",    role: \"Faintest border\",  textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-field\", cssVar: \"var(--ds-border-field)\", role: \"Input field border\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const accentGroup: TokenGroup = {\n  name: \"Accent\",\n  swatches: [\n    { twClass: \"bg-ds-accent\",       cssVar: \"var(--ds-color-accent)\",       role: \"Brand / interactive\",  textOnColor: \"light\" },\n    { twClass: \"bg-ds-accent-hover\", cssVar: \"var(--ds-color-accent-hover)\", role: \"Hover state\",          textOnColor: \"light\" },\n    { twClass: \"ring-ds-focus\",      cssVar: \"var(--ds-color-focus-ring)\",   role: \"Focus ring\",           textOnColor: \"light\" },\n  ],\n};\n\nexport const accentScaleGroup: TokenGroup = {\n  name: \"Accent Scale\",\n  swatches: [\n    { twClass: \"--ds-accent-50\",  cssVar: \"var(--ds-accent-50)\",  role: \"Lightest\",  textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-100\", cssVar: \"var(--ds-accent-100)\", role: \"100\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-200\", cssVar: \"var(--ds-accent-200)\", role: \"200\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-300\", cssVar: \"var(--ds-accent-300)\", role: \"300\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-400\", cssVar: \"var(--ds-accent-400)\", role: \"400\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-500\", cssVar: \"var(--ds-accent-500)\", role: \"Base (500)\", textOnColor: \"light\" },\n    { twClass: \"--ds-accent-600\", cssVar: \"var(--ds-accent-600)\", role: \"600\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-700\", cssVar: \"var(--ds-accent-700)\", role: \"700\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-800\", cssVar: \"var(--ds-accent-800)\", role: \"800\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-900\", cssVar: \"var(--ds-accent-900)\", role: \"Darkest\",   textOnColor: \"light\" },\n  ],\n};\n\nexport const brandGroup: TokenGroup = {\n  name: \"Brand Themes\",\n  swatches: [\n    { twClass: \"bg-ds-brand-purple\", cssVar: \"var(--ds-brand-purple)\", role: \"Purple (default)\", textOnColor: \"light\" },\n    { twClass: \"bg-ds-brand-teal\",   cssVar: \"var(--ds-brand-teal)\",   role: \"Teal\",             textOnColor: \"light\" },\n    { twClass: \"bg-ds-brand-yellow\", cssVar: \"var(--ds-brand-yellow)\", role: \"Yellow\",           textOnColor: \"dark\"  },\n    { twClass: \"bg-ds-brand-green\",  cssVar: \"var(--ds-brand-green)\",  role: \"Green\",            textOnColor: \"light\" },\n  ],\n};\n\nexport const statusGroup: TokenGroup = {\n  name: \"Status\",\n  swatches: [\n    { twClass: \"bg-ds-state-success\", cssVar: \"var(--ds-color-success)\", role: \"Success\",  textOnColor: \"light\" },\n    { twClass: \"bg-ds-state-warning\", cssVar: \"var(--ds-color-warning)\", role: \"Warning\",  textOnColor: \"dark\"  },\n    { twClass: \"bg-ds-state-danger\",  cssVar: \"var(--ds-color-danger)\",  role: \"Danger\",   textOnColor: \"light\" },\n    { twClass: \"bg-ds-state-info\",    cssVar: \"var(--ds-color-info)\",    role: \"Info\",     textOnColor: \"light\" },\n  ],\n};\n\nexport const defaultGroups: TokenGroup[] = [\n  surfaceGroup,\n  textGroup,\n  borderGroup,\n  accentGroup,\n  accentScaleGroup,\n  brandGroup,\n  statusGroup,\n];\n\n// ---------------------------------------------------------------------------\n// SwatchCard\n// ---------------------------------------------------------------------------\n\nfunction SwatchCard({ swatch }: { swatch: TokenSwatch }) {\n  const swatchRef = React.useRef<HTMLDivElement>(null);\n  const [hex, setHex] = React.useState<string>(\"\");\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    const el = swatchRef.current;\n    if (!el) return;\n    const bg = getComputedStyle(el).backgroundColor;\n    setHex(bg || \"\");\n  }, [swatch.cssVar]);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(swatch.twClass).catch(() => {});\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleCopy}\n      onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \" \") handleCopy(); }}\n      title={`Copy ${swatch.twClass}`}\n      className=\"group flex flex-col gap-0 rounded-xl border border-ds-border-2 overflow-hidden text-start cursor-pointer transition hover:shadow-md hover:border-ds-border-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus\"\n    >\n      {/* Color preview */}\n      <div\n        ref={swatchRef}\n        className=\"relative h-16 w-full flex items-end px-2 pb-1.5\"\n        style={{ backgroundColor: swatch.cssVar }}\n      >\n        {copied && (\n          <span className=\"absolute inset-0 flex items-center justify-center text-xs font-semibold bg-black/30 text-white rounded-t-xl\">\n            Copied!\n          </span>\n        )}\n        <span\n          className=\"font-mono text-[9px] leading-none opacity-70\"\n          style={{ color: swatch.textOnColor === \"light\" ? \"#fff\" : \"#000\" }}\n        >\n          {hex || \"LIVE\"}\n        </span>\n      </div>\n\n      {/* Meta */}\n      <div className=\"flex flex-col gap-0.5 px-3 py-2.5 bg-ds-surface-1\">\n        <span className=\"text-[11px] font-semibold font-mono text-ds-1 truncate\">\n          {swatch.twClass}\n        </span>\n        <span className=\"text-[10px] font-mono text-ds-3 truncate\">\n          {swatch.cssVar}\n        </span>\n        <span className=\"text-[10px] text-ds-2 mt-0.5\">{swatch.role}</span>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ColorPalette\n// ---------------------------------------------------------------------------\n\nexport default function ColorPalette({ groups, className }: ColorPaletteProps) {\n  const displayGroups = groups ?? defaultGroups;\n\n  return (\n    <div className={`space-y-8 ${className ?? \"\"}`}>\n      {displayGroups.map((group) => (\n        <section key={group.name}>\n          <h3 className=\"mb-3 text-sm font-semibold uppercase tracking-widest text-ds-2\">\n            {group.name}\n          </h3>\n          <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6\">\n            {group.swatches.map((swatch) => (\n              <SwatchCard key={swatch.twClass} swatch={swatch} />\n            ))}\n          </div>\n        </section>\n      ))}\n    </div>\n  );\n}\n\nexport { ColorPalette };\n"],"mappings":"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"}
+{"version":3,"file":"color-palette-G1HUXWJP.mjs","names":[],"sources":["../../src/components/data-display/color-palette/ColorPalette.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface TokenSwatch {\n  /** Tailwind class displayed as the main label, e.g. \"bg-ds-surface-1\" */\n  twClass: string;\n  /** Underlying CSS variable, e.g. \"var(--ds-surface-1)\" */\n  cssVar: string;\n  /** Short role description */\n  role: string;\n  /** Hint for readable label on the swatch itself */\n  textOnColor?: \"light\" | \"dark\" | \"auto\";\n}\n\nexport interface TokenGroup {\n  /** Section heading */\n  name: string;\n  swatches: TokenSwatch[];\n}\n\nexport interface ColorPaletteProps {\n  /** Override the built-in groups with custom data */\n  groups?: TokenGroup[];\n  className?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Canonical token groups (correct --ds-* CSS variables)\n// ---------------------------------------------------------------------------\n\nexport const surfaceGroup: TokenGroup = {\n  name: \"Surfaces\",\n  swatches: [\n    { twClass: \"bg-ds-canvas\",    cssVar: \"var(--ds-surface-canvas)\", role: \"Page / app canvas\",      textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-1\", cssVar: \"var(--ds-surface-1)\",      role: \"Card / panel\",           textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-2\", cssVar: \"var(--ds-surface-2)\",      role: \"Elevated (modal/popover)\", textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-3\", cssVar: \"var(--ds-surface-3)\",      role: \"Highest elevated\",       textOnColor: \"dark\" },\n    { twClass: \"bg-ds-accent-subtle\", cssVar: \"var(--ds-color-accent-subtle)\", role: \"Accent tinted surface\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const textGroup: TokenGroup = {\n  name: \"Text\",\n  swatches: [\n    { twClass: \"text-ds-1\", cssVar: \"var(--ds-text-1)\", role: \"Primary text\",         textOnColor: \"light\" },\n    { twClass: \"text-ds-2\", cssVar: \"var(--ds-text-2)\", role: \"Secondary / labels\",   textOnColor: \"light\" },\n    { twClass: \"text-ds-3\", cssVar: \"var(--ds-text-3)\", role: \"Muted / hints\",        textOnColor: \"light\" },\n    { twClass: \"text-ds-on-accent\", cssVar: \"var(--ds-color-on-accent)\", role: \"On accent bg\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const borderGroup: TokenGroup = {\n  name: \"Borders\",\n  swatches: [\n    { twClass: \"border-ds-border-1\",     cssVar: \"var(--ds-border-1)\",    role: \"Strong border\",    textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-2\",     cssVar: \"var(--ds-border-2)\",    role: \"Default border\",   textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-3\",     cssVar: \"var(--ds-border-3)\",    role: \"Subtle divider\",   textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-4\",     cssVar: \"var(--ds-border-4)\",    role: \"Faintest border\",  textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-field\", cssVar: \"var(--ds-border-field)\", role: \"Input field border\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const accentGroup: TokenGroup = {\n  name: \"Accent\",\n  swatches: [\n    { twClass: \"bg-ds-accent\",       cssVar: \"var(--ds-color-accent)\",       role: \"Brand / interactive\",  textOnColor: \"light\" },\n    { twClass: \"bg-ds-accent-hover\", cssVar: \"var(--ds-color-accent-hover)\", role: \"Hover state\",          textOnColor: \"light\" },\n    { twClass: \"ring-ds-focus\",      cssVar: \"var(--ds-color-focus-ring)\",   role: \"Focus ring\",           textOnColor: \"light\" },\n  ],\n};\n\nexport const accentScaleGroup: TokenGroup = {\n  name: \"Accent Scale\",\n  swatches: [\n    { twClass: \"--ds-accent-50\",  cssVar: \"var(--ds-accent-50)\",  role: \"Lightest\",  textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-100\", cssVar: \"var(--ds-accent-100)\", role: \"100\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-200\", cssVar: \"var(--ds-accent-200)\", role: \"200\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-300\", cssVar: \"var(--ds-accent-300)\", role: \"300\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-400\", cssVar: \"var(--ds-accent-400)\", role: \"400\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-500\", cssVar: \"var(--ds-accent-500)\", role: \"Base (500)\", textOnColor: \"light\" },\n    { twClass: \"--ds-accent-600\", cssVar: \"var(--ds-accent-600)\", role: \"600\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-700\", cssVar: \"var(--ds-accent-700)\", role: \"700\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-800\", cssVar: \"var(--ds-accent-800)\", role: \"800\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-900\", cssVar: \"var(--ds-accent-900)\", role: \"Darkest\",   textOnColor: \"light\" },\n  ],\n};\n\nexport const brandGroup: TokenGroup = {\n  name: \"Brand Themes\",\n  swatches: [\n    { twClass: \"bg-ds-brand-purple\", cssVar: \"var(--ds-brand-purple)\", role: \"Purple (default)\", textOnColor: \"light\" },\n    { twClass: \"bg-ds-brand-teal\",   cssVar: \"var(--ds-brand-teal)\",   role: \"Teal\",             textOnColor: \"light\" },\n    { twClass: \"bg-ds-brand-yellow\", cssVar: \"var(--ds-brand-yellow)\", role: \"Yellow\",           textOnColor: \"dark\"  },\n    { twClass: \"bg-ds-brand-green\",  cssVar: \"var(--ds-brand-green)\",  role: \"Green\",            textOnColor: \"light\" },\n  ],\n};\n\nexport const statusGroup: TokenGroup = {\n  name: \"Status\",\n  swatches: [\n    { twClass: \"bg-ds-state-success\", cssVar: \"var(--ds-color-success)\", role: \"Success\",  textOnColor: \"light\" },\n    { twClass: \"bg-ds-state-warning\", cssVar: \"var(--ds-color-warning)\", role: \"Warning\",  textOnColor: \"dark\"  },\n    { twClass: \"bg-ds-state-danger\",  cssVar: \"var(--ds-color-danger)\",  role: \"Danger\",   textOnColor: \"light\" },\n    { twClass: \"bg-ds-state-info\",    cssVar: \"var(--ds-color-info)\",    role: \"Info\",     textOnColor: \"light\" },\n  ],\n};\n\nexport const defaultGroups: TokenGroup[] = [\n  surfaceGroup,\n  textGroup,\n  borderGroup,\n  accentGroup,\n  accentScaleGroup,\n  brandGroup,\n  statusGroup,\n];\n\n// ---------------------------------------------------------------------------\n// SwatchCard\n// ---------------------------------------------------------------------------\n\nfunction SwatchCard({ swatch }: { swatch: TokenSwatch }) {\n  const swatchRef = React.useRef<HTMLDivElement>(null);\n  const [hex, setHex] = React.useState<string>(\"\");\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    const el = swatchRef.current;\n    if (!el) return;\n    const bg = getComputedStyle(el).backgroundColor;\n    setHex(bg || \"\");\n  }, [swatch.cssVar]);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(swatch.twClass).catch(() => {});\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleCopy}\n      onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \" \") handleCopy(); }}\n      title={`Copy ${swatch.twClass}`}\n      className=\"group flex flex-col gap-0 rounded-xl border border-ds-border-2 overflow-hidden text-start cursor-pointer transition hover:shadow-md hover:border-ds-border-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus\"\n    >\n      {/* Color preview */}\n      <div\n        ref={swatchRef}\n        className=\"relative h-16 w-full flex items-end px-2 pb-1.5\"\n        style={{ backgroundColor: swatch.cssVar }}\n      >\n        {copied && (\n          <span className=\"absolute inset-0 flex items-center justify-center text-xs font-semibold bg-black/30 text-white rounded-t-xl\">\n            Copied!\n          </span>\n        )}\n        <span\n          className=\"font-mono text-[9px] leading-none opacity-70\"\n          style={{ color: swatch.textOnColor === \"light\" ? \"#fff\" : \"#000\" }}\n        >\n          {hex || \"LIVE\"}\n        </span>\n      </div>\n\n      {/* Meta */}\n      <div className=\"flex flex-col gap-0.5 px-3 py-2.5 bg-ds-surface-1\">\n        <span className=\"text-[11px] font-semibold font-mono text-ds-1 truncate\">\n          {swatch.twClass}\n        </span>\n        <span className=\"text-[10px] font-mono text-ds-3 truncate\">\n          {swatch.cssVar}\n        </span>\n        <span className=\"text-[10px] text-ds-2 mt-0.5\">{swatch.role}</span>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ColorPalette\n// ---------------------------------------------------------------------------\n\nexport default function ColorPalette({ groups, className }: ColorPaletteProps) {\n  const displayGroups = groups ?? defaultGroups;\n\n  return (\n    <div className={`space-y-8 ${className ?? \"\"}`}>\n      {displayGroups.map((group) => (\n        <section key={group.name}>\n          <h3 className=\"mb-3 text-sm font-semibold uppercase tracking-widest text-ds-2\">\n            {group.name}\n          </h3>\n          <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6\">\n            {group.swatches.map((swatch) => (\n              <SwatchCard key={swatch.twClass} swatch={swatch} />\n            ))}\n          </div>\n        </section>\n      ))}\n    </div>\n  );\n}\n\nexport { ColorPalette };\n"],"mappings":";;;AAmCA,IAAa,eAA2B;CACtC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAmB,QAAQ;GAA4B,MAAM;GAA0B,aAAa;EAAO;EACtH;GAAE,SAAS;GAAmB,QAAQ;GAA4B,MAAM;GAA0B,aAAa;EAAO;EACtH;GAAE,SAAS;GAAmB,QAAQ;GAA4B,MAAM;GAA4B,aAAa;EAAO;EACxH;GAAE,SAAS;GAAmB,QAAQ;GAA4B,MAAM;GAA0B,aAAa;EAAO;EACtH;GAAE,SAAS;GAAuB,QAAQ;GAAiC,MAAM;GAAyB,aAAa;EAAO;CAChI;AACF;AAEA,IAAa,YAAwB;CACnC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAa,QAAQ;GAAoB,MAAM;GAAwB,aAAa;EAAQ;EACvG;GAAE,SAAS;GAAa,QAAQ;GAAoB,MAAM;GAAwB,aAAa;EAAQ;EACvG;GAAE,SAAS;GAAa,QAAQ;GAAoB,MAAM;GAAwB,aAAa;EAAQ;EACvG;GAAE,SAAS;GAAqB,QAAQ;GAA6B,MAAM;GAAgB,aAAa;EAAO;CACjH;AACF;AAEA,IAAa,cAA0B;CACrC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAA0B,QAAQ;GAAyB,MAAM;GAAoB,aAAa;EAAO;EACpH;GAAE,SAAS;GAA0B,QAAQ;GAAyB,MAAM;GAAoB,aAAa;EAAO;EACpH;GAAE,SAAS;GAA0B,QAAQ;GAAyB,MAAM;GAAoB,aAAa;EAAO;EACpH;GAAE,SAAS;GAA0B,QAAQ;GAAyB,MAAM;GAAoB,aAAa;EAAO;EACpH;GAAE,SAAS;GAA0B,QAAQ;GAA0B,MAAM;GAAsB,aAAa;EAAO;CACzH;AACF;AAEA,IAAa,cAA0B;CACrC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAsB,QAAQ;GAAgC,MAAM;GAAwB,aAAa;EAAQ;EAC5H;GAAE,SAAS;GAAsB,QAAQ;GAAgC,MAAM;GAAwB,aAAa;EAAQ;EAC5H;GAAE,SAAS;GAAsB,QAAQ;GAAgC,MAAM;GAAwB,aAAa;EAAQ;CAC9H;AACF;AAEA,IAAa,mBAA+B;CAC1C,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;EAAQ;EACtG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;EAAQ;EACtG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;EAAQ;EACtG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;EAAQ;EACtG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;EAAQ;EACtG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAc,aAAa;EAAQ;EACvG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;EAAQ;EACtG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;EAAQ;EACtG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;EAAQ;EACtG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;EAAQ;CACxG;AACF;AAEA,IAAa,aAAyB;CACpC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAsB,QAAQ;GAA0B,MAAM;GAAoB,aAAa;EAAQ;EAClH;GAAE,SAAS;GAAsB,QAAQ;GAA0B,MAAM;GAAoB,aAAa;EAAQ;EAClH;GAAE,SAAS;GAAsB,QAAQ;GAA0B,MAAM;GAAoB,aAAa;EAAQ;EAClH;GAAE,SAAS;GAAsB,QAAQ;GAA0B,MAAM;GAAoB,aAAa;EAAQ;CACpH;AACF;AAEA,IAAa,cAA0B;CACrC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAuB,QAAQ;GAA2B,MAAM;GAAY,aAAa;EAAQ;EAC5G;GAAE,SAAS;GAAuB,QAAQ;GAA2B,MAAM;GAAY,aAAa;EAAQ;EAC5G;GAAE,SAAS;GAAuB,QAAQ;GAA2B,MAAM;GAAY,aAAa;EAAQ;EAC5G;GAAE,SAAS;GAAuB,QAAQ;GAA2B,MAAM;GAAY,aAAa;EAAQ;CAC9G;AACF;AAEA,IAAa,gBAA8B;CACzC;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAMA,SAAS,WAAW,EAAE,UAAmC;CACvD,MAAM,YAAY,MAAM,OAAuB,IAAI;CACnD,MAAM,CAAC,KAAK,UAAU,MAAM,SAAiB,EAAE;CAC/C,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,KAAK;CAEhD,MAAM,gBAAgB;EACpB,MAAM,KAAK,UAAU;EACrB,IAAI,CAAC,IAAI;EACT,MAAM,KAAK,iBAAiB,EAAE,EAAE;EAChC,OAAO,MAAM,EAAE;CACjB,GAAG,CAAC,OAAO,MAAM,CAAC;CAElB,MAAM,mBAAmB;EACvB,UAAU,UAAU,UAAU,OAAO,OAAO,EAAE,YAAY,CAAC,CAAC;EAC5D,UAAU,IAAI;EACd,iBAAiB,UAAU,KAAK,GAAG,IAAI;CACzC;CAEA,OACE,qBAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,SAAS;EACT,YAAY,MAAM;GAAE,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK,WAAW;EAAG;EAC1E,OAAO,QAAQ,OAAO;EACtB,WAAU;YANZ,CASE,qBAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,OAAO,EAAE,iBAAiB,OAAO,OAAO;aAH1C,CAKG,UACC,oBAAC,QAAD;IAAM,WAAU;cAA8G;GAExH,CAAA,GAER,oBAAC,QAAD;IACE,WAAU;IACV,OAAO,EAAE,OAAO,OAAO,gBAAgB,UAAU,SAAS,OAAO;cAEhE,OAAO;GACJ,CAAA,CACH;MAGL,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,QAAD;KAAM,WAAU;eACb,OAAO;IACJ,CAAA;IACN,oBAAC,QAAD;KAAM,WAAU;eACb,OAAO;IACJ,CAAA;IACN,oBAAC,QAAD;KAAM,WAAU;eAAgC,OAAO;IAAW,CAAA;GAC/D;IACF;;AAET;AAMA,SAAwB,aAAa,EAAE,QAAQ,aAAgC;CAC7E,MAAM,gBAAgB,UAAU;CAEhC,OACE,oBAAC,OAAD;EAAK,WAAW,aAAa,aAAa;YACvC,cAAc,KAAK,UAClB,qBAAC,WAAD,EAAA,UAAA,CACE,oBAAC,MAAD;GAAI,WAAU;aACX,MAAM;EACL,CAAA,GACJ,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,SAAS,KAAK,WACnB,oBAAC,YAAD,EAAyC,OAAS,GAAjC,OAAO,OAA0B,CACnD;EACE,CAAA,CACE,EAAA,GATK,MAAM,IASX,CACV;CACE,CAAA;AAET"}

package/dist/chunks/{combobox-CtNrGmuR.cjs → combobox-CkNzH1YV.cjs}

@@ -1,8 +1,8 @@
-const require_chunk = require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-LRbEQHYs.cjs");
-const require_truncated_text = require("./truncated-text-BIXqNfOL.cjs");
-const require_icons = require("./icons-CRanVZB1.cjs");
-const require_DropdownMenu = require("./DropdownMenu-BDrNYO-D.cjs");
+const require_chunk = require("./chunk-D6vf50IK.cjs");
+const require_utils = require("./utils-CoA0q63n.cjs");
+const require_truncated_text = require("./truncated-text-D0t4atw5.cjs");
+const require_icons = require("./icons-Ci8yEvvF.cjs");
+const require_DropdownMenu = require("./DropdownMenu-CEmlmX7P.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -131,4 +131,4 @@ Object.defineProperty(exports, "Combobox", {
 	}
 });
 
-//# sourceMappingURL=combobox-CtNrGmuR.cjs.map
+//# sourceMappingURL=combobox-CkNzH1YV.cjs.map

package/dist/chunks/{combobox-CtNrGmuR.cjs.map → combobox-CkNzH1YV.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"combobox-CtNrGmuR.cjs","names":[],"sources":["../../src/components/forms/combobox/Combobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ComboboxOption {\n  label: string;\n  value: string;\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  noOptionsText?: string;\n  className?: string;\n  bgClassName?: string;\n  createOptionLabel?: string;\n  onCreateOption?: () => void;\n}\n\nconst Combobox: React.FC<ComboboxProps> = ({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select...\",\n  searchPlaceholder = \"Type to search...\",\n  noOptionsText = \"No options\",\n  className,\n  bgClassName = \"bg-ds-surface-1\",\n  createOptionLabel,\n  onCreateOption,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n\n  // Filter options by search\n  const filteredOptions = options.filter((opt) =>\n    opt.label.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  return (\n    <DropdownMenu\n      className={mergeClassNames(\"w-full\", className)}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (!nextOpen) {\n          setSearch(\"\");\n        }\n      }}\n      animationClassName=\"origin-top-left\"\n      panelClassName=\"start-0 top-[40px] z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n      trigger={\n        <motion.div\n          style={{\n            backgroundImage: useMotionTemplate`\n              radial-gradient(\n                ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                var(--ds-color-accent),\n                transparent 90%\n              )\n            `,\n          }}\n          onMouseMove={handleMouseMove}\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          className=\"group/combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n        >\n          <div\n            className={mergeClassNames(\n              \"flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:outline-none\",\n              bgClassName,\n            )}\n          >\n            {value ? (\n              <TruncatedText\n                as=\"span\"\n                showTitleOnHover\n                className=\"flex-1 text-ds-1\"\n              >\n                {options.find((opt) => opt.value === value)?.label}\n              </TruncatedText>\n            ) : (\n              <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n                {placeholder}\n              </TruncatedText>\n            )}\n            <span\n              className={mergeClassNames(\n                \"ms-2 text-ds-2 transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className=\"h-5 w-5\"\n              />\n            </span>\n          </div>\n        </motion.div>\n      }\n    >\n      {/* Sticky search input */}\n      <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n        <input\n          autoFocus\n          className=\"w-full bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30 rounded-t-lg\"\n          placeholder={searchPlaceholder}\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n      {/* Scrollable options */}\n      <div className=\"max-h-80 flex-1 overflow-auto\">\n        {filteredOptions.length === 0 && !createOptionLabel && (\n          <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n        )}\n        {filteredOptions.map((opt) => (\n          <div\n            key={opt.value}\n            className={mergeClassNames(\n              \"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-ds-1 transition\",\n              opt.value === value\n                ? \"bg-ds-accent-subtle text-ds-1 font-semibold\"\n                : \"\",\n              \"hover:bg-ds-accent hover:text-ds-on-accent\",\n            )}\n            onClick={() => {\n              onChange(opt.value);\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {opt.value === value && (\n                <CheckIcon className=\"text-ds-1\" width={18} height={18} />\n              )}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {opt.label}\n            </TruncatedText>\n          </div>\n        ))}\n      </div>\n      {/* Sticky create option */}\n      {createOptionLabel && onCreateOption && (\n        <div className=\"sticky bottom-0 z-10 rounded-b-lg border-t border-ds-border-3 bg-ds-surface-1/95 backdrop-blur-sm\">\n          <div\n            className=\"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-ds-1 transition hover:bg-ds-accent hover:text-ds-on-accent\"\n            onClick={() => {\n              onCreateOption();\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {/* Optionally add an icon here */}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {createOptionLabel}\n            </TruncatedText>\n          </div>\n        </div>\n      )}\n    </DropdownMenu>\n  );\n};\n\nexport default Combobox;\n"],"mappings":"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"}
+{"version":3,"file":"combobox-CkNzH1YV.cjs","names":[],"sources":["../../src/components/forms/combobox/Combobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ComboboxOption {\n  label: string;\n  value: string;\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  noOptionsText?: string;\n  className?: string;\n  bgClassName?: string;\n  createOptionLabel?: string;\n  onCreateOption?: () => void;\n}\n\nconst Combobox: React.FC<ComboboxProps> = ({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select...\",\n  searchPlaceholder = \"Type to search...\",\n  noOptionsText = \"No options\",\n  className,\n  bgClassName = \"bg-ds-surface-1\",\n  createOptionLabel,\n  onCreateOption,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n\n  // Filter options by search\n  const filteredOptions = options.filter((opt) =>\n    opt.label.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  return (\n    <DropdownMenu\n      className={mergeClassNames(\"w-full\", className)}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (!nextOpen) {\n          setSearch(\"\");\n        }\n      }}\n      animationClassName=\"origin-top-left\"\n      panelClassName=\"start-0 top-[40px] z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n      trigger={\n        <motion.div\n          style={{\n            backgroundImage: useMotionTemplate`\n              radial-gradient(\n                ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                var(--ds-color-accent),\n                transparent 90%\n              )\n            `,\n          }}\n          onMouseMove={handleMouseMove}\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          className=\"group/combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n        >\n          <div\n            className={mergeClassNames(\n              \"flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:outline-none\",\n              bgClassName,\n            )}\n          >\n            {value ? (\n              <TruncatedText\n                as=\"span\"\n                showTitleOnHover\n                className=\"flex-1 text-ds-1\"\n              >\n                {options.find((opt) => opt.value === value)?.label}\n              </TruncatedText>\n            ) : (\n              <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n                {placeholder}\n              </TruncatedText>\n            )}\n            <span\n              className={mergeClassNames(\n                \"ms-2 text-ds-2 transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className=\"h-5 w-5\"\n              />\n            </span>\n          </div>\n        </motion.div>\n      }\n    >\n      {/* Sticky search input */}\n      <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n        <input\n          autoFocus\n          className=\"w-full bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30 rounded-t-lg\"\n          placeholder={searchPlaceholder}\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n      {/* Scrollable options */}\n      <div className=\"max-h-80 flex-1 overflow-auto\">\n        {filteredOptions.length === 0 && !createOptionLabel && (\n          <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n        )}\n        {filteredOptions.map((opt) => (\n          <div\n            key={opt.value}\n            className={mergeClassNames(\n              \"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-ds-1 transition\",\n              opt.value === value\n                ? \"bg-ds-accent-subtle text-ds-1 font-semibold\"\n                : \"\",\n              \"hover:bg-ds-accent hover:text-ds-on-accent\",\n            )}\n            onClick={() => {\n              onChange(opt.value);\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {opt.value === value && (\n                <CheckIcon className=\"text-ds-1\" width={18} height={18} />\n              )}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {opt.label}\n            </TruncatedText>\n          </div>\n        ))}\n      </div>\n      {/* Sticky create option */}\n      {createOptionLabel && onCreateOption && (\n        <div className=\"sticky bottom-0 z-10 rounded-b-lg border-t border-ds-border-3 bg-ds-surface-1/95 backdrop-blur-sm\">\n          <div\n            className=\"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-ds-1 transition hover:bg-ds-accent hover:text-ds-on-accent\"\n            onClick={() => {\n              onCreateOption();\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {/* Optionally add an icon here */}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {createOptionLabel}\n            </TruncatedText>\n          </div>\n        </div>\n      )}\n    </DropdownMenu>\n  );\n};\n\nexport default Combobox;\n"],"mappings":"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"}

package/dist/chunks/{combobox-B6yk5U82.mjs → combobox-xNmFFHd6.mjs}

@@ -1,7 +1,7 @@
-import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
-import { t as TruncatedText } from "./truncated-text-C9t9o9IA.mjs";
-import { J as CheckIcon, N as ChevronDownIcon } from "./icons-bx3nrxNv.mjs";
-import { t as DropdownMenu } from "./DropdownMenu-BtTOri-A.mjs";
+import { n as mergeClassNames } from "./utils-Dc7j29ec.mjs";
+import { t as TruncatedText } from "./truncated-text-DIkg-8Vo.mjs";
+import { J as CheckIcon, N as ChevronDownIcon } from "./icons-CkVHNbbN.mjs";
+import { t as DropdownMenu } from "./DropdownMenu-B18BI5l7.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
@@ -124,4 +124,4 @@ var Combobox = ({ options, value, onChange, placeholder = "Select...", searchPla
 //#endregion
 export { Combobox as t };
 
-//# sourceMappingURL=combobox-B6yk5U82.mjs.map
+//# sourceMappingURL=combobox-xNmFFHd6.mjs.map

package/dist/chunks/{combobox-B6yk5U82.mjs.map → combobox-xNmFFHd6.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"combobox-B6yk5U82.mjs","names":[],"sources":["../../src/components/forms/combobox/Combobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ComboboxOption {\n  label: string;\n  value: string;\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  noOptionsText?: string;\n  className?: string;\n  bgClassName?: string;\n  createOptionLabel?: string;\n  onCreateOption?: () => void;\n}\n\nconst Combobox: React.FC<ComboboxProps> = ({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select...\",\n  searchPlaceholder = \"Type to search...\",\n  noOptionsText = \"No options\",\n  className,\n  bgClassName = \"bg-ds-surface-1\",\n  createOptionLabel,\n  onCreateOption,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n\n  // Filter options by search\n  const filteredOptions = options.filter((opt) =>\n    opt.label.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  return (\n    <DropdownMenu\n      className={mergeClassNames(\"w-full\", className)}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (!nextOpen) {\n          setSearch(\"\");\n        }\n      }}\n      animationClassName=\"origin-top-left\"\n      panelClassName=\"start-0 top-[40px] z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n      trigger={\n        <motion.div\n          style={{\n            backgroundImage: useMotionTemplate`\n              radial-gradient(\n                ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                var(--ds-color-accent),\n                transparent 90%\n              )\n            `,\n          }}\n          onMouseMove={handleMouseMove}\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          className=\"group/combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n        >\n          <div\n            className={mergeClassNames(\n              \"flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:outline-none\",\n              bgClassName,\n            )}\n          >\n            {value ? (\n              <TruncatedText\n                as=\"span\"\n                showTitleOnHover\n                className=\"flex-1 text-ds-1\"\n              >\n                {options.find((opt) => opt.value === value)?.label}\n              </TruncatedText>\n            ) : (\n              <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n                {placeholder}\n              </TruncatedText>\n            )}\n            <span\n              className={mergeClassNames(\n                \"ms-2 text-ds-2 transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className=\"h-5 w-5\"\n              />\n            </span>\n          </div>\n        </motion.div>\n      }\n    >\n      {/* Sticky search input */}\n      <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n        <input\n          autoFocus\n          className=\"w-full bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30 rounded-t-lg\"\n          placeholder={searchPlaceholder}\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n      {/* Scrollable options */}\n      <div className=\"max-h-80 flex-1 overflow-auto\">\n        {filteredOptions.length === 0 && !createOptionLabel && (\n          <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n        )}\n        {filteredOptions.map((opt) => (\n          <div\n            key={opt.value}\n            className={mergeClassNames(\n              \"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-ds-1 transition\",\n              opt.value === value\n                ? \"bg-ds-accent-subtle text-ds-1 font-semibold\"\n                : \"\",\n              \"hover:bg-ds-accent hover:text-ds-on-accent\",\n            )}\n            onClick={() => {\n              onChange(opt.value);\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {opt.value === value && (\n                <CheckIcon className=\"text-ds-1\" width={18} height={18} />\n              )}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {opt.label}\n            </TruncatedText>\n          </div>\n        ))}\n      </div>\n      {/* Sticky create option */}\n      {createOptionLabel && onCreateOption && (\n        <div className=\"sticky bottom-0 z-10 rounded-b-lg border-t border-ds-border-3 bg-ds-surface-1/95 backdrop-blur-sm\">\n          <div\n            className=\"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-ds-1 transition hover:bg-ds-accent hover:text-ds-on-accent\"\n            onClick={() => {\n              onCreateOption();\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {/* Optionally add an icon here */}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {createOptionLabel}\n            </TruncatedText>\n          </div>\n        </div>\n      )}\n    </DropdownMenu>\n  );\n};\n\nexport default Combobox;\n"],"mappings":"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"}
+{"version":3,"file":"combobox-xNmFFHd6.mjs","names":[],"sources":["../../src/components/forms/combobox/Combobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ComboboxOption {\n  label: string;\n  value: string;\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  noOptionsText?: string;\n  className?: string;\n  bgClassName?: string;\n  createOptionLabel?: string;\n  onCreateOption?: () => void;\n}\n\nconst Combobox: React.FC<ComboboxProps> = ({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select...\",\n  searchPlaceholder = \"Type to search...\",\n  noOptionsText = \"No options\",\n  className,\n  bgClassName = \"bg-ds-surface-1\",\n  createOptionLabel,\n  onCreateOption,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n\n  // Filter options by search\n  const filteredOptions = options.filter((opt) =>\n    opt.label.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  return (\n    <DropdownMenu\n      className={mergeClassNames(\"w-full\", className)}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (!nextOpen) {\n          setSearch(\"\");\n        }\n      }}\n      animationClassName=\"origin-top-left\"\n      panelClassName=\"start-0 top-[40px] z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n      trigger={\n        <motion.div\n          style={{\n            backgroundImage: useMotionTemplate`\n              radial-gradient(\n                ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                var(--ds-color-accent),\n                transparent 90%\n              )\n            `,\n          }}\n          onMouseMove={handleMouseMove}\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          className=\"group/combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n        >\n          <div\n            className={mergeClassNames(\n              \"flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:outline-none\",\n              bgClassName,\n            )}\n          >\n            {value ? (\n              <TruncatedText\n                as=\"span\"\n                showTitleOnHover\n                className=\"flex-1 text-ds-1\"\n              >\n                {options.find((opt) => opt.value === value)?.label}\n              </TruncatedText>\n            ) : (\n              <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n                {placeholder}\n              </TruncatedText>\n            )}\n            <span\n              className={mergeClassNames(\n                \"ms-2 text-ds-2 transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className=\"h-5 w-5\"\n              />\n            </span>\n          </div>\n        </motion.div>\n      }\n    >\n      {/* Sticky search input */}\n      <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n        <input\n          autoFocus\n          className=\"w-full bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30 rounded-t-lg\"\n          placeholder={searchPlaceholder}\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n      {/* Scrollable options */}\n      <div className=\"max-h-80 flex-1 overflow-auto\">\n        {filteredOptions.length === 0 && !createOptionLabel && (\n          <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n        )}\n        {filteredOptions.map((opt) => (\n          <div\n            key={opt.value}\n            className={mergeClassNames(\n              \"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-ds-1 transition\",\n              opt.value === value\n                ? \"bg-ds-accent-subtle text-ds-1 font-semibold\"\n                : \"\",\n              \"hover:bg-ds-accent hover:text-ds-on-accent\",\n            )}\n            onClick={() => {\n              onChange(opt.value);\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {opt.value === value && (\n                <CheckIcon className=\"text-ds-1\" width={18} height={18} />\n              )}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {opt.label}\n            </TruncatedText>\n          </div>\n        ))}\n      </div>\n      {/* Sticky create option */}\n      {createOptionLabel && onCreateOption && (\n        <div className=\"sticky bottom-0 z-10 rounded-b-lg border-t border-ds-border-3 bg-ds-surface-1/95 backdrop-blur-sm\">\n          <div\n            className=\"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-ds-1 transition hover:bg-ds-accent hover:text-ds-on-accent\"\n            onClick={() => {\n              onCreateOption();\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {/* Optionally add an icon here */}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {createOptionLabel}\n            </TruncatedText>\n          </div>\n        </div>\n      )}\n    </DropdownMenu>\n  );\n};\n\nexport default Combobox;\n"],"mappings":"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"}