erp-pro-ui 0.1.1 → 0.1.2

package/dist/chunks/charts-DugYWvEf.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts-DugYWvEf.mjs","names":[],"sources":["../../src/components/data-display/charts/chartPalette.ts","../../src/components/data-display/charts/NeonLineChart.tsx","../../src/components/data-display/charts/StackedBarChart.tsx","../../src/components/data-display/charts/ThinBreakdownBar.tsx","../../src/components/data-display/charts/AreaChart.tsx","../../src/components/data-display/charts/BarChart.tsx","../../src/components/data-display/charts/PieChart.tsx"],"sourcesContent":["const chartColorSlots = [\n  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,\n] as const;\n\nexport type ChartColorSlot = (typeof chartColorSlots)[number];\nexport type ChartColorToken = `chart-${ChartColorSlot}`;\n\nexport const chartColorTokens = chartColorSlots.map(\n  (slot) => `chart-${slot}` as ChartColorToken,\n);\n\nconst chartPalette = chartColorSlots.map((slot) => `var(--ds-chart-${slot})`);\n\ntype RgbColor = {\n  r: number;\n  g: number;\n  b: number;\n};\n\nconst resolvedColorCache = new Map<string, RgbColor | null>();\n\nconst chartTokenPattern = /^chart-(\\d+)$/i;\nconst chartVariablePattern = /^--((?:ds|color)-chart-(\\d+))$/i;\n\nconst getChartSlotValue = (slot: ChartColorSlot | ChartColorToken): number =>\n  typeof slot === \"number\" ? slot : Number(slot.replace(\"chart-\", \"\"));\n\nexport const getChartColorVar = (\n  slot: ChartColorSlot | ChartColorToken,\n  namespace: \"ds\" | \"color\" = \"ds\",\n): string => `var(--${namespace}-chart-${getChartSlotValue(slot)})`;\n\nexport const normalizeChartColorValue = (\n  value?: string,\n): string | undefined => {\n  const normalizedValue = value?.trim();\n\n  if (!normalizedValue) {\n    return undefined;\n  }\n\n  const tokenMatch = normalizedValue.match(chartTokenPattern);\n  if (tokenMatch) {\n    return `var(--ds-chart-${tokenMatch[1]})`;\n  }\n\n  const variableMatch = normalizedValue.match(chartVariablePattern);\n  if (variableMatch) {\n    return `var(--${variableMatch[1]})`;\n  }\n\n  return normalizedValue;\n};\n\nconst getThemeSignature = (): string => {\n  if (typeof document === \"undefined\") return \"\";\n\n  const root = document.documentElement;\n  return [\n    root.getAttribute(\"data-brand\") ?? \"\",\n    root.getAttribute(\"data-mode\") ?? \"\",\n    root.getAttribute(\"data-theme\") ?? \"\",\n  ].join(\"|\");\n};\n\nconst resolveColor = (value: string): RgbColor | null => {\n  if (typeof document === \"undefined\") return null;\n\n  const cacheKey = `${getThemeSignature()}::${value}`;\n  const cached = resolvedColorCache.get(cacheKey);\n  if (cached !== undefined) {\n    return cached;\n  }\n\n  const probe = document.createElement(\"span\");\n  probe.style.color = value;\n  probe.style.position = \"fixed\";\n  probe.style.opacity = \"0\";\n  probe.style.pointerEvents = \"none\";\n  document.body.appendChild(probe);\n\n  const computedColor = getComputedStyle(probe).color;\n  document.body.removeChild(probe);\n\n  const match = computedColor.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/i);\n\n  const resolved = match\n    ? {\n        r: Number(match[1]),\n        g: Number(match[2]),\n        b: Number(match[3]),\n      }\n    : null;\n\n  resolvedColorCache.set(cacheKey, resolved);\n  return resolved;\n};\n\nconst getColorDistance = (left: RgbColor, right: RgbColor): number => {\n  const deltaR = left.r - right.r;\n  const deltaG = left.g - right.g;\n  const deltaB = left.b - right.b;\n\n  return Math.sqrt(deltaR ** 2 + deltaG ** 2 + deltaB ** 2);\n};\n\nconst isTooSimilar = (\n  candidate: string,\n  usedColors: readonly string[],\n  minDistance = 84,\n): boolean => {\n  if (usedColors.includes(candidate)) {\n    return true;\n  }\n\n  const candidateRgb = resolveColor(candidate);\n  if (!candidateRgb) {\n    return false;\n  }\n\n  return usedColors.some((usedColor) => {\n    const usedRgb = resolveColor(usedColor);\n    return usedRgb\n      ? getColorDistance(candidateRgb, usedRgb) < minDistance\n      : false;\n  });\n};\n\nexport const getChartPalette = (count = chartPalette.length): string[] =>\n  Array.from(\n    { length: count },\n    (_, index) => chartPalette[index % chartPalette.length],\n  );\n\nexport const normalizeChartColors = (\n  requestedColors: readonly (string | undefined)[],\n): string[] => {\n  const usedColors: string[] = [];\n  let paletteIndex = 0;\n\n  const getNextDistinctPaletteColor = (): string => {\n    for (let attempt = 0; attempt < chartPalette.length; attempt++) {\n      const candidate =\n        chartPalette[(paletteIndex + attempt) % chartPalette.length];\n\n      if (!isTooSimilar(candidate, usedColors)) {\n        paletteIndex = (paletteIndex + attempt + 1) % chartPalette.length;\n        return candidate;\n      }\n    }\n\n    const fallback = chartPalette[paletteIndex % chartPalette.length];\n    paletteIndex = (paletteIndex + 1) % chartPalette.length;\n    return fallback;\n  };\n\n  return requestedColors.map((requestedColor) => {\n    const normalizedRequestedColor = normalizeChartColorValue(requestedColor);\n    const resolvedColor =\n      normalizedRequestedColor &&\n      !isTooSimilar(normalizedRequestedColor, usedColors)\n        ? normalizedRequestedColor\n        : getNextDistinctPaletteColor();\n\n    usedColors.push(resolvedColor);\n    return resolvedColor;\n  });\n};\n","\"use client\";\n\nimport React from \"react\";\nimport {\n  LineChart,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport {\n  getChartColorVar,\n  normalizeChartColorValue,\n  normalizeChartColors,\n} from \"./chartPalette\";\n\ninterface DataPoint {\n  name: string;\n  value: number;\n}\n\ninterface NeonLineChartProps {\n  data: DataPoint[];\n  height?: number | string;\n  lineColorStop1?: string;\n  lineColorStop2?: string;\n  className?: string;\n  glowColor?: string;\n}\n\nexport const NeonLineChart: React.FC<NeonLineChartProps> = ({\n  data,\n  height = 300,\n  lineColorStop1 = getChartColorVar(2),\n  lineColorStop2 = getChartColorVar(1),\n  glowColor = getChartColorVar(1),\n  className = \"\",\n}) => {\n  const [normalizedStop1, normalizedStop2] = React.useMemo(\n    () => normalizeChartColors([lineColorStop1, lineColorStop2]),\n    [lineColorStop1, lineColorStop2],\n  );\n  const normalizedGlowColor = React.useMemo(\n    () => normalizeChartColorValue(glowColor) ?? getChartColorVar(1),\n    [glowColor],\n  );\n\n  return (\n    <div className={`w-full relative ${className}`} style={{ height }}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <LineChart\n          data={data}\n          margin={{ top: 20, right: 30, left: 10, bottom: 20 }}\n        >\n          <defs>\n            {/* Linear Gradient for the Line */}\n            <linearGradient id=\"neonGradient\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n              <stop offset=\"0%\" stopColor={normalizedStop1} />\n              <stop offset=\"100%\" stopColor={normalizedStop2} />\n            </linearGradient>\n\n            {/* Glowing Drop Shadow Filter */}\n            <filter id=\"neonGlow\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n              <feDropShadow\n                dx=\"0\"\n                dy=\"6\"\n                stdDeviation=\"8\"\n                floodColor={normalizedGlowColor}\n                floodOpacity=\"0.8\"\n              />\n              <feDropShadow\n                dx=\"0\"\n                dy=\"0\"\n                stdDeviation=\"15\"\n                floodColor={normalizedStop1}\n                floodOpacity=\"0.3\"\n              />\n            </filter>\n          </defs>\n\n          {/* Minimal Grid */}\n          <CartesianGrid\n            strokeDasharray=\"3 3\"\n            vertical={false}\n            stroke=\"var(--ds-color-border)\"\n            opacity={0.5}\n          />\n\n          <XAxis\n            dataKey=\"name\"\n            axisLine={false}\n            tickLine={false}\n            tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n            dy={10}\n          />\n\n          <YAxis\n            axisLine={false}\n            tickLine={false}\n            tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n            dx={-10}\n          />\n\n          <Tooltip\n            contentStyle={{\n              backgroundColor:\n                \"color-mix(in srgb, var(--ds-color-surface) 92%, transparent)\",\n              border: \"1px solid var(--ds-color-border)\",\n              borderRadius: \"8px\",\n              backdropFilter: \"blur(8px)\",\n              color: \"var(--ds-color-fg)\",\n            }}\n            itemStyle={{ color: \"var(--ds-color-fg)\" }}\n          />\n\n          {/* The Neon Line */}\n          <Line\n            type=\"monotone\"\n            dataKey=\"value\"\n            stroke=\"url(#neonGradient)\"\n            strokeWidth={3}\n            dot={false}\n            activeDot={{\n              r: 6,\n              fill: \"var(--ds-color-surface)\",\n              stroke: normalizedStop2,\n              strokeWidth: 2,\n            }}\n            filter=\"url(#neonGlow)\"\n          />\n        </LineChart>\n      </ResponsiveContainer>\n    </div>\n  );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  Legend,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport { normalizeChartColors } from \"./chartPalette\";\n\nexport interface StackedBarData {\n  name: string;\n  [key: string]: string | number;\n}\n\ninterface StackedBarChartProps {\n  data: StackedBarData[];\n  categories: { key: string; color: string; label: string }[];\n  height?: number | string;\n  yAxisDomain?: [number, number];\n  className?: string;\n}\n\nexport const StackedBarChart: React.FC<StackedBarChartProps> = ({\n  data,\n  categories,\n  height = 300,\n  yAxisDomain,\n  className = \"\",\n}) => {\n  const normalizedCategories = React.useMemo(() => {\n    const normalizedColors = normalizeChartColors(\n      categories.map((category) => category.color),\n    );\n\n    return categories.map((category, index) => ({\n      ...category,\n      color: normalizedColors[index] ?? category.color,\n    }));\n  }, [categories]);\n\n  return (\n    <div className={`w-full ${className}`} style={{ height }}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RechartsBarChart\n          data={data}\n          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}\n        >\n          <CartesianGrid\n            strokeDasharray=\"3 3\"\n            vertical={false}\n            stroke=\"var(--ds-color-border)\"\n            opacity={0.4}\n          />\n          <XAxis\n            dataKey=\"name\"\n            axisLine={false}\n            tickLine={false}\n            tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n            dy={10}\n          />\n          <YAxis\n            axisLine={false}\n            tickLine={false}\n            tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n            dx={-10}\n            domain={yAxisDomain}\n          />\n          <Tooltip\n            cursor={{\n              fill: \"color-mix(in srgb, var(--ds-color-accent) 10%, transparent)\",\n            }}\n            contentStyle={{\n              backgroundColor:\n                \"color-mix(in srgb, var(--ds-color-surface) 92%, transparent)\",\n              border: \"1px solid var(--ds-color-border)\",\n              borderRadius: \"8px\",\n              backdropFilter: \"blur(8px)\",\n              color: \"var(--ds-color-fg)\",\n            }}\n          />\n          <Legend\n            iconType=\"circle\"\n            wrapperStyle={{\n              paddingTop: \"20px\",\n              fontSize: \"12px\",\n              color: \"var(--color-neutral-300)\",\n            }}\n          />\n\n          {normalizedCategories.map((cat, index) => {\n            // Apply rounded radius only to the top bar in the stack\n            const isTop = index === normalizedCategories.length - 1;\n            const radius: [number, number, number, number] = isTop\n              ? [6, 6, 0, 0]\n              : [0, 0, 0, 0];\n\n            return (\n              <Bar\n                key={cat.key}\n                dataKey={cat.key}\n                name={cat.label}\n                stackId=\"a\"\n                fill={cat.color}\n                radius={radius}\n                barSize={32}\n              />\n            );\n          })}\n        </RechartsBarChart>\n      </ResponsiveContainer>\n    </div>\n  );\n};\n","\"use client\";\n\nimport React from \"react\";\n\nimport { normalizeChartColors } from \"./chartPalette\";\n\nexport interface BreakdownSegment {\n  id?: string;\n  label: string;\n  value: number; // The absolute value or percentage\n  color: string;\n}\n\ninterface ThinBreakdownBarProps {\n  data: BreakdownSegment[];\n  className?: string;\n  showLabels?: boolean;\n}\n\nexport const ThinBreakdownBar: React.FC<ThinBreakdownBarProps> = ({\n  data: segments,\n  className = \"\",\n  showLabels = true,\n}) => {\n  const [activeSegmentKey, setActiveSegmentKey] = React.useState<string | null>(\n    null,\n  );\n\n  const normalizedSegments = React.useMemo(() => {\n    const normalizedColors = normalizeChartColors(\n      segments.map((segment) => segment.color),\n    );\n\n    const totalValue = segments.reduce((sum, item) => sum + item.value, 0);\n\n    return segments.map((segment, index) => ({\n      ...segment,\n      key: segment.id || `segment-${index}`,\n      color: normalizedColors[index] ?? segment.color,\n      widthPercent:\n        totalValue > 0 ? Math.max((segment.value / totalValue) * 100, 0) : 0,\n    }));\n  }, [segments]);\n\n  const segmentsWithMetrics = React.useMemo(() => {\n    let runningPercent = 0;\n\n    return normalizedSegments.map((segment) => {\n      const nextSegment = {\n        ...segment,\n        centerPercent: runningPercent + segment.widthPercent / 2,\n      };\n\n      runningPercent += segment.widthPercent;\n      return nextSegment;\n    });\n  }, [normalizedSegments]);\n\n  const activeSegment = React.useMemo(\n    () =>\n      segmentsWithMetrics.find((segment) => segment.key === activeSegmentKey) ??\n      null,\n    [activeSegmentKey, segmentsWithMetrics],\n  );\n\n  return (\n    <div className={`w-full flex flex-col gap-3 ${className}`}>\n      <div className=\"relative\">\n        {activeSegment && (\n          <div\n            className=\"pointer-events-none absolute -top-10 z-10 -translate-x-1/2 rounded-full border border-border/70 bg-background/95 px-2.5 py-1 text-[11px] font-medium text-foreground shadow-lg backdrop-blur-md\"\n            style={{ left: `${activeSegment.centerPercent}%` }}\n          >\n            <span>{activeSegment.label}</span>\n            <span className=\"mx-1 text-muted-foreground\">•</span>\n            <span style={{ color: activeSegment.color }}>\n              {activeSegment.value}\n            </span>\n          </div>\n        )}\n\n        <div className=\"rounded-full bg-background-tertiary/80 p-0.5\">\n          <div\n            className=\"flex w-full gap-1\"\n            onMouseLeave={() => setActiveSegmentKey(null)}\n          >\n            {segmentsWithMetrics.map((segment) => {\n              const isActive = activeSegmentKey === segment.key;\n\n              return (\n                <div\n                  key={segment.key}\n                  className=\"relative flex h-2.5 min-w-0 items-center\"\n                  style={{ width: `${segment.widthPercent}%` }}\n                  onMouseEnter={() => setActiveSegmentKey(segment.key)}\n                >\n                  <div\n                    className=\"h-full w-full rounded-full transition-[transform,filter,box-shadow,opacity] duration-200 ease-out\"\n                    style={{\n                      backgroundColor: segment.color,\n                      opacity: activeSegmentKey && !isActive ? 0.72 : 1,\n                      transform: isActive ? \"scaleY(1.3)\" : \"scaleY(1)\",\n                      filter: isActive\n                        ? \"saturate(1.1) brightness(1.05)\"\n                        : \"none\",\n                      boxShadow: isActive\n                        ? `inset 0 1px 1px rgba(255,255,255,0.28), 0 0 0 1px color-mix(in srgb, ${segment.color} 35%, transparent), 0 0 14px color-mix(in srgb, ${segment.color} 45%, transparent)`\n                        : `inset 0 1px 1px rgba(255,255,255,0.2), 0 0 8px color-mix(in srgb, ${segment.color} 30%, transparent)`,\n                    }}\n                    title={`${segment.label}: ${segment.value}`}\n                  />\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n\n      {showLabels && (\n        <div className=\"flex w-full items-start gap-1 px-0.5\">\n          {segmentsWithMetrics.map((segment) => {\n            const isActive = activeSegmentKey === segment.key;\n\n            return (\n              <div\n                key={`label-${segment.key}`}\n                className=\"flex min-w-0 justify-center\"\n                style={{ width: `${segment.widthPercent}%` }}\n              >\n                <span\n                  className=\"whitespace-nowrap px-1 text-center text-[11px] font-medium tracking-wide text-muted-foreground transition-colors duration-200\"\n                  style={isActive ? { color: segment.color } : undefined}\n                >\n                  {segment.label}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport {\n  AreaChart as RechartsAreaChart,\n  Area,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport { normalizeChartColors } from \"./chartPalette\";\n\nexport interface AreaChartData {\n  name: string;\n  [key: string]: string | number;\n}\n\ninterface AreaChartProps {\n  data: AreaChartData[];\n  categories: { key: string; color: string }[];\n  height?: number | string;\n  className?: string;\n  showGrid?: boolean;\n}\n\nexport const AreaChart: React.FC<AreaChartProps> = ({\n  data,\n  categories,\n  height = 300,\n  className = \"\",\n  showGrid = true,\n}) => {\n  const normalizedCategories = React.useMemo(() => {\n    const normalizedColors = normalizeChartColors(\n      categories.map((category) => category.color),\n    );\n\n    return categories.map((category, index) => ({\n      ...category,\n      color: normalizedColors[index] ?? category.color,\n    }));\n  }, [categories]);\n\n  return (\n    <div className={`w-full ${className}`} style={{ height }}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RechartsAreaChart\n          data={data}\n          margin={{ top: 10, right: 30, left: 0, bottom: 0 }}\n        >\n          <defs>\n            {normalizedCategories.map((cat) => (\n              <linearGradient\n                key={`gradient-${cat.key}`}\n                id={`color-${cat.key}`}\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"5%\" stopColor={cat.color} stopOpacity={0.3} />\n                <stop offset=\"95%\" stopColor={cat.color} stopOpacity={0} />\n              </linearGradient>\n            ))}\n          </defs>\n\n          {showGrid && (\n            <CartesianGrid\n              strokeDasharray=\"3 3\"\n              vertical={false}\n              stroke=\"var(--ds-color-border)\"\n              opacity={0.5}\n            />\n          )}\n\n          <XAxis\n            dataKey=\"name\"\n            axisLine={false}\n            tickLine={false}\n            tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n            dy={10}\n          />\n\n          <YAxis\n            axisLine={false}\n            tickLine={false}\n            tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n            dx={-10}\n          />\n\n          <Tooltip\n            contentStyle={{\n              backgroundColor:\n                \"color-mix(in srgb, var(--ds-color-surface) 92%, transparent)\",\n              border: \"1px solid var(--ds-color-border)\",\n              borderRadius: \"8px\",\n              backdropFilter: \"blur(8px)\",\n              color: \"var(--ds-color-fg)\",\n            }}\n            itemStyle={{ color: \"var(--ds-color-fg)\" }}\n          />\n\n          {normalizedCategories.map((cat) => (\n            <Area\n              key={cat.key}\n              type=\"monotone\"\n              dataKey={cat.key}\n              stroke={cat.color}\n              strokeWidth={2}\n              fillOpacity={1}\n              fill={`url(#color-${cat.key})`}\n            />\n          ))}\n        </RechartsAreaChart>\n      </ResponsiveContainer>\n    </div>\n  );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport { normalizeChartColors } from \"./chartPalette\";\n\nexport interface BarChartData {\n  name: string;\n  [key: string]: string | number;\n}\n\ninterface BarChartProps {\n  data: BarChartData[];\n  categories: { key: string; color: string }[];\n  height?: number | string;\n  className?: string;\n  layout?: \"horizontal\" | \"vertical\";\n}\n\nexport const BarChart: React.FC<BarChartProps> = ({\n  data,\n  categories,\n  height = 300,\n  className = \"\",\n  layout = \"horizontal\",\n}) => {\n  const normalizedCategories = React.useMemo(() => {\n    const normalizedColors = normalizeChartColors(\n      categories.map((category) => category.color),\n    );\n\n    return categories.map((category, index) => ({\n      ...category,\n      color: normalizedColors[index] ?? category.color,\n    }));\n  }, [categories]);\n\n  return (\n    <div className={`w-full ${className}`} style={{ height }}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RechartsBarChart\n          data={data}\n          layout={layout}\n          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}\n        >\n          <CartesianGrid\n            strokeDasharray=\"3 3\"\n            horizontal={layout === \"horizontal\"}\n            vertical={layout === \"vertical\"}\n            stroke=\"var(--ds-color-border)\"\n            opacity={0.4}\n          />\n\n          {layout === \"horizontal\" ? (\n            <>\n              <XAxis\n                dataKey=\"name\"\n                axisLine={false}\n                tickLine={false}\n                tick={{\n                  fill: \"var(--ds-color-fg-muted)\",\n                  fontSize: 12,\n                }}\n                dy={10}\n              />\n              <YAxis\n                axisLine={false}\n                tickLine={false}\n                tick={{\n                  fill: \"var(--ds-color-fg-muted)\",\n                  fontSize: 12,\n                }}\n                dx={-10}\n              />\n            </>\n          ) : (\n            <>\n              <XAxis\n                type=\"number\"\n                axisLine={false}\n                tickLine={false}\n                tick={{\n                  fill: \"var(--ds-color-fg-muted)\",\n                  fontSize: 12,\n                }}\n                dy={10}\n              />\n              <YAxis\n                dataKey=\"name\"\n                type=\"category\"\n                axisLine={false}\n                tickLine={false}\n                tick={{\n                  fill: \"var(--ds-color-fg-muted)\",\n                  fontSize: 12,\n                }}\n                dx={-10}\n              />\n            </>\n          )}\n\n          <Tooltip\n            cursor={{\n              fill: \"color-mix(in srgb, var(--ds-color-accent) 10%, transparent)\",\n            }}\n            contentStyle={{\n              backgroundColor:\n                \"color-mix(in srgb, var(--ds-color-surface) 92%, transparent)\",\n              border: \"1px solid var(--ds-color-border)\",\n              borderRadius: \"8px\",\n              backdropFilter: \"blur(8px)\",\n              color: \"var(--ds-color-fg)\",\n            }}\n          />\n\n          {normalizedCategories.map((cat) => (\n            <Bar\n              key={cat.key}\n              dataKey={cat.key}\n              fill={cat.color}\n              radius={layout === \"horizontal\" ? [4, 4, 0, 0] : [0, 4, 4, 0]}\n            />\n          ))}\n        </RechartsBarChart>\n      </ResponsiveContainer>\n    </div>\n  );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport {\n  PieChart as RechartsPieChart,\n  Pie,\n  Cell,\n  Tooltip,\n  Legend,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport { normalizeChartColors } from \"./chartPalette\";\n\nexport interface PieChartData {\n  name: string;\n  value: number;\n}\n\ninterface PieChartProps {\n  data: PieChartData[];\n  colors: string[];\n  height?: number | string;\n  className?: string;\n  variant?: \"pie\" | \"donut\";\n}\n\nexport const PieChart: React.FC<PieChartProps> = ({\n  data,\n  colors,\n  height = 300,\n  className = \"\",\n  variant = \"donut\",\n}) => {\n  const innerRadius = variant === \"donut\" ? \"60%\" : 0;\n  const normalizedColors = React.useMemo(\n    () => normalizeChartColors(colors),\n    [colors],\n  );\n\n  return (\n    <div className={`w-full ${className}`} style={{ height }}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RechartsPieChart>\n          <Pie\n            data={data}\n            cx=\"50%\"\n            cy=\"50%\"\n            innerRadius={innerRadius}\n            outerRadius=\"80%\"\n            paddingAngle={variant === \"donut\" ? 2 : 0}\n            dataKey=\"value\"\n            stroke=\"none\"\n          >\n            {data.map((entry, index) => (\n              <Cell\n                key={`cell-${index}`}\n                fill={normalizedColors[index % normalizedColors.length]}\n              />\n            ))}\n          </Pie>\n\n          <Tooltip\n            contentStyle={{\n              backgroundColor:\n                \"color-mix(in srgb, var(--ds-color-surface) 92%, transparent)\",\n              border: \"1px solid var(--ds-color-border)\",\n              borderRadius: \"8px\",\n              backdropFilter: \"blur(8px)\",\n              color: \"var(--ds-color-fg)\",\n            }}\n            itemStyle={{ color: \"var(--ds-color-fg)\" }}\n          />\n\n          <Legend\n            iconType=\"circle\"\n            wrapperStyle={{\n              fontSize: \"12px\",\n              color: \"var(--color-neutral-300)\",\n            }}\n          />\n        </RechartsPieChart>\n      </ResponsiveContainer>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/chunks/{checkbox-B3eIojWs.mjs → checkbox-DvwlGwWe.mjs}

