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

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

package/dist/chunk-UFRMZ3M6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/ProgressBar/ProgressBar.variants.ts","../src/components/primitives/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;AAKO,IAAM,mBAAA,GAAsB,GAAA;AAAA,EACjC,kFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA,MAIR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,wCAAA;AAAA,QACJ,EAAA,EAAI,wCAAA;AAAA,QACJ,EAAA,EAAI,wCAAA;AAAA,QACJ,EAAA,EAAI,wCAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,oDAAA;AAAA,QACT,OAAA,EAAS,oDAAA;AAAA,QACT,OAAA,EAAS,oDAAA;AAAA,QACT,OAAA,EAAS,oDAAA;AAAA,QACT,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT;AAEJ;AAKO,IAAM,4BAAA,GAA+B,GAAA;AAAA,EAC1C,+IAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA,MAIR,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,mDAAA;AAAA,QACT,OAAA,EAAS,mDAAA;AAAA,QACT,OAAA,EAAS,mDAAA;AAAA,QACT,OAAA,EAAS,mDAAA;AAAA,QACT,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,KAAA,EAAO;AAAA;AACT;AAEJ;AAKO,IAAM,wBAAA,GAA2B,GAAA;AAAA,EACtC,6KAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA,MAIR,QAAA,EAAU;AAAA,QACR,IAAA,EAAM,SAAA;AAAA,QACN,KAAA,EAAO,gIAAA;AAAA,QACP,MAAA,EAAQ,wHAAA;AAAA,QACR,cAAA,EAAgB,gFAAA;AAAA,QAChB,iBAAA,EAAmB;AAAA;AACrB,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU;AAAA;AACZ;AAEJ;AAKO,IAAM,0BAAA,GAA6B,GAAA;AAAA,EACxC;AAAA,IACE,0DAAA;AAAA,IACA,2DAAA;AAAA,IACA,sCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA,MAIR,QAAA,EAAU;AAAA,QACR,GAAA,EAAK,QAAA;AAAA,QACL,MAAA,EAAQ;AAAA;AACV,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU;AAAA;AACZ;AAEJ;AC3FA,IAAM,qBAAqB,CAAC,KAAA,KAA0B,CAAA,EAAG,MAAA,CAAO,KAAK,CAAC,CAAA,CAAA,CAAA;AAKtE,SAAS,gBAAA,CAAiB;AAAA,EACxB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,kBAAA;AAAA,EACd;AACF,CAAA,EAA0B;AAExB,EAAA,IAAI,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,MAAA,EAAW;AACzC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,cAAA,GAAiB,YAAY,KAAK,CAAA;AAGxC,EAAA,IAAI,QAAA,KAAa,cAAA,IAAkB,QAAA,KAAa,iBAAA,EAAmB;AACjE,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,0BAAA,CAA2B;AAAA,YACzB,QAAA,EAAU,QAAA,KAAa,cAAA,GAAiB,KAAA,GAAQ;AAAA,WACjD;AAAA,SACH;AAAA,QACA,WAAA,EAAU,sBAAA;AAAA,QACV,OAAO,EAAE,IAAA,EAAM,GAAG,MAAA,CAAO,eAAe,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,QAE5C,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAGA,EAAA,IAAI,aAAa,QAAA,EAAU;AACzB,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,wBAAA,CAAyB,EAAE,UAAU,QAAA,EAAU,GAAG,OAAO,CAAA;AAAA,QACvE,WAAA,EAAU,oBAAA;AAAA,QAET,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAGA,EAAA,IAAI,aAAa,MAAA,EAAQ;AACvB,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,wBAAA,CAAyB,EAAE,QAAA,EAAU,QAAQ,CAAA;AAAA,QACxD,WAAA,EAAU,oBAAA;AAAA,QAET,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAGA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,wBAAA,CAAyB,EAAE,QAAA,EAAU,SAAS,CAAA;AAAA,MACzD,WAAA,EAAU,oBAAA;AAAA,MAET,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;AAyBA,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA,GAAM,GAAA;AAAA,EACN,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,WAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,OAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AAEnB,EAAA,MAAM,eAAA,GAAkB,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,SAChD,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,IAAI,CAAA,EAAI,KAAA,GAAQ,GAAA,GAAO,GAAG,CAAC,CAAA,GAC9C,CAAA;AAEJ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAU,KAAA,CAAA,QAAA,CAAS,CAAC,OAAO,CAAA;AACzD,EAAA,MAAM,WAAA,GAAoB,aAAuB,IAAI,CAAA;AAGrD,EAAA,MAAM,cAAc,GAAA,IAAO,WAAA;AAG3B,EAAM,gBAAU,MAAM;AAEpB,IAAA,IAAI,CAAC,WAAW,SAAA,EAAW;AACzB,MAAA;AAAA,IACF;AAGA,IAAA,MAAM,OAAA,GAAU,OAAO,WAAA,KAAgB,UAAA,GAAa,OAAO,WAAA,CAAY,OAAA;AACvE,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,WAAW,IAAI,oBAAA;AAAA,MACnB,CAAC,OAAA,KAAY;AACX,QAAA,MAAM,KAAA,GAAQ,QAAQ,CAAC,CAAA;AACvB,QAAA,IAAI,OAAO,cAAA,EAAgB;AAEzB,UAAA,qBAAA,CAAsB,MAAM;AAC1B,YAAA,YAAA,CAAa,IAAI,CAAA;AAAA,UACnB,CAAC,CAAA;AAED,UAAA,QAAA,CAAS,UAAA,EAAW;AAAA,QACtB;AAAA,MACF,CAAA;AAAA,MACA,EAAE,WAAW,GAAA;AAAI,KACnB;AAEA,IAAA,QAAA,CAAS,QAAQ,OAAO,CAAA;AAExB,IAAA,OAAO,MAAM;AAAE,MAAA,QAAA,CAAS,UAAA,EAAW;AAAA,IAAG,CAAA;AAAA,EACxC,CAAA,EAAG,CAAC,OAAA,EAAS,SAAA,EAAW,WAAW,CAAC,CAAA;AAGpC,EAAA,MAAM,eAAA,GAAkB,aAAa,KAAA,KAAU,MAAA;AAG/C,EAAA,MAAM,cAAA,GAAiB,YAAY,eAAA,GAAkB,CAAA;AAGrD,EAAA,MAAM,eAAA,GAAkB,CAAC,OAAA,KAAgC;AACvD,IAAA,IAAI,CAAC,SAAS,OAAO,OAAA;AACrB,IAAA,4BACG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACpB,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,sBACA,GAAA,CAAC,kBACE,QAAA,EAAA,OAAA,EACH;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAEA,EAAA,MAAM,WAAA,mBACJ,IAAA;AAAA,IAAmB,iBAAA,CAAA,IAAA;AAAA,IAAlB;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,SAAA,EAAW,EAAA;AAAA,QACT,mBAAA,CAAoB,EAAE,IAAA,EAAM,KAAA,EAAO,CAAA;AAAA,QACnC;AAAA,OACF;AAAA,MACA,WAAA,EAAU,cAAA;AAAA,MACV,GAAA;AAAA,MACA,KAAA,EAAO,KAAA,IAAS,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAA,EAAG,GAAG,CAAA,GAAI,IAAA;AAAA,MAC1D,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAmB,iBAAA,CAAA,SAAA;AAAA,UAAlB;AAAA,YACC,WAAW,EAAA,CAAG,4BAAA,CAA6B,EAAE,KAAA,EAAO,CAAC,CAAA;AAAA,YACrD,WAAA,EAAU,wBAAA;AAAA,YACV,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,YAAA,EAAe,OAAO,GAAA,GAAM,cAAc,CAAC,CAAA,EAAA,CAAA;AAAK;AAAA,SACtE;AAAA,QAAA,CAEE,KAAA,KAAU,cAAA,IAAkB,KAAA,KAAU,iBAAA,KAAsB,eAAA,oBAC5D,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,WAAA;AAAA,YACA,QAAA,EAAU,KAAA;AAAA,YACV,eAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAIF,EAAA,IAAI,UAAU,OAAA,EAAS;AACrB,IAAA,OAAO,eAAA;AAAA,sBACL,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAoB,aAAU,wBAAA,EAC1C,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,QACA,eAAA,oBACC,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,WAAA;AAAA,YACA,QAAA,EAAU,KAAA;AAAA,YACV,eAAA;AAAA,YACA;AAAA;AAAA;AACF,OAAA,EAEJ;AAAA,KACF;AAAA,EACF;AAGA,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,eAAA;AAAA,sBACL,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,wBAAA,EACZ,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,QACA,eAAA,oBACC,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,WAAA;AAAA,YACA,QAAA,EAAU,KAAA;AAAA,YACV,eAAA;AAAA,YACA;AAAA;AAAA;AACF,OAAA,EAEJ;AAAA,KACF;AAAA,EACF;AAGA,EAAA,IAAI,KAAA,KAAU,cAAA,IAAkB,KAAA,KAAU,iBAAA,EAAmB;AAC3D,IAAA,OAAO,eAAA;AAAA,0BACJ,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAW,WAAA,EAAU,0BACjC,QAAA,EAAA,WAAA,EACH;AAAA,KACF;AAAA,EACF;AAGA,EAAA,OAAO,gBAAgB,WAAW,CAAA;AACpC","file":"chunk-UFRMZ3M6.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * ProgressBar root (track) variants\n */\nexport const progressBarVariants = cva(\n  \"relative w-full overflow-hidden rounded-[var(--progress-bar-root-border-radius)]\",\n  {\n    variants: {\n      /**\n       * Size variant for the progress bar height\n       */\n      size: {\n        xs: \"h-[var(--progress-bar-size-xs-height)]\",\n        sm: \"h-[var(--progress-bar-size-sm-height)]\",\n        md: \"h-[var(--progress-bar-size-md-height)]\",\n        lg: \"h-[var(--progress-bar-size-lg-height)]\",\n        xl: \"h-[var(--progress-bar-size-xl-height)]\",\n      },\n      /**\n       * Color variant for the progress bar\n       * Affects both track and indicator colors\n       */\n      color: {\n        default: \"bg-[color:var(--progress-bar-track-color-default)]\",\n        primary: \"bg-[color:var(--progress-bar-track-color-primary)]\",\n        success: \"bg-[color:var(--progress-bar-track-color-success)]\",\n        warning: \"bg-[color:var(--progress-bar-track-color-warning)]\",\n        error: \"bg-[color:var(--progress-bar-track-color-error)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      color: \"default\",\n    },\n  }\n)\n\n/**\n * ProgressBar indicator (fill) variants\n */\nexport const progressBarIndicatorVariants = cva(\n  \"h-full w-full flex-1 rounded-[var(--progress-bar-indicator-border-radius)] transition-all duration-700 ease-out motion-reduce:transition-none\",\n  {\n    variants: {\n      /**\n       * Color variant for the indicator fill\n       */\n      color: {\n        default: \"bg-[color:var(--progress-bar-fill-color-default)]\",\n        primary: \"bg-[color:var(--progress-bar-fill-color-primary)]\",\n        success: \"bg-[color:var(--progress-bar-fill-color-success)]\",\n        warning: \"bg-[color:var(--progress-bar-fill-color-warning)]\",\n        error: \"bg-[color:var(--progress-bar-fill-color-error)]\",\n      },\n    },\n    defaultVariants: {\n      color: \"default\",\n    },\n  }\n)\n\n/**\n * Label container variants for different positions\n */\nexport const progressBarLabelVariants = cva(\n  \"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)]\",\n  {\n    variants: {\n      /**\n       * Label position relative to the progress bar\n       */\n      position: {\n        none: \"sr-only\",\n        right: \"ml-[var(--progress-bar-label-position-right-margin-left)] shrink-0 text-[color:var(--progress-bar-label-position-right-color)]\",\n        bottom: \"mt-[var(--progress-bar-label-position-bottom-margin-top)] text-[color:var(--progress-bar-label-position-bottom-color)]\",\n        \"top-floating\": \"absolute -top-8 text-[color:var(--progress-bar-label-position-floating-color)]\",\n        \"bottom-floating\": \"absolute -bottom-8 text-[color:var(--progress-bar-label-position-floating-color)]\",\n      },\n    },\n    defaultVariants: {\n      position: \"none\",\n    },\n  }\n)\n\n/**\n * Floating tooltip variants (for top-floating and bottom-floating)\n */\nexport const progressBarTooltipVariants = cva(\n  [\n    \"absolute z-10 px-2 py-1 text-xs font-medium tabular-nums\",\n    \"rounded-md border bg-background text-foreground shadow-sm\",\n    \"transition-all duration-150 ease-out\",\n    \"-translate-x-1/2\",\n  ],\n  {\n    variants: {\n      /**\n       * Tooltip position\n       */\n      position: {\n        top: \"-top-9\",\n        bottom: \"-bottom-9\",\n      },\n    },\n    defaultVariants: {\n      position: \"top\",\n    },\n  }\n)\n","\"use client\"\n\nimport type { ProgressBarLabelProps, ProgressBarProps } from \"./ProgressBar.types\"\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport {\n  progressBarIndicatorVariants,\n  progressBarLabelVariants,\n  progressBarTooltipVariants,\n  progressBarVariants,\n} from \"./ProgressBar.variants\"\n\n/**\n * Default format function for progress value\n */\nconst defaultFormatValue = (value: number): string => `${String(value)}%`\n\n/**\n * Internal component for rendering the progress label\n */\nfunction ProgressBarLabel({\n  value,\n  position,\n  formatValue = defaultFormatValue,\n  progressPercent,\n}: ProgressBarLabelProps) {\n  // Don't render anything for indeterminate state or none position\n  if (value === null || value === undefined) {\n    return null\n  }\n\n  const formattedValue = formatValue(value)\n\n  // Floating tooltip that follows the progress\n  if (position === \"top-floating\" || position === \"bottom-floating\") {\n    return (\n      <span\n        className={cn(\n          progressBarTooltipVariants({\n            position: position === \"top-floating\" ? \"top\" : \"bottom\",\n          })\n        )}\n        data-slot=\"progress-bar-tooltip\"\n        style={{ left: `${String(progressPercent)}%` }}\n      >\n        {formattedValue}\n      </span>\n    )\n  }\n\n  // Bottom label\n  if (position === \"bottom\") {\n    return (\n      <span\n        className={cn(progressBarLabelVariants({ position: \"bottom\" }), \"block\")}\n        data-slot=\"progress-bar-label\"\n      >\n        {formattedValue}\n      </span>\n    )\n  }\n\n  // Hidden label for screen readers\n  if (position === \"none\") {\n    return (\n      <span\n        className={progressBarLabelVariants({ position: \"none\" })}\n        data-slot=\"progress-bar-label\"\n      >\n        {formattedValue}\n      </span>\n    )\n  }\n\n  // Right label (inline)\n  return (\n    <span\n      className={progressBarLabelVariants({ position: \"right\" })}\n      data-slot=\"progress-bar-label\"\n    >\n      {formattedValue}\n    </span>\n  )\n}\n\n/**\n * ProgressBar component for displaying task completion status.\n *\n * Built on Radix UI Progress primitive with support for:\n * - Multiple color variants (default/success, primary, warning, error)\n * - Multiple size variants (xs, sm, md, lg, xl)\n * - Label positions (none, right, bottom, top-floating, bottom-floating)\n * - Floating tooltips that follow the progress indicator\n * - Custom value formatting\n * - Indeterminate state\n *\n * @example\n * ```tsx\n * // Basic usage with default green fill\n * <ProgressBar value={50} />\n *\n * // With floating tooltip\n * <ProgressBar value={75} label=\"top-floating\" />\n *\n * // With color and size variants\n * <ProgressBar value={30} color=\"error\" size=\"lg\" />\n * ```\n */\nfunction ProgressBar({\n  className,\n  value,\n  max = 100,\n  size,\n  color,\n  label = \"none\",\n  formatValue,\n  showValue,\n  animate = true,\n  tooltip,\n  ref,\n  ...props\n}: ProgressBarProps) {\n  // Calculate percentage based on value and max\n  const progressPercent = value !== null && value !== undefined\n    ? Math.min(100, Math.max(0, (value / max) * 100))\n    : 0\n  // Initialize visibility based on animate prop - if not animating, show immediately\n  const [isVisible, setIsVisible] = React.useState(!animate)\n  const internalRef = React.useRef<HTMLDivElement>(null)\n\n  // Merge internal ref with forwarded ref\n  const progressRef = ref ?? internalRef\n\n  // Use IntersectionObserver to trigger animation only when in viewport\n  React.useEffect(() => {\n    // Skip if not animating or already visible\n    if (!animate || isVisible) {\n      return\n    }\n\n    // Get the element from the ref\n    const element = typeof progressRef === \"function\" ? null : progressRef.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          // Small delay to ensure smooth animation start\n          requestAnimationFrame(() => {\n            setIsVisible(true)\n          })\n          // Once animated, no need to observe anymore\n          observer.disconnect()\n        }\n      },\n      { threshold: 0.1 }\n    )\n\n    observer.observe(element)\n\n    return () => { observer.disconnect(); }\n  }, [animate, isVisible, progressRef])\n\n  // Determine if we should show value based on label position\n  const shouldShowValue = showValue ?? label !== \"none\"\n\n  // Calculate the transform value - start at 0 if not visible yet (for animation)\n  const displayPercent = isVisible ? progressPercent : 0\n\n  // Helper to wrap element with tooltip if tooltip prop is provided\n  const wrapWithTooltip = (element: React.ReactElement) => {\n    if (!tooltip) return element\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          {element}\n        </TooltipTrigger>\n        <TooltipContent>\n          {tooltip}\n        </TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  const progressBar = (\n    <ProgressPrimitive.Root\n      ref={progressRef}\n      className={cn(\n        progressBarVariants({ size, color }),\n        className\n      )}\n      data-slot=\"progress-bar\"\n      max={max}\n      value={value != null ? Math.min(Math.max(0, value), max) : null}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        className={cn(progressBarIndicatorVariants({ color }))}\n        data-slot=\"progress-bar-indicator\"\n        style={{ transform: `translateX(-${String(100 - displayPercent)}%)` }}\n      />\n      {/* Floating labels are positioned inside the root for proper positioning */}\n      {(label === \"top-floating\" || label === \"bottom-floating\") && shouldShowValue && (\n        <ProgressBarLabel\n          formatValue={formatValue}\n          position={label}\n          progressPercent={progressPercent}\n          value={value}\n        />\n      )}\n    </ProgressPrimitive.Root>\n  )\n\n  // Right label needs flex wrapper\n  if (label === \"right\") {\n    return wrapWithTooltip(\n      <div className=\"flex items-center\" data-slot=\"progress-bar-container\">\n        {progressBar}\n        {shouldShowValue && (\n          <ProgressBarLabel\n            formatValue={formatValue}\n            position={label}\n            progressPercent={progressPercent}\n            value={value}\n          />\n        )}\n      </div>\n    )\n  }\n\n  // Bottom label needs column wrapper\n  if (label === \"bottom\") {\n    return wrapWithTooltip(\n      <div data-slot=\"progress-bar-container\">\n        {progressBar}\n        {shouldShowValue && (\n          <ProgressBarLabel\n            formatValue={formatValue}\n            position={label}\n            progressPercent={progressPercent}\n            value={value}\n          />\n        )}\n      </div>\n    )\n  }\n\n  // Floating labels need relative wrapper for absolute positioning\n  if (label === \"top-floating\" || label === \"bottom-floating\") {\n    return wrapWithTooltip(\n      <div className=\"relative\" data-slot=\"progress-bar-container\">\n        {progressBar}\n      </div>\n    )\n  }\n\n  // No wrapper needed for none label\n  return wrapWithTooltip(progressBar)\n}\n\nexport { ProgressBar }\n"]}

