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

package/dist/chunk-7I6KK6QE.js

@@ -0,0 +1,411 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var chartContainerVariants = cva(
+  // Base styles (always applied) - Recharts-specific styling
+  [
+    "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
+    "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50",
+    "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
+    "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border",
+    "[&_.recharts-radial-bar-background-sector]:fill-muted",
+    "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted",
+    "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border",
+    "flex min-h-px min-w-px w-full justify-center text-xs",
+    "[&_.recharts-dot[stroke='#fff']]:stroke-transparent",
+    "[&_.recharts-layer]:outline-hidden",
+    "[&_.recharts-sector]:outline-hidden",
+    "[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
+    "[&_.recharts-surface]:outline-hidden"
+  ].join(" "),
+  {
+    variants: {
+      aspectRatio: {
+        auto: "",
+        video: "aspect-video",
+        square: "aspect-square",
+        wide: "aspect-[21/9]"
+      }
+    },
+    defaultVariants: {
+      aspectRatio: "auto"
+    }
+  }
+);
+var chartTooltipVariants = cva(
+  // Base styles (always applied)
+  "bg-[color:var(--chart-tooltip-bg)] border-[color:var(--chart-tooltip-border)] grid min-w-[var(--chart-tooltip-min-width)] items-start gap-[var(--chart-tooltip-gap)] rounded-[var(--chart-tooltip-radius)] border px-[var(--chart-tooltip-padding-x)] py-[var(--chart-tooltip-padding-y)] text-[length:var(--chart-tooltip-text)] shadow-[var(--chart-tooltip-shadow)]",
+  {
+    variants: {
+      indicator: {
+        dot: "",
+        line: "",
+        dashed: ""
+      }
+    },
+    defaultVariants: {
+      indicator: "dot"
+    }
+  }
+);
+var chartTooltipIndicatorVariants = cva(
+  // Base styles (always applied)
+  "shrink-0 rounded-sm border-(--color-border) bg-(--color-bg)",
+  {
+    variants: {
+      indicator: {
+        dot: "size-[var(--chart-indicator-dot-size)]",
+        line: "w-[var(--chart-indicator-line-width)]",
+        dashed: "w-0 border-[1.5px] border-dashed bg-transparent"
+      }
+    },
+    defaultVariants: {
+      indicator: "dot"
+    }
+  }
+);
+var chartLegendVariants = cva(
+  // Base styles (always applied)
+  "flex items-center justify-center gap-[var(--chart-legend-gap)]",
+  {
+    variants: {
+      position: {
+        top: "pb-[var(--chart-legend-padding)]",
+        bottom: "pt-[var(--chart-legend-padding)]"
+      }
+    },
+    defaultVariants: {
+      position: "bottom"
+    }
+  }
+);
+function getPayloadFill(item) {
+  const payload = item.payload;
+  const fill = payload?.fill;
+  return typeof fill === "string" ? fill : void 0;
+}
+var THEMES = { light: "", dark: ".dark" };
+var ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.use(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id ?? uniqueId.replaceAll(":", "")}`;
+  const wrapperRef = React.useRef(null);
+  const [hasSize, setHasSize] = React.useState(false);
+  React.useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      if (entry.contentRect.width > 8 && entry.contentRect.height > 8) {
+        setHasSize(true);
+      }
+    });
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(ChartContext, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: cn(
+        chartContainerVariants(),
+        className
+      ),
+      "data-chart": chartId,
+      "data-slot": "chart",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { config, id: chartId }),
+        hasSize && /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { height: "100%", minHeight: 1, minWidth: 1, width: "100%", children })
+      ]
+    }
+  ) });
+}
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config2]) => config2.theme ?? config2.color
+  );
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}) {
+  const { config } = useChart();
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+    const [item] = payload;
+    const key = String(labelKey ?? item?.dataKey ?? item?.name ?? "value");
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey
+  ]);
+  if (!active || !payload?.length) {
+    return null;
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        chartTooltipVariants({ indicator: nestLabel ? "dashed" : indicator }),
+        className
+      ),
+      children: [
+        !nestLabel ? tooltipLabel : null,
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+          const key = String(nameKey ?? item.name ?? item.dataKey ?? "value");
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color ?? getPayloadFill(item) ?? item.color;
+          const itemKey = `${String(item.dataKey ?? item.name ?? key)}-${String(index)}`;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              ),
+              children: formatter && item.value !== void 0 && item.name ? formatter(item.value, String(item.name), item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      chartTooltipIndicatorVariants({
+                        indicator: nestLabel ? "dashed" : indicator
+                      }),
+                      {
+                        "my-0.5": nestLabel && indicator === "dashed"
+                      }
+                    ),
+                    style: {
+                      "--color-bg": indicatorColor,
+                      "--color-border": indicatorColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })
+                      ] }),
+                      item.value && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                    ]
+                  }
+                )
+              ] })
+            },
+            itemKey
+          );
+        }) })
+      ]
+    }
+  );
+}
+var ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({
+  activeLegend,
+  className,
+  enableSlider = false,
+  hideIcon = false,
+  nameKey,
+  onLegendClick,
+  payload,
+  verticalAlign = "bottom"
+}) {
+  const { config } = useChart();
+  const scrollRef = React.useRef(null);
+  const itemListRef = React.useRef([]);
+  const isItemActive = React.useCallback(
+    (dataKey) => {
+      if (!activeLegend) return true;
+      return activeLegend.includes(dataKey);
+    },
+    [activeLegend]
+  );
+  const handleKeyDown = React.useCallback(
+    (e, index, dataKey, isActive) => {
+      const filteredPayload2 = payload?.filter((item) => item.type !== "none") ?? [];
+      const itemCount = filteredPayload2.length;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          onLegendClick?.(dataKey, isActive);
+          break;
+        case "ArrowRight":
+        case "ArrowDown": {
+          e.preventDefault();
+          const nextIndex = (index + 1) % itemCount;
+          itemListRef.current[nextIndex]?.focus();
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          e.preventDefault();
+          const prevIndex = (index - 1 + itemCount) % itemCount;
+          itemListRef.current[prevIndex]?.focus();
+          break;
+        }
+        case "Home":
+          e.preventDefault();
+          itemListRef.current[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault();
+          itemListRef.current[itemCount - 1]?.focus();
+          break;
+      }
+    },
+    [payload, onLegendClick]
+  );
+  if (!payload?.length) {
+    return null;
+  }
+  const isInteractive = Boolean(onLegendClick);
+  const filteredPayload = payload.filter((item) => item.type !== "none");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scrollRef,
+      className: cn(
+        chartLegendVariants({ position: verticalAlign === "top" ? "top" : "bottom" }),
+        enableSlider && "overflow-x-auto",
+        className
+      ),
+      "aria-label": isInteractive ? "Chart legend filters" : void 0,
+      role: isInteractive ? "toolbar" : void 0,
+      children: filteredPayload.map((item, index) => {
+        const key = nameKey ?? item.dataKey ?? "value";
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const dataKey = item.dataKey ?? item.value ?? key;
+        const isActive = isItemActive(dataKey);
+        const itemKey = `${dataKey}-${String(index)}`;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: (el) => {
+              itemListRef.current[index] = el;
+            },
+            className: cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+              isInteractive && "cursor-pointer select-none transition-opacity",
+              isInteractive && !isActive && "opacity-40"
+            ),
+            "aria-pressed": isInteractive ? isActive : void 0,
+            role: isInteractive ? "button" : void 0,
+            tabIndex: isInteractive ? 0 : void 0,
+            onClick: isInteractive ? () => onLegendClick?.(dataKey, isActive) : void 0,
+            onKeyDown: isInteractive ? (e) => {
+              handleKeyDown(e, index, dataKey, isActive);
+            } : void 0,
+            children: [
+              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "h-2 w-2 shrink-0 rounded-sm transition-colors",
+                    !isActive && "bg-muted"
+                  ),
+                  style: {
+                    backgroundColor: isActive ? item.color : void 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cn(!isActive && "text-muted-foreground"), children: itemConfig?.label })
+            ]
+          },
+          itemKey
+        );
+      })
+    }
+  );
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
+//# sourceMappingURL=chunk-7I6KK6QE.js.map
+//# sourceMappingURL=chunk-7I6KK6QE.js.map

package/dist/chunk-7I6KK6QE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/Chart.variants.ts","../src/components/data-display/Chart/Chart.tsx"],"names":["config","filteredPayload"],"mappings":"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","file":"chunk-7I6KK6QE.js","sourcesContent":["// Chart/Chart.variants.ts\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Chart container style variants using CVA\n *\n * Controls the overall chart wrapper appearance.\n *\n * @see https://cva.style/docs\n */\n// NB: `#ccc` and `#fff` literals below are *attribute selectors* matching\n// Recharts' hardcoded default SVG output, not our styling values. They\n// must stay literal because Recharts emits those exact strings; we override\n// them to our theme tokens via the `stroke-*`/`fill-*` Tailwind classes\n// that follow. Not a token-hygiene violation.\nexport const chartContainerVariants = cva(\n  // Base styles (always applied) - Recharts-specific styling\n  [\n    \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground\",\n    \"[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50\",\n    \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border\",\n    \"[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border\",\n    \"[&_.recharts-radial-bar-background-sector]:fill-muted\",\n    \"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted\",\n    \"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border\",\n    \"flex min-h-px min-w-px w-full justify-center text-xs\",\n    \"[&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n    \"[&_.recharts-layer]:outline-hidden\",\n    \"[&_.recharts-sector]:outline-hidden\",\n    \"[&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n    \"[&_.recharts-surface]:outline-hidden\",\n  ].join(\" \"),\n  {\n    variants: {\n      aspectRatio: {\n        auto: \"\",\n        video: \"aspect-video\",\n        square: \"aspect-square\",\n        wide: \"aspect-[21/9]\",\n      },\n    },\n    defaultVariants: {\n      aspectRatio: \"auto\",\n    },\n  }\n)\n\n/**\n * Chart tooltip style variants\n */\nexport const chartTooltipVariants = cva(\n  // Base styles (always applied)\n  \"bg-[color:var(--chart-tooltip-bg)] border-[color:var(--chart-tooltip-border)] grid min-w-[var(--chart-tooltip-min-width)] items-start gap-[var(--chart-tooltip-gap)] rounded-[var(--chart-tooltip-radius)] border px-[var(--chart-tooltip-padding-x)] py-[var(--chart-tooltip-padding-y)] text-[length:var(--chart-tooltip-text)] shadow-[var(--chart-tooltip-shadow)]\",\n  {\n    variants: {\n      indicator: {\n        dot: \"\",\n        line: \"\",\n        dashed: \"\",\n      },\n    },\n    defaultVariants: {\n      indicator: \"dot\",\n    },\n  }\n)\n\n/**\n * Chart tooltip indicator style variants\n */\nexport const chartTooltipIndicatorVariants = cva(\n  // Base styles (always applied)\n  \"shrink-0 rounded-sm border-(--color-border) bg-(--color-bg)\",\n  {\n    variants: {\n      indicator: {\n        dot: \"size-[var(--chart-indicator-dot-size)]\",\n        line: \"w-[var(--chart-indicator-line-width)]\",\n        dashed: \"w-0 border-[1.5px] border-dashed bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      indicator: \"dot\",\n    },\n  }\n)\n\n/**\n * Chart legend style variants\n */\nexport const chartLegendVariants = cva(\n  // Base styles (always applied)\n  \"flex items-center justify-center gap-[var(--chart-legend-gap)]\",\n  {\n    variants: {\n      position: {\n        top: \"pb-[var(--chart-legend-padding)]\",\n        bottom: \"pt-[var(--chart-legend-padding)]\",\n      },\n    },\n    defaultVariants: {\n      position: \"bottom\",\n    },\n  }\n)\n\n// Export variant prop types\nexport type ChartContainerVariantProps = VariantProps<typeof chartContainerVariants>\nexport type ChartTooltipVariantProps = VariantProps<typeof chartTooltipVariants>\nexport type ChartTooltipIndicatorVariantProps = VariantProps<typeof chartTooltipIndicatorVariants>\nexport type ChartLegendVariantProps = VariantProps<typeof chartLegendVariants>\n","import type { NameType, Payload, ValueType } from \"recharts/types/component/DefaultTooltipContent\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  chartContainerVariants,\n  chartLegendVariants,\n  chartTooltipIndicatorVariants,\n  chartTooltipVariants,\n} from \"./Chart.variants\"\n\n// Helper to safely access fill from payload\nfunction getPayloadFill(item: Payload<ValueType, NameType>): string | undefined {\n  const payload = item.payload as undefined | { fill?: unknown }\n  const fill = payload?.fill\n  return typeof fill === \"string\" ? fill : undefined\n}\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = Record<string, {\n    icon?: React.ComponentType\n    label?: React.ReactNode\n  } & (\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n    | { color?: string; theme?: never }\n  )>\n\ninterface ChartContextProps {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.use(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n  config: ChartConfig\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id ?? uniqueId.replaceAll(':', \"\")}`\n\n  // Gate ResponsiveContainer until the wrapper has a measured size.\n  // Recharts emits a noisy \"width(-1) and height(-1)\" warning when it mounts\n  // inside a parent that hasn't been laid out yet (hidden tabs, off-screen\n  // demos, suspended subtrees). Deferring the mount until ResizeObserver\n  // reports a real size silences the warning without changing visual output.\n  //\n  // Threshold is 8px (not just `> 0`) because the base `chartContainerVariants`\n  // ships `min-h-px min-w-px` (1px floors), which would otherwise fire the\n  // gate too early — Recharts then mounts inside a 1×1 box and emits the\n  // warning anyway before remeasuring.\n  const wrapperRef = React.useRef<HTMLDivElement>(null)\n  const [hasSize, setHasSize] = React.useState(false)\n  React.useEffect(() => {\n    const el = wrapperRef.current\n    if (!el) return\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return\n      if (entry.contentRect.width > 8 && entry.contentRect.height > 8) {\n        setHasSize(true)\n      }\n    })\n    observer.observe(el)\n    return () => { observer.disconnect() }\n  }, [])\n\n  return (\n    <ChartContext value={{ config }}>\n      <div\n        ref={wrapperRef}\n        className={cn(\n          chartContainerVariants(),\n          className\n        )}\n        data-chart={chartId}\n        data-slot=\"chart\"\n        {...props}\n      >\n        <ChartStyle config={config} id={chartId} />\n        {hasSize && (\n          <RechartsPrimitive.ResponsiveContainer height=\"100%\" minHeight={1} minWidth={1} width=\"100%\">\n            {children}\n          </RechartsPrimitive.ResponsiveContainer>\n        )}\n      </div>\n    </ChartContext>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { config: ChartConfig; id: string; }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme ?? config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml -- Safe: CSS variables from config, no user input\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\ninterface ChartTooltipContentProps extends React.ComponentProps<\"div\"> {\n  active?: boolean\n  color?: string\n  formatter?: (value: unknown, name: string, item: Payload<ValueType, NameType>, index: number, payload: unknown) => React.ReactNode\n  hideIndicator?: boolean\n  hideLabel?: boolean\n  indicator?: \"dashed\" | \"dot\" | \"line\"\n  label?: string\n  labelClassName?: string\n  labelFormatter?: (label: unknown, payload: Payload<ValueType, NameType>[]) => React.ReactNode\n  labelKey?: string\n  nameKey?: string\n  payload?: Payload<ValueType, NameType>[]\n}\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: ChartTooltipContentProps) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = String(labelKey ?? item?.dataKey ?? item?.name ?? \"value\")\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label]?.label ?? label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        chartTooltipVariants({ indicator: nestLabel ? \"dashed\" : indicator }),\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        { }\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = String(nameKey ?? item.name ?? item.dataKey ?? \"value\")\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color ?? getPayloadFill(item) ?? item.color\n            const itemKey = `${String(item.dataKey ?? item.name ?? key)}-${String(index)}`\n\n            return (\n              <div\n                key={itemKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item.value !== undefined && item.name ? (\n                  formatter(item.value, String(item.name), item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            chartTooltipIndicatorVariants({\n                              indicator: nestLabel ? \"dashed\" : indicator,\n                            }),\n                            {\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label ?? item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\ninterface LegendPayloadItem {\n  color?: string\n  dataKey?: string\n  type?: string\n  value?: string\n}\n\ninterface ChartLegendContentProps extends React.ComponentProps<\"div\"> {\n  /** Currently active/selected legend items (for controlled filtering) */\n  activeLegend?: string[]\n  /** Enable slider/scroll for legends with many items */\n  enableSlider?: boolean\n  /** Hide the icon/indicator next to legend items */\n  hideIcon?: boolean\n  /** Key to use for legend item names */\n  nameKey?: string\n  /** Callback when a legend item is clicked (for interactive filtering) */\n  onLegendClick?: (dataKey: string, isActive: boolean) => void\n  /** Legend payload from Recharts */\n  payload?: LegendPayloadItem[]\n  /** Vertical alignment of the legend */\n  verticalAlign?: \"bottom\" | \"middle\" | \"top\"\n}\n\nfunction ChartLegendContent({\n  activeLegend,\n  className,\n  enableSlider = false,\n  hideIcon = false,\n  nameKey,\n  onLegendClick,\n  payload,\n  verticalAlign = \"bottom\",\n}: ChartLegendContentProps) {\n  const { config } = useChart()\n  const scrollRef = React.useRef<HTMLDivElement>(null)\n  const itemListRef = React.useRef<(HTMLDivElement | null)[]>([])\n\n  // Determine if an item is active (for interactive filtering)\n  const isItemActive = React.useCallback(\n    (dataKey: string) => {\n      if (!activeLegend) return true // All active if not controlled\n      return activeLegend.includes(dataKey)\n    },\n    [activeLegend]\n  )\n\n  // Handle keyboard navigation between legend items\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent, index: number, dataKey: string, isActive: boolean) => {\n      const filteredPayload = payload?.filter((item) => item.type !== \"none\") ?? []\n      const itemCount = filteredPayload.length\n\n      switch (e.key) {\n        case \"Enter\":\n        case \" \":\n          e.preventDefault()\n          onLegendClick?.(dataKey, isActive)\n          break\n        case \"ArrowRight\":\n        case \"ArrowDown\": {\n          e.preventDefault()\n          const nextIndex = (index + 1) % itemCount\n          itemListRef.current[nextIndex]?.focus()\n          break\n        }\n        case \"ArrowLeft\":\n        case \"ArrowUp\": {\n          e.preventDefault()\n          const prevIndex = (index - 1 + itemCount) % itemCount\n          itemListRef.current[prevIndex]?.focus()\n          break\n        }\n        case \"Home\":\n          e.preventDefault()\n          itemListRef.current[0]?.focus()\n          break\n        case \"End\":\n          e.preventDefault()\n          itemListRef.current[itemCount - 1]?.focus()\n          break\n      }\n    },\n    [payload, onLegendClick]\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const isInteractive = Boolean(onLegendClick)\n  const filteredPayload = payload.filter((item) => item.type !== \"none\")\n\n  return (\n    <div\n      ref={scrollRef}\n      className={cn(\n        chartLegendVariants({ position: verticalAlign === \"top\" ? \"top\" : \"bottom\" }),\n        enableSlider && \"overflow-x-auto\",\n        className\n      )}\n      aria-label={isInteractive ? \"Chart legend filters\" : undefined}\n      role={isInteractive ? \"toolbar\" : undefined}\n    >\n      {filteredPayload.map((item, index) => {\n          const key = nameKey ?? item.dataKey ?? \"value\"\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n          const dataKey = item.dataKey ?? item.value ?? key\n          const isActive = isItemActive(dataKey)\n          const itemKey = `${dataKey}-${String(index)}`\n\n          return (\n            <div\n              key={itemKey}\n              ref={(el) => { itemListRef.current[index] = el }}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\",\n                isInteractive && \"cursor-pointer select-none transition-opacity\",\n                isInteractive && !isActive && \"opacity-40\"\n              )}\n              aria-pressed={isInteractive ? isActive : undefined}\n              role={isInteractive ? \"button\" : undefined}\n              tabIndex={isInteractive ? 0 : undefined}\n              onClick={\n                isInteractive\n                  ? () => onLegendClick?.(dataKey, isActive)\n                  : undefined\n              }\n              onKeyDown={\n                isInteractive\n                  ? (e) => { handleKeyDown(e, index, dataKey, isActive); }\n                  : undefined\n              }\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className={cn(\n                    \"h-2 w-2 shrink-0 rounded-sm transition-colors\",\n                    !isActive && \"bg-muted\"\n                  )}\n                  style={{\n                    backgroundColor: isActive ? item.color : undefined,\n                  }}\n                />\n              )}\n              <span className={cn(!isActive && \"text-muted-foreground\")}>\n                {itemConfig?.label}\n              </span>\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key]\n}\n\nexport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n}\n\nexport type { ChartTooltipContentProps }\n"]}

