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

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"}

package/dist/chunk-UA3OQAHJ.js

@@ -0,0 +1,140 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { AlertCircleIcon } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var errorMessageVariants = cva(
+  [
+    "text-destructive font-normal",
+    "flex items-center gap-1.5"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        inline: "inline-flex",
+        bordered: [
+          "flex items-start gap-2",
+          "bg-destructive/10 border border-destructive/30",
+          "rounded-md p-3"
+        ],
+        critical: [
+          "bg-destructive text-destructive-foreground",
+          "font-medium rounded-md p-3"
+        ]
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      animated: {
+        true: "animate-shake",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      animated: false
+    }
+  }
+);
+var errorMessageIconVariants = cva("shrink-0", {
+  variants: {
+    size: {
+      sm: "size-3",
+      md: "size-4",
+      lg: "size-5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var errorMessageListVariants = cva("flex flex-col gap-1", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function shouldShowIcon(showIcon, variant) {
+  if (showIcon !== void 0) return showIcon;
+  return variant === "inline" || variant === "bordered" || variant === "critical";
+}
+function ErrorMessage({
+  className,
+  variant = "default",
+  size,
+  icon,
+  showIcon,
+  animated = false,
+  errors,
+  children,
+  ref,
+  ...props
+}) {
+  const errorMessages = errors?.filter((e) => !!e?.message);
+  if (!children && (!errorMessages || errorMessages.length === 0)) {
+    return null;
+  }
+  const displayIcon = shouldShowIcon(showIcon, variant);
+  if (errorMessages && errorMessages.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(errorMessageListVariants({ size }), className),
+        "data-slot": "error-message",
+        role: "alert",
+        ...props,
+        children: errorMessages.map((error) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(errorMessageVariants({ variant, size, animated })),
+            "data-slot": "error-message-item",
+            children: [
+              displayIcon && icon !== null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "error-message-icon", children: icon ?? /* @__PURE__ */ jsx(
+                AlertCircleIcon,
+                {
+                  className: cn(errorMessageIconVariants({ size }))
+                }
+              ) }),
+              error.message
+            ]
+          },
+          error.message
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(errorMessageVariants({ variant, size, animated }), className),
+      "data-slot": "error-message",
+      role: "alert",
+      ...props,
+      children: [
+        displayIcon && icon !== null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "error-message-icon", children: icon ?? /* @__PURE__ */ jsx(
+          AlertCircleIcon,
+          {
+            className: cn(errorMessageIconVariants({ size }))
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+}
+
+export { ErrorMessage, errorMessageIconVariants, errorMessageListVariants, errorMessageVariants };
+//# sourceMappingURL=chunk-UA3OQAHJ.js.map
+//# sourceMappingURL=chunk-UA3OQAHJ.js.map

package/dist/chunk-UA3OQAHJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/ErrorMessage/ErrorMessage.variants.ts","../src/components/forms/ErrorMessage/ErrorMessage.tsx"],"names":[],"mappings":"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","file":"chunk-UA3OQAHJ.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * ErrorMessage variant styles using CVA\n */\nexport const errorMessageVariants = cva(\n  [\n    \"text-destructive font-normal\",\n    \"flex items-center gap-1.5\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        inline: \"inline-flex\",\n        bordered: [\n          \"flex items-start gap-2\",\n          \"bg-destructive/10 border border-destructive/30\",\n          \"rounded-md p-3\",\n        ],\n        critical: [\n          \"bg-destructive text-destructive-foreground\",\n          \"font-medium rounded-md p-3\",\n        ],\n      },\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-base\",\n      },\n      animated: {\n        true: \"animate-shake\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n      animated: false,\n    },\n  }\n)\n\n/**\n * ErrorMessage icon variant styles using CVA\n */\nexport const errorMessageIconVariants = cva(\"shrink-0\", {\n  variants: {\n    size: {\n      sm: \"size-3\",\n      md: \"size-4\",\n      lg: \"size-5\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n})\n\n/**\n * ErrorMessage list variant styles for errors array\n */\nexport const errorMessageListVariants = cva(\"flex flex-col gap-1\", {\n  variants: {\n    size: {\n      sm: \"text-xs\",\n      md: \"text-sm\",\n      lg: \"text-base\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n})\n\n// Export variant prop types\nexport type ErrorMessageVariantProps = VariantProps<typeof errorMessageVariants>\nexport type ErrorMessageIconVariantProps = VariantProps<typeof errorMessageIconVariants>\n","import type { ErrorMessageProps } from \"./ErrorMessage.types\"\n\nimport { AlertCircleIcon } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  errorMessageIconVariants,\n  errorMessageListVariants,\n  type ErrorMessageVariantProps,\n  errorMessageVariants,\n} from \"./ErrorMessage.variants\"\n\n/**\n * Determines if icon should be shown based on variant\n */\nfunction shouldShowIcon(\n  showIcon: boolean | undefined,\n  variant: string | undefined\n): boolean {\n  if (showIcon !== undefined) return showIcon\n  // Default: show icon for inline, bordered, critical variants\n  return variant === \"inline\" || variant === \"bordered\" || variant === \"critical\"\n}\n\n/**\n * ErrorMessage displays form validation errors with an icon and accessible alert role.\n *\n * @example\n * ```tsx\n * <ErrorMessage>This field is required</ErrorMessage>\n * ```\n *\n * @example\n * ```tsx\n * // With errors array (react-hook-form compatible)\n * <ErrorMessage errors={[{ message: 'Error 1' }, { message: 'Error 2' }]} />\n * ```\n *\n * @example\n * ```tsx\n * // With animation\n * <ErrorMessage animated>Attention required!</ErrorMessage>\n * ```\n *\n * @example\n * ```tsx\n * // Bordered variant\n * <ErrorMessage variant=\"bordered\">Please fix this error</ErrorMessage>\n * ```\n */\nfunction ErrorMessage({\n  className,\n  variant = \"default\",\n  size,\n  icon,\n  showIcon,\n  animated = false,\n  errors,\n  children,\n  ref,\n  ...props\n}: ErrorMessageProps & ErrorMessageVariantProps) {\n  // Filter out undefined errors and extract messages\n  const errorMessages = errors?.filter((e): e is { message?: string } => !!e?.message)\n\n  // If no children and no error messages, don't render\n  if (!children && (!errorMessages || errorMessages.length === 0)) {\n    return null\n  }\n\n  const displayIcon = shouldShowIcon(showIcon, variant)\n\n  // Render errors array as list\n  if (errorMessages && errorMessages.length > 0) {\n    return (\n      <div\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={cn(errorMessageListVariants({ size }), className)}\n        data-slot=\"error-message\"\n        role=\"alert\"\n        {...(props as React.ComponentProps<\"div\">)}\n      >\n        {errorMessages.map((error) => (\n          <span\n            key={error.message}\n            className={cn(errorMessageVariants({ variant, size, animated }))}\n            data-slot=\"error-message-item\"\n          >\n            {displayIcon && icon !== null && (\n              <span aria-hidden=\"true\" data-slot=\"error-message-icon\">\n                {icon ?? (\n                  <AlertCircleIcon\n                    className={cn(errorMessageIconVariants({ size }))}\n                  />\n                )}\n              </span>\n            )}\n            {error.message}\n          </span>\n        ))}\n      </div>\n    )\n  }\n\n  // Render single error message\n  return (\n    <span\n      ref={ref}\n      className={cn(errorMessageVariants({ variant, size, animated }), className)}\n      data-slot=\"error-message\"\n      role=\"alert\"\n      {...props}\n    >\n      {displayIcon && icon !== null && (\n        <span aria-hidden=\"true\" data-slot=\"error-message-icon\">\n          {icon ?? (\n            <AlertCircleIcon\n              className={cn(errorMessageIconVariants({ size }))}\n            />\n          )}\n        </span>\n      )}\n      {children}\n    </span>\n  )\n}\n\nexport { ErrorMessage }\n"]}

package/dist/chunk-UFRMZ3M6.js

@@ -0,0 +1,284 @@
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var progressBarVariants = cva(
+  "relative w-full overflow-hidden rounded-[var(--progress-bar-root-border-radius)]",
+  {
+    variants: {
+      /**
+       * Size variant for the progress bar height
+       */
+      size: {
+        xs: "h-[var(--progress-bar-size-xs-height)]",
+        sm: "h-[var(--progress-bar-size-sm-height)]",
+        md: "h-[var(--progress-bar-size-md-height)]",
+        lg: "h-[var(--progress-bar-size-lg-height)]",
+        xl: "h-[var(--progress-bar-size-xl-height)]"
+      },
+      /**
+       * Color variant for the progress bar
+       * Affects both track and indicator colors
+       */
+      color: {
+        default: "bg-[color:var(--progress-bar-track-color-default)]",
+        primary: "bg-[color:var(--progress-bar-track-color-primary)]",
+        success: "bg-[color:var(--progress-bar-track-color-success)]",
+        warning: "bg-[color:var(--progress-bar-track-color-warning)]",
+        error: "bg-[color:var(--progress-bar-track-color-error)]"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "default"
+    }
+  }
+);
+var progressBarIndicatorVariants = cva(
+  "h-full w-full flex-1 rounded-[var(--progress-bar-indicator-border-radius)] transition-all duration-700 ease-out motion-reduce:transition-none",
+  {
+    variants: {
+      /**
+       * Color variant for the indicator fill
+       */
+      color: {
+        default: "bg-[color:var(--progress-bar-fill-color-default)]",
+        primary: "bg-[color:var(--progress-bar-fill-color-primary)]",
+        success: "bg-[color:var(--progress-bar-fill-color-success)]",
+        warning: "bg-[color:var(--progress-bar-fill-color-warning)]",
+        error: "bg-[color:var(--progress-bar-fill-color-error)]"
+      }
+    },
+    defaultVariants: {
+      color: "default"
+    }
+  }
+);
+var progressBarLabelVariants = cva(
+  "text-[length:var(--progress-bar-label-text-font-size)] font-[var(--progress-bar-label-text-font-weight)] [font-variant-numeric:var(--progress-bar-label-text-tabular-nums)]",
+  {
+    variants: {
+      /**
+       * Label position relative to the progress bar
+       */
+      position: {
+        none: "sr-only",
+        right: "ml-[var(--progress-bar-label-position-right-margin-left)] shrink-0 text-[color:var(--progress-bar-label-position-right-color)]",
+        bottom: "mt-[var(--progress-bar-label-position-bottom-margin-top)] text-[color:var(--progress-bar-label-position-bottom-color)]",
+        "top-floating": "absolute -top-8 text-[color:var(--progress-bar-label-position-floating-color)]",
+        "bottom-floating": "absolute -bottom-8 text-[color:var(--progress-bar-label-position-floating-color)]"
+      }
+    },
+    defaultVariants: {
+      position: "none"
+    }
+  }
+);
+var progressBarTooltipVariants = cva(
+  [
+    "absolute z-10 px-2 py-1 text-xs font-medium tabular-nums",
+    "rounded-md border bg-background text-foreground shadow-sm",
+    "transition-all duration-150 ease-out",
+    "-translate-x-1/2"
+  ],
+  {
+    variants: {
+      /**
+       * Tooltip position
+       */
+      position: {
+        top: "-top-9",
+        bottom: "-bottom-9"
+      }
+    },
+    defaultVariants: {
+      position: "top"
+    }
+  }
+);
+var defaultFormatValue = (value) => `${String(value)}%`;
+function ProgressBarLabel({
+  value,
+  position,
+  formatValue = defaultFormatValue,
+  progressPercent
+}) {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  const formattedValue = formatValue(value);
+  if (position === "top-floating" || position === "bottom-floating") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          progressBarTooltipVariants({
+            position: position === "top-floating" ? "top" : "bottom"
+          })
+        ),
+        "data-slot": "progress-bar-tooltip",
+        style: { left: `${String(progressPercent)}%` },
+        children: formattedValue
+      }
+    );
+  }
+  if (position === "bottom") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(progressBarLabelVariants({ position: "bottom" }), "block"),
+        "data-slot": "progress-bar-label",
+        children: formattedValue
+      }
+    );
+  }
+  if (position === "none") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: progressBarLabelVariants({ position: "none" }),
+        "data-slot": "progress-bar-label",
+        children: formattedValue
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: progressBarLabelVariants({ position: "right" }),
+      "data-slot": "progress-bar-label",
+      children: formattedValue
+    }
+  );
+}
+function ProgressBar({
+  className,
+  value,
+  max = 100,
+  size,
+  color,
+  label = "none",
+  formatValue,
+  showValue,
+  animate = true,
+  tooltip,
+  ref,
+  ...props
+}) {
+  const progressPercent = value !== null && value !== void 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+  const [isVisible, setIsVisible] = React.useState(!animate);
+  const internalRef = React.useRef(null);
+  const progressRef = ref ?? internalRef;
+  React.useEffect(() => {
+    if (!animate || isVisible) {
+      return;
+    }
+    const element = typeof progressRef === "function" ? null : progressRef.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, isVisible, progressRef]);
+  const shouldShowValue = showValue ?? label !== "none";
+  const displayPercent = isVisible ? progressPercent : 0;
+  const wrapWithTooltip = (element) => {
+    if (!tooltip) return element;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: element }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+    ] });
+  };
+  const progressBar = /* @__PURE__ */ jsxs(
+    ProgressPrimitive.Root,
+    {
+      ref: progressRef,
+      className: cn(
+        progressBarVariants({ size, color }),
+        className
+      ),
+      "data-slot": "progress-bar",
+      max,
+      value: value != null ? Math.min(Math.max(0, value), max) : null,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ProgressPrimitive.Indicator,
+          {
+            className: cn(progressBarIndicatorVariants({ color })),
+            "data-slot": "progress-bar-indicator",
+            style: { transform: `translateX(-${String(100 - displayPercent)}%)` }
+          }
+        ),
+        (label === "top-floating" || label === "bottom-floating") && shouldShowValue && /* @__PURE__ */ jsx(
+          ProgressBarLabel,
+          {
+            formatValue,
+            position: label,
+            progressPercent,
+            value
+          }
+        )
+      ]
+    }
+  );
+  if (label === "right") {
+    return wrapWithTooltip(
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center", "data-slot": "progress-bar-container", children: [
+        progressBar,
+        shouldShowValue && /* @__PURE__ */ jsx(
+          ProgressBarLabel,
+          {
+            formatValue,
+            position: label,
+            progressPercent,
+            value
+          }
+        )
+      ] })
+    );
+  }
+  if (label === "bottom") {
+    return wrapWithTooltip(
+      /* @__PURE__ */ jsxs("div", { "data-slot": "progress-bar-container", children: [
+        progressBar,
+        shouldShowValue && /* @__PURE__ */ jsx(
+          ProgressBarLabel,
+          {
+            formatValue,
+            position: label,
+            progressPercent,
+            value
+          }
+        )
+      ] })
+    );
+  }
+  if (label === "top-floating" || label === "bottom-floating") {
+    return wrapWithTooltip(
+      /* @__PURE__ */ jsx("div", { className: "relative", "data-slot": "progress-bar-container", children: progressBar })
+    );
+  }
+  return wrapWithTooltip(progressBar);
+}
+
+export { ProgressBar, progressBarIndicatorVariants, progressBarLabelVariants, progressBarTooltipVariants, progressBarVariants };
+//# sourceMappingURL=chunk-UFRMZ3M6.js.map
+//# sourceMappingURL=chunk-UFRMZ3M6.js.map