npm - erp-pro-ui - Versions diffs - 0.1.4 → 0.1.6 - Mend

erp-pro-ui 0.1.4 → 0.1.6

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 (484) hide show

package/dist/chunks/charts-CZEYcr6X.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"charts-CZEYcr6X.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/MiniNeonSparkline.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 { Area, AreaChart, Line, ResponsiveContainer, Tooltip } from \"recharts\";\n\nimport { getChartColorVar, normalizeChartColorValue } from \"./chartPalette\";\n\nexport interface MiniNeonSparklinePoint {\n label: string;\n value: number;\n}\n\nexport type MiniNeonSparklineTone =\n | \"default\"\n | \"success\"\n | \"warning\"\n | \"danger\"\n | \"info\";\n\nexport interface MiniNeonSparklineProps {\n data: MiniNeonSparklinePoint[];\n height?: number;\n strokeWidth?: number;\n className?: string;\n showArea?: boolean;\n showTooltip?: boolean;\n tone?: MiniNeonSparklineTone;\n}\n\nconst toneColorMap: Record<MiniNeonSparklineTone, string> = {\n default: getChartColorVar(1),\n success: \"var(--ds-color-success)\",\n warning: \"var(--ds-color-warning)\",\n danger: \"var(--ds-color-danger)\",\n info: \"var(--ds-color-info)\",\n};\n\nconst tooltipContentStyle: React.CSSProperties = {\n borderRadius: \"12px\",\n border: \"1px solid var(--ds-border-2)\",\n background: \"var(--ds-surface-1)\",\n color: \"var(--ds-text-1)\",\n fontSize: \"12px\",\n};\n\nexport const MiniNeonSparkline: React.FC<MiniNeonSparklineProps> = ({\n data,\n height = 46,\n strokeWidth = 2,\n className = \"\",\n showArea = true,\n showTooltip = true,\n tone = \"default\",\n}) => {\n const resolvedTone = React.useMemo(\n () => normalizeChartColorValue(toneColorMap[tone]) ?? toneColorMap.default,\n [tone],\n );\n\n const chartGradientId = React.useId();\n const chartGlowId = React.useId();\n\n return (\n <div className={`ui:relative ui:w-full ${className}`} style={{ height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <AreaChart\n data={data}\n margin={{ top: 4, right: 2, left: 2, bottom: 4 }}\n >\n <defs>\n <linearGradient id={chartGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={resolvedTone} stopOpacity={0.35} />\n <stop offset=\"100%\" stopColor={resolvedTone} stopOpacity={0.02} />\n </linearGradient>\n <filter\n id={chartGlowId}\n x=\"-20%\"\n y=\"-20%\"\n width=\"140%\"\n height=\"140%\"\n >\n <feDropShadow\n dx=\"0\"\n dy=\"2\"\n stdDeviation=\"3\"\n floodColor={resolvedTone}\n floodOpacity=\"0.45\"\n />\n </filter>\n </defs>\n\n {showArea ? (\n <Area\n type=\"monotone\"\n dataKey=\"value\"\n stroke=\"none\"\n fill={`url(#${chartGradientId})`}\n />\n ) : null}\n\n <Line\n type=\"monotone\"\n dataKey=\"value\"\n stroke={resolvedTone}\n strokeWidth={strokeWidth}\n dot={false}\n isAnimationActive={false}\n filter={`url(#${chartGlowId})`}\n />\n\n {showTooltip ? (\n <Tooltip\n contentStyle={tooltipContentStyle}\n labelStyle={{ color: \"var(--ds-text-2)\", marginBottom: \"4px\" }}\n itemStyle={{ color: \"var(--ds-text-1)\", fontWeight: 600 }}\n formatter={(value) => [String(value ?? \"\"), \"Value\"]}\n />\n ) : null}\n </AreaChart>\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 { TruncatedText } from \"../../typography/truncated-text\";\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-ds-border-2/70 bg-ds-canvas/70 px-4 py-3 backdrop-blur-md\">\n <div className=\"min-w-0\">\n <TruncatedText\n as=\"p\"\n showTitleOnHover\n className=\"truncate text-[11px] font-medium tracking-[0.16em] text-ds-2 uppercase transition-colors duration-200\"\n style={activeSegment ? { color: activeSegment.color } : undefined}\n >\n {summaryTitle}\n </TruncatedText>\n <p className=\"mt-1 text-xs text-ds-2\">{summaryMeta}</p>\n </div>\n <p\n className=\"text-right text-lg font-semibold leading-none text-ds-1 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-ds-1\"\n style={{\n ...chartPillTooltipStyle,\n left: `${activeSegment.centerPercent}%`,\n }}\n >\n <span>{activeSegment.label}</span>\n <span className=\"mx-1 text-ds-2\">•</span>\n <span style={{ color: activeSegment.color }}>\n {activeSegment.value}\n </span>\n </div>\n )}\n\n <div className=\"rounded-full bg-ds-surface-2/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-ds-2 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-ds-2 uppercase\">\n {displayLabel}\n </p>\n <p className=\"mt-1 text-2xl font-semibold leading-none text-ds-1 sm:text-3xl\">\n {valueFormatter(displayValue)}\n </p>\n <p className=\"mt-2 text-xs leading-tight text-ds-2\">\n {activePercentage}\n </p>\n </div>\n )}\n </div>\n ) : null}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/chunks/{checkbox-Pr49U9F1.mjs → checkbox-DjGpvMyo.mjs} RENAMED Viewed

