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

package/dist/chunk-3JCV72FO.js

@@ -0,0 +1,288 @@
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var progressBarVariants = cva(
+  "relative w-full overflow-hidden rounded-[var(--progress-bar-root-border-radius)]",
+  {
+    variants: {
+      /**
+       * Size variant for the progress bar height
+       */
+      size: {
+        xs: "h-[var(--progress-bar-size-xs-height)]",
+        sm: "h-[var(--progress-bar-size-sm-height)]",
+        md: "h-[var(--progress-bar-size-md-height)]",
+        lg: "h-[var(--progress-bar-size-lg-height)]",
+        xl: "h-[var(--progress-bar-size-xl-height)]"
+      },
+      /**
+       * Color variant for the progress bar
+       * Affects both track and indicator colors
+       */
+      color: {
+        default: "bg-[color:var(--progress-bar-track-color-default)]",
+        primary: "bg-[color:var(--progress-bar-track-color-primary)]",
+        secondary: "bg-[color:var(--progress-bar-track-color-secondary)]",
+        info: "bg-[color:var(--progress-bar-track-color-info)]",
+        success: "bg-[color:var(--progress-bar-track-color-success)]",
+        warning: "bg-[color:var(--progress-bar-track-color-warning)]",
+        error: "bg-[color:var(--progress-bar-track-color-error)]"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "default"
+    }
+  }
+);
+var progressBarIndicatorVariants = cva(
+  "h-full w-full flex-1 rounded-[var(--progress-bar-indicator-border-radius)] transition-all duration-700 ease-out motion-reduce:transition-none",
+  {
+    variants: {
+      /**
+       * Color variant for the indicator fill
+       */
+      color: {
+        default: "bg-[color:var(--progress-bar-fill-color-default)]",
+        primary: "bg-[color:var(--progress-bar-fill-color-primary)]",
+        secondary: "bg-[color:var(--progress-bar-fill-color-secondary)]",
+        info: "bg-[color:var(--progress-bar-fill-color-info)]",
+        success: "bg-[color:var(--progress-bar-fill-color-success)]",
+        warning: "bg-[color:var(--progress-bar-fill-color-warning)]",
+        error: "bg-[color:var(--progress-bar-fill-color-error)]"
+      }
+    },
+    defaultVariants: {
+      color: "default"
+    }
+  }
+);
+var progressBarLabelVariants = cva(
+  "text-[length:var(--progress-bar-label-text-font-size)] font-[var(--progress-bar-label-text-font-weight)] [font-variant-numeric:var(--progress-bar-label-text-tabular-nums)]",
+  {
+    variants: {
+      /**
+       * Label position relative to the progress bar
+       */
+      position: {
+        none: "sr-only",
+        right: "ml-[var(--progress-bar-label-position-right-margin-left)] shrink-0 text-[color:var(--progress-bar-label-position-right-color)]",
+        bottom: "mt-[var(--progress-bar-label-position-bottom-margin-top)] text-[color:var(--progress-bar-label-position-bottom-color)]",
+        "top-floating": "absolute -top-8 text-[color:var(--progress-bar-label-position-floating-color)]",
+        "bottom-floating": "absolute -bottom-8 text-[color:var(--progress-bar-label-position-floating-color)]"
+      }
+    },
+    defaultVariants: {
+      position: "none"
+    }
+  }
+);
+var progressBarTooltipVariants = cva(
+  [
+    "absolute z-10 px-2 py-1 text-xs font-medium tabular-nums",
+    "rounded-md border bg-background text-foreground shadow-sm",
+    "transition-all duration-150 ease-out",
+    "-translate-x-1/2"
+  ],
+  {
+    variants: {
+      /**
+       * Tooltip position
+       */
+      position: {
+        top: "-top-9",
+        bottom: "-bottom-9"
+      }
+    },
+    defaultVariants: {
+      position: "top"
+    }
+  }
+);
+var defaultFormatValue = (value) => `${String(value)}%`;
+function ProgressBarLabel({
+  value,
+  position,
+  formatValue = defaultFormatValue,
+  progressPercent
+}) {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  const formattedValue = formatValue(value);
+  if (position === "top-floating" || position === "bottom-floating") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          progressBarTooltipVariants({
+            position: position === "top-floating" ? "top" : "bottom"
+          })
+        ),
+        "data-slot": "progress-bar-tooltip",
+        style: { left: `${String(progressPercent)}%` },
+        children: formattedValue
+      }
+    );
+  }
+  if (position === "bottom") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(progressBarLabelVariants({ position: "bottom" }), "block"),
+        "data-slot": "progress-bar-label",
+        children: formattedValue
+      }
+    );
+  }
+  if (position === "none") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: progressBarLabelVariants({ position: "none" }),
+        "data-slot": "progress-bar-label",
+        children: formattedValue
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: progressBarLabelVariants({ position: "right" }),
+      "data-slot": "progress-bar-label",
+      children: formattedValue
+    }
+  );
+}
+function ProgressBar({
+  className,
+  value,
+  max = 100,
+  size,
+  color,
+  label = "none",
+  formatValue,
+  showValue,
+  animate = true,
+  tooltip,
+  ref,
+  ...props
+}) {
+  const progressPercent = value !== null && value !== void 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+  const [isVisible, setIsVisible] = React.useState(!animate);
+  const internalRef = React.useRef(null);
+  const progressRef = ref ?? internalRef;
+  React.useEffect(() => {
+    if (!animate || isVisible) {
+      return;
+    }
+    const element = typeof progressRef === "function" ? null : progressRef.current;
+    if (!element) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting) {
+          requestAnimationFrame(() => {
+            setIsVisible(true);
+          });
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [animate, isVisible, progressRef]);
+  const shouldShowValue = showValue ?? label !== "none";
+  const displayPercent = isVisible ? progressPercent : 0;
+  const wrapWithTooltip = (element) => {
+    if (!tooltip) return element;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: element }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+    ] });
+  };
+  const progressBar = /* @__PURE__ */ jsxs(
+    ProgressPrimitive.Root,
+    {
+      ref: progressRef,
+      className: cn(
+        progressBarVariants({ size, color }),
+        className
+      ),
+      "data-slot": "progress-bar",
+      max,
+      value: value != null ? Math.min(Math.max(0, value), max) : null,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ProgressPrimitive.Indicator,
+          {
+            className: cn(progressBarIndicatorVariants({ color })),
+            "data-slot": "progress-bar-indicator",
+            style: { transform: `translateX(-${String(100 - displayPercent)}%)` }
+          }
+        ),
+        (label === "top-floating" || label === "bottom-floating") && shouldShowValue && /* @__PURE__ */ jsx(
+          ProgressBarLabel,
+          {
+            formatValue,
+            position: label,
+            progressPercent,
+            value
+          }
+        )
+      ]
+    }
+  );
+  if (label === "right") {
+    return wrapWithTooltip(
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center", "data-slot": "progress-bar-container", children: [
+        progressBar,
+        shouldShowValue && /* @__PURE__ */ jsx(
+          ProgressBarLabel,
+          {
+            formatValue,
+            position: label,
+            progressPercent,
+            value
+          }
+        )
+      ] })
+    );
+  }
+  if (label === "bottom") {
+    return wrapWithTooltip(
+      /* @__PURE__ */ jsxs("div", { "data-slot": "progress-bar-container", children: [
+        progressBar,
+        shouldShowValue && /* @__PURE__ */ jsx(
+          ProgressBarLabel,
+          {
+            formatValue,
+            position: label,
+            progressPercent,
+            value
+          }
+        )
+      ] })
+    );
+  }
+  if (label === "top-floating" || label === "bottom-floating") {
+    return wrapWithTooltip(
+      /* @__PURE__ */ jsx("div", { className: "relative", "data-slot": "progress-bar-container", children: progressBar })
+    );
+  }
+  return wrapWithTooltip(progressBar);
+}
+
+export { ProgressBar, progressBarIndicatorVariants, progressBarLabelVariants, progressBarTooltipVariants, progressBarVariants };
+//# sourceMappingURL=chunk-3JCV72FO.js.map
+//# sourceMappingURL=chunk-3JCV72FO.js.map