package/dist/chunk-7RTHGI6E.js

@@ -0,0 +1,154 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var skipLinkVariants = cva(
+  [
+    // Base styles
+    // Skip links must sit above all chrome (modals, overlays, toasts) so use the
+    // top of the z scale (--z-toast = 700).
+    "absolute z-[var(--z-toast)]",
+    "px-4 py-3 text-sm font-medium",
+    "rounded-md shadow-lg",
+    // Transition
+    "transition-all duration-200",
+    // Focus styles
+    "focus:outline-none focus:ring-2 focus:ring-offset-2",
+    // Hidden by default, visible on focus
+    "-top-full focus:top-4"
+  ],
+  {
+    variants: {
+      position: {
+        "top-left": "left-4",
+        "top-center": "left-1/2 -translate-x-1/2",
+        "top-right": "right-4"
+      },
+      variant: {
+        default: "bg-background text-foreground border border-border focus:ring-ring",
+        primary: "bg-primary text-primary-foreground focus:ring-primary"
+      },
+      alwaysVisible: {
+        true: "top-4",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      position: "top-left",
+      variant: "default",
+      alwaysVisible: false
+    }
+  }
+);
+var skipLinksListVariants = cva([
+  // Skip links must sit above all chrome (modals, overlays, toasts) so use the
+  // top of the z scale (--z-toast = 700).
+  "fixed z-[var(--z-toast)]"
+]);
+var skipLinksListInnerVariants = cva(
+  [
+    // Base styles
+    "absolute",
+    "flex flex-col gap-4",
+    "p-2 rounded-lg shadow-lg",
+    "bg-background border border-border",
+    // Transition
+    "transition-all duration-200",
+    // Hidden by default
+    "-top-full opacity-0 pointer-events-none",
+    // Visible when has focus within
+    "focus-within:top-4 focus-within:opacity-100 focus-within:pointer-events-auto"
+  ],
+  {
+    variants: {
+      position: {
+        "top-left": "left-4",
+        "top-center": "left-1/2 -translate-x-1/2",
+        "top-right": "right-4"
+      }
+    },
+    defaultVariants: {
+      position: "top-left"
+    }
+  }
+);
+var skipLinksListItemVariants = cva(
+  [
+    "block px-3 py-1.5 text-sm font-medium rounded",
+    "text-foreground hover:bg-accent",
+    "focus:outline-none focus:bg-accent focus:ring-2 focus:ring-ring",
+    "transition-colors"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        primary: "hover:bg-primary/10 focus:bg-primary/10"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function SkipLink({
+  className,
+  targetId,
+  children = "Skip to main content",
+  alwaysVisible = false,
+  position = "top-left",
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: cn(
+        skipLinkVariants({ position, variant, alwaysVisible }),
+        className
+      ),
+      "data-slot": "skip-link",
+      href: `#${targetId}`,
+      ...props,
+      children
+    }
+  );
+}
+function SkipLinksList({
+  className,
+  links,
+  position = "top-left",
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Skip links",
+      className: cn(skipLinksListVariants(), className),
+      "data-slot": "skip-links-list",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: skipLinksListInnerVariants({ position }),
+          "data-slot": "skip-links-list-inner",
+          children: links.map((link) => /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: skipLinksListItemVariants({ variant }),
+              "data-slot": "skip-links-list-item",
+              href: `#${link.targetId}`,
+              children: link.label
+            },
+            link.targetId
+          ))
+        }
+      )
+    }
+  );
+}
+
+export { SkipLink, SkipLinksList, skipLinkVariants, skipLinksListInnerVariants, skipLinksListItemVariants, skipLinksListVariants };
+//# sourceMappingURL=chunk-7RTHGI6E.js.map
+//# sourceMappingURL=chunk-7RTHGI6E.js.map

