erp-pro-ui 0.1.7 → 0.1.8

package/dist/chunks/{chip-BY83_HK7.cjs.map → chip-CMs73sc5.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"chip-BY83_HK7.cjs","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 = \"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  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  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  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 = \"md\",\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-[4px] 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={`shrink-0 ${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={`shrink-0 ${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-CMs73sc5.cjs","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 = \"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  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  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  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 = \"md\",\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-[4px] 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={`shrink-0 ${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={`shrink-0 ${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-CexX28VQ.mjs → chroma-grid-DlY9hIRI.mjs}

@@ -212,4 +212,4 @@ ChromaGrid.displayName = "ChromaGrid";
 //#endregion
 export { ChromaGrid as t };
 
-//# sourceMappingURL=chroma-grid-CexX28VQ.mjs.map
+//# sourceMappingURL=chroma-grid-DlY9hIRI.mjs.map

package/dist/chunks/{chroma-grid-CexX28VQ.mjs.map → chroma-grid-DlY9hIRI.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"chroma-grid-CexX28VQ.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-DlY9hIRI.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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"}

package/dist/chunks/{chroma-grid-DP__XtmV.cjs → chroma-grid-tJX7CzCS.cjs}

@@ -218,4 +218,4 @@ Object.defineProperty(exports, "ChromaGrid", {
 	}
 });
 
-//# sourceMappingURL=chroma-grid-DP__XtmV.cjs.map
+//# sourceMappingURL=chroma-grid-tJX7CzCS.cjs.map

package/dist/chunks/{chroma-grid-DP__XtmV.cjs.map → chroma-grid-tJX7CzCS.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"chroma-grid-DP__XtmV.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":";;;;;;AAKA,IAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR;AAED,IAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAM,gBACJ,WACA,OACA,iBACG;CACH,MAAM,QAAS,QAAQ,eAAgB;AAEvC,SAAQ,WAAR;EACE,KAAK,OACH,QAAO;GACL,SAAS;IAAE,SAAS;IAAG,GAAG;IAAI,SAAS;IAAK;GAC5C,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG,SAAS;IAAG;GACzC,YAAY;IAAE;IAAO,UAAU;IAAK,MAAM;KAAC;KAAM;KAAG;KAAM;KAAE;IAAW;GACxE;EACH,KAAK,QACH,QAAO;GACL,SAAS;IAAE,OAAO;IAAK,SAAS;IAAG;GACnC,SAAS;IAAE,OAAO;IAAG,SAAS;IAAG;GACjC,YAAY;IACV;IACA,UAAU;IACV,MAAM;IACN,WAAW;IACZ;GACF;EACH,KAAK,SACH,QAAO;GACL,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,YAAY;IAAE;IAAO,UAAU;IAAK;GACrC;EACH,KAAK,QACH,QAAO;GACL,SAAS;IAAE,OAAO;IAAG,SAAS;IAAG;GACjC,SAAS;IAAE,OAAO;IAAG,SAAS;IAAG;GACjC,YAAY;IACV;IACA,UAAU;IACV,MAAM;IACN,WAAW;IACX,SAAS;IACV;GACF;EACH,QACE,QAAO,EAAE;;;AAIf,IAAM,kBAAkB,WAAmB;AACzC,SAAQ,QAAR;EACE,KAAK,OACH,QAAO;GAAE,GAAG;GAAI,YAAY,EAAE,UAAU,IAAK;GAAE;EACjD,KAAK,OACH,QAAO;GACL,WACE;GACF,YAAY,EAAE,UAAU,IAAK;GAC9B;EACH,KAAK,QACH,QAAO;GAAE,OAAO;GAAM,YAAY,EAAE,UAAU,IAAK;GAAE;EACvD,KAAK,OACH,QAAO;GAAE,SAAS;GAAG,SAAS;GAAG,YAAY,EAAE,UAAU,IAAK;GAAE;EAClE,QACE,QAAO,EAAE;;;AAgBf,IAAM,YAAY,EAChB,MACA,OACA,WACA,cACA,aACA,SACA,cACA,WACA,gBACmB;CACnB,MAAM,WAAA,GAAA,MAAA,QAAiC,KAAK;CAC5C,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,UAA6B;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAClE,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAyB,MAAM;CAEjD,MAAM,QAAQ,KAAK,SAAS,cAAc,QAAQ,cAAc;CAChE,MAAM,iBAAiB,aAAa,WAAW,OAAO,aAAa;CACnE,MAAM,aAAa,eAAe,YAAY;CAE9C,MAAM,mBAAmB,MAAwB;AAC/C,MAAI,CAAC,QAAQ,WAAW,CAAC,UAAW;EACpC,MAAM,OAAO,QAAQ,QAAQ,uBAAuB;AACpD,mBAAiB;GACf,GAAG,EAAE,UAAU,KAAK;GACpB,GAAG,EAAE,UAAU,KAAK;GACrB,CAAC;;CAGJ,MAAM,WACJ,KAAK,QAAQ,KAAK,OAAO,IACrB;EAAE,YAAY,QAAQ,KAAK;EAAQ,SAAS,QAAQ,KAAK;EAAQ,GACjE,EAAE;CAER,MAAM,gBAAgB;EACpB,OAAO;GACL,iBAAiB;GACjB,gBAAgB;GAChB,sBAAsB;GACvB;EACD,OAAO,EAAE;EACT,UAAU,EAAE,YAAY,OAAO;EAChC;AAED,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAA,OAAO,KAAR;EACE,KAAK;EACL,WAAW,cAAA,gBACT,6DACA,gBAAgB,eAChB,YAAY,WAAW,gCACvB,KAAK,UACN;EACD,OAAO;GACL,WACE,KAAK,QAAQ,KAAK,OAAO,IAAI,YAAY,KAAK,OAAO;GACvD,GAAG;GACH,GAAG,cAAc;GACjB,GAAI,YAAY,WAAW,EAAE,YAAY,OAAO;GACjD;EACD,aAAa;EACb,oBAAoB,aAAa,KAAK;EACtC,oBAAoB,aAAa,MAAM;EACvC,SAAS,KAAK;EACd,GAAI;EACJ,YAAY;YApBd;GAuBG,aAAa,aACZ,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,WAAU;IACV,OAAO,EACL,YAAY,mCAAmC,cAAc,EAAE,KAAK,cAAc,EAAE,8CACrF;IACD,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIH,YAAY,cACX,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GAItD,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAK,QACJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAU;gBACZ,KAAK;MACF,CAAA;KAEP,KAAK,SACJ,iBAAA,GAAA,kBAAA,KAAC,MAAD;MAAI,WAAU;gBACX,KAAK;MACH,CAAA;KAEN,KAAK,eACJ,iBAAA,GAAA,kBAAA,KAAC,KAAD;MAAG,WAAU;gBACV,KAAK;MACJ,CAAA;KAEL,KAAK;KACF;;GACK;;;AAIjB,IAAa,cAAc,EACzB,OACA,WACA,UAAU,GACV,MAAM,IACN,YAAY,KACZ,YAAY,QACZ,eAAe,KACf,cAAc,QACd,UAAU,YACV,eAAe,MACf,YAAY,MACZ,YACqB;AACrB,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,WAAW,cAAA,gBAAgB,eAAe,UAAU;EACpD,OAAO;GACL,qBAAqB,UAAU,QAAQ;GACvC,KAAK,GAAG,IAAI;GACZ,GAAG;GACJ;YAEA,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAAC,UAAD;GAEQ;GACC;GACI;GACG;GACD;GACJ;GACK;GACH;GACA;GACX,EAVK,KAAK,GAUV,CACF;EACE,CAAA;;AAIV,WAAW,cAAc"}
+{"version":3,"file":"chroma-grid-tJX7CzCS.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/{color-palette-ThIKMhT1.cjs → color-palette-BmQC14gE.cjs}

@@ -786,4 +786,4 @@ Object.defineProperty(exports, "ColorPalette", {
 	}
 });
 
-//# sourceMappingURL=color-palette-ThIKMhT1.cjs.map
+//# sourceMappingURL=color-palette-BmQC14gE.cjs.map

