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

package/dist/chunk-S6ORCWM2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/RadioCardGroup/RadioCardGroup.variants.ts","../src/components/forms/RadioCardGroup/RadioCardGroup.tsx"],"names":[],"mappings":"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","file":"chunk-S6ORCWM2.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const radioCardGroupVariants = cva(\n  \"grid gap-3\",\n  {\n    variants: {\n      columns: {\n        1: \"grid-cols-1\",\n        2: \"grid-cols-2\",\n        3: \"grid-cols-3\",\n        4: \"grid-cols-4\",\n      },\n    },\n    defaultVariants: {\n      columns: 1,\n    },\n  }\n)\n\nexport const radioCardGroupItemVariants = cva(\n  [\n    \"relative flex cursor-pointer rounded-lg border transition-all\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n    \"hover:border-primary/50\",\n    \"data-[state=checked]:border-primary data-[state=checked]:bg-primary/5\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"gap-2 p-3\",\n        md: \"gap-3 p-4\",\n        lg: \"gap-4 p-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioCardGroupItemIndicatorVariants = cva(\n  [\n    \"absolute right-3 top-3 flex h-4 w-4 items-center justify-center rounded-full border\",\n    \"data-[state=checked]:border-primary data-[state=checked]:bg-primary\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-3.5 w-3.5 right-2 top-2\",\n        md: \"h-4 w-4 right-3 top-3\",\n        lg: \"h-5 w-5 right-4 top-4\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioCardGroupItemDotVariants = cva(\n  \"h-2 w-2 rounded-full bg-primary-foreground\",\n  {\n    variants: {\n      size: {\n        sm: \"h-1.5 w-1.5\",\n        md: \"h-2 w-2\",\n        lg: \"h-2.5 w-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioCardGroupItemContentVariants = cva(\n  \"flex flex-col gap-1\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const radioCardGroupItemIconVariants = cva(\n  \"flex-shrink-0 text-muted-foreground data-[state=checked]:text-primary\",\n  {\n    variants: {\n      size: {\n        sm: \"[&>svg]:h-4 [&>svg]:w-4\",\n        md: \"[&>svg]:h-5 [&>svg]:w-5\",\n        lg: \"[&>svg]:h-6 [&>svg]:w-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioCardGroupItemTitleVariants = cva(\n  \"font-medium leading-none\",\n  {\n    variants: {\n      size: {\n        sm: \"text-sm\",\n        md: \"text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioCardGroupItemDescriptionVariants = cva(\n  \"text-muted-foreground\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-xs\",\n        lg: \"text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n","\"use client\"\n\nimport type { RadioCardGroupItemProps, RadioCardGroupProps, RadioCardGroupSize } from \"./RadioCardGroup.types\"\n\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  radioCardGroupItemContentVariants,\n  radioCardGroupItemDescriptionVariants,\n  radioCardGroupItemDotVariants,\n  radioCardGroupItemIconVariants,\n  radioCardGroupItemIndicatorVariants,\n  radioCardGroupItemTitleVariants,\n  radioCardGroupItemVariants,\n  radioCardGroupVariants,\n} from \"./RadioCardGroup.variants\"\n\n/**\n * Context for RadioCardGroup size\n */\nconst RadioCardGroupContext = React.createContext<RadioCardGroupSize>(\"md\")\n\n/**\n * RadioCardGroup - Card-style radio selection component\n *\n * A visually prominent radio group where each option is displayed\n * as a card with optional icon, title, and description.\n *\n * @example\n * ```tsx\n * <RadioCardGroup value={value} onValueChange={setValue}>\n *   <RadioCardGroupItem\n *     value=\"startup\"\n *     title=\"Startup\"\n *     description=\"Best for small teams\"\n *     icon={<RocketIcon />}\n *   />\n *   <RadioCardGroupItem\n *     value=\"enterprise\"\n *     title=\"Enterprise\"\n *     description=\"For large organizations\"\n *     icon={<BuildingIcon />}\n *   />\n * </RadioCardGroup>\n * ```\n */\nfunction RadioCardGroup({\n  children,\n  className,\n  columns = 1,\n  size = \"md\",\n  ...props\n}: RadioCardGroupProps) {\n  return (\n    <RadioCardGroupContext value={size}>\n      <RadioGroupPrimitive.Root\n        className={cn(radioCardGroupVariants({ columns }), className)}\n        data-slot=\"radio-card-group\"\n        {...props}\n      >\n        {children}\n      </RadioGroupPrimitive.Root>\n    </RadioCardGroupContext>\n  )\n}\n\n/**\n * RadioCardGroupItem - Individual card option\n */\nfunction RadioCardGroupItem({\n  className,\n  description,\n  icon,\n  size: sizeProp,\n  title,\n  ...props\n}: RadioCardGroupItemProps) {\n  const contextSize = React.use(RadioCardGroupContext)\n  const size = sizeProp ?? contextSize\n\n  return (\n    <RadioGroupPrimitive.Item\n      className={cn(radioCardGroupItemVariants({ size }), className)}\n      data-slot=\"radio-card-group-item\"\n      {...props}\n    >\n      {/* Indicator circle */}\n      <div\n        className={radioCardGroupItemIndicatorVariants({ size })}\n        data-slot=\"radio-card-indicator\"\n      >\n        <RadioGroupPrimitive.Indicator asChild>\n          <div className={radioCardGroupItemDotVariants({ size })} />\n        </RadioGroupPrimitive.Indicator>\n      </div>\n\n      {/* Icon */}\n      {icon && (\n        <div\n          className={radioCardGroupItemIconVariants({ size })}\n          data-slot=\"radio-card-icon\"\n        >\n          {icon}\n        </div>\n      )}\n\n      {/* Content */}\n      <div className={radioCardGroupItemContentVariants()}>\n        <span\n          className={radioCardGroupItemTitleVariants({ size })}\n          data-slot=\"radio-card-title\"\n        >\n          {title}\n        </span>\n        {description && (\n          <span\n            className={radioCardGroupItemDescriptionVariants({ size })}\n            data-slot=\"radio-card-description\"\n          >\n            {description}\n          </span>\n        )}\n      </div>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioCardGroup, RadioCardGroupItem }\n"]}

