@karakuri-ui/react 0.3.2 → 0.3.4

package/dist/components/ui/metric-card.js

@@ -39,6 +39,7 @@ __export(metric_card_exports, {
   metricCardVariants: () => metricCardVariants
 });
 module.exports = __toCommonJS(metric_card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_class_variance_authority = require("class-variance-authority");
 var import_utils = require("../../lib/utils");
@@ -104,20 +105,20 @@ const MetricCardContext = React.createContext({ size: "default", animated: false
 const MetricCard = React.forwardRef(
   ({ className, variant, size, radius, animated = false, children, ...props }, ref) => {
     const resolvedSize = size || "default";
-    return /* @__PURE__ */ React.createElement(MetricCardContext.Provider, { value: { size: resolvedSize, animated } }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricCardContext.Provider, { value: { size: resolvedSize, animated }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref,
         className: (0, import_utils.cn)(metricCardVariants({ variant, size, radius }), className),
-        ...props
-      },
-      children
-    ));
+        ...props,
+        children
+      }
+    ) });
   }
 );
 MetricCard.displayName = "MetricCard";
 const MetricCardHeader = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       ref,
@@ -130,7 +131,7 @@ MetricCardHeader.displayName = "MetricCardHeader";
 const MetricCardTitle = React.forwardRef(
   ({ className, ...props }, ref) => {
     const { size } = React.useContext(MetricCardContext);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "p",
       {
         ref,
@@ -180,14 +181,14 @@ const MetricCardValue = React.forwardRef(
       }, duration / steps);
       return () => clearInterval(timer);
     }, [children, animated]);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "p",
       {
         ref,
         className: (0, import_utils.cn)(valueSizes[size], "font-bold text-foreground mt-1", className),
-        ...props
-      },
-      display
+        ...props,
+        children: display
+      }
     );
   }
 );
