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

package/dist/chunk-GLHKHYJY.js

@@ -0,0 +1,226 @@
+import { Sparkline } from './chunk-QZ7SGO7L.js';
+import { Card, CardHeader, CardContent, CardTitle } from './chunk-WWK7UIKK.js';
+import { ProgressBar } from './chunk-JFV7CNBP.js';
+import { SkeletonLoader } from './chunk-NGX3ITG4.js';
+import { Badge } from './chunk-HNQX6ZG7.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { Minus, ArrowDown, ArrowUp } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeConfig = {
+  sm: {
+    value: "text-[length:var(--kpi-card-value-size-sm)] font-[number:var(--kpi-card-value-weight)]",
+    padding: "p-4"
+  },
+  md: {
+    value: "text-[length:var(--kpi-card-value-size-md)] font-[number:var(--kpi-card-value-weight)]",
+    padding: "p-6"
+  },
+  lg: {
+    value: "text-[length:var(--kpi-card-value-size-lg)] font-[number:var(--kpi-card-value-weight)]",
+    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,
+  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 sparklineColor = computedTrend === "up" ? "var(--kpi-card-sparkline-up)" : computedTrend === "down" ? "var(--kpi-card-sparkline-down)" : "var(--kpi-card-sparkline-neutral)";
+  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(
+              Sparkline,
+              {
+                "aria-hidden": "true",
+                color: sparklineColor,
+                data: sparkline,
+                "data-slot": "kpi-card-sparkline",
+                height: 32,
+                style: { opacity: "var(--kpi-card-sparkline-opacity)" },
+                variant: "bar",
+                width: 96
+              }
+            )
+          ] }),
+          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-GLHKHYJY.js.map
+//# sourceMappingURL=chunk-GLHKHYJY.js.map

package/dist/chunk-GLHKHYJY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/KPICard/KPICard.tsx"],"names":[],"mappings":"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","file":"chunk-GLHKHYJY.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\"\nimport { Sparkline } from \"../Sparkline\"\n\n/**\n * Size configuration for typography\n */\nconst sizeConfig = {\n  sm: {\n    value: \"text-[length:var(--kpi-card-value-size-sm)] font-[number:var(--kpi-card-value-weight)]\",\n    padding: \"p-4\",\n  },\n  md: {\n    value: \"text-[length:var(--kpi-card-value-size-md)] font-[number:var(--kpi-card-value-weight)]\",\n    padding: \"p-6\",\n  },\n  lg: {\n    value: \"text-[length:var(--kpi-card-value-size-lg)] font-[number:var(--kpi-card-value-weight)]\",\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  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  const sparklineColor =\n    computedTrend === \"up\"\n      ? \"var(--kpi-card-sparkline-up)\"\n      : computedTrend === \"down\"\n        ? \"var(--kpi-card-sparkline-down)\"\n        : \"var(--kpi-card-sparkline-neutral)\"\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 && sparkline.length > 0 && (\n            <Sparkline\n              aria-hidden=\"true\"\n              color={sparklineColor}\n              data={sparkline}\n              data-slot=\"kpi-card-sparkline\"\n              height={32}\n              style={{ opacity: \"var(--kpi-card-sparkline-opacity)\" }}\n              variant=\"bar\"\n              width={96}\n            />\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"]}