package/dist/chunks/{color-palette-ThIKMhT1.cjs.map → color-palette-BmQC14gE.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"color-palette-ThIKMhT1.cjs","names":[],"sources":["../../src/components/data-display/color-palette/ColorPalette.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface ColorSwatch {\n  name: string;\n  value: string;\n  textColor?: \"light\" | \"dark\";\n}\n\nexport interface ColorGroup {\n  name: string;\n  colors: ColorSwatch[];\n}\n\nexport interface ColorPaletteProps {\n  groups?: ColorGroup[];\n  theme?: \"light\" | \"dark\" | \"all\";\n  showGradients?: boolean;\n  showUsageExamples?: boolean;\n  className?: string;\n}\n\nconst lightThemeGroups: ColorGroup[] = [\n  {\n    name: \"Active Accent Scale\",\n    colors: [\n      { name: \"primary-50\", value: \"var(--ds-accent-50)\", textColor: \"dark\" },\n      { name: \"primary-100\", value: \"var(--ds-accent-100)\", textColor: \"dark\" },\n      { name: \"primary-200\", value: \"var(--ds-accent-200)\", textColor: \"dark\" },\n      { name: \"primary-300\", value: \"var(--ds-accent-300)\", textColor: \"dark\" },\n      {\n        name: \"primary-400\",\n        value: \"var(--ds-accent-400)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-500\",\n        value: \"var(--ds-accent-500)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-600\",\n        value: \"var(--ds-accent-600)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-700\",\n        value: \"var(--ds-accent-700)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-800\",\n        value: \"var(--ds-accent-800)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-900\",\n        value: \"var(--ds-accent-900)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Surfaces\",\n    colors: [\n      {\n        name: \"bg-ds-canvas\",\n        value: \"var(--ds-color-bg-canvas)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-1\",\n        value: \"var(--ds-color-bg-surface)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-2\",\n        value: \"var(--ds-color-bg-elevated)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-3\",\n        value: \"var(--ds-color-bg-ds-surface-3)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"accent-subtle\",\n        value: \"var(--ds-color-accent-subtle)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Foreground\",\n    colors: [\n      { name: \"fg\", value: \"var(--ds-color-fg)\", textColor: \"light\" },\n      {\n        name: \"fg-muted\",\n        value: \"var(--ds-color-fg-muted)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"fg-subtle\",\n        value: \"var(--ds-color-fg-subtle)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"on-accent\",\n        value: \"var(--ds-color-on-accent)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Borders\",\n    colors: [\n      { name: \"border\", value: \"var(--ds-color-border)\", textColor: \"dark\" },\n      {\n        name: \"border-strong\",\n        value: \"var(--ds-color-border-strong)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"border-muted\",\n        value: \"var(--ds-color-border-muted)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"border-field\",\n        value: \"var(--ds-color-border-field)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"focus-ring\",\n        value: \"var(--ds-color-focus-ring)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Status\",\n    colors: [\n      { name: \"success\", value: \"#1eb564\", textColor: \"light\" },\n      { name: \"warning\", value: \"#ff9500\", textColor: \"dark\" },\n      { name: \"danger\", value: \"#e31d1c\", textColor: \"light\" },\n      { name: \"info\", value: \"#0085c4\", textColor: \"light\" },\n      { name: \"disabled\", value: \"#d2d2d3\", textColor: \"dark\" },\n    ],\n  },\n  {\n    name: \"Foundation Tokens\",\n    colors: [\n      { name: \"--ds-primary\", value: \"var(--ds-primary)\", textColor: \"light\" },\n      {\n        name: \"--ds-surface-canvas\",\n        value: \"var(--ds-surface-canvas)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"--ds-surface-1\",\n        value: \"var(--ds-surface-1)\",\n        textColor: \"dark\",\n      },\n      { name: \"--ds-text-1\", value: \"var(--ds-text-1)\", textColor: \"light\" },\n      { name: \"--ds-border-1\", value: \"var(--ds-border-1)\", textColor: \"dark\" },\n    ],\n  },\n];\n\nconst darkThemeGroups: ColorGroup[] = [\n  {\n    name: \"Active Accent Scale (Dark)\",\n    colors: [\n      { name: \"primary-50\", value: \"var(--ds-accent-50)\", textColor: \"dark\" },\n      { name: \"primary-100\", value: \"var(--ds-accent-100)\", textColor: \"dark\" },\n      { name: \"primary-200\", value: \"var(--ds-accent-200)\", textColor: \"dark\" },\n      { name: \"primary-300\", value: \"var(--ds-accent-300)\", textColor: \"dark\" },\n      {\n        name: \"primary-400\",\n        value: \"var(--ds-accent-400)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-500\",\n        value: \"var(--ds-accent-500)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-600\",\n        value: \"var(--ds-accent-600)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-700\",\n        value: \"var(--ds-accent-700)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-800\",\n        value: \"var(--ds-accent-800)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-900\",\n        value: \"var(--ds-accent-900)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Surfaces (Dark)\",\n    colors: [\n      {\n        name: \"bg-ds-canvas\",\n        value: \"var(--ds-color-bg-canvas)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-1\",\n        value: \"var(--ds-color-bg-surface)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-2\",\n        value: \"var(--ds-color-bg-elevated)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-3\",\n        value: \"var(--ds-color-bg-ds-surface-3)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"accent-subtle\",\n        value: \"var(--ds-color-accent-subtle)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Foreground (Dark)\",\n    colors: [\n      { name: \"fg\", value: \"var(--ds-color-fg)\", textColor: \"dark\" },\n      {\n        name: \"fg-muted\",\n        value: \"var(--ds-color-fg-muted)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"fg-subtle\",\n        value: \"var(--ds-color-fg-subtle)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"on-accent\",\n        value: \"var(--ds-color-on-accent)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Borders (Dark)\",\n    colors: [\n      { name: \"border\", value: \"var(--ds-color-border)\", textColor: \"light\" },\n      {\n        name: \"border-strong\",\n        value: \"var(--ds-color-border-strong)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"border-muted\",\n        value: \"var(--ds-color-border-muted)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"border-field\",\n        value: \"var(--ds-color-border-field)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"focus-ring\",\n        value: \"var(--ds-color-focus-ring)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Status (Dark)\",\n    colors: [\n      { name: \"success\", value: \"#22c55e\", textColor: \"light\" },\n      { name: \"warning\", value: \"#f59e42\", textColor: \"dark\" },\n      { name: \"danger\", value: \"#ef4444\", textColor: \"light\" },\n      { name: \"info\", value: \"#38bdf8\", textColor: \"dark\" },\n      { name: \"disabled\", value: \"#4b5563\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Foundation Tokens (Dark)\",\n    colors: [\n      { name: \"--ds-primary\", value: \"var(--ds-primary)\", textColor: \"light\" },\n      {\n        name: \"--ds-surface-canvas\",\n        value: \"var(--ds-surface-canvas)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"--ds-surface-1\",\n        value: \"var(--ds-surface-1)\",\n        textColor: \"light\",\n      },\n      { name: \"--ds-text-1\", value: \"var(--ds-text-1)\", textColor: \"dark\" },\n      {\n        name: \"--ds-border-1\",\n        value: \"var(--ds-border-1)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n];\n\nconst gradientGroups: ColorGroup[] = [\n  {\n    name: \"Semantic Gradients\",\n    colors: [\n      { name: \"accent-gradient-start\", value: \"#9333ea\", textColor: \"light\" },\n      { name: \"accent-gradient-end\", value: \"#7e22ce\", textColor: \"light\" },\n      { name: \"accent-secondary\", value: \"#4318ff\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Status Gradients\",\n    colors: [\n      { name: \"success-gradient-start\", value: \"#22c55e\", textColor: \"light\" },\n      { name: \"success-gradient-end\", value: \"#16a34a\", textColor: \"light\" },\n      { name: \"warning-gradient-start\", value: \"#f59e0b\", textColor: \"dark\" },\n      { name: \"warning-gradient-end\", value: \"#d97706\", textColor: \"light\" },\n      { name: \"error-gradient-start\", value: \"#ef4444\", textColor: \"light\" },\n      { name: \"error-gradient-end\", value: \"#dc2626\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Glass / Opacity\",\n    colors: [\n      {\n        name: \"glass-white-90\",\n        value: \"rgba(255,255,255,0.9)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-70\",\n        value: \"rgba(255,255,255,0.7)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-50\",\n        value: \"rgba(255,255,255,0.5)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-20\",\n        value: \"rgba(255,255,255,0.2)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-10\",\n        value: \"rgba(255,255,255,0.1)\",\n        textColor: \"dark\",\n      },\n      { name: \"glass-black-90\", value: \"rgba(0,0,0,0.9)\", textColor: \"light\" },\n      { name: \"glass-black-70\", value: \"rgba(0,0,0,0.7)\", textColor: \"light\" },\n      { name: \"glass-black-50\", value: \"rgba(0,0,0,0.5)\", textColor: \"light\" },\n      { name: \"glass-black-20\", value: \"rgba(0,0,0,0.2)\", textColor: \"light\" },\n      { name: \"glass-black-10\", value: \"rgba(0,0,0,0.1)\", textColor: \"light\" },\n    ],\n  },\n];\n\n// Default groups (backwards compatibility)\nconst defaultGroups: ColorGroup[] = lightThemeGroups;\n\ninterface DisplayColorGroup {\n  group: ColorGroup;\n  mode?: \"light\" | \"dark\";\n}\n\nfunction ColorSwatchItem({ color }: { color: ColorSwatch }) {\n  const swatchRef = React.useRef<HTMLDivElement | null>(null);\n  const [resolvedValue, setResolvedValue] = React.useState<string>(color.value);\n\n  // Resolve runtime CSS variable values so docs reflect live theme tokens.\n  React.useEffect(() => {\n    if (!swatchRef.current) {\n      return;\n    }\n\n    if (color.value.startsWith(\"var(\")) {\n      const computedBackground = getComputedStyle(\n        swatchRef.current,\n      ).backgroundColor;\n      setResolvedValue(computedBackground || color.value);\n      return;\n    }\n\n    setResolvedValue(color.value);\n  }, [color.value]);\n\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(resolvedValue);\n  };\n\n  const swatchLabel = color.value.startsWith(\"var(\")\n    ? \"LIVE\"\n    : color.value.length <= 9\n      ? color.value.toUpperCase()\n      : \"RGBA\";\n\n  return (\n    <div\n      className=\"flex flex-col items-center gap-2 cursor-pointer transition-transform hover:scale-105\"\n      onClick={copyToClipboard}\n      title=\"Click to copy\"\n    >\n      <div\n        ref={swatchRef}\n        className=\"w-20 h-20 rounded-lg shadow-md border border-ds-border-2 flex items-center justify-center text-xs font-mono\"\n        style={{ backgroundColor: color.value }}\n      >\n        <span className=\"font-semibold text-ds-1 mix-blend-difference\">\n          {swatchLabel}\n        </span>\n      </div>\n      <span className=\"text-xs font-medium text-ds-2 text-center max-w-20\">\n        {color.name}\n      </span>\n      <span className=\"text-[10px] font-mono text-ds-3 text-center max-w-20 break-all\">\n        {resolvedValue}\n      </span>\n    </div>\n  );\n}\n\nfunction GradientPreview() {\n  // Static examples to illustrate common gradient recipes.\n  return (\n    <div className=\"mt-8\">\n      <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">\n        Semantic Gradient Examples\n      </h3>\n      <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #9333ea, #7e22ce)\",\n            }}\n          >\n            Accent Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #9333ea, #7e22ce)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #9333ea, #4318ff)\",\n            }}\n          >\n            Accent to Brand Primary\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #9333ea, #4318ff)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #22c55e, #16a34a)\",\n            }}\n          >\n            Success Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #22c55e, #16a34a)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-1 font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #fbbf24, #f59e0b)\",\n            }}\n          >\n            Warning Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #fbbf24, #f59e0b)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #ef4444, #dc2626)\",\n            }}\n          >\n            Error Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #ef4444, #dc2626)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium backdrop-blur-xl border border-ds-border-2/40\"\n            style={{\n              background: \"rgba(147, 51, 234, 0.7)\",\n            }}\n          >\n            Glass Effect\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            rgba(147, 51, 234, 0.7) + backdrop-blur\n          </code>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction UsageExamples() {\n  // Token usage references for semantic utilities + raw CSS variables.\n  return (\n    <div className=\"mt-8 p-6 bg-ds-surface-2 rounded-xl\">\n      <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">\n        Recommended Usage\n      </h3>\n      <div className=\"space-y-4\">\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Semantic utilities first\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`import { Button } from \"erp-pro-ui\";\n\n<section className=\"bg-ds-surface-1 text-ds-1 border border-ds-border-2 rounded-2xl p-6\">\n  <h2 className=\"text-ds-1 text-xl font-semibold\">Semantic theme</h2>\n  <p className=\"text-ds-2\">Use utilities generated by colors.css.</p>\n  <Button label=\"Save changes\" primary />\n</section>`}\n          </pre>\n        </div>\n\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Raw design-system variables\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`.dashboard-shell {\n  background: var(--ds-color-bg-surface);\n  color: var(--ds-color-fg);\n  border: 1px solid var(--ds-color-border);\n}\n\n.dashboard-shell a {\n  color: var(--ds-color-accent);\n}\n\nhtml[data-brand=\"teal\"][data-mode=\"dark\"] {\n  color-scheme: dark;\n}`}\n          </pre>\n        </div>\n\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Compatibility aliases for migration\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`:root {\n  --color-primary: #4318ff;\n  --color-background-primary: #f4f7fe;\n  --color-text-primary: #1e293b;\n}\n\n/* Supported for migration. Prefer semantic utilities or --ds-* in new code. */`}\n          </pre>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default function ColorPalette({\n  groups,\n  theme = \"all\",\n  showGradients = true,\n  showUsageExamples = true,\n  className,\n}: ColorPaletteProps) {\n  // Build display groups based on requested mode. Each group can be rendered\n  // inside an explicit `data-mode` wrapper so light and dark values are both\n  // resolved accurately on the same page.\n  let displayGroups: DisplayColorGroup[];\n  if (groups) {\n    displayGroups = groups.map((group) => ({ group }));\n  } else if (theme === \"light\") {\n    displayGroups = lightThemeGroups.map((group) => ({ group, mode: \"light\" }));\n  } else if (theme === \"dark\") {\n    displayGroups = darkThemeGroups.map((group) => ({ group, mode: \"dark\" }));\n  } else {\n    // Show all\n    displayGroups = [\n      ...lightThemeGroups.map((group) => ({ group, mode: \"light\" as const })),\n      ...darkThemeGroups.map((group) => ({ group, mode: \"dark\" as const })),\n    ];\n  }\n\n  // Append optional gradient/opacity examples when using built-in groups.\n  if (showGradients && !groups) {\n    displayGroups = [\n      ...displayGroups,\n      ...gradientGroups.map((group) => ({ group })),\n    ];\n  }\n\n  return (\n    <div className={`p-6 bg-ds-surface-1 rounded-xl ${className || \"\"}`}>\n      <h2 className=\"text-2xl font-bold text-ds-1 mb-2\">Color Palette</h2>\n      <p className=\"text-sm text-ds-2 mb-6\">\n        Preferred contract:{\" \"}\n        <code className=\"font-mono bg-ds-surface-2 px-2 py-1 rounded text-ds-1\">\n          semantic utilities and --ds-* tokens\n        </code>{\" \"}\n        • Compatibility aliases remain available for migration. Light and dark\n        sections are resolved in their own mode contexts. Click any swatch to\n        copy the resolved color value.\n      </p>\n\n      <div className=\"mb-6 flex flex-wrap gap-2\">\n        <span\n          className={`px-3 py-1 rounded-full text-xs font-medium ${\n            theme === \"light\" || theme === \"all\"\n              ? \"bg-ds-accent-subtle text-ds-1\"\n              : \"bg-ds-surface-2 text-ds-3\"\n          }`}\n        >\n          Light Theme\n        </span>\n        <span\n          className={`px-3 py-1 rounded-full text-xs font-medium ${\n            theme === \"dark\" || theme === \"all\"\n              ? \"bg-ds-accent-subtle text-ds-1\"\n              : \"bg-ds-surface-2 text-ds-3\"\n          }`}\n        >\n          Dark Theme\n        </span>\n        {showGradients && (\n          <span className=\"px-3 py-1 rounded-full text-xs font-medium bg-ds-accent-subtle text-ds-1\">\n            Gradients\n          </span>\n        )}\n      </div>\n\n      {displayGroups.map(({ group, mode }) => (\n        <div key={group.name} data-mode={mode} className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">{group.name}</h3>\n          <div className=\"flex flex-wrap gap-4\">\n            {group.colors.map((color) => (\n              <ColorSwatchItem key={color.name} color={color} />\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {showGradients && <GradientPreview />}\n      {showUsageExamples && <UsageExamples />}\n    </div>\n  );\n}\n\n// Export color groups for external use\nexport { lightThemeGroups, darkThemeGroups, gradientGroups, defaultGroups };\n"],"mappings":";;;;;AAqBA,IAAM,mBAAiC;CACrC;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAAc,OAAO;IAAuB,WAAW;IAAQ;GACvE;IAAE,MAAM;IAAe,OAAO;IAAwB,WAAW;IAAQ;GACzE;IAAE,MAAM;IAAe,OAAO;IAAwB,WAAW;IAAQ;GACzE;IAAE,MAAM;IAAe,OAAO;IAAwB,WAAW;IAAQ;GACzE;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACF;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACF;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAAM,OAAO;IAAsB,WAAW;IAAS;GAC/D;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACF;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAAU,OAAO;IAA0B,WAAW;IAAQ;GACtE;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACF;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAAW,OAAO;IAAW,WAAW;IAAS;GACzD;IAAE,MAAM;IAAW,OAAO;IAAW,WAAW;IAAQ;GACxD;IAAE,MAAM;IAAU,OAAO;IAAW,WAAW;IAAS;GACxD;IAAE,MAAM;IAAQ,OAAO;IAAW,WAAW;IAAS;GACtD;IAAE,MAAM;IAAY,OAAO;IAAW,WAAW;IAAQ;GAC1D;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAAgB,OAAO;IAAqB,WAAW;IAAS;GACxE;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IAAE,MAAM;IAAe,OAAO;IAAoB,WAAW;IAAS;GACtE;IAAE,MAAM;IAAiB,OAAO;IAAsB,WAAW;IAAQ;GAC1E;EACF;CACF;AAED,IAAM,kBAAgC;CACpC;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAAc,OAAO;IAAuB,WAAW;IAAQ;GACvE;IAAE,MAAM;IAAe,OAAO;IAAwB,WAAW;IAAQ;GACzE;IAAE,MAAM;IAAe,OAAO;IAAwB,WAAW;IAAQ;GACzE;IAAE,MAAM;IAAe,OAAO;IAAwB,WAAW;IAAQ;GACzE;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACF;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACF;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAAM,OAAO;IAAsB,WAAW;IAAQ;GAC9D;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACF;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAAU,OAAO;IAA0B,WAAW;IAAS;GACvE;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACF;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAAW,OAAO;IAAW,WAAW;IAAS;GACzD;IAAE,MAAM;IAAW,OAAO;IAAW,WAAW;IAAQ;GACxD;IAAE,MAAM;IAAU,OAAO;IAAW,WAAW;IAAS;GACxD;IAAE,MAAM;IAAQ,OAAO;IAAW,WAAW;IAAQ;GACrD;IAAE,MAAM;IAAY,OAAO;IAAW,WAAW;IAAS;GAC3D;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAAgB,OAAO;IAAqB,WAAW;IAAS;GACxE;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IAAE,MAAM;IAAe,OAAO;IAAoB,WAAW;IAAQ;GACrE;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACF;EACF;CACF;AAED,IAAM,iBAA+B;CACnC;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAAyB,OAAO;IAAW,WAAW;IAAS;GACvE;IAAE,MAAM;IAAuB,OAAO;IAAW,WAAW;IAAS;GACrE;IAAE,MAAM;IAAoB,OAAO;IAAW,WAAW;IAAS;GACnE;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IAAE,MAAM;IAA0B,OAAO;IAAW,WAAW;IAAS;GACxE;IAAE,MAAM;IAAwB,OAAO;IAAW,WAAW;IAAS;GACtE;IAAE,MAAM;IAA0B,OAAO;IAAW,WAAW;IAAQ;GACvE;IAAE,MAAM;IAAwB,OAAO;IAAW,WAAW;IAAS;GACtE;IAAE,MAAM;IAAwB,OAAO;IAAW,WAAW;IAAS;GACtE;IAAE,MAAM;IAAsB,OAAO;IAAW,WAAW;IAAS;GACrE;EACF;CACD;EACE,MAAM;EACN,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IACE,MAAM;IACN,OAAO;IACP,WAAW;IACZ;GACD;IAAE,MAAM;IAAkB,OAAO;IAAmB,WAAW;IAAS;GACxE;IAAE,MAAM;IAAkB,OAAO;IAAmB,WAAW;IAAS;GACxE;IAAE,MAAM;IAAkB,OAAO;IAAmB,WAAW;IAAS;GACxE;IAAE,MAAM;IAAkB,OAAO;IAAmB,WAAW;IAAS;GACxE;IAAE,MAAM;IAAkB,OAAO;IAAmB,WAAW;IAAS;GACzE;EACF;CACF;AAUD,SAAS,gBAAgB,EAAE,SAAiC;CAC1D,MAAM,YAAY,MAAA,QAAM,OAA8B,KAAK;CAC3D,MAAM,CAAC,eAAe,oBAAoB,MAAA,QAAM,SAAiB,MAAM,MAAM;AAG7E,OAAA,QAAM,gBAAgB;AACpB,MAAI,CAAC,UAAU,QACb;AAGF,MAAI,MAAM,MAAM,WAAW,OAAO,EAAE;GAClC,MAAM,qBAAqB,iBACzB,UAAU,QACX,CAAC;AACF,oBAAiB,sBAAsB,MAAM,MAAM;AACnD;;AAGF,mBAAiB,MAAM,MAAM;IAC5B,CAAC,MAAM,MAAM,CAAC;CAEjB,MAAM,wBAAwB;AAC5B,YAAU,UAAU,UAAU,cAAc;;CAG9C,MAAM,cAAc,MAAM,MAAM,WAAW,OAAO,GAC9C,SACA,MAAM,MAAM,UAAU,IACpB,MAAM,MAAM,aAAa,GACzB;AAEN,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,OAAM;YAHR;GAKE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,KAAK;IACL,WAAU;IACV,OAAO,EAAE,iBAAiB,MAAM,OAAO;cAEvC,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eACb;KACI,CAAA;IACH,CAAA;GACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cACb,MAAM;IACF,CAAA;GACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GACH;;;AAIV,SAAS,kBAAkB;AAEzB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAI,WAAU;aAAuC;GAEhD,CAAA,EACL,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf;IACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAU;MACV,OAAO,EACL,YAAY,6CACb;gBACF;MAEK,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAU;gBAAoB;MAE7B,CAAA,CACH;;IAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAU;MACV,OAAO,EACL,YAAY,6CACb;gBACF;MAEK,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAU;gBAAoB;MAE7B,CAAA,CACH;;IAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAU;MACV,OAAO,EACL,YAAY,6CACb;gBACF;MAEK,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAU;gBAAoB;MAE7B,CAAA,CACH;;IAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAU;MACV,OAAO,EACL,YAAY,6CACb;gBACF;MAEK,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAU;gBAAoB;MAE7B,CAAA,CACH;;IAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAU;MACV,OAAO,EACL,YAAY,6CACb;gBACF;MAEK,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAU;gBAAoB;MAE7B,CAAA,CACH;;IAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAU;MACV,OAAO,EACL,YAAY,2BACb;gBACF;MAEK,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAU;gBAAoB;MAE7B,CAAA,CACH;;IACF;KACF;;;AAIV,SAAS,gBAAgB;AAEvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAI,WAAU;aAAuC;GAEhD,CAAA,EACL,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf;IACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;MAAI,WAAU;gBAA6B;MAEtC,CAAA,EACL,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAU;gBACZ;;;;;;;MAOG,CAAA,CACF;;IAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;MAAI,WAAU;gBAA6B;MAEtC,CAAA,EACL,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAU;gBACZ;;;;;;;;;;;;;MAaG,CAAA,CACF;;IAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;MAAI,WAAU;gBAA6B;MAEtC,CAAA,EACL,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAU;gBACZ;;;;;;;MAOG,CAAA,CACF;;IACF;KACF;;;AAIV,SAAwB,aAAa,EACnC,QACA,QAAQ,OACR,gBAAgB,MAChB,oBAAoB,MACpB,aACoB;CAIpB,IAAI;AACJ,KAAI,OACF,iBAAgB,OAAO,KAAK,WAAW,EAAE,OAAO,EAAE;UACzC,UAAU,QACnB,iBAAgB,iBAAiB,KAAK,WAAW;EAAE;EAAO,MAAM;EAAS,EAAE;UAClE,UAAU,OACnB,iBAAgB,gBAAgB,KAAK,WAAW;EAAE;EAAO,MAAM;EAAQ,EAAE;KAGzE,iBAAgB,CACd,GAAG,iBAAiB,KAAK,WAAW;EAAE;EAAO,MAAM;EAAkB,EAAE,EACvE,GAAG,gBAAgB,KAAK,WAAW;EAAE;EAAO,MAAM;EAAiB,EAAE,CACtE;AAIH,KAAI,iBAAiB,CAAC,OACpB,iBAAgB,CACd,GAAG,eACH,GAAG,eAAe,KAAK,WAAW,EAAE,OAAO,EAAE,CAC9C;AAGH,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAW,kCAAkC,aAAa;YAA/D;GACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;IAAI,WAAU;cAAoC;IAAkB,CAAA;GACpE,iBAAA,GAAA,kBAAA,MAAC,KAAD;IAAG,WAAU;cAAb;KAAsC;KAChB;KACpB,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAU;gBAAwD;MAEjE,CAAA;KAAC;KAAI;KAIV;;GAEJ,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf;KACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,WAAW,8CACT,UAAU,WAAW,UAAU,QAC3B,kCACA;gBAEP;MAEM,CAAA;KACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,WAAW,8CACT,UAAU,UAAU,UAAU,QAC1B,kCACA;gBAEP;MAEM,CAAA;KACN,iBACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAU;gBAA2E;MAEpF,CAAA;KAEL;;GAEL,cAAc,KAAK,EAAE,OAAO,WAC3B,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAsB,aAAW;IAAM,WAAU;cAAjD,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;KAAI,WAAU;eAAwC,MAAM;KAAU,CAAA,EACtE,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAU;eACZ,MAAM,OAAO,KAAK,UACjB,iBAAA,GAAA,kBAAA,KAAC,iBAAD,EAAyC,OAAS,EAA5B,MAAM,KAAsB,CAClD;KACE,CAAA,CACF;MAPI,MAAM,KAOV,CACN;GAED,iBAAiB,iBAAA,GAAA,kBAAA,KAAC,iBAAD,EAAmB,CAAA;GACpC,qBAAqB,iBAAA,GAAA,kBAAA,KAAC,eAAD,EAAiB,CAAA;GACnC"}
+{"version":3,"file":"color-palette-BmQC14gE.cjs","names":[],"sources":["../../src/components/data-display/color-palette/ColorPalette.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface ColorSwatch {\n  name: string;\n  value: string;\n  textColor?: \"light\" | \"dark\";\n}\n\nexport interface ColorGroup {\n  name: string;\n  colors: ColorSwatch[];\n}\n\nexport interface ColorPaletteProps {\n  groups?: ColorGroup[];\n  theme?: \"light\" | \"dark\" | \"all\";\n  showGradients?: boolean;\n  showUsageExamples?: boolean;\n  className?: string;\n}\n\nconst lightThemeGroups: ColorGroup[] = [\n  {\n    name: \"Active Accent Scale\",\n    colors: [\n      { name: \"primary-50\", value: \"var(--ds-accent-50)\", textColor: \"dark\" },\n      { name: \"primary-100\", value: \"var(--ds-accent-100)\", textColor: \"dark\" },\n      { name: \"primary-200\", value: \"var(--ds-accent-200)\", textColor: \"dark\" },\n      { name: \"primary-300\", value: \"var(--ds-accent-300)\", textColor: \"dark\" },\n      {\n        name: \"primary-400\",\n        value: \"var(--ds-accent-400)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-500\",\n        value: \"var(--ds-accent-500)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-600\",\n        value: \"var(--ds-accent-600)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-700\",\n        value: \"var(--ds-accent-700)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-800\",\n        value: \"var(--ds-accent-800)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-900\",\n        value: \"var(--ds-accent-900)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Surfaces\",\n    colors: [\n      {\n        name: \"bg-ds-canvas\",\n        value: \"var(--ds-color-bg-canvas)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-1\",\n        value: \"var(--ds-color-bg-surface)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-2\",\n        value: \"var(--ds-color-bg-elevated)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-3\",\n        value: \"var(--ds-color-bg-ds-surface-3)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"accent-subtle\",\n        value: \"var(--ds-color-accent-subtle)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Foreground\",\n    colors: [\n      { name: \"fg\", value: \"var(--ds-color-fg)\", textColor: \"light\" },\n      {\n        name: \"fg-muted\",\n        value: \"var(--ds-color-fg-muted)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"fg-subtle\",\n        value: \"var(--ds-color-fg-subtle)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"on-accent\",\n        value: \"var(--ds-color-on-accent)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Borders\",\n    colors: [\n      { name: \"border\", value: \"var(--ds-color-border)\", textColor: \"dark\" },\n      {\n        name: \"border-strong\",\n        value: \"var(--ds-color-border-strong)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"border-muted\",\n        value: \"var(--ds-color-border-muted)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"border-field\",\n        value: \"var(--ds-color-border-field)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"focus-ring\",\n        value: \"var(--ds-color-focus-ring)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Status\",\n    colors: [\n      { name: \"success\", value: \"#1eb564\", textColor: \"light\" },\n      { name: \"warning\", value: \"#ff9500\", textColor: \"dark\" },\n      { name: \"danger\", value: \"#e31d1c\", textColor: \"light\" },\n      { name: \"info\", value: \"#0085c4\", textColor: \"light\" },\n      { name: \"disabled\", value: \"#d2d2d3\", textColor: \"dark\" },\n    ],\n  },\n  {\n    name: \"Foundation Tokens\",\n    colors: [\n      { name: \"--ds-primary\", value: \"var(--ds-primary)\", textColor: \"light\" },\n      {\n        name: \"--ds-surface-canvas\",\n        value: \"var(--ds-surface-canvas)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"--ds-surface-1\",\n        value: \"var(--ds-surface-1)\",\n        textColor: \"dark\",\n      },\n      { name: \"--ds-text-1\", value: \"var(--ds-text-1)\", textColor: \"light\" },\n      { name: \"--ds-border-1\", value: \"var(--ds-border-1)\", textColor: \"dark\" },\n    ],\n  },\n];\n\nconst darkThemeGroups: ColorGroup[] = [\n  {\n    name: \"Active Accent Scale (Dark)\",\n    colors: [\n      { name: \"primary-50\", value: \"var(--ds-accent-50)\", textColor: \"dark\" },\n      { name: \"primary-100\", value: \"var(--ds-accent-100)\", textColor: \"dark\" },\n      { name: \"primary-200\", value: \"var(--ds-accent-200)\", textColor: \"dark\" },\n      { name: \"primary-300\", value: \"var(--ds-accent-300)\", textColor: \"dark\" },\n      {\n        name: \"primary-400\",\n        value: \"var(--ds-accent-400)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-500\",\n        value: \"var(--ds-accent-500)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-600\",\n        value: \"var(--ds-accent-600)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-700\",\n        value: \"var(--ds-accent-700)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-800\",\n        value: \"var(--ds-accent-800)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-900\",\n        value: \"var(--ds-accent-900)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Surfaces (Dark)\",\n    colors: [\n      {\n        name: \"bg-ds-canvas\",\n        value: \"var(--ds-color-bg-canvas)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-1\",\n        value: \"var(--ds-color-bg-surface)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-2\",\n        value: \"var(--ds-color-bg-elevated)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-3\",\n        value: \"var(--ds-color-bg-ds-surface-3)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"accent-subtle\",\n        value: \"var(--ds-color-accent-subtle)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Foreground (Dark)\",\n    colors: [\n      { name: \"fg\", value: \"var(--ds-color-fg)\", textColor: \"dark\" },\n      {\n        name: \"fg-muted\",\n        value: \"var(--ds-color-fg-muted)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"fg-subtle\",\n        value: \"var(--ds-color-fg-subtle)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"on-accent\",\n        value: \"var(--ds-color-on-accent)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Borders (Dark)\",\n    colors: [\n      { name: \"border\", value: \"var(--ds-color-border)\", textColor: \"light\" },\n      {\n        name: \"border-strong\",\n        value: \"var(--ds-color-border-strong)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"border-muted\",\n        value: \"var(--ds-color-border-muted)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"border-field\",\n        value: \"var(--ds-color-border-field)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"focus-ring\",\n        value: \"var(--ds-color-focus-ring)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Status (Dark)\",\n    colors: [\n      { name: \"success\", value: \"#22c55e\", textColor: \"light\" },\n      { name: \"warning\", value: \"#f59e42\", textColor: \"dark\" },\n      { name: \"danger\", value: \"#ef4444\", textColor: \"light\" },\n      { name: \"info\", value: \"#38bdf8\", textColor: \"dark\" },\n      { name: \"disabled\", value: \"#4b5563\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Foundation Tokens (Dark)\",\n    colors: [\n      { name: \"--ds-primary\", value: \"var(--ds-primary)\", textColor: \"light\" },\n      {\n        name: \"--ds-surface-canvas\",\n        value: \"var(--ds-surface-canvas)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"--ds-surface-1\",\n        value: \"var(--ds-surface-1)\",\n        textColor: \"light\",\n      },\n      { name: \"--ds-text-1\", value: \"var(--ds-text-1)\", textColor: \"dark\" },\n      {\n        name: \"--ds-border-1\",\n        value: \"var(--ds-border-1)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n];\n\nconst gradientGroups: ColorGroup[] = [\n  {\n    name: \"Semantic Gradients\",\n    colors: [\n      { name: \"accent-gradient-start\", value: \"#9333ea\", textColor: \"light\" },\n      { name: \"accent-gradient-end\", value: \"#7e22ce\", textColor: \"light\" },\n      { name: \"accent-secondary\", value: \"#4318ff\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Status Gradients\",\n    colors: [\n      { name: \"success-gradient-start\", value: \"#22c55e\", textColor: \"light\" },\n      { name: \"success-gradient-end\", value: \"#16a34a\", textColor: \"light\" },\n      { name: \"warning-gradient-start\", value: \"#f59e0b\", textColor: \"dark\" },\n      { name: \"warning-gradient-end\", value: \"#d97706\", textColor: \"light\" },\n      { name: \"error-gradient-start\", value: \"#ef4444\", textColor: \"light\" },\n      { name: \"error-gradient-end\", value: \"#dc2626\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Glass / Opacity\",\n    colors: [\n      {\n        name: \"glass-white-90\",\n        value: \"rgba(255,255,255,0.9)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-70\",\n        value: \"rgba(255,255,255,0.7)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-50\",\n        value: \"rgba(255,255,255,0.5)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-20\",\n        value: \"rgba(255,255,255,0.2)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-10\",\n        value: \"rgba(255,255,255,0.1)\",\n        textColor: \"dark\",\n      },\n      { name: \"glass-black-90\", value: \"rgba(0,0,0,0.9)\", textColor: \"light\" },\n      { name: \"glass-black-70\", value: \"rgba(0,0,0,0.7)\", textColor: \"light\" },\n      { name: \"glass-black-50\", value: \"rgba(0,0,0,0.5)\", textColor: \"light\" },\n      { name: \"glass-black-20\", value: \"rgba(0,0,0,0.2)\", textColor: \"light\" },\n      { name: \"glass-black-10\", value: \"rgba(0,0,0,0.1)\", textColor: \"light\" },\n    ],\n  },\n];\n\n// Default groups (backwards compatibility)\nconst defaultGroups: ColorGroup[] = lightThemeGroups;\n\ninterface DisplayColorGroup {\n  group: ColorGroup;\n  mode?: \"light\" | \"dark\";\n}\n\nfunction ColorSwatchItem({ color }: { color: ColorSwatch }) {\n  const swatchRef = React.useRef<HTMLDivElement | null>(null);\n  const [resolvedValue, setResolvedValue] = React.useState<string>(color.value);\n\n  // Resolve runtime CSS variable values so docs reflect live theme tokens.\n  React.useEffect(() => {\n    if (!swatchRef.current) {\n      return;\n    }\n\n    if (color.value.startsWith(\"var(\")) {\n      const computedBackground = getComputedStyle(\n        swatchRef.current,\n      ).backgroundColor;\n      setResolvedValue(computedBackground || color.value);\n      return;\n    }\n\n    setResolvedValue(color.value);\n  }, [color.value]);\n\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(resolvedValue);\n  };\n\n  const swatchLabel = color.value.startsWith(\"var(\")\n    ? \"LIVE\"\n    : color.value.length <= 9\n      ? color.value.toUpperCase()\n      : \"RGBA\";\n\n  return (\n    <div\n      className=\"flex flex-col items-center gap-2 cursor-pointer transition-transform hover:scale-105\"\n      onClick={copyToClipboard}\n      title=\"Click to copy\"\n    >\n      <div\n        ref={swatchRef}\n        className=\"w-20 h-20 rounded-lg shadow-md border border-ds-border-2 flex items-center justify-center text-xs font-mono\"\n        style={{ backgroundColor: color.value }}\n      >\n        <span className=\"font-semibold text-ds-1 mix-blend-difference\">\n          {swatchLabel}\n        </span>\n      </div>\n      <span className=\"text-xs font-medium text-ds-2 text-center max-w-20\">\n        {color.name}\n      </span>\n      <span className=\"text-[10px] font-mono text-ds-3 text-center max-w-20 break-all\">\n        {resolvedValue}\n      </span>\n    </div>\n  );\n}\n\nfunction GradientPreview() {\n  // Static examples to illustrate common gradient recipes.\n  return (\n    <div className=\"mt-8\">\n      <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">\n        Semantic Gradient Examples\n      </h3>\n      <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #9333ea, #7e22ce)\",\n            }}\n          >\n            Accent Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #9333ea, #7e22ce)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #9333ea, #4318ff)\",\n            }}\n          >\n            Accent to Brand Primary\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #9333ea, #4318ff)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #22c55e, #16a34a)\",\n            }}\n          >\n            Success Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #22c55e, #16a34a)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-1 font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #fbbf24, #f59e0b)\",\n            }}\n          >\n            Warning Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #fbbf24, #f59e0b)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #ef4444, #dc2626)\",\n            }}\n          >\n            Error Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #ef4444, #dc2626)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium backdrop-blur-xl border border-ds-border-2/40\"\n            style={{\n              background: \"rgba(147, 51, 234, 0.7)\",\n            }}\n          >\n            Glass Effect\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            rgba(147, 51, 234, 0.7) + backdrop-blur\n          </code>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction UsageExamples() {\n  // Token usage references for semantic utilities + raw CSS variables.\n  return (\n    <div className=\"mt-8 p-6 bg-ds-surface-2 rounded-xl\">\n      <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">\n        Recommended Usage\n      </h3>\n      <div className=\"space-y-4\">\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Semantic utilities first\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`import { Button } from \"erp-pro-ui\";\n\n<section className=\"bg-ds-surface-1 text-ds-1 border border-ds-border-2 rounded-2xl p-6\">\n  <h2 className=\"text-ds-1 text-xl font-semibold\">Semantic theme</h2>\n  <p className=\"text-ds-2\">Use utilities generated by colors.css.</p>\n  <Button label=\"Save changes\" primary />\n</section>`}\n          </pre>\n        </div>\n\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Raw design-system variables\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`.dashboard-shell {\n  background: var(--ds-color-bg-surface);\n  color: var(--ds-color-fg);\n  border: 1px solid var(--ds-color-border);\n}\n\n.dashboard-shell a {\n  color: var(--ds-color-accent);\n}\n\nhtml[data-brand=\"teal\"][data-mode=\"dark\"] {\n  color-scheme: dark;\n}`}\n          </pre>\n        </div>\n\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Compatibility aliases for migration\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`:root {\n  --color-primary: #4318ff;\n  --color-background-primary: #f4f7fe;\n  --color-text-primary: #1e293b;\n}\n\n/* Supported for migration. Prefer semantic utilities or --ds-* in new code. */`}\n          </pre>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default function ColorPalette({\n  groups,\n  theme = \"all\",\n  showGradients = true,\n  showUsageExamples = true,\n  className,\n}: ColorPaletteProps) {\n  // Build display groups based on requested mode. Each group can be rendered\n  // inside an explicit `data-mode` wrapper so light and dark values are both\n  // resolved accurately on the same page.\n  let displayGroups: DisplayColorGroup[];\n  if (groups) {\n    displayGroups = groups.map((group) => ({ group }));\n  } else if (theme === \"light\") {\n    displayGroups = lightThemeGroups.map((group) => ({ group, mode: \"light\" }));\n  } else if (theme === \"dark\") {\n    displayGroups = darkThemeGroups.map((group) => ({ group, mode: \"dark\" }));\n  } else {\n    // Show all\n    displayGroups = [\n      ...lightThemeGroups.map((group) => ({ group, mode: \"light\" as const })),\n      ...darkThemeGroups.map((group) => ({ group, mode: \"dark\" as const })),\n    ];\n  }\n\n  // Append optional gradient/opacity examples when using built-in groups.\n  if (showGradients && !groups) {\n    displayGroups = [\n      ...displayGroups,\n      ...gradientGroups.map((group) => ({ group })),\n    ];\n  }\n\n  return (\n    <div className={`p-6 bg-ds-surface-1 rounded-xl ${className || \"\"}`}>\n      <h2 className=\"text-2xl font-bold text-ds-1 mb-2\">Color Palette</h2>\n      <p className=\"text-sm text-ds-2 mb-6\">\n        Preferred contract:{\" \"}\n        <code className=\"font-mono bg-ds-surface-2 px-2 py-1 rounded text-ds-1\">\n          semantic utilities and --ds-* tokens\n        </code>{\" \"}\n        • Compatibility aliases remain available for migration. Light and dark\n        sections are resolved in their own mode contexts. Click any swatch to\n        copy the resolved color value.\n      </p>\n\n      <div className=\"mb-6 flex flex-wrap gap-2\">\n        <span\n          className={`px-3 py-1 rounded-full text-xs font-medium ${\n            theme === \"light\" || theme === \"all\"\n              ? \"bg-ds-accent-subtle text-ds-1\"\n              : \"bg-ds-surface-2 text-ds-3\"\n          }`}\n        >\n          Light Theme\n        </span>\n        <span\n          className={`px-3 py-1 rounded-full text-xs font-medium ${\n            theme === \"dark\" || theme === \"all\"\n              ? \"bg-ds-accent-subtle text-ds-1\"\n              : \"bg-ds-surface-2 text-ds-3\"\n          }`}\n        >\n          Dark Theme\n        </span>\n        {showGradients && (\n          <span className=\"px-3 py-1 rounded-full text-xs font-medium bg-ds-accent-subtle text-ds-1\">\n            Gradients\n          </span>\n        )}\n      </div>\n\n      {displayGroups.map(({ group, mode }) => (\n        <div key={group.name} data-mode={mode} className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">{group.name}</h3>\n          <div className=\"flex flex-wrap gap-4\">\n            {group.colors.map((color) => (\n              <ColorSwatchItem key={color.name} color={color} />\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {showGradients && <GradientPreview />}\n      {showUsageExamples && <UsageExamples />}\n    </div>\n  );\n}\n\n// Export color groups for external use\nexport { lightThemeGroups, darkThemeGroups, gradientGroups, defaultGroups };\n"],"mappings":"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"}

package/dist/chunks/{color-palette-BU1cI6XP.mjs → color-palette-DnX1sODj.mjs}

@@ -779,4 +779,4 @@ function ColorPalette({ groups, theme = "all", showGradients = true, showUsageEx
 //#endregion
 export { ColorPalette as t };
 
-//# sourceMappingURL=color-palette-BU1cI6XP.mjs.map
+//# sourceMappingURL=color-palette-DnX1sODj.mjs.map

package/dist/chunks/{color-palette-BU1cI6XP.mjs.map → color-palette-DnX1sODj.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"color-palette-BU1cI6XP.mjs","names":[],"sources":["../../src/components/data-display/color-palette/ColorPalette.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface ColorSwatch {\n  name: string;\n  value: string;\n  textColor?: \"light\" | \"dark\";\n}\n\nexport interface ColorGroup {\n  name: string;\n  colors: ColorSwatch[];\n}\n\nexport interface ColorPaletteProps {\n  groups?: ColorGroup[];\n  theme?: \"light\" | \"dark\" | \"all\";\n  showGradients?: boolean;\n  showUsageExamples?: boolean;\n  className?: string;\n}\n\nconst lightThemeGroups: ColorGroup[] = [\n  {\n    name: \"Active Accent Scale\",\n    colors: [\n      { name: \"primary-50\", value: \"var(--ds-accent-50)\", textColor: \"dark\" },\n      { name: \"primary-100\", value: \"var(--ds-accent-100)\", textColor: \"dark\" },\n      { name: \"primary-200\", value: \"var(--ds-accent-200)\", textColor: \"dark\" },\n      { name: \"primary-300\", value: \"var(--ds-accent-300)\", textColor: \"dark\" },\n      {\n        name: \"primary-400\",\n        value: \"var(--ds-accent-400)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-500\",\n        value: \"var(--ds-accent-500)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-600\",\n        value: \"var(--ds-accent-600)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-700\",\n        value: \"var(--ds-accent-700)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-800\",\n        value: \"var(--ds-accent-800)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-900\",\n        value: \"var(--ds-accent-900)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Surfaces\",\n    colors: [\n      {\n        name: \"bg-ds-canvas\",\n        value: \"var(--ds-color-bg-canvas)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-1\",\n        value: \"var(--ds-color-bg-surface)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-2\",\n        value: \"var(--ds-color-bg-elevated)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-3\",\n        value: \"var(--ds-color-bg-ds-surface-3)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"accent-subtle\",\n        value: \"var(--ds-color-accent-subtle)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Foreground\",\n    colors: [\n      { name: \"fg\", value: \"var(--ds-color-fg)\", textColor: \"light\" },\n      {\n        name: \"fg-muted\",\n        value: \"var(--ds-color-fg-muted)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"fg-subtle\",\n        value: \"var(--ds-color-fg-subtle)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"on-accent\",\n        value: \"var(--ds-color-on-accent)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Borders\",\n    colors: [\n      { name: \"border\", value: \"var(--ds-color-border)\", textColor: \"dark\" },\n      {\n        name: \"border-strong\",\n        value: \"var(--ds-color-border-strong)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"border-muted\",\n        value: \"var(--ds-color-border-muted)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"border-field\",\n        value: \"var(--ds-color-border-field)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"focus-ring\",\n        value: \"var(--ds-color-focus-ring)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Status\",\n    colors: [\n      { name: \"success\", value: \"#1eb564\", textColor: \"light\" },\n      { name: \"warning\", value: \"#ff9500\", textColor: \"dark\" },\n      { name: \"danger\", value: \"#e31d1c\", textColor: \"light\" },\n      { name: \"info\", value: \"#0085c4\", textColor: \"light\" },\n      { name: \"disabled\", value: \"#d2d2d3\", textColor: \"dark\" },\n    ],\n  },\n  {\n    name: \"Foundation Tokens\",\n    colors: [\n      { name: \"--ds-primary\", value: \"var(--ds-primary)\", textColor: \"light\" },\n      {\n        name: \"--ds-surface-canvas\",\n        value: \"var(--ds-surface-canvas)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"--ds-surface-1\",\n        value: \"var(--ds-surface-1)\",\n        textColor: \"dark\",\n      },\n      { name: \"--ds-text-1\", value: \"var(--ds-text-1)\", textColor: \"light\" },\n      { name: \"--ds-border-1\", value: \"var(--ds-border-1)\", textColor: \"dark\" },\n    ],\n  },\n];\n\nconst darkThemeGroups: ColorGroup[] = [\n  {\n    name: \"Active Accent Scale (Dark)\",\n    colors: [\n      { name: \"primary-50\", value: \"var(--ds-accent-50)\", textColor: \"dark\" },\n      { name: \"primary-100\", value: \"var(--ds-accent-100)\", textColor: \"dark\" },\n      { name: \"primary-200\", value: \"var(--ds-accent-200)\", textColor: \"dark\" },\n      { name: \"primary-300\", value: \"var(--ds-accent-300)\", textColor: \"dark\" },\n      {\n        name: \"primary-400\",\n        value: \"var(--ds-accent-400)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-500\",\n        value: \"var(--ds-accent-500)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-600\",\n        value: \"var(--ds-accent-600)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-700\",\n        value: \"var(--ds-accent-700)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-800\",\n        value: \"var(--ds-accent-800)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-900\",\n        value: \"var(--ds-accent-900)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Surfaces (Dark)\",\n    colors: [\n      {\n        name: \"bg-ds-canvas\",\n        value: \"var(--ds-color-bg-canvas)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-1\",\n        value: \"var(--ds-color-bg-surface)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-2\",\n        value: \"var(--ds-color-bg-elevated)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-3\",\n        value: \"var(--ds-color-bg-ds-surface-3)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"accent-subtle\",\n        value: \"var(--ds-color-accent-subtle)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Foreground (Dark)\",\n    colors: [\n      { name: \"fg\", value: \"var(--ds-color-fg)\", textColor: \"dark\" },\n      {\n        name: \"fg-muted\",\n        value: \"var(--ds-color-fg-muted)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"fg-subtle\",\n        value: \"var(--ds-color-fg-subtle)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"on-accent\",\n        value: \"var(--ds-color-on-accent)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Borders (Dark)\",\n    colors: [\n      { name: \"border\", value: \"var(--ds-color-border)\", textColor: \"light\" },\n      {\n        name: \"border-strong\",\n        value: \"var(--ds-color-border-strong)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"border-muted\",\n        value: \"var(--ds-color-border-muted)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"border-field\",\n        value: \"var(--ds-color-border-field)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"focus-ring\",\n        value: \"var(--ds-color-focus-ring)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Status (Dark)\",\n    colors: [\n      { name: \"success\", value: \"#22c55e\", textColor: \"light\" },\n      { name: \"warning\", value: \"#f59e42\", textColor: \"dark\" },\n      { name: \"danger\", value: \"#ef4444\", textColor: \"light\" },\n      { name: \"info\", value: \"#38bdf8\", textColor: \"dark\" },\n      { name: \"disabled\", value: \"#4b5563\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Foundation Tokens (Dark)\",\n    colors: [\n      { name: \"--ds-primary\", value: \"var(--ds-primary)\", textColor: \"light\" },\n      {\n        name: \"--ds-surface-canvas\",\n        value: \"var(--ds-surface-canvas)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"--ds-surface-1\",\n        value: \"var(--ds-surface-1)\",\n        textColor: \"light\",\n      },\n      { name: \"--ds-text-1\", value: \"var(--ds-text-1)\", textColor: \"dark\" },\n      {\n        name: \"--ds-border-1\",\n        value: \"var(--ds-border-1)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n];\n\nconst gradientGroups: ColorGroup[] = [\n  {\n    name: \"Semantic Gradients\",\n    colors: [\n      { name: \"accent-gradient-start\", value: \"#9333ea\", textColor: \"light\" },\n      { name: \"accent-gradient-end\", value: \"#7e22ce\", textColor: \"light\" },\n      { name: \"accent-secondary\", value: \"#4318ff\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Status Gradients\",\n    colors: [\n      { name: \"success-gradient-start\", value: \"#22c55e\", textColor: \"light\" },\n      { name: \"success-gradient-end\", value: \"#16a34a\", textColor: \"light\" },\n      { name: \"warning-gradient-start\", value: \"#f59e0b\", textColor: \"dark\" },\n      { name: \"warning-gradient-end\", value: \"#d97706\", textColor: \"light\" },\n      { name: \"error-gradient-start\", value: \"#ef4444\", textColor: \"light\" },\n      { name: \"error-gradient-end\", value: \"#dc2626\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Glass / Opacity\",\n    colors: [\n      {\n        name: \"glass-white-90\",\n        value: \"rgba(255,255,255,0.9)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-70\",\n        value: \"rgba(255,255,255,0.7)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-50\",\n        value: \"rgba(255,255,255,0.5)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-20\",\n        value: \"rgba(255,255,255,0.2)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-10\",\n        value: \"rgba(255,255,255,0.1)\",\n        textColor: \"dark\",\n      },\n      { name: \"glass-black-90\", value: \"rgba(0,0,0,0.9)\", textColor: \"light\" },\n      { name: \"glass-black-70\", value: \"rgba(0,0,0,0.7)\", textColor: \"light\" },\n      { name: \"glass-black-50\", value: \"rgba(0,0,0,0.5)\", textColor: \"light\" },\n      { name: \"glass-black-20\", value: \"rgba(0,0,0,0.2)\", textColor: \"light\" },\n      { name: \"glass-black-10\", value: \"rgba(0,0,0,0.1)\", textColor: \"light\" },\n    ],\n  },\n];\n\n// Default groups (backwards compatibility)\nconst defaultGroups: ColorGroup[] = lightThemeGroups;\n\ninterface DisplayColorGroup {\n  group: ColorGroup;\n  mode?: \"light\" | \"dark\";\n}\n\nfunction ColorSwatchItem({ color }: { color: ColorSwatch }) {\n  const swatchRef = React.useRef<HTMLDivElement | null>(null);\n  const [resolvedValue, setResolvedValue] = React.useState<string>(color.value);\n\n  // Resolve runtime CSS variable values so docs reflect live theme tokens.\n  React.useEffect(() => {\n    if (!swatchRef.current) {\n      return;\n    }\n\n    if (color.value.startsWith(\"var(\")) {\n      const computedBackground = getComputedStyle(\n        swatchRef.current,\n      ).backgroundColor;\n      setResolvedValue(computedBackground || color.value);\n      return;\n    }\n\n    setResolvedValue(color.value);\n  }, [color.value]);\n\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(resolvedValue);\n  };\n\n  const swatchLabel = color.value.startsWith(\"var(\")\n    ? \"LIVE\"\n    : color.value.length <= 9\n      ? color.value.toUpperCase()\n      : \"RGBA\";\n\n  return (\n    <div\n      className=\"flex flex-col items-center gap-2 cursor-pointer transition-transform hover:scale-105\"\n      onClick={copyToClipboard}\n      title=\"Click to copy\"\n    >\n      <div\n        ref={swatchRef}\n        className=\"w-20 h-20 rounded-lg shadow-md border border-ds-border-2 flex items-center justify-center text-xs font-mono\"\n        style={{ backgroundColor: color.value }}\n      >\n        <span className=\"font-semibold text-ds-1 mix-blend-difference\">\n          {swatchLabel}\n        </span>\n      </div>\n      <span className=\"text-xs font-medium text-ds-2 text-center max-w-20\">\n        {color.name}\n      </span>\n      <span className=\"text-[10px] font-mono text-ds-3 text-center max-w-20 break-all\">\n        {resolvedValue}\n      </span>\n    </div>\n  );\n}\n\nfunction GradientPreview() {\n  // Static examples to illustrate common gradient recipes.\n  return (\n    <div className=\"mt-8\">\n      <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">\n        Semantic Gradient Examples\n      </h3>\n      <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #9333ea, #7e22ce)\",\n            }}\n          >\n            Accent Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #9333ea, #7e22ce)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #9333ea, #4318ff)\",\n            }}\n          >\n            Accent to Brand Primary\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #9333ea, #4318ff)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #22c55e, #16a34a)\",\n            }}\n          >\n            Success Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #22c55e, #16a34a)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-1 font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #fbbf24, #f59e0b)\",\n            }}\n          >\n            Warning Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #fbbf24, #f59e0b)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #ef4444, #dc2626)\",\n            }}\n          >\n            Error Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #ef4444, #dc2626)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium backdrop-blur-xl border border-ds-border-2/40\"\n            style={{\n              background: \"rgba(147, 51, 234, 0.7)\",\n            }}\n          >\n            Glass Effect\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            rgba(147, 51, 234, 0.7) + backdrop-blur\n          </code>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction UsageExamples() {\n  // Token usage references for semantic utilities + raw CSS variables.\n  return (\n    <div className=\"mt-8 p-6 bg-ds-surface-2 rounded-xl\">\n      <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">\n        Recommended Usage\n      </h3>\n      <div className=\"space-y-4\">\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Semantic utilities first\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`import { Button } from \"erp-pro-ui\";\n\n<section className=\"bg-ds-surface-1 text-ds-1 border border-ds-border-2 rounded-2xl p-6\">\n  <h2 className=\"text-ds-1 text-xl font-semibold\">Semantic theme</h2>\n  <p className=\"text-ds-2\">Use utilities generated by colors.css.</p>\n  <Button label=\"Save changes\" primary />\n</section>`}\n          </pre>\n        </div>\n\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Raw design-system variables\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`.dashboard-shell {\n  background: var(--ds-color-bg-surface);\n  color: var(--ds-color-fg);\n  border: 1px solid var(--ds-color-border);\n}\n\n.dashboard-shell a {\n  color: var(--ds-color-accent);\n}\n\nhtml[data-brand=\"teal\"][data-mode=\"dark\"] {\n  color-scheme: dark;\n}`}\n          </pre>\n        </div>\n\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Compatibility aliases for migration\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`:root {\n  --color-primary: #4318ff;\n  --color-background-primary: #f4f7fe;\n  --color-text-primary: #1e293b;\n}\n\n/* Supported for migration. Prefer semantic utilities or --ds-* in new code. */`}\n          </pre>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default function ColorPalette({\n  groups,\n  theme = \"all\",\n  showGradients = true,\n  showUsageExamples = true,\n  className,\n}: ColorPaletteProps) {\n  // Build display groups based on requested mode. Each group can be rendered\n  // inside an explicit `data-mode` wrapper so light and dark values are both\n  // resolved accurately on the same page.\n  let displayGroups: DisplayColorGroup[];\n  if (groups) {\n    displayGroups = groups.map((group) => ({ group }));\n  } else if (theme === \"light\") {\n    displayGroups = lightThemeGroups.map((group) => ({ group, mode: \"light\" }));\n  } else if (theme === \"dark\") {\n    displayGroups = darkThemeGroups.map((group) => ({ group, mode: \"dark\" }));\n  } else {\n    // Show all\n    displayGroups = [\n      ...lightThemeGroups.map((group) => ({ group, mode: \"light\" as const })),\n      ...darkThemeGroups.map((group) => ({ group, mode: \"dark\" as const })),\n    ];\n  }\n\n  // Append optional gradient/opacity examples when using built-in groups.\n  if (showGradients && !groups) {\n    displayGroups = [\n      ...displayGroups,\n      ...gradientGroups.map((group) => ({ group })),\n    ];\n  }\n\n  return (\n    <div className={`p-6 bg-ds-surface-1 rounded-xl ${className || \"\"}`}>\n      <h2 className=\"text-2xl font-bold text-ds-1 mb-2\">Color Palette</h2>\n      <p className=\"text-sm text-ds-2 mb-6\">\n        Preferred contract:{\" \"}\n        <code className=\"font-mono bg-ds-surface-2 px-2 py-1 rounded text-ds-1\">\n          semantic utilities and --ds-* tokens\n        </code>{\" \"}\n        • Compatibility aliases remain available for migration. Light and dark\n        sections are resolved in their own mode contexts. Click any swatch to\n        copy the resolved color value.\n      </p>\n\n      <div className=\"mb-6 flex flex-wrap gap-2\">\n        <span\n          className={`px-3 py-1 rounded-full text-xs font-medium ${\n            theme === \"light\" || theme === \"all\"\n              ? \"bg-ds-accent-subtle text-ds-1\"\n              : \"bg-ds-surface-2 text-ds-3\"\n          }`}\n        >\n          Light Theme\n        </span>\n        <span\n          className={`px-3 py-1 rounded-full text-xs font-medium ${\n            theme === \"dark\" || theme === \"all\"\n              ? \"bg-ds-accent-subtle text-ds-1\"\n              : \"bg-ds-surface-2 text-ds-3\"\n          }`}\n        >\n          Dark Theme\n        </span>\n        {showGradients && (\n          <span className=\"px-3 py-1 rounded-full text-xs font-medium bg-ds-accent-subtle text-ds-1\">\n            Gradients\n          </span>\n        )}\n      </div>\n\n      {displayGroups.map(({ group, mode }) => (\n        <div key={group.name} data-mode={mode} className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">{group.name}</h3>\n          <div className=\"flex flex-wrap gap-4\">\n            {group.colors.map((color) => (\n              <ColorSwatchItem key={color.name} color={color} />\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {showGradients && <GradientPreview />}\n      {showUsageExamples && <UsageExamples />}\n    </div>\n  );\n}\n\n// Export color groups for external use\nexport { lightThemeGroups, darkThemeGroups, gradientGroups, defaultGroups };\n"],"mappings":"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"}
+{"version":3,"file":"color-palette-DnX1sODj.mjs","names":[],"sources":["../../src/components/data-display/color-palette/ColorPalette.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface ColorSwatch {\n  name: string;\n  value: string;\n  textColor?: \"light\" | \"dark\";\n}\n\nexport interface ColorGroup {\n  name: string;\n  colors: ColorSwatch[];\n}\n\nexport interface ColorPaletteProps {\n  groups?: ColorGroup[];\n  theme?: \"light\" | \"dark\" | \"all\";\n  showGradients?: boolean;\n  showUsageExamples?: boolean;\n  className?: string;\n}\n\nconst lightThemeGroups: ColorGroup[] = [\n  {\n    name: \"Active Accent Scale\",\n    colors: [\n      { name: \"primary-50\", value: \"var(--ds-accent-50)\", textColor: \"dark\" },\n      { name: \"primary-100\", value: \"var(--ds-accent-100)\", textColor: \"dark\" },\n      { name: \"primary-200\", value: \"var(--ds-accent-200)\", textColor: \"dark\" },\n      { name: \"primary-300\", value: \"var(--ds-accent-300)\", textColor: \"dark\" },\n      {\n        name: \"primary-400\",\n        value: \"var(--ds-accent-400)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-500\",\n        value: \"var(--ds-accent-500)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-600\",\n        value: \"var(--ds-accent-600)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-700\",\n        value: \"var(--ds-accent-700)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-800\",\n        value: \"var(--ds-accent-800)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-900\",\n        value: \"var(--ds-accent-900)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Surfaces\",\n    colors: [\n      {\n        name: \"bg-ds-canvas\",\n        value: \"var(--ds-color-bg-canvas)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-1\",\n        value: \"var(--ds-color-bg-surface)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-2\",\n        value: \"var(--ds-color-bg-elevated)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"bg-ds-surface-3\",\n        value: \"var(--ds-color-bg-ds-surface-3)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"accent-subtle\",\n        value: \"var(--ds-color-accent-subtle)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Foreground\",\n    colors: [\n      { name: \"fg\", value: \"var(--ds-color-fg)\", textColor: \"light\" },\n      {\n        name: \"fg-muted\",\n        value: \"var(--ds-color-fg-muted)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"fg-subtle\",\n        value: \"var(--ds-color-fg-subtle)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"on-accent\",\n        value: \"var(--ds-color-on-accent)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Borders\",\n    colors: [\n      { name: \"border\", value: \"var(--ds-color-border)\", textColor: \"dark\" },\n      {\n        name: \"border-strong\",\n        value: \"var(--ds-color-border-strong)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"border-muted\",\n        value: \"var(--ds-color-border-muted)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"border-field\",\n        value: \"var(--ds-color-border-field)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"focus-ring\",\n        value: \"var(--ds-color-focus-ring)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Status\",\n    colors: [\n      { name: \"success\", value: \"#1eb564\", textColor: \"light\" },\n      { name: \"warning\", value: \"#ff9500\", textColor: \"dark\" },\n      { name: \"danger\", value: \"#e31d1c\", textColor: \"light\" },\n      { name: \"info\", value: \"#0085c4\", textColor: \"light\" },\n      { name: \"disabled\", value: \"#d2d2d3\", textColor: \"dark\" },\n    ],\n  },\n  {\n    name: \"Foundation Tokens\",\n    colors: [\n      { name: \"--ds-primary\", value: \"var(--ds-primary)\", textColor: \"light\" },\n      {\n        name: \"--ds-surface-canvas\",\n        value: \"var(--ds-surface-canvas)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"--ds-surface-1\",\n        value: \"var(--ds-surface-1)\",\n        textColor: \"dark\",\n      },\n      { name: \"--ds-text-1\", value: \"var(--ds-text-1)\", textColor: \"light\" },\n      { name: \"--ds-border-1\", value: \"var(--ds-border-1)\", textColor: \"dark\" },\n    ],\n  },\n];\n\nconst darkThemeGroups: ColorGroup[] = [\n  {\n    name: \"Active Accent Scale (Dark)\",\n    colors: [\n      { name: \"primary-50\", value: \"var(--ds-accent-50)\", textColor: \"dark\" },\n      { name: \"primary-100\", value: \"var(--ds-accent-100)\", textColor: \"dark\" },\n      { name: \"primary-200\", value: \"var(--ds-accent-200)\", textColor: \"dark\" },\n      { name: \"primary-300\", value: \"var(--ds-accent-300)\", textColor: \"dark\" },\n      {\n        name: \"primary-400\",\n        value: \"var(--ds-accent-400)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-500\",\n        value: \"var(--ds-accent-500)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-600\",\n        value: \"var(--ds-accent-600)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-700\",\n        value: \"var(--ds-accent-700)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-800\",\n        value: \"var(--ds-accent-800)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"primary-900\",\n        value: \"var(--ds-accent-900)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Surfaces (Dark)\",\n    colors: [\n      {\n        name: \"bg-ds-canvas\",\n        value: \"var(--ds-color-bg-canvas)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-1\",\n        value: \"var(--ds-color-bg-surface)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-2\",\n        value: \"var(--ds-color-bg-elevated)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"bg-ds-surface-3\",\n        value: \"var(--ds-color-bg-ds-surface-3)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"accent-subtle\",\n        value: \"var(--ds-color-accent-subtle)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Foreground (Dark)\",\n    colors: [\n      { name: \"fg\", value: \"var(--ds-color-fg)\", textColor: \"dark\" },\n      {\n        name: \"fg-muted\",\n        value: \"var(--ds-color-fg-muted)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"fg-subtle\",\n        value: \"var(--ds-color-fg-subtle)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"on-accent\",\n        value: \"var(--ds-color-on-accent)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Borders (Dark)\",\n    colors: [\n      { name: \"border\", value: \"var(--ds-color-border)\", textColor: \"light\" },\n      {\n        name: \"border-strong\",\n        value: \"var(--ds-color-border-strong)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"border-muted\",\n        value: \"var(--ds-color-border-muted)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"border-field\",\n        value: \"var(--ds-color-border-field)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"focus-ring\",\n        value: \"var(--ds-color-focus-ring)\",\n        textColor: \"dark\",\n      },\n    ],\n  },\n  {\n    name: \"Semantic Status (Dark)\",\n    colors: [\n      { name: \"success\", value: \"#22c55e\", textColor: \"light\" },\n      { name: \"warning\", value: \"#f59e42\", textColor: \"dark\" },\n      { name: \"danger\", value: \"#ef4444\", textColor: \"light\" },\n      { name: \"info\", value: \"#38bdf8\", textColor: \"dark\" },\n      { name: \"disabled\", value: \"#4b5563\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Foundation Tokens (Dark)\",\n    colors: [\n      { name: \"--ds-primary\", value: \"var(--ds-primary)\", textColor: \"light\" },\n      {\n        name: \"--ds-surface-canvas\",\n        value: \"var(--ds-surface-canvas)\",\n        textColor: \"light\",\n      },\n      {\n        name: \"--ds-surface-1\",\n        value: \"var(--ds-surface-1)\",\n        textColor: \"light\",\n      },\n      { name: \"--ds-text-1\", value: \"var(--ds-text-1)\", textColor: \"dark\" },\n      {\n        name: \"--ds-border-1\",\n        value: \"var(--ds-border-1)\",\n        textColor: \"light\",\n      },\n    ],\n  },\n];\n\nconst gradientGroups: ColorGroup[] = [\n  {\n    name: \"Semantic Gradients\",\n    colors: [\n      { name: \"accent-gradient-start\", value: \"#9333ea\", textColor: \"light\" },\n      { name: \"accent-gradient-end\", value: \"#7e22ce\", textColor: \"light\" },\n      { name: \"accent-secondary\", value: \"#4318ff\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Status Gradients\",\n    colors: [\n      { name: \"success-gradient-start\", value: \"#22c55e\", textColor: \"light\" },\n      { name: \"success-gradient-end\", value: \"#16a34a\", textColor: \"light\" },\n      { name: \"warning-gradient-start\", value: \"#f59e0b\", textColor: \"dark\" },\n      { name: \"warning-gradient-end\", value: \"#d97706\", textColor: \"light\" },\n      { name: \"error-gradient-start\", value: \"#ef4444\", textColor: \"light\" },\n      { name: \"error-gradient-end\", value: \"#dc2626\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Glass / Opacity\",\n    colors: [\n      {\n        name: \"glass-white-90\",\n        value: \"rgba(255,255,255,0.9)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-70\",\n        value: \"rgba(255,255,255,0.7)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-50\",\n        value: \"rgba(255,255,255,0.5)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-20\",\n        value: \"rgba(255,255,255,0.2)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-10\",\n        value: \"rgba(255,255,255,0.1)\",\n        textColor: \"dark\",\n      },\n      { name: \"glass-black-90\", value: \"rgba(0,0,0,0.9)\", textColor: \"light\" },\n      { name: \"glass-black-70\", value: \"rgba(0,0,0,0.7)\", textColor: \"light\" },\n      { name: \"glass-black-50\", value: \"rgba(0,0,0,0.5)\", textColor: \"light\" },\n      { name: \"glass-black-20\", value: \"rgba(0,0,0,0.2)\", textColor: \"light\" },\n      { name: \"glass-black-10\", value: \"rgba(0,0,0,0.1)\", textColor: \"light\" },\n    ],\n  },\n];\n\n// Default groups (backwards compatibility)\nconst defaultGroups: ColorGroup[] = lightThemeGroups;\n\ninterface DisplayColorGroup {\n  group: ColorGroup;\n  mode?: \"light\" | \"dark\";\n}\n\nfunction ColorSwatchItem({ color }: { color: ColorSwatch }) {\n  const swatchRef = React.useRef<HTMLDivElement | null>(null);\n  const [resolvedValue, setResolvedValue] = React.useState<string>(color.value);\n\n  // Resolve runtime CSS variable values so docs reflect live theme tokens.\n  React.useEffect(() => {\n    if (!swatchRef.current) {\n      return;\n    }\n\n    if (color.value.startsWith(\"var(\")) {\n      const computedBackground = getComputedStyle(\n        swatchRef.current,\n      ).backgroundColor;\n      setResolvedValue(computedBackground || color.value);\n      return;\n    }\n\n    setResolvedValue(color.value);\n  }, [color.value]);\n\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(resolvedValue);\n  };\n\n  const swatchLabel = color.value.startsWith(\"var(\")\n    ? \"LIVE\"\n    : color.value.length <= 9\n      ? color.value.toUpperCase()\n      : \"RGBA\";\n\n  return (\n    <div\n      className=\"flex flex-col items-center gap-2 cursor-pointer transition-transform hover:scale-105\"\n      onClick={copyToClipboard}\n      title=\"Click to copy\"\n    >\n      <div\n        ref={swatchRef}\n        className=\"w-20 h-20 rounded-lg shadow-md border border-ds-border-2 flex items-center justify-center text-xs font-mono\"\n        style={{ backgroundColor: color.value }}\n      >\n        <span className=\"font-semibold text-ds-1 mix-blend-difference\">\n          {swatchLabel}\n        </span>\n      </div>\n      <span className=\"text-xs font-medium text-ds-2 text-center max-w-20\">\n        {color.name}\n      </span>\n      <span className=\"text-[10px] font-mono text-ds-3 text-center max-w-20 break-all\">\n        {resolvedValue}\n      </span>\n    </div>\n  );\n}\n\nfunction GradientPreview() {\n  // Static examples to illustrate common gradient recipes.\n  return (\n    <div className=\"mt-8\">\n      <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">\n        Semantic Gradient Examples\n      </h3>\n      <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #9333ea, #7e22ce)\",\n            }}\n          >\n            Accent Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #9333ea, #7e22ce)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #9333ea, #4318ff)\",\n            }}\n          >\n            Accent to Brand Primary\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #9333ea, #4318ff)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #22c55e, #16a34a)\",\n            }}\n          >\n            Success Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #22c55e, #16a34a)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-1 font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #fbbf24, #f59e0b)\",\n            }}\n          >\n            Warning Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #fbbf24, #f59e0b)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #ef4444, #dc2626)\",\n            }}\n          >\n            Error Gradient\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            linear-gradient(135deg, #ef4444, #dc2626)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium backdrop-blur-xl border border-ds-border-2/40\"\n            style={{\n              background: \"rgba(147, 51, 234, 0.7)\",\n            }}\n          >\n            Glass Effect\n          </div>\n          <code className=\"text-xs text-ds-3\">\n            rgba(147, 51, 234, 0.7) + backdrop-blur\n          </code>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction UsageExamples() {\n  // Token usage references for semantic utilities + raw CSS variables.\n  return (\n    <div className=\"mt-8 p-6 bg-ds-surface-2 rounded-xl\">\n      <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">\n        Recommended Usage\n      </h3>\n      <div className=\"space-y-4\">\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Semantic utilities first\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`import { Button } from \"erp-pro-ui\";\n\n<section className=\"bg-ds-surface-1 text-ds-1 border border-ds-border-2 rounded-2xl p-6\">\n  <h2 className=\"text-ds-1 text-xl font-semibold\">Semantic theme</h2>\n  <p className=\"text-ds-2\">Use utilities generated by colors.css.</p>\n  <Button label=\"Save changes\" primary />\n</section>`}\n          </pre>\n        </div>\n\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Raw design-system variables\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`.dashboard-shell {\n  background: var(--ds-color-bg-surface);\n  color: var(--ds-color-fg);\n  border: 1px solid var(--ds-color-border);\n}\n\n.dashboard-shell a {\n  color: var(--ds-color-accent);\n}\n\nhtml[data-brand=\"teal\"][data-mode=\"dark\"] {\n  color-scheme: dark;\n}`}\n          </pre>\n        </div>\n\n        <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n          <h4 className=\"font-medium text-ds-1 mb-2\">\n            Compatibility aliases for migration\n          </h4>\n          <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n            {`:root {\n  --color-primary: #4318ff;\n  --color-background-primary: #f4f7fe;\n  --color-text-primary: #1e293b;\n}\n\n/* Supported for migration. Prefer semantic utilities or --ds-* in new code. */`}\n          </pre>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default function ColorPalette({\n  groups,\n  theme = \"all\",\n  showGradients = true,\n  showUsageExamples = true,\n  className,\n}: ColorPaletteProps) {\n  // Build display groups based on requested mode. Each group can be rendered\n  // inside an explicit `data-mode` wrapper so light and dark values are both\n  // resolved accurately on the same page.\n  let displayGroups: DisplayColorGroup[];\n  if (groups) {\n    displayGroups = groups.map((group) => ({ group }));\n  } else if (theme === \"light\") {\n    displayGroups = lightThemeGroups.map((group) => ({ group, mode: \"light\" }));\n  } else if (theme === \"dark\") {\n    displayGroups = darkThemeGroups.map((group) => ({ group, mode: \"dark\" }));\n  } else {\n    // Show all\n    displayGroups = [\n      ...lightThemeGroups.map((group) => ({ group, mode: \"light\" as const })),\n      ...darkThemeGroups.map((group) => ({ group, mode: \"dark\" as const })),\n    ];\n  }\n\n  // Append optional gradient/opacity examples when using built-in groups.\n  if (showGradients && !groups) {\n    displayGroups = [\n      ...displayGroups,\n      ...gradientGroups.map((group) => ({ group })),\n    ];\n  }\n\n  return (\n    <div className={`p-6 bg-ds-surface-1 rounded-xl ${className || \"\"}`}>\n      <h2 className=\"text-2xl font-bold text-ds-1 mb-2\">Color Palette</h2>\n      <p className=\"text-sm text-ds-2 mb-6\">\n        Preferred contract:{\" \"}\n        <code className=\"font-mono bg-ds-surface-2 px-2 py-1 rounded text-ds-1\">\n          semantic utilities and --ds-* tokens\n        </code>{\" \"}\n        • Compatibility aliases remain available for migration. Light and dark\n        sections are resolved in their own mode contexts. Click any swatch to\n        copy the resolved color value.\n      </p>\n\n      <div className=\"mb-6 flex flex-wrap gap-2\">\n        <span\n          className={`px-3 py-1 rounded-full text-xs font-medium ${\n            theme === \"light\" || theme === \"all\"\n              ? \"bg-ds-accent-subtle text-ds-1\"\n              : \"bg-ds-surface-2 text-ds-3\"\n          }`}\n        >\n          Light Theme\n        </span>\n        <span\n          className={`px-3 py-1 rounded-full text-xs font-medium ${\n            theme === \"dark\" || theme === \"all\"\n              ? \"bg-ds-accent-subtle text-ds-1\"\n              : \"bg-ds-surface-2 text-ds-3\"\n          }`}\n        >\n          Dark Theme\n        </span>\n        {showGradients && (\n          <span className=\"px-3 py-1 rounded-full text-xs font-medium bg-ds-accent-subtle text-ds-1\">\n            Gradients\n          </span>\n        )}\n      </div>\n\n      {displayGroups.map(({ group, mode }) => (\n        <div key={group.name} data-mode={mode} className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">{group.name}</h3>\n          <div className=\"flex flex-wrap gap-4\">\n            {group.colors.map((color) => (\n              <ColorSwatchItem key={color.name} color={color} />\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {showGradients && <GradientPreview />}\n      {showUsageExamples && <UsageExamples />}\n    </div>\n  );\n}\n\n// Export color groups for external use\nexport { lightThemeGroups, darkThemeGroups, gradientGroups, defaultGroups };\n"],"mappings":"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"}