package/dist/chunk-UKC3Q6OA.js

@@ -0,0 +1,159 @@
+import { Label } from './chunk-XPVKJIWY.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var formItemVariants = cva("grid gap-2", {
+  variants: {
+    spacing: {
+      default: "gap-2",
+      tight: "gap-1",
+      loose: "gap-3"
+    }
+  },
+  defaultVariants: {
+    spacing: "default"
+  }
+});
+var formLabelVariants = cva(
+  "text-[length:var(--form-label-size)] font-[var(--form-label-weight)] text-[color:var(--form-label-fg)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      error: {
+        true: "text-[color:var(--form-error-fg)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      error: false
+    }
+  }
+);
+var formDescriptionVariants = cva("text-muted-foreground text-sm", {
+  variants: {
+    size: {
+      default: "text-sm",
+      small: "text-xs"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var formMessageVariants = cva("text-sm font-medium", {
+  variants: {
+    state: {
+      error: "text-destructive",
+      success: "text-success",
+      info: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    state: "error"
+  }
+});
+var Form = FormProvider;
+var FormFieldContext = React.createContext(
+  {}
+);
+function FormField({ ...props }) {
+  return /* @__PURE__ */ jsx(FormFieldContext, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+}
+var useFormField = () => {
+  const fieldContext = React.use(FormFieldContext);
+  const itemContext = React.use(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormItemContext = React.createContext(
+  {}
+);
+function FormItem({ className, spacing, ...props }) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(FormItemContext, { value: { id }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(formItemVariants({ spacing }), className),
+      "data-slot": "form-item",
+      ...props
+    }
+  ) });
+}
+function FormLabel({ className, ...props }) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      className: cn(formLabelVariants({ error: !!error }), className),
+      "data-error": !!error,
+      "data-slot": "form-label",
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+}
+function FormControl({ ...props }) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      "aria-describedby": !error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      "data-slot": "form-control",
+      id: formItemId,
+      ...props
+    }
+  );
+}
+function FormDescription({ className, size, ...props }) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(formDescriptionVariants({ size }), className),
+      "data-slot": "form-description",
+      id: formDescriptionId,
+      ...props
+    }
+  );
+}
+function FormMessage({
+  className,
+  state,
+  children,
+  ...props
+}) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? error.message ?? "" : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(formMessageVariants({ state }), className),
+      "data-slot": "form-message",
+      id: formMessageId,
+      role: "alert",
+      ...props,
+      children: body
+    }
+  );
+}
+
+export { Form, FormControl, FormDescription, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, FormMessage, formDescriptionVariants, formItemVariants, formLabelVariants, formMessageVariants, useFormField };
+//# sourceMappingURL=chunk-UKC3Q6OA.js.map
+//# sourceMappingURL=chunk-UKC3Q6OA.js.map