@@ -195,24 +196,26 @@ MetricCardValue.displayName = "MetricCardValue";
 const MetricCardTrend = React.forwardRef(
   ({ className, direction, children, ...props }, ref) => {
     const config = trendConfig[direction];
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "p",
       {
         ref,
         className: (0, import_utils.cn)("flex items-center gap-1 text-sm mt-2", config.color, className),
-        ...props
-      },
-      direction === "up" && /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 15.75l7.5-7.5 7.5 7.5" })),
-      direction === "down" && /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })),
-      direction === "neutral" && /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" })),
-      /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, config.srLabel),
-      children
+        ...props,
+        children: [
+          direction === "up" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 15.75l7.5-7.5 7.5 7.5" }) }),
+          direction === "down" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) }),
+          direction === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: config.srLabel }),
+          children
+        ]
+      }
     );
   }
 );
 MetricCardTrend.displayName = "MetricCardTrend";
 const MetricCardDescription = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "p",
     {
       ref,
@@ -225,7 +228,7 @@ MetricCardDescription.displayName = "MetricCardDescription";
 const MetricCardSymbol = React.forwardRef(
   ({ className, ...props }, ref) => {
     const { size } = React.useContext(MetricCardContext);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref,

package/dist/components/ui/metric-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/metric-card.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ── CVA Variants ──\n\nconst metricCardVariants = cva(\n  'transition-colors',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-paper border border-border',\n        elevated: 'bg-background-paper shadow-md',\n        ghost: 'bg-transparent',\n      },\n      size: {\n        sm: 'p-4',\n        default: 'p-4 sm:p-5',\n        lg: 'p-4 sm:p-6',\n      },\n      radius: {\n        none: 'rounded-none',    // 0px\n        sm: 'rounded-sm',        // 2px\n        base: 'rounded',         // 4px\n        default: 'rounded-xl',   // 12px - card default\n        lg: 'rounded-lg',        // 8px\n        xl: 'rounded-xl',        // 12px\n        '2xl': 'rounded-2xl',    // 16px\n        '3xl': 'rounded-3xl',    // 24px\n        full: 'rounded-full',    // 9999px\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'default', radius: 'default' },\n  }\n)\n\n// ── Size maps ──\n\nconst valueSizes = {\n  sm: 'text-xl',\n  default: 'text-2xl',\n  lg: 'text-3xl',\n} as const\n\nconst titleSizes = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-sm',\n} as const\n\nconst iconWrapperSizes = {\n  sm: '[&>svg]:icon-sm',\n  default: '[&>svg]:icon-md',\n  lg: '[&>svg]:icon-lg',\n} as const\n\n// ── Trend config ──\n\nconst trendConfig = {\n  up: { color: 'text-text-success', srLabel: 'Increased' },\n  down: { color: 'text-text-error', srLabel: 'Decreased' },\n  neutral: { color: 'text-text-muted', srLabel: 'No change' },\n} as const\n\n// ── Context ──\n\ntype MetricCardContextValue = { size: 'sm' | 'default' | 'lg'; animated: boolean }\nconst MetricCardContext = React.createContext<MetricCardContextValue>({ size: 'default', animated: false })\n\n// ── Types ──\n\nexport type MetricCardVariant = 'default' | 'elevated' | 'ghost'\nexport type MetricCardSize = 'sm' | 'default' | 'lg'\nexport type MetricCardRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\nexport type MetricCardTrendDirection = 'up' | 'down' | 'neutral'\n\n// ── MetricCard (root) ──\n\nexport interface MetricCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof metricCardVariants> {\n  animated?: boolean\n}\n\nconst MetricCard = React.forwardRef<HTMLDivElement, MetricCardProps>(\n  ({ className, variant, size, radius, animated = false, children, ...props }, ref) => {\n    const resolvedSize = (size || 'default') as MetricCardSize\n    return (\n      <MetricCardContext.Provider value={{ size: resolvedSize, animated }}>\n        <div\n          ref={ref}\n          className={cn(metricCardVariants({ variant, size, radius }), className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </MetricCardContext.Provider>\n    )\n  }\n)\nMetricCard.displayName = 'MetricCard'\n\n// ── MetricCardHeader ──\n\nexport interface MetricCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MetricCardHeader = React.forwardRef<HTMLDivElement, MetricCardHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...props}\n    />\n  )\n)\nMetricCardHeader.displayName = 'MetricCardHeader'\n\n// ── MetricCardTitle ──\n\nexport interface MetricCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardTitle = React.forwardRef<HTMLParagraphElement, MetricCardTitleProps>(\n  ({ className, ...props }, ref) => {\n    const { size } = React.useContext(MetricCardContext)\n    return (\n      <p\n        ref={ref}\n        className={cn(titleSizes[size], 'font-semibold text-text-muted', className)}\n        {...props}\n      />\n    )\n  }\n)\nMetricCardTitle.displayName = 'MetricCardTitle'\n\n// ── MetricCardValue ──\n\nexport interface MetricCardValueProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardValue = React.forwardRef<HTMLParagraphElement, MetricCardValueProps>(\n  ({ className, children, ...props }, ref) => {\n    const { size, animated } = React.useContext(MetricCardContext)\n    const [display, setDisplay] = React.useState<React.ReactNode>(children)\n\n    React.useEffect(() => {\n      if (!animated || typeof children !== 'string') { setDisplay(children); return }\n      const numMatch = children.match(/[\\d,.]+/)\n      if (!numMatch) { setDisplay(children); return }\n      const numStr = numMatch[0].replace(/,/g, '')\n      const target = parseFloat(numStr)\n      if (isNaN(target)) { setDisplay(children); return }\n      const prefix = children.slice(0, children.indexOf(numMatch[0]))\n      const suffix = children.slice(children.indexOf(numMatch[0]) + numMatch[0].length)\n      const steps = 24\n      const duration = 700\n      let step = 0\n      setDisplay(prefix + '0' + suffix)\n      const timer = setInterval(() => {\n        step++\n        const eased = 1 - Math.pow(1 - step / steps, 3)\n        const current = target * eased\n        const formatted = target >= 1000\n          ? Math.floor(current).toLocaleString()\n          : current.toFixed(numStr.includes('.') ? 2 : 0)\n        setDisplay(prefix + formatted + suffix)\n        if (step >= steps) { setDisplay(children); clearInterval(timer) }\n      }, duration / steps)\n      return () => clearInterval(timer)\n    }, [children, animated])\n\n    return (\n      <p\n        ref={ref}\n        className={cn(valueSizes[size], 'font-bold text-foreground mt-1', className)}\n        {...props}\n      >\n        {display}\n      </p>\n    )\n  }\n)\nMetricCardValue.displayName = 'MetricCardValue'\n\n// ── MetricCardTrend ──\n\nexport interface MetricCardTrendProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  direction: MetricCardTrendDirection\n}\n\nconst MetricCardTrend = React.forwardRef<HTMLParagraphElement, MetricCardTrendProps>(\n  ({ className, direction, children, ...props }, ref) => {\n    const config = trendConfig[direction]\n    return (\n      <p\n        ref={ref}\n        className={cn('flex items-center gap-1 text-sm mt-2', config.color, className)}\n        {...props}\n      >\n        {direction === 'up' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 15.75l7.5-7.5 7.5 7.5\" />\n          </svg>\n        )}\n        {direction === 'down' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n          </svg>\n        )}\n        {direction === 'neutral' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 12h14\" />\n          </svg>\n        )}\n        <span className=\"sr-only\">{config.srLabel}</span>\n        {children}\n      </p>\n    )\n  }\n)\nMetricCardTrend.displayName = 'MetricCardTrend'\n\n// ── MetricCardDescription ──\n\nexport interface MetricCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardDescription = React.forwardRef<HTMLParagraphElement, MetricCardDescriptionProps>(\n  ({ className, ...props }, ref) => (\n    <p\n      ref={ref}\n      className={cn('text-xs text-text-muted mt-1', className)}\n      {...props}\n    />\n  )\n)\nMetricCardDescription.displayName = 'MetricCardDescription'\n\n// ── MetricCardSymbol ──\n\nexport interface MetricCardSymbolProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MetricCardSymbol = React.forwardRef<HTMLDivElement, MetricCardSymbolProps>(\n  ({ className, ...props }, ref) => {\n    const { size } = React.useContext(MetricCardContext)\n    return (\n      <div\n        ref={ref}\n        className={cn('text-text-muted', iconWrapperSizes[size], className)}\n        {...props}\n      />\n    )\n  }\n)\nMetricCardSymbol.displayName = 'MetricCardSymbol'\n\n// ── Exports ──\n\nexport {\n  MetricCard,\n  MetricCardHeader,\n  MetricCardTitle,\n  MetricCardValue,\n  MetricCardTrend,\n  MetricCardDescription,\n  MetricCardSymbol,\n  metricCardVariants,\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/metric-card.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ── CVA Variants ──\n\nconst metricCardVariants = cva(\n  'transition-colors',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-paper border border-border',\n        elevated: 'bg-background-paper shadow-md',\n        ghost: 'bg-transparent',\n      },\n      size: {\n        sm: 'p-4',\n        default: 'p-4 sm:p-5',\n        lg: 'p-4 sm:p-6',\n      },\n      radius: {\n        none: 'rounded-none',    // 0px\n        sm: 'rounded-sm',        // 2px\n        base: 'rounded',         // 4px\n        default: 'rounded-xl',   // 12px - card default\n        lg: 'rounded-lg',        // 8px\n        xl: 'rounded-xl',        // 12px\n        '2xl': 'rounded-2xl',    // 16px\n        '3xl': 'rounded-3xl',    // 24px\n        full: 'rounded-full',    // 9999px\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'default', radius: 'default' },\n  }\n)\n\n// ── Size maps ──\n\nconst valueSizes = {\n  sm: 'text-xl',\n  default: 'text-2xl',\n  lg: 'text-3xl',\n} as const\n\nconst titleSizes = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-sm',\n} as const\n\nconst iconWrapperSizes = {\n  sm: '[&>svg]:icon-sm',\n  default: '[&>svg]:icon-md',\n  lg: '[&>svg]:icon-lg',\n} as const\n\n// ── Trend config ──\n\nconst trendConfig = {\n  up: { color: 'text-text-success', srLabel: 'Increased' },\n  down: { color: 'text-text-error', srLabel: 'Decreased' },\n  neutral: { color: 'text-text-muted', srLabel: 'No change' },\n} as const\n\n// ── Context ──\n\ntype MetricCardContextValue = { size: 'sm' | 'default' | 'lg'; animated: boolean }\nconst MetricCardContext = React.createContext<MetricCardContextValue>({ size: 'default', animated: false })\n\n// ── Types ──\n\nexport type MetricCardVariant = 'default' | 'elevated' | 'ghost'\nexport type MetricCardSize = 'sm' | 'default' | 'lg'\nexport type MetricCardRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\nexport type MetricCardTrendDirection = 'up' | 'down' | 'neutral'\n\n// ── MetricCard (root) ──\n\nexport interface MetricCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof metricCardVariants> {\n  animated?: boolean\n}\n\nconst MetricCard = React.forwardRef<HTMLDivElement, MetricCardProps>(\n  ({ className, variant, size, radius, animated = false, children, ...props }, ref) => {\n    const resolvedSize = (size || 'default') as MetricCardSize\n    return (\n      <MetricCardContext.Provider value={{ size: resolvedSize, animated }}>\n        <div\n          ref={ref}\n          className={cn(metricCardVariants({ variant, size, radius }), className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </MetricCardContext.Provider>\n    )\n  }\n)\nMetricCard.displayName = 'MetricCard'\n\n// ── MetricCardHeader ──\n\nexport interface MetricCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MetricCardHeader = React.forwardRef<HTMLDivElement, MetricCardHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...props}\n    />\n  )\n)\nMetricCardHeader.displayName = 'MetricCardHeader'\n\n// ── MetricCardTitle ──\n\nexport interface MetricCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardTitle = React.forwardRef<HTMLParagraphElement, MetricCardTitleProps>(\n  ({ className, ...props }, ref) => {\n    const { size } = React.useContext(MetricCardContext)\n    return (\n      <p\n        ref={ref}\n        className={cn(titleSizes[size], 'font-semibold text-text-muted', className)}\n        {...props}\n      />\n    )\n  }\n)\nMetricCardTitle.displayName = 'MetricCardTitle'\n\n// ── MetricCardValue ──\n\nexport interface MetricCardValueProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardValue = React.forwardRef<HTMLParagraphElement, MetricCardValueProps>(\n  ({ className, children, ...props }, ref) => {\n    const { size, animated } = React.useContext(MetricCardContext)\n    const [display, setDisplay] = React.useState<React.ReactNode>(children)\n\n    React.useEffect(() => {\n      if (!animated || typeof children !== 'string') { setDisplay(children); return }\n      const numMatch = children.match(/[\\d,.]+/)\n      if (!numMatch) { setDisplay(children); return }\n      const numStr = numMatch[0].replace(/,/g, '')\n      const target = parseFloat(numStr)\n      if (isNaN(target)) { setDisplay(children); return }\n      const prefix = children.slice(0, children.indexOf(numMatch[0]))\n      const suffix = children.slice(children.indexOf(numMatch[0]) + numMatch[0].length)\n      const steps = 24\n      const duration = 700\n      let step = 0\n      setDisplay(prefix + '0' + suffix)\n      const timer = setInterval(() => {\n        step++\n        const eased = 1 - Math.pow(1 - step / steps, 3)\n        const current = target * eased\n        const formatted = target >= 1000\n          ? Math.floor(current).toLocaleString()\n          : current.toFixed(numStr.includes('.') ? 2 : 0)\n        setDisplay(prefix + formatted + suffix)\n        if (step >= steps) { setDisplay(children); clearInterval(timer) }\n      }, duration / steps)\n      return () => clearInterval(timer)\n    }, [children, animated])\n\n    return (\n      <p\n        ref={ref}\n        className={cn(valueSizes[size], 'font-bold text-foreground mt-1', className)}\n        {...props}\n      >\n        {display}\n      </p>\n    )\n  }\n)\nMetricCardValue.displayName = 'MetricCardValue'\n\n// ── MetricCardTrend ──\n\nexport interface MetricCardTrendProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  direction: MetricCardTrendDirection\n}\n\nconst MetricCardTrend = React.forwardRef<HTMLParagraphElement, MetricCardTrendProps>(\n  ({ className, direction, children, ...props }, ref) => {\n    const config = trendConfig[direction]\n    return (\n      <p\n        ref={ref}\n        className={cn('flex items-center gap-1 text-sm mt-2', config.color, className)}\n        {...props}\n      >\n        {direction === 'up' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 15.75l7.5-7.5 7.5 7.5\" />\n          </svg>\n        )}\n        {direction === 'down' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n          </svg>\n        )}\n        {direction === 'neutral' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 12h14\" />\n          </svg>\n        )}\n        <span className=\"sr-only\">{config.srLabel}</span>\n        {children}\n      </p>\n    )\n  }\n)\nMetricCardTrend.displayName = 'MetricCardTrend'\n\n// ── MetricCardDescription ──\n\nexport interface MetricCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardDescription = React.forwardRef<HTMLParagraphElement, MetricCardDescriptionProps>(\n  ({ className, ...props }, ref) => (\n    <p\n      ref={ref}\n      className={cn('text-xs text-text-muted mt-1', className)}\n      {...props}\n    />\n  )\n)\nMetricCardDescription.displayName = 'MetricCardDescription'\n\n// ── MetricCardSymbol ──\n\nexport interface MetricCardSymbolProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MetricCardSymbol = React.forwardRef<HTMLDivElement, MetricCardSymbolProps>(\n  ({ className, ...props }, ref) => {\n    const { size } = React.useContext(MetricCardContext)\n    return (\n      <div\n        ref={ref}\n        className={cn('text-text-muted', iconWrapperSizes[size], className)}\n        {...props}\n      />\n    )\n  }\n)\nMetricCardSymbol.displayName = 'MetricCardSymbol'\n\n// ── Exports ──\n\nexport {\n  MetricCard,\n  MetricCardHeader,\n  MetricCardTitle,\n  MetricCardValue,\n  MetricCardTrend,\n  MetricCardDescription,\n  MetricCardSymbol,\n  metricCardVariants,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/metric-card.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -64,20 +65,20 @@ const MetricCardContext = React.createContext({ size: "default", animated: false
 const MetricCard = React.forwardRef(
   ({ className, variant, size, radius, animated = false, children, ...props }, ref) => {
     const resolvedSize = size || "default";
-    return /* @__PURE__ */ React.createElement(MetricCardContext.Provider, { value: { size: resolvedSize, animated } }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(MetricCardContext.Provider, { value: { size: resolvedSize, animated }, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn(metricCardVariants({ variant, size, radius }), className),
-        ...props
-      },
-      children
-    ));
+        ...props,
+        children
+      }
+    ) });
   }
 );
 MetricCard.displayName = "MetricCard";
 const MetricCardHeader = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -90,7 +91,7 @@ MetricCardHeader.displayName = "MetricCardHeader";
 const MetricCardTitle = React.forwardRef(
   ({ className, ...props }, ref) => {
     const { size } = React.useContext(MetricCardContext);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "p",
       {
         ref,
@@ -140,14 +141,14 @@ const MetricCardValue = React.forwardRef(
       }, duration / steps);
       return () => clearInterval(timer);
     }, [children, animated]);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "p",
       {
         ref,
         className: cn(valueSizes[size], "font-bold text-foreground mt-1", className),
-        ...props
-      },
-      display
+        ...props,
+        children: display
+      }
     );
   }
 );