@@ -1,14 +1,14 @@
 import { forwardRef, useId } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/forms/checkbox/Checkbox.tsx
 var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
 var colorClasses = {
-	red: "checked:bg-[var(--ds-color-danger)]",
-	blue: "checked:bg-[var(--ds-color-info)]",
-	green: "checked:bg-[var(--ds-color-success)]",
-	yellow: "checked:bg-[var(--ds-color-warning)]",
-	teal: "checked:bg-[var(--ds-brand-teal)]",
-	primary: "checked:bg-accent"
+	red: "checked:bg-ds-state-danger",
+	blue: "checked:bg-ds-state-info",
+	green: "checked:bg-ds-state-success",
+	yellow: "checked:bg-ds-state-warning",
+	teal: "checked:bg-ds-brand-teal",
+	primary: "checked:bg-ds-accent"
 };
 var Checkbox = forwardRef(({ className = "", label, error, id, extra = "", color = "primary", ...props }, ref) => {
 	const generatedId = useId();
@@ -16,7 +16,7 @@ var Checkbox = forwardRef(({ className = "", label, error, id, extra = "", color
 	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")`;
 	const isPredefinedColor = color in colorClasses;
 	const customColorStyle = !isPredefinedColor ? color : void 0;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: `
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", { children: `
           .checkbox-custom-${checkboxId}:checked {
             background-image: ${checkmarkIcon};
             background-size: 70%;
@@ -31,16 +31,16 @@ var Checkbox = forwardRef(({ className = "", label, error, id, extra = "", color
 				ref,
 				type: "checkbox",
 				id: checkboxId,
-				className: `checkbox-custom-${checkboxId} peer relative flex h-5 min-h-[20px] w-5 min-w-[20px] appearance-none items-center justify-center rounded-md border border-gray-300 transition duration-200 outline-none checked:border-none checked:text-white hover:cursor-pointer dark:border-white/30 ${isPredefinedColor ? colorClasses[color] : ""} ${error ? "border-destructive" : ""} ${extra} ${className}`,
+				className: `checkbox-custom-${checkboxId} peer relative flex h-5 min-h-[20px] w-5 min-w-[20px] appearance-none items-center justify-center rounded-md border border-ds-border-field transition duration-200 outline-none checked:border-none checked:text-ds-on-accent hover:cursor-pointer ${isPredefinedColor ? colorClasses[color] : ""} ${error ? "border-ds-state-error-border" : ""} ${extra} ${className}`,
 				...props
 			}),
 			label && /* @__PURE__ */ jsx("label", {
 				htmlFor: checkboxId,
-				className: "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
+				className: "text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
 				children: label
 			}),
 			error && /* @__PURE__ */ jsx("p", {
-				className: "text-sm font-medium text-destructive mt-1",
+				className: "mt-1 text-sm font-medium text-ds-state-error-text",
 				children: error
 			})
 		]
@@ -50,4 +50,4 @@ Checkbox.displayName = "Checkbox";
 //#endregion
 export { Checkbox as t };
-//# sourceMappingURL=checkbox-Pr49U9F1.mjs.map
+//# sourceMappingURL=checkbox-DjGpvMyo.mjs.map

package/dist/chunks/checkbox-DjGpvMyo.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"checkbox-DjGpvMyo.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-ds-state-danger\",\n blue: \"checked:bg-ds-state-info\",\n green: \"checked:bg-ds-state-success\",\n yellow: \"checked:bg-ds-state-warning\",\n teal: \"checked:bg-ds-brand-teal\",\n primary: \"checked:bg-ds-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-ds-border-field transition duration-200 outline-none checked:border-none checked:text-ds-on-accent hover:cursor-pointer ${\n isPredefinedColor\n ? colorClasses[color as keyof typeof colorClasses]\n : \"\"\n } ${error ? \"border-ds-state-error-border\" : \"\"} ${extra} ${className}`}\n {...props}\n />\n {label && (\n <label\n htmlFor={checkboxId}\n className=\"text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer\"\n >\n {label}\n </label>\n )}\n {error && (\n <p className=\"mt-1 text-sm font-medium text-ds-state-error-text\">\n {error}\n </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,YAAA,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,qPACvC,oBACI,aAAa,SACb,GACL,GAAG,QAAQ,iCAAiC,GAAG,GAAG,MAAM,GAAG;IAC5D,GAAI;IACJ,CAAA;GACD,SACC,oBAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,oBAAC,KAAD;IAAG,WAAU;cACV;IACC,CAAA;GAEF;IACL,EAAA,CAAA;EAGR;AAED,SAAS,cAAc"}

package/dist/chunks/{checkbox-CxOcjoGP.cjs → checkbox-NM_iPd6S.cjs} RENAMED Viewed

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

package/dist/chunks/checkbox-NM_iPd6S.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"checkbox-NM_iPd6S.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-ds-state-danger\",\n blue: \"checked:bg-ds-state-info\",\n green: \"checked:bg-ds-state-success\",\n yellow: \"checked:bg-ds-state-warning\",\n teal: \"checked:bg-ds-brand-teal\",\n primary: \"checked:bg-ds-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-ds-border-field transition duration-200 outline-none checked:border-none checked:text-ds-on-accent hover:cursor-pointer ${\n isPredefinedColor\n ? colorClasses[color as keyof typeof colorClasses]\n : \"\"\n } ${error ? \"border-ds-state-error-border\" : \"\"} ${extra} ${className}`}\n {...props}\n />\n {label && (\n <label\n htmlFor={checkboxId}\n className=\"text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer\"\n >\n {label}\n </label>\n )}\n {error && (\n <p className=\"mt-1 text-sm font-medium text-ds-state-error-text\">\n {error}\n </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,qPACvC,oBACI,aAAa,SACb,GACL,GAAG,QAAQ,iCAAiC,GAAG,GAAG,MAAM,GAAG;IAC5D,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;cACV;IACC,CAAA;GAEF;IACL,EAAA,CAAA;EAGR;AAED,SAAS,cAAc"}

package/dist/chunks/chip-BY83_HK7.cjs ADDED Viewed

@@ -0,0 +1,203 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_truncated_text = require("./truncated-text-istgJRUq.cjs");
+const require_icons = require("./icons-CRanVZB1.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/data-display/chip/Chip.tsx
+var sizeStyles = {
+	sm: "px-2.5 py-1 text-xs gap-1.5",
+	md: "px-3 py-1.5 text-sm gap-2",
+	lg: "px-4 py-2 text-base gap-2.5"
+};
+var dotSizeStyles = {
+	sm: "w-1.5 h-1.5",
+	md: "w-2 h-2",
+	lg: "w-2.5 h-2.5"
+};
+var iconSizeStyles = {
+	sm: "w-3.5 h-3.5",
+	md: "w-4 h-4",
+	lg: "w-5 h-5"
+};
+var colorStyles = {
+	filled: {
+		default: "bg-ds-surface-2 text-ds-1 shadow-sm border border-ds-border-2",
+		primary: "bg-ds-accent text-ds-on-accent shadow-md shadow-ds-accent/25 border border-ds-border-accent",
+		secondary: "bg-ds-accent-subtle text-ds-1 shadow-sm border border-ds-border-accent",
+		success: "bg-ds-state-success-surface text-ds-state-success-text shadow-sm border border-ds-state-success-border",
+		warning: "bg-ds-state-warning-surface text-ds-state-warning-text shadow-sm border border-ds-state-warning-border",
+		error: "bg-ds-state-error-surface text-ds-state-error-text shadow-sm border border-ds-state-error-border",
+		info: "bg-ds-state-info-surface text-ds-state-info-text shadow-sm border border-ds-state-info-border"
+	},
+	outlined: {
+		default: "border-2 border-ds-border-3 text-ds-2 bg-transparent hover:bg-ds-surface-2",
+		primary: "border-2 border-ds-border-accent bg-transparent text-ds-accent hover:bg-ds-accent-subtle",
+		secondary: "border-2 border-ds-border-3 text-ds-1 bg-transparent hover:bg-ds-surface-2",
+		success: "border-2 border-ds-state-success-border text-ds-state-success-text bg-transparent hover:bg-ds-state-success-surface",
+		warning: "border-2 border-ds-state-warning-border text-ds-state-warning-text bg-transparent hover:bg-ds-state-warning-surface",
+		error: "border-2 border-ds-state-error-border text-ds-state-error-text bg-transparent hover:bg-ds-state-error-surface",
+		info: "border-2 border-ds-state-info-border text-ds-state-info-text bg-transparent hover:bg-ds-state-info-surface"
+	},
+	soft: {
+		default: "bg-ds-surface-2 text-ds-1 backdrop-blur-sm border border-ds-border-2",
+		primary: "border border-ds-border-accent/20 bg-ds-accent-subtle text-ds-1 backdrop-blur-sm",
+		secondary: "bg-ds-surface-3/30 text-ds-1 backdrop-blur-sm border border-ds-border-3/50",
+		success: "bg-ds-state-success-surface text-ds-state-success-text backdrop-blur-sm border border-ds-state-success-border/70",
+		warning: "bg-ds-state-warning-surface text-ds-state-warning-text backdrop-blur-sm border border-ds-state-warning-border/70",
+		error: "bg-ds-state-error-surface text-ds-state-error-text backdrop-blur-sm border border-ds-state-error-border/70",
+		info: "bg-ds-state-info-surface text-ds-state-info-text backdrop-blur-sm border border-ds-state-info-border/70"
+	},
+	glass: {
+		default: "bg-ds-surface-1/70 text-ds-1 backdrop-blur-xl border border-ds-border-2/40 shadow-lg",
+		primary: "border border-ds-border-accent/20 bg-ds-accent/15 text-ds-1 backdrop-blur-xl shadow-lg shadow-ds-accent/10",
+		secondary: "bg-ds-surface-3/45 text-ds-1 backdrop-blur-xl border border-ds-border-3/50 shadow-lg",
+		success: "bg-ds-state-success-surface/65 text-ds-state-success-text backdrop-blur-xl border border-ds-state-success-border/60 shadow-lg",
+		warning: "bg-ds-state-warning-surface/65 text-ds-state-warning-text backdrop-blur-xl border border-ds-state-warning-border/60 shadow-lg",
+		error: "bg-ds-state-error-surface/65 text-ds-state-error-text backdrop-blur-xl border border-ds-state-error-border/60 shadow-lg",
+		info: "bg-ds-state-info-surface/65 text-ds-state-info-text backdrop-blur-xl border border-ds-state-info-border/60 shadow-lg"
+	}
+};
+var dotColorStyles = {
+	default: "bg-ds-3",
+	primary: "bg-ds-accent",
+	secondary: "bg-ds-border-3",
+	success: "bg-ds-state-success",
+	warning: "bg-ds-state-warning",
+	error: "bg-ds-state-danger",
+	info: "bg-ds-state-info"
+};
+var Chip = (0, react.forwardRef)(({ children, variant = "soft", color = "default", size = "md", startIcon, endIcon, onRemove, onClick, disabled = false, className = "", dot = false, dotColor, maxWidth }, ref) => {
+	const isClickable = onClick !== void 0;
+	const isRemovable = onRemove !== void 0;
+	const baseStyles = `
+      inline-flex items-center font-medium rounded-[4px] transition-all duration-200
+      ${sizeStyles[size]}
+      ${colorStyles[variant][color]}
+      ${isClickable && !disabled ? "cursor-pointer hover:scale-105 hover:shadow-lg active:scale-95" : ""}
+      ${disabled ? "opacity-50 cursor-not-allowed grayscale" : ""}
+      ${maxWidth ? "max-w-full" : ""}
+      ${className}
+    `;
+	const handleClick = () => {
+		if (!disabled && onClick) onClick();
+	};
+	const handleRemove = (e) => {
+		e.stopPropagation();
+		if (!disabled && onRemove) onRemove();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		ref,
+		className: baseStyles,
+		onClick: handleClick,
+		role: isClickable ? "button" : void 0,
+		tabIndex: isClickable && !disabled ? 0 : void 0,
+		style: maxWidth ? { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth } : void 0,
+		onKeyDown: (e) => {
+			if (isClickable && !disabled && (e.key === "Enter" || e.key === " ")) {
+				e.preventDefault();
+				onClick?.();
+			}
+		},
+		children: [
+			dot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `rounded-full shrink-0 animate-pulse ${dotSizeStyles[size]} ${dotColor ? "" : dotColorStyles[color]}`,
+				style: dotColor ? { backgroundColor: dotColor } : void 0
+			}),
+			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `shrink-0 ${iconSizeStyles[size]}`,
+				children: startIcon
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.TruncatedText, {
+				as: "span",
+				showTitleOnHover: true,
+				className: "max-w-full font-semibold",
+				children
+			}),
+			endIcon && !isRemovable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `shrink-0 ${iconSizeStyles[size]}`,
+				children: endIcon
+			}),
+			isRemovable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: handleRemove,
+				disabled,
+				className: `
+              shrink-0 rounded-full p-0.5 ml-1 transition-all duration-200
+              hover:bg-ds-surface-3/35 hover:scale-110
+              focus:outline-none focus:ring-2 focus:ring-current focus:ring-offset-1
+              ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
+            `,
+				"aria-label": "Remove",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
+					className: iconSizeStyles[size],
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+});
+Chip.displayName = "Chip";
+//#endregion
+//#region src/components/data-display/chip/SpecialChip.tsx
+function SplitChip({ leftLabel, rightLabel, dir = "auto", rightLabelDir = "ltr", truncateRight = false, rightMaxWidth = "10rem", showRightTitleOnHover = true, className, leftClassName, rightClassName }) {
+	const isRtl = dir === "rtl";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		dir,
+		className: require_utils.mergeClassNames("inline-flex items-center overflow-hidden rounded-md border border-ds-border-2 bg-ds-surface-2", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_utils.mergeClassNames("bg-ds-surface-3 px-2 py-1 text-xs font-medium uppercase tracking-[0.05em] text-ds-2", isRtl ? "border-l border-ds-border-2" : "border-r border-ds-border-2", leftClassName),
+			children: leftLabel
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			dir: rightLabelDir,
+			className: require_utils.mergeClassNames("min-w-0 px-2 py-1 text-xs font-medium text-ds-1", rightClassName),
+			children: truncateRight ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.TruncatedText, {
+				maxWidth: rightMaxWidth,
+				showTitleOnHover: showRightTitleOnHover,
+				children: rightLabel
+			}) : rightLabel
+		})]
+	});
+}
+var toneClasses = {
+	success: "bg-ds-state-success-surface text-ds-state-success-text border-ds-state-success-border",
+	warning: "bg-ds-state-warning-surface text-ds-state-warning-text border-ds-state-warning-border",
+	danger: "bg-ds-state-error-surface text-ds-state-error-text border-ds-state-error-border",
+	info: "bg-ds-state-info-surface text-ds-state-info-text border-ds-state-info-border"
+};
+var dotToneClasses = {
+	success: "bg-ds-state-success",
+	warning: "bg-ds-state-warning",
+	danger: "bg-ds-state-danger",
+	info: "bg-ds-state-info"
+};
+function StatusDotChip({ label, tone = "info", className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_utils.mergeClassNames("inline-flex items-center gap-2 rounded-md border px-3 py-1 text-sm font-medium", toneClasses[tone], className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			className: require_utils.mergeClassNames("h-2.5 w-2.5 rounded-full", dotToneClasses[tone])
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "Chip", {
+	enumerable: true,
+	get: function() {
+		return Chip;
+	}
+});
+Object.defineProperty(exports, "SplitChip", {
+	enumerable: true,
+	get: function() {
+		return SplitChip;
+	}
+});
+Object.defineProperty(exports, "StatusDotChip", {
+	enumerable: true,
+	get: function() {
+		return StatusDotChip;
+	}
+});
+//# sourceMappingURL=chip-BY83_HK7.cjs.map

package/dist/chunks/chip-BY83_HK7.cjs.map ADDED Viewed

@@ -0,0 +1 @@

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