@etus/ui 0.4.0-beta.1 → 0.4.0-beta.3

package/dist/chunk-7BAL24EU.js

@@ -0,0 +1,204 @@
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from './chunk-KNH7JW6E.js';
+import { buttonVariants } from './chunk-RPV77BCQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { LoaderCircle } from 'lucide-react';
+import * as React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function ConfirmButton({
+  // Trigger button props
+  className,
+  variant,
+  size,
+  leftIcon,
+  rightIcon,
+  disabled,
+  children,
+  // Dialog configuration
+  confirmTitle = "Confirm action",
+  confirmDescription,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  confirmVariant = "default",
+  // Typing validation
+  requireTyping,
+  typingPlaceholder,
+  typingLabel,
+  caseSensitive = true,
+  // States
+  loading = false,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  // Callbacks
+  onConfirm,
+  onCancel,
+  ...props
+}) {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const [typingValue, setTypingValue] = React.useState("");
+  const [isConfirming, setIsConfirming] = React.useState(false);
+  const confirmingRef = React.useRef(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = React.useCallback(
+    (value) => {
+      if (isControlled) {
+        controlledOnOpenChange?.(value);
+      } else {
+        setInternalOpen(value);
+      }
+    },
+    [isControlled, controlledOnOpenChange]
+  );
+  const prevOpenRef = React.useRef(open);
+  if (prevOpenRef.current !== open) {
+    prevOpenRef.current = open;
+    if (!open) {
+      setTypingValue("");
+      confirmingRef.current = false;
+    }
+  }
+  const typingMatches = React.useMemo(() => {
+    if (!requireTyping) return true;
+    if (caseSensitive) {
+      return typingValue === requireTyping;
+    }
+    return typingValue.toLowerCase() === requireTyping.toLowerCase();
+  }, [requireTyping, typingValue, caseSensitive]);
+  const isLoading = loading || isConfirming;
+  const confirmDisabled = isLoading || !typingMatches;
+  const cancelTriggeredRef = React.useRef(false);
+  const handleOpenChange = React.useCallback(
+    (newOpen) => {
+      if (isConfirming && !newOpen) return;
+      setOpen(newOpen);
+      if (!newOpen && !cancelTriggeredRef.current) {
+        onCancel?.();
+      }
+      cancelTriggeredRef.current = false;
+    },
+    [setOpen, onCancel, isConfirming]
+  );
+  const handleCancel = React.useCallback(() => {
+    cancelTriggeredRef.current = true;
+    onCancel?.();
+    setOpen(false);
+  }, [setOpen, onCancel]);
+  const handleConfirm = React.useCallback(
+    async (event) => {
+      event.preventDefault();
+      if (confirmingRef.current) return;
+      confirmingRef.current = true;
+      setIsConfirming(true);
+      try {
+        await onConfirm();
+        setOpen(false);
+      } catch {
+        confirmingRef.current = false;
+      } finally {
+        setIsConfirming(false);
+      }
+    },
+    [onConfirm, setOpen]
+  );
+  const renderTriggerContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    leftIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "left-icon", children: leftIcon }),
+    children,
+    rightIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "right-icon", children: rightIcon })
+  ] });
+  return /* @__PURE__ */ jsxs(AlertDialog, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-disabled": disabled ?? void 0,
+        className: cn(buttonVariants({ variant, size, className })),
+        "data-slot": "confirm-button",
+        disabled,
+        type: "button",
+        ...props,
+        children: renderTriggerContent()
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(AlertDialogContent, { "data-slot": "confirm-dialog", children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { "data-slot": "confirm-dialog-header", children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { "data-slot": "confirm-dialog-title", children: confirmTitle }),
+        confirmDescription ? /* @__PURE__ */ jsx(AlertDialogDescription, { "data-slot": "confirm-dialog-description", children: confirmDescription }) : /* @__PURE__ */ jsx(AlertDialogDescription, { className: "sr-only", children: "Confirm or cancel this action." })
+      ] }),
+      requireTyping && /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-slot": "confirm-dialog-content", children: [
+        typingLabel && /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: "text-sm font-medium text-foreground",
+            htmlFor: "confirm-typing-input",
+            children: typingLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-describedby": !typingMatches ? "confirm-typing-error" : void 0,
+            autoComplete: "off",
+            className: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            "data-slot": "confirm-dialog-input",
+            id: "confirm-typing-input",
+            placeholder: typingPlaceholder ?? requireTyping,
+            type: "text",
+            value: typingValue,
+            onChange: (e) => {
+              setTypingValue(e.target.value);
+            }
+          }
+        ),
+        typingValue && !typingMatches && /* @__PURE__ */ jsx(
+          "p",
+          {
+            "aria-live": "polite",
+            className: "text-sm text-destructive",
+            id: "confirm-typing-error",
+            children: "The text you entered does not match."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { "data-slot": "confirm-dialog-footer", children: [
+        /* @__PURE__ */ jsx(
+          AlertDialogCancel,
+          {
+            "data-slot": "confirm-dialog-cancel",
+            disabled: isLoading,
+            onClick: handleCancel,
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          AlertDialogAction,
+          {
+            className: cn(
+              confirmVariant === "destructive" && "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40"
+            ),
+            "aria-busy": isLoading || void 0,
+            "aria-disabled": confirmDisabled || void 0,
+            "data-slot": "confirm-dialog-confirm",
+            disabled: confirmDisabled,
+            onClick: (e) => {
+              void handleConfirm(e);
+            },
+            children: [
+              isLoading && /* @__PURE__ */ jsx(
+                LoaderCircle,
+                {
+                  "aria-hidden": "true",
+                  className: "size-4 animate-spin"
+                }
+              ),
+              confirmLabel
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+export { ConfirmButton };
+//# sourceMappingURL=chunk-7BAL24EU.js.map
+//# sourceMappingURL=chunk-7BAL24EU.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/ConfirmButton/ConfirmButton.tsx"],"names":[],"mappings":"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","file":"chunk-7BAL24EU.js","sourcesContent":["\"use client\"\n\nimport type { ConfirmButtonProps } from \"./ConfirmButton.types\"\n\nimport { LoaderCircle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"../../feedback/AlertDialog\"\nimport { buttonVariants } from \"../Button\"\n\n/**\n * ConfirmButton - A button that requires confirmation before executing an action\n *\n * Combines a Button trigger with an AlertDialog for confirmation.\n * Supports typing validation for critical actions.\n *\n * @example\n * ```tsx\n * <ConfirmButton\n *   variant=\"destructive\"\n *   confirmTitle=\"Delete item?\"\n *   confirmDescription=\"This action cannot be undone.\"\n *   onConfirm={() => handleDelete()}\n * >\n *   Delete\n * </ConfirmButton>\n * ```\n */\nfunction ConfirmButton({\n  // Trigger button props\n  className,\n  variant,\n  size,\n  leftIcon,\n  rightIcon,\n  disabled,\n  children,\n\n  // Dialog configuration\n  confirmTitle = \"Confirm action\",\n  confirmDescription,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  confirmVariant = \"default\",\n\n  // Typing validation\n  requireTyping,\n  typingPlaceholder,\n  typingLabel,\n  caseSensitive = true,\n\n  // States\n  loading = false,\n  open: controlledOpen,\n  onOpenChange: controlledOnOpenChange,\n\n  // Callbacks\n  onConfirm,\n  onCancel,\n\n  ...props\n}: ConfirmButtonProps) {\n  // Internal open state (uncontrolled mode)\n  const [internalOpen, setInternalOpen] = React.useState(false)\n\n  // Typing input value\n  const [typingValue, setTypingValue] = React.useState(\"\")\n\n  // Internal loading state for async onConfirm\n  const [isConfirming, setIsConfirming] = React.useState(false)\n\n  // Prevent double confirmation\n  const confirmingRef = React.useRef(false)\n\n  // Determine if controlled or uncontrolled\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : internalOpen\n  const setOpen = React.useCallback(\n    (value: boolean) => {\n      if (isControlled) {\n        controlledOnOpenChange?.(value)\n      } else {\n        setInternalOpen(value)\n      }\n    },\n    [isControlled, controlledOnOpenChange]\n  )\n\n  // Track previous open state to reset typing during render (avoids useEffect anti-pattern)\n  const prevOpenRef = React.useRef(open)\n  if (prevOpenRef.current !== open) {\n    prevOpenRef.current = open\n    if (!open) {\n      setTypingValue(\"\")\n      confirmingRef.current = false\n    }\n  }\n\n  // Check if typing matches requirement\n  const typingMatches = React.useMemo(() => {\n    if (!requireTyping) return true\n\n    if (caseSensitive) {\n      return typingValue === requireTyping\n    }\n    return typingValue.toLowerCase() === requireTyping.toLowerCase()\n  }, [requireTyping, typingValue, caseSensitive])\n\n  // Combined loading state\n  const isLoading = loading || isConfirming\n\n  // Confirm button should be disabled when loading or typing doesn't match\n  const confirmDisabled = isLoading || !typingMatches\n\n  // Track if cancel was triggered by button click\n  const cancelTriggeredRef = React.useRef(false)\n\n  // Handle dialog open change\n  const handleOpenChange = React.useCallback(\n    (newOpen: boolean) => {\n      // Don't allow closing while confirming\n      if (isConfirming && !newOpen) return\n\n      setOpen(newOpen)\n\n      // Only call onCancel if dialog is closing and cancel wasn't already triggered\n      if (!newOpen && !cancelTriggeredRef.current) {\n        onCancel?.()\n      }\n\n      // Reset the flag after processing\n      cancelTriggeredRef.current = false\n    },\n    [setOpen, onCancel, isConfirming]\n  )\n\n  // Handle cancel button click\n  const handleCancel = React.useCallback(() => {\n    cancelTriggeredRef.current = true\n    onCancel?.()\n    setOpen(false)\n  }, [setOpen, onCancel])\n\n  // Handle confirm button click\n  const handleConfirm = React.useCallback(\n    async (event: React.MouseEvent) => {\n      // Prevent default AlertDialog behavior (auto-close)\n      event.preventDefault()\n\n      // Prevent double confirmation\n      if (confirmingRef.current) return\n      confirmingRef.current = true\n\n      setIsConfirming(true)\n\n      try {\n        await onConfirm()\n        // Close dialog on success\n        setOpen(false)\n      } catch {\n        // Keep dialog open on error, allow retry\n        confirmingRef.current = false\n        // Error is not rethrown - caller should handle errors in onConfirm\n      } finally {\n        setIsConfirming(false)\n      }\n    },\n    [onConfirm, setOpen]\n  )\n\n  // Render trigger button content\n  const renderTriggerContent = () => (\n    <>\n      {leftIcon && (\n        <span aria-hidden=\"true\" data-slot=\"left-icon\">\n          {leftIcon}\n        </span>\n      )}\n      {children}\n      {rightIcon && (\n        <span aria-hidden=\"true\" data-slot=\"right-icon\">\n          {rightIcon}\n        </span>\n      )}\n    </>\n  )\n\n  return (\n    <AlertDialog open={open} onOpenChange={handleOpenChange}>\n      <AlertDialogTrigger asChild>\n        <button\n          aria-disabled={disabled ?? undefined}\n          className={cn(buttonVariants({ variant, size, className }))}\n          data-slot=\"confirm-button\"\n          disabled={disabled}\n          type=\"button\"\n          {...props}\n        >\n          {renderTriggerContent()}\n        </button>\n      </AlertDialogTrigger>\n\n      <AlertDialogContent data-slot=\"confirm-dialog\">\n        <AlertDialogHeader data-slot=\"confirm-dialog-header\">\n          <AlertDialogTitle data-slot=\"confirm-dialog-title\">\n            {confirmTitle}\n          </AlertDialogTitle>\n          {confirmDescription ? (\n            <AlertDialogDescription data-slot=\"confirm-dialog-description\">\n              {confirmDescription}\n            </AlertDialogDescription>\n          ) : (\n            <AlertDialogDescription className=\"sr-only\">\n              Confirm or cancel this action.\n            </AlertDialogDescription>\n          )}\n        </AlertDialogHeader>\n\n        {requireTyping && (\n          <div className=\"space-y-2\" data-slot=\"confirm-dialog-content\">\n            {typingLabel && (\n              <label\n                className=\"text-sm font-medium text-foreground\"\n                htmlFor=\"confirm-typing-input\"\n              >\n                {typingLabel}\n              </label>\n            )}\n            <input\n              aria-describedby={\n                !typingMatches ? \"confirm-typing-error\" : undefined\n              }\n              autoComplete=\"off\"\n              className=\"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\"\n              data-slot=\"confirm-dialog-input\"\n              id=\"confirm-typing-input\"\n              placeholder={typingPlaceholder ?? requireTyping}\n              type=\"text\"\n              value={typingValue}\n              onChange={(e) => { setTypingValue(e.target.value); }}\n            />\n            {typingValue && !typingMatches && (\n              <p\n                aria-live=\"polite\"\n                className=\"text-sm text-destructive\"\n                id=\"confirm-typing-error\"\n              >\n                The text you entered does not match.\n              </p>\n            )}\n          </div>\n        )}\n\n        <AlertDialogFooter data-slot=\"confirm-dialog-footer\">\n          <AlertDialogCancel\n            data-slot=\"confirm-dialog-cancel\"\n            disabled={isLoading}\n            onClick={handleCancel}\n          >\n            {cancelLabel}\n          </AlertDialogCancel>\n          <AlertDialogAction\n            className={cn(\n              confirmVariant === \"destructive\" &&\n                \"bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\"\n            )}\n            aria-busy={isLoading || undefined}\n            aria-disabled={confirmDisabled || undefined}\n            data-slot=\"confirm-dialog-confirm\"\n            disabled={confirmDisabled}\n            onClick={(e) => { void handleConfirm(e); }}\n          >\n            {isLoading && (\n              <LoaderCircle\n                aria-hidden=\"true\"\n                className=\"size-4 animate-spin\"\n              />\n            )}\n            {confirmLabel}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n\nexport { ConfirmButton }\n"]}

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