erp-pro-ui 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (183) hide show
  1. package/dist/calendar.cjs +1 -1
  2. package/dist/calendar.mjs +1 -1
  3. package/dist/card.cjs +1 -1
  4. package/dist/card.mjs +1 -1
  5. package/dist/carousel.cjs +1 -1
  6. package/dist/carousel.mjs +1 -1
  7. package/dist/catalog.cjs +6 -0
  8. package/dist/catalog.cjs.map +1 -1
  9. package/dist/catalog.d.ts +11 -1
  10. package/dist/catalog.d.ts.map +1 -1
  11. package/dist/catalog.mjs +6 -0
  12. package/dist/catalog.mjs.map +1 -1
  13. package/dist/charts.cjs +2 -1
  14. package/dist/charts.mjs +2 -2
  15. package/dist/checkbox.cjs +1 -1
  16. package/dist/checkbox.mjs +1 -1
  17. package/dist/chip.cjs +1 -1
  18. package/dist/chip.mjs +1 -1
  19. package/dist/chroma-grid.cjs +1 -1
  20. package/dist/chroma-grid.mjs +1 -1
  21. package/dist/chunks/{calendar-xrGmvukr.cjs → calendar-Cpp_Rc7T.cjs} +58 -17
  22. package/dist/chunks/calendar-Cpp_Rc7T.cjs.map +1 -0
  23. package/dist/chunks/{calendar-BarcG6x_.mjs → calendar-DrCgT_pj.mjs} +58 -17
  24. package/dist/chunks/calendar-DrCgT_pj.mjs.map +1 -0
  25. package/dist/chunks/{card-gt-HZh0h.cjs → card-C5_tFK6Q.cjs} +1 -1
  26. package/dist/chunks/{card-gt-HZh0h.cjs.map → card-C5_tFK6Q.cjs.map} +1 -1
  27. package/dist/chunks/{card-CcIF6z2H.mjs → card-Dh8wNv8N.mjs} +1 -1
  28. package/dist/chunks/{card-CcIF6z2H.mjs.map → card-Dh8wNv8N.mjs.map} +1 -1
  29. package/dist/chunks/{carousel-DJdqBVRK.mjs → carousel-BYwqI4cA.mjs} +1 -1
  30. package/dist/chunks/{carousel-DJdqBVRK.mjs.map → carousel-BYwqI4cA.mjs.map} +1 -1
  31. package/dist/chunks/{carousel-Cq5uwqQt.cjs → carousel-C1338X8h.cjs} +1 -1
  32. package/dist/chunks/{carousel-Cq5uwqQt.cjs.map → carousel-C1338X8h.cjs.map} +1 -1
  33. package/dist/chunks/{charts-DugYWvEf.mjs → charts-BYvM4TMG.mjs} +371 -117
  34. package/dist/chunks/charts-BYvM4TMG.mjs.map +1 -0
  35. package/dist/chunks/{charts-BpElnsoR.cjs → charts-DbxyHtlX.cjs} +375 -115
  36. package/dist/chunks/charts-DbxyHtlX.cjs.map +1 -0
  37. package/dist/chunks/{checkbox-yHuSw-hV.cjs → checkbox-CxOcjoGP.cjs} +1 -1
  38. package/dist/chunks/{checkbox-yHuSw-hV.cjs.map → checkbox-CxOcjoGP.cjs.map} +1 -1
  39. package/dist/chunks/{checkbox-DvwlGwWe.mjs → checkbox-Pr49U9F1.mjs} +1 -1
  40. package/dist/chunks/{checkbox-DvwlGwWe.mjs.map → checkbox-Pr49U9F1.mjs.map} +1 -1
  41. package/dist/chunks/{chip-DcBji__g.cjs → chip-B4ol1yPk.cjs} +1 -1
  42. package/dist/chunks/{chip-DcBji__g.cjs.map → chip-B4ol1yPk.cjs.map} +1 -1
  43. package/dist/chunks/{chip-BGSUmnlO.mjs → chip-DdnBLdpl.mjs} +1 -1
  44. package/dist/chunks/{chip-BGSUmnlO.mjs.map → chip-DdnBLdpl.mjs.map} +1 -1
  45. package/dist/chunks/{chroma-grid-Cdeql_2C.mjs → chroma-grid-BAo6V5A7.mjs} +1 -1
  46. package/dist/chunks/{chroma-grid-Cdeql_2C.mjs.map → chroma-grid-BAo6V5A7.mjs.map} +1 -1
  47. package/dist/chunks/{chroma-grid-9E9j1s9I.cjs → chroma-grid-CIk0dsNS.cjs} +1 -1
  48. package/dist/chunks/{chroma-grid-9E9j1s9I.cjs.map → chroma-grid-CIk0dsNS.cjs.map} +1 -1
  49. package/dist/chunks/{color-palette-BLvDnCOD.cjs → color-palette-2TuEMkAn.cjs} +1 -1
  50. package/dist/chunks/{color-palette-BLvDnCOD.cjs.map → color-palette-2TuEMkAn.cjs.map} +1 -1
  51. package/dist/chunks/{color-palette-CXlCDiZz.mjs → color-palette-euKQMWlV.mjs} +1 -1
  52. package/dist/chunks/{color-palette-CXlCDiZz.mjs.map → color-palette-euKQMWlV.mjs.map} +1 -1
  53. package/dist/chunks/{combobox-BXu3s0dt.cjs → combobox-CwGubKTt.cjs} +2 -2
  54. package/dist/chunks/combobox-CwGubKTt.cjs.map +1 -0
  55. package/dist/chunks/{combobox-CjK-qG4k.mjs → combobox-DrFmkI0F.mjs} +2 -2
  56. package/dist/chunks/combobox-DrFmkI0F.mjs.map +1 -0
  57. package/dist/chunks/{data-table-DyEQn9Yj.mjs → data-table-Bo80m7qV.mjs} +8 -8
  58. package/dist/chunks/{data-table-DyEQn9Yj.mjs.map → data-table-Bo80m7qV.mjs.map} +1 -1
  59. package/dist/chunks/{data-table-9HELVsYR.cjs → data-table-W1sK5tkL.cjs} +8 -8
  60. package/dist/chunks/{data-table-9HELVsYR.cjs.map → data-table-W1sK5tkL.cjs.map} +1 -1
  61. package/dist/chunks/{date-picker-D8gaaMlJ.mjs → date-picker-CNPORxhv.mjs} +87 -17
  62. package/dist/chunks/date-picker-CNPORxhv.mjs.map +1 -0
  63. package/dist/chunks/{date-picker-W9om1j7A.cjs → date-picker-CZo68Fkl.cjs} +87 -17
  64. package/dist/chunks/date-picker-CZo68Fkl.cjs.map +1 -0
  65. package/dist/chunks/input-BWM6G7jq.cjs +117 -0
  66. package/dist/chunks/input-BWM6G7jq.cjs.map +1 -0
  67. package/dist/chunks/input-Bt_r_B_c.mjs +105 -0
  68. package/dist/chunks/input-Bt_r_B_c.mjs.map +1 -0
  69. package/dist/chunks/{multi-select-combobox-ELSH_Xr4.mjs → multi-select-combobox-D46M-AN9.mjs} +2 -2
  70. package/dist/chunks/multi-select-combobox-D46M-AN9.mjs.map +1 -0
  71. package/dist/chunks/{multi-select-combobox-UW0X15W7.cjs → multi-select-combobox-dS6bJE_e.cjs} +2 -2
  72. package/dist/chunks/multi-select-combobox-dS6bJE_e.cjs.map +1 -0
  73. package/dist/chunks/{otp-input-B6zzOEqw.cjs → otp-input-DSW9Ca_D.cjs} +2 -2
  74. package/dist/chunks/otp-input-DSW9Ca_D.cjs.map +1 -0
  75. package/dist/chunks/{otp-input-Bg4nQG6x.mjs → otp-input-DeAi4nJ_.mjs} +2 -2
  76. package/dist/chunks/otp-input-DeAi4nJ_.mjs.map +1 -0
  77. package/dist/chunks/{progress-bar-C9FZDrju.mjs → progress-bar-B9sy7WBT.mjs} +1 -1
  78. package/dist/chunks/{progress-bar-C9FZDrju.mjs.map → progress-bar-B9sy7WBT.mjs.map} +1 -1
  79. package/dist/chunks/{progress-bar-C1OvQ-NI.cjs → progress-bar-BdvQtpm3.cjs} +1 -1
  80. package/dist/chunks/{progress-bar-C1OvQ-NI.cjs.map → progress-bar-BdvQtpm3.cjs.map} +1 -1
  81. package/dist/chunks/select-B8UQ6Uq5.mjs +170 -0
  82. package/dist/chunks/select-B8UQ6Uq5.mjs.map +1 -0
  83. package/dist/chunks/select-CCUSMvfS.cjs +176 -0
  84. package/dist/chunks/select-CCUSMvfS.cjs.map +1 -0
  85. package/dist/chunks/stepper-D6qQbZdg.cjs +642 -0
  86. package/dist/chunks/stepper-D6qQbZdg.cjs.map +1 -0
  87. package/dist/chunks/stepper-DUknuW2E.mjs +618 -0
  88. package/dist/chunks/stepper-DUknuW2E.mjs.map +1 -0
  89. package/dist/chunks/{textarea-CU5C-Zw9.mjs → textarea-Blky_fLK.mjs} +2 -2
  90. package/dist/chunks/{textarea-CU5C-Zw9.mjs.map → textarea-Blky_fLK.mjs.map} +1 -1
  91. package/dist/chunks/{textarea-CAUsyu4-.cjs → textarea-ok_NlE2p.cjs} +2 -2
  92. package/dist/chunks/textarea-ok_NlE2p.cjs.map +1 -0
  93. package/dist/color-palette.cjs +1 -1
  94. package/dist/color-palette.mjs +1 -1
  95. package/dist/colors.css +3 -0
  96. package/dist/combobox.cjs +1 -1
  97. package/dist/combobox.mjs +1 -1
  98. package/dist/components/data-display/charts/AreaChart.d.ts.map +1 -1
  99. package/dist/components/data-display/charts/BarChart.d.ts +1 -0
  100. package/dist/components/data-display/charts/BarChart.d.ts.map +1 -1
  101. package/dist/components/data-display/charts/NeonLineChart.d.ts.map +1 -1
  102. package/dist/components/data-display/charts/PieChart.d.ts +18 -2
  103. package/dist/components/data-display/charts/PieChart.d.ts.map +1 -1
  104. package/dist/components/data-display/charts/PositiveNegativeBarChart.d.ts +21 -0
  105. package/dist/components/data-display/charts/PositiveNegativeBarChart.d.ts.map +1 -0
  106. package/dist/components/data-display/charts/StackedBarChart.d.ts.map +1 -1
  107. package/dist/components/data-display/charts/ThinBreakdownBar.d.ts +3 -0
  108. package/dist/components/data-display/charts/ThinBreakdownBar.d.ts.map +1 -1
  109. package/dist/components/data-display/charts/chartStyles.d.ts +24 -0
  110. package/dist/components/data-display/charts/chartStyles.d.ts.map +1 -0
  111. package/dist/components/data-display/charts/index.d.ts +2 -0
  112. package/dist/components/data-display/charts/index.d.ts.map +1 -1
  113. package/dist/components/forms/calendar/Calendar.d.ts.map +1 -1
  114. package/dist/components/forms/date-picker/DatePicker.d.ts.map +1 -1
  115. package/dist/components/forms/input/Input.d.ts.map +1 -1
  116. package/dist/components/forms/input/types.d.ts +5 -0
  117. package/dist/components/forms/input/types.d.ts.map +1 -1
  118. package/dist/components/forms/select/Select.d.ts.map +1 -1
  119. package/dist/components/forms/select/types.d.ts +7 -1
  120. package/dist/components/forms/select/types.d.ts.map +1 -1
  121. package/dist/components/navigation/stepper/Stepper1.d.ts +4 -0
  122. package/dist/components/navigation/stepper/Stepper1.d.ts.map +1 -0
  123. package/dist/components/navigation/stepper/Stepper2.d.ts +5 -0
  124. package/dist/components/navigation/stepper/Stepper2.d.ts.map +1 -0
  125. package/dist/components/navigation/stepper/index.d.ts +4 -1
  126. package/dist/components/navigation/stepper/index.d.ts.map +1 -1
  127. package/dist/components/navigation/stepper/types.d.ts +85 -0
  128. package/dist/components/navigation/stepper/types.d.ts.map +1 -1
  129. package/dist/data-table.cjs +1 -1
  130. package/dist/data-table.mjs +1 -1
  131. package/dist/date-picker.cjs +1 -1
  132. package/dist/date-picker.mjs +1 -1
  133. package/dist/docs.cjs +10 -0
  134. package/dist/docs.cjs.map +1 -1
  135. package/dist/docs.d.ts.map +1 -1
  136. package/dist/docs.mjs +10 -0
  137. package/dist/docs.mjs.map +1 -1
  138. package/dist/foundation.css +7 -0
  139. package/dist/index.cjs +23 -18
  140. package/dist/index.d.ts +5 -3
  141. package/dist/index.d.ts.map +1 -1
  142. package/dist/index.mjs +19 -19
  143. package/dist/input.cjs +1 -1
  144. package/dist/input.mjs +1 -1
  145. package/dist/multi-select-combobox.cjs +1 -1
  146. package/dist/multi-select-combobox.mjs +1 -1
  147. package/dist/otp-input.cjs +1 -1
  148. package/dist/otp-input.mjs +1 -1
  149. package/dist/progress-bar.cjs +1 -1
  150. package/dist/progress-bar.mjs +1 -1
  151. package/dist/select.cjs +1 -1
  152. package/dist/select.mjs +1 -1
  153. package/dist/stepper.cjs +5 -1
  154. package/dist/stepper.mjs +2 -2
  155. package/dist/textarea.cjs +1 -1
  156. package/dist/textarea.mjs +1 -1
  157. package/dist/tokens.css +11 -2
  158. package/package.json +4 -4
  159. package/dist/chunks/calendar-BarcG6x_.mjs.map +0 -1
  160. package/dist/chunks/calendar-xrGmvukr.cjs.map +0 -1
  161. package/dist/chunks/charts-BpElnsoR.cjs.map +0 -1
  162. package/dist/chunks/charts-DugYWvEf.mjs.map +0 -1
  163. package/dist/chunks/combobox-BXu3s0dt.cjs.map +0 -1
  164. package/dist/chunks/combobox-CjK-qG4k.mjs.map +0 -1
  165. package/dist/chunks/date-picker-D8gaaMlJ.mjs.map +0 -1
  166. package/dist/chunks/date-picker-W9om1j7A.cjs.map +0 -1
  167. package/dist/chunks/input-D9qZNqXV.cjs +0 -99
  168. package/dist/chunks/input-D9qZNqXV.cjs.map +0 -1
  169. package/dist/chunks/input-wNqevfQ4.mjs +0 -87
  170. package/dist/chunks/input-wNqevfQ4.mjs.map +0 -1
  171. package/dist/chunks/multi-select-combobox-ELSH_Xr4.mjs.map +0 -1
  172. package/dist/chunks/multi-select-combobox-UW0X15W7.cjs.map +0 -1
  173. package/dist/chunks/otp-input-B6zzOEqw.cjs.map +0 -1
  174. package/dist/chunks/otp-input-Bg4nQG6x.mjs.map +0 -1
  175. package/dist/chunks/select-D71tk6-I.mjs +0 -152
  176. package/dist/chunks/select-D71tk6-I.mjs.map +0 -1
  177. package/dist/chunks/select-WC_kPqUP.cjs +0 -158
  178. package/dist/chunks/select-WC_kPqUP.cjs.map +0 -1
  179. package/dist/chunks/stepper-D4yQsQB0.mjs +0 -261
  180. package/dist/chunks/stepper-D4yQsQB0.mjs.map +0 -1
  181. package/dist/chunks/stepper-fY-Sx72k.cjs +0 -267
  182. package/dist/chunks/stepper-fY-Sx72k.cjs.map +0 -1
  183. package/dist/chunks/textarea-CAUsyu4-.cjs.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"charts-DbxyHtlX.cjs","names":[],"sources":["../../src/components/data-display/charts/chartPalette.ts","../../src/components/data-display/charts/chartStyles.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/PositiveNegativeBarChart.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","import React from \"react\";\n\nexport const chartTooltipContentStyle: React.CSSProperties = {\n background:\n \"linear-gradient(135deg, color-mix(in srgb, var(--ds-color-bg-surface) 88%, transparent), color-mix(in srgb, var(--ds-color-bg-elevated) 74%, transparent))\",\n border:\n \"1px solid color-mix(in srgb, var(--ds-color-border-strong) 72%, transparent)\",\n borderRadius: \"12px\",\n backdropFilter: \"blur(18px) saturate(180%)\",\n WebkitBackdropFilter: \"blur(18px) saturate(180%)\",\n boxShadow:\n \"0 18px 40px color-mix(in srgb, var(--ds-color-fg) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ds-color-bg-surface) 36%, transparent)\",\n color: \"var(--ds-color-fg)\",\n padding: \"0.75rem 0.875rem\",\n};\n\nexport const chartTooltipLabelStyle: React.CSSProperties = {\n color: \"var(--ds-color-fg)\",\n fontSize: \"0.8125rem\",\n fontWeight: 600,\n marginBottom: \"0.375rem\",\n};\n\nexport const chartTooltipItemStyle: React.CSSProperties = {\n color: \"var(--ds-color-fg)\",\n fontSize: \"0.8125rem\",\n fontWeight: 500,\n padding: 0,\n};\n\nexport const chartTooltipWrapperStyle: React.CSSProperties = {\n outline: \"none\",\n};\n\nexport const chartLegendTextStyle: React.CSSProperties = {\n fontSize: \"12px\",\n color: \"var(--ds-color-fg-muted)\",\n};\n\nexport const chartBandHoverCursorStyle = {\n fill: \"color-mix(in srgb, var(--ds-color-accent) 12%, transparent)\",\n stroke:\n \"color-mix(in srgb, var(--ds-color-accent) 34%, var(--ds-color-border-strong))\",\n strokeWidth: 1,\n};\n\nexport const chartLineHoverCursorStyle = {\n stroke:\n \"color-mix(in srgb, var(--ds-color-accent) 42%, var(--ds-color-border-strong))\",\n strokeWidth: 1.25,\n strokeDasharray: \"4 4\",\n};\n\nexport const getChartActiveDotStyle = (\n strokeColor: string,\n): {\n fill: string;\n r: number;\n stroke: string;\n strokeWidth: number;\n} => ({\n r: 6,\n fill: \"color-mix(in srgb, var(--ds-color-bg-surface) 90%, transparent)\",\n stroke: strokeColor,\n strokeWidth: 2.5,\n});\n\nexport const chartPillTooltipStyle: React.CSSProperties = {\n background:\n \"linear-gradient(135deg, color-mix(in srgb, var(--ds-color-bg-surface) 90%, transparent), color-mix(in srgb, var(--ds-color-bg-elevated) 76%, transparent))\",\n border:\n \"1px solid color-mix(in srgb, var(--ds-color-border-strong) 70%, transparent)\",\n boxShadow:\n \"0 14px 32px color-mix(in srgb, var(--ds-color-fg) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ds-color-bg-surface) 34%, transparent)\",\n backdropFilter: \"blur(16px) saturate(170%)\",\n WebkitBackdropFilter: \"blur(16px) saturate(170%)\",\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\";\nimport {\n chartLineHoverCursorStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n getChartActiveDotStyle,\n} from \"./chartStyles\";\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={chartTooltipContentStyle}\n cursor={chartLineHoverCursorStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\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={getChartActiveDotStyle(normalizedStop2)}\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\";\nimport {\n chartBandHoverCursorStyle,\n chartLegendTextStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n} from \"./chartStyles\";\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 contentStyle={chartTooltipContentStyle}\n cursor={chartBandHoverCursorStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n />\n <Legend\n iconType=\"circle\"\n wrapperStyle={{\n ...chartLegendTextStyle,\n paddingTop: \"20px\",\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\";\nimport { chartPillTooltipStyle } from \"./chartStyles\";\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 showSummary?: boolean;\n summaryLabel?: string;\n valueFormatter?: (value: number) => string;\n}\n\nconst defaultValueFormatter = (value: number): string =>\n new Intl.NumberFormat().format(value);\n\nexport const ThinBreakdownBar: React.FC<ThinBreakdownBarProps> = ({\n data: segments,\n className = \"\",\n showLabels = true,\n showSummary = false,\n summaryLabel = \"Total\",\n valueFormatter = defaultValueFormatter,\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 const totalValue = React.useMemo(\n () => segments.reduce((sum, item) => sum + item.value, 0),\n [segments],\n );\n const summaryTitle = activeSegment?.label ?? summaryLabel;\n const summaryValue = activeSegment?.value ?? totalValue;\n const summaryMeta = activeSegment\n ? `${Math.round(activeSegment.widthPercent)}% of total`\n : `${segments.length} segments`;\n\n return (\n <div className={`w-full flex flex-col gap-3 ${className}`}>\n {showSummary && (activeSegment || totalValue > 0) ? (\n <div className=\"flex items-start justify-between gap-4 rounded-xl border border-border/70 bg-background/70 px-4 py-3 backdrop-blur-md\">\n <div className=\"min-w-0\">\n <p\n className=\"truncate text-[11px] font-medium tracking-[0.16em] text-muted-foreground uppercase transition-colors duration-200\"\n style={activeSegment ? { color: activeSegment.color } : undefined}\n >\n {summaryTitle}\n </p>\n <p className=\"mt-1 text-xs text-muted-foreground\">{summaryMeta}</p>\n </div>\n <p\n className=\"text-right text-lg font-semibold leading-none text-foreground transition-colors duration-200\"\n style={activeSegment ? { color: activeSegment.color } : undefined}\n >\n {valueFormatter(summaryValue)}\n </p>\n </div>\n ) : null}\n\n <div className=\"relative\">\n {activeSegment && !showSummary && (\n <div\n className=\"pointer-events-none absolute -top-10 z-10 -translate-x-1/2 rounded-full px-2.5 py-1 text-[11px] font-medium text-foreground\"\n style={{\n ...chartPillTooltipStyle,\n left: `${activeSegment.centerPercent}%`,\n }}\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\";\nimport {\n chartLineHoverCursorStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n getChartActiveDotStyle,\n} from \"./chartStyles\";\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={chartTooltipContentStyle}\n cursor={chartLineHoverCursorStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n />\n\n {normalizedCategories.map((cat) => (\n <Area\n key={cat.key}\n activeDot={getChartActiveDotStyle(cat.color)}\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\";\nimport {\n chartBandHoverCursorStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n} from \"./chartStyles\";\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 maxBarSize?: number;\n}\n\nexport const BarChart: React.FC<BarChartProps> = ({\n data,\n categories,\n height = 300,\n className = \"\",\n layout = \"horizontal\",\n maxBarSize,\n}) => {\n const resolvedMaxBarSize = maxBarSize ?? (layout === \"horizontal\" ? 40 : 22);\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 barCategoryGap={data.length <= 4 ? \"28%\" : \"18%\"}\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 contentStyle={chartTooltipContentStyle}\n cursor={chartBandHoverCursorStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n />\n\n {normalizedCategories.map((cat) => (\n <Bar\n key={cat.key}\n dataKey={cat.key}\n fill={cat.color}\n maxBarSize={resolvedMaxBarSize}\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 Bar,\n BarChart as RechartsBarChart,\n CartesianGrid,\n Cell,\n Rectangle,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\";\n\nimport { getChartColorVar, normalizeChartColorValue } from \"./chartPalette\";\nimport {\n chartBandHoverCursorStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n} from \"./chartStyles\";\n\nexport interface PositiveNegativeBarChartData {\n name: string;\n value: number;\n}\n\ninterface PositiveNegativeBarChartProps {\n data: PositiveNegativeBarChartData[];\n height?: number | string;\n className?: string;\n layout?: \"horizontal\" | \"vertical\";\n positiveColor?: string;\n negativeColor?: string;\n neutralColor?: string;\n showGrid?: boolean;\n seriesLabel?: string;\n valueFormatter?: (value: number) => string;\n tickFormatter?: (value: number) => string;\n}\n\nconst defaultValueFormatter = (value: number): string =>\n new Intl.NumberFormat().format(value);\n\nconst getBarRadius = (\n value: number,\n layout: \"horizontal\" | \"vertical\",\n): [number, number, number, number] => {\n if (value === 0) {\n return [6, 6, 6, 6];\n }\n\n if (layout === \"horizontal\") {\n return value > 0 ? [6, 6, 0, 0] : [0, 0, 6, 6];\n }\n\n return value > 0 ? [0, 6, 6, 0] : [6, 0, 0, 6];\n};\n\nexport const PositiveNegativeBarChart: React.FC<\n PositiveNegativeBarChartProps\n> = ({\n data,\n height = 320,\n className = \"\",\n layout = \"horizontal\",\n positiveColor = getChartColorVar(3),\n negativeColor = getChartColorVar(5),\n neutralColor = getChartColorVar(15),\n showGrid = true,\n seriesLabel = \"Variance\",\n valueFormatter = defaultValueFormatter,\n tickFormatter,\n}) => {\n const resolvedPositiveColor = React.useMemo(\n () => normalizeChartColorValue(positiveColor) ?? getChartColorVar(3),\n [positiveColor],\n );\n const resolvedNegativeColor = React.useMemo(\n () => normalizeChartColorValue(negativeColor) ?? getChartColorVar(5),\n [negativeColor],\n );\n const resolvedNeutralColor = React.useMemo(\n () => normalizeChartColorValue(neutralColor) ?? getChartColorVar(15),\n [neutralColor],\n );\n\n const resolvedTickFormatter = React.useCallback(\n (value: number) => tickFormatter?.(value) ?? valueFormatter(value),\n [tickFormatter, valueFormatter],\n );\n\n const getBarFill = React.useCallback(\n (value: number) => {\n if (value > 0) {\n return resolvedPositiveColor;\n }\n\n if (value < 0) {\n return resolvedNegativeColor;\n }\n\n return resolvedNeutralColor;\n },\n [resolvedNegativeColor, resolvedNeutralColor, resolvedPositiveColor],\n );\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 {showGrid ? (\n <CartesianGrid\n strokeDasharray=\"3 3\"\n horizontal={layout === \"horizontal\"}\n vertical={layout === \"vertical\"}\n stroke=\"var(--ds-color-border)\"\n opacity={0.35}\n />\n ) : null}\n\n {layout === \"horizontal\" ? (\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 tickFormatter={resolvedTickFormatter}\n dx={-10}\n />\n <ReferenceLine\n y={0}\n stroke=\"var(--ds-color-border-strong)\"\n strokeOpacity={0.95}\n />\n </>\n ) : (\n <>\n <XAxis\n type=\"number\"\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n tickFormatter={resolvedTickFormatter}\n dy={10}\n />\n <YAxis\n dataKey=\"name\"\n type=\"category\"\n axisLine={false}\n tickLine={false}\n tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n width={96}\n dx={-6}\n />\n <ReferenceLine\n x={0}\n stroke=\"var(--ds-color-border-strong)\"\n strokeOpacity={0.95}\n />\n </>\n )}\n\n <Tooltip\n contentStyle={chartTooltipContentStyle}\n cursor={chartBandHoverCursorStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n formatter={(value) => [\n valueFormatter(Number(value ?? 0)),\n seriesLabel,\n ]}\n />\n\n <Bar\n dataKey=\"value\"\n radius={6}\n barSize={layout === \"horizontal\" ? 30 : 22}\n shape={(props) => {\n const barValue = Array.isArray(props.value)\n ? props.value[1] - props.value[0]\n : props.value;\n\n return (\n <Rectangle {...props} radius={getBarRadius(barValue, layout)} />\n );\n }}\n >\n {data.map((entry) => (\n <Cell\n key={`${entry.name}-${entry.value}`}\n fill={getBarFill(entry.value)}\n />\n ))}\n </Bar>\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\";\nimport {\n chartLegendTextStyle,\n chartTooltipContentStyle,\n chartTooltipItemStyle,\n chartTooltipLabelStyle,\n chartTooltipWrapperStyle,\n} from \"./chartStyles\";\n\nexport interface PieChartData {\n name: string;\n value: number;\n}\n\nexport interface PieChartCenterContentContext {\n activeColor?: string;\n activeIndex: number | null;\n activeSlice: PieChartData | null;\n data: PieChartData[];\n displayLabel: string;\n displayPercentageLabel: string;\n displayValue: number;\n normalizedColors: string[];\n totalValue: number;\n valueFormatter: (value: number) => string;\n variant: \"pie\" | \"donut\";\n}\n\nexport interface PieChartProps {\n data: PieChartData[];\n colors: string[];\n height?: number | string;\n className?: string;\n variant?: \"pie\" | \"donut\";\n showCenterSummary?: boolean;\n centerLabel?: string;\n valueFormatter?: (value: number) => string;\n renderCenterContent?: (\n context: PieChartCenterContentContext,\n ) => React.ReactNode;\n}\n\nconst defaultValueFormatter = (value: number): string =>\n new Intl.NumberFormat().format(value);\n\nexport const PieChart: React.FC<PieChartProps> = ({\n data,\n colors,\n height = 300,\n className = \"\",\n variant = \"donut\",\n showCenterSummary = variant === \"donut\",\n centerLabel = \"Total\",\n valueFormatter = defaultValueFormatter,\n renderCenterContent,\n}) => {\n const [activeIndex, setActiveIndex] = React.useState<number | null>(null);\n const innerRadius = variant === \"donut\" ? \"60%\" : 0;\n const normalizedColors = React.useMemo(\n () => normalizeChartColors(colors),\n [colors],\n );\n const totalValue = React.useMemo(\n () => data.reduce((sum, item) => sum + item.value, 0),\n [data],\n );\n const activeSlice =\n activeIndex !== null && activeIndex >= 0 && activeIndex < data.length\n ? data[activeIndex]\n : null;\n const activePercentage =\n activeSlice && totalValue > 0\n ? `${Math.round((activeSlice.value / totalValue) * 100)}% of total`\n : `${data.length} categories`;\n const displayLabel = activeSlice?.name ?? centerLabel;\n const displayValue = activeSlice?.value ?? totalValue;\n const activeColor =\n activeIndex !== null\n ? normalizedColors[activeIndex % normalizedColors.length]\n : undefined;\n const centerContentContext: PieChartCenterContentContext = {\n activeColor,\n activeIndex,\n activeSlice,\n data,\n displayLabel,\n displayPercentageLabel: activePercentage,\n displayValue,\n normalizedColors,\n totalValue,\n valueFormatter,\n variant,\n };\n const shouldRenderCenterContent =\n variant === \"donut\" && (showCenterSummary || Boolean(renderCenterContent));\n\n return (\n <div className={`relative 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 onMouseEnter={(_data: unknown, index: number) =>\n setActiveIndex(index)\n }\n onMouseLeave={() => setActiveIndex(null)}\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={chartTooltipContentStyle}\n itemStyle={chartTooltipItemStyle}\n labelStyle={chartTooltipLabelStyle}\n wrapperStyle={chartTooltipWrapperStyle}\n />\n\n <Legend iconType=\"circle\" wrapperStyle={chartLegendTextStyle} />\n </RechartsPieChart>\n </ResponsiveContainer>\n\n {shouldRenderCenterContent ? (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n {renderCenterContent ? (\n renderCenterContent(centerContentContext)\n ) : (\n <div className=\"flex max-w-[42%] flex-col items-center text-center\">\n <p className=\"text-[11px] font-medium tracking-[0.16em] text-muted-foreground uppercase\">\n {displayLabel}\n </p>\n <p className=\"mt-1 text-2xl font-semibold leading-none text-foreground sm:text-3xl\">\n {valueFormatter(displayValue)}\n </p>\n <p className=\"mt-2 text-xs leading-tight text-muted-foreground\">\n {activePercentage}\n </p>\n </div>\n )}\n </div>\n ) : null}\n </div>\n );\n};\n"],"mappings":"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"}