package/dist/chunk-3JCV72FO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/ProgressBar/ProgressBar.variants.ts","../src/components/primitives/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"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","file":"chunk-3JCV72FO.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * ProgressBar root (track) variants\n */\nexport const progressBarVariants = cva(\n  \"relative w-full overflow-hidden rounded-[var(--progress-bar-root-border-radius)]\",\n  {\n    variants: {\n      /**\n       * Size variant for the progress bar height\n       */\n      size: {\n        xs: \"h-[var(--progress-bar-size-xs-height)]\",\n        sm: \"h-[var(--progress-bar-size-sm-height)]\",\n        md: \"h-[var(--progress-bar-size-md-height)]\",\n        lg: \"h-[var(--progress-bar-size-lg-height)]\",\n        xl: \"h-[var(--progress-bar-size-xl-height)]\",\n      },\n      /**\n       * Color variant for the progress bar\n       * Affects both track and indicator colors\n       */\n      color: {\n        default: \"bg-[color:var(--progress-bar-track-color-default)]\",\n        primary: \"bg-[color:var(--progress-bar-track-color-primary)]\",\n        secondary: \"bg-[color:var(--progress-bar-track-color-secondary)]\",\n        info: \"bg-[color:var(--progress-bar-track-color-info)]\",\n        success: \"bg-[color:var(--progress-bar-track-color-success)]\",\n        warning: \"bg-[color:var(--progress-bar-track-color-warning)]\",\n        error: \"bg-[color:var(--progress-bar-track-color-error)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      color: \"default\",\n    },\n  }\n)\n\n/**\n * ProgressBar indicator (fill) variants\n */\nexport const progressBarIndicatorVariants = cva(\n  \"h-full w-full flex-1 rounded-[var(--progress-bar-indicator-border-radius)] transition-all duration-700 ease-out motion-reduce:transition-none\",\n  {\n    variants: {\n      /**\n       * Color variant for the indicator fill\n       */\n      color: {\n        default: \"bg-[color:var(--progress-bar-fill-color-default)]\",\n        primary: \"bg-[color:var(--progress-bar-fill-color-primary)]\",\n        secondary: \"bg-[color:var(--progress-bar-fill-color-secondary)]\",\n        info: \"bg-[color:var(--progress-bar-fill-color-info)]\",\n        success: \"bg-[color:var(--progress-bar-fill-color-success)]\",\n        warning: \"bg-[color:var(--progress-bar-fill-color-warning)]\",\n        error: \"bg-[color:var(--progress-bar-fill-color-error)]\",\n      },\n    },\n    defaultVariants: {\n      color: \"default\",\n    },\n  }\n)\n\n/**\n * Label container variants for different positions\n */\nexport const progressBarLabelVariants = cva(\n  \"text-[length:var(--progress-bar-label-text-font-size)] font-[var(--progress-bar-label-text-font-weight)] [font-variant-numeric:var(--progress-bar-label-text-tabular-nums)]\",\n  {\n    variants: {\n      /**\n       * Label position relative to the progress bar\n       */\n      position: {\n        none: \"sr-only\",\n        right: \"ml-[var(--progress-bar-label-position-right-margin-left)] shrink-0 text-[color:var(--progress-bar-label-position-right-color)]\",\n        bottom: \"mt-[var(--progress-bar-label-position-bottom-margin-top)] text-[color:var(--progress-bar-label-position-bottom-color)]\",\n        \"top-floating\": \"absolute -top-8 text-[color:var(--progress-bar-label-position-floating-color)]\",\n        \"bottom-floating\": \"absolute -bottom-8 text-[color:var(--progress-bar-label-position-floating-color)]\",\n      },\n    },\n    defaultVariants: {\n      position: \"none\",\n    },\n  }\n)\n\n/**\n * Floating tooltip variants (for top-floating and bottom-floating)\n */\nexport const progressBarTooltipVariants = cva(\n  [\n    \"absolute z-10 px-2 py-1 text-xs font-medium tabular-nums\",\n    \"rounded-md border bg-background text-foreground shadow-sm\",\n    \"transition-all duration-150 ease-out\",\n    \"-translate-x-1/2\",\n  ],\n  {\n    variants: {\n      /**\n       * Tooltip position\n       */\n      position: {\n        top: \"-top-9\",\n        bottom: \"-bottom-9\",\n      },\n    },\n    defaultVariants: {\n      position: \"top\",\n    },\n  }\n)\n","\"use client\"\n\nimport type { ProgressBarLabelProps, ProgressBarProps } from \"./ProgressBar.types\"\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport {\n  progressBarIndicatorVariants,\n  progressBarLabelVariants,\n  progressBarTooltipVariants,\n  progressBarVariants,\n} from \"./ProgressBar.variants\"\n\n/**\n * Default format function for progress value\n */\nconst defaultFormatValue = (value: number): string => `${String(value)}%`\n\n/**\n * Internal component for rendering the progress label\n */\nfunction ProgressBarLabel({\n  value,\n  position,\n  formatValue = defaultFormatValue,\n  progressPercent,\n}: ProgressBarLabelProps) {\n  // Don't render anything for indeterminate state or none position\n  if (value === null || value === undefined) {\n    return null\n  }\n\n  const formattedValue = formatValue(value)\n\n  // Floating tooltip that follows the progress\n  if (position === \"top-floating\" || position === \"bottom-floating\") {\n    return (\n      <span\n        className={cn(\n          progressBarTooltipVariants({\n            position: position === \"top-floating\" ? \"top\" : \"bottom\",\n          })\n        )}\n        data-slot=\"progress-bar-tooltip\"\n        style={{ left: `${String(progressPercent)}%` }}\n      >\n        {formattedValue}\n      </span>\n    )\n  }\n\n  // Bottom label\n  if (position === \"bottom\") {\n    return (\n      <span\n        className={cn(progressBarLabelVariants({ position: \"bottom\" }), \"block\")}\n        data-slot=\"progress-bar-label\"\n      >\n        {formattedValue}\n      </span>\n    )\n  }\n\n  // Hidden label for screen readers\n  if (position === \"none\") {\n    return (\n      <span\n        className={progressBarLabelVariants({ position: \"none\" })}\n        data-slot=\"progress-bar-label\"\n      >\n        {formattedValue}\n      </span>\n    )\n  }\n\n  // Right label (inline)\n  return (\n    <span\n      className={progressBarLabelVariants({ position: \"right\" })}\n      data-slot=\"progress-bar-label\"\n    >\n      {formattedValue}\n    </span>\n  )\n}\n\n/**\n * ProgressBar component for displaying task completion status.\n *\n * Built on Radix UI Progress primitive with support for:\n * - Multiple color variants (default, primary, secondary, info, success, warning, error)\n * - Multiple size variants (xs, sm, md, lg, xl)\n * - Label positions (none, right, bottom, top-floating, bottom-floating)\n * - Floating tooltips that follow the progress indicator\n * - Custom value formatting\n * - Indeterminate state\n *\n * @example\n * ```tsx\n * // Basic usage with default green fill\n * <ProgressBar value={50} />\n *\n * // With floating tooltip\n * <ProgressBar value={75} label=\"top-floating\" />\n *\n * // With color and size variants\n * <ProgressBar value={30} color=\"error\" size=\"lg\" />\n * ```\n */\nfunction ProgressBar({\n  className,\n  value,\n  max = 100,\n  size,\n  color,\n  label = \"none\",\n  formatValue,\n  showValue,\n  animate = true,\n  tooltip,\n  ref,\n  ...props\n}: ProgressBarProps) {\n  // Calculate percentage based on value and max\n  const progressPercent = value !== null && value !== undefined\n    ? Math.min(100, Math.max(0, (value / max) * 100))\n    : 0\n  // Initialize visibility based on animate prop - if not animating, show immediately\n  const [isVisible, setIsVisible] = React.useState(!animate)\n  const internalRef = React.useRef<HTMLDivElement>(null)\n\n  // Merge internal ref with forwarded ref\n  const progressRef = ref ?? internalRef\n\n  // Use IntersectionObserver to trigger animation only when in viewport\n  React.useEffect(() => {\n    // Skip if not animating or already visible\n    if (!animate || isVisible) {\n      return\n    }\n\n    // Get the element from the ref\n    const element = typeof progressRef === \"function\" ? null : progressRef.current\n    if (!element) {\n      return\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0]\n        if (entry?.isIntersecting) {\n          // Small delay to ensure smooth animation start\n          requestAnimationFrame(() => {\n            setIsVisible(true)\n          })\n          // Once animated, no need to observe anymore\n          observer.disconnect()\n        }\n      },\n      { threshold: 0.1 }\n    )\n\n    observer.observe(element)\n\n    return () => { observer.disconnect(); }\n  }, [animate, isVisible, progressRef])\n\n  // Determine if we should show value based on label position\n  const shouldShowValue = showValue ?? label !== \"none\"\n\n  // Calculate the transform value - start at 0 if not visible yet (for animation)\n  const displayPercent = isVisible ? progressPercent : 0\n\n  // Helper to wrap element with tooltip if tooltip prop is provided\n  const wrapWithTooltip = (element: React.ReactElement) => {\n    if (!tooltip) return element\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          {element}\n        </TooltipTrigger>\n        <TooltipContent>\n          {tooltip}\n        </TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  const progressBar = (\n    <ProgressPrimitive.Root\n      ref={progressRef}\n      className={cn(\n        progressBarVariants({ size, color }),\n        className\n      )}\n      data-slot=\"progress-bar\"\n      max={max}\n      value={value != null ? Math.min(Math.max(0, value), max) : null}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        className={cn(progressBarIndicatorVariants({ color }))}\n        data-slot=\"progress-bar-indicator\"\n        style={{ transform: `translateX(-${String(100 - displayPercent)}%)` }}\n      />\n      {/* Floating labels are positioned inside the root for proper positioning */}\n      {(label === \"top-floating\" || label === \"bottom-floating\") && shouldShowValue && (\n        <ProgressBarLabel\n          formatValue={formatValue}\n          position={label}\n          progressPercent={progressPercent}\n          value={value}\n        />\n      )}\n    </ProgressPrimitive.Root>\n  )\n\n  // Right label needs flex wrapper\n  if (label === \"right\") {\n    return wrapWithTooltip(\n      <div className=\"flex items-center\" data-slot=\"progress-bar-container\">\n        {progressBar}\n        {shouldShowValue && (\n          <ProgressBarLabel\n            formatValue={formatValue}\n            position={label}\n            progressPercent={progressPercent}\n            value={value}\n          />\n        )}\n      </div>\n    )\n  }\n\n  // Bottom label needs column wrapper\n  if (label === \"bottom\") {\n    return wrapWithTooltip(\n      <div data-slot=\"progress-bar-container\">\n        {progressBar}\n        {shouldShowValue && (\n          <ProgressBarLabel\n            formatValue={formatValue}\n            position={label}\n            progressPercent={progressPercent}\n            value={value}\n          />\n        )}\n      </div>\n    )\n  }\n\n  // Floating labels need relative wrapper for absolute positioning\n  if (label === \"top-floating\" || label === \"bottom-floating\") {\n    return wrapWithTooltip(\n      <div className=\"relative\" data-slot=\"progress-bar-container\">\n        {progressBar}\n      </div>\n    )\n  }\n\n  // No wrapper needed for none label\n  return wrapWithTooltip(progressBar)\n}\n\nexport { ProgressBar }\n"]}

