@etus/ui 0.4.0-beta.2 → 0.4.0-beta.21

package/dist/chunk-NNWMBVCB.js

@@ -0,0 +1,266 @@
+import { ChartTooltipContent, ChartContainer, ChartTooltip, ChartLegend, ChartLegendContent } from './chunk-XXWCMY2G.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import * as React from 'react';
+import { LineChart as LineChart$1, CartesianGrid, XAxis, Label, YAxis, Line, LabelList } from 'recharts';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+cva(
+  // Base styles (always applied)
+  "",
+  {
+    variants: {
+      variant: {
+        default: "",
+        dashed: "",
+        dotted: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var lineStrokeDashArray = {
+  default: void 0,
+  dashed: "5 5",
+  dotted: "2 2"
+};
+function normalizeSeriesConfig(series) {
+  return series.map(
+    (s) => typeof s === "string" ? { dataKey: s } : s
+  );
+}
+function getVariantStrokeDasharray(variant) {
+  return lineStrokeDashArray[variant ?? "default"];
+}
+function makePointDotRenderer(dataKey, dotColors, baseDot) {
+  const radius = typeof baseDot === "object" ? baseDot.r ?? 3 : 3;
+  return function PointDot({ cx, cy, index }) {
+    const pointIndex = index ?? 0;
+    return /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        fill: dotColors[pointIndex % dotColors.length],
+        r: radius
+      },
+      `${dataKey}-dot-${String(pointIndex)}`
+    );
+  };
+}
+function makePointLabelFormatter(showPointLabels) {
+  const formatter = typeof showPointLabels === "object" ? showPointLabels.formatter : void 0;
+  if (!formatter) return;
+  return (label) => formatter(Number(label));
+}
+function LineChart({
+  activeDot = { r: 6 },
+  allowDecimals = true,
+  ariaLabel,
+  autoMinValue = false,
+  className,
+  config,
+  connectNulls = false,
+  customTooltip,
+  curveType = "monotone",
+  data,
+  dot = false,
+  enableLegendSlider = false,
+  gridDashArray = "3 3",
+  intervalType,
+  legendPosition = "bottom",
+  maxValue,
+  minValue,
+  onValueChange,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showPointLabels = false,
+  showTooltip = true,
+  showXAxis = true,
+  showYAxis = true,
+  startEndOnly = false,
+  strokeWidth = 2,
+  tickGap,
+  tooltipCallback,
+  tooltipIndicator = "dot",
+  variant = "default",
+  xAxisLabel,
+  xAxisKey,
+  xAxisTickFormatter,
+  yAxisLabel,
+  yAxisTickFormatter,
+  yAxisWidth,
+  ...props
+}) {
+  const pointLabelFormatter = makePointLabelFormatter(showPointLabels);
+  const normalizedSeries = normalizeSeriesConfig(series);
+  const variantStrokeDasharray = getVariantStrokeDasharray(variant);
+  const prevTooltipStateRef = React.useRef(false);
+  const handleDotClick = React.useCallback(
+    (dataKey) => (data2) => {
+      if (!onValueChange) return;
+      const payload = data2.payload;
+      const value = payload[dataKey];
+      onValueChange({
+        category: payload[xAxisKey],
+        dataKey,
+        payload,
+        value: typeof value === "number" ? value : 0
+      });
+    },
+    [onValueChange, xAxisKey]
+  );
+  const TooltipContentWithCallback = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (props2) => {
+      const { active = false, label, payload } = props2;
+      if (tooltipCallback && active !== prevTooltipStateRef.current) {
+        prevTooltipStateRef.current = active;
+        tooltipCallback({
+          active,
+          label,
+          payload: payload?.map((p) => ({
+            dataKey: String(p.dataKey),
+            value: p.value,
+            payload: p.payload
+          }))
+        });
+      }
+      return /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: tooltipIndicator, ...props2 });
+    },
+    [tooltipCallback, tooltipIndicator]
+  );
+  const yDomain = React.useMemo(() => {
+    const min = minValue ?? (autoMinValue ? "auto" : 0);
+    const max = maxValue ?? "auto";
+    return [min, max];
+  }, [autoMinValue, maxValue, minValue]);
+  const xAxisTicks = React.useMemo(() => {
+    if (!startEndOnly || data.length < 2) return;
+    const first = data[0];
+    const last = data[data.length - 1];
+    if (!first || !last) return;
+    return [first[xAxisKey], last[xAxisKey]];
+  }, [data, startEndOnly, xAxisKey]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      "data-slot": "line-chart",
+      role: ariaLabel ? "img" : void 0,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ChartContainer,
+        {
+          className: cn(className),
+          config,
+          children: /* @__PURE__ */ jsxs(
+            LineChart$1,
+            {
+              accessibilityLayer: true,
+              data,
+              margin: { left: xAxisLabel ? 20 : 12, right: 12, bottom: yAxisLabel ? 20 : 0 },
+              children: [
+                showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: gridDashArray, vertical: false }),
+                showXAxis && /* @__PURE__ */ jsx(
+                  XAxis,
+                  {
+                    axisLine: false,
+                    dataKey: xAxisKey,
+                    interval: intervalType,
+                    minTickGap: tickGap,
+                    tickFormatter: xAxisTickFormatter,
+                    tickLine: false,
+                    tickMargin: 8,
+                    ticks: xAxisTicks,
+                    children: xAxisLabel && /* @__PURE__ */ jsx(Label, { offset: -5, position: "insideBottom", value: xAxisLabel })
+                  }
+                ),
+                showYAxis && /* @__PURE__ */ jsx(
+                  YAxis,
+                  {
+                    allowDecimals,
+                    axisLine: false,
+                    domain: yDomain,
+                    tickFormatter: yAxisTickFormatter,
+                    tickLine: false,
+                    tickMargin: 8,
+                    width: yAxisWidth,
+                    children: yAxisLabel && /* @__PURE__ */ jsx(Label, { angle: -90, offset: -5, position: "insideLeft", value: yAxisLabel })
+                  }
+                ),
+                showTooltip && /* @__PURE__ */ jsx(
+                  ChartTooltip,
+                  {
+                    content: customTooltip ?? (tooltipCallback ? /* @__PURE__ */ jsx(TooltipContentWithCallback, {}) : /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: tooltipIndicator })),
+                    cursor: false
+                  }
+                ),
+                showLegend && /* @__PURE__ */ jsx(
+                  ChartLegend,
+                  {
+                    align: legendPosition === "left" ? "left" : legendPosition === "right" ? "right" : "center",
+                    content: /* @__PURE__ */ jsx(ChartLegendContent, { enableSlider: enableLegendSlider }),
+                    layout: legendPosition === "left" || legendPosition === "right" ? "vertical" : "horizontal",
+                    verticalAlign: legendPosition === "top" ? "top" : legendPosition === "bottom" ? "bottom" : "middle"
+                  }
+                ),
+                normalizedSeries.map((seriesConfig) => {
+                  const {
+                    activeDot: seriesActiveDot,
+                    dataKey,
+                    dot: seriesDot,
+                    dotColors,
+                    strokeDasharray: seriesStrokeDasharray,
+                    strokeOpacity,
+                    strokeWidth: seriesStrokeWidth
+                  } = seriesConfig;
+                  const stroke = `var(--color-${dataKey})`;
+                  const finalStrokeDasharray = seriesStrokeDasharray ?? variantStrokeDasharray;
+                  const baseDot = seriesDot ?? dot;
+                  const finalDot = dotColors?.length ? makePointDotRenderer(dataKey, dotColors, baseDot) : baseDot;
+                  const finalStrokeWidth = seriesStrokeWidth ?? strokeWidth;
+                  const baseActiveDot = seriesActiveDot ?? activeDot;
+                  const finalActiveDot = onValueChange ? typeof baseActiveDot === "object" ? { ...baseActiveDot, onClick: handleDotClick(dataKey), style: { cursor: "pointer" } } : !baseActiveDot ? false : { r: 6, onClick: handleDotClick(dataKey), style: { cursor: "pointer" } } : baseActiveDot;
+                  return /* @__PURE__ */ jsx(
+                    Line,
+                    {
+                      activeDot: finalActiveDot,
+                      connectNulls,
+                      dataKey,
+                      dot: finalDot,
+                      stroke,
+                      strokeDasharray: finalStrokeDasharray,
+                      strokeOpacity,
+                      strokeWidth: finalStrokeWidth,
+                      type: curveType,
+                      children: showPointLabels ? /* @__PURE__ */ jsx(
+                        LabelList,
+                        {
+                          className: "fill-foreground text-xs",
+                          dataKey,
+                          formatter: pointLabelFormatter,
+                          offset: 10,
+                          position: "top"
+                        }
+                      ) : null
+                    },
+                    dataKey
+                  );
+                })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+LineChart.displayName = "LineChart";
+
+export { LineChart };
+//# sourceMappingURL=chunk-NNWMBVCB.js.map
+//# sourceMappingURL=chunk-NNWMBVCB.js.map

package/dist/chunk-NNWMBVCB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LineChart/LineChart.variants.ts","../src/components/data-display/LineChart/LineChart.tsx"],"names":["data","props","RechartsLineChart"],"mappings":"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","file":"chunk-NNWMBVCB.js","sourcesContent":["// LineChart/LineChart.variants.ts\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * LineChart style variants using CVA\n *\n * Controls the line appearance and chart styling.\n *\n * @see https://cva.style/docs\n */\nexport const lineChartVariants = cva(\n  // Base styles (always applied)\n  \"\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        dashed: \"\",\n        dotted: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * Line stroke dash array configuration by variant\n */\nexport const lineStrokeDashArray: Record<string, string | undefined> = {\n  default: undefined,\n  dashed: \"5 5\",\n  dotted: \"2 2\",\n}\n\n/**\n * Line curve type configuration\n */\nexport const curveTypes = {\n  linear: \"linear\",\n  monotone: \"monotone\",\n  step: \"step\",\n  stepAfter: \"stepAfter\",\n  stepBefore: \"stepBefore\",\n  natural: \"natural\",\n} as const\n\nexport type CurveType = keyof typeof curveTypes\n\n// Export variant prop types\nexport type LineChartVariantProps = VariantProps<typeof lineChartVariants>\n","\"use client\"\n\nimport type {\n  LineChartProps,\n  LineChartSeriesConfig,\n} from \"./LineChart.types\"\n\nimport * as React from \"react\"\nimport {\n  CartesianGrid,\n  Label,\n  LabelList,\n  Line,\n  LineChart as RechartsLineChart,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"../Chart\"\nimport { lineStrokeDashArray } from \"./LineChart.variants\"\n\n/**\n * Normalize series to LineChartSeriesConfig format\n */\nfunction normalizeSeriesConfig(\n  series: (LineChartSeriesConfig | string)[]\n): LineChartSeriesConfig[] {\n  return series.map((s) =>\n    typeof s === \"string\" ? { dataKey: s } : s\n  )\n}\n\n/**\n * Get stroke dash array based on variant\n */\nfunction getVariantStrokeDasharray(variant: LineChartProps[\"variant\"]): string | undefined {\n  return lineStrokeDashArray[variant ?? \"default\"]\n}\n\ninterface PointDotProps {\n  cx?: number\n  cy?: number\n  index?: number\n}\n\nfunction makePointDotRenderer(\n  dataKey: string,\n  dotColors: string[],\n  baseDot: boolean | { fill?: string; r?: number }\n) {\n  const radius = typeof baseDot === \"object\" ? (baseDot.r ?? 3) : 3\n  return function PointDot({ cx, cy, index }: PointDotProps) {\n    const pointIndex = index ?? 0\n    return (\n      <circle\n        key={`${dataKey}-dot-${String(pointIndex)}`}\n        cx={cx}\n        cy={cy}\n        fill={dotColors[pointIndex % dotColors.length]}\n        r={radius}\n      />\n    )\n  }\n}\n\nfunction makePointLabelFormatter(\n  showPointLabels: boolean | { formatter?: (value: number) => string }\n) {\n  const formatter =\n    typeof showPointLabels === \"object\" ? showPointLabels.formatter : undefined\n  if (!formatter) return\n  return (label: React.ReactNode) => formatter(Number(label))\n}\n\n/**\n * LineChart - Data visualization component for trends and time series\n *\n * Connects data points with lines, ideal for showing trends and changes\n * over a continuous axis (usually time). Supports multiple series for\n * comparison.\n *\n * @example\n * ```tsx\n * const data = [\n *   { month: \"Jan\", desktop: 186, mobile: 80 },\n *   { month: \"Feb\", desktop: 305, mobile: 200 },\n * ]\n *\n * const config = {\n *   desktop: { label: \"Desktop\", color: \"hsl(var(--chart-1))\" },\n *   mobile: { label: \"Mobile\", color: \"hsl(var(--chart-2))\" },\n * }\n *\n * <LineChart\n *   data={data}\n *   config={config}\n *   xAxisKey=\"month\"\n *   series={[\"desktop\", \"mobile\"]}\n * />\n * ```\n */\nexport function LineChart({\n  activeDot = { r: 6 },\n  allowDecimals = true,\n  ariaLabel,\n  autoMinValue = false,\n  className,\n  config,\n  connectNulls = false,\n  customTooltip,\n  curveType = \"monotone\",\n  data,\n  dot = false,\n  enableLegendSlider = false,\n  gridDashArray = \"3 3\",\n  intervalType,\n  legendPosition = \"bottom\",\n  maxValue,\n  minValue,\n  onValueChange,\n  series,\n  showGrid = true,\n  showLegend = false,\n  showPointLabels = false,\n  showTooltip = true,\n  showXAxis = true,\n  showYAxis = true,\n  startEndOnly = false,\n  strokeWidth = 2,\n  tickGap,\n  tooltipCallback,\n  tooltipIndicator = \"dot\",\n  variant = \"default\",\n  xAxisLabel,\n  xAxisKey,\n  xAxisTickFormatter,\n  yAxisLabel,\n  yAxisTickFormatter,\n  yAxisWidth,\n  ...props\n}: LineChartProps) {\n  const pointLabelFormatter = makePointLabelFormatter(showPointLabels)\n  const normalizedSeries = normalizeSeriesConfig(series)\n  const variantStrokeDasharray = getVariantStrokeDasharray(variant)\n  const prevTooltipStateRef = React.useRef<boolean>(false)\n\n  // Handle dot click for onValueChange\n  const handleDotClick = React.useCallback(\n    (dataKey: string) => (data: { payload: Record<string, unknown> }) => {\n      if (!onValueChange) return\n      const payload = data.payload\n      const value = payload[dataKey]\n      onValueChange({\n        category: payload[xAxisKey],\n        dataKey,\n        payload,\n        value: typeof value === \"number\" ? value : 0,\n      })\n    },\n    [onValueChange, xAxisKey]\n  )\n\n  /* eslint-disable react-hooks/static-components, @eslint-react/no-nested-component-definitions, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access -- Intentional: memoized render function with Recharts any-typed props */\n  // Custom tooltip content wrapper for tooltipCallback\n  const TooltipContentWithCallback = React.useCallback(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (props: any) => {\n      const { active = false, label, payload } = props\n\n      // Call tooltipCallback when state changes\n      if (tooltipCallback && active !== prevTooltipStateRef.current) {\n        prevTooltipStateRef.current = active\n        tooltipCallback({\n          active,\n          label,\n          payload: payload?.map((p: { dataKey: number | string; payload: Record<string, unknown>; value: number; }) => ({\n            dataKey: String(p.dataKey),\n            value: p.value,\n            payload: p.payload,\n          })),\n        })\n      }\n\n      return <ChartTooltipContent indicator={tooltipIndicator} {...props} />\n    },\n    [tooltipCallback, tooltipIndicator]\n  )\n\n  // Calculate Y-axis domain\n  const yDomain = React.useMemo(() => {\n    const min = minValue ?? (autoMinValue ? \"auto\" : 0)\n    const max = maxValue ?? \"auto\"\n    return [min, max] as const\n  }, [autoMinValue, maxValue, minValue])\n\n  // Calculate X-axis ticks for startEndOnly\n  const xAxisTicks = React.useMemo(() => {\n    if (!startEndOnly || data.length < 2) return\n    const first = data[0]\n    const last = data[data.length - 1]\n    if (!first || !last) return\n    return [first[xAxisKey], last[xAxisKey]] as string[]\n  }, [data, startEndOnly, xAxisKey])\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      data-slot=\"line-chart\"\n      role={ariaLabel ? \"img\" : undefined}\n      {...props}\n    >\n      <ChartContainer\n        className={cn(className)}\n        config={config}\n      >\n        <RechartsLineChart\n          accessibilityLayer\n          data={data}\n          margin={{ left: xAxisLabel ? 20 : 12, right: 12, bottom: yAxisLabel ? 20 : 0 }}\n        >\n          {showGrid && (\n            <CartesianGrid strokeDasharray={gridDashArray} vertical={false} />\n          )}\n\n          {showXAxis && (\n            <XAxis\n              axisLine={false}\n              dataKey={xAxisKey}\n              interval={intervalType}\n              minTickGap={tickGap}\n              tickFormatter={xAxisTickFormatter}\n              tickLine={false}\n              tickMargin={8}\n              ticks={xAxisTicks}\n            >\n              {xAxisLabel && (\n                <Label offset={-5} position=\"insideBottom\" value={xAxisLabel} />\n              )}\n            </XAxis>\n          )}\n\n          {showYAxis && (\n            <YAxis\n              allowDecimals={allowDecimals}\n              axisLine={false}\n              domain={yDomain}\n              tickFormatter={yAxisTickFormatter}\n              tickLine={false}\n              tickMargin={8}\n              width={yAxisWidth}\n            >\n              {yAxisLabel && (\n                <Label angle={-90} offset={-5} position=\"insideLeft\" value={yAxisLabel} />\n              )}\n            </YAxis>\n          )}\n\n          {showTooltip && (\n            <ChartTooltip\n              content={\n                customTooltip\n                  ?? (tooltipCallback\n                    ? <TooltipContentWithCallback />\n                    : <ChartTooltipContent indicator={tooltipIndicator} />)\n              }\n              cursor={false}\n            />\n          )}\n\n          {showLegend && (\n            <ChartLegend\n              align={legendPosition === \"left\" ? \"left\" : legendPosition === \"right\" ? \"right\" : \"center\"}\n              content={<ChartLegendContent enableSlider={enableLegendSlider} />}\n              layout={legendPosition === \"left\" || legendPosition === \"right\" ? \"vertical\" : \"horizontal\"}\n              verticalAlign={legendPosition === \"top\" ? \"top\" : legendPosition === \"bottom\" ? \"bottom\" : \"middle\"}\n            />\n          )}\n\n          {normalizedSeries.map((seriesConfig) => {\n            const {\n              activeDot: seriesActiveDot,\n              dataKey,\n              dot: seriesDot,\n              dotColors,\n              strokeDasharray: seriesStrokeDasharray,\n              strokeOpacity,\n              strokeWidth: seriesStrokeWidth,\n            } = seriesConfig\n\n            const stroke = `var(--color-${dataKey})`\n            const finalStrokeDasharray = seriesStrokeDasharray ?? variantStrokeDasharray\n            const baseDot = seriesDot ?? dot\n            const finalDot = dotColors?.length\n              ? makePointDotRenderer(dataKey, dotColors, baseDot)\n              : baseDot\n            const finalStrokeWidth = seriesStrokeWidth ?? strokeWidth\n\n            // Merge activeDot config with click handler\n            const baseActiveDot = seriesActiveDot ?? activeDot\n            const finalActiveDot = onValueChange\n              ? typeof baseActiveDot === \"object\"\n                ? { ...baseActiveDot, onClick: handleDotClick(dataKey), style: { cursor: \"pointer\" } }\n                : !baseActiveDot\n                  ? false\n                  : { r: 6, onClick: handleDotClick(dataKey), style: { cursor: \"pointer\" } }\n              : baseActiveDot\n\n            return (\n              <Line\n                key={dataKey}\n                activeDot={finalActiveDot}\n                connectNulls={connectNulls}\n                dataKey={dataKey}\n                dot={finalDot}\n                stroke={stroke}\n                strokeDasharray={finalStrokeDasharray}\n                strokeOpacity={strokeOpacity}\n                strokeWidth={finalStrokeWidth}\n                type={curveType}\n              >\n                {showPointLabels ? (\n                  <LabelList\n                    className=\"fill-foreground text-xs\"\n                    dataKey={dataKey}\n                    formatter={pointLabelFormatter}\n                    offset={10}\n                    position=\"top\"\n                  />\n                ) : null}\n              </Line>\n            )\n          })}\n        </RechartsLineChart>\n      </ChartContainer>\n    </div>\n  )\n}\n\nLineChart.displayName = \"LineChart\"\n"]}

package/dist/chunk-NUA54ABI.js

@@ -0,0 +1,233 @@
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-TEVGCTUN.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var categoryBarContainerVariants = cva(
+  "w-full",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var categoryBarVariants = cva(
+  "relative flex w-full overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        xs: "h-1",
+        sm: "h-2",
+        md: "h-3",
+        lg: "h-4"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var categoryBarSegmentVariants = cva(
+  "transition-all duration-300",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer hover:opacity-80",
+        false: ""
+      },
+      animated: {
+        true: "",
+        false: "!transition-none"
+      }
+    },
+    defaultVariants: {
+      clickable: false,
+      animated: true
+    }
+  }
+);
+var categoryBarLabelsVariants = cva(
+  "mt-2 flex justify-between gap-2",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var categoryBarLabelItemVariants = cva(
+  "flex items-center gap-1.5 text-sm",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer hover:opacity-80",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      clickable: false
+    }
+  }
+);
+var categoryBarLabelDotVariants = cva(
+  "h-2 w-2 shrink-0 rounded-full",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var categoryBarMarkerVariants = cva(
+  "absolute top-0 h-full w-0.5 bg-foreground",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var DEFAULT_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
+];
+function defaultValueFormatter(value) {
+  return value.toLocaleString();
+}
+function CategoryBar({
+  className,
+  colors = DEFAULT_COLORS,
+  data,
+  markerValue,
+  onClick,
+  showAnimation = true,
+  showLabels = true,
+  showTooltip = true,
+  size = "md",
+  valueFormatter = defaultValueFormatter,
+  ...props
+}) {
+  const total = React.useMemo(
+    () => data.reduce((sum, item) => sum + item.value, 0),
+    [data]
+  );
+  const segments = React.useMemo(() => {
+    let cumulativePercent = 0;
+    return data.map((item, index) => {
+      const percent = total > 0 ? item.value / total * 100 : 0;
+      const segment = {
+        ...item,
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Defensive: color is optional in CategoryBarItem
+        color: item.color ?? colors[index % colors.length],
+        percent,
+        startPercent: cumulativePercent
+      };
+      cumulativePercent += percent;
+      return segment;
+    });
+  }, [data, total, colors]);
+  const isClickable = Boolean(onClick);
+  const markerPosition = React.useMemo(() => {
+    if (markerValue === void 0 || total === 0) return;
+    return markerValue / total * 100;
+  }, [markerValue, total]);
+  const renderSegment = (segment, index) => {
+    const segmentElement = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          categoryBarSegmentVariants({
+            animated: showAnimation,
+            clickable: isClickable
+          })
+        ),
+        style: {
+          backgroundColor: segment.color,
+          width: `${String(segment.percent)}%`
+        },
+        "aria-label": `${segment.name}: ${valueFormatter(segment.value)}`,
+        role: isClickable ? "button" : void 0,
+        tabIndex: isClickable ? 0 : void 0,
+        onClick: isClickable ? () => onClick?.(segment, index) : void 0,
+        onKeyDown: isClickable ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.(segment, index);
+          }
+        } : void 0
+      },
+      segment.key
+    );
+    if (!showTooltip) return segmentElement;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: segmentElement }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-2 w-2 rounded-full",
+              style: { backgroundColor: segment.color }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: segment.name })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
+          valueFormatter(segment.value),
+          " (",
+          segment.percent.toFixed(1),
+          "%)"
+        ] })
+      ] }) })
+    ] }, segment.key);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(categoryBarContainerVariants(), className),
+      "data-slot": "category-bar",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: categoryBarVariants({ size }), children: [
+          segments.map((segment, index) => renderSegment(segment, index)),
+          markerPosition !== void 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: categoryBarMarkerVariants(),
+              style: { left: `${String(markerPosition)}%` }
+            }
+          )
+        ] }) }),
+        showLabels && /* @__PURE__ */ jsx("div", { className: categoryBarLabelsVariants(), children: segments.map((segment, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(categoryBarLabelItemVariants({ clickable: isClickable })),
+            role: isClickable ? "button" : void 0,
+            tabIndex: isClickable ? 0 : void 0,
+            onClick: isClickable ? () => onClick?.(segment, index) : void 0,
+            onKeyDown: isClickable ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick?.(segment, index);
+              }
+            } : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: categoryBarLabelDotVariants(),
+                  style: { backgroundColor: segment.color }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: segment.name }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: valueFormatter(segment.value) })
+            ]
+          },
+          segment.key
+        )) })
+      ]
+    }
+  );
+}
+CategoryBar.displayName = "CategoryBar";
+
+export { CategoryBar };
+//# sourceMappingURL=chunk-NUA54ABI.js.map
+//# sourceMappingURL=chunk-NUA54ABI.js.map