@@ -155,24 +156,26 @@ MetricCardValue.displayName = "MetricCardValue";
 const MetricCardTrend = React.forwardRef(
   ({ className, direction, children, ...props }, ref) => {
     const config = trendConfig[direction];
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "p",
       {
         ref,
         className: cn("flex items-center gap-1 text-sm mt-2", config.color, className),
-        ...props
-      },
-      direction === "up" && /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 15.75l7.5-7.5 7.5 7.5" })),
-      direction === "down" && /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })),
-      direction === "neutral" && /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" })),
-      /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, config.srLabel),
-      children
+        ...props,
+        children: [
+          direction === "up" && /* @__PURE__ */ jsx("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 15.75l7.5-7.5 7.5 7.5" }) }),
+          direction === "down" && /* @__PURE__ */ jsx("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) }),
+          direction === "neutral" && /* @__PURE__ */ jsx("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: config.srLabel }),
+          children
+        ]
+      }
     );
   }
 );
 MetricCardTrend.displayName = "MetricCardTrend";
 const MetricCardDescription = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "p",
     {
       ref,
@@ -185,7 +188,7 @@ MetricCardDescription.displayName = "MetricCardDescription";
 const MetricCardSymbol = React.forwardRef(
   ({ className, ...props }, ref) => {
     const { size } = React.useContext(MetricCardContext);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,

package/dist/components/ui/metric-card.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/metric-card.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ── CVA Variants ──\n\nconst metricCardVariants = cva(\n  'transition-colors',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-paper border border-border',\n        elevated: 'bg-background-paper shadow-md',\n        ghost: 'bg-transparent',\n      },\n      size: {\n        sm: 'p-4',\n        default: 'p-4 sm:p-5',\n        lg: 'p-4 sm:p-6',\n      },\n      radius: {\n        none: 'rounded-none',    // 0px\n        sm: 'rounded-sm',        // 2px\n        base: 'rounded',         // 4px\n        default: 'rounded-xl',   // 12px - card default\n        lg: 'rounded-lg',        // 8px\n        xl: 'rounded-xl',        // 12px\n        '2xl': 'rounded-2xl',    // 16px\n        '3xl': 'rounded-3xl',    // 24px\n        full: 'rounded-full',    // 9999px\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'default', radius: 'default' },\n  }\n)\n\n// ── Size maps ──\n\nconst valueSizes = {\n  sm: 'text-xl',\n  default: 'text-2xl',\n  lg: 'text-3xl',\n} as const\n\nconst titleSizes = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-sm',\n} as const\n\nconst iconWrapperSizes = {\n  sm: '[&>svg]:icon-sm',\n  default: '[&>svg]:icon-md',\n  lg: '[&>svg]:icon-lg',\n} as const\n\n// ── Trend config ──\n\nconst trendConfig = {\n  up: { color: 'text-text-success', srLabel: 'Increased' },\n  down: { color: 'text-text-error', srLabel: 'Decreased' },\n  neutral: { color: 'text-text-muted', srLabel: 'No change' },\n} as const\n\n// ── Context ──\n\ntype MetricCardContextValue = { size: 'sm' | 'default' | 'lg'; animated: boolean }\nconst MetricCardContext = React.createContext<MetricCardContextValue>({ size: 'default', animated: false })\n\n// ── Types ──\n\nexport type MetricCardVariant = 'default' | 'elevated' | 'ghost'\nexport type MetricCardSize = 'sm' | 'default' | 'lg'\nexport type MetricCardRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\nexport type MetricCardTrendDirection = 'up' | 'down' | 'neutral'\n\n// ── MetricCard (root) ──\n\nexport interface MetricCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof metricCardVariants> {\n  animated?: boolean\n}\n\nconst MetricCard = React.forwardRef<HTMLDivElement, MetricCardProps>(\n  ({ className, variant, size, radius, animated = false, children, ...props }, ref) => {\n    const resolvedSize = (size || 'default') as MetricCardSize\n    return (\n      <MetricCardContext.Provider value={{ size: resolvedSize, animated }}>\n        <div\n          ref={ref}\n          className={cn(metricCardVariants({ variant, size, radius }), className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </MetricCardContext.Provider>\n    )\n  }\n)\nMetricCard.displayName = 'MetricCard'\n\n// ── MetricCardHeader ──\n\nexport interface MetricCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MetricCardHeader = React.forwardRef<HTMLDivElement, MetricCardHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...props}\n    />\n  )\n)\nMetricCardHeader.displayName = 'MetricCardHeader'\n\n// ── MetricCardTitle ──\n\nexport interface MetricCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardTitle = React.forwardRef<HTMLParagraphElement, MetricCardTitleProps>(\n  ({ className, ...props }, ref) => {\n    const { size } = React.useContext(MetricCardContext)\n    return (\n      <p\n        ref={ref}\n        className={cn(titleSizes[size], 'font-semibold text-text-muted', className)}\n        {...props}\n      />\n    )\n  }\n)\nMetricCardTitle.displayName = 'MetricCardTitle'\n\n// ── MetricCardValue ──\n\nexport interface MetricCardValueProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardValue = React.forwardRef<HTMLParagraphElement, MetricCardValueProps>(\n  ({ className, children, ...props }, ref) => {\n    const { size, animated } = React.useContext(MetricCardContext)\n    const [display, setDisplay] = React.useState<React.ReactNode>(children)\n\n    React.useEffect(() => {\n      if (!animated || typeof children !== 'string') { setDisplay(children); return }\n      const numMatch = children.match(/[\\d,.]+/)\n      if (!numMatch) { setDisplay(children); return }\n      const numStr = numMatch[0].replace(/,/g, '')\n      const target = parseFloat(numStr)\n      if (isNaN(target)) { setDisplay(children); return }\n      const prefix = children.slice(0, children.indexOf(numMatch[0]))\n      const suffix = children.slice(children.indexOf(numMatch[0]) + numMatch[0].length)\n      const steps = 24\n      const duration = 700\n      let step = 0\n      setDisplay(prefix + '0' + suffix)\n      const timer = setInterval(() => {\n        step++\n        const eased = 1 - Math.pow(1 - step / steps, 3)\n        const current = target * eased\n        const formatted = target >= 1000\n          ? Math.floor(current).toLocaleString()\n          : current.toFixed(numStr.includes('.') ? 2 : 0)\n        setDisplay(prefix + formatted + suffix)\n        if (step >= steps) { setDisplay(children); clearInterval(timer) }\n      }, duration / steps)\n      return () => clearInterval(timer)\n    }, [children, animated])\n\n    return (\n      <p\n        ref={ref}\n        className={cn(valueSizes[size], 'font-bold text-foreground mt-1', className)}\n        {...props}\n      >\n        {display}\n      </p>\n    )\n  }\n)\nMetricCardValue.displayName = 'MetricCardValue'\n\n// ── MetricCardTrend ──\n\nexport interface MetricCardTrendProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  direction: MetricCardTrendDirection\n}\n\nconst MetricCardTrend = React.forwardRef<HTMLParagraphElement, MetricCardTrendProps>(\n  ({ className, direction, children, ...props }, ref) => {\n    const config = trendConfig[direction]\n    return (\n      <p\n        ref={ref}\n        className={cn('flex items-center gap-1 text-sm mt-2', config.color, className)}\n        {...props}\n      >\n        {direction === 'up' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 15.75l7.5-7.5 7.5 7.5\" />\n          </svg>\n        )}\n        {direction === 'down' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n          </svg>\n        )}\n        {direction === 'neutral' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 12h14\" />\n          </svg>\n        )}\n        <span className=\"sr-only\">{config.srLabel}</span>\n        {children}\n      </p>\n    )\n  }\n)\nMetricCardTrend.displayName = 'MetricCardTrend'\n\n// ── MetricCardDescription ──\n\nexport interface MetricCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardDescription = React.forwardRef<HTMLParagraphElement, MetricCardDescriptionProps>(\n  ({ className, ...props }, ref) => (\n    <p\n      ref={ref}\n      className={cn('text-xs text-text-muted mt-1', className)}\n      {...props}\n    />\n  )\n)\nMetricCardDescription.displayName = 'MetricCardDescription'\n\n// ── MetricCardSymbol ──\n\nexport interface MetricCardSymbolProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MetricCardSymbol = React.forwardRef<HTMLDivElement, MetricCardSymbolProps>(\n  ({ className, ...props }, ref) => {\n    const { size } = React.useContext(MetricCardContext)\n    return (\n      <div\n        ref={ref}\n        className={cn('text-text-muted', iconWrapperSizes[size], className)}\n        {...props}\n      />\n    )\n  }\n)\nMetricCardSymbol.displayName = 'MetricCardSymbol'\n\n// ── Exports ──\n\nexport {\n  MetricCard,\n  MetricCardHeader,\n  MetricCardTitle,\n  MetricCardValue,\n  MetricCardTrend,\n  MetricCardDescription,\n  MetricCardSymbol,\n  metricCardVariants,\n}\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAInB,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA;AAAA,QACN,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,OAAO;AAAA;AAAA,QACP,OAAO;AAAA;AAAA,QACP,MAAM;AAAA;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,WAAW,MAAM,WAAW,QAAQ,UAAU;AAAA,EAC5E;AACF;AAIA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAEA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAIA,MAAM,cAAc;AAAA,EAClB,IAAI,EAAE,OAAO,qBAAqB,SAAS,YAAY;AAAA,EACvD,MAAM,EAAE,OAAO,mBAAmB,SAAS,YAAY;AAAA,EACvD,SAAS,EAAE,OAAO,mBAAmB,SAAS,YAAY;AAC5D;AAKA,MAAM,oBAAoB,MAAM,cAAsC,EAAE,MAAM,WAAW,UAAU,MAAM,CAAC;AAiB1G,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,SAAS,MAAM,QAAQ,WAAW,OAAO,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnF,UAAM,eAAgB,QAAQ;AAC9B,WACE,oCAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,MAAM,cAAc,SAAS,KAChE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,EAAE,SAAS,MAAM,OAAO,CAAC,GAAG,SAAS;AAAA,QACrE,GAAG;AAAA;AAAA,MAEH;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAMzB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,iBAAiB,cAAc;AAM/B,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,KAAK,IAAI,MAAM,WAAW,iBAAiB;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,GAAG,iCAAiC,SAAS;AAAA,QACzE,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAM9B,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC1C,UAAM,EAAE,MAAM,SAAS,IAAI,MAAM,WAAW,iBAAiB;AAC7D,UAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAA0B,QAAQ;AAEtE,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,YAAY,OAAO,aAAa,UAAU;AAAE,mBAAW,QAAQ;AAAG;AAAA,MAAO;AAC9E,YAAM,WAAW,SAAS,MAAM,SAAS;AACzC,UAAI,CAAC,UAAU;AAAE,mBAAW,QAAQ;AAAG;AAAA,MAAO;AAC9C,YAAM,SAAS,SAAS,CAAC,EAAE,QAAQ,MAAM,EAAE;AAC3C,YAAM,SAAS,WAAW,MAAM;AAChC,UAAI,MAAM,MAAM,GAAG;AAAE,mBAAW,QAAQ;AAAG;AAAA,MAAO;AAClD,YAAM,SAAS,SAAS,MAAM,GAAG,SAAS,QAAQ,SAAS,CAAC,CAAC,CAAC;AAC9D,YAAM,SAAS,SAAS,MAAM,SAAS,QAAQ,SAAS,CAAC,CAAC,IAAI,SAAS,CAAC,EAAE,MAAM;AAChF,YAAM,QAAQ;AACd,YAAM,WAAW;AACjB,UAAI,OAAO;AACX,iBAAW,SAAS,MAAM,MAAM;AAChC,YAAM,QAAQ,YAAY,MAAM;AAC9B;AACA,cAAM,QAAQ,IAAI,KAAK,IAAI,IAAI,OAAO,OAAO,CAAC;AAC9C,cAAM,UAAU,SAAS;AACzB,cAAM,YAAY,UAAU,MACxB,KAAK,MAAM,OAAO,EAAE,eAAe,IACnC,QAAQ,QAAQ,OAAO,SAAS,GAAG,IAAI,IAAI,CAAC;AAChD,mBAAW,SAAS,YAAY,MAAM;AACtC,YAAI,QAAQ,OAAO;AAAE,qBAAW,QAAQ;AAAG,wBAAc,KAAK;AAAA,QAAE;AAAA,MAClE,GAAG,WAAW,KAAK;AACnB,aAAO,MAAM,cAAc,KAAK;AAAA,IAClC,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,GAAG,kCAAkC,SAAS;AAAA,QAC1E,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAQ9B,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACrD,UAAM,SAAS,YAAY,SAAS;AACpC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,wCAAwC,OAAO,OAAO,SAAS;AAAA,QAC5E,GAAG;AAAA;AAAA,MAEH,cAAc,QACb,oCAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,KAAK,eAAY,UAC3G,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,8BAA6B,CACpF;AAAA,MAED,cAAc,UACb,oCAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,KAAK,eAAY,UAC3G,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,+BAA8B,CACrF;AAAA,MAED,cAAc,aACb,oCAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,KAAK,eAAY,UAC3G,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,YAAW,CAClE;AAAA,MAEF,oCAAC,UAAK,WAAU,aAAW,OAAO,OAAQ;AAAA,MACzC;AAAA,IACH;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAM9B,MAAM,wBAAwB,MAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,sBAAsB,cAAc;AAMpC,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,KAAK,IAAI,MAAM,WAAW,iBAAiB;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,iBAAiB,IAAI,GAAG,SAAS;AAAA,QACjE,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/metric-card.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ── CVA Variants ──\n\nconst metricCardVariants = cva(\n  'transition-colors',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-paper border border-border',\n        elevated: 'bg-background-paper shadow-md',\n        ghost: 'bg-transparent',\n      },\n      size: {\n        sm: 'p-4',\n        default: 'p-4 sm:p-5',\n        lg: 'p-4 sm:p-6',\n      },\n      radius: {\n        none: 'rounded-none',    // 0px\n        sm: 'rounded-sm',        // 2px\n        base: 'rounded',         // 4px\n        default: 'rounded-xl',   // 12px - card default\n        lg: 'rounded-lg',        // 8px\n        xl: 'rounded-xl',        // 12px\n        '2xl': 'rounded-2xl',    // 16px\n        '3xl': 'rounded-3xl',    // 24px\n        full: 'rounded-full',    // 9999px\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'default', radius: 'default' },\n  }\n)\n\n// ── Size maps ──\n\nconst valueSizes = {\n  sm: 'text-xl',\n  default: 'text-2xl',\n  lg: 'text-3xl',\n} as const\n\nconst titleSizes = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-sm',\n} as const\n\nconst iconWrapperSizes = {\n  sm: '[&>svg]:icon-sm',\n  default: '[&>svg]:icon-md',\n  lg: '[&>svg]:icon-lg',\n} as const\n\n// ── Trend config ──\n\nconst trendConfig = {\n  up: { color: 'text-text-success', srLabel: 'Increased' },\n  down: { color: 'text-text-error', srLabel: 'Decreased' },\n  neutral: { color: 'text-text-muted', srLabel: 'No change' },\n} as const\n\n// ── Context ──\n\ntype MetricCardContextValue = { size: 'sm' | 'default' | 'lg'; animated: boolean }\nconst MetricCardContext = React.createContext<MetricCardContextValue>({ size: 'default', animated: false })\n\n// ── Types ──\n\nexport type MetricCardVariant = 'default' | 'elevated' | 'ghost'\nexport type MetricCardSize = 'sm' | 'default' | 'lg'\nexport type MetricCardRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\nexport type MetricCardTrendDirection = 'up' | 'down' | 'neutral'\n\n// ── MetricCard (root) ──\n\nexport interface MetricCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof metricCardVariants> {\n  animated?: boolean\n}\n\nconst MetricCard = React.forwardRef<HTMLDivElement, MetricCardProps>(\n  ({ className, variant, size, radius, animated = false, children, ...props }, ref) => {\n    const resolvedSize = (size || 'default') as MetricCardSize\n    return (\n      <MetricCardContext.Provider value={{ size: resolvedSize, animated }}>\n        <div\n          ref={ref}\n          className={cn(metricCardVariants({ variant, size, radius }), className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </MetricCardContext.Provider>\n    )\n  }\n)\nMetricCard.displayName = 'MetricCard'\n\n// ── MetricCardHeader ──\n\nexport interface MetricCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MetricCardHeader = React.forwardRef<HTMLDivElement, MetricCardHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...props}\n    />\n  )\n)\nMetricCardHeader.displayName = 'MetricCardHeader'\n\n// ── MetricCardTitle ──\n\nexport interface MetricCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardTitle = React.forwardRef<HTMLParagraphElement, MetricCardTitleProps>(\n  ({ className, ...props }, ref) => {\n    const { size } = React.useContext(MetricCardContext)\n    return (\n      <p\n        ref={ref}\n        className={cn(titleSizes[size], 'font-semibold text-text-muted', className)}\n        {...props}\n      />\n    )\n  }\n)\nMetricCardTitle.displayName = 'MetricCardTitle'\n\n// ── MetricCardValue ──\n\nexport interface MetricCardValueProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardValue = React.forwardRef<HTMLParagraphElement, MetricCardValueProps>(\n  ({ className, children, ...props }, ref) => {\n    const { size, animated } = React.useContext(MetricCardContext)\n    const [display, setDisplay] = React.useState<React.ReactNode>(children)\n\n    React.useEffect(() => {\n      if (!animated || typeof children !== 'string') { setDisplay(children); return }\n      const numMatch = children.match(/[\\d,.]+/)\n      if (!numMatch) { setDisplay(children); return }\n      const numStr = numMatch[0].replace(/,/g, '')\n      const target = parseFloat(numStr)\n      if (isNaN(target)) { setDisplay(children); return }\n      const prefix = children.slice(0, children.indexOf(numMatch[0]))\n      const suffix = children.slice(children.indexOf(numMatch[0]) + numMatch[0].length)\n      const steps = 24\n      const duration = 700\n      let step = 0\n      setDisplay(prefix + '0' + suffix)\n      const timer = setInterval(() => {\n        step++\n        const eased = 1 - Math.pow(1 - step / steps, 3)\n        const current = target * eased\n        const formatted = target >= 1000\n          ? Math.floor(current).toLocaleString()\n          : current.toFixed(numStr.includes('.') ? 2 : 0)\n        setDisplay(prefix + formatted + suffix)\n        if (step >= steps) { setDisplay(children); clearInterval(timer) }\n      }, duration / steps)\n      return () => clearInterval(timer)\n    }, [children, animated])\n\n    return (\n      <p\n        ref={ref}\n        className={cn(valueSizes[size], 'font-bold text-foreground mt-1', className)}\n        {...props}\n      >\n        {display}\n      </p>\n    )\n  }\n)\nMetricCardValue.displayName = 'MetricCardValue'\n\n// ── MetricCardTrend ──\n\nexport interface MetricCardTrendProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  direction: MetricCardTrendDirection\n}\n\nconst MetricCardTrend = React.forwardRef<HTMLParagraphElement, MetricCardTrendProps>(\n  ({ className, direction, children, ...props }, ref) => {\n    const config = trendConfig[direction]\n    return (\n      <p\n        ref={ref}\n        className={cn('flex items-center gap-1 text-sm mt-2', config.color, className)}\n        {...props}\n      >\n        {direction === 'up' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 15.75l7.5-7.5 7.5 7.5\" />\n          </svg>\n        )}\n        {direction === 'down' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n          </svg>\n        )}\n        {direction === 'neutral' && (\n          <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5} aria-hidden=\"true\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 12h14\" />\n          </svg>\n        )}\n        <span className=\"sr-only\">{config.srLabel}</span>\n        {children}\n      </p>\n    )\n  }\n)\nMetricCardTrend.displayName = 'MetricCardTrend'\n\n// ── MetricCardDescription ──\n\nexport interface MetricCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst MetricCardDescription = React.forwardRef<HTMLParagraphElement, MetricCardDescriptionProps>(\n  ({ className, ...props }, ref) => (\n    <p\n      ref={ref}\n      className={cn('text-xs text-text-muted mt-1', className)}\n      {...props}\n    />\n  )\n)\nMetricCardDescription.displayName = 'MetricCardDescription'\n\n// ── MetricCardSymbol ──\n\nexport interface MetricCardSymbolProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MetricCardSymbol = React.forwardRef<HTMLDivElement, MetricCardSymbolProps>(\n  ({ className, ...props }, ref) => {\n    const { size } = React.useContext(MetricCardContext)\n    return (\n      <div\n        ref={ref}\n        className={cn('text-text-muted', iconWrapperSizes[size], className)}\n        {...props}\n      />\n    )\n  }\n)\nMetricCardSymbol.displayName = 'MetricCardSymbol'\n\n// ── Exports ──\n\nexport {\n  MetricCard,\n  MetricCardHeader,\n  MetricCardTitle,\n  MetricCardValue,\n  MetricCardTrend,\n  MetricCardDescription,\n  MetricCardSymbol,\n  metricCardVariants,\n}\n"],"mappings":";AA2FQ,cAwGF,YAxGE;AAzFR,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAInB,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA;AAAA,QACN,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,OAAO;AAAA;AAAA,QACP,OAAO;AAAA;AAAA,QACP,MAAM;AAAA;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,WAAW,MAAM,WAAW,QAAQ,UAAU;AAAA,EAC5E;AACF;AAIA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAEA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAIA,MAAM,cAAc;AAAA,EAClB,IAAI,EAAE,OAAO,qBAAqB,SAAS,YAAY;AAAA,EACvD,MAAM,EAAE,OAAO,mBAAmB,SAAS,YAAY;AAAA,EACvD,SAAS,EAAE,OAAO,mBAAmB,SAAS,YAAY;AAC5D;AAKA,MAAM,oBAAoB,MAAM,cAAsC,EAAE,MAAM,WAAW,UAAU,MAAM,CAAC;AAiB1G,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,SAAS,MAAM,QAAQ,WAAW,OAAO,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnF,UAAM,eAAgB,QAAQ;AAC9B,WACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,MAAM,cAAc,SAAS,GAChE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,EAAE,SAAS,MAAM,OAAO,CAAC,GAAG,SAAS;AAAA,QACrE,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAMzB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,iBAAiB,cAAc;AAM/B,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,KAAK,IAAI,MAAM,WAAW,iBAAiB;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,GAAG,iCAAiC,SAAS;AAAA,QACzE,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAM9B,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC1C,UAAM,EAAE,MAAM,SAAS,IAAI,MAAM,WAAW,iBAAiB;AAC7D,UAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAA0B,QAAQ;AAEtE,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,YAAY,OAAO,aAAa,UAAU;AAAE,mBAAW,QAAQ;AAAG;AAAA,MAAO;AAC9E,YAAM,WAAW,SAAS,MAAM,SAAS;AACzC,UAAI,CAAC,UAAU;AAAE,mBAAW,QAAQ;AAAG;AAAA,MAAO;AAC9C,YAAM,SAAS,SAAS,CAAC,EAAE,QAAQ,MAAM,EAAE;AAC3C,YAAM,SAAS,WAAW,MAAM;AAChC,UAAI,MAAM,MAAM,GAAG;AAAE,mBAAW,QAAQ;AAAG;AAAA,MAAO;AAClD,YAAM,SAAS,SAAS,MAAM,GAAG,SAAS,QAAQ,SAAS,CAAC,CAAC,CAAC;AAC9D,YAAM,SAAS,SAAS,MAAM,SAAS,QAAQ,SAAS,CAAC,CAAC,IAAI,SAAS,CAAC,EAAE,MAAM;AAChF,YAAM,QAAQ;AACd,YAAM,WAAW;AACjB,UAAI,OAAO;AACX,iBAAW,SAAS,MAAM,MAAM;AAChC,YAAM,QAAQ,YAAY,MAAM;AAC9B;AACA,cAAM,QAAQ,IAAI,KAAK,IAAI,IAAI,OAAO,OAAO,CAAC;AAC9C,cAAM,UAAU,SAAS;AACzB,cAAM,YAAY,UAAU,MACxB,KAAK,MAAM,OAAO,EAAE,eAAe,IACnC,QAAQ,QAAQ,OAAO,SAAS,GAAG,IAAI,IAAI,CAAC;AAChD,mBAAW,SAAS,YAAY,MAAM;AACtC,YAAI,QAAQ,OAAO;AAAE,qBAAW,QAAQ;AAAG,wBAAc,KAAK;AAAA,QAAE;AAAA,MAClE,GAAG,WAAW,KAAK;AACnB,aAAO,MAAM,cAAc,KAAK;AAAA,IAClC,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,GAAG,kCAAkC,SAAS;AAAA,QAC1E,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAQ9B,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACrD,UAAM,SAAS,YAAY,SAAS;AACpC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,wCAAwC,OAAO,OAAO,SAAS;AAAA,QAC5E,GAAG;AAAA,QAEH;AAAA,wBAAc,QACb,oBAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,KAAK,eAAY,QAC3G,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,8BAA6B,GACpF;AAAA,UAED,cAAc,UACb,oBAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,KAAK,eAAY,QAC3G,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,+BAA8B,GACrF;AAAA,UAED,cAAc,aACb,oBAAC,SAAI,WAAU,WAAU,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,KAAK,eAAY,QAC3G,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,YAAW,GAClE;AAAA,UAEF,oBAAC,UAAK,WAAU,WAAW,iBAAO,SAAQ;AAAA,UACzC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAM9B,MAAM,wBAAwB,MAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,sBAAsB,cAAc;AAMpC,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,KAAK,IAAI,MAAM,WAAW,iBAAiB;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,iBAAiB,IAAI,GAAG,SAAS;AAAA,QACjE,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;","names":[]}