package/dist/chunk-SAKW2OKH.js

@@ -0,0 +1,237 @@
+import { Card, CardHeader, CardContent, CardTitle } from './chunk-K45MMHLA.js';
+import { ProgressBar } from './chunk-UFRMZ3M6.js';
+import { SkeletonLoader } from './chunk-QHKOBGLW.js';
+import { Badge } from './chunk-KOTCWE7V.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { Minus, ArrowDown, ArrowUp } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeConfig = {
+  sm: {
+    value: "text-2xl font-bold",
+    padding: "p-4"
+  },
+  md: {
+    value: "text-3xl font-bold",
+    padding: "p-6"
+  },
+  lg: {
+    value: "text-4xl font-bold",
+    padding: "p-6"
+  }
+};
+var TrendIcons = {
+  up: ArrowUp,
+  down: ArrowDown,
+  neutral: Minus
+};
+var trendColors = {
+  up: "text-success",
+  down: "text-destructive",
+  neutral: "text-muted-foreground"
+};
+function KPICard({
+  title,
+  value,
+  previousValue: _previousValue,
+  delta,
+  deltaLabel,
+  trend,
+  sparkline,
+  icon,
+  featuredIcon,
+  dropdownIcon,
+  helpText,
+  progressBar,
+  swap,
+  showBadge = true,
+  action,
+  variant = "default",
+  size = "md",
+  loading = false,
+  className,
+  ...props
+}) {
+  const computedTrend = trend ?? (delta !== void 0 ? delta > 0 ? "up" : delta < 0 ? "down" : "neutral" : "neutral");
+  const TrendIcon = TrendIcons[computedTrend];
+  const trendColor = trendColors[computedTrend];
+  const sizeStyles = sizeConfig[size];
+  const variantStyles = {
+    default: "",
+    ghost: "border-none shadow-none bg-transparent",
+    highlight: "border-primary/50 bg-primary/5"
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: cn(variantStyles[variant], className),
+        "data-slot": "kpi-card",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between pb-2", children: [
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-24" }),
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "size-4" })
+          ] }),
+          /* @__PURE__ */ jsxs(CardContent, { children: [
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "mb-2 h-8 w-32" }),
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-20" })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(variantStyles[variant], className),
+      "data-slot": "kpi-card",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between pb-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: title }),
+            helpText && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-xs text-muted-foreground",
+                "data-slot": "kpi-card-help-text",
+                children: helpText
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            featuredIcon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary [&_svg]:size-5",
+                "data-slot": "kpi-card-featured-icon",
+                children: featuredIcon
+              }
+            ),
+            icon && !featuredIcon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "data-slot": "kpi-card-icon", children: icon }),
+            dropdownIcon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-muted-foreground",
+                "data-slot": "kpi-card-dropdown-icon",
+                children: dropdownIcon
+              }
+            ),
+            action && !icon && !featuredIcon && !dropdownIcon && /* @__PURE__ */ jsx("span", { "data-slot": "kpi-card-action", children: action })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(CardContent, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(sizeStyles.value, "tabular-nums"),
+                  "data-slot": "kpi-card-value",
+                  children: value
+                }
+              ),
+              delta !== void 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn("mt-1 flex items-center gap-2", trendColor),
+                  "data-slot": "kpi-card-delta",
+                  "data-trend": computedTrend,
+                  children: [
+                    showBadge ? /* @__PURE__ */ jsxs(
+                      Badge,
+                      {
+                        color: computedTrend === "up" ? "success" : computedTrend === "down" ? "destructive" : "muted",
+                        leadingIcon: /* @__PURE__ */ jsx(TrendIcon, { "aria-hidden": "true" }),
+                        size: "sm",
+                        type: "pill-color",
+                        children: [
+                          Math.abs(delta),
+                          "%"
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsxs("span", { className: cn("flex items-center text-xs", trendColor), children: [
+                      /* @__PURE__ */ jsx(TrendIcon, { "aria-hidden": "true", className: "mr-1 size-3" }),
+                      /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+                        Math.abs(delta),
+                        "%"
+                      ] })
+                    ] }),
+                    deltaLabel && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: deltaLabel }),
+                    swap && /* @__PURE__ */ jsx("span", { className: "ml-auto", "data-slot": "kpi-card-swap", children: swap })
+                  ]
+                }
+              )
+            ] }),
+            sparkline && sparkline.length > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "flex h-8 items-end gap-0.5",
+                "data-slot": "kpi-card-sparkline",
+                children: sparkline.slice(-10).map((val, idx) => {
+                  const max = Math.max(...sparkline);
+                  const min = Math.min(...sparkline);
+                  const range = max - min || 1;
+                  const height = (val - min) / range * 100;
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "w-1 rounded-full",
+                        computedTrend === "up" ? "bg-success/60" : computedTrend === "down" ? "bg-destructive/60" : "bg-muted-foreground/40"
+                      ),
+                      style: { height: `${String(Math.max(height, 10))}%` }
+                    },
+                    `sparkline-bar-${String(val)}-${String(idx)}`
+                  );
+                })
+              }
+            )
+          ] }),
+          progressBar !== void 0 && /* @__PURE__ */ jsx("div", { className: "mt-3", "data-slot": "kpi-card-progress", children: typeof progressBar === "number" ? /* @__PURE__ */ jsx(ProgressBar, { value: progressBar }) : progressBar })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          title,
+          ": ",
+          value,
+          delta !== void 0 && `, ${computedTrend === "up" ? "up" : computedTrend === "down" ? "down" : "unchanged"} ${String(Math.abs(delta))}%`,
+          deltaLabel && ` ${deltaLabel}`
+        ] })
+      ]
+    }
+  );
+}
+function KPICardGroup({
+  children,
+  orientation = "horizontal",
+  gap = "md",
+  className,
+  ...props
+}) {
+  const gapClasses = {
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex",
+        orientation === "horizontal" ? "flex-row [&>*]:flex-1" : "flex-col",
+        gapClasses[gap],
+        className
+      ),
+      "data-orientation": orientation,
+      "data-slot": "kpi-card-group",
+      ...props,
+      children
+    }
+  );
+}
+
+export { KPICard, KPICardGroup };
+//# sourceMappingURL=chunk-SAKW2OKH.js.map
+//# sourceMappingURL=chunk-SAKW2OKH.js.map

