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

package/dist/chunk-D6TH3EGA.js

@@ -0,0 +1,204 @@
+import { SkeletonLoader } from './chunk-QHKOBGLW.js';
+import { cn } from './chunk-HRNDJU7D.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-sm 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-sm 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-D6TH3EGA.js.map
+//# sourceMappingURL=chunk-D6TH3EGA.js.map

package/dist/chunk-D6TH3EGA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/SingleStat/SingleStat.tsx"],"names":[],"mappings":"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","file":"chunk-D6TH3EGA.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-sm 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-sm 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"]}

package/dist/chunk-DDM2I5C6.js

@@ -0,0 +1,199 @@
+import { Badge } from './chunk-TNROOKX3.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { useRef, useState, useId, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var tagsInputVariants = cva(
+  [
+    "flex flex-wrap items-center gap-1.5 w-full min-w-0 rounded-md border bg-transparent transition-[color,box-shadow] outline-none",
+    "dark:bg-input/30",
+    "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+    "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "min-h-8 px-2 py-1 text-sm",
+        md: "min-h-9 px-3 py-1.5 text-base md:text-sm",
+        lg: "min-h-10 px-3.5 py-2 text-base"
+      },
+      variant: {
+        default: "border-input shadow-xs",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var tagsInputInputVariants = cva(
+  [
+    "flex-1 min-w-24 bg-transparent outline-none",
+    "placeholder:text-muted-foreground",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm h-5",
+        md: "text-base md:text-sm h-5",
+        lg: "text-base h-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function TagsInput({
+  value: controlledValue,
+  defaultValue = [],
+  onChange,
+  onTagAdd,
+  onTagRemove,
+  placeholder = "Add tag...",
+  maxTags,
+  allowDuplicates = false,
+  disabled,
+  size = "md",
+  variant,
+  invalid,
+  delimiters = [","],
+  className,
+  ...props
+}) {
+  const inputRef = useRef(null);
+  const [inputValue, setInputValue] = useState("");
+  const [internalTags, setInternalTags] = useState(defaultValue);
+  const id = useId();
+  const isControlled = controlledValue !== void 0;
+  const tags = isControlled ? controlledValue : internalTags;
+  const updateTags = useCallback(
+    (newTags) => {
+      if (!isControlled) {
+        setInternalTags(newTags);
+      }
+      onChange?.(newTags);
+    },
+    [isControlled, onChange]
+  );
+  const addTag = useCallback(
+    (tag) => {
+      const trimmedTag = tag.trim();
+      if (!trimmedTag) return;
+      if (!allowDuplicates && tags.includes(trimmedTag)) {
+        setInputValue("");
+        return;
+      }
+      if (maxTags && tags.length >= maxTags) {
+        setInputValue("");
+        return;
+      }
+      const newTags = [...tags, trimmedTag];
+      updateTags(newTags);
+      onTagAdd?.(trimmedTag);
+      setInputValue("");
+    },
+    [tags, allowDuplicates, maxTags, updateTags, onTagAdd]
+  );
+  const removeTag = useCallback(
+    (tagToRemove) => {
+      const newTags = tags.filter((tag) => tag !== tagToRemove);
+      updateTags(newTags);
+      onTagRemove?.(tagToRemove);
+    },
+    [tags, updateTags, onTagRemove]
+  );
+  const removeLastTag = useCallback(() => {
+    const lastTag = tags[tags.length - 1];
+    if (lastTag) {
+      removeTag(lastTag);
+    }
+  }, [tags, removeTag]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || delimiters.includes(e.key)) {
+        e.preventDefault();
+        addTag(inputValue);
+      } else if (e.key === "Backspace" && inputValue === "" && tags.length > 0) {
+        removeLastTag();
+      }
+    },
+    [inputValue, tags.length, addTag, removeLastTag, delimiters]
+  );
+  const handleInputChange = useCallback(
+    (e) => {
+      const value = e.target.value;
+      for (const delimiter of delimiters) {
+        if (value.includes(delimiter)) {
+          const parts = value.split(delimiter);
+          parts.forEach((part, index) => {
+            if (index < parts.length - 1) {
+              addTag(part);
+            } else {
+              setInputValue(part);
+            }
+          });
+          return;
+        }
+      }
+      setInputValue(value);
+    },
+    [delimiters, addTag]
+  );
+  const handleContainerClick = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+  const tagSize = size === "lg" ? "default" : "sm";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-disabled": disabled ?? void 0,
+      "aria-invalid": invalid ?? void 0,
+      className: cn(tagsInputVariants({ size, variant }), className),
+      "data-slot": "tags-input",
+      onClick: handleContainerClick,
+      ...props,
+      children: [
+        tags.map((tag, index) => /* @__PURE__ */ jsx(
+          Badge,
+          {
+            color: "muted",
+            size: tagSize,
+            type: "pill-color",
+            onDismiss: disabled ? void 0 : () => {
+              removeTag(tag);
+            },
+            children: tag
+          },
+          `${tag}-${String(index)}`
+        )),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            "aria-label": "Add tag",
+            className: tagsInputInputVariants({ size }),
+            "data-slot": "tags-input-field",
+            disabled,
+            id,
+            placeholder: tags.length === 0 ? placeholder : void 0,
+            type: "text",
+            value: inputValue,
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { TagsInput, tagsInputInputVariants, tagsInputVariants };
+//# sourceMappingURL=chunk-DDM2I5C6.js.map
+//# sourceMappingURL=chunk-DDM2I5C6.js.map

package/dist/chunk-DDM2I5C6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/TagsInput/TagsInput.variants.ts","../src/components/forms/TagsInput/TagsInput.tsx"],"names":[],"mappings":"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","file":"chunk-DDM2I5C6.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * TagsInput container variant styles using CVA\n */\nexport const tagsInputVariants = cva(\n  [\n    \"flex flex-wrap items-center gap-1.5 w-full min-w-0 rounded-md border bg-transparent transition-[color,box-shadow] outline-none\",\n    \"dark:bg-input/30\",\n    \"focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]\",\n    \"aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"min-h-8 px-2 py-1 text-sm\",\n        md: \"min-h-9 px-3 py-1.5 text-base md:text-sm\",\n        lg: \"min-h-10 px-3.5 py-2 text-base\",\n      },\n      variant: {\n        default: \"border-input shadow-xs\",\n        filled: \"border-transparent bg-muted\",\n        flushed: \"rounded-none border-x-0 border-t-0 border-b-input px-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * TagsInput inner input variant styles\n */\nexport const tagsInputInputVariants = cva(\n  [\n    \"flex-1 min-w-24 bg-transparent outline-none\",\n    \"placeholder:text-muted-foreground\",\n    \"disabled:cursor-not-allowed\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"text-sm h-5\",\n        md: \"text-base md:text-sm h-5\",\n        lg: \"text-base h-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type TagsInputVariantProps = VariantProps<typeof tagsInputVariants>\nexport type TagsInputInputVariantProps = VariantProps<typeof tagsInputInputVariants>\n","\"use client\"\n\nimport type { TagsInputProps } from \"./TagsInput.types\"\n\nimport * as React from \"react\"\nimport { useCallback, useId, useRef, useState } from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Badge } from \"../../primitives/Badge\"\nimport { tagsInputInputVariants, tagsInputVariants } from \"./TagsInput.variants\"\n\n/**\n * TagsInput - A multi-tag input component for entering and managing tags\n *\n * @example\n * ```tsx\n * // Uncontrolled\n * <TagsInput\n *   defaultValue={[\"react\", \"typescript\"]}\n *   placeholder=\"Add tags...\"\n * />\n *\n * // Controlled\n * const [tags, setTags] = useState([\"hello\"])\n * <TagsInput\n *   value={tags}\n *   onChange={setTags}\n *   maxTags={5}\n * />\n * ```\n */\nfunction TagsInput({\n  value: controlledValue,\n  defaultValue = [],\n  onChange,\n  onTagAdd,\n  onTagRemove,\n  placeholder = \"Add tag...\",\n  maxTags,\n  allowDuplicates = false,\n  disabled,\n  size = \"md\",\n  variant,\n  invalid,\n  delimiters = [\",\"],\n  className,\n  ...props\n}: TagsInputProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [inputValue, setInputValue] = useState(\"\")\n  const [internalTags, setInternalTags] = useState<string[]>(defaultValue)\n  const id = useId()\n\n  // Determine if controlled or uncontrolled\n  const isControlled = controlledValue !== undefined\n  const tags = isControlled ? controlledValue : internalTags\n\n  const updateTags = useCallback(\n    (newTags: string[]) => {\n      if (!isControlled) {\n        setInternalTags(newTags)\n      }\n      onChange?.(newTags)\n    },\n    [isControlled, onChange]\n  )\n\n  const addTag = useCallback(\n    (tag: string) => {\n      const trimmedTag = tag.trim()\n      if (!trimmedTag) return\n\n      // Check for duplicates\n      if (!allowDuplicates && tags.includes(trimmedTag)) {\n        setInputValue(\"\")\n        return\n      }\n\n      // Check max tags\n      if (maxTags && tags.length >= maxTags) {\n        setInputValue(\"\")\n        return\n      }\n\n      const newTags = [...tags, trimmedTag]\n      updateTags(newTags)\n      onTagAdd?.(trimmedTag)\n      setInputValue(\"\")\n    },\n    [tags, allowDuplicates, maxTags, updateTags, onTagAdd]\n  )\n\n  const removeTag = useCallback(\n    (tagToRemove: string) => {\n      const newTags = tags.filter((tag) => tag !== tagToRemove)\n      updateTags(newTags)\n      onTagRemove?.(tagToRemove)\n    },\n    [tags, updateTags, onTagRemove]\n  )\n\n  const removeLastTag = useCallback(() => {\n    const lastTag = tags[tags.length - 1]\n    if (lastTag) {\n      removeTag(lastTag)\n    }\n  }, [tags, removeTag])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\" || delimiters.includes(e.key)) {\n        e.preventDefault()\n        addTag(inputValue)\n      } else if (e.key === \"Backspace\" && inputValue === \"\" && tags.length > 0) {\n        removeLastTag()\n      }\n    },\n    [inputValue, tags.length, addTag, removeLastTag, delimiters]\n  )\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value\n\n      // Check if any delimiter is in the pasted/typed value\n      for (const delimiter of delimiters) {\n        if (value.includes(delimiter)) {\n          const parts = value.split(delimiter)\n          parts.forEach((part, index) => {\n            if (index < parts.length - 1) {\n              addTag(part)\n            } else {\n              setInputValue(part)\n            }\n          })\n          return\n        }\n      }\n\n      setInputValue(value)\n    },\n    [delimiters, addTag]\n  )\n\n  const handleContainerClick = useCallback(() => {\n    inputRef.current?.focus()\n  }, [])\n\n  // Map size to Tag size\n  const tagSize = size === \"lg\" ? \"default\" : \"sm\"\n\n  return (\n    <div\n      aria-disabled={disabled ?? undefined}\n      aria-invalid={invalid ?? undefined}\n      className={cn(tagsInputVariants({ size, variant }), className)}\n      data-slot=\"tags-input\"\n      onClick={handleContainerClick}\n      {...props}\n    >\n      {tags.map((tag, index) => (\n        <Badge\n          key={`${tag}-${String(index)}`}\n          color=\"muted\"\n          size={tagSize}\n          type=\"pill-color\"\n          onDismiss={disabled ? undefined : () => { removeTag(tag); }}\n        >\n          {tag}\n        </Badge>\n      ))}\n      <input\n        ref={inputRef}\n        aria-label=\"Add tag\"\n        className={tagsInputInputVariants({ size })}\n        data-slot=\"tags-input-field\"\n        disabled={disabled}\n        id={id}\n        placeholder={tags.length === 0 ? placeholder : undefined}\n        type=\"text\"\n        value={inputValue}\n        onChange={handleInputChange}\n        onKeyDown={handleKeyDown}\n      />\n    </div>\n  )\n}\n\nexport { TagsInput }\n"]}

package/dist/chunk-DDR24GOP.js

@@ -0,0 +1,182 @@
+import { LineChart } from './chunk-XV6NXXXP.js';
+import { SkeletonLoader } from './chunk-QHKOBGLW.js';
+import { Badge } from './chunk-TNROOKX3.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var chartCardVariants = cva(
+  "transition",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outlined: "border border-border rounded-lg p-4",
+        elevated: "bg-card rounded-lg p-4 shadow-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var chartCardHeaderVariants = cva(
+  "flex items-center justify-between gap-x-2"
+);
+var chartCardTitleVariants = cva(
+  "font-bold text-foreground sm:text-sm"
+);
+var chartCardValueContainerVariants = cva(
+  "mt-2 flex items-baseline justify-between"
+);
+var chartCardValueVariants = cva(
+  "text-xl text-foreground"
+);
+var chartCardPreviousValueVariants = cva(
+  "text-sm text-muted-foreground"
+);
+var chartCardChartVariants = cva(
+  "mt-6"
+);
+var defaultFormatter = (value) => String(value);
+function getBadgeColor(value) {
+  if (value > 0) {
+    return "success";
+  } else if (value < 0) {
+    if (value < -50) {
+      return "warning";
+    }
+    return "destructive";
+  }
+  return "muted";
+}
+function formatPercentage(value) {
+  const sign = value > 0 ? "+" : "";
+  return `${sign}${(value * 100).toFixed(1)}%`;
+}
+function ChartCard({
+  title,
+  data,
+  config,
+  valueFormatter = defaultFormatter,
+  comparisonPeriod = "no-comparison",
+  isThumbnail = false,
+  loading = false,
+  badge,
+  chartHeight = "h-32",
+  showTooltip = true,
+  xAxisKey = "formattedDate",
+  emptyMessage,
+  variant,
+  className,
+  ...props
+}) {
+  const isEmpty = !loading && data.length === 0;
+  const totalValue = React.useMemo(() => {
+    return data.reduce((acc, item) => acc + (item.value ?? 0), 0);
+  }, [data]);
+  const totalPreviousValue = React.useMemo(() => {
+    return data.reduce((acc, item) => acc + (item.previousValue ?? 0), 0);
+  }, [data]);
+  const evolution = React.useMemo(() => {
+    if (comparisonPeriod === "no-comparison" || totalPreviousValue === 0) {
+      return 0;
+    }
+    return (totalValue - totalPreviousValue) / totalPreviousValue;
+  }, [comparisonPeriod, totalPreviousValue, totalValue]);
+  const series = React.useMemo(() => {
+    return comparisonPeriod === "no-comparison" ? ["value"] : ["value", "previousValue"];
+  }, [comparisonPeriod]);
+  const showComparison = comparisonPeriod !== "no-comparison";
+  if (isEmpty) {
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "aria-label": `${title}: empty`,
+        className: cn(chartCardVariants({ variant }), className),
+        "data-empty": "true",
+        "data-slot": "chart-card",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: cn(chartCardHeaderVariants()), children: /* @__PURE__ */ jsx("h3", { className: cn(chartCardTitleVariants()), children: title }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                chartCardChartVariants(),
+                chartHeight,
+                "flex items-center justify-center text-sm text-muted-foreground"
+              ),
+              "data-slot": "chart-card-empty",
+              children: emptyMessage ?? "No data available"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "aria-busy": "true",
+        className: cn(chartCardVariants({ variant }), className),
+        "data-slot": "chart-card",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(chartCardHeaderVariants()), children: [
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-24" }),
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-5 w-12" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cn(chartCardValueContainerVariants()), children: /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-7 w-32" }) }),
+          /* @__PURE__ */ jsx("div", { className: cn(chartCardChartVariants(), chartHeight), children: /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-full w-full" }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "aria-label": `${title}: ${valueFormatter(totalValue)}`,
+      className: cn(chartCardVariants({ variant }), className),
+      "data-slot": "chart-card",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn(chartCardHeaderVariants()), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: cn(chartCardTitleVariants()), children: title }),
+          showComparison && (badge ?? /* @__PURE__ */ jsx(Badge, { color: getBadgeColor(evolution), size: "sm", children: formatPercentage(evolution) }))
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: cn(chartCardValueContainerVariants()), children: [
+          /* @__PURE__ */ jsx("p", { className: cn(chartCardValueVariants()), children: valueFormatter(totalValue) }),
+          showComparison && /* @__PURE__ */ jsxs("p", { className: cn(chartCardPreviousValueVariants()), children: [
+            "from ",
+            valueFormatter(totalPreviousValue)
+          ] })
+        ] }),
+        !isThumbnail && data.length > 0 && /* @__PURE__ */ jsx(
+          LineChart,
+          {
+            autoMinValue: true,
+            startEndOnly: true,
+            className: cn(chartCardChartVariants(), chartHeight),
+            config,
+            data,
+            series,
+            showLegend: false,
+            showTooltip,
+            showYAxis: false,
+            xAxisKey,
+            xAxisTickFormatter: (value) => String(value),
+            yAxisTickFormatter: (value) => valueFormatter(Number(value))
+          }
+        )
+      ]
+    }
+  );
+}
+ChartCard.displayName = "ChartCard";
+
+export { ChartCard, chartCardChartVariants, chartCardHeaderVariants, chartCardPreviousValueVariants, chartCardTitleVariants, chartCardValueContainerVariants, chartCardValueVariants, chartCardVariants };
+//# sourceMappingURL=chunk-DDR24GOP.js.map
+//# sourceMappingURL=chunk-DDR24GOP.js.map