package/dist/chunk-NUA54ABI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/CategoryBar/CategoryBar.variants.ts","../src/components/data-display/CategoryBar/CategoryBar.tsx"],"names":[],"mappings":"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","file":"chunk-NUA54ABI.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const categoryBarContainerVariants = cva(\n  \"w-full\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const categoryBarVariants = cva(\n  \"relative flex w-full overflow-hidden rounded-full\",\n  {\n    variants: {\n      size: {\n        xs: \"h-1\",\n        sm: \"h-2\",\n        md: \"h-3\",\n        lg: \"h-4\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const categoryBarSegmentVariants = cva(\n  \"transition-all duration-300\",\n  {\n    variants: {\n      clickable: {\n        true: \"cursor-pointer hover:opacity-80\",\n        false: \"\",\n      },\n      animated: {\n        true: \"\",\n        false: \"!transition-none\",\n      },\n    },\n    defaultVariants: {\n      clickable: false,\n      animated: true,\n    },\n  }\n)\n\nexport const categoryBarLabelsVariants = cva(\n  \"mt-2 flex justify-between gap-2\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const categoryBarLabelItemVariants = cva(\n  \"flex items-center gap-1.5 text-sm\",\n  {\n    variants: {\n      clickable: {\n        true: \"cursor-pointer hover:opacity-80\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      clickable: false,\n    },\n  }\n)\n\nexport const categoryBarLabelDotVariants = cva(\n  \"h-2 w-2 shrink-0 rounded-full\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const categoryBarMarkerVariants = cva(\n  \"absolute top-0 h-full w-0.5 bg-foreground\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n","\"use client\"\n\nimport type { CategoryBarDataItem, CategoryBarProps } from \"./CategoryBar.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport {\n  categoryBarContainerVariants,\n  categoryBarLabelDotVariants,\n  categoryBarLabelItemVariants,\n  categoryBarLabelsVariants,\n  categoryBarMarkerVariants,\n  categoryBarSegmentVariants,\n  categoryBarVariants,\n} from \"./CategoryBar.variants\"\n\n/**\n * Default colors for categories\n */\nconst DEFAULT_COLORS = [\n  \"var(--chart-1)\",\n  \"var(--chart-2)\",\n  \"var(--chart-3)\",\n  \"var(--chart-4)\",\n  \"var(--chart-5)\",\n]\n\n/**\n * Default value formatter\n */\nfunction defaultValueFormatter(value: number): string {\n  return value.toLocaleString()\n}\n\n/**\n * CategoryBar - Segmented bar showing proportional categories\n *\n * Displays categories as horizontal segments proportional to their values.\n * Similar to a pie chart but in a horizontal bar format. Ideal for showing\n * composition or breakdown of a total.\n *\n * @example\n * ```tsx\n * const data = [\n *   { key: \"completed\", name: \"Completed\", value: 45, color: \"var(--chart-1)\" },\n *   { key: \"in-progress\", name: \"In Progress\", value: 30, color: \"var(--chart-2)\" },\n *   { key: \"pending\", name: \"Pending\", value: 25, color: \"var(--chart-3)\" },\n * ]\n *\n * <CategoryBar data={data} />\n * ```\n *\n * @example\n * ```tsx\n * // With marker and custom formatter\n * <CategoryBar\n *   data={data}\n *   markerValue={75}\n *   valueFormatter={(v) => `${v}%`}\n *   size=\"lg\"\n * />\n * ```\n */\nexport function CategoryBar({\n  className,\n  colors = DEFAULT_COLORS,\n  data,\n  markerValue,\n  onClick,\n  showAnimation = true,\n  showLabels = true,\n  showTooltip = true,\n  size = \"md\",\n  valueFormatter = defaultValueFormatter,\n  ...props\n}: CategoryBarProps) {\n  // Calculate total and percentages\n  const total = React.useMemo(\n    () => data.reduce((sum, item) => sum + item.value, 0),\n    [data]\n  )\n\n  const segments = React.useMemo(() => {\n    let cumulativePercent = 0\n    return data.map((item, index) => {\n      const percent = total > 0 ? (item.value / total) * 100 : 0\n      const segment = {\n        ...item,\n        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Defensive: color is optional in CategoryBarItem\n        color: item.color ?? colors[index % colors.length],\n        percent,\n        startPercent: cumulativePercent,\n      }\n      // eslint-disable-next-line react-hooks/immutability -- Safe: building cumulative value within useMemo callback\n      cumulativePercent += percent\n      return segment\n    })\n  }, [data, total, colors])\n\n  const isClickable = Boolean(onClick)\n\n  // Calculate marker position\n  const markerPosition = React.useMemo(() => {\n    if (markerValue === undefined || total === 0) return\n    return (markerValue / total) * 100\n  }, [markerValue, total])\n\n  const renderSegment = (\n    segment: CategoryBarDataItem & { percent: number; startPercent: number },\n    index: number\n  ) => {\n    const segmentElement = (\n      <div\n        key={segment.key}\n        className={cn(\n          categoryBarSegmentVariants({\n            animated: showAnimation,\n            clickable: isClickable,\n          })\n        )}\n        style={{\n          backgroundColor: segment.color,\n          width: `${String(segment.percent)}%`,\n        }}\n        aria-label={`${segment.name}: ${valueFormatter(segment.value)}`}\n        role={isClickable ? \"button\" : undefined}\n        tabIndex={isClickable ? 0 : undefined}\n        onClick={isClickable ? () => onClick?.(segment, index) : undefined}\n        onKeyDown={\n          isClickable\n            ? (e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault()\n                  onClick?.(segment, index)\n                }\n              }\n            : undefined\n        }\n      />\n    )\n\n    if (!showTooltip) return segmentElement\n\n    return (\n      <Tooltip key={segment.key}>\n        <TooltipTrigger asChild>\n          {segmentElement}\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <div className=\"flex items-center gap-2\">\n              <div\n                className=\"h-2 w-2 rounded-full\"\n                style={{ backgroundColor: segment.color }}\n              />\n              <span className=\"font-medium\">{segment.name}</span>\n            </div>\n            <div className=\"text-muted-foreground\">\n              {valueFormatter(segment.value)} ({segment.percent.toFixed(1)}%)\n            </div>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return (\n    <div\n      className={cn(categoryBarContainerVariants(), className)}\n      data-slot=\"category-bar\"\n      {...props}\n    >\n      <TooltipProvider>\n        <div className={categoryBarVariants({ size })}>\n          {segments.map((segment, index) => renderSegment(segment, index))}\n\n          {markerPosition !== undefined && (\n            <div\n              className={categoryBarMarkerVariants()}\n              style={{ left: `${String(markerPosition)}%` }}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n\n      {showLabels && (\n        <div className={categoryBarLabelsVariants()}>\n          {segments.map((segment, index) => (\n            <div\n              key={segment.key}\n              className={cn(categoryBarLabelItemVariants({ clickable: isClickable }))}\n              role={isClickable ? \"button\" : undefined}\n              tabIndex={isClickable ? 0 : undefined}\n              onClick={isClickable ? () => onClick?.(segment, index) : undefined}\n              onKeyDown={\n                isClickable\n                  ? (e) => {\n                      if (e.key === \"Enter\" || e.key === \" \") {\n                        e.preventDefault()\n                        onClick?.(segment, index)\n                      }\n                    }\n                  : undefined\n              }\n            >\n              <div\n                className={categoryBarLabelDotVariants()}\n                style={{ backgroundColor: segment.color }}\n              />\n              <span className=\"text-muted-foreground\">{segment.name}</span>\n              <span className=\"font-medium\">{valueFormatter(segment.value)}</span>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nCategoryBar.displayName = \"CategoryBar\"\n"]}