package/dist/chunk-SAKW2OKH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/KPICard/KPICard.tsx"],"names":[],"mappings":"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","file":"chunk-SAKW2OKH.js","sourcesContent":["import type {\n  KPICardGroupProps,\n  KPICardProps,\n  KPICardTrend,\n} from \"./KPICard.types\"\n\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"../../layout/Card\"\nimport { Badge } from \"../../primitives/Badge\"\nimport { ProgressBar } from \"../../primitives/ProgressBar\"\nimport { SkeletonLoader } from \"../../primitives/SkeletonLoader\"\n\n/**\n * Size configuration for typography\n */\nconst sizeConfig = {\n  sm: {\n    value: \"text-2xl font-bold\",\n    padding: \"p-4\",\n  },\n  md: {\n    value: \"text-3xl font-bold\",\n    padding: \"p-6\",\n  },\n  lg: {\n    value: \"text-4xl font-bold\",\n    padding: \"p-6\",\n  },\n} as const\n\n/**\n * Trend icons mapping\n */\nconst TrendIcons = {\n  up: ArrowUp,\n  down: ArrowDown,\n  neutral: Minus,\n} as const\n\n/**\n * Trend colors mapping using design tokens\n */\nconst trendColors = {\n  up: \"text-success\",\n  down: \"text-destructive\",\n  neutral: \"text-muted-foreground\",\n} as const\n\n/**\n * KPICard - Key Performance Indicator Card\n *\n * Dashboard component that displays important metrics prominently.\n * Combines main value, comparison/delta, mini chart, and contextual metadata\n * in a layout optimized for quick visualization.\n *\n * @example\n * ```tsx\n * <KPICard\n *   title=\"Revenue\"\n *   value=\"$45,231.89\"\n *   delta={20.1}\n *   deltaLabel=\"from last month\"\n * />\n * ```\n */\nfunction KPICard({\n  title,\n  value,\n  previousValue: _previousValue,\n  delta,\n  deltaLabel,\n  trend,\n  sparkline,\n  icon,\n  featuredIcon,\n  dropdownIcon,\n  helpText,\n  progressBar,\n  swap,\n  showBadge = true,\n  action,\n  variant = \"default\",\n  size = \"md\",\n  loading = false,\n  className,\n  ...props\n}: KPICardProps) {\n  // Auto-detect trend direction if not provided\n  const computedTrend: KPICardTrend = trend ?? (delta !== undefined\n    ? delta > 0 ? \"up\" : delta < 0 ? \"down\" : \"neutral\"\n    : \"neutral\")\n\n  const TrendIcon = TrendIcons[computedTrend]\n  const trendColor = trendColors[computedTrend]\n  const sizeStyles = sizeConfig[size]\n\n  // Variant styles\n  const variantStyles = {\n    default: \"\",\n    ghost: \"border-none shadow-none bg-transparent\",\n    highlight: \"border-primary/50 bg-primary/5\",\n  }\n\n  if (loading) {\n    return (\n      <Card\n        className={cn(variantStyles[variant], className)}\n        data-slot=\"kpi-card\"\n        {...props}\n      >\n        <CardHeader className=\"flex flex-row items-center justify-between pb-2\">\n          <SkeletonLoader className=\"h-4 w-24\" />\n          <SkeletonLoader className=\"size-4\" />\n        </CardHeader>\n        <CardContent>\n          <SkeletonLoader className=\"mb-2 h-8 w-32\" />\n          <SkeletonLoader className=\"h-4 w-20\" />\n        </CardContent>\n      </Card>\n    )\n  }\n\n  return (\n    <Card\n      className={cn(variantStyles[variant], className)}\n      data-slot=\"kpi-card\"\n      {...props}\n    >\n      <CardHeader className=\"flex flex-row items-center justify-between pb-2\">\n        <div className=\"flex items-center gap-1.5\">\n          <CardTitle className=\"text-sm font-medium text-muted-foreground\">\n            {title}\n          </CardTitle>\n          {helpText && (\n            <span\n              className=\"text-xs text-muted-foreground\"\n              data-slot=\"kpi-card-help-text\"\n            >\n              {helpText}\n            </span>\n          )}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {featuredIcon && (\n            <span\n              className=\"inline-flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary [&_svg]:size-5\"\n              data-slot=\"kpi-card-featured-icon\"\n            >\n              {featuredIcon}\n            </span>\n          )}\n          {icon && !featuredIcon && (\n            <span className=\"text-muted-foreground\" data-slot=\"kpi-card-icon\">\n              {icon}\n            </span>\n          )}\n          {dropdownIcon && (\n            <span\n              className=\"text-muted-foreground\"\n              data-slot=\"kpi-card-dropdown-icon\"\n            >\n              {dropdownIcon}\n            </span>\n          )}\n          {action && !icon && !featuredIcon && !dropdownIcon && (\n            <span data-slot=\"kpi-card-action\">{action}</span>\n          )}\n        </div>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex items-end justify-between\">\n          <div>\n            <div\n              className={cn(sizeStyles.value, \"tabular-nums\")}\n              data-slot=\"kpi-card-value\"\n            >\n              {value}\n            </div>\n            {delta !== undefined && (\n              <div\n                className={cn(\"mt-1 flex items-center gap-2\", trendColor)}\n                data-slot=\"kpi-card-delta\"\n                data-trend={computedTrend}\n              >\n                {showBadge ? (\n                  <Badge\n                    color={\n                      computedTrend === \"up\"\n                        ? \"success\"\n                        : computedTrend === \"down\"\n                        ? \"destructive\"\n                        : \"muted\"\n                    }\n                    leadingIcon={<TrendIcon aria-hidden=\"true\" />}\n                    size=\"sm\"\n                    type=\"pill-color\"\n                  >\n                    {Math.abs(delta)}%\n                  </Badge>\n                ) : (\n                  <span className={cn(\"flex items-center text-xs\", trendColor)}>\n                    <TrendIcon aria-hidden=\"true\" className=\"mr-1 size-3\" />\n                    <span className=\"font-medium\">{Math.abs(delta)}%</span>\n                  </span>\n                )}\n                {deltaLabel && (\n                  <span className=\"text-xs text-muted-foreground\">\n                    {deltaLabel}\n                  </span>\n                )}\n                {swap && (\n                  <span className=\"ml-auto\" data-slot=\"kpi-card-swap\">\n                    {swap}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n          {/* Sparkline placeholder - to be implemented when Sparkline component is ready */}\n          {sparkline && sparkline.length > 0 && (\n            <div\n              aria-hidden=\"true\"\n              className=\"flex h-8 items-end gap-0.5\"\n              data-slot=\"kpi-card-sparkline\"\n            >\n              {/* Simple bar visualization as placeholder */}\n              {sparkline.slice(-10).map((val, idx) => {\n                const max = Math.max(...sparkline)\n                const min = Math.min(...sparkline)\n                const range = max - min || 1\n                const height = ((val - min) / range) * 100\n                return (\n                  <div\n                    key={`sparkline-bar-${String(val)}-${String(idx)}`}\n                    className={cn(\n                      \"w-1 rounded-full\",\n                      computedTrend === \"up\" ? \"bg-success/60\" :\n                      computedTrend === \"down\" ? \"bg-destructive/60\" :\n                      \"bg-muted-foreground/40\"\n                    )}\n                    style={{ height: `${String(Math.max(height, 10))}%` }}\n                  />\n                )\n              })}\n            </div>\n          )}\n        </div>\n        {progressBar !== undefined && (\n          <div className=\"mt-3\" data-slot=\"kpi-card-progress\">\n            {typeof progressBar === \"number\" ? (\n              <ProgressBar value={progressBar} />\n            ) : (\n              progressBar\n            )}\n          </div>\n        )}\n      </CardContent>\n      {/* Screen reader summary */}\n      <span className=\"sr-only\">\n        {title}: {value}\n        {delta !== undefined && `, ${computedTrend === \"up\" ? \"up\" : computedTrend === \"down\" ? \"down\" : \"unchanged\"} ${String(Math.abs(delta))}%`}\n        {deltaLabel && ` ${deltaLabel}`}\n      </span>\n    </Card>\n  )\n}\n\n/**\n * KPICardGroup — Multiple KPIs composition (Figma Type=Multiple KPIs)\n *\n * Wrapper que diagramra múltiplos `KPICard` em layout horizontal ou vertical.\n *\n * @example\n * ```tsx\n * <KPICardGroup orientation=\"horizontal\" gap=\"md\">\n *   <KPICard title=\"Revenue\" value=\"$45k\" delta={12} />\n *   <KPICard title=\"Orders\" value={1240} delta={-3} />\n *   <KPICard title=\"Users\" value={892} delta={8} />\n * </KPICardGroup>\n * ```\n */\nfunction KPICardGroup({\n  children,\n  orientation = \"horizontal\",\n  gap = \"md\",\n  className,\n  ...props\n}: KPICardGroupProps) {\n  const gapClasses = {\n    sm: \"gap-2\",\n    md: \"gap-4\",\n    lg: \"gap-6\",\n  } as const\n\n  return (\n    <div\n      className={cn(\n        \"flex\",\n        orientation === \"horizontal\"\n          ? \"flex-row [&>*]:flex-1\"\n          : \"flex-col\",\n        gapClasses[gap],\n        className\n      )}\n      data-orientation={orientation}\n      data-slot=\"kpi-card-group\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport { KPICard, KPICardGroup }\n"]}

