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

package/dist/chunk-5YUUE5JJ.js

@@ -0,0 +1,186 @@
+import { radioGroupIndicatorVariants, radioGroupItemVariants } from './chunk-ONTUN5XH.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function RadioButton({
+  className,
+  size = "md",
+  label,
+  description,
+  id,
+  ref,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  const descriptionId = `${inputId}-description`;
+  const isChecked = props.checked ?? props.defaultChecked ?? false;
+  const hasText = Boolean(label) || Boolean(description);
+  const describedByParts = [
+    description ? descriptionId : void 0,
+    ariaDescribedBy
+  ].filter(Boolean);
+  const describedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group inline-flex gap-2",
+        description ? "items-start" : "items-center"
+      ),
+      "data-disabled": props.disabled ? "" : void 0,
+      "data-slot": "radio-button-wrapper",
+      "data-state": isChecked ? "checked" : "unchecked",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative inline-flex items-center justify-center",
+              description && "pt-[var(--radio-control-offset-top)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref,
+                  className: cn(
+                    "peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed",
+                    className
+                  ),
+                  "aria-describedby": describedBy,
+                  id: inputId,
+                  type: "radio",
+                  ...props
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    radioGroupItemVariants({ size }),
+                    "peer-checked:border-primary peer-focus-visible:border-[color:var(--radio-root-border-focus)] peer-focus-visible:ring-ring/50 peer-focus-visible:ring-[3px]",
+                    "peer-checked:[&_[data-slot=radio-button-indicator]]:flex"
+                  ),
+                  "data-slot": "radio-button-visual",
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        radioGroupIndicatorVariants({ size }),
+                        "hidden items-center justify-center bg-transparent"
+                      ),
+                      "data-slot": "radio-button-indicator",
+                      children: /* @__PURE__ */ jsx("div", { className: "size-full rounded-full bg-[color:var(--radio-indicator-color)]" })
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        hasText && /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+          label && /* @__PURE__ */ jsx(
+            "label",
+            {
+              className: cn(
+                "text-sm font-medium leading-none cursor-pointer select-none",
+                "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+                size === "lg" && "text-base",
+                size === "sm" && "text-xs"
+              ),
+              "data-slot": "radio-button-label",
+              htmlFor: inputId,
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-xs leading-4 text-[color:var(--muted-foreground)] peer-disabled:opacity-50",
+              "data-slot": "radio-button-description",
+              children: description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var radioButtonVariants = cva(
+  [
+    "peer appearance-none shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none cursor-pointer",
+    "border-input bg-background dark:bg-input/30",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "checked:border-primary checked:bg-primary",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var radioButtonIndicatorVariants = cva(
+  [
+    "pointer-events-none absolute rounded-full bg-primary-foreground transition-transform",
+    "scale-0 peer-checked:scale-100"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-1.5",
+        md: "size-2",
+        lg: "size-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var radioButtonWrapperVariants = cva(
+  "relative inline-flex items-center justify-center",
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var radioButtonLabelVariants = cva(
+  "cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "text-sm ml-2",
+        md: "text-sm ml-2",
+        lg: "text-base ml-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+
+export { RadioButton, radioButtonIndicatorVariants, radioButtonLabelVariants, radioButtonVariants, radioButtonWrapperVariants };
+//# sourceMappingURL=chunk-5YUUE5JJ.js.map
+//# sourceMappingURL=chunk-5YUUE5JJ.js.map

package/dist/chunk-5YUUE5JJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/RadioButton/RadioButton.tsx","../src/components/forms/RadioButton/RadioButton.variants.ts"],"names":[],"mappings":"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","file":"chunk-5YUUE5JJ.js","sourcesContent":["import type { RadioButtonProps } from \"./RadioButton.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  radioGroupIndicatorVariants,\n  radioGroupItemVariants,\n} from \"../RadioGroup/RadioGroup.variants\"\n\n/**\n * A standalone radio button component using native HTML input.\n * For simple use cases without RadioGroup.\n * Visuals are consistent with RadioGroup.\n *\n * @example\n * ```tsx\n * <RadioButton name=\"option\" value=\"1\" label=\"Option 1\" />\n * <RadioButton name=\"option\" value=\"2\" label=\"Option 2\" />\n * ```\n */\nfunction RadioButton({\n  className,\n  size = \"md\",\n  label,\n  description,\n  id,\n  ref,\n  \"aria-describedby\": ariaDescribedBy,\n  ...props\n}: RadioButtonProps) {\n  const generatedId = React.useId()\n  const inputId = id ?? generatedId\n  const descriptionId = `${inputId}-description`\n  const isChecked = props.checked ?? props.defaultChecked ?? false\n  const hasText = Boolean(label) || Boolean(description)\n  const describedByParts = [\n    description ? descriptionId : undefined,\n    ariaDescribedBy,\n  ].filter(Boolean)\n  const describedBy =\n    describedByParts.length > 0 ? describedByParts.join(\" \") : undefined\n\n  return (\n    <div\n      className={cn(\n        \"group inline-flex gap-2\",\n        description ? \"items-start\" : \"items-center\"\n      )}\n      data-disabled={props.disabled ? \"\" : undefined}\n      data-slot=\"radio-button-wrapper\"\n      data-state={isChecked ? \"checked\" : \"unchecked\"}\n    >\n      <div\n        className={cn(\n          \"relative inline-flex items-center justify-center\",\n          description && \"pt-[var(--radio-control-offset-top)]\"\n        )}\n      >\n        <input\n          ref={ref}\n          className={cn(\n            \"peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed\",\n            className\n          )}\n          aria-describedby={describedBy}\n          id={inputId}\n          type=\"radio\"\n          {...props}\n        />\n        <div\n          className={cn(\n            radioGroupItemVariants({ size }),\n            \"peer-checked:border-primary peer-focus-visible:border-[color:var(--radio-root-border-focus)] peer-focus-visible:ring-ring/50 peer-focus-visible:ring-[3px]\",\n            \"peer-checked:[&_[data-slot=radio-button-indicator]]:flex\"\n          )}\n          data-slot=\"radio-button-visual\"\n        >\n          <div\n            className={cn(\n              radioGroupIndicatorVariants({ size }),\n              \"hidden items-center justify-center bg-transparent\"\n            )}\n            data-slot=\"radio-button-indicator\"\n          >\n            <div className=\"size-full rounded-full bg-[color:var(--radio-indicator-color)]\" />\n          </div>\n        </div>\n      </div>\n      {hasText && (\n        <div className=\"grid gap-1.5\">\n          {label && (\n            <label\n              className={cn(\n                \"text-sm font-medium leading-none cursor-pointer select-none\",\n                \"peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n                size === \"lg\" && \"text-base\",\n                size === \"sm\" && \"text-xs\"\n              )}\n              data-slot=\"radio-button-label\"\n              htmlFor={inputId}\n            >\n              {label}\n            </label>\n          )}\n          {description && (\n            <p\n              className=\"text-xs leading-4 text-[color:var(--muted-foreground)] peer-disabled:opacity-50\"\n              data-slot=\"radio-button-description\"\n            >\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { RadioButton }\n","import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const radioButtonVariants = cva(\n  [\n    \"peer appearance-none shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none cursor-pointer\",\n    \"border-input bg-background dark:bg-input/30\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"checked:border-primary checked:bg-primary\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioButtonIndicatorVariants = cva(\n  [\n    \"pointer-events-none absolute rounded-full bg-primary-foreground transition-transform\",\n    \"scale-0 peer-checked:scale-100\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-1.5\",\n        md: \"size-2\",\n        lg: \"size-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioButtonWrapperVariants = cva(\n  \"relative inline-flex items-center justify-center\",\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioButtonLabelVariants = cva(\n  \"cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"text-sm ml-2\",\n        md: \"text-sm ml-2\",\n        lg: \"text-base ml-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type RadioButtonVariantProps = VariantProps<typeof radioButtonVariants>\nexport type RadioButtonIndicatorVariantProps = VariantProps<typeof radioButtonIndicatorVariants>\nexport type RadioButtonWrapperVariantProps = VariantProps<typeof radioButtonWrapperVariants>\nexport type RadioButtonLabelVariantProps = VariantProps<typeof radioButtonLabelVariants>\n"]}

package/dist/chunk-5ZWFIDO2.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-5ZWFIDO2.js.map
+//# sourceMappingURL=chunk-5ZWFIDO2.js.map

package/dist/chunk-5ZWFIDO2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-5ZWFIDO2.js"}

package/dist/chunk-627ZZ6HO.js

@@ -0,0 +1,204 @@
+import { SkeletonLoader } from './chunk-NGX3ITG4.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { useState, useRef, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  lg: "text-[length:var(--single-stat-value-size-lg)]",
+  md: "text-[length:var(--single-stat-value-size-md)]",
+  sm: "text-[length:var(--single-stat-value-size-sm)]",
+  xl: "text-[length:var(--single-stat-value-size-xl)]",
+  xs: "text-[length:var(--single-stat-value-size-xs)]"
+};
+var skeletonSizes = {
+  lg: "h-10",
+  md: "h-8",
+  sm: "h-7",
+  xl: "h-14",
+  xs: "h-6"
+};
+function useAnimatedCounter(targetValue, duration, enabled) {
+  const [count, setCount] = useState(0);
+  const animationFrameRef = useRef(0);
+  const startTimeRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    startTimeRef.current = null;
+    const animate = (timestamp) => {
+      startTimeRef.current ??= timestamp;
+      const progress = Math.min((timestamp - startTimeRef.current) / duration, 1);
+      const eased = 1 - (1 - progress) * (1 - progress);
+      setCount(Math.floor(eased * targetValue));
+      if (progress < 1) {
+        animationFrameRef.current = requestAnimationFrame(animate);
+      }
+    };
+    animationFrameRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [targetValue, duration, enabled]);
+  return enabled ? count : targetValue;
+}
+function SingleStat({
+  value,
+  label,
+  variant = "default",
+  size = "md",
+  prefix,
+  suffix,
+  animated = false,
+  animationDuration = 1e3,
+  loading = false,
+  className,
+  ...props
+}) {
+  const numericValue = typeof value === "number" ? value : Number.NaN;
+  const isNumeric = !Number.isNaN(numericValue);
+  const animatedValue = useAnimatedCounter(
+    isNumeric ? numericValue : 0,
+    animationDuration,
+    animated && isNumeric
+  );
+  const displayValue = animated && isNumeric ? animatedValue.toLocaleString() : typeof value === "number" ? value.toLocaleString() : value;
+  if (loading) {
+    if (variant === "compact") {
+      return /* @__PURE__ */ jsx(
+        SkeletonLoader,
+        {
+          className: cn(skeletonSizes[size], "w-24", className),
+          "data-slot": "single-stat",
+          ...props
+        }
+      );
+    }
+    if (variant === "inline") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("flex items-baseline gap-2", className),
+          "data-slot": "single-stat",
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: cn(skeletonSizes[size], "w-20") }),
+            label && /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-16" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("space-y-1", className),
+        "data-slot": "single-stat",
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-20" }),
+          /* @__PURE__ */ jsx(SkeletonLoader, { className: cn(skeletonSizes[size], "w-24") })
+        ]
+      }
+    );
+  }
+  if (variant === "compact") {
+    const ariaValue = typeof displayValue === "string" ? displayValue : String(displayValue);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "font-[number:var(--single-stat-value-weight)] tabular-nums text-[color:var(--single-stat-value-color)]",
+          sizeClasses[size],
+          className
+        ),
+        "aria-label": label ? `${label}: ${prefix ?? ""}${ariaValue}${suffix ?? ""}` : void 0,
+        "data-slot": "single-stat",
+        role: "text",
+        ...props,
+        children: [
+          prefix && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: prefix }),
+          displayValue,
+          suffix && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: suffix })
+        ]
+      }
+    );
+  }
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": label,
+        className: cn("flex items-baseline gap-2", className),
+        "data-slot": "single-stat",
+        role: "group",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "font-[number:var(--single-stat-value-weight)] tabular-nums text-[color:var(--single-stat-value-color)]",
+                sizeClasses[size]
+              ),
+              "data-slot": "single-stat-value",
+              children: [
+                prefix && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: prefix }),
+                displayValue,
+                suffix && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: suffix })
+              ]
+            }
+          ),
+          label && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-[length:var(--single-stat-label-size)] font-[number:var(--single-stat-label-weight)] text-[color:var(--single-stat-label-color)]",
+              "data-slot": "single-stat-label",
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": label,
+      className: cn("space-y-1", className),
+      "data-slot": "single-stat",
+      role: "group",
+      ...props,
+      children: [
+        label && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-[length:var(--single-stat-label-size)] font-[number:var(--single-stat-label-weight)] text-[color:var(--single-stat-label-color)]",
+            "data-slot": "single-stat-label",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "p",
+          {
+            className: cn(
+              "font-[number:var(--single-stat-value-weight)] tabular-nums text-[color:var(--single-stat-value-color)]",
+              sizeClasses[size]
+            ),
+            "data-slot": "single-stat-value",
+            children: [
+              prefix && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: prefix }),
+              displayValue,
+              suffix && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: suffix })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SingleStat };
+//# sourceMappingURL=chunk-627ZZ6HO.js.map
+//# sourceMappingURL=chunk-627ZZ6HO.js.map

