@etus/ui 0.4.0-beta.1 → 0.4.0-beta.3

package/dist/chunk-U4H3XHSI.js

@@ -0,0 +1,305 @@
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var PROGRESS_CIRCLE_SIZES = {
+  xxs: { diameter: 64, strokeWidth: 4, fontSize: "text-sm", labelSize: "text-xs" },
+  xs: { diameter: 160, strokeWidth: 8, fontSize: "text-2xl", labelSize: "text-sm" },
+  sm: { diameter: 200, strokeWidth: 10, fontSize: "text-3xl", labelSize: "text-sm" },
+  md: { diameter: 240, strokeWidth: 12, fontSize: "text-4xl", labelSize: "text-base" },
+  lg: { diameter: 280, strokeWidth: 14, fontSize: "text-5xl", labelSize: "text-base" }
+};
+var progressCircleContainerVariants = cva(
+  "relative inline-flex items-center justify-center",
+  {
+    variants: {
+      size: {
+        xxs: "w-[var(--progress-circle-size-xxs-diameter)] h-[var(--progress-circle-size-xxs-diameter)]",
+        xs: "w-[var(--progress-circle-size-xs-diameter)] h-[var(--progress-circle-size-xs-diameter)]",
+        sm: "w-[var(--progress-circle-size-sm-diameter)] h-[var(--progress-circle-size-sm-diameter)]",
+        md: "w-[var(--progress-circle-size-md-diameter)] h-[var(--progress-circle-size-md-diameter)]",
+        lg: "w-[var(--progress-circle-size-lg-diameter)] h-[var(--progress-circle-size-lg-diameter)]"
+      },
+      shape: {
+        circle: "",
+        "half-circle": "!h-auto"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "circle"
+    }
+  }
+);
+var progressCircleTrackVariants = cva(
+  "transition-colors",
+  {
+    variants: {
+      color: {
+        default: "stroke-[color:var(--progress-circle-track-color-default)]",
+        primary: "stroke-[color:var(--progress-circle-track-color-primary)]",
+        success: "stroke-[color:var(--progress-circle-track-color-success)]",
+        warning: "stroke-[color:var(--progress-circle-track-color-warning)]",
+        error: "stroke-[color:var(--progress-circle-track-color-error)]"
+      }
+    },
+    defaultVariants: {
+      color: "default"
+    }
+  }
+);
+var progressCircleIndicatorVariants = cva(
+  "transition-all duration-700 ease-out motion-reduce:transition-none",
+  {
+    variants: {
+      color: {
+        default: "stroke-[color:var(--progress-circle-indicator-color-default)]",
+        primary: "stroke-[color:var(--progress-circle-indicator-color-primary)]",
+        success: "stroke-[color:var(--progress-circle-indicator-color-success)]",
+        warning: "stroke-[color:var(--progress-circle-indicator-color-warning)]",
+        error: "stroke-[color:var(--progress-circle-indicator-color-error)]"
+      },
+      indeterminate: {
+        true: "animate-spin origin-center",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      color: "default",
+      indeterminate: false
+    }
+  }
+);
+var progressCircleValueVariants = cva(
+  "font-[var(--progress-circle-value-font-weight)] tabular-nums text-[color:var(--progress-circle-value-color)]",
+  {
+    variants: {
+      size: {
+        xxs: "text-sm",
+        xs: "text-2xl",
+        sm: "text-3xl",
+        md: "text-4xl",
+        lg: "text-5xl"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var progressCircleLabelVariants = cva(
+  "text-[color:var(--progress-circle-label-color)]",
+  {
+    variants: {
+      size: {
+        xxs: "text-xs",
+        xs: "text-sm",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var defaultFormatValue = (value) => `${String(value)}%`;
+function ProgressCircle({
+  value = 0,
+  max = 100,
+  indeterminate = false,
+  size = "md",
+  shape = "circle",
+  color = "default",
+  label,
+  formatValue = defaultFormatValue,
+  showValue = true,
+  radius: customRadius,
+  strokeWidth: customStrokeWidth,
+  className,
+  animate = true,
+  tooltip,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+}) {
+  const clampedRawValue = Math.min(max, Math.max(0, value));
+  const clampedValue = clampedRawValue / max * 100;
+  const [isVisible, setIsVisible] = React.useState(!animate || indeterminate);
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!animate || indeterminate || isVisible) {
+      return;
+    }
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting) {
+          requestAnimationFrame(() => {
+            setIsVisible(true);
+          });
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [animate, indeterminate, isVisible]);
+  const sizeConfig = PROGRESS_CIRCLE_SIZES[size];
+  const strokeWidth = customStrokeWidth ?? sizeConfig.strokeWidth;
+  const diameter = customRadius ? customRadius * 2 + strokeWidth : sizeConfig.diameter;
+  const radius = (diameter - strokeWidth) / 2;
+  const center = diameter / 2;
+  const isHalfCircle = shape === "half-circle";
+  const circumference = isHalfCircle ? Math.PI * radius : 2 * Math.PI * radius;
+  const displayValue = indeterminate ? 25 : isVisible ? clampedValue : 0;
+  const progressOffset = circumference - displayValue / 100 * circumference;
+  const viewBoxHeight = isHalfCircle ? diameter / 2 + strokeWidth : diameter;
+  const getPath = () => {
+    if (isHalfCircle) {
+      const startX = strokeWidth / 2;
+      const startY = center;
+      const endX = diameter - strokeWidth / 2;
+      const endY = center;
+      return `M ${String(startX)} ${String(startY)} A ${String(radius)} ${String(radius)} 0 0 1 ${String(endX)} ${String(endY)}`;
+    }
+    return;
+  };
+  const formattedValue = formatValue(clampedRawValue);
+  const progressCircleElement = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        progressCircleContainerVariants({ size, shape }),
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-valuemax": max,
+      "aria-valuemin": 0,
+      "aria-valuenow": indeterminate ? void 0 : clampedRawValue,
+      "data-indeterminate": indeterminate || void 0,
+      "data-slot": "progress-circle",
+      role: "progressbar",
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: isHalfCircle ? "rotate-0" : "",
+            "data-slot": "progress-circle-svg",
+            height: viewBoxHeight,
+            viewBox: `0 0 ${String(diameter)} ${String(viewBoxHeight)}`,
+            width: diameter,
+            children: isHalfCircle ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: cn(progressCircleTrackVariants({ color })),
+                  d: getPath(),
+                  "data-slot": "progress-circle-track",
+                  fill: "none",
+                  strokeLinecap: "round",
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: cn(progressCircleIndicatorVariants({ color })),
+                  d: getPath(),
+                  "data-slot": "progress-circle-indicator",
+                  fill: "none",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: progressOffset,
+                  strokeLinecap: "round",
+                  strokeWidth
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: cn(progressCircleTrackVariants({ color })),
+                  cx: center,
+                  cy: center,
+                  "data-slot": "progress-circle-track",
+                  fill: "none",
+                  r: radius,
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  style: {
+                    transform: indeterminate ? void 0 : "rotate(-90deg)",
+                    transformOrigin: "center"
+                  },
+                  className: cn(progressCircleIndicatorVariants({ color, indeterminate })),
+                  cx: center,
+                  cy: center,
+                  "data-slot": "progress-circle-indicator",
+                  fill: "none",
+                  r: radius,
+                  strokeDasharray: circumference,
+                  strokeDashoffset: progressOffset,
+                  strokeLinecap: "round",
+                  strokeWidth
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute flex flex-col items-center justify-center",
+              isHalfCircle && "bottom-0"
+            ),
+            "data-slot": "progress-circle-content",
+            children: [
+              showValue && !indeterminate && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(progressCircleValueVariants({ size })),
+                  "data-slot": "progress-circle-value",
+                  children: formattedValue
+                }
+              ),
+              label && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(progressCircleLabelVariants({ size })),
+                  "data-slot": "progress-circle-label",
+                  children: label
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: progressCircleElement }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+    ] });
+  }
+  return progressCircleElement;
+}
+
+export { PROGRESS_CIRCLE_SIZES, ProgressCircle, progressCircleContainerVariants, progressCircleIndicatorVariants, progressCircleLabelVariants, progressCircleTrackVariants, progressCircleValueVariants };
+//# sourceMappingURL=chunk-U4H3XHSI.js.map
+//# sourceMappingURL=chunk-U4H3XHSI.js.map

package/dist/chunk-U4H3XHSI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/ProgressCircle/ProgressCircle.variants.ts","../src/components/primitives/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":"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","file":"chunk-U4H3XHSI.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Size configuration for ProgressCircle\n * Maps size variant to actual pixel dimensions and stroke widths.\n *\n * Values are synced with CSS variables from @etus/tokens:\n * - --progress-circle-size-{size}-diameter\n * - --progress-circle-size-{size}-stroke-width\n *\n * Numeric values are required here for SVG attribute calculations\n * (radius, circumference, path coordinates).\n */\nexport const PROGRESS_CIRCLE_SIZES = {\n  xxs: { diameter: 64, strokeWidth: 4, fontSize: \"text-sm\", labelSize: \"text-xs\" },\n  xs: { diameter: 160, strokeWidth: 8, fontSize: \"text-2xl\", labelSize: \"text-sm\" },\n  sm: { diameter: 200, strokeWidth: 10, fontSize: \"text-3xl\", labelSize: \"text-sm\" },\n  md: { diameter: 240, strokeWidth: 12, fontSize: \"text-4xl\", labelSize: \"text-base\" },\n  lg: { diameter: 280, strokeWidth: 14, fontSize: \"text-5xl\", labelSize: \"text-base\" },\n} as const\n\n/**\n * Container variants for the progress circle\n * Uses CSS custom properties from @etus/tokens for sizing\n */\nexport const progressCircleContainerVariants = cva(\n  \"relative inline-flex items-center justify-center\",\n  {\n    variants: {\n      size: {\n        xxs: \"w-[var(--progress-circle-size-xxs-diameter)] h-[var(--progress-circle-size-xxs-diameter)]\",\n        xs: \"w-[var(--progress-circle-size-xs-diameter)] h-[var(--progress-circle-size-xs-diameter)]\",\n        sm: \"w-[var(--progress-circle-size-sm-diameter)] h-[var(--progress-circle-size-sm-diameter)]\",\n        md: \"w-[var(--progress-circle-size-md-diameter)] h-[var(--progress-circle-size-md-diameter)]\",\n        lg: \"w-[var(--progress-circle-size-lg-diameter)] h-[var(--progress-circle-size-lg-diameter)]\",\n      },\n      shape: {\n        circle: \"\",\n        \"half-circle\": \"!h-auto\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      shape: \"circle\",\n    },\n  }\n)\n\n/**\n * Track (background circle) color variants\n */\nexport const progressCircleTrackVariants = cva(\n  \"transition-colors\",\n  {\n    variants: {\n      color: {\n        default: \"stroke-[color:var(--progress-circle-track-color-default)]\",\n        primary: \"stroke-[color:var(--progress-circle-track-color-primary)]\",\n        success: \"stroke-[color:var(--progress-circle-track-color-success)]\",\n        warning: \"stroke-[color:var(--progress-circle-track-color-warning)]\",\n        error: \"stroke-[color:var(--progress-circle-track-color-error)]\",\n      },\n    },\n    defaultVariants: {\n      color: \"default\",\n    },\n  }\n)\n\n/**\n * Indicator (progress arc) color variants\n */\nexport const progressCircleIndicatorVariants = cva(\n  \"transition-all duration-700 ease-out motion-reduce:transition-none\",\n  {\n    variants: {\n      color: {\n        default: \"stroke-[color:var(--progress-circle-indicator-color-default)]\",\n        primary: \"stroke-[color:var(--progress-circle-indicator-color-primary)]\",\n        success: \"stroke-[color:var(--progress-circle-indicator-color-success)]\",\n        warning: \"stroke-[color:var(--progress-circle-indicator-color-warning)]\",\n        error: \"stroke-[color:var(--progress-circle-indicator-color-error)]\",\n      },\n      indeterminate: {\n        true: \"animate-spin origin-center\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      color: \"default\",\n      indeterminate: false,\n    },\n  }\n)\n\n/**\n * Value text variants (percentage in center)\n */\nexport const progressCircleValueVariants = cva(\n  \"font-[var(--progress-circle-value-font-weight)] tabular-nums text-[color:var(--progress-circle-value-color)]\",\n  {\n    variants: {\n      size: {\n        xxs: \"text-sm\",\n        xs: \"text-2xl\",\n        sm: \"text-3xl\",\n        md: \"text-4xl\",\n        lg: \"text-5xl\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * Label text variants (below percentage)\n */\nexport const progressCircleLabelVariants = cva(\n  \"text-[color:var(--progress-circle-label-color)]\",\n  {\n    variants: {\n      size: {\n        xxs: \"text-xs\",\n        xs: \"text-sm\",\n        sm: \"text-sm\",\n        md: \"text-base\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type ProgressCircleContainerVariants = VariantProps<typeof progressCircleContainerVariants>\nexport type ProgressCircleTrackVariants = VariantProps<typeof progressCircleTrackVariants>\nexport type ProgressCircleIndicatorVariants = VariantProps<typeof progressCircleIndicatorVariants>\n","\"use client\"\n\nimport type { ProgressCircleProps } from \"./ProgressCircle.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport {\n  PROGRESS_CIRCLE_SIZES,\n  progressCircleContainerVariants,\n  progressCircleIndicatorVariants,\n  progressCircleLabelVariants,\n  progressCircleTrackVariants,\n  progressCircleValueVariants,\n} from \"./ProgressCircle.variants\"\n\n/**\n * Default format function for progress value\n */\nconst defaultFormatValue = (value: number): string => `${String(value)}%`\n\n/**\n * ProgressCircle component for displaying circular progress indicators.\n *\n * Built with SVG for smooth rendering and full accessibility support.\n * Supports multiple sizes, shapes (full circle and half-circle),\n * color variants, and optional labels.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <ProgressCircle value={75} />\n *\n * // With label\n * <ProgressCircle value={60} label=\"Active users\" />\n *\n * // Half-circle variant\n * <ProgressCircle value={80} shape=\"half-circle\" />\n *\n * // Different sizes and colors\n * <ProgressCircle value={50} size=\"lg\" color=\"warning\" />\n * ```\n */\nfunction ProgressCircle({\n  value = 0,\n  max = 100,\n  indeterminate = false,\n  size = \"md\",\n  shape = \"circle\",\n  color = \"default\",\n  label,\n  formatValue = defaultFormatValue,\n  showValue = true,\n  radius: customRadius,\n  strokeWidth: customStrokeWidth,\n  className,\n  animate = true,\n  tooltip,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n}: ProgressCircleProps) {\n  // Clamp the raw value between 0 and max first\n  const clampedRawValue = Math.min(max, Math.max(0, value))\n\n  // Calculate percentage based on clamped value and max\n  const clampedValue = (clampedRawValue / max) * 100\n\n  // Animation state - initialize based on animate and indeterminate props\n  const [isVisible, setIsVisible] = React.useState(!animate || indeterminate)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n\n  // Use IntersectionObserver to trigger animation only when in viewport\n  React.useEffect(() => {\n    // Skip if not animating, indeterminate, or already visible\n    if (!animate || indeterminate || isVisible) {\n      return\n    }\n\n    const element = containerRef.current\n    if (!element) {\n      return\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0]\n        if (entry?.isIntersecting) {\n          requestAnimationFrame(() => {\n            setIsVisible(true)\n          })\n          observer.disconnect()\n        }\n      },\n      { threshold: 0.1 }\n    )\n\n    observer.observe(element)\n\n    return () => { observer.disconnect(); }\n  }, [animate, indeterminate, isVisible])\n\n  // Get size configuration\n  const sizeConfig = PROGRESS_CIRCLE_SIZES[size]\n  const strokeWidth = customStrokeWidth ?? sizeConfig.strokeWidth\n  // Use custom radius if provided, otherwise use size preset\n  const diameter = customRadius ? (customRadius * 2 + strokeWidth) : sizeConfig.diameter\n\n  // Calculate SVG dimensions\n  const radius = (diameter - strokeWidth) / 2\n  const center = diameter / 2\n\n  // Calculate circumference and progress\n  const isHalfCircle = shape === \"half-circle\"\n  const circumference = isHalfCircle ? Math.PI * radius : 2 * Math.PI * radius\n\n  // For indeterminate, show ~25% of the arc; otherwise use the actual value\n  // For animation, start at 0 and animate to the target value when visible\n  const displayValue = indeterminate ? 25 : (isVisible ? clampedValue : 0)\n  const progressOffset = circumference - (displayValue / 100) * circumference\n\n  // SVG viewBox and path calculations\n  const viewBoxHeight = isHalfCircle ? diameter / 2 + strokeWidth : diameter\n\n  // For half-circle, we use an arc path instead of a circle\n  const getPath = () => {\n    if (isHalfCircle) {\n      // Arc from left to right (180 degrees at top)\n      const startX = strokeWidth / 2\n      const startY = center\n      const endX = diameter - strokeWidth / 2\n      const endY = center\n      return `M ${String(startX)} ${String(startY)} A ${String(radius)} ${String(radius)} 0 0 1 ${String(endX)} ${String(endY)}`\n    }\n    return\n  }\n\n  // Format the clamped value for display\n  const formattedValue = formatValue(clampedRawValue)\n\n  const progressCircleElement = (\n    <div\n      ref={containerRef}\n      className={cn(\n        progressCircleContainerVariants({ size, shape }),\n        className\n      )}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-valuemax={max}\n      aria-valuemin={0}\n      aria-valuenow={indeterminate ? undefined : clampedRawValue}\n      data-indeterminate={indeterminate || undefined}\n      data-slot=\"progress-circle\"\n      role=\"progressbar\"\n    >\n      <svg\n        className={isHalfCircle ? \"rotate-0\" : \"\"}\n        data-slot=\"progress-circle-svg\"\n        height={viewBoxHeight}\n        viewBox={`0 0 ${String(diameter)} ${String(viewBoxHeight)}`}\n        width={diameter}\n      >\n        {isHalfCircle ? (\n          <>\n            {/* Half-circle track */}\n            <path\n              className={cn(progressCircleTrackVariants({ color }))}\n              d={getPath()}\n              data-slot=\"progress-circle-track\"\n              fill=\"none\"\n              strokeLinecap=\"round\"\n              strokeWidth={strokeWidth}\n            />\n            {/* Half-circle indicator */}\n            <path\n              className={cn(progressCircleIndicatorVariants({ color }))}\n              d={getPath()}\n              data-slot=\"progress-circle-indicator\"\n              fill=\"none\"\n              strokeDasharray={circumference}\n              strokeDashoffset={progressOffset}\n              strokeLinecap=\"round\"\n              strokeWidth={strokeWidth}\n            />\n          </>\n        ) : (\n          <>\n            {/* Full circle track */}\n            <circle\n              className={cn(progressCircleTrackVariants({ color }))}\n              cx={center}\n              cy={center}\n              data-slot=\"progress-circle-track\"\n              fill=\"none\"\n              r={radius}\n              strokeWidth={strokeWidth}\n            />\n            {/* Full circle indicator */}\n            <circle\n              style={{\n                transform: indeterminate ? undefined : \"rotate(-90deg)\",\n                transformOrigin: \"center\",\n              }}\n              className={cn(progressCircleIndicatorVariants({ color, indeterminate }))}\n              cx={center}\n              cy={center}\n              data-slot=\"progress-circle-indicator\"\n              fill=\"none\"\n              r={radius}\n              strokeDasharray={circumference}\n              strokeDashoffset={progressOffset}\n              strokeLinecap=\"round\"\n              strokeWidth={strokeWidth}\n            />\n          </>\n        )}\n      </svg>\n\n      {/* Center content (value and label) */}\n      <div\n        className={cn(\n          \"absolute flex flex-col items-center justify-center\",\n          isHalfCircle && \"bottom-0\"\n        )}\n        data-slot=\"progress-circle-content\"\n      >\n        {showValue && !indeterminate && (\n          <span\n            className={cn(progressCircleValueVariants({ size }))}\n            data-slot=\"progress-circle-value\"\n          >\n            {formattedValue}\n          </span>\n        )}\n        {label && (\n          <span\n            className={cn(progressCircleLabelVariants({ size }))}\n            data-slot=\"progress-circle-label\"\n          >\n            {label}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n\n  if (tooltip) {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          {progressCircleElement}\n        </TooltipTrigger>\n        <TooltipContent>\n          {tooltip}\n        </TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return progressCircleElement\n}\n\nexport { ProgressCircle }\n"]}

package/dist/chunk-U74PNG4S.js

@@ -0,0 +1,167 @@
+import { inputVariants } from './chunk-DYDXGWH2.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { PlusIcon, MinusIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var numberStepperVariants = cva(
+  // Base styles
+  [
+    "absolute right-0 top-0 h-full",
+    "flex flex-col",
+    "border-l border-input",
+    "overflow-hidden rounded-r-md"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "w-5",
+        sm: "w-6",
+        md: "w-7",
+        lg: "w-8",
+        xl: "w-9"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var numberStepperButtonVariants = cva(
+  // Base styles
+  [
+    "flex flex-1 items-center justify-center",
+    "text-muted-foreground hover:text-foreground hover:bg-muted/50",
+    "transition-colors",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "focus-visible:outline-none focus-visible:bg-muted"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "[&_svg]:size-2.5",
+        sm: "[&_svg]:size-3",
+        md: "[&_svg]:size-3.5",
+        lg: "[&_svg]:size-4",
+        xl: "[&_svg]:size-4.5"
+      },
+      position: {
+        top: "border-b border-input",
+        bottom: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      position: "top"
+    }
+  }
+);
+var numberInputPaddingVariants = cva("", {
+  variants: {
+    size: {
+      xs: "pr-6",
+      sm: "pr-7",
+      md: "pr-8",
+      lg: "pr-9",
+      xl: "pr-10"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function NumberInput({
+  className,
+  size = "md",
+  variant,
+  showStepper = true,
+  incrementIcon,
+  decrementIcon,
+  onIncrement,
+  onDecrement,
+  disabled,
+  min,
+  max,
+  step = 1,
+  ...props
+}) {
+  const inputRef = React.useRef(null);
+  const handleIncrement = React.useCallback(() => {
+    if (onIncrement) {
+      onIncrement();
+    } else if (inputRef.current) {
+      inputRef.current.stepUp();
+      inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  }, [onIncrement]);
+  const handleDecrement = React.useCallback(() => {
+    if (onDecrement) {
+      onDecrement();
+    } else if (inputRef.current) {
+      inputRef.current.stepDown();
+      inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  }, [onDecrement]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", "data-slot": "number-input-wrapper", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        className: cn(
+          inputVariants({ size, variant }),
+          // Hide native spinner
+          "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+          showStepper && numberInputPaddingVariants({ size }),
+          className
+        ),
+        "data-slot": "number-input",
+        disabled,
+        max,
+        min,
+        step,
+        type: "number",
+        ...props
+      }
+    ),
+    showStepper && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(numberStepperVariants({ size })),
+        "data-slot": "number-stepper",
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "Increment value",
+              className: cn(numberStepperButtonVariants({ size, position: "top" })),
+              "data-slot": "increment-button",
+              disabled,
+              tabIndex: -1,
+              type: "button",
+              onClick: handleIncrement,
+              children: incrementIcon ?? /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "Decrement value",
+              className: cn(numberStepperButtonVariants({ size, position: "bottom" })),
+              "data-slot": "decrement-button",
+              disabled,
+              tabIndex: -1,
+              type: "button",
+              onClick: handleDecrement,
+              children: decrementIcon ?? /* @__PURE__ */ jsx(MinusIcon, { "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export { NumberInput, numberInputPaddingVariants, numberStepperButtonVariants, numberStepperVariants };
+//# sourceMappingURL=chunk-U74PNG4S.js.map
+//# sourceMappingURL=chunk-U74PNG4S.js.map

package/dist/chunk-U74PNG4S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/NumberInput/NumberInput.variants.ts","../src/components/forms/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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","file":"chunk-U74PNG4S.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Number stepper container variant styles using CVA\n * Contains increment/decrement buttons stacked vertically\n */\nexport const numberStepperVariants = cva(\n  // Base styles\n  [\n    \"absolute right-0 top-0 h-full\",\n    \"flex flex-col\",\n    \"border-l border-input\",\n    \"overflow-hidden rounded-r-md\",\n  ],\n  {\n    variants: {\n      size: {\n        xs: \"w-5\",\n        sm: \"w-6\",\n        md: \"w-7\",\n        lg: \"w-8\",\n        xl: \"w-9\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * Number stepper button variant styles using CVA\n * Individual increment/decrement button styles\n */\nexport const numberStepperButtonVariants = cva(\n  // Base styles\n  [\n    \"flex flex-1 items-center justify-center\",\n    \"text-muted-foreground hover:text-foreground hover:bg-muted/50\",\n    \"transition-colors\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"focus-visible:outline-none focus-visible:bg-muted\",\n  ],\n  {\n    variants: {\n      size: {\n        xs: \"[&_svg]:size-2.5\",\n        sm: \"[&_svg]:size-3\",\n        md: \"[&_svg]:size-3.5\",\n        lg: \"[&_svg]:size-4\",\n        xl: \"[&_svg]:size-4.5\",\n      },\n      position: {\n        top: \"border-b border-input\",\n        bottom: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      position: \"top\",\n    },\n  }\n)\n\n/**\n * Number input padding right values to accommodate stepper buttons\n * Used to add extra right padding when stepper is visible\n */\nexport const numberInputPaddingVariants = cva(\"\", {\n  variants: {\n    size: {\n      xs: \"pr-6\",\n      sm: \"pr-7\",\n      md: \"pr-8\",\n      lg: \"pr-9\",\n      xl: \"pr-10\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n})\n\nexport type NumberStepperVariantProps = VariantProps<typeof numberStepperVariants>\nexport type NumberStepperButtonVariantProps = VariantProps<typeof numberStepperButtonVariants>\n","\"use client\"\n\nimport type { NumberInputProps } from \"./NumberInput.types\"\n\nimport { MinusIcon, PlusIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { inputVariants } from \"../TextInput/TextInput.variants\"\nimport {\n  numberInputPaddingVariants,\n  numberStepperButtonVariants,\n  numberStepperVariants,\n} from \"./NumberInput.variants\"\n\n/**\n * NumberInput component with increment/decrement stepper buttons\n *\n * @example\n * ```tsx\n * <NumberInput placeholder=\"Enter quantity\" />\n * ```\n *\n * @example With min/max/step\n * ```tsx\n * <NumberInput min={0} max={100} step={5} defaultValue={50} />\n * ```\n *\n * @example Without stepper\n * ```tsx\n * <NumberInput showStepper={false} />\n * ```\n *\n * @example With custom icons\n * ```tsx\n * <NumberInput\n *   incrementIcon={<ChevronUp className=\"size-4\" />}\n *   decrementIcon={<ChevronDown className=\"size-4\" />}\n * />\n * ```\n */\nfunction NumberInput({\n  className,\n  size = \"md\",\n  variant,\n  showStepper = true,\n  incrementIcon,\n  decrementIcon,\n  onIncrement,\n  onDecrement,\n  disabled,\n  min,\n  max,\n  step = 1,\n  ...props\n}: NumberInputProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleIncrement = React.useCallback(() => {\n    if (onIncrement) {\n      onIncrement()\n    } else if (inputRef.current) {\n      inputRef.current.stepUp()\n      // Dispatch input event to trigger onChange\n      inputRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }))\n    }\n  }, [onIncrement])\n\n  const handleDecrement = React.useCallback(() => {\n    if (onDecrement) {\n      onDecrement()\n    } else if (inputRef.current) {\n      inputRef.current.stepDown()\n      // Dispatch input event to trigger onChange\n      inputRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }))\n    }\n  }, [onDecrement])\n\n  return (\n    <div className=\"relative w-full\" data-slot=\"number-input-wrapper\">\n      <input\n        ref={inputRef}\n        className={cn(\n          inputVariants({ size, variant }),\n          // Hide native spinner\n          \"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none\",\n          showStepper && numberInputPaddingVariants({ size }),\n          className\n        )}\n        data-slot=\"number-input\"\n        disabled={disabled}\n        max={max}\n        min={min}\n        step={step}\n        type=\"number\"\n        {...props}\n      />\n      {showStepper && (\n        <div\n          className={cn(numberStepperVariants({ size }))}\n          data-slot=\"number-stepper\"\n        >\n          <button\n            aria-label=\"Increment value\"\n            className={cn(numberStepperButtonVariants({ size, position: \"top\" }))}\n            data-slot=\"increment-button\"\n            disabled={disabled}\n            tabIndex={-1}\n            type=\"button\"\n            onClick={handleIncrement}\n          >\n            {incrementIcon ?? <PlusIcon aria-hidden=\"true\" />}\n          </button>\n          <button\n            aria-label=\"Decrement value\"\n            className={cn(numberStepperButtonVariants({ size, position: \"bottom\" }))}\n            data-slot=\"decrement-button\"\n            disabled={disabled}\n            tabIndex={-1}\n            type=\"button\"\n            onClick={handleDecrement}\n          >\n            {decrementIcon ?? <MinusIcon aria-hidden=\"true\" />}\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { NumberInput }\n"]}

package/dist/chunk-U77MCUVE.js

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

package/dist/chunk-U77MCUVE.js.map

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