package/dist/chunk-SHS6EGWS.js

@@ -0,0 +1,226 @@
+import { ChartTooltipContent, ChartContainer, ChartTooltip, ChartLegend, ChartLegendContent } from './chunk-7I6KK6QE.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { AreaChart as AreaChart$1, CartesianGrid, XAxis, Label, YAxis, Area } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function normalizeSeriesConfig(series) {
+  return series.map(
+    (s) => typeof s === "string" ? { dataKey: s } : s
+  );
+}
+function GradientDefs({
+  idPrefix,
+  series
+}) {
+  return /* @__PURE__ */ jsx("defs", { children: series.map((s) => /* @__PURE__ */ jsxs(
+    "linearGradient",
+    {
+      id: `${idPrefix}-${s.dataKey}`,
+      x1: "0",
+      x2: "0",
+      y1: "0",
+      y2: "1",
+      children: [
+        /* @__PURE__ */ jsx(
+          "stop",
+          {
+            offset: "5%",
+            stopColor: `var(--color-${s.dataKey})`,
+            stopOpacity: 0.8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "stop",
+          {
+            offset: "95%",
+            stopColor: `var(--color-${s.dataKey})`,
+            stopOpacity: 0.1
+          }
+        )
+      ]
+    },
+    s.dataKey
+  )) });
+}
+function AreaChart({
+  allowDecimals = true,
+  autoMinValue = false,
+  className,
+  config,
+  connectNulls = false,
+  customTooltip,
+  enableLegendSlider = false,
+  curveType = "monotone",
+  data,
+  fill = "solid",
+  fillOpacity = 0.3,
+  gradientIdPrefix = "area-gradient",
+  gridDashArray = "3 3",
+  intervalType,
+  legendPosition = "bottom",
+  maxValue,
+  minValue,
+  onValueChange,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  showXAxis = true,
+  showYAxis = true,
+  startEndOnly = false,
+  tickGap,
+  tooltipCallback,
+  tooltipIndicator = "dot",
+  variant = "default",
+  xAxisLabel,
+  xAxisKey,
+  xAxisTickFormatter,
+  yAxisLabel,
+  yAxisTickFormatter,
+  yAxisWidth,
+  ...props
+}) {
+  const normalizedSeries = normalizeSeriesConfig(series);
+  const isStacked = variant === "stacked" || variant === "percent";
+  const isPercent = variant === "percent";
+  const isGradient = variant === "gradient" || fill === "gradient";
+  const isNoFill = fill === "none";
+  const chartId = React.useId().replaceAll(":", "");
+  const gradientPrefix = `${gradientIdPrefix}-${chartId}`;
+  const prevTooltipStateRef = React.useRef(false);
+  const handleDotClick = React.useCallback(
+    (dataKey) => (data2) => {
+      if (!onValueChange) return;
+      const payload = data2.payload;
+      const value = payload[dataKey];
+      onValueChange({
+        category: payload[xAxisKey],
+        dataKey,
+        payload,
+        value: typeof value === "number" ? value : 0
+      });
+    },
+    [onValueChange, xAxisKey]
+  );
+  const TooltipContentWithCallback = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (props2) => {
+      const { active = false, label, payload } = props2;
+      if (tooltipCallback && active !== prevTooltipStateRef.current) {
+        prevTooltipStateRef.current = active;
+        tooltipCallback({
+          active,
+          label,
+          payload: payload?.map((p) => ({
+            dataKey: String(p.dataKey),
+            value: p.value,
+            payload: p.payload
+          }))
+        });
+      }
+      return /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: tooltipIndicator, ...props2 });
+    },
+    [tooltipCallback, tooltipIndicator]
+  );
+  const yDomain = React.useMemo(() => {
+    const min = minValue ?? (autoMinValue ? "auto" : 0);
+    const max = maxValue ?? "auto";
+    return [min, max];
+  }, [autoMinValue, maxValue, minValue]);
+  const xAxisTicks = React.useMemo(() => {
+    if (!startEndOnly || data.length < 2) return;
+    const first = data[0];
+    const last = data[data.length - 1];
+    if (!first || !last) return;
+    return [first[xAxisKey], last[xAxisKey]];
+  }, [data, startEndOnly, xAxisKey]);
+  return /* @__PURE__ */ jsx("div", { "data-slot": "area-chart", ...props, children: /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      className: cn(className),
+      config,
+      children: /* @__PURE__ */ jsxs(
+        AreaChart$1,
+        {
+          accessibilityLayer: true,
+          data,
+          margin: { left: xAxisLabel ? 20 : 12, right: 12, bottom: yAxisLabel ? 20 : 0 },
+          stackOffset: isPercent ? "expand" : void 0,
+          children: [
+            isGradient && /* @__PURE__ */ jsx(GradientDefs, { idPrefix: gradientPrefix, series: normalizedSeries }),
+            showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: gridDashArray, vertical: false }),
+            showXAxis && /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                axisLine: false,
+                dataKey: xAxisKey,
+                interval: intervalType,
+                minTickGap: tickGap,
+                tickFormatter: xAxisTickFormatter,
+                tickLine: false,
+                tickMargin: 8,
+                ticks: xAxisTicks,
+                children: xAxisLabel && /* @__PURE__ */ jsx(Label, { offset: -5, position: "insideBottom", value: xAxisLabel })
+              }
+            ),
+            showYAxis && /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                allowDecimals,
+                axisLine: false,
+                domain: isPercent ? [0, 1] : yDomain,
+                tickFormatter: isPercent ? (value) => `${(value * 100).toFixed(0)}%` : yAxisTickFormatter,
+                tickLine: false,
+                tickMargin: 8,
+                width: yAxisWidth,
+                children: yAxisLabel && /* @__PURE__ */ jsx(Label, { angle: -90, offset: -5, position: "insideLeft", value: yAxisLabel })
+              }
+            ),
+            showTooltip && /* @__PURE__ */ jsx(
+              ChartTooltip,
+              {
+                content: customTooltip ?? (tooltipCallback ? /* @__PURE__ */ jsx(TooltipContentWithCallback, {}) : /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: tooltipIndicator })),
+                cursor: false
+              }
+            ),
+            showLegend && /* @__PURE__ */ jsx(
+              ChartLegend,
+              {
+                align: legendPosition === "left" ? "left" : legendPosition === "right" ? "right" : "center",
+                content: /* @__PURE__ */ jsx(ChartLegendContent, { enableSlider: enableLegendSlider }),
+                layout: legendPosition === "left" || legendPosition === "right" ? "vertical" : "horizontal",
+                verticalAlign: legendPosition === "top" ? "top" : legendPosition === "bottom" ? "bottom" : "middle"
+              }
+            ),
+            normalizedSeries.map((seriesConfig) => {
+              const { dataKey, fillOpacity: seriesFillOpacity, stackId } = seriesConfig;
+              const areaFill = isGradient ? `url(#${gradientPrefix}-${dataKey})` : `var(--color-${dataKey})`;
+              const stroke = `var(--color-${dataKey})`;
+              const computedFillOpacity = isNoFill ? 0 : seriesFillOpacity ?? fillOpacity;
+              return /* @__PURE__ */ jsx(
+                Area,
+                {
+                  activeDot: onValueChange ? { onClick: handleDotClick(dataKey), r: 6, style: { cursor: "pointer" } } : { r: 6 },
+                  connectNulls,
+                  dataKey,
+                  fill: areaFill,
+                  fillOpacity: computedFillOpacity,
+                  stackId: isStacked ? "area-stack" : stackId,
+                  stroke,
+                  type: curveType
+                },
+                dataKey
+              );
+            })
+          ]
+        }
+      )
+    }
+  ) });
+}
+AreaChart.displayName = "AreaChart";
+
+export { AreaChart };
+//# sourceMappingURL=chunk-SHS6EGWS.js.map
+//# sourceMappingURL=chunk-SHS6EGWS.js.map