@@ -56,4 +56,4 @@ Object.defineProperty(exports, "Checkbox", {
56
56
  }
57
57
  });
58
58
 
59
- //# sourceMappingURL=checkbox-yHuSw-hV.cjs.map
59
+ //# sourceMappingURL=checkbox-CxOcjoGP.cjs.map
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"checkbox-CxOcjoGP.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"}
@@ -50,4 +50,4 @@ Checkbox.displayName = "Checkbox";
50
50
  //#endregion
51
51
  export { Checkbox as t };
52
52
 
53
- //# sourceMappingURL=checkbox-DvwlGwWe.mjs.map
53
+ //# sourceMappingURL=checkbox-Pr49U9F1.mjs.map
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"checkbox-Pr49U9F1.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"}
@@ -142,4 +142,4 @@ Object.defineProperty(exports, "Chip", {
142
142
  }
143
143
  });
144
144
 
145
- //# sourceMappingURL=chip-DcBji__g.cjs.map
145
+ //# sourceMappingURL=chip-B4ol1yPk.cjs.map
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"chip-B4ol1yPk.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"}
@@ -136,4 +136,4 @@ Chip.displayName = "Chip";
136
136
  //#endregion
137
137
  export { Chip as t };
138
138
 
139
- //# sourceMappingURL=chip-BGSUmnlO.mjs.map
139
+ //# sourceMappingURL=chip-DdnBLdpl.mjs.map
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"chip-DdnBLdpl.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"}
@@ -212,4 +212,4 @@ ChromaGrid.displayName = "ChromaGrid";
212
212
  //#endregion