package/dist/chunk-7RTHGI6E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/SkipLinks/SkipLinks.variants.ts","../src/components/navigation/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"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","file":"chunk-7RTHGI6E.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * SkipLink variant styles\n */\nexport const skipLinkVariants = cva(\n  [\n    // Base styles\n    // Skip links must sit above all chrome (modals, overlays, toasts) so use the\n    // top of the z scale (--z-toast = 700).\n    \"absolute z-[var(--z-toast)]\",\n    \"px-4 py-3 text-sm font-medium\",\n    \"rounded-md shadow-lg\",\n    // Transition\n    \"transition-all duration-200\",\n    // Focus styles\n    \"focus:outline-none focus:ring-2 focus:ring-offset-2\",\n    // Hidden by default, visible on focus\n    \"-top-full focus:top-4\",\n  ],\n  {\n    variants: {\n      position: {\n        \"top-left\": \"left-4\",\n        \"top-center\": \"left-1/2 -translate-x-1/2\",\n        \"top-right\": \"right-4\",\n      },\n      variant: {\n        default: \"bg-background text-foreground border border-border focus:ring-ring\",\n        primary: \"bg-primary text-primary-foreground focus:ring-primary\",\n      },\n      alwaysVisible: {\n        true: \"top-4\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      position: \"top-left\",\n      variant: \"default\",\n      alwaysVisible: false,\n    },\n  }\n)\n\n/**\n * SkipLinksList container variant styles\n */\nexport const skipLinksListVariants = cva([\n  // Skip links must sit above all chrome (modals, overlays, toasts) so use the\n  // top of the z scale (--z-toast = 700).\n  \"fixed z-[var(--z-toast)]\",\n])\n\n/**\n * SkipLinksList inner container variant styles\n */\nexport const skipLinksListInnerVariants = cva(\n  [\n    // Base styles\n    \"absolute\",\n    \"flex flex-col gap-4\",\n    \"p-2 rounded-lg shadow-lg\",\n    \"bg-background border border-border\",\n    // Transition\n    \"transition-all duration-200\",\n    // Hidden by default\n    \"-top-full opacity-0 pointer-events-none\",\n    // Visible when has focus within\n    \"focus-within:top-4 focus-within:opacity-100 focus-within:pointer-events-auto\",\n  ],\n  {\n    variants: {\n      position: {\n        \"top-left\": \"left-4\",\n        \"top-center\": \"left-1/2 -translate-x-1/2\",\n        \"top-right\": \"right-4\",\n      },\n    },\n    defaultVariants: {\n      position: \"top-left\",\n    },\n  }\n)\n\n/**\n * SkipLinksList item variant styles\n */\nexport const skipLinksListItemVariants = cva(\n  [\n    \"block px-3 py-1.5 text-sm font-medium rounded\",\n    \"text-foreground hover:bg-accent\",\n    \"focus:outline-none focus:bg-accent focus:ring-2 focus:ring-ring\",\n    \"transition-colors\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        primary: \"hover:bg-primary/10 focus:bg-primary/10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n","\"use client\"\n\nimport type {\n  SkipLinkProps,\n  SkipLinksListProps,\n} from \"./SkipLinks.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  skipLinksListInnerVariants,\n  skipLinksListItemVariants,\n  skipLinksListVariants,\n  skipLinkVariants,\n} from \"./SkipLinks.variants\"\n\n/**\n * SkipLink - An accessibility link that allows users to skip repetitive navigation.\n *\n * Should be the first focusable element on the page. Hidden by default,\n * becomes visible when focused.\n *\n * @example\n * <SkipLink targetId=\"main-content\">\n *   Skip to main content\n * </SkipLink>\n *\n * <main id=\"main-content\" tabIndex={-1}>\n *   Content here\n * </main>\n */\nfunction SkipLink({\n  className,\n  targetId,\n  children = \"Skip to main content\",\n  alwaysVisible = false,\n  position = \"top-left\",\n  variant = \"default\",\n  ...props\n}: SkipLinkProps) {\n  return (\n    <a\n      className={cn(\n        skipLinkVariants({ position, variant, alwaysVisible }),\n        className\n      )}\n      data-slot=\"skip-link\"\n      href={`#${targetId}`}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\n/**\n * SkipLinksList - Multiple skip links for complex layouts.\n *\n * Renders a navigation container with multiple skip links.\n * Container becomes visible when any link receives focus.\n *\n * @example\n * <SkipLinksList\n *   links={[\n *     { targetId: \"main-content\", label: \"Skip to main content\" },\n *     { targetId: \"navigation\", label: \"Skip to navigation\" },\n *     { targetId: \"footer\", label: \"Skip to footer\" },\n *   ]}\n * />\n */\nfunction SkipLinksList({\n  className,\n  links,\n  position = \"top-left\",\n  variant = \"default\",\n  ...props\n}: SkipLinksListProps) {\n  return (\n    <nav\n      aria-label=\"Skip links\"\n      className={cn(skipLinksListVariants(), className)}\n      data-slot=\"skip-links-list\"\n      {...props}\n    >\n      <div\n        className={skipLinksListInnerVariants({ position })}\n        data-slot=\"skip-links-list-inner\"\n      >\n        {links.map((link) => (\n          <a\n            key={link.targetId}\n            className={skipLinksListItemVariants({ variant })}\n            data-slot=\"skip-links-list-item\"\n            href={`#${link.targetId}`}\n          >\n            {link.label}\n          </a>\n        ))}\n      </div>\n    </nav>\n  )\n}\n\nexport { SkipLink, SkipLinksList }\n"]}