package/dist/chunk-SHS6EGWS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/AreaChart/AreaChart.tsx"],"names":["data","props","RechartsAreaChart"],"mappings":"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","file":"chunk-SHS6EGWS.js","sourcesContent":["\"use client\"\n\nimport type {\n  AreaChartProps,\n  AreaChartSeriesConfig,\n} from \"./AreaChart.types\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  CartesianGrid,\n  Label,\n  AreaChart as RechartsAreaChart,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"../Chart\"\n\n/**\n * Normalize series to AreaChartSeriesConfig format\n */\nfunction normalizeSeriesConfig(\n  series: (AreaChartSeriesConfig | string)[]\n): AreaChartSeriesConfig[] {\n  return series.map((s) =>\n    typeof s === \"string\" ? { dataKey: s } : s\n  )\n}\n\n/**\n * Generate gradient defs for gradient variant\n */\nfunction GradientDefs({\n  idPrefix,\n  series,\n}: {\n  idPrefix: string\n  series: AreaChartSeriesConfig[]\n}) {\n  return (\n    <defs>\n      {series.map((s) => (\n        <linearGradient\n          key={s.dataKey}\n          id={`${idPrefix}-${s.dataKey}`}\n          x1=\"0\"\n          x2=\"0\"\n          y1=\"0\"\n          y2=\"1\"\n        >\n          <stop\n            offset=\"5%\"\n            stopColor={`var(--color-${s.dataKey})`}\n            stopOpacity={0.8}\n          />\n          <stop\n            offset=\"95%\"\n            stopColor={`var(--color-${s.dataKey})`}\n            stopOpacity={0.1}\n          />\n        </linearGradient>\n      ))}\n    </defs>\n  )\n}\n\n/**\n * AreaChart - Data visualization component for cumulative data\n *\n * Displays quantitative values along a continuous axis with filled area.\n * Ideal for showing trends over time and comparing volumes between series.\n *\n * @example\n * ```tsx\n * const data = [\n *   { month: \"Jan\", desktop: 186, mobile: 80 },\n *   { month: \"Feb\", desktop: 305, mobile: 200 },\n * ]\n *\n * const config = {\n *   desktop: { label: \"Desktop\", color: \"hsl(var(--chart-1))\" },\n *   mobile: { label: \"Mobile\", color: \"hsl(var(--chart-2))\" },\n * }\n *\n * <AreaChart\n *   data={data}\n *   config={config}\n *   xAxisKey=\"month\"\n *   series={[\"desktop\", \"mobile\"]}\n * />\n * ```\n */\nexport function AreaChart({\n  allowDecimals = true,\n  autoMinValue = false,\n  className,\n  config,\n  connectNulls = false,\n  customTooltip,\n  enableLegendSlider = false,\n  curveType = \"monotone\",\n  data,\n  fill = \"solid\",\n  fillOpacity = 0.3,\n  gradientIdPrefix = \"area-gradient\",\n  gridDashArray = \"3 3\",\n  intervalType,\n  legendPosition = \"bottom\",\n  maxValue,\n  minValue,\n  onValueChange,\n  series,\n  showGrid = true,\n  showLegend = false,\n  showTooltip = true,\n  showXAxis = true,\n  showYAxis = true,\n  startEndOnly = false,\n  tickGap,\n  tooltipCallback,\n  tooltipIndicator = \"dot\",\n  variant = \"default\",\n  xAxisLabel,\n  xAxisKey,\n  xAxisTickFormatter,\n  yAxisLabel,\n  yAxisTickFormatter,\n  yAxisWidth,\n  ...props\n}: AreaChartProps) {\n  const normalizedSeries = normalizeSeriesConfig(series)\n  const isStacked = variant === \"stacked\" || variant === \"percent\"\n  const isPercent = variant === \"percent\"\n  const isGradient = variant === \"gradient\" || fill === \"gradient\"\n  const isNoFill = fill === \"none\"\n  const chartId = React.useId().replaceAll(\":\", \"\")\n  const gradientPrefix = `${gradientIdPrefix}-${chartId}`\n  const prevTooltipStateRef = React.useRef<boolean>(false)\n\n  // Handle dot click for onValueChange\n  const handleDotClick = React.useCallback(\n    (dataKey: string) => (data: { payload: Record<string, unknown> }) => {\n      if (!onValueChange) return\n      const payload = data.payload\n      const value = payload[dataKey]\n      onValueChange({\n        category: payload[xAxisKey],\n        dataKey,\n        payload,\n        value: typeof value === \"number\" ? value : 0,\n      })\n    },\n    [onValueChange, xAxisKey]\n  )\n\n  /* eslint-disable react-hooks/static-components, @eslint-react/no-nested-component-definitions, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access -- Intentional: memoized render function with Recharts any-typed props */\n  // Custom tooltip content wrapper for tooltipCallback\n  const TooltipContentWithCallback = React.useCallback(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (props: any) => {\n      const { active = false, label, payload } = props\n\n      // Call tooltipCallback when state changes\n      if (tooltipCallback && active !== prevTooltipStateRef.current) {\n        prevTooltipStateRef.current = active\n        tooltipCallback({\n          active,\n          label,\n          payload: payload?.map((p: { dataKey: number | string; payload: Record<string, unknown>; value: number; }) => ({\n            dataKey: String(p.dataKey),\n            value: p.value,\n            payload: p.payload,\n          })),\n        })\n      }\n\n      return <ChartTooltipContent indicator={tooltipIndicator} {...props} />\n    },\n    [tooltipCallback, tooltipIndicator]\n  )\n\n  // Calculate Y-axis domain\n  const yDomain = React.useMemo(() => {\n    const min = minValue ?? (autoMinValue ? \"auto\" : 0)\n    const max = maxValue ?? \"auto\"\n    return [min, max] as const\n  }, [autoMinValue, maxValue, minValue])\n\n  // Calculate X-axis ticks for startEndOnly\n  const xAxisTicks = React.useMemo(() => {\n    if (!startEndOnly || data.length < 2) return\n    const first = data[0]\n    const last = data[data.length - 1]\n    if (!first || !last) return\n    return [first[xAxisKey], last[xAxisKey]] as string[]\n  }, [data, startEndOnly, xAxisKey])\n\n  return (\n    <div data-slot=\"area-chart\" {...props}>\n      <ChartContainer\n        className={cn(className)}\n        config={config}\n      >\n      <RechartsAreaChart\n        accessibilityLayer\n        data={data}\n        margin={{ left: xAxisLabel ? 20 : 12, right: 12, bottom: yAxisLabel ? 20 : 0 }}\n        stackOffset={isPercent ? \"expand\" : undefined}\n      >\n        {isGradient && (\n          <GradientDefs idPrefix={gradientPrefix} series={normalizedSeries} />\n        )}\n\n        {showGrid && (\n          <CartesianGrid strokeDasharray={gridDashArray} vertical={false} />\n        )}\n\n        {showXAxis && (\n          <XAxis\n            axisLine={false}\n            dataKey={xAxisKey}\n            interval={intervalType}\n            minTickGap={tickGap}\n            tickFormatter={xAxisTickFormatter}\n            tickLine={false}\n            tickMargin={8}\n            ticks={xAxisTicks}\n          >\n            {xAxisLabel && (\n              <Label offset={-5} position=\"insideBottom\" value={xAxisLabel} />\n            )}\n          </XAxis>\n        )}\n\n        {showYAxis && (\n          <YAxis\n            allowDecimals={allowDecimals}\n            axisLine={false}\n            domain={isPercent ? [0, 1] : yDomain}\n            tickFormatter={isPercent ? (value) => `${(value * 100).toFixed(0)}%` : yAxisTickFormatter}\n            tickLine={false}\n            tickMargin={8}\n            width={yAxisWidth}\n          >\n            {yAxisLabel && (\n              <Label angle={-90} offset={-5} position=\"insideLeft\" value={yAxisLabel} />\n            )}\n          </YAxis>\n        )}\n\n        {showTooltip && (\n          <ChartTooltip\n            content={\n              customTooltip\n                ?? (tooltipCallback\n                  ? <TooltipContentWithCallback />\n                  : <ChartTooltipContent indicator={tooltipIndicator} />)\n            }\n            cursor={false}\n          />\n        )}\n\n        {showLegend && (\n          <ChartLegend\n            align={legendPosition === \"left\" ? \"left\" : legendPosition === \"right\" ? \"right\" : \"center\"}\n            content={<ChartLegendContent enableSlider={enableLegendSlider} />}\n            layout={legendPosition === \"left\" || legendPosition === \"right\" ? \"vertical\" : \"horizontal\"}\n            verticalAlign={legendPosition === \"top\" ? \"top\" : legendPosition === \"bottom\" ? \"bottom\" : \"middle\"}\n          />\n        )}\n\n        {normalizedSeries.map((seriesConfig) => {\n          const { dataKey, fillOpacity: seriesFillOpacity, stackId } = seriesConfig\n\n          const areaFill = isGradient\n            ? `url(#${gradientPrefix}-${dataKey})`\n            : `var(--color-${dataKey})`\n\n          const stroke = `var(--color-${dataKey})`\n\n          // Calculate fill opacity: 0 for \"none\", otherwise use series or default\n          const computedFillOpacity = isNoFill ? 0 : (seriesFillOpacity ?? fillOpacity)\n\n          return (\n            <Area\n              key={dataKey}\n              activeDot={\n                onValueChange\n                  ? { onClick: handleDotClick(dataKey), r: 6, style: { cursor: \"pointer\" } }\n                  : { r: 6 }\n              }\n              connectNulls={connectNulls}\n              dataKey={dataKey}\n              fill={areaFill}\n              fillOpacity={computedFillOpacity}\n              stackId={isStacked ? \"area-stack\" : stackId}\n              stroke={stroke}\n              type={curveType}\n            />\n          )\n        })}\n      </RechartsAreaChart>\n      </ChartContainer>\n    </div>\n  )\n}\n\nAreaChart.displayName = \"AreaChart\"\n"]}