package/dist/chunk-627ZZ6HO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/SingleStat/SingleStat.tsx"],"names":[],"mappings":";;;;;AAUA,IAAM,WAAA,GAA8C;AAAA,EAClD,EAAA,EAAI,gDAAA;AAAA,EACJ,EAAA,EAAI,gDAAA;AAAA,EACJ,EAAA,EAAI,gDAAA;AAAA,EACJ,EAAA,EAAI,gDAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAKA,IAAM,aAAA,GAAgD;AAAA,EACpD,EAAA,EAAI,MAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,MAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAKA,SAAS,kBAAA,CACP,WAAA,EACA,QAAA,EACA,OAAA,EACQ;AAER,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,CAAC,CAAA;AACpC,EAAA,MAAM,iBAAA,GAAoB,OAAe,CAAC,CAAA;AAC1C,EAAA,MAAM,YAAA,GAAe,OAAsB,IAAI,CAAA;AAE/C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA;AAAA,IACF;AAEA,IAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AAEvB,IAAA,MAAM,OAAA,GAAU,CAAC,SAAA,KAAsB;AACrC,MAAA,YAAA,CAAa,OAAA,KAAY,SAAA;AACzB,MAAA,MAAM,WAAW,IAAA,CAAK,GAAA,CAAA,CAAK,YAAY,YAAA,CAAa,OAAA,IAAW,UAAU,CAAC,CAAA;AAG1E,MAAA,MAAM,KAAA,GAAQ,CAAA,GAAA,CAAK,CAAA,GAAI,QAAA,KAAa,CAAA,GAAI,QAAA,CAAA;AACxC,MAAA,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,KAAA,GAAQ,WAAW,CAAC,CAAA;AAExC,MAAA,IAAI,WAAW,CAAA,EAAG;AAChB,QAAA,iBAAA,CAAkB,OAAA,GAAU,sBAAsB,OAAO,CAAA;AAAA,MAC3D;AAAA,IACF,CAAA;AAEA,IAAA,iBAAA,CAAkB,OAAA,GAAU,sBAAsB,OAAO,CAAA;AAEzD,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,kBAAkB,OAAA,EAAS;AAC7B,QAAA,oBAAA,CAAqB,kBAAkB,OAAO,CAAA;AAAA,MAChD;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,WAAA,EAAa,QAAA,EAAU,OAAO,CAAC,CAAA;AAGnC,EAAA,OAAO,UAAU,KAAA,GAAQ,WAAA;AAC3B;AAwBA,SAAS,UAAA,CAAW;AAAA,EAClB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,iBAAA,GAAoB,GAAA;AAAA,EACpB,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAoB;AAElB,EAAA,MAAM,YAAA,GAAe,OAAO,KAAA,KAAU,QAAA,GAAW,QAAQ,MAAA,CAAO,GAAA;AAChE,EAAA,MAAM,SAAA,GAAY,CAAC,MAAA,CAAO,KAAA,CAAM,YAAY,CAAA;AAC5C,EAAA,MAAM,aAAA,GAAgB,kBAAA;AAAA,IACpB,YAAY,YAAA,GAAe,CAAA;AAAA,IAC3B,iBAAA;AAAA,IACA,QAAA,IAAY;AAAA,GACd;AAGA,EAAA,MAAM,YAAA,GAAe,QAAA,IAAY,SAAA,GAC7B,aAAA,CAAc,cAAA,EAAe,GAC7B,OAAO,KAAA,KAAU,QAAA,GACf,KAAA,CAAM,cAAA,EAAe,GACrB,KAAA;AAGN,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,IAAI,YAAY,SAAA,EAAW;AACzB,MAAA,uBACE,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,WAAW,EAAA,CAAG,aAAA,CAAc,IAAI,CAAA,EAAG,QAAQ,SAAS,CAAA;AAAA,UACpD,WAAA,EAAU,aAAA;AAAA,UACT,GAAG;AAAA;AAAA,OACN;AAAA,IAEJ;AAEA,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,uBACE,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,SAAS,CAAA;AAAA,UACpD,WAAA,EAAU,aAAA;AAAA,UACT,GAAG,KAAA;AAAA,UAEJ,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,kBAAe,SAAA,EAAW,EAAA,CAAG,cAAc,IAAI,CAAA,EAAG,MAAM,CAAA,EAAG,CAAA;AAAA,YAC3D,KAAA,oBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAAA,OACjD;AAAA,IAEJ;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,WAAA,EAAa,SAAS,CAAA;AAAA,QACpC,WAAA,EAAU,aAAA;AAAA,QACT,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,0BAC/C,GAAA,CAAC,kBAAe,SAAA,EAAW,EAAA,CAAG,cAAc,IAAI,CAAA,EAAG,MAAM,CAAA,EAAG;AAAA;AAAA;AAAA,KAC9D;AAAA,EAEJ;AAGA,EAAA,IAAI,YAAY,SAAA,EAAW;AACzB,IAAA,MAAM,YAAY,OAAO,YAAA,KAAiB,QAAA,GAAW,YAAA,GAAe,OAAO,YAAY,CAAA;AACvF,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,wGAAA;AAAA,UACA,YAAY,IAAI,CAAA;AAAA,UAChB;AAAA,SACF;AAAA,QACA,YAAA,EAAY,KAAA,GAAQ,CAAA,EAAG,KAAK,CAAA,EAAA,EAAK,MAAA,IAAU,EAAE,CAAA,EAAG,SAAS,CAAA,EAAG,MAAA,IAAU,EAAE,CAAA,CAAA,GAAK,MAAA;AAAA,QAC7E,WAAA,EAAU,aAAA;AAAA,QACV,IAAA,EAAK,MAAA;AAAA,QACJ,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAQ,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,UAC3C,YAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,QAAQ,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KAC9C;AAAA,EAEJ;AAGA,EAAA,IAAI,YAAY,QAAA,EAAU;AACxB,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,SAAS,CAAA;AAAA,QACpD,WAAA,EAAU,aAAA;AAAA,QACV,IAAA,EAAK,OAAA;AAAA,QACJ,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,wGAAA;AAAA,gBACA,YAAY,IAAI;AAAA,eAClB;AAAA,cACA,WAAA,EAAU,mBAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAQ,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,gBAC3C,YAAA;AAAA,gBACA,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,QAAQ,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,WAC9C;AAAA,UACC,KAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,uIAAA;AAAA,cACV,WAAA,EAAU,mBAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AAGA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAW,EAAA,CAAG,WAAA,EAAa,SAAS,CAAA;AAAA,MACpC,WAAA,EAAU,aAAA;AAAA,MACV,IAAA,EAAK,OAAA;AAAA,MACJ,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,KAAA,oBACC,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,uIAAA;AAAA,YACV,WAAA,EAAU,mBAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,wBAEF,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,wGAAA;AAAA,cACA,YAAY,IAAI;AAAA,aAClB;AAAA,YACA,WAAA,EAAU,mBAAA;AAAA,YAET,QAAA,EAAA;AAAA,cAAA,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAQ,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,cAC3C,YAAA;AAAA,cACA,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,QAAQ,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA;AAC9C;AAAA;AAAA,GACF;AAEJ","file":"chunk-627ZZ6HO.js","sourcesContent":["import type { SingleStatProps, SingleStatSize } from \"./SingleStat.types\"\n\nimport { useEffect, useRef, useState } from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { SkeletonLoader } from \"../../primitives/SkeletonLoader\"\n\n/**\n * Size configuration for value typography\n */\nconst sizeClasses: Record<SingleStatSize, string> = {\n  lg: \"text-[length:var(--single-stat-value-size-lg)]\",\n  md: \"text-[length:var(--single-stat-value-size-md)]\",\n  sm: \"text-[length:var(--single-stat-value-size-sm)]\",\n  xl: \"text-[length:var(--single-stat-value-size-xl)]\",\n  xs: \"text-[length:var(--single-stat-value-size-xs)]\",\n}\n\n/**\n * Skeleton height configuration by size\n */\nconst skeletonSizes: Record<SingleStatSize, string> = {\n  lg: \"h-10\",\n  md: \"h-8\",\n  sm: \"h-7\",\n  xl: \"h-14\",\n  xs: \"h-6\",\n}\n\n/**\n * Hook for animated count-up effect\n */\nfunction useAnimatedCounter(\n  targetValue: number,\n  duration: number,\n  enabled: boolean\n): number {\n  // When not enabled, just return the target value directly\n  const [count, setCount] = useState(0)\n  const animationFrameRef = useRef<number>(0)\n  const startTimeRef = useRef<null | number>(null)\n\n  useEffect(() => {\n    if (!enabled) {\n      return\n    }\n\n    startTimeRef.current = null\n\n    const animate = (timestamp: number) => {\n      startTimeRef.current ??= timestamp\n      const progress = Math.min((timestamp - startTimeRef.current) / duration, 1)\n\n      // Use easeOutQuad for smoother animation\n      const eased = 1 - (1 - progress) * (1 - progress)\n      setCount(Math.floor(eased * targetValue))\n\n      if (progress < 1) {\n        animationFrameRef.current = requestAnimationFrame(animate)\n      }\n    }\n\n    animationFrameRef.current = requestAnimationFrame(animate)\n\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current)\n      }\n    }\n  }, [targetValue, duration, enabled])\n\n  // Return target value when not animating, otherwise return animated count\n  return enabled ? count : targetValue\n}\n\n/**\n * SingleStat - Minimalist single metric display\n *\n * A compact component for displaying a single highlighted metric.\n * Simpler than KPICard, focused only on value and label.\n * Ideal for inline indicators or space-constrained layouts.\n *\n * @example\n * ```tsx\n * <SingleStat value={1234} label=\"Total Users\" />\n * ```\n *\n * @example\n * ```tsx\n * <SingleStat\n *   value={45231}\n *   prefix=\"$\"\n *   label=\"Revenue\"\n *   size=\"lg\"\n * />\n * ```\n */\nfunction SingleStat({\n  value,\n  label,\n  variant = \"default\",\n  size = \"md\",\n  prefix,\n  suffix,\n  animated = false,\n  animationDuration = 1000,\n  loading = false,\n  className,\n  ...props\n}: SingleStatProps) {\n  // Use animated counter for numeric values\n  const numericValue = typeof value === \"number\" ? value : Number.NaN\n  const isNumeric = !Number.isNaN(numericValue)\n  const animatedValue = useAnimatedCounter(\n    isNumeric ? numericValue : 0,\n    animationDuration,\n    animated && isNumeric\n  )\n\n  // Format the display value\n  const displayValue = animated && isNumeric\n    ? animatedValue.toLocaleString()\n    : typeof value === \"number\"\n      ? value.toLocaleString()\n      : value\n\n  // Loading state\n  if (loading) {\n    if (variant === \"compact\") {\n      return (\n        <SkeletonLoader\n          className={cn(skeletonSizes[size], \"w-24\", className)}\n          data-slot=\"single-stat\"\n          {...props}\n        />\n      )\n    }\n\n    if (variant === \"inline\") {\n      return (\n        <div\n          className={cn(\"flex items-baseline gap-2\", className)}\n          data-slot=\"single-stat\"\n          {...props}\n        >\n          <SkeletonLoader className={cn(skeletonSizes[size], \"w-20\")} />\n          {label && <SkeletonLoader className=\"h-4 w-16\" />}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\"space-y-1\", className)}\n        data-slot=\"single-stat\"\n        {...props}\n      >\n        {label && <SkeletonLoader className=\"h-4 w-20\" />}\n        <SkeletonLoader className={cn(skeletonSizes[size], \"w-24\")} />\n      </div>\n    )\n  }\n\n  // Compact variant: value only\n  if (variant === \"compact\") {\n    const ariaValue = typeof displayValue === \"string\" ? displayValue : String(displayValue)\n    return (\n      <span\n        className={cn(\n          \"font-[number:var(--single-stat-value-weight)] tabular-nums text-[color:var(--single-stat-value-color)]\",\n          sizeClasses[size],\n          className\n        )}\n        aria-label={label ? `${label}: ${prefix ?? \"\"}${ariaValue}${suffix ?? \"\"}` : undefined}\n        data-slot=\"single-stat\"\n        role=\"text\"\n        {...props}\n      >\n        {prefix && <span aria-hidden=\"true\">{prefix}</span>}\n        {displayValue}\n        {suffix && <span aria-hidden=\"true\">{suffix}</span>}\n      </span>\n    )\n  }\n\n  // Inline variant: label and value side by side\n  if (variant === \"inline\") {\n    return (\n      <div\n        aria-label={label}\n        className={cn(\"flex items-baseline gap-2\", className)}\n        data-slot=\"single-stat\"\n        role=\"group\"\n        {...props}\n      >\n        <span\n          className={cn(\n            \"font-[number:var(--single-stat-value-weight)] tabular-nums text-[color:var(--single-stat-value-color)]\",\n            sizeClasses[size]\n          )}\n          data-slot=\"single-stat-value\"\n        >\n          {prefix && <span aria-hidden=\"true\">{prefix}</span>}\n          {displayValue}\n          {suffix && <span aria-hidden=\"true\">{suffix}</span>}\n        </span>\n        {label && (\n          <span\n            className=\"text-[length:var(--single-stat-label-size)] font-[number:var(--single-stat-label-weight)] text-[color:var(--single-stat-label-color)]\"\n            data-slot=\"single-stat-label\"\n          >\n            {label}\n          </span>\n        )}\n      </div>\n    )\n  }\n\n  // Default variant: label above, value below\n  return (\n    <div\n      aria-label={label}\n      className={cn(\"space-y-1\", className)}\n      data-slot=\"single-stat\"\n      role=\"group\"\n      {...props}\n    >\n      {label && (\n        <p\n          className=\"text-[length:var(--single-stat-label-size)] font-[number:var(--single-stat-label-weight)] text-[color:var(--single-stat-label-color)]\"\n          data-slot=\"single-stat-label\"\n        >\n          {label}\n        </p>\n      )}\n      <p\n        className={cn(\n          \"font-[number:var(--single-stat-value-weight)] tabular-nums text-[color:var(--single-stat-value-color)]\",\n          sizeClasses[size]\n        )}\n        data-slot=\"single-stat-value\"\n      >\n        {prefix && <span aria-hidden=\"true\">{prefix}</span>}\n        {displayValue}\n        {suffix && <span aria-hidden=\"true\">{suffix}</span>}\n      </p>\n    </div>\n  )\n}\n\nexport { SingleStat }\n"]}