package/dist/chunk-UKC3Q6OA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/Form/Form.variants.ts","../src/components/forms/Form/Form.tsx"],"names":[],"mappings":"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","file":"chunk-UKC3Q6OA.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * FormItem variant styles using CVA\n *\n * Controls spacing and layout for form field containers.\n */\nexport const formItemVariants = cva(\"grid gap-2\", {\n  variants: {\n    spacing: {\n      default: \"gap-2\",\n      tight: \"gap-1\",\n      loose: \"gap-3\",\n    },\n  },\n  defaultVariants: {\n    spacing: \"default\",\n  },\n})\n\n/**\n * FormLabel variant styles using CVA\n *\n * Handles label styling with error state support.\n */\nexport const formLabelVariants = cva(\n  \"text-[length:var(--form-label-size)] font-[var(--form-label-weight)] text-[color:var(--form-label-fg)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n  {\n    variants: {\n      error: {\n        true: \"text-[color:var(--form-error-fg)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      error: false,\n    },\n  }\n)\n\n/**\n * FormDescription variant styles using CVA\n *\n * Provides consistent styling for field helper text.\n */\nexport const formDescriptionVariants = cva(\"text-muted-foreground text-sm\", {\n  variants: {\n    size: {\n      default: \"text-sm\",\n      small: \"text-xs\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\n/**\n * FormMessage variant styles using CVA\n *\n * Styles validation messages with different states (error, success).\n */\nexport const formMessageVariants = cva(\"text-sm font-medium\", {\n  variants: {\n    state: {\n      error: \"text-destructive\",\n      success: \"text-success\",\n      info: \"text-muted-foreground\",\n    },\n  },\n  defaultVariants: {\n    state: \"error\",\n  },\n})\n\n// Export variant prop types\nexport type FormItemVariantProps = VariantProps<typeof formItemVariants>\nexport type FormLabelVariantProps = VariantProps<typeof formLabelVariants>\nexport type FormDescriptionVariantProps = VariantProps<\n  typeof formDescriptionVariants\n>\nexport type FormMessageVariantProps = VariantProps<typeof formMessageVariants>\n","\"use client\"\n\nimport type {\n  FormControlProps,\n  FormDescriptionProps,\n  FormFieldContextValue,\n  FormItemContextValue,\n  FormItemProps,\n  FormLabelProps,\n  FormMessageProps,\n} from \"./Form.types\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport * as React from \"react\"\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Label } from \"../../primitives/Label\"\nimport {\n  formDescriptionVariants,\n  formItemVariants,\n  formLabelVariants,\n  formMessageVariants,\n} from \"./Form.variants\"\n\nconst Form = FormProvider\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nfunction FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.use(FormFieldContext)\n  const itemContext = React.use(FormItemContext)\n  const { getFieldState } = useFormContext()\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nfunction FormItem({ className, spacing, ...props }: FormItemProps) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext value={{ id }}>\n      <div\n        className={cn(formItemVariants({ spacing }), className)}\n        data-slot=\"form-item\"\n        {...props}\n      />\n    </FormItemContext>\n  )\n}\n\nfunction FormLabel({ className, ...props }: FormLabelProps) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      className={cn(formLabelVariants({ error: !!error }), className)}\n      data-error={!!error}\n      data-slot=\"form-label\"\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\nfunction FormControl({ ...props }: FormControlProps) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      aria-describedby={\n        !error\n          ? formDescriptionId\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      data-slot=\"form-control\"\n      id={formItemId}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, size, ...props }: FormDescriptionProps) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      className={cn(formDescriptionVariants({ size }), className)}\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      {...props}\n    />\n  )\n}\n\nfunction FormMessage({\n  className,\n  state,\n  children,\n  ...props\n}: FormMessageProps) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? (error.message ?? \"\") : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      className={cn(formMessageVariants({ state }), className)}\n      data-slot=\"form-message\"\n      id={formMessageId}\n      role=\"alert\"\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormFieldContext,\n  FormItem,\n  FormItemContext,\n  FormLabel,\n  FormMessage,\n  useFormField,\n}\n"]}

package/dist/chunk-UOHVT5KN.js

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

package/dist/chunk-UOHVT5KN.js.map

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

package/dist/chunk-UP2VWCW5.js

@@ -28,11 +28,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-export {
-  __require,
-  __esm,
-  __commonJS,
-  __export,
-  __toCommonJS
-};
+export { __commonJS, __esm, __export, __require, __toCommonJS };
+//# sourceMappingURL=chunk-UP2VWCW5.js.map
 //# sourceMappingURL=chunk-UP2VWCW5.js.map

package/dist/chunk-UP2VWCW5.js.map

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