package/dist/chunk-DDR24GOP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/ChartCard/ChartCard.variants.ts","../src/components/data-display/ChartCard/ChartCard.tsx"],"names":[],"mappings":"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","file":"chunk-DDR24GOP.js","sourcesContent":["// ChartCard/ChartCard.variants.ts\nimport { cva } from \"class-variance-authority\"\n\n/**\n * ChartCard container variants\n */\nexport const chartCardVariants = cva(\n  \"transition\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        outlined: \"border border-border rounded-lg p-4\",\n        elevated: \"bg-card rounded-lg p-4 shadow-sm\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * ChartCard header variants\n */\nexport const chartCardHeaderVariants = cva(\n  \"flex items-center justify-between gap-x-2\"\n)\n\n/**\n * ChartCard title variants\n */\nexport const chartCardTitleVariants = cva(\n  \"font-bold text-foreground sm:text-sm\"\n)\n\n/**\n * ChartCard value container variants\n */\nexport const chartCardValueContainerVariants = cva(\n  \"mt-2 flex items-baseline justify-between\"\n)\n\n/**\n * ChartCard value text variants\n */\nexport const chartCardValueVariants = cva(\n  \"text-xl text-foreground\"\n)\n\n/**\n * ChartCard previous value variants\n */\nexport const chartCardPreviousValueVariants = cva(\n  \"text-sm text-muted-foreground\"\n)\n\n/**\n * ChartCard chart container variants\n */\nexport const chartCardChartVariants = cva(\n  \"mt-6\"\n)\n","// ChartCard/ChartCard.tsx\n\"use client\"\n\nimport type { ChartCardProps, ChartCardValueFormatter } from \"./ChartCard.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Badge } from \"../../primitives/Badge\"\nimport { SkeletonLoader } from \"../../primitives/SkeletonLoader\"\nimport { LineChart } from \"../LineChart\"\nimport {\n  chartCardChartVariants,\n  chartCardHeaderVariants,\n  chartCardPreviousValueVariants,\n  chartCardTitleVariants,\n  chartCardValueContainerVariants,\n  chartCardValueVariants,\n  chartCardVariants,\n} from \"./ChartCard.variants\"\n\n/**\n * Default value formatter (returns value as string)\n */\nconst defaultFormatter: ChartCardValueFormatter = (value) => String(value)\n\n/**\n * Get badge color based on evolution percentage\n */\nfunction getBadgeColor(value: number): \"destructive\" | \"muted\" | \"success\" | \"warning\" {\n  if (value > 0) {\n    return \"success\"\n  } else if (value < 0) {\n    if (value < -50) {\n      return \"warning\"\n    }\n    return \"destructive\"\n  }\n  return \"muted\"\n}\n\n/**\n * Format percentage for display\n */\nfunction formatPercentage(value: number): string {\n  const sign = value > 0 ? \"+\" : \"\"\n  return `${sign}${(value * 100).toFixed(1)}%`\n}\n\n/**\n * ChartCard - Dashboard widget with integrated LineChart\n *\n * Displays a KPI value with trend chart and optional comparison period.\n * Matches the Tremor DashboardChartCard layout with evolution badge.\n *\n * @example\n * ```tsx\n * const data = [\n *   { formattedDate: \"01/01\", value: 1000, previousValue: 900 },\n *   { formattedDate: \"02/01\", value: 1200, previousValue: 1100 },\n * ]\n *\n * const config = {\n *   value: { label: \"Current\", color: \"hsl(var(--chart-1))\" },\n *   previousValue: { label: \"Previous\", color: \"hsl(var(--chart-2))\" },\n * }\n *\n * <ChartCard\n *   title=\"Revenue\"\n *   data={data}\n *   config={config}\n *   valueFormatter={(v) => `$${v.toLocaleString()}`}\n *   comparisonPeriod=\"previous-year\"\n * />\n * ```\n */\nfunction ChartCard({\n  title,\n  data,\n  config,\n  valueFormatter = defaultFormatter,\n  comparisonPeriod = \"no-comparison\",\n  isThumbnail = false,\n  loading = false,\n  badge,\n  chartHeight = \"h-32\",\n  showTooltip = true,\n  xAxisKey = \"formattedDate\",\n  emptyMessage,\n  variant,\n  className,\n  ...props\n}: ChartCardProps) {\n  const isEmpty = !loading && data.length === 0\n  // Calculate totals\n  const totalValue = React.useMemo(() => {\n    return data.reduce((acc, item) => acc + (item.value ?? 0), 0)\n  }, [data])\n\n  const totalPreviousValue = React.useMemo(() => {\n    return data.reduce((acc, item) => acc + (item.previousValue ?? 0), 0)\n  }, [data])\n\n  // Calculate evolution percentage\n  const evolution = React.useMemo(() => {\n    if (comparisonPeriod === \"no-comparison\" || totalPreviousValue === 0) {\n      return 0\n    }\n    return (totalValue - totalPreviousValue) / totalPreviousValue\n  }, [comparisonPeriod, totalPreviousValue, totalValue])\n\n  // Determine which series to show\n  const series = React.useMemo(() => {\n    return comparisonPeriod === \"no-comparison\"\n      ? [\"value\"]\n      : [\"value\", \"previousValue\"]\n  }, [comparisonPeriod])\n\n  // Show comparison UI elements\n  const showComparison = comparisonPeriod !== \"no-comparison\"\n\n  // Empty state (DES-1254 item 3 — Figma Empty State)\n  if (isEmpty) {\n    return (\n      <article\n        aria-label={`${title}: empty`}\n        className={cn(chartCardVariants({ variant }), className)}\n        data-empty=\"true\"\n        data-slot=\"chart-card\"\n        {...props}\n      >\n        <div className={cn(chartCardHeaderVariants())}>\n          <h3 className={cn(chartCardTitleVariants())}>{title}</h3>\n        </div>\n        <div\n          className={cn(\n            chartCardChartVariants(),\n            chartHeight,\n            \"flex items-center justify-center text-sm text-muted-foreground\"\n          )}\n          data-slot=\"chart-card-empty\"\n        >\n          {emptyMessage ?? \"No data available\"}\n        </div>\n      </article>\n    )\n  }\n\n  // Loading state\n  if (loading) {\n    return (\n      <article\n        aria-busy=\"true\"\n        className={cn(chartCardVariants({ variant }), className)}\n        data-slot=\"chart-card\"\n        {...props}\n      >\n        <div className={cn(chartCardHeaderVariants())}>\n          <SkeletonLoader className=\"h-4 w-24\" />\n          <SkeletonLoader className=\"h-5 w-12\" />\n        </div>\n        <div className={cn(chartCardValueContainerVariants())}>\n          <SkeletonLoader className=\"h-7 w-32\" />\n        </div>\n        <div className={cn(chartCardChartVariants(), chartHeight)}>\n          <SkeletonLoader className=\"h-full w-full\" />\n        </div>\n      </article>\n    )\n  }\n\n  return (\n    <article\n      aria-label={`${title}: ${valueFormatter(totalValue)}`}\n      className={cn(chartCardVariants({ variant }), className)}\n      data-slot=\"chart-card\"\n      {...props}\n    >\n      {/* Header with title and badge */}\n      <div className={cn(chartCardHeaderVariants())}>\n        <div className=\"flex items-center gap-x-2\">\n          <h3 className={cn(chartCardTitleVariants())}>\n            {title}\n          </h3>\n          {showComparison && (\n            badge ?? (\n              <Badge color={getBadgeColor(evolution)} size=\"sm\">\n                {formatPercentage(evolution)}\n              </Badge>\n            )\n          )}\n        </div>\n      </div>\n\n      {/* Value display */}\n      <div className={cn(chartCardValueContainerVariants())}>\n        <p className={cn(chartCardValueVariants())}>\n          {valueFormatter(totalValue)}\n        </p>\n        {showComparison && (\n          <p className={cn(chartCardPreviousValueVariants())}>\n            from {valueFormatter(totalPreviousValue)}\n          </p>\n        )}\n      </div>\n\n      {/* Chart */}\n      {!isThumbnail && data.length > 0 && (\n        <LineChart\n          autoMinValue\n          startEndOnly\n          className={cn(chartCardChartVariants(), chartHeight)}\n          config={config}\n          data={data}\n          series={series}\n          showLegend={false}\n          showTooltip={showTooltip}\n          showYAxis={false}\n          xAxisKey={xAxisKey}\n          xAxisTickFormatter={(value) => String(value)}\n          yAxisTickFormatter={(value) => valueFormatter(Number(value))}\n        />\n      )}\n    </article>\n  )\n}\n\nChartCard.displayName = \"ChartCard\"\n\nexport { ChartCard }\n"]}