package/dist/chunk-3KOLK3OB.js

@@ -0,0 +1,198 @@
+import { SkeletonLoader } from './chunk-QHKOBGLW.js';
+import { Badge } from './chunk-4GVOOXYD.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var chartCardVariants = cva(
+  "rounded-[var(--chart-card-radius)] bg-[color:var(--chart-card-bg)] px-[var(--chart-card-padding-x)] pt-[var(--chart-card-padding-top)] pb-[var(--chart-card-padding-bottom)] text-[color:var(--chart-card-fg)] transition",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outlined: "border border-[color:var(--chart-card-border)]",
+        elevated: "shadow-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var chartCardHeaderVariants = cva(
+  "flex items-center justify-between gap-x-2"
+);
+var chartCardTitleVariants = cva(
+  "text-[length:var(--chart-card-title-size)] font-[var(--chart-card-title-weight)] leading-[var(--chart-card-title-line-height)] text-[color:var(--chart-card-title-color)]"
+);
+var chartCardValueContainerVariants = cva(
+  "mt-2 flex items-baseline justify-between"
+);
+var chartCardValueVariants = cva(
+  "text-[length:var(--chart-card-value-size)] text-[color:var(--chart-card-value-color)]"
+);
+var chartCardPreviousValueVariants = cva(
+  "text-sm text-[color:var(--chart-card-previous-color)]"
+);
+var chartCardChartVariants = cva(
+  "mt-[var(--chart-card-gap)] h-[var(--chart-card-chart-height)] [&>*]:h-full"
+);
+var defaultFormatter = (value) => String(value);
+function getBadgeColor(value) {
+  if (value > 0) {
+    return "success";
+  } else if (value < 0) {
+    if (value < -50) {
+      return "warning";
+    }
+    return "destructive";
+  }
+  return "muted";
+}
+function formatPercentage(value) {
+  const sign = value > 0 ? "+" : "";
+  return `${sign}${(value * 100).toFixed(1)}%`;
+}
+function ChartCard({
+  badge,
+  chart,
+  chartHeight,
+  className,
+  comparisonPeriod = "no-comparison",
+  data,
+  emptyMessage,
+  featuredIcon,
+  footer,
+  headerAction,
+  isThumbnail = false,
+  loading = false,
+  tabs,
+  title,
+  valueFormatter = defaultFormatter,
+  variant,
+  ...props
+}) {
+  const isEmpty = !loading && data.length === 0;
+  const totalValue = React.useMemo(() => {
+    return data.reduce((acc, item) => acc + (item.value ?? 0), 0);
+  }, [data]);
+  const totalPreviousValue = React.useMemo(() => {
+    return data.reduce((acc, item) => acc + (item.previousValue ?? 0), 0);
+  }, [data]);
+  const evolution = React.useMemo(() => {
+    if (comparisonPeriod === "no-comparison" || totalPreviousValue === 0) {
+      return 0;
+    }
+    return (totalValue - totalPreviousValue) / totalPreviousValue;
+  }, [comparisonPeriod, totalPreviousValue, totalValue]);
+  const showComparison = comparisonPeriod !== "no-comparison";
+  const titleLead = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+    featuredIcon && /* @__PURE__ */ jsx("span", { "data-slot": "chart-card-featured-icon", children: featuredIcon }),
+    /* @__PURE__ */ jsx("h3", { className: cn(chartCardTitleVariants()), "data-slot": "chart-card-title", children: title })
+  ] });
+  if (isEmpty) {
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "aria-label": `${title}: empty`,
+        className: cn(chartCardVariants({ variant }), className),
+        "data-empty": "true",
+        "data-slot": "chart-card",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(chartCardHeaderVariants()), "data-slot": "chart-card-header", children: [
+            titleLead,
+            headerAction && /* @__PURE__ */ jsx("span", { "data-slot": "chart-card-header-action", children: headerAction })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                chartCardChartVariants(),
+                chartHeight,
+                "flex items-center justify-center text-[length:var(--chart-card-empty-state-caption-size)] text-[color:var(--chart-card-empty-state-caption-color)]"
+              ),
+              "data-slot": "chart-card-empty",
+              children: emptyMessage ?? "No data available"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "aria-busy": "true",
+        className: cn(chartCardVariants({ variant }), className),
+        "data-slot": "chart-card",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(chartCardHeaderVariants()), "data-slot": "chart-card-header", children: [
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-24" }),
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-5 w-12" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(chartCardValueContainerVariants()),
+              "data-slot": "chart-card-value",
+              children: /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-7 w-32" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: cn(chartCardChartVariants(), chartHeight), children: /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-full w-full" }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "aria-label": `${title}: ${valueFormatter(totalValue)}`,
+      className: cn(chartCardVariants({ variant }), className),
+      "data-slot": "chart-card",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn(chartCardHeaderVariants()), "data-slot": "chart-card-header", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+            featuredIcon && /* @__PURE__ */ jsx("span", { "data-slot": "chart-card-featured-icon", children: featuredIcon }),
+            /* @__PURE__ */ jsx("h3", { className: cn(chartCardTitleVariants()), "data-slot": "chart-card-title", children: title }),
+            showComparison && (badge ?? /* @__PURE__ */ jsx(Badge, { color: getBadgeColor(evolution), size: "sm", children: formatPercentage(evolution) }))
+          ] }),
+          headerAction && /* @__PURE__ */ jsx("span", { "data-slot": "chart-card-header-action", children: headerAction })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(chartCardValueContainerVariants()),
+            "data-slot": "chart-card-value",
+            children: [
+              /* @__PURE__ */ jsx("p", { className: cn(chartCardValueVariants()), children: valueFormatter(totalValue) }),
+              showComparison && /* @__PURE__ */ jsxs("p", { className: cn(chartCardPreviousValueVariants()), children: [
+                "from ",
+                valueFormatter(totalPreviousValue)
+              ] })
+            ]
+          }
+        ),
+        tabs && /* @__PURE__ */ jsx("div", { className: "mt-[var(--chart-card-gap)]", "data-slot": "chart-card-tabs", children: tabs }),
+        !isThumbnail && chart && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(chartCardChartVariants(), chartHeight),
+            "data-slot": "chart-card-chart",
+            children: chart
+          }
+        ),
+        footer && /* @__PURE__ */ jsx("div", { className: "mt-[var(--chart-card-gap)]", "data-slot": "chart-card-footer", children: footer })
+      ]
+    }
+  );
+}
+ChartCard.displayName = "ChartCard";
+
+export { ChartCard, chartCardChartVariants, chartCardHeaderVariants, chartCardPreviousValueVariants, chartCardTitleVariants, chartCardValueContainerVariants, chartCardValueVariants, chartCardVariants };
+//# sourceMappingURL=chunk-3KOLK3OB.js.map
+//# sourceMappingURL=chunk-3KOLK3OB.js.map

