@karakuri-ui/react 0.2.3 → 0.2.4

package/dist/components/ui/input.mjs

@@ -0,0 +1,215 @@
+"use client";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { useFieldContext } from "./field";
+const inputVariants = cva(
+  [
+    "flex w-full bg-background text-foreground placeholder:text-foreground/30",
+    "border transition-colors duration-micro outline-transparent",
+    "focus:[outline:2px_solid_transparent]",
+    "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted",
+    "file:border-0 file:bg-transparent file:text-sm file:font-semibold"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "border-border-form hover:border-border-form-strong",
+        filled: "border-transparent bg-background-muted"
+      },
+      focusRing: {
+        true: "",
+        false: ""
+      },
+      size: {
+        xs: "h-9 px-3 text-sm",
+        // 36px / 12px padding / 13px font (3.0:1)
+        sm: "h-10 px-3 text-md",
+        // 40px / 12px padding / 14px font (3.3:1)
+        default: "h-11 px-4 text-base",
+        // 44px / 16px padding / 16px font (2.75:1)
+        lg: "h-12 px-4 text-base",
+        // 48px / 16px padding / 16px font (3.0:1)
+        xl: "h-14 px-4 text-base"
+        // 56px / 16px padding / 16px font (3.5:1)
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        base: "rounded",
+        default: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        "3xl": "rounded-3xl",
+        full: "rounded-full"
+      },
+      state: {
+        default: "",
+        error: "border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]"
+      }
+    },
+    compoundVariants: [
+      // focusRing: true → show custom focus ring
+      { focusRing: true, className: "focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]" },
+      // focusRing: false → keep same state as hover
+      { variant: "default", focusRing: false, className: "focus:border-border-form-strong" },
+      // filled + error
+      {
+        variant: "filled",
+        state: "error",
+        className: "border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      state: "default",
+      focusRing: false
+    }
+  }
+);
+const iconSizeClasses = {
+  xs: "icon-xs",
+  // 14px
+  sm: "icon-xs",
+  // 14px
+  default: "icon-sm",
+  // 16px
+  lg: "icon-sm",
+  // 16px
+  xl: "icon-sm"
+  // 16px
+};
+const iconPaddingClasses = {
+  xs: { left: "pl-8", right: "pr-8" },
+  // 12px + 14px icon + 6px gap = 32px
+  sm: { left: "pl-9", right: "pr-9" },
+  // 12px + 14px icon + 8px gap = 34px → 36px
+  default: { left: "pl-10", right: "pr-10" },
+  // 16px + 16px icon + 8px gap = 40px
+  lg: { left: "pl-10", right: "pr-10" },
+  // 16px + 16px icon + 8px gap = 40px
+  xl: { left: "pl-10", right: "pr-10" }
+  // 16px + 16px icon + 8px gap = 40px
+};
+const iconPositionClasses = {
+  xs: { left: "left-3", right: "right-3" },
+  // 12px
+  sm: { left: "left-3", right: "right-3" },
+  // 12px
+  default: { left: "left-4", right: "right-4" },
+  // 16px
+  lg: { left: "left-4", right: "right-4" },
+  // 16px
+  xl: { left: "left-4", right: "right-4" }
+  // 16px
+};
+const Input = React.forwardRef(
+  ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {
+    const fieldContext = useFieldContext();
+    const resolvedSize = size || "default";
+    const resolvedError = error ?? fieldContext?.error;
+    const resolvedState = resolvedError ? "error" : state;
+    const inputId = id ?? fieldContext?.id;
+    const isDisabled = props.disabled ?? fieldContext?.disabled;
+    const pointerRef = React.useRef(false);
+    const windowBlurredRef = React.useRef(false);
+    const [keyboardFocus, setKeyboardFocus] = React.useState(false);
+    React.useEffect(() => {
+      const onBlur2 = () => {
+        windowBlurredRef.current = true;
+      };
+      const onFocus2 = () => {
+        requestAnimationFrame(() => {
+          windowBlurredRef.current = false;
+        });
+      };
+      window.addEventListener("blur", onBlur2);
+      window.addEventListener("focus", onFocus2);
+      return () => {
+        window.removeEventListener("blur", onBlur2);
+        window.removeEventListener("focus", onFocus2);
+      };
+    }, []);
+    const handlePointerDown = React.useCallback((e) => {
+      pointerRef.current = true;
+      onPointerDown?.(e);
+    }, [onPointerDown]);
+    const handleFocus = React.useCallback((e) => {
+      if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {
+        setKeyboardFocus(true);
+      }
+      pointerRef.current = false;
+      onFocus?.(e);
+    }, [focusRing, onFocus]);
+    const handleBlur = React.useCallback((e) => {
+      setKeyboardFocus(false);
+      pointerRef.current = false;
+      onBlur?.(e);
+    }, [onBlur]);
+    const ariaDescribedBy = fieldContext ? [
+      resolvedError ? `${fieldContext.id}-error` : null
+    ].filter(Boolean).join(" ") || void 0 : void 0;
+    const focusHandlers = {
+      onPointerDown: handlePointerDown,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    };
+    if (leftIcon || rightIcon) {
+      return /* @__PURE__ */ React.createElement("div", { className: "relative w-full" }, leftIcon && /* @__PURE__ */ React.createElement("div", { className: cn(
+        "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
+        iconPositionClasses[resolvedSize].left,
+        `[&>svg]:${iconSizeClasses[resolvedSize]}`
+      ) }, leftIcon), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type,
+          id: inputId,
+          className: cn(
+            inputVariants({ variant, size, radius, state: resolvedState, focusRing }),
+            keyboardFocus && "shadow-[0_0_0_2px_var(--color-focus-ring)]",
+            leftIcon && iconPaddingClasses[resolvedSize].left,
+            rightIcon && iconPaddingClasses[resolvedSize].right,
+            className
+          ),
+          "aria-invalid": resolvedError || void 0,
+          "aria-describedby": ariaDescribedBy,
+          disabled: isDisabled,
+          ref,
+          ...focusHandlers,
+          ...props
+        }
+      ), rightIcon && /* @__PURE__ */ React.createElement("div", { className: cn(
+        "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
+        iconPositionClasses[resolvedSize].right,
+        `[&>svg]:${iconSizeClasses[resolvedSize]}`
+      ) }, rightIcon));
+    }
+    return /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type,
+        id: inputId,
+        className: cn(
+          inputVariants({ variant, size, radius, state: resolvedState, focusRing }),
+          keyboardFocus && "shadow-[0_0_0_2px_var(--color-focus-ring)]",
+          className
+        ),
+        "aria-invalid": resolvedError || void 0,
+        "aria-describedby": ariaDescribedBy,
+        disabled: isDisabled,
+        ref,
+        ...focusHandlers,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+export {
+  Input,
+  inputVariants
+};
+//# sourceMappingURL=input.mjs.map