213
213
  export { ChromaGrid as t };
214
214
 
215
- //# sourceMappingURL=chroma-grid-Cdeql_2C.mjs.map
215
+ //# sourceMappingURL=chroma-grid-BAo6V5A7.mjs.map
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"chroma-grid-BAo6V5A7.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":"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"}
@@ -218,4 +218,4 @@ Object.defineProperty(exports, "ChromaGrid", {
218
218
  }
219
219
  });
220
220
 
221
- //# sourceMappingURL=chroma-grid-9E9j1s9I.cjs.map
221
+ //# sourceMappingURL=chroma-grid-CIk0dsNS.cjs.map
@@ -1 +1 @@
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":";;;;;;AAKA,IAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR;AAED,IAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAM,gBACJ,WACA,OACA,iBACG;CACH,MAAM,QAAS,QAAQ,eAAgB;AAEvC,SAAQ,WAAR;EACE,KAAK,OACH,QAAO;GACL,SAAS;IAAE,SAAS;IAAG,GAAG;IAAI,SAAS;IAAK;GAC5C,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG,SAAS;IAAG;GACzC,YAAY;IAAE;IAAO,UAAU;IAAK,MAAM;KAAC;KAAM;KAAG;KAAM;KAAE;IAAW;GACxE;EACH,KAAK,QACH,QAAO;GACL,SAAS;IAAE,OAAO;IAAK,SAAS;IAAG;GACnC,SAAS;IAAE,OAAO;IAAG,SAAS;IAAG;GACjC,YAAY;IACV;IACA,UAAU;IACV,MAAM;IACN,WAAW;IACZ;GACF;EACH,KAAK,SACH,QAAO;GACL,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,YAAY;IAAE;IAAO,UAAU;IAAK;GACrC;EACH,KAAK,QACH,QAAO;GACL,SAAS;IAAE,OAAO;IAAG,SAAS;IAAG;GACjC,SAAS;IAAE,OAAO;IAAG,SAAS;IAAG;GACjC,YAAY;IACV;IACA,UAAU;IACV,MAAM;IACN,WAAW;IACX,SAAS;IACV;GACF;EACH,QACE,QAAO,EAAE;;;AAIf,IAAM,kBAAkB,WAAmB;AACzC,SAAQ,QAAR;EACE,KAAK,OACH,QAAO;GAAE,GAAG;GAAI,YAAY,EAAE,UAAU,IAAK;GAAE;EACjD,KAAK,OACH,QAAO;GACL,WACE;GACF,YAAY,EAAE,UAAU,IAAK;GAC9B;EACH,KAAK,QACH,QAAO;GAAE,OAAO;GAAM,YAAY,EAAE,UAAU,IAAK;GAAE;EACvD,KAAK,OACH,QAAO;GAAE,SAAS;GAAG,SAAS;GAAG,YAAY,EAAE,UAAU,IAAK;GAAE;EAClE,QACE,QAAO,EAAE;;;AAgBf,IAAM,YAAY,EAChB,MACA,OACA,WACA,cACA,aACA,SACA,cACA,WACA,gBACmB;CACnB,MAAM,WAAA,GAAA,MAAA,QAAiC,KAAK;CAC5C,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,UAA6B;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAClE,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAyB,MAAM;CAEjD,MAAM,QAAQ,KAAK,SAAS,cAAc,QAAQ,cAAc;CAChE,MAAM,iBAAiB,aAAa,WAAW,OAAO,aAAa;CACnE,MAAM,aAAa,eAAe,YAAY;CAE9C,MAAM,mBAAmB,MAAwB;AAC/C,MAAI,CAAC,QAAQ,WAAW,CAAC,UAAW;EACpC,MAAM,OAAO,QAAQ,QAAQ,uBAAuB;AACpD,mBAAiB;GACf,GAAG,EAAE,UAAU,KAAK;GACpB,GAAG,EAAE,UAAU,KAAK;GACrB,CAAC;;CAGJ,MAAM,WACJ,KAAK,QAAQ,KAAK,OAAO,IACrB;EAAE,YAAY,QAAQ,KAAK;EAAQ,SAAS,QAAQ,KAAK;EAAQ,GACjE,EAAE;CAER,MAAM,gBAAgB;EACpB,OAAO;GACL,iBAAiB;GACjB,gBAAgB;GAChB,sBAAsB;GACvB;EACD,OAAO,EAAE;EACT,UAAU,EAAE,YAAY,OAAO;EAChC;AAED,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAA,OAAO,KAAR;EACE,KAAK;EACL,WAAW,cAAA,gBACT,6DACA,gBAAgB,eAChB,YAAY,WAAW,+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,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,WAAU;IACV,OAAO,EACL,YAAY,mCAAmC,cAAc,EAAE,KAAK,cAAc,EAAE,8CACrF;IACD,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIH,YAAY,cACX,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,iDAAkD,CAAA;GAInE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAK,QACJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAU;gBACZ,KAAK;MACF,CAAA;KAEP,KAAK,SACJ,iBAAA,GAAA,kBAAA,KAAC,MAAD;MAAI,WAAU;gBACX,KAAK;MACH,CAAA;KAEN,KAAK,eACJ,iBAAA,GAAA,kBAAA,KAAC,KAAD;MAAG,WAAU;gBACV,KAAK;MACJ,CAAA;KAEL,KAAK;KACF;;GACK;;;AAIjB,IAAa,cAAc,EACzB,OACA,WACA,UAAU,GACV,MAAM,IACN,YAAY,KACZ,YAAY,QACZ,eAAe,KACf,cAAc,QACd,UAAU,YACV,eAAe,MACf,YAAY,MACZ,YACqB;AACrB,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,WAAW,cAAA,gBAAgB,eAAe,UAAU;EACpD,OAAO;GACL,qBAAqB,UAAU,QAAQ;GACvC,KAAK,GAAG,IAAI;GACZ,GAAG;GACJ;YAEA,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAAC,UAAD;GAEQ;GACC;GACI;GACG;GACD;GACJ;GACK;GACH;GACA;GACX,EAVK,KAAK,GAUV,CACF;EACE,CAAA;;AAIV,WAAW,cAAc"}
1
+ {"version":3,"file":"chroma-grid-CIk0dsNS.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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"}
@@ -751,4 +751,4 @@ Object.defineProperty(exports, "ColorPalette", {
751
751
  }
752
752
  });
753
753
 
754
- //# sourceMappingURL=color-palette-BLvDnCOD.cjs.map
754
+ //# sourceMappingURL=color-palette-2TuEMkAn.cjs.map