package/dist/chunk-3KOLK3OB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/ChartCard/ChartCard.variants.ts","../src/components/data-display/ChartCard/ChartCard.tsx"],"names":[],"mappings":"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","file":"chunk-3KOLK3OB.js","sourcesContent":["// ChartCard/ChartCard.variants.ts\nimport { cva } from \"class-variance-authority\"\n\n/**\n * ChartCard container variants.\n *\n * Consumes the `--chart-card-*` component tokens (DES-1253). The Figma container\n * is flat — background + radius + asymmetric padding, no border or shadow — so the\n * base styles render that container and `outlined` / `elevated` are code-only\n * extensions (documented in the README) layered on top.\n */\nexport const chartCardVariants = cva(\n  \"rounded-[var(--chart-card-radius)] bg-[color:var(--chart-card-bg)] px-[var(--chart-card-padding-x)] pt-[var(--chart-card-padding-top)] pb-[var(--chart-card-padding-bottom)] text-[color:var(--chart-card-fg)] transition\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        outlined: \"border border-[color:var(--chart-card-border)]\",\n        elevated: \"shadow-sm\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * ChartCard header (Title Row) — leading group (featured icon + title + badge)\n * and an optional trailing overflow action.\n */\nexport const chartCardHeaderVariants = cva(\n  \"flex items-center justify-between gap-x-2\"\n)\n\n/**\n * ChartCard title — Figma Heading/H5 (18px / 24px / SemiBold), tokenised.\n */\nexport const chartCardTitleVariants = cva(\n  \"text-[length:var(--chart-card-title-size)] font-[var(--chart-card-title-weight)] leading-[var(--chart-card-title-line-height)] text-[color:var(--chart-card-title-color)]\"\n)\n\n/**\n * ChartCard value container.\n */\nexport const chartCardValueContainerVariants = cva(\n  \"mt-2 flex items-baseline justify-between\"\n)\n\n/**\n * ChartCard KPI value text — tokenised size + color.\n */\nexport const chartCardValueVariants = cva(\n  \"text-[length:var(--chart-card-value-size)] text-[color:var(--chart-card-value-color)]\"\n)\n\n/**\n * ChartCard previous-value caption.\n */\nexport const chartCardPreviousValueVariants = cva(\n  \"text-sm text-[color:var(--chart-card-previous-color)]\"\n)\n\n/**\n * ChartCard chart-slot wrapper — 24px row gap + tokenised area height\n * (`--chart-card-chart-height`). The injected chart fills the area via\n * `[&>*]:h-full`; the `chartHeight` prop overrides the height.\n */\nexport const chartCardChartVariants = cva(\n  \"mt-[var(--chart-card-gap)] h-[var(--chart-card-chart-height)] [&>*]:h-full\"\n)\n","// ChartCard/ChartCard.tsx\n\"use client\"\n\nimport type { ChartCardProps, ChartCardValueFormatter } from \"./ChartCard.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Badge } from \"../../primitives/Badge\"\nimport { SkeletonLoader } from \"../../primitives/SkeletonLoader\"\nimport {\n  chartCardChartVariants,\n  chartCardHeaderVariants,\n  chartCardPreviousValueVariants,\n  chartCardTitleVariants,\n  chartCardValueContainerVariants,\n  chartCardValueVariants,\n  chartCardVariants,\n} from \"./ChartCard.variants\"\n\n/**\n * Default value formatter (returns value as string)\n */\nconst defaultFormatter: ChartCardValueFormatter = (value) => String(value)\n\n/**\n * Get badge color based on evolution percentage\n */\nfunction getBadgeColor(value: number): \"destructive\" | \"muted\" | \"success\" | \"warning\" {\n  if (value > 0) {\n    return \"success\"\n  } else if (value < 0) {\n    if (value < -50) {\n      return \"warning\"\n    }\n    return \"destructive\"\n  }\n  return \"muted\"\n}\n\n/**\n * Format percentage for display\n */\nfunction formatPercentage(value: number): string {\n  const sign = value > 0 ? \"+\" : \"\"\n  return `${sign}${(value * 100).toFixed(1)}%`\n}\n\n/**\n * ChartCard - Dashboard KPI widget with a chart-agnostic slot.\n *\n * Renders a KPI value with an auto evolution badge and optional comparison\n * period. The chart itself is **injected by the consumer** via the `chart`\n * slot — ChartCard ships no default chart (DES-1253). The Title Row exposes\n * `featuredIcon` + `headerAction` (overflow) slots, with optional `tabs` and\n * `footer` composition slots below.\n *\n * @example\n * ```tsx\n * const data = [\n *   { formattedDate: \"01/01\", value: 1000, previousValue: 900 },\n *   { formattedDate: \"02/01\", value: 1200, previousValue: 1100 },\n * ]\n *\n * <ChartCard\n *   title=\"Revenue\"\n *   data={data}\n *   comparisonPeriod=\"previous-year\"\n *   valueFormatter={(v) => `$${v.toLocaleString()}`}\n *   chart={\n *     <LineChart\n *       className=\"h-full\"\n *       data={data}\n *       config={{ value: { label: \"Current\" } }}\n *       series={[\"value\"]}\n *     />\n *   }\n * />\n * ```\n */\nfunction ChartCard({\n  badge,\n  chart,\n  chartHeight,\n  className,\n  comparisonPeriod = \"no-comparison\",\n  data,\n  emptyMessage,\n  featuredIcon,\n  footer,\n  headerAction,\n  isThumbnail = false,\n  loading = false,\n  tabs,\n  title,\n  valueFormatter = defaultFormatter,\n  variant,\n  ...props\n}: ChartCardProps) {\n  const isEmpty = !loading && data.length === 0\n\n  // Calculate totals\n  const totalValue = React.useMemo(() => {\n    return data.reduce((acc, item) => acc + (item.value ?? 0), 0)\n  }, [data])\n\n  const totalPreviousValue = React.useMemo(() => {\n    return data.reduce((acc, item) => acc + (item.previousValue ?? 0), 0)\n  }, [data])\n\n  // Calculate evolution percentage\n  const evolution = React.useMemo(() => {\n    if (comparisonPeriod === \"no-comparison\" || totalPreviousValue === 0) {\n      return 0\n    }\n    return (totalValue - totalPreviousValue) / totalPreviousValue\n  }, [comparisonPeriod, totalPreviousValue, totalValue])\n\n  // Show comparison UI elements\n  const showComparison = comparisonPeriod !== \"no-comparison\"\n\n  // Title Row leading slots (featured icon + title), shared across states.\n  const titleLead = (\n    <div className=\"flex items-center gap-x-2\">\n      {featuredIcon && (\n        <span data-slot=\"chart-card-featured-icon\">{featuredIcon}</span>\n      )}\n      <h3 className={cn(chartCardTitleVariants())} data-slot=\"chart-card-title\">\n        {title}\n      </h3>\n    </div>\n  )\n\n  // Empty state (DES-1254 item 3 — Figma Empty State)\n  if (isEmpty) {\n    return (\n      <article\n        aria-label={`${title}: empty`}\n        className={cn(chartCardVariants({ variant }), className)}\n        data-empty=\"true\"\n        data-slot=\"chart-card\"\n        {...props}\n      >\n        <div className={cn(chartCardHeaderVariants())} data-slot=\"chart-card-header\">\n          {titleLead}\n          {headerAction && (\n            <span data-slot=\"chart-card-header-action\">{headerAction}</span>\n          )}\n        </div>\n        <div\n          className={cn(\n            chartCardChartVariants(),\n            chartHeight,\n            \"flex items-center justify-center text-[length:var(--chart-card-empty-state-caption-size)] text-[color:var(--chart-card-empty-state-caption-color)]\"\n          )}\n          data-slot=\"chart-card-empty\"\n        >\n          {emptyMessage ?? \"No data available\"}\n        </div>\n      </article>\n    )\n  }\n\n  // Loading state\n  if (loading) {\n    return (\n      <article\n        aria-busy=\"true\"\n        className={cn(chartCardVariants({ variant }), className)}\n        data-slot=\"chart-card\"\n        {...props}\n      >\n        <div className={cn(chartCardHeaderVariants())} data-slot=\"chart-card-header\">\n          <SkeletonLoader className=\"h-4 w-24\" />\n          <SkeletonLoader className=\"h-5 w-12\" />\n        </div>\n        <div\n          className={cn(chartCardValueContainerVariants())}\n          data-slot=\"chart-card-value\"\n        >\n          <SkeletonLoader className=\"h-7 w-32\" />\n        </div>\n        <div className={cn(chartCardChartVariants(), chartHeight)}>\n          <SkeletonLoader className=\"h-full w-full\" />\n        </div>\n      </article>\n    )\n  }\n\n  return (\n    <article\n      aria-label={`${title}: ${valueFormatter(totalValue)}`}\n      className={cn(chartCardVariants({ variant }), className)}\n      data-slot=\"chart-card\"\n      {...props}\n    >\n      {/* Title Row — featured icon + title + badge / overflow action */}\n      <div className={cn(chartCardHeaderVariants())} data-slot=\"chart-card-header\">\n        <div className=\"flex items-center gap-x-2\">\n          {featuredIcon && (\n            <span data-slot=\"chart-card-featured-icon\">{featuredIcon}</span>\n          )}\n          <h3 className={cn(chartCardTitleVariants())} data-slot=\"chart-card-title\">\n            {title}\n          </h3>\n          {showComparison && (\n            badge ?? (\n              <Badge color={getBadgeColor(evolution)} size=\"sm\">\n                {formatPercentage(evolution)}\n              </Badge>\n            )\n          )}\n        </div>\n        {headerAction && (\n          <span data-slot=\"chart-card-header-action\">{headerAction}</span>\n        )}\n      </div>\n\n      {/* Value display */}\n      <div\n        className={cn(chartCardValueContainerVariants())}\n        data-slot=\"chart-card-value\"\n      >\n        <p className={cn(chartCardValueVariants())}>\n          {valueFormatter(totalValue)}\n        </p>\n        {showComparison && (\n          <p className={cn(chartCardPreviousValueVariants())}>\n            from {valueFormatter(totalPreviousValue)}\n          </p>\n        )}\n      </div>\n\n      {/* Tabs row slot (Figma showTabs) */}\n      {tabs && (\n        <div className=\"mt-[var(--chart-card-gap)]\" data-slot=\"chart-card-tabs\">\n          {tabs}\n        </div>\n      )}\n\n      {/* Chart slot — injected by the consumer (chart-agnostic) */}\n      {!isThumbnail && chart && (\n        <div\n          className={cn(chartCardChartVariants(), chartHeight)}\n          data-slot=\"chart-card-chart\"\n        >\n          {chart}\n        </div>\n      )}\n\n      {/* Card Footer slot (Figma showCardFooter — trend + total) */}\n      {footer && (\n        <div className=\"mt-[var(--chart-card-gap)]\" data-slot=\"chart-card-footer\">\n          {footer}\n        </div>\n      )}\n    </article>\n  )\n}\n\nChartCard.displayName = \"ChartCard\"\n\nexport { ChartCard }\n"]}