package/dist/components/ui/input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\nconst inputVariants = cva(\n  [\n    'flex w-full bg-background text-foreground placeholder:text-foreground/30',\n    'border transition-colors duration-micro outline-transparent',\n    'focus:[outline:2px_solid_transparent]',\n    'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted',\n    'file:border-0 file:bg-transparent file:text-sm file:font-semibold',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: 'border-border-form hover:border-border-form-strong',\n        filled: 'border-transparent bg-background-muted',\n      },\n      focusRing: {\n        true: '',\n        false: '',\n      },\n      size: {\n        xs: 'h-9 px-3 text-sm',          // 36px / 12px padding / 13px font (3.0:1)\n        sm: 'h-10 px-3 text-md',         // 40px / 12px padding / 14px font (3.3:1)\n        default: 'h-11 px-4 text-base',  // 44px / 16px padding / 16px font (2.75:1)\n        lg: 'h-12 px-4 text-base',       // 48px / 16px padding / 16px font (3.0:1)\n        xl: 'h-14 px-4 text-base',        // 56px / 16px padding / 16px font (3.5:1)\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      state: {\n        default: '',\n        error: 'border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]',\n      },\n    },\n    compoundVariants: [\n      // focusRing: true → show custom focus ring\n      { focusRing: true, className: 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]' },\n      // focusRing: false → keep same state as hover\n      { variant: 'default', focusRing: false, className: 'focus:border-border-form-strong' },\n      // filled + error\n      {\n        variant: 'filled',\n        state: 'error',\n        className: 'border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none',\n      },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      state: 'default',\n      focusRing: false,\n    },\n  }\n)\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputVariants> {\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  error?: boolean\n  focusRing?: boolean\n}\n\n// Icon size for input (2-step scale)\n// xs~sm: 14px, default~xl: 16px\nconst iconSizeClasses = {\n  xs: 'icon-xs',      // 14px\n  sm: 'icon-xs',      // 14px\n  default: 'icon-sm', // 16px\n  lg: 'icon-sm',      // 16px\n  xl: 'icon-sm',      // 16px\n}\n\n// Icon padding (padding + icon + gap)\nconst iconPaddingClasses = {\n  xs: { left: 'pl-8', right: 'pr-8' },       // 12px + 14px icon + 6px gap = 32px\n  sm: { left: 'pl-9', right: 'pr-9' },       // 12px + 14px icon + 8px gap = 34px → 36px\n  default: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n  lg: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n  xl: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n}\n\n// Icon position (matches horizontal padding)\nconst iconPositionClasses = {\n  xs: { left: 'left-3', right: 'right-3' },      // 12px\n  sm: { left: 'left-3', right: 'right-3' },      // 12px\n  default: { left: 'left-4', right: 'right-4' }, // 16px\n  lg: { left: 'left-4', right: 'right-4' },      // 16px\n  xl: { left: 'left-4', right: 'right-4' },      // 16px\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {\n    const fieldContext = useFieldContext()\n    const resolvedSize = size || 'default'\n    const resolvedError = error ?? fieldContext?.error\n    const resolvedState = resolvedError ? 'error' : state\n    const inputId = id ?? fieldContext?.id\n    const isDisabled = props.disabled ?? fieldContext?.disabled\n\n    // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)\n    const pointerRef = React.useRef(false)\n    const windowBlurredRef = React.useRef(false)\n    const [keyboardFocus, setKeyboardFocus] = React.useState(false)\n\n    // Track window blur/focus to distinguish Tab navigation from window re-activation\n    React.useEffect(() => {\n      const onBlur = () => { windowBlurredRef.current = true }\n      const onFocus = () => { requestAnimationFrame(() => { windowBlurredRef.current = false }) }\n      window.addEventListener('blur', onBlur)\n      window.addEventListener('focus', onFocus)\n      return () => { window.removeEventListener('blur', onBlur); window.removeEventListener('focus', onFocus) }\n    }, [])\n\n    const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLInputElement>) => {\n      pointerRef.current = true\n      onPointerDown?.(e)\n    }, [onPointerDown])\n\n    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {\n        setKeyboardFocus(true)\n      }\n      pointerRef.current = false\n      onFocus?.(e)\n    }, [focusRing, onFocus])\n\n    const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      setKeyboardFocus(false)\n      pointerRef.current = false\n      onBlur?.(e)\n    }, [onBlur])\n\n    // Build aria-describedby from context\n    const ariaDescribedBy = fieldContext\n      ? [\n          resolvedError ? `${fieldContext.id}-error` : null,\n        ]\n          .filter(Boolean)\n          .join(' ') || undefined\n      : undefined\n\n    const focusHandlers = {\n      onPointerDown: handlePointerDown,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n    }\n\n    // If icons are present, wrap input in a container\n    if (leftIcon || rightIcon) {\n      return (\n        <div className=\"relative w-full\">\n          {leftIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].left,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {leftIcon}\n            </div>\n          )}\n          <input\n            type={type}\n            id={inputId}\n            className={cn(\n              inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n              keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n              leftIcon && iconPaddingClasses[resolvedSize].left,\n              rightIcon && iconPaddingClasses[resolvedSize].right,\n              className\n            )}\n            aria-invalid={resolvedError || undefined}\n            aria-describedby={ariaDescribedBy}\n            disabled={isDisabled}\n            ref={ref}\n            {...focusHandlers}\n            {...props}\n          />\n          {rightIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].right,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {rightIcon}\n            </div>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <input\n        type={type}\n        id={inputId}\n        className={cn(\n          inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n          keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n          className\n        )}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={ariaDescribedBy}\n        disabled={isDisabled}\n        ref={ref}\n        {...focusHandlers}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = 'Input'\n\nexport { Input, inputVariants }\n"],"mappings":"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","names":["onBlur","onFocus"]}

package/dist/components/ui/metric-card.d.mts

@@ -0,0 +1,53 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const metricCardVariants: (props?: ({
+    variant?: "default" | "ghost" | "elevated" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type MetricCardVariant = 'default' | 'elevated' | 'ghost';
+type MetricCardSize = 'sm' | 'default' | 'lg';
+type MetricCardRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+type MetricCardTrendDirection = 'up' | 'down' | 'neutral';
+interface MetricCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof metricCardVariants> {
+    animated?: boolean;
+}
+interface MetricCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const MetricCardHeader: React.ForwardRefExoticComponent<MetricCardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface MetricCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+declare const MetricCardTitle: React.ForwardRefExoticComponent<MetricCardTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+interface MetricCardValueProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+declare const MetricCardValue: React.ForwardRefExoticComponent<MetricCardValueProps & React.RefAttributes<HTMLParagraphElement>>;
+interface MetricCardTrendProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    direction: MetricCardTrendDirection;
+}
+declare const MetricCardTrend: React.ForwardRefExoticComponent<MetricCardTrendProps & React.RefAttributes<HTMLParagraphElement>>;
+interface MetricCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+declare const MetricCardDescription: React.ForwardRefExoticComponent<MetricCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+interface MetricCardSymbolProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const MetricCardSymbol: React.ForwardRefExoticComponent<MetricCardSymbolProps & React.RefAttributes<HTMLDivElement>>;
+declare const MetricCard: React.ForwardRefExoticComponent<MetricCardProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<MetricCardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<MetricCardTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+    Value: React.ForwardRefExoticComponent<MetricCardValueProps & React.RefAttributes<HTMLParagraphElement>>;
+    Trend: React.ForwardRefExoticComponent<MetricCardTrendProps & React.RefAttributes<HTMLParagraphElement>>;
+    Description: React.ForwardRefExoticComponent<MetricCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Symbol: React.ForwardRefExoticComponent<MetricCardSymbolProps & React.RefAttributes<HTMLDivElement>>;
+};
+declare namespace MetricCard {
+    type HeaderProps = MetricCardHeaderProps;
+    type TitleProps = MetricCardTitleProps;
+    type ValueProps = MetricCardValueProps;
+    type TrendProps = MetricCardTrendProps;
+    type DescriptionProps = MetricCardDescriptionProps;
+    type SymbolProps = MetricCardSymbolProps;
+}
+
+export { MetricCard, MetricCardDescription, type MetricCardDescriptionProps, MetricCardHeader, type MetricCardHeaderProps, type MetricCardProps, type MetricCardRadius, type MetricCardSize, MetricCardSymbol, type MetricCardSymbolProps, MetricCardTitle, type MetricCardTitleProps, MetricCardTrend, type MetricCardTrendDirection, type MetricCardTrendProps, MetricCardValue, type MetricCardValueProps, type MetricCardVariant, metricCardVariants };

package/dist/components/ui/metric-card.d.ts

@@ -0,0 +1,53 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const metricCardVariants: (props?: ({
+    variant?: "default" | "ghost" | "elevated" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type MetricCardVariant = 'default' | 'elevated' | 'ghost';
+type MetricCardSize = 'sm' | 'default' | 'lg';
+type MetricCardRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+type MetricCardTrendDirection = 'up' | 'down' | 'neutral';
+interface MetricCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof metricCardVariants> {
+    animated?: boolean;
+}
+interface MetricCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const MetricCardHeader: React.ForwardRefExoticComponent<MetricCardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface MetricCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+declare const MetricCardTitle: React.ForwardRefExoticComponent<MetricCardTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+interface MetricCardValueProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+declare const MetricCardValue: React.ForwardRefExoticComponent<MetricCardValueProps & React.RefAttributes<HTMLParagraphElement>>;
+interface MetricCardTrendProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    direction: MetricCardTrendDirection;
+}
+declare const MetricCardTrend: React.ForwardRefExoticComponent<MetricCardTrendProps & React.RefAttributes<HTMLParagraphElement>>;
+interface MetricCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+declare const MetricCardDescription: React.ForwardRefExoticComponent<MetricCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+interface MetricCardSymbolProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const MetricCardSymbol: React.ForwardRefExoticComponent<MetricCardSymbolProps & React.RefAttributes<HTMLDivElement>>;
+declare const MetricCard: React.ForwardRefExoticComponent<MetricCardProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<MetricCardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<MetricCardTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+    Value: React.ForwardRefExoticComponent<MetricCardValueProps & React.RefAttributes<HTMLParagraphElement>>;
+    Trend: React.ForwardRefExoticComponent<MetricCardTrendProps & React.RefAttributes<HTMLParagraphElement>>;
+    Description: React.ForwardRefExoticComponent<MetricCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Symbol: React.ForwardRefExoticComponent<MetricCardSymbolProps & React.RefAttributes<HTMLDivElement>>;
+};
+declare namespace MetricCard {
+    type HeaderProps = MetricCardHeaderProps;
+    type TitleProps = MetricCardTitleProps;
+    type ValueProps = MetricCardValueProps;
+    type TrendProps = MetricCardTrendProps;
+    type DescriptionProps = MetricCardDescriptionProps;
+    type SymbolProps = MetricCardSymbolProps;
+}
+
+export { MetricCard, MetricCardDescription, type MetricCardDescriptionProps, MetricCardHeader, type MetricCardHeaderProps, type MetricCardProps, type MetricCardRadius, type MetricCardSize, MetricCardSymbol, type MetricCardSymbolProps, MetricCardTitle, type MetricCardTitleProps, MetricCardTrend, type MetricCardTrendDirection, type MetricCardTrendProps, MetricCardValue, type MetricCardValueProps, type MetricCardVariant, metricCardVariants };

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

@@ -0,0 +1,258 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var metric_card_exports = {};
+__export(metric_card_exports, {
+  MetricCard: () => MetricCard,
+  MetricCardDescription: () => MetricCardDescription,
+  MetricCardHeader: () => MetricCardHeader,
+  MetricCardSymbol: () => MetricCardSymbol,
+  MetricCardTitle: () => MetricCardTitle,
+  MetricCardTrend: () => MetricCardTrend,
+  MetricCardValue: () => MetricCardValue,
+  metricCardVariants: () => metricCardVariants
+});
+module.exports = __toCommonJS(metric_card_exports);
+var React = __toESM(require("react"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+const metricCardVariants = (0, import_class_variance_authority.cva)(
+  "transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-background-paper border border-border",
+        elevated: "bg-background-paper shadow-md",
+        ghost: "bg-transparent"
+      },
+      size: {
+        sm: "p-4",
+        default: "p-4 sm:p-5",
+        lg: "p-4 sm:p-6"
+      },
+      radius: {
+        none: "rounded-none",
+        // 0px
+        sm: "rounded-sm",
+        // 2px
+        base: "rounded",
+        // 4px
+        default: "rounded-xl",
+        // 12px - card default
+        lg: "rounded-lg",
+        // 8px
+        xl: "rounded-xl",
+        // 12px
+        "2xl": "rounded-2xl",
+        // 16px
+        "3xl": "rounded-3xl",
+        // 24px
+        full: "rounded-full"
+        // 9999px
+      }
+    },
+    defaultVariants: { variant: "default", size: "default", radius: "default" }
+  }
+);
+const valueSizes = {
+  sm: "text-xl",
+  default: "text-2xl",
+  lg: "text-3xl"
+};
+const titleSizes = {
+  sm: "text-xs",
+  default: "text-sm",
+  lg: "text-sm"
+};
+const iconWrapperSizes = {
+  sm: "[&>svg]:icon-sm",
+  default: "[&>svg]:icon-md",
+  lg: "[&>svg]:icon-lg"
+};
+const trendConfig = {
+  up: { color: "text-text-success", srLabel: "Increased" },
+  down: { color: "text-text-error", srLabel: "Decreased" },
+  neutral: { color: "text-text-muted", srLabel: "No change" }
+};
+const MetricCardContext = React.createContext({ size: "default", animated: false });
+const MetricCardRoot = 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(
+      "div",
+      {
+        ref,
+        className: (0, import_utils.cn)(metricCardVariants({ variant, size, radius }), className),
+        ...props
+      },
+      children
+    ));
+  }
+);
+MetricCardRoot.displayName = "MetricCard";
+const MetricCardHeader = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: (0, import_utils.cn)("flex items-center justify-between gap-2", className),
+      ...props
+    }
+  )
+);
+MetricCardHeader.displayName = "MetricCardHeader";
+const MetricCardTitle = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size } = React.useContext(MetricCardContext);
+    return /* @__PURE__ */ React.createElement(
+      "p",
+      {
+        ref,
+        className: (0, import_utils.cn)(titleSizes[size], "font-semibold text-text-muted", className),
+        ...props
+      }
+    );
+  }
+);
+MetricCardTitle.displayName = "MetricCardTitle";
+const MetricCardValue = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { size, animated } = React.useContext(MetricCardContext);
+    const [display, setDisplay] = React.useState(children);
+    React.useEffect(() => {
+      if (!animated || typeof children !== "string") {
+        setDisplay(children);
+        return;
+      }
+      const numMatch = children.match(/[\d,.]+/);
+      if (!numMatch) {
+        setDisplay(children);
+        return;
+      }
+      const numStr = numMatch[0].replace(/,/g, "");
+      const target = parseFloat(numStr);
+      if (isNaN(target)) {
+        setDisplay(children);
+        return;
+      }
+      const prefix = children.slice(0, children.indexOf(numMatch[0]));
+      const suffix = children.slice(children.indexOf(numMatch[0]) + numMatch[0].length);
+      const steps = 24;
+      const duration = 700;
+      let step = 0;
+      setDisplay(prefix + "0" + suffix);
+      const timer = setInterval(() => {
+        step++;
+        const eased = 1 - Math.pow(1 - step / steps, 3);
+        const current = target * eased;
+        const formatted = target >= 1e3 ? Math.floor(current).toLocaleString() : current.toFixed(numStr.includes(".") ? 2 : 0);
+        setDisplay(prefix + formatted + suffix);
+        if (step >= steps) {
+          setDisplay(children);
+          clearInterval(timer);
+        }
+      }, duration / steps);
+      return () => clearInterval(timer);
+    }, [children, animated]);
+    return /* @__PURE__ */ React.createElement(
+      "p",
+      {
+        ref,
+        className: (0, import_utils.cn)(valueSizes[size], "font-bold text-foreground mt-1", className),
+        ...props
+      },
+      display
+    );
+  }
+);
+MetricCardValue.displayName = "MetricCardValue";
+const MetricCardTrend = React.forwardRef(
+  ({ className, direction, children, ...props }, ref) => {
+    const config = trendConfig[direction];
+    return /* @__PURE__ */ React.createElement(
+      "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
+    );
+  }
+);
+MetricCardTrend.displayName = "MetricCardTrend";
+const MetricCardDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      ref,
+      className: (0, import_utils.cn)("text-xs text-text-muted mt-1", className),
+      ...props
+    }
+  )
+);
+MetricCardDescription.displayName = "MetricCardDescription";
+const MetricCardSymbol = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size } = React.useContext(MetricCardContext);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        className: (0, import_utils.cn)("text-text-muted", iconWrapperSizes[size], className),
+        ...props
+      }
+    );
+  }
+);
+MetricCardSymbol.displayName = "MetricCardSymbol";
+const MetricCard = Object.assign(MetricCardRoot, {
+  Header: MetricCardHeader,
+  Title: MetricCardTitle,
+  Value: MetricCardValue,
+  Trend: MetricCardTrend,
+  Description: MetricCardDescription,
+  Symbol: MetricCardSymbol
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MetricCard,
+  MetricCardDescription,
+  MetricCardHeader,
+  MetricCardSymbol,
+  MetricCardTitle,
+  MetricCardTrend,
+  MetricCardValue,
+  metricCardVariants
+});
+//# sourceMappingURL=metric-card.js.map

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

@@ -0,0 +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 MetricCardRoot = 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)\nMetricCardRoot.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\n// ─── Namespace ──────────────────────────────────────────\nconst MetricCard = Object.assign(MetricCardRoot, {\n  Header: MetricCardHeader,\n  Title: MetricCardTitle,\n  Value: MetricCardValue,\n  Trend: MetricCardTrend,\n  Description: MetricCardDescription,\n  Symbol: MetricCardSymbol,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace MetricCard {\n  export type HeaderProps = MetricCardHeaderProps\n  export type TitleProps = MetricCardTitleProps\n  export type ValueProps = MetricCardValueProps\n  export type TrendProps = MetricCardTrendProps\n  export type DescriptionProps = MetricCardDescriptionProps\n  export type SymbolProps = MetricCardSymbolProps\n}\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":[]}