@@ -3,12 +3,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/forms/checkbox/Checkbox.tsx
 var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
 var colorClasses = {
-	red: "checked:bg-red-500 dark:checked:bg-red-400",
-	blue: "checked:bg-blue-500 dark:checked:bg-blue-400",
-	green: "checked:bg-green-500 dark:checked:bg-green-400",
-	yellow: "checked:bg-yellow-500 dark:checked:bg-yellow-400",
-	teal: "checked:bg-teal-500 dark:checked:bg-teal-400",
-	primary: "checked:bg-primary dark:checked:bg-primary"
+	red: "checked:bg-[var(--ds-color-danger)]",
+	blue: "checked:bg-[var(--ds-color-info)]",
+	green: "checked:bg-[var(--ds-color-success)]",
+	yellow: "checked:bg-[var(--ds-color-warning)]",
+	teal: "checked:bg-[var(--ds-brand-teal)]",
+	primary: "checked:bg-accent"
 };
 var Checkbox = forwardRef(({ className = "", label, error, id, extra = "", color = "primary", ...props }, ref) => {
 	const generatedId = useId();
@@ -31,7 +31,7 @@ var Checkbox = forwardRef(({ className = "", label, error, id, extra = "", color
 				ref,
 				type: "checkbox",
 				id: checkboxId,
-				className: `checkbox-custom-${checkboxId} peer relative flex h-5 min-h-[20px] w-5 min-w-[20px] appearance-none items-center justify-center rounded-md border border-gray-300 transition duration-200 outline-none checked:border-none checked:text-white hover:cursor-pointer dark:border-white/30 ${isPredefinedColor ? colorClasses[color] : ""} ${error ? "border-red-500 dark:border-red-400" : ""} ${extra} ${className}`,
+				className: `checkbox-custom-${checkboxId} peer relative flex h-5 min-h-[20px] w-5 min-w-[20px] appearance-none items-center justify-center rounded-md border border-gray-300 transition duration-200 outline-none checked:border-none checked:text-white hover:cursor-pointer dark:border-white/30 ${isPredefinedColor ? colorClasses[color] : ""} ${error ? "border-destructive" : ""} ${extra} ${className}`,
 				...props
 			}),
 			label && /* @__PURE__ */ jsx("label", {
@@ -50,4 +50,4 @@ Checkbox.displayName = "Checkbox";
 //#endregion
 export { Checkbox as t };
 
-//# sourceMappingURL=checkbox-B3eIojWs.mjs.map
+//# sourceMappingURL=checkbox-DvwlGwWe.mjs.map

package/dist/chunks/checkbox-DvwlGwWe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-DvwlGwWe.mjs","names":[],"sources":["../../src/components/forms/checkbox/Checkbox.tsx"],"sourcesContent":["import type { CheckboxProps } from \"./types\";\nimport { forwardRef, useId } from \"react\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nconst colorClasses: Record<NonNullable<CheckboxProps[\"color\"]>, string> = {\n  red: \"checked:bg-[var(--ds-color-danger)]\",\n  blue: \"checked:bg-[var(--ds-color-info)]\",\n  green: \"checked:bg-[var(--ds-color-success)]\",\n  yellow: \"checked:bg-[var(--ds-color-warning)]\",\n  teal: \"checked:bg-[var(--ds-brand-teal)]\",\n  primary: \"checked:bg-accent\",\n};\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      className = \"\",\n      label,\n      error,\n      id,\n      extra = \"\",\n      color = \"primary\",\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = useId();\n    const checkboxId = id || `checkbox-${sanitizeId(generatedId)}`;\n\n    // Custom CheckIcon SVG (stroke-based design)\n    const checkmarkIcon = `url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 13l4 4L19 7'/%3e%3c/svg%3e\")`;\n\n    // Check if color is a predefined color name or a custom value\n    const isPredefinedColor = color in colorClasses;\n    const customColorStyle = !isPredefinedColor ? color : undefined;\n\n    return (\n      <>\n        <style>{`\n          .checkbox-custom-${checkboxId}:checked {\n            background-image: ${checkmarkIcon};\n            background-size: 70%;\n            background-position: center;\n            background-repeat: no-repeat;\n            ${customColorStyle ? `background-color: ${customColorStyle} !important;` : \"\"}\n          }\n        `}</style>\n        <div className=\"flex items-center space-x-2\">\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={checkboxId}\n            className={`checkbox-custom-${checkboxId} peer relative flex h-5 min-h-[20px] w-5 min-w-[20px] appearance-none items-center justify-center rounded-md border border-gray-300 transition duration-200 outline-none checked:border-none checked:text-white hover:cursor-pointer dark:border-white/30 ${\n              isPredefinedColor\n                ? colorClasses[color as keyof typeof colorClasses]\n                : \"\"\n            } ${error ? \"border-destructive\" : \"\"} ${extra} ${className}`}\n            {...props}\n          />\n          {label && (\n            <label\n              htmlFor={checkboxId}\n              className=\"text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer\"\n            >\n              {label}\n            </label>\n          )}\n          {error && (\n            <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n          )}\n        </div>\n      </>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":";;;AAGA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,IAAM,eAAoE;CACxE,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACN,SAAS;CACV;AAED,IAAa,WAAW,YAEpB,EACE,YAAY,IACZ,OACA,OACA,IACA,QAAQ,IACR,QAAQ,WACR,GAAG,SAEL,QACG;CACH,MAAM,cAAc,OAAO;CAC3B,MAAM,aAAa,MAAM,YAAY,WAAW,YAAY;CAG5D,MAAM,gBAAgB;CAGtB,MAAM,oBAAoB,SAAS;CACnC,MAAM,mBAAmB,CAAC,oBAAoB,QAAQ,KAAA;AAEtD,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD,EAAA,UAAQ;6BACa,WAAW;gCACR,cAAc;;;;cAIhC,mBAAmB,qBAAqB,iBAAiB,gBAAgB,GAAG;;WAExE,CAAA,EACV,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,SAAD;IACO;IACL,MAAK;IACL,IAAI;IACJ,WAAW,mBAAmB,WAAW,4PACvC,oBACI,aAAa,SACb,GACL,GAAG,QAAQ,uBAAuB,GAAG,GAAG,MAAM,GAAG;IAClD,GAAI;IACJ,CAAA;GACD,SACC,oBAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;IACL,EAAA,CAAA;EAGR;AAED,SAAS,cAAc"}

package/dist/chunks/{checkbox-DQmZwRTt.cjs → checkbox-yHuSw-hV.cjs}

@@ -4,12 +4,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/forms/checkbox/Checkbox.tsx
 var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
 var colorClasses = {
-	red: "checked:bg-red-500 dark:checked:bg-red-400",
-	blue: "checked:bg-blue-500 dark:checked:bg-blue-400",
-	green: "checked:bg-green-500 dark:checked:bg-green-400",
-	yellow: "checked:bg-yellow-500 dark:checked:bg-yellow-400",
-	teal: "checked:bg-teal-500 dark:checked:bg-teal-400",
-	primary: "checked:bg-primary dark:checked:bg-primary"
+	red: "checked:bg-[var(--ds-color-danger)]",
+	blue: "checked:bg-[var(--ds-color-info)]",
+	green: "checked:bg-[var(--ds-color-success)]",
+	yellow: "checked:bg-[var(--ds-color-warning)]",
+	teal: "checked:bg-[var(--ds-brand-teal)]",
+	primary: "checked:bg-accent"
 };
 var Checkbox = (0, react.forwardRef)(({ className = "", label, error, id, extra = "", color = "primary", ...props }, ref) => {
 	const generatedId = (0, react.useId)();
@@ -32,7 +32,7 @@ var Checkbox = (0, react.forwardRef)(({ className = "", label, error, id, extra
 				ref,
 				type: "checkbox",
 				id: checkboxId,
-				className: `checkbox-custom-${checkboxId} peer relative flex h-5 min-h-[20px] w-5 min-w-[20px] appearance-none items-center justify-center rounded-md border border-gray-300 transition duration-200 outline-none checked:border-none checked:text-white hover:cursor-pointer dark:border-white/30 ${isPredefinedColor ? colorClasses[color] : ""} ${error ? "border-red-500 dark:border-red-400" : ""} ${extra} ${className}`,
+				className: `checkbox-custom-${checkboxId} peer relative flex h-5 min-h-[20px] w-5 min-w-[20px] appearance-none items-center justify-center rounded-md border border-gray-300 transition duration-200 outline-none checked:border-none checked:text-white hover:cursor-pointer dark:border-white/30 ${isPredefinedColor ? colorClasses[color] : ""} ${error ? "border-destructive" : ""} ${extra} ${className}`,
 				...props
 			}),
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
@@ -56,4 +56,4 @@ Object.defineProperty(exports, "Checkbox", {
 	}
 });
 
-//# sourceMappingURL=checkbox-DQmZwRTt.cjs.map
+//# sourceMappingURL=checkbox-yHuSw-hV.cjs.map

package/dist/chunks/checkbox-yHuSw-hV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-yHuSw-hV.cjs","names":[],"sources":["../../src/components/forms/checkbox/Checkbox.tsx"],"sourcesContent":["import type { CheckboxProps } from \"./types\";\nimport { forwardRef, useId } from \"react\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nconst colorClasses: Record<NonNullable<CheckboxProps[\"color\"]>, string> = {\n  red: \"checked:bg-[var(--ds-color-danger)]\",\n  blue: \"checked:bg-[var(--ds-color-info)]\",\n  green: \"checked:bg-[var(--ds-color-success)]\",\n  yellow: \"checked:bg-[var(--ds-color-warning)]\",\n  teal: \"checked:bg-[var(--ds-brand-teal)]\",\n  primary: \"checked:bg-accent\",\n};\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      className = \"\",\n      label,\n      error,\n      id,\n      extra = \"\",\n      color = \"primary\",\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = useId();\n    const checkboxId = id || `checkbox-${sanitizeId(generatedId)}`;\n\n    // Custom CheckIcon SVG (stroke-based design)\n    const checkmarkIcon = `url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 13l4 4L19 7'/%3e%3c/svg%3e\")`;\n\n    // Check if color is a predefined color name or a custom value\n    const isPredefinedColor = color in colorClasses;\n    const customColorStyle = !isPredefinedColor ? color : undefined;\n\n    return (\n      <>\n        <style>{`\n          .checkbox-custom-${checkboxId}:checked {\n            background-image: ${checkmarkIcon};\n            background-size: 70%;\n            background-position: center;\n            background-repeat: no-repeat;\n            ${customColorStyle ? `background-color: ${customColorStyle} !important;` : \"\"}\n          }\n        `}</style>\n        <div className=\"flex items-center space-x-2\">\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={checkboxId}\n            className={`checkbox-custom-${checkboxId} peer relative flex h-5 min-h-[20px] w-5 min-w-[20px] appearance-none items-center justify-center rounded-md border border-gray-300 transition duration-200 outline-none checked:border-none checked:text-white hover:cursor-pointer dark:border-white/30 ${\n              isPredefinedColor\n                ? colorClasses[color as keyof typeof colorClasses]\n                : \"\"\n            } ${error ? \"border-destructive\" : \"\"} ${extra} ${className}`}\n            {...props}\n          />\n          {label && (\n            <label\n              htmlFor={checkboxId}\n              className=\"text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer\"\n            >\n              {label}\n            </label>\n          )}\n          {error && (\n            <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n          )}\n        </div>\n      </>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":";;;;AAGA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,IAAM,eAAoE;CACxE,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACN,SAAS;CACV;AAED,IAAa,YAAA,GAAA,MAAA,aAET,EACE,YAAY,IACZ,OACA,OACA,IACA,QAAQ,IACR,QAAQ,WACR,GAAG,SAEL,QACG;CACH,MAAM,eAAA,GAAA,MAAA,QAAqB;CAC3B,MAAM,aAAa,MAAM,YAAY,WAAW,YAAY;CAG5D,MAAM,gBAAgB;CAGtB,MAAM,oBAAoB,SAAS;CACnC,MAAM,mBAAmB,CAAC,oBAAoB,QAAQ,KAAA;AAEtD,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,SAAD,EAAA,UAAQ;6BACa,WAAW;gCACR,cAAc;;;;cAIhC,mBAAmB,qBAAqB,iBAAiB,gBAAgB,GAAG;;WAExE,CAAA,EACV,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACO;IACL,MAAK;IACL,IAAI;IACJ,WAAW,mBAAmB,WAAW,4PACvC,oBACI,aAAa,SACb,GACL,GAAG,QAAQ,uBAAuB,GAAG,GAAG,MAAM,GAAG;IAClD,GAAI;IACJ,CAAA;GACD,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;IACL,EAAA,CAAA;EAGR;AAED,SAAS,cAAc"}

package/dist/chunks/{chip-cZ7-HmWw.mjs → chip-BGSUmnlO.mjs}

@@ -1,4 +1,4 @@
-import { U as CloseIcon } from "./icons-CrM6pFkv.mjs";
+import { q as CloseIcon } from "./icons-DuumN7z-.mjs";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-display/chip/Chip.tsx
@@ -20,7 +20,7 @@ var iconSizeStyles = {
 var colorStyles = {
 	filled: {
 		default: "bg-gradient-to-br from-neutral-100 to-neutral-200 text-neutral-800 shadow-sm dark:from-neutral-700 dark:to-neutral-800 dark:text-neutral-100 border border-neutral-200 dark:border-neutral-600",
-		primary: "bg-gradient-to-br from-primary-500 to-primary-600 text-white shadow-md shadow-primary-500/30 dark:shadow-primary-500/20",
+		primary: "bg-linear-to-br from-accent to-accent-hover text-on-accent shadow-md shadow-accent/30 dark:shadow-accent/20",
 		secondary: "bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-md shadow-purple-500/30 dark:shadow-purple-500/20",
 		success: "bg-gradient-to-br from-green-500 to-green-600 text-white shadow-md shadow-green-500/30 dark:shadow-green-500/20",
 		warning: "bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-md shadow-amber-500/30 dark:shadow-amber-500/20",
@@ -29,7 +29,7 @@ var colorStyles = {
 	},
 	outlined: {
 		default: "border-2 border-neutral-300 text-neutral-700 bg-transparent dark:border-neutral-600 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-800/50",
-		primary: "border-2 border-primary-500 text-primary-600 bg-transparent dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20",
+		primary: "border-2 border-accent bg-transparent text-accent hover:bg-accent-subtle",
 		secondary: "border-2 border-purple-500 text-purple-600 bg-transparent dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20",
 		success: "border-2 border-green-500 text-green-600 bg-transparent dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20",
 		warning: "border-2 border-amber-500 text-amber-600 bg-transparent dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20",
@@ -38,7 +38,7 @@ var colorStyles = {
 	},
 	soft: {
 		default: "bg-neutral-100 text-neutral-800 dark:bg-neutral-800/60 dark:text-neutral-200 backdrop-blur-sm border border-neutral-200/50 dark:border-neutral-700/50",
-		primary: "bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300 backdrop-blur-sm border border-primary-200/50 dark:border-primary-800/50",
+		primary: "border border-accent/20 bg-accent-subtle text-accent backdrop-blur-sm",
 		secondary: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300 backdrop-blur-sm border border-purple-200/50 dark:border-purple-800/50",
 		success: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 backdrop-blur-sm border border-green-200/50 dark:border-green-800/50",
 		warning: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300 backdrop-blur-sm border border-amber-200/50 dark:border-amber-800/50",
@@ -47,7 +47,7 @@ var colorStyles = {
 	},
 	glass: {
 		default: "bg-white/70 text-neutral-800 dark:bg-neutral-800/70 dark:text-neutral-100 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-lg",
-		primary: "bg-primary-500/20 text-primary-700 dark:bg-primary-500/30 dark:text-primary-200 backdrop-blur-xl border border-primary-300/30 dark:border-primary-400/20 shadow-lg shadow-primary-500/10",
+		primary: "border border-accent/20 bg-accent/15 text-accent backdrop-blur-xl shadow-lg shadow-accent/10",
 		secondary: "bg-purple-500/20 text-purple-700 dark:bg-purple-500/30 dark:text-purple-200 backdrop-blur-xl border border-purple-300/30 dark:border-purple-400/20 shadow-lg shadow-purple-500/10",
 		success: "bg-green-500/20 text-green-700 dark:bg-green-500/30 dark:text-green-200 backdrop-blur-xl border border-green-300/30 dark:border-green-400/20 shadow-lg shadow-green-500/10",
 		warning: "bg-amber-500/20 text-amber-700 dark:bg-amber-500/30 dark:text-amber-200 backdrop-blur-xl border border-amber-300/30 dark:border-amber-400/20 shadow-lg shadow-amber-500/10",
@@ -57,7 +57,7 @@ var colorStyles = {
 };
 var dotColorStyles = {
 	default: "bg-neutral-500 dark:bg-neutral-400",
-	primary: "bg-primary-500",
+	primary: "bg-accent",
 	secondary: "bg-purple-500",
 	success: "bg-green-500",
 	warning: "bg-amber-500",
@@ -68,7 +68,7 @@ var Chip = forwardRef(({ children, variant = "soft", color = "default", size = "
 	const isClickable = onClick !== void 0;
 	const isRemovable = onRemove !== void 0;
 	const baseStyles = `
-      inline-flex items-center font-medium rounded-full transition-all duration-200
+      inline-flex items-center font-medium rounded-[4px] transition-all duration-200
       ${sizeStyles[size]}
       ${colorStyles[variant][color]}
       ${isClickable && !disabled ? "cursor-pointer hover:scale-105 hover:shadow-lg active:scale-95" : ""}
@@ -98,11 +98,11 @@ var Chip = forwardRef(({ children, variant = "soft", color = "default", size = "
 		},
 		children: [
 			dot && /* @__PURE__ */ jsx("span", {
-				className: `rounded-full flex-shrink-0 animate-pulse ${dotSizeStyles[size]} ${dotColor ? "" : dotColorStyles[color]}`,
+				className: `rounded-full shrink-0 animate-pulse ${dotSizeStyles[size]} ${dotColor ? "" : dotColorStyles[color]}`,
 				style: dotColor ? { backgroundColor: dotColor } : void 0
 			}),
 			startIcon && /* @__PURE__ */ jsx("span", {
-				className: `flex-shrink-0 ${iconSizeStyles[size]}`,
+				className: `shrink-0 ${iconSizeStyles[size]}`,
 				children: startIcon
 			}),
 			/* @__PURE__ */ jsx("span", {
@@ -110,7 +110,7 @@ var Chip = forwardRef(({ children, variant = "soft", color = "default", size = "
 				children
 			}),
 			endIcon && !isRemovable && /* @__PURE__ */ jsx("span", {
-				className: `flex-shrink-0 ${iconSizeStyles[size]}`,
+				className: `shrink-0 ${iconSizeStyles[size]}`,
 				children: endIcon
 			}),
 			isRemovable && /* @__PURE__ */ jsx("button", {
@@ -118,7 +118,7 @@ var Chip = forwardRef(({ children, variant = "soft", color = "default", size = "
 				onClick: handleRemove,
 				disabled,
 				className: `
-              flex-shrink-0 rounded-full p-0.5 ml-1 transition-all duration-200
+              shrink-0 rounded-full p-0.5 ml-1 transition-all duration-200
               hover:bg-black/20 dark:hover:bg-white/20 hover:scale-110
               focus:outline-none focus:ring-2 focus:ring-current focus:ring-offset-1
               ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
@@ -136,4 +136,4 @@ Chip.displayName = "Chip";
 //#endregion
 export { Chip as t };
 
-//# sourceMappingURL=chip-cZ7-HmWw.mjs.map
+//# sourceMappingURL=chip-BGSUmnlO.mjs.map

package/dist/chunks/chip-BGSUmnlO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-BGSUmnlO.mjs","names":[],"sources":["../../src/components/data-display/chip/Chip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { CloseIcon } from \"../../icons\";\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:\n      \"bg-gradient-to-br from-neutral-100 to-neutral-200 text-neutral-800 shadow-sm dark:from-neutral-700 dark:to-neutral-800 dark:text-neutral-100 border border-neutral-200 dark:border-neutral-600\",\n    primary:\n      \"bg-linear-to-br from-accent to-accent-hover text-on-accent shadow-md shadow-accent/30 dark:shadow-accent/20\",\n    secondary:\n      \"bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-md shadow-purple-500/30 dark:shadow-purple-500/20\",\n    success:\n      \"bg-gradient-to-br from-green-500 to-green-600 text-white shadow-md shadow-green-500/30 dark:shadow-green-500/20\",\n    warning:\n      \"bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-md shadow-amber-500/30 dark:shadow-amber-500/20\",\n    error:\n      \"bg-gradient-to-br from-red-500 to-red-600 text-white shadow-md shadow-red-500/30 dark:shadow-red-500/20\",\n    info: \"bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-md shadow-blue-500/30 dark:shadow-blue-500/20\",\n  },\n  outlined: {\n    default:\n      \"border-2 border-neutral-300 text-neutral-700 bg-transparent dark:border-neutral-600 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-800/50\",\n    primary:\n      \"border-2 border-accent bg-transparent text-accent hover:bg-accent-subtle\",\n    secondary:\n      \"border-2 border-purple-500 text-purple-600 bg-transparent dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20\",\n    success:\n      \"border-2 border-green-500 text-green-600 bg-transparent dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20\",\n    warning:\n      \"border-2 border-amber-500 text-amber-600 bg-transparent dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20\",\n    error:\n      \"border-2 border-red-500 text-red-600 bg-transparent dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20\",\n    info: \"border-2 border-blue-500 text-blue-600 bg-transparent dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20\",\n  },\n  soft: {\n    default:\n      \"bg-neutral-100 text-neutral-800 dark:bg-neutral-800/60 dark:text-neutral-200 backdrop-blur-sm border border-neutral-200/50 dark:border-neutral-700/50\",\n    primary:\n      \"border border-accent/20 bg-accent-subtle text-accent backdrop-blur-sm\",\n    secondary:\n      \"bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300 backdrop-blur-sm border border-purple-200/50 dark:border-purple-800/50\",\n    success:\n      \"bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 backdrop-blur-sm border border-green-200/50 dark:border-green-800/50\",\n    warning:\n      \"bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300 backdrop-blur-sm border border-amber-200/50 dark:border-amber-800/50\",\n    error:\n      \"bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 backdrop-blur-sm border border-red-200/50 dark:border-red-800/50\",\n    info: \"bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300 backdrop-blur-sm border border-blue-200/50 dark:border-blue-800/50\",\n  },\n  glass: {\n    default:\n      \"bg-white/70 text-neutral-800 dark:bg-neutral-800/70 dark:text-neutral-100 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-lg\",\n    primary:\n      \"border border-accent/20 bg-accent/15 text-accent backdrop-blur-xl shadow-lg shadow-accent/10\",\n    secondary:\n      \"bg-purple-500/20 text-purple-700 dark:bg-purple-500/30 dark:text-purple-200 backdrop-blur-xl border border-purple-300/30 dark:border-purple-400/20 shadow-lg shadow-purple-500/10\",\n    success:\n      \"bg-green-500/20 text-green-700 dark:bg-green-500/30 dark:text-green-200 backdrop-blur-xl border border-green-300/30 dark:border-green-400/20 shadow-lg shadow-green-500/10\",\n    warning:\n      \"bg-amber-500/20 text-amber-700 dark:bg-amber-500/30 dark:text-amber-200 backdrop-blur-xl border border-amber-300/30 dark:border-amber-400/20 shadow-lg shadow-amber-500/10\",\n    error:\n      \"bg-red-500/20 text-red-700 dark:bg-red-500/30 dark:text-red-200 backdrop-blur-xl border border-red-300/30 dark:border-red-400/20 shadow-lg shadow-red-500/10\",\n    info: \"bg-blue-500/20 text-blue-700 dark:bg-blue-500/30 dark:text-blue-200 backdrop-blur-xl border border-blue-300/30 dark:border-blue-400/20 shadow-lg shadow-blue-500/10\",\n  },\n};\n\nconst dotColorStyles: Record<ChipColor, string> = {\n  default: \"bg-neutral-500 dark:bg-neutral-400\",\n  primary: \"bg-accent\",\n  secondary: \"bg-purple-500\",\n  success: \"bg-green-500\",\n  warning: \"bg-amber-500\",\n  error: \"bg-red-500\",\n  info: \"bg-blue-500\",\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        <span className=\"truncate font-semibold\">{children}</span>\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-black/20 dark:hover:bg-white/20 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"],"mappings":";;;;AA4CA,IAAM,aAAuC;CAC3C,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,gBAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,iBAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,cAA8D;CAClE,QAAQ;EACN,SACE;EACF,SACE;EACF,WACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,MAAM;EACP;CACD,UAAU;EACR,SACE;EACF,SACE;EACF,WACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,MAAM;EACP;CACD,MAAM;EACJ,SACE;EACF,SACE;EACF,WACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,MAAM;EACP;CACD,OAAO;EACL,SACE;EACF,SACE;EACF,WACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,MAAM;EACP;CACF;AAED,IAAM,iBAA4C;CAChD,SAAS;CACT,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACP;AAED,IAAM,OAAO,YAET,EACE,UACA,UAAU,QACV,QAAQ,WACR,OAAO,MACP,WACA,SACA,UACA,SACA,WAAW,OACX,YAAY,IACZ,MAAM,OACN,UACA,YAEF,QACG;CACH,MAAM,cAAc,YAAY,KAAA;CAChC,MAAM,cAAc,aAAa,KAAA;CAEjC,MAAM,aAAa;;QAEf,WAAW,MAAM;QACjB,YAAY,SAAS,OAAO;QAE5B,eAAe,CAAC,WACZ,mEACA,GACL;QACC,WAAW,4CAA4C,GAAG;QAC1D,WAAW,eAAe,GAAG;QAC7B,UAAU;;CAGd,MAAM,oBAAoB;AACxB,MAAI,CAAC,YAAY,QACf,UAAS;;CAIb,MAAM,gBAAgB,MAAwB;AAC5C,IAAE,iBAAiB;AACnB,MAAI,CAAC,YAAY,SACf,WAAU;;AAId,QACE,qBAAC,QAAD;EACO;EACL,WAAW;EACX,SAAS;EACT,MAAM,cAAc,WAAW,KAAA;EAC/B,UAAU,eAAe,CAAC,WAAW,IAAI,KAAA;EACzC,OACE,WACI,EACE,UACE,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM,UACpD,GACD,KAAA;EAEN,YAAY,MAAM;AAChB,OACE,eACA,CAAC,aACA,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAChC;AACA,MAAE,gBAAgB;AAClB,eAAW;;;YArBjB;GAyBG,OACC,oBAAC,QAAD;IACE,WAAW,uCACT,cAAc,MACf,GAAG,WAAW,KAAK,eAAe;IACnC,OAAO,WAAW,EAAE,iBAAiB,UAAU,GAAG,KAAA;IAClD,CAAA;GAEH,aACC,oBAAC,QAAD;IAAM,WAAW,YAAY,eAAe;cACzC;IACI,CAAA;GAET,oBAAC,QAAD;IAAM,WAAU;IAA0B;IAAgB,CAAA;GACzD,WAAW,CAAC,eACX,oBAAC,QAAD;IAAM,WAAW,YAAY,eAAe;cAAU;IAAe,CAAA;GAEtE,eACC,oBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACC;IACV,WAAW;;;;gBAIP,WAAW,uBAAuB,iBAAiB;;IAEvD,cAAW;cAEX,oBAAC,WAAD;KAAW,WAAW,eAAe;KAAO,eAAY;KAAS,CAAA;IAC1D,CAAA;GAEN;;EAGZ;AAED,KAAK,cAAc"}

package/dist/chunks/{chip-BH6wzwat.cjs → chip-DcBji__g.cjs}

@@ -1,5 +1,5 @@
 require("./chunk-B_GkZjkl.cjs");
-const require_icons = require("./icons-DYkpqWYG.cjs");
+const require_icons = require("./icons-BxIzP2jd.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/data-display/chip/Chip.tsx
@@ -21,7 +21,7 @@ var iconSizeStyles = {
 var colorStyles = {
 	filled: {
 		default: "bg-gradient-to-br from-neutral-100 to-neutral-200 text-neutral-800 shadow-sm dark:from-neutral-700 dark:to-neutral-800 dark:text-neutral-100 border border-neutral-200 dark:border-neutral-600",
-		primary: "bg-gradient-to-br from-primary-500 to-primary-600 text-white shadow-md shadow-primary-500/30 dark:shadow-primary-500/20",
+		primary: "bg-linear-to-br from-accent to-accent-hover text-on-accent shadow-md shadow-accent/30 dark:shadow-accent/20",
 		secondary: "bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-md shadow-purple-500/30 dark:shadow-purple-500/20",
 		success: "bg-gradient-to-br from-green-500 to-green-600 text-white shadow-md shadow-green-500/30 dark:shadow-green-500/20",
 		warning: "bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-md shadow-amber-500/30 dark:shadow-amber-500/20",
@@ -30,7 +30,7 @@ var colorStyles = {
 	},
 	outlined: {
 		default: "border-2 border-neutral-300 text-neutral-700 bg-transparent dark:border-neutral-600 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-800/50",
-		primary: "border-2 border-primary-500 text-primary-600 bg-transparent dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20",
+		primary: "border-2 border-accent bg-transparent text-accent hover:bg-accent-subtle",
 		secondary: "border-2 border-purple-500 text-purple-600 bg-transparent dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20",
 		success: "border-2 border-green-500 text-green-600 bg-transparent dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20",
 		warning: "border-2 border-amber-500 text-amber-600 bg-transparent dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20",
@@ -39,7 +39,7 @@ var colorStyles = {
 	},
 	soft: {
 		default: "bg-neutral-100 text-neutral-800 dark:bg-neutral-800/60 dark:text-neutral-200 backdrop-blur-sm border border-neutral-200/50 dark:border-neutral-700/50",
-		primary: "bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300 backdrop-blur-sm border border-primary-200/50 dark:border-primary-800/50",
+		primary: "border border-accent/20 bg-accent-subtle text-accent backdrop-blur-sm",
 		secondary: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300 backdrop-blur-sm border border-purple-200/50 dark:border-purple-800/50",
 		success: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 backdrop-blur-sm border border-green-200/50 dark:border-green-800/50",
 		warning: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300 backdrop-blur-sm border border-amber-200/50 dark:border-amber-800/50",
@@ -48,7 +48,7 @@ var colorStyles = {
 	},
 	glass: {
 		default: "bg-white/70 text-neutral-800 dark:bg-neutral-800/70 dark:text-neutral-100 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-lg",
-		primary: "bg-primary-500/20 text-primary-700 dark:bg-primary-500/30 dark:text-primary-200 backdrop-blur-xl border border-primary-300/30 dark:border-primary-400/20 shadow-lg shadow-primary-500/10",
+		primary: "border border-accent/20 bg-accent/15 text-accent backdrop-blur-xl shadow-lg shadow-accent/10",
 		secondary: "bg-purple-500/20 text-purple-700 dark:bg-purple-500/30 dark:text-purple-200 backdrop-blur-xl border border-purple-300/30 dark:border-purple-400/20 shadow-lg shadow-purple-500/10",
 		success: "bg-green-500/20 text-green-700 dark:bg-green-500/30 dark:text-green-200 backdrop-blur-xl border border-green-300/30 dark:border-green-400/20 shadow-lg shadow-green-500/10",
 		warning: "bg-amber-500/20 text-amber-700 dark:bg-amber-500/30 dark:text-amber-200 backdrop-blur-xl border border-amber-300/30 dark:border-amber-400/20 shadow-lg shadow-amber-500/10",
@@ -58,7 +58,7 @@ var colorStyles = {
 };
 var dotColorStyles = {
 	default: "bg-neutral-500 dark:bg-neutral-400",
-	primary: "bg-primary-500",
+	primary: "bg-accent",
 	secondary: "bg-purple-500",
 	success: "bg-green-500",
 	warning: "bg-amber-500",
@@ -69,7 +69,7 @@ var Chip = (0, react.forwardRef)(({ children, variant = "soft", color = "default
 	const isClickable = onClick !== void 0;
 	const isRemovable = onRemove !== void 0;
 	const baseStyles = `
-      inline-flex items-center font-medium rounded-full transition-all duration-200
+      inline-flex items-center font-medium rounded-[4px] transition-all duration-200
       ${sizeStyles[size]}
       ${colorStyles[variant][color]}
       ${isClickable && !disabled ? "cursor-pointer hover:scale-105 hover:shadow-lg active:scale-95" : ""}
@@ -99,11 +99,11 @@ var Chip = (0, react.forwardRef)(({ children, variant = "soft", color = "default
 		},
 		children: [
 			dot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: `rounded-full flex-shrink-0 animate-pulse ${dotSizeStyles[size]} ${dotColor ? "" : dotColorStyles[color]}`,
+				className: `rounded-full shrink-0 animate-pulse ${dotSizeStyles[size]} ${dotColor ? "" : dotColorStyles[color]}`,
 				style: dotColor ? { backgroundColor: dotColor } : void 0
 			}),
 			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: `flex-shrink-0 ${iconSizeStyles[size]}`,
+				className: `shrink-0 ${iconSizeStyles[size]}`,
 				children: startIcon
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -111,7 +111,7 @@ var Chip = (0, react.forwardRef)(({ children, variant = "soft", color = "default
 				children
 			}),
 			endIcon && !isRemovable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: `flex-shrink-0 ${iconSizeStyles[size]}`,
+				className: `shrink-0 ${iconSizeStyles[size]}`,
 				children: endIcon
 			}),
 			isRemovable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -119,7 +119,7 @@ var Chip = (0, react.forwardRef)(({ children, variant = "soft", color = "default
 				onClick: handleRemove,
 				disabled,
 				className: `
-              flex-shrink-0 rounded-full p-0.5 ml-1 transition-all duration-200
+              shrink-0 rounded-full p-0.5 ml-1 transition-all duration-200
               hover:bg-black/20 dark:hover:bg-white/20 hover:scale-110
               focus:outline-none focus:ring-2 focus:ring-current focus:ring-offset-1
               ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
@@ -142,4 +142,4 @@ Object.defineProperty(exports, "Chip", {
 	}
 });
 
-//# sourceMappingURL=chip-BH6wzwat.cjs.map
+//# sourceMappingURL=chip-DcBji__g.cjs.map

package/dist/chunks/chip-DcBji__g.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-DcBji__g.cjs","names":[],"sources":["../../src/components/data-display/chip/Chip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { CloseIcon } from \"../../icons\";\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:\n      \"bg-gradient-to-br from-neutral-100 to-neutral-200 text-neutral-800 shadow-sm dark:from-neutral-700 dark:to-neutral-800 dark:text-neutral-100 border border-neutral-200 dark:border-neutral-600\",\n    primary:\n      \"bg-linear-to-br from-accent to-accent-hover text-on-accent shadow-md shadow-accent/30 dark:shadow-accent/20\",\n    secondary:\n      \"bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-md shadow-purple-500/30 dark:shadow-purple-500/20\",\n    success:\n      \"bg-gradient-to-br from-green-500 to-green-600 text-white shadow-md shadow-green-500/30 dark:shadow-green-500/20\",\n    warning:\n      \"bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-md shadow-amber-500/30 dark:shadow-amber-500/20\",\n    error:\n      \"bg-gradient-to-br from-red-500 to-red-600 text-white shadow-md shadow-red-500/30 dark:shadow-red-500/20\",\n    info: \"bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-md shadow-blue-500/30 dark:shadow-blue-500/20\",\n  },\n  outlined: {\n    default:\n      \"border-2 border-neutral-300 text-neutral-700 bg-transparent dark:border-neutral-600 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-800/50\",\n    primary:\n      \"border-2 border-accent bg-transparent text-accent hover:bg-accent-subtle\",\n    secondary:\n      \"border-2 border-purple-500 text-purple-600 bg-transparent dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20\",\n    success:\n      \"border-2 border-green-500 text-green-600 bg-transparent dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20\",\n    warning:\n      \"border-2 border-amber-500 text-amber-600 bg-transparent dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20\",\n    error:\n      \"border-2 border-red-500 text-red-600 bg-transparent dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20\",\n    info: \"border-2 border-blue-500 text-blue-600 bg-transparent dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20\",\n  },\n  soft: {\n    default:\n      \"bg-neutral-100 text-neutral-800 dark:bg-neutral-800/60 dark:text-neutral-200 backdrop-blur-sm border border-neutral-200/50 dark:border-neutral-700/50\",\n    primary:\n      \"border border-accent/20 bg-accent-subtle text-accent backdrop-blur-sm\",\n    secondary:\n      \"bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300 backdrop-blur-sm border border-purple-200/50 dark:border-purple-800/50\",\n    success:\n      \"bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 backdrop-blur-sm border border-green-200/50 dark:border-green-800/50\",\n    warning:\n      \"bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300 backdrop-blur-sm border border-amber-200/50 dark:border-amber-800/50\",\n    error:\n      \"bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 backdrop-blur-sm border border-red-200/50 dark:border-red-800/50\",\n    info: \"bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300 backdrop-blur-sm border border-blue-200/50 dark:border-blue-800/50\",\n  },\n  glass: {\n    default:\n      \"bg-white/70 text-neutral-800 dark:bg-neutral-800/70 dark:text-neutral-100 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-lg\",\n    primary:\n      \"border border-accent/20 bg-accent/15 text-accent backdrop-blur-xl shadow-lg shadow-accent/10\",\n    secondary:\n      \"bg-purple-500/20 text-purple-700 dark:bg-purple-500/30 dark:text-purple-200 backdrop-blur-xl border border-purple-300/30 dark:border-purple-400/20 shadow-lg shadow-purple-500/10\",\n    success:\n      \"bg-green-500/20 text-green-700 dark:bg-green-500/30 dark:text-green-200 backdrop-blur-xl border border-green-300/30 dark:border-green-400/20 shadow-lg shadow-green-500/10\",\n    warning:\n      \"bg-amber-500/20 text-amber-700 dark:bg-amber-500/30 dark:text-amber-200 backdrop-blur-xl border border-amber-300/30 dark:border-amber-400/20 shadow-lg shadow-amber-500/10\",\n    error:\n      \"bg-red-500/20 text-red-700 dark:bg-red-500/30 dark:text-red-200 backdrop-blur-xl border border-red-300/30 dark:border-red-400/20 shadow-lg shadow-red-500/10\",\n    info: \"bg-blue-500/20 text-blue-700 dark:bg-blue-500/30 dark:text-blue-200 backdrop-blur-xl border border-blue-300/30 dark:border-blue-400/20 shadow-lg shadow-blue-500/10\",\n  },\n};\n\nconst dotColorStyles: Record<ChipColor, string> = {\n  default: \"bg-neutral-500 dark:bg-neutral-400\",\n  primary: \"bg-accent\",\n  secondary: \"bg-purple-500\",\n  success: \"bg-green-500\",\n  warning: \"bg-amber-500\",\n  error: \"bg-red-500\",\n  info: \"bg-blue-500\",\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        <span className=\"truncate font-semibold\">{children}</span>\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-black/20 dark:hover:bg-white/20 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"],"mappings":";;;;;AA4CA,IAAM,aAAuC;CAC3C,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,gBAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,iBAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,cAA8D;CAClE,QAAQ;EACN,SACE;EACF,SACE;EACF,WACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,MAAM;EACP;CACD,UAAU;EACR,SACE;EACF,SACE;EACF,WACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,MAAM;EACP;CACD,MAAM;EACJ,SACE;EACF,SACE;EACF,WACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,MAAM;EACP;CACD,OAAO;EACL,SACE;EACF,SACE;EACF,WACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,MAAM;EACP;CACF;AAED,IAAM,iBAA4C;CAChD,SAAS;CACT,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACP;AAED,IAAM,QAAA,GAAA,MAAA,aAEF,EACE,UACA,UAAU,QACV,QAAQ,WACR,OAAO,MACP,WACA,SACA,UACA,SACA,WAAW,OACX,YAAY,IACZ,MAAM,OACN,UACA,YAEF,QACG;CACH,MAAM,cAAc,YAAY,KAAA;CAChC,MAAM,cAAc,aAAa,KAAA;CAEjC,MAAM,aAAa;;QAEf,WAAW,MAAM;QACjB,YAAY,SAAS,OAAO;QAE5B,eAAe,CAAC,WACZ,mEACA,GACL;QACC,WAAW,4CAA4C,GAAG;QAC1D,WAAW,eAAe,GAAG;QAC7B,UAAU;;CAGd,MAAM,oBAAoB;AACxB,MAAI,CAAC,YAAY,QACf,UAAS;;CAIb,MAAM,gBAAgB,MAAwB;AAC5C,IAAE,iBAAiB;AACnB,MAAI,CAAC,YAAY,SACf,WAAU;;AAId,QACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACO;EACL,WAAW;EACX,SAAS;EACT,MAAM,cAAc,WAAW,KAAA;EAC/B,UAAU,eAAe,CAAC,WAAW,IAAI,KAAA;EACzC,OACE,WACI,EACE,UACE,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM,UACpD,GACD,KAAA;EAEN,YAAY,MAAM;AAChB,OACE,eACA,CAAC,aACA,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAChC;AACA,MAAE,gBAAgB;AAClB,eAAW;;;YArBjB;GAyBG,OACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAW,uCACT,cAAc,MACf,GAAG,WAAW,KAAK,eAAe;IACnC,OAAO,WAAW,EAAE,iBAAiB,UAAU,GAAG,KAAA;IAClD,CAAA;GAEH,aACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAW,YAAY,eAAe;cACzC;IACI,CAAA;GAET,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;IAA0B;IAAgB,CAAA;GACzD,WAAW,CAAC,eACX,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAW,YAAY,eAAe;cAAU;IAAe,CAAA;GAEtE,eACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,SAAS;IACC;IACV,WAAW;;;;gBAIP,WAAW,uBAAuB,iBAAiB;;IAEvD,cAAW;cAEX,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;KAAW,WAAW,eAAe;KAAO,eAAY;KAAS,CAAA;IAC1D,CAAA;GAEN;;EAGZ;AAED,KAAK,cAAc"}

package/dist/chunks/{chroma-grid-DtsqM4LW.cjs → chroma-grid-9E9j1s9I.cjs}

@@ -12,14 +12,14 @@ var borderRadiusMap = {
 	"2xl": "rounded-2xl"
 };
 var defaultColors = [
-	"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-	"linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
-	"linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
-	"linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
-	"linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
-	"linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
-	"linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)",
-	"linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)"
+	"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 100%)",
+	"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-info) 100%)",
+	"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-accent-hover) 100%)",
+	"linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-accent) 100%)",
+	"linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-accent) 100%)",
+	"linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-warning) 100%)",
+	"linear-gradient(135deg, var(--ds-color-accent-hover) 0%, var(--ds-color-success) 100%)",
+	"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-success) 100%)"
 ];
 var getAnimation = (animation, index, staggerDelay) => {
 	const delay = index * staggerDelay / 1e3;
@@ -97,7 +97,7 @@ var getHoverEffect = (effect) => {
 			transition: { duration: .3 }
 		};
 		case "glow": return {
-			boxShadow: "0 0 30px rgba(115, 103, 240, 0.5)",
+			boxShadow: "0 0 30px color-mix(in srgb, var(--ds-color-accent) 45%, transparent)",
 			transition: { duration: .3 }
 		};
 		case "scale": return {
@@ -218,4 +218,4 @@ Object.defineProperty(exports, "ChromaGrid", {
 	}
 });
 
-//# sourceMappingURL=chroma-grid-DtsqM4LW.cjs.map
+//# sourceMappingURL=chroma-grid-9E9j1s9I.cjs.map

package/dist/chunks/chroma-grid-9E9j1s9I.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chroma-grid-9E9j1s9I.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-white/20 dark:border-white/10\",\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-black/10 dark:bg-black/20\" />\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-white mb-3 drop-shadow-lg\">\n            {item.icon}\n          </div>\n        )}\n        {item.title && (\n          <h3 className=\"text-lg font-bold text-white mb-1 drop-shadow-md\">\n            {item.title}\n          </h3>\n        )}\n        {item.description && (\n          <p className=\"text-sm text-white/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-CC_fFzxO.mjs → chroma-grid-Cdeql_2C.mjs}

@@ -11,14 +11,14 @@ var borderRadiusMap = {
 	"2xl": "rounded-2xl"
 };
 var defaultColors = [
-	"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-	"linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
-	"linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
-	"linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
-	"linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
-	"linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
-	"linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)",
-	"linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)"
+	"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 100%)",
+	"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-info) 100%)",
+	"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-accent-hover) 100%)",
+	"linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-accent) 100%)",
+	"linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-accent) 100%)",
+	"linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-warning) 100%)",
+	"linear-gradient(135deg, var(--ds-color-accent-hover) 0%, var(--ds-color-success) 100%)",
+	"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-success) 100%)"
 ];
 var getAnimation = (animation, index, staggerDelay) => {
 	const delay = index * staggerDelay / 1e3;
@@ -96,7 +96,7 @@ var getHoverEffect = (effect) => {
 			transition: { duration: .3 }
 		};
 		case "glow": return {
-			boxShadow: "0 0 30px rgba(115, 103, 240, 0.5)",
+			boxShadow: "0 0 30px color-mix(in srgb, var(--ds-color-accent) 45%, transparent)",
 			transition: { duration: .3 }
 		};
 		case "scale": return {
@@ -212,4 +212,4 @@ ChromaGrid.displayName = "ChromaGrid";
 //#endregion
 export { ChromaGrid as t };
 
-//# sourceMappingURL=chroma-grid-CC_fFzxO.mjs.map
+//# sourceMappingURL=chroma-grid-Cdeql_2C.mjs.map

package/dist/chunks/chroma-grid-Cdeql_2C.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chroma-grid-Cdeql_2C.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-white/20 dark:border-white/10\",\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-black/10 dark:bg-black/20\" />\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-white mb-3 drop-shadow-lg\">\n            {item.icon}\n          </div>\n        )}\n        {item.title && (\n          <h3 className=\"text-lg font-bold text-white mb-1 drop-shadow-md\">\n            {item.title}\n          </h3>\n        )}\n        {item.description && (\n          <p className=\"text-sm text-white/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,UAAU,OAAuB,KAAK;CAC5C,MAAM,CAAC,eAAe,oBAAoB,SAAS;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAClE,MAAM,CAAC,WAAW,gBAAgB,SAAS,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,qBAAC,OAAO,KAAR;EACE,KAAK;EACL,WAAW,gBACT,6DACA,gBAAgB,eAChB,YAAY,WAAW,+CACvB,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,oBAAC,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,oBAAC,OAAD,EAAK,WAAU,iDAAkD,CAAA;GAInE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAK,QACJ,oBAAC,OAAD;MAAK,WAAU;gBACZ,KAAK;MACF,CAAA;KAEP,KAAK,SACJ,oBAAC,MAAD;MAAI,WAAU;gBACX,KAAK;MACH,CAAA;KAEN,KAAK,eACJ,oBAAC,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,oBAAC,OAAD;EACE,WAAW,gBAAgB,eAAe,UAAU;EACpD,OAAO;GACL,qBAAqB,UAAU,QAAQ;GACvC,KAAK,GAAG,IAAI;GACZ,GAAG;GACJ;YAEA,MAAM,KAAK,MAAM,UAChB,oBAAC,UAAD;GAEQ;GACC;GACI;GACG;GACD;GACJ;GACK;GACH;GACA;GACX,EAVK,KAAK,GAUV,CACF;EACE,CAAA;;AAIV,WAAW,cAAc"}