@use-stall/ui 0.1.3 → 0.1.4

package/dist/index.mjs

@@ -2244,24 +2244,100 @@ FormMessage.displayName = "FormMessage";
 
 // src/components/image-card.tsx
 import React19 from "react";
+
+// src/components/image-zoom.tsx
+import Zoom from "react-medium-image-zoom";
 import { jsx as jsx23 } from "react/jsx-runtime";
+var ImageZoom = ({
+  className,
+  backdropClassName,
+  ...props
+}) => /* @__PURE__ */ jsx23(
+  "div",
+  {
+    className: cn(
+      "relative",
+      "**:data-rmiz-ghost:pointer-events-none **:data-rmiz-ghost:absolute",
+      "**:data-rmiz-btn-zoom:m-0 **:data-rmiz-btn-zoom:size-10 **:data-rmiz-btn-zoom:touch-manipulation **:data-rmiz-btn-zoom:appearance-none **:data-rmiz-btn-zoom:rounded-[50%] **:data-rmiz-btn-zoom:border-none **:data-rmiz-btn-zoom:bg-foreground/70 **:data-rmiz-btn-zoom:p-2 **:data-rmiz-btn-zoom:text-background **:data-rmiz-btn-zoom:outline-offset-2",
+      "**:data-rmiz-btn-unzoom:m-0 **:data-rmiz-btn-unzoom:size-10 **:data-rmiz-btn-unzoom:touch-manipulation **:data-rmiz-btn-unzoom:appearance-none **:data-rmiz-btn-unzoom:rounded-[50%] **:data-rmiz-btn-unzoom:border-none **:data-rmiz-btn-unzoom:bg-foreground/70 **:data-rmiz-btn-unzoom:p-2 **:data-rmiz-btn-unzoom:text-background **:data-rmiz-btn-unzoom:outline-offset-2",
+      "[&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:pointer-events-none [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:absolute [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:size-px [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:overflow-hidden [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:whitespace-nowrap [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip-path:inset(50%)] [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip:rect(0_0_0_0)]",
+      "**:data-rmiz-btn-zoom:absolute **:data-rmiz-btn-zoom:top-2.5 **:data-rmiz-btn-zoom:right-2.5 **:data-rmiz-btn-zoom:bottom-auto **:data-rmiz-btn-zoom:left-auto **:data-rmiz-btn-zoom:cursor-zoom-in",
+      "**:data-rmiz-btn-unzoom:absolute **:data-rmiz-btn-unzoom:top-5 **:data-rmiz-btn-unzoom:right-5 **:data-rmiz-btn-unzoom:bottom-auto **:data-rmiz-btn-unzoom:left-auto **:data-rmiz-btn-unzoom:z-1 **:data-rmiz-btn-unzoom:cursor-zoom-out",
+      '[&_[data-rmiz-content="found"]_img]:cursor-zoom-in',
+      '[&_[data-rmiz-content="found"]_svg]:cursor-zoom-in',
+      '[&_[data-rmiz-content="found"]_[role="img"]]:cursor-zoom-in',
+      '[&_[data-rmiz-content="found"]_[data-zoom]]:cursor-zoom-in',
+      className
+    ),
+    children: /* @__PURE__ */ jsx23(
+      Zoom,
+      {
+        classDialog: cn(
+          "backdrop:hidden",
+          "[[open]]:fixed [[open]]:m-0 [[open]]:h-dvh [[open]]:max-h-none [[open]]:w-dvw [[open]]:max-w-none [[open]]:overflow-hidden [[open]]:border-0 [[open]]:bg-transparent [[open]]:p-0",
+          "**:data-rmiz-modal-overlay:absolute **:data-rmiz-modal-overlay:inset-0 **:data-rmiz-modal-overlay:transition-all",
+          '**:data-[rmiz-modal-overlay="hidden"]:bg-transparent',
+          '**:data-[rmiz-modal-overlay="visible"]:bg-background/80 **:data-[rmiz-modal-overlay="visible"]:backdrop-blur-md',
+          "**:data-rmiz-modal-content:relative **:data-rmiz-modal-content:size-full",
+          "**:data-rmiz-modal-img:absolute **:data-rmiz-modal-img:origin-top-left **:data-rmiz-modal-img:cursor-zoom-out **:data-rmiz-modal-img:transition-transform",
+          "motion-reduce:**:data-rmiz-modal-img:transition-none motion-reduce:**:data-rmiz-modal-overlay:transition-none",
+          backdropClassName
+        ),
+        ...props
+      }
+    )
+  }
+);
+
+// src/components/image-card.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ImageCard = React19.memo(
-  ({ src = "", alt = "", onErrorImage, className }) => {
-    return /* @__PURE__ */ jsx23(
-      "img",
+  ({
+    src = "",
+    alt = "",
+    onErrorImage = "/images/default_prod.png",
+    className,
+    imageClassName,
+    disableZoom = false
+  }) => {
+    return /* @__PURE__ */ jsx24(
+      "div",
       {
-        onError: (e) => {
-          const target = e?.currentTarget;
-          if (target) {
-            target.src = onErrorImage || "";
-          }
-        },
-        src,
-        alt,
         className: cn(
-          `h-8 w-8 rounded-10 bg-main-background object-cover object-center shadow-s
-          overflow-hidden border-4 border-main-background shrink-0`,
+          `h-9 w-9 rounded-lg shadow-sm drop-shadow-sm border border-border
+           overflow-hidden bg-background shrink-0 relative`,
           className
+        ),
+        children: /* @__PURE__ */ jsx24(
+          ImageZoom,
+          {
+            isDisabled: disableZoom,
+            className: cn(
+              `h-full w-full rounded-[inherit] overflow-hidden
+          [&_div]:h-full [&_div]:w-full`,
+              {
+                "**:cursor-pointer!": disableZoom
+              }
+            ),
+            children: /* @__PURE__ */ jsx24(
+              "img",
+              {
+                onError: (e) => {
+                  const target = e?.currentTarget;
+                  if (target) {
+                    target.src = onErrorImage;
+                  }
+                },
+                src,
+                alt,
+                className: cn(
+                  `h-full w-full bg-main-background object-cover! object-center! rounded-lg
+               border-[3px] border-white dark:border-zinc-800`,
+                  imageClassName
+                )
+              }
+            )
+          }
         )
       }
     );
@@ -2272,8 +2348,8 @@ var ImageCard = React19.memo(
 import * as React20 from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Dot } from "lucide-react";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
-var InputOTP = React20.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx24(
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+var InputOTP = React20.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx25(
   OTPInput,
   {
     ref,
@@ -2286,7 +2362,7 @@ var InputOTP = React20.forwardRef(({ className, containerClassName, ...props },
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24("div", { ref, className: cn("flex items-center", className), ...props }));
+var InputOTPGroup = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, className: cn("flex items-center", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
 var InputOTPSlot = React20.forwardRef(({ index, className, ...props }, ref) => {
   const inputOTPContext = React20.useContext(OTPInputContext);
@@ -2303,29 +2379,29 @@ var InputOTPSlot = React20.forwardRef(({ index, className, ...props }, ref) => {
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ jsx24("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx24("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx25("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx25("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
       ]
     }
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React20.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx24("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx24(Dot, {}) }));
+var InputOTPSeparator = React20.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx25(Dot, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/kbd.tsx
 import { Fragment } from "react";
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var DefaultKbdSeparator = ({
   className,
   children = "+",
   ...props
-}) => /* @__PURE__ */ jsx25("span", { className: cn("text-muted-foreground/50", className), ...props, children });
+}) => /* @__PURE__ */ jsx26("span", { className: cn("text-muted-foreground/50", className), ...props, children });
 var Kbd = ({
   className,
-  separator = /* @__PURE__ */ jsx25(DefaultKbdSeparator, {}),
+  separator = /* @__PURE__ */ jsx26(DefaultKbdSeparator, {}),
   children,
   ...props
-}) => /* @__PURE__ */ jsx25(
+}) => /* @__PURE__ */ jsx26(
   "span",
   {
     className: cn(
@@ -2339,28 +2415,28 @@ var Kbd = ({
     ] }, index)) : children
   }
 );
-var KbdKey = ({ ...props }) => /* @__PURE__ */ jsx25("kbd", { ...props });
+var KbdKey = ({ ...props }) => /* @__PURE__ */ jsx26("kbd", { ...props });
 
 // src/components/modal-container.tsx
 import React21 from "react";
 import { motion } from "framer-motion";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var ModalContainer = React21.memo((props) => {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     motion.div,
     {
       initial: { y: 10, opacity: 0 },
       exit: { y: 10, opacity: 0 },
       animate: { y: 0, opacity: 1 },
       className: "fixed inset-0 md:inset-2 md:rounded-xl md:border-4 border-white dark:border-zinc-700\n       shadow-3xl bg-main-background overflow-hidden z-10",
-      children: /* @__PURE__ */ jsx26("div", { className: "w-full h-full overflow-hidden overflow-y-auto flex justify-center", children: /* @__PURE__ */ jsx26("div", { className: "w-full max-w-[700px] h-fit shrink-0 overflow-hidden flex flex-col p-4", children: props.children }) })
+      children: /* @__PURE__ */ jsx27("div", { className: "w-full h-full overflow-hidden overflow-y-auto flex justify-center", children: /* @__PURE__ */ jsx27("div", { className: "w-full max-w-[700px] h-fit shrink-0 overflow-hidden flex flex-col p-4", children: props.children }) })
     }
   );
 });
 
 // src/components/multi-select.tsx
 import * as React22 from "react";
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 var MultiSelect = ({
   options: options2 = [],
   value = [],
@@ -2394,15 +2470,15 @@ var MultiSelect = ({
       onValueChange: handleValueChange,
       disabled: maxCount === options2.length,
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(
           ComboboxChips,
           {
             className: cn(
               "min-h-10! before:hidden shadow-none rounded-10!",
               className
             ),
-            children: /* @__PURE__ */ jsx27(ComboboxValue, { children: (value2) => /* @__PURE__ */ jsxs17(React22.Fragment, { children: [
-              value2?.map((item) => /* @__PURE__ */ jsx27(
+            children: /* @__PURE__ */ jsx28(ComboboxValue, { children: (value2) => /* @__PURE__ */ jsxs17(React22.Fragment, { children: [
+              value2?.map((item) => /* @__PURE__ */ jsx28(
                 ComboboxChip,
                 {
                   "aria-label": item.value,
@@ -2411,7 +2487,7 @@ var MultiSelect = ({
                 },
                 item.value
               )),
-              /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx28(
                 ComboboxInput,
                 {
                   placeholder: value2.length > 0 ? void 0 : placeholder || "Select an item...",
@@ -2427,12 +2503,12 @@ var MultiSelect = ({
         ),
         /* @__PURE__ */ jsxs17(ComboboxPopup, { className: "rounded-xl", children: [
           /* @__PURE__ */ jsxs17(ComboboxEmpty, { className: "w-full center-flex flex-col", children: [
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx28(
               "div",
               {
                 style: { borderRadius: "30% 70% 70% 30% / 30% 38% 62% 70%" },
                 className: "mt-8 size-24 center-flex bg-accent/50 rounded-blob",
-                children: /* @__PURE__ */ jsx27(
+                children: /* @__PURE__ */ jsx28(
                   "img",
                   {
                     src: "/images/no-direction.png",
@@ -2442,10 +2518,10 @@ var MultiSelect = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx27("h1", { className: "mt-4 text-sm text-foreground font-semibold", children: "Nothing Found" }),
-            /* @__PURE__ */ jsx27("p", { className: "mt-1 mb-8 text-sm text-center text-muted-foreground max-w-62", children: "We couldn't find anything matching your search" })
+            /* @__PURE__ */ jsx28("h1", { className: "mt-4 text-sm text-foreground font-semibold", children: "Nothing Found" }),
+            /* @__PURE__ */ jsx28("p", { className: "mt-1 mb-8 text-sm text-center text-muted-foreground max-w-62", children: "We couldn't find anything matching your search" })
           ] }),
-          /* @__PURE__ */ jsx27(ComboboxList, { children: (item) => /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(ComboboxList, { children: (item) => /* @__PURE__ */ jsx28(
             ComboboxItem,
             {
               value: item,
@@ -2464,7 +2540,7 @@ MultiSelect.displayName = "MultiSelect";
 // src/components/password-input.tsx
 import { Check as Check5, Eye, EyeOff, X } from "lucide-react";
 import React23 from "react";
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var PasswordInput = React23.forwardRef(
   ({ className, onSubmit, showStrength, ...props }, ref) => {
     const [isVisible, setIsVisible] = React23.useState(false);
@@ -2507,7 +2583,7 @@ var PasswordInput = React23.forwardRef(
     };
     return /* @__PURE__ */ jsxs18("div", { className: "relative w-full", children: [
       /* @__PURE__ */ jsxs18("div", { className: "relative w-full", children: [
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(
           Input,
           {
             className: cn("pe-9", className),
@@ -2518,7 +2594,7 @@ var PasswordInput = React23.forwardRef(
             onSubmit: handleSubmit
           }
         ),
-        showStrength && /* @__PURE__ */ jsx28(
+        showStrength && /* @__PURE__ */ jsx29(
           "input",
           {
             title: "password",
@@ -2528,7 +2604,7 @@ var PasswordInput = React23.forwardRef(
             value: showStrength ? strengthScore >= 4 ? props?.value : "" : props.value
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(
           "button",
           {
             className: "absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-10 text-muted-foreground/80 outline-offset-2 transition-colors hover:text-foreground focus:z-10 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
@@ -2537,12 +2613,12 @@ var PasswordInput = React23.forwardRef(
             "aria-label": isVisible ? "Hide password" : "Show password",
             "aria-pressed": isVisible,
             "aria-controls": "password",
-            children: isVisible ? /* @__PURE__ */ jsx28(EyeOff, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ jsx28(Eye, { size: 16, strokeWidth: 2, "aria-hidden": "true" })
+            children: isVisible ? /* @__PURE__ */ jsx29(EyeOff, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ jsx29(Eye, { size: 16, strokeWidth: 2, "aria-hidden": "true" })
           }
         )
       ] }),
       showStrength && /* @__PURE__ */ jsxs18(React23.Fragment, { children: [
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(
           "div",
           {
             className: "my-3 h-1 w-full overflow-hidden rounded-full bg-border",
@@ -2551,7 +2627,7 @@ var PasswordInput = React23.forwardRef(
             "aria-valuemin": 0,
             "aria-valuemax": 4,
             "aria-label": "Password strength",
-            children: /* @__PURE__ */ jsx28(
+            children: /* @__PURE__ */ jsx29(
               "div",
               {
                 className: `h-full ${getStrengthColor(
@@ -2573,15 +2649,15 @@ var PasswordInput = React23.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ jsx28("ul", { className: "space-y-1.5", "aria-label": "Password requirements", children: strength.map((req, index) => /* @__PURE__ */ jsxs18("li", { className: "flex items-center gap-2", children: [
-          req.met ? /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29("ul", { className: "space-y-1.5", "aria-label": "Password requirements", children: strength.map((req, index) => /* @__PURE__ */ jsxs18("li", { className: "flex items-center gap-2", children: [
+          req.met ? /* @__PURE__ */ jsx29(
             Check5,
             {
               size: 16,
               className: "text-emerald-500",
               "aria-hidden": "true"
             }
-          ) : /* @__PURE__ */ jsx28(
+          ) : /* @__PURE__ */ jsx29(
             X,
             {
               size: 16,
@@ -2595,7 +2671,7 @@ var PasswordInput = React23.forwardRef(
               className: `text-xs ${req.met ? "text-emerald-600" : "text-muted-foreground"}`,
               children: [
                 req.text,
-                /* @__PURE__ */ jsx28("span", { className: "sr-only", children: req.met ? " - Requirement met" : " - Requirement not met" })
+                /* @__PURE__ */ jsx29("span", { className: "sr-only", children: req.met ? " - Requirement met" : " - Requirement not met" })
               ]
             }
           )
@@ -2613,7 +2689,7 @@ import { forwardRef as forwardRef16, useState as useState3 } from "react";
 import * as RPNInput from "react-phone-number-input";
 import flags from "react-phone-number-input/flags";
 import { isValidPhoneNumber } from "react-phone-number-input";
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 function PhoneNumberInput({
   className = "",
   ...props
@@ -2627,7 +2703,7 @@ function PhoneNumberInput({
     }
     props.onChange(newValue ?? "");
   };
-  return /* @__PURE__ */ jsx29("div", { className: cn(className), children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30("div", { className: cn(className), children: /* @__PURE__ */ jsx30(
     RPNInput.default,
     {
       className: cn("flex rounded-md", error && "border border-red-500/70"),
@@ -2645,7 +2721,7 @@ function PhoneNumberInput({
 }
 var PhoneInput = forwardRef16(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       Input,
       {
         className: cn(
@@ -2677,8 +2753,8 @@ var CountrySelect = ({
        hover:text-foreground has-disabled:pointer-events-none has-disabled:opacity-50`),
       children: [
         /* @__PURE__ */ jsxs19("div", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx29(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground/80", children: /* @__PURE__ */ jsx29(ChevronDown2, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })
+          /* @__PURE__ */ jsx30(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx30("span", { className: "text-muted-foreground/80", children: /* @__PURE__ */ jsx30(ChevronDown2, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })
         ] }),
         /* @__PURE__ */ jsxs19(
           "select",
@@ -2689,7 +2765,7 @@ var CountrySelect = ({
             className: "absolute inset-0 text-sm opacity-0",
             "aria-label": "Select country",
             children: [
-              /* @__PURE__ */ jsx29("option", { value: "", children: "Select a country" }, "default"),
+              /* @__PURE__ */ jsx30("option", { value: "", children: "Select a country" }, "default"),
               options2.filter((x) => x.value).map((option, i) => /* @__PURE__ */ jsxs19("option", { value: option.value, children: [
                 option.label,
                 " ",
@@ -2704,12 +2780,12 @@ var CountrySelect = ({
 };
 var FlagComponent = ({ country, countryName }) => {
   const Flag = flags[country];
-  return /* @__PURE__ */ jsx29("span", { className: "w-5 overflow-hidden rounded-sm", children: Flag ? /* @__PURE__ */ jsx29(Flag, { title: countryName }) : /* @__PURE__ */ jsx29(Phone, { size: 16, "aria-hidden": "true" }) });
+  return /* @__PURE__ */ jsx30("span", { className: "w-5 overflow-hidden rounded-sm", children: Flag ? /* @__PURE__ */ jsx30(Flag, { title: countryName }) : /* @__PURE__ */ jsx30(Phone, { size: 16, "aria-hidden": "true" }) });
 };
 
 // src/components/price-input.tsx
 import React25 from "react";
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 var PriceInput = React25.forwardRef(
   ({ currency, ...props }, ref) => {
     return /* @__PURE__ */ jsxs20(
@@ -2720,8 +2796,8 @@ var PriceInput = React25.forwardRef(
           props.containerClassname
         ),
         children: [
-          !props.hide_currency_symbol && /* @__PURE__ */ jsx30("div", { className: "absolute inset-y-0.5 flex items-center pl-4 pr-2", children: /* @__PURE__ */ jsx30("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.symbol }) }),
-          /* @__PURE__ */ jsx30(
+          !props.hide_currency_symbol && /* @__PURE__ */ jsx31("div", { className: "absolute inset-y-0.5 flex items-center pl-4 pr-2", children: /* @__PURE__ */ jsx31("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.symbol }) }),
+          /* @__PURE__ */ jsx31(
             Input,
             {
               ref,
@@ -2731,7 +2807,7 @@ var PriceInput = React25.forwardRef(
               className: cn("px-10 shadow-none m-0! py-0", props.className)
             }
           ),
-          !props.hide_currency_code && /* @__PURE__ */ jsx30("div", { className: "absolute inset-y-0.5 right-0 flex items-center pl-3 pr-4", children: /* @__PURE__ */ jsx30("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.code }) })
+          !props.hide_currency_code && /* @__PURE__ */ jsx31("div", { className: "absolute inset-y-0.5 right-0 flex items-center pl-3 pr-4", children: /* @__PURE__ */ jsx31("span", { className: "[fontSize:inherit] font-medium text-muted-foreground/50", children: currency?.code }) })
         ]
       }
     );
@@ -2742,8 +2818,8 @@ PriceInput.displayName = "PriceInput";
 // src/components/progress.tsx
 import * as React26 from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var Progress = React26.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx31(
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Progress = React26.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx32(
   ProgressPrimitive.Root,
   {
     ref,
@@ -2752,7 +2828,7 @@ var Progress = React26.forwardRef(({ className, value, ...props }, ref) => /* @_
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx31(
+    children: /* @__PURE__ */ jsx32(
       ProgressPrimitive.Indicator,
       {
         className: "h-full w-full flex-1 bg-primary transition-all",
@@ -2767,7 +2843,7 @@ Progress.displayName = ProgressPrimitive.Root.displayName;
 import * as React27 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check as Check6, ChevronDown as ChevronDown3, ChevronUp } from "lucide-react";
-import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
@@ -2782,12 +2858,12 @@ var SelectTrigger = React27.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx32(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx32(ChevronDown3, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsx33(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx33(ChevronDown3, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -2796,11 +2872,11 @@ var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx32(ChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx33(ChevronUp, { className: "h-4 w-4" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -2809,11 +2885,11 @@ var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) =
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx32(ChevronDown3, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx33(ChevronDown3, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React27.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx32(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs21(
+var SelectContent = React27.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx33(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs21(
   SelectPrimitive.Content,
   {
     ref,
@@ -2825,8 +2901,8 @@ var SelectContent = React27.forwardRef(({ className, children, position = "poppe
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx32(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx33(
         SelectPrimitive.Viewport,
         {
           className: cn(
@@ -2836,12 +2912,12 @@ var SelectContent = React27.forwardRef(({ className, children, position = "poppe
           children
         }
       ),
-      /* @__PURE__ */ jsx32(SelectScrollDownButton, {})
+      /* @__PURE__ */ jsx33(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
   SelectPrimitive.Label,
   {
     ref,
@@ -2860,13 +2936,13 @@ var SelectItem = React27.forwardRef(({ className, children, ...props }, ref) =>
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx32("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx32(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx32(Check6, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx32(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ jsx33("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx33(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx33(Check6, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx33(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+var SelectSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
   SelectPrimitive.Separator,
   {
     ref,
@@ -2879,9 +2955,9 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 // src/components/separator.tsx
 import * as React28 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Separator3 = React28.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx33(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx34(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -2903,12 +2979,12 @@ import * as React29 from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva as cva4 } from "class-variance-authority";
 import { X as X2 } from "lucide-react";
-import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var Sheet = SheetPrimitive.Root;
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var SheetOverlay = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   SheetPrimitive.Overlay,
   {
     className: cn(
@@ -2937,7 +3013,7 @@ var sheetVariants = cva4(
   }
 );
 var SheetContent = React29.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs22(SheetPortal, { children: [
-  /* @__PURE__ */ jsx34(SheetOverlay, {}),
+  /* @__PURE__ */ jsx35(SheetOverlay, {}),
   /* @__PURE__ */ jsxs22(
     SheetPrimitive.Content,
     {
@@ -2947,8 +3023,8 @@ var SheetContent = React29.forwardRef(({ side = "right", className, children, ..
       children: [
         children,
         /* @__PURE__ */ jsxs22(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ jsx34(X2, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx34("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsx35(X2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx35("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
@@ -2958,7 +3034,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx34(
+}) => /* @__PURE__ */ jsx35(
   "div",
   {
     className: cn(
@@ -2972,7 +3048,7 @@ SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx34(
+}) => /* @__PURE__ */ jsx35(
   "div",
   {
     className: cn(
@@ -2983,7 +3059,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var SheetTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   SheetPrimitive.Title,
   {
     ref,
@@ -2992,7 +3068,7 @@ var SheetTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var SheetDescription = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   SheetPrimitive.Description,
   {
     ref,
@@ -3003,12 +3079,12 @@ var SheetDescription = React29.forwardRef(({ className, ...props }, ref) => /* @
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 // src/components/skeleton.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function Skeleton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       className: cn("animate-pulse rounded-lg bg-muted", className),
@@ -3021,7 +3097,7 @@ function Skeleton({
 import { mergeProps as mergeProps3 } from "@base-ui-components/react/merge-props";
 import { useRender as useRender3 } from "@base-ui-components/react/use-render";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 var statusIndicatorVariants = cva5(
   "relative inline-flex size-2.5 shrink-0",
   {
@@ -3053,7 +3129,7 @@ function StatusIndicator({
     defaultTagName: "span",
     props: mergeProps3(defaultProps, props),
     render: render || /* @__PURE__ */ jsxs23("span", { ...defaultProps, children: [
-      /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37(
         "span",
         {
           className: cn(
@@ -3062,16 +3138,16 @@ function StatusIndicator({
           )
         }
       ),
-      /* @__PURE__ */ jsx36("span", { className: "relative inline-flex rounded-full size-2.5" })
+      /* @__PURE__ */ jsx37("span", { className: "relative inline-flex rounded-full size-2.5" })
     ] })
   });
 }
 
 // src/components/switch.tsx
 import { Switch as SwitchPrimitive } from "@base-ui-components/react/switch";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Switch({ className, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     SwitchPrimitive.Root,
     {
       className: cn(
@@ -3080,7 +3156,7 @@ function Switch({ className, ...props }) {
       ),
       "data-slot": "switch",
       ...props,
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx38(
         SwitchPrimitive.Thumb,
         {
           className: cn(
@@ -3094,14 +3170,14 @@ function Switch({ className, ...props }) {
 }
 
 // src/components/table.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       className: "relative w-full overflow-x-auto",
       "data-slot": "table-container",
-      children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx39(
         "table",
         {
           className: cn(
@@ -3116,7 +3192,7 @@ function Table({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "thead",
     {
       className: cn(
@@ -3129,7 +3205,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "tbody",
     {
       className: cn(
@@ -3142,7 +3218,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "tfoot",
     {
       className: cn(
@@ -3155,7 +3231,7 @@ function TableFooter({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "tr",
     {
       className: cn(
@@ -3168,7 +3244,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "th",
     {
       className: cn(
@@ -3181,7 +3257,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "td",
     {
       className: cn(
@@ -3197,7 +3273,7 @@ function TableCaption({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "caption",
     {
       className: cn(
@@ -3213,9 +3289,9 @@ function TableCaption({
 // src/components/tabs.tsx
 import * as React30 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
-var TabsList = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
+var TabsList = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
   TabsPrimitive.List,
   {
     ref,
@@ -3227,7 +3303,7 @@ var TabsList = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
+var TabsTrigger = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -3239,7 +3315,7 @@ var TabsTrigger = React30.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
+var TabsContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
   TabsPrimitive.Content,
   {
     ref,
@@ -3255,14 +3331,14 @@ TabsContent.displayName = TabsPrimitive.Content.displayName;
 // src/components/tags-input.tsx
 import { TagInput } from "emblor";
 import { useId as useId3, useState as useState4 } from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 
 // src/components/textarea.tsx
 import * as React31 from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var Textarea = React31.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx42(
       "textarea",
       {
         className: cn(
@@ -3279,7 +3355,7 @@ Textarea.displayName = "Textarea";
 
 // src/components/timeline.tsx
 import * as React32 from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var TimelineContext = React32.createContext(null);
 function useTimeline() {
   const context = React32.useContext(TimelineContext);
@@ -3289,7 +3365,7 @@ function useTimeline() {
   return context;
 }
 var Timeline = React32.forwardRef(
-  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx42(TimelineContext.Provider, { value: { orientation }, children: /* @__PURE__ */ jsx42(
+  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx43(TimelineContext.Provider, { value: { orientation }, children: /* @__PURE__ */ jsx43(
     "ol",
     {
       ref,
@@ -3307,7 +3383,7 @@ var Timeline = React32.forwardRef(
 Timeline.displayName = "Timeline";
 var TimelineItem = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "li",
     {
       ref,
@@ -3324,7 +3400,7 @@ var TimelineItem = React32.forwardRef(({ className, ...props }, ref) => {
 TimelineItem.displayName = "TimelineItem";
 var TimelineSeparator = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       ref,
@@ -3341,7 +3417,7 @@ var TimelineSeparator = React32.forwardRef(({ className, ...props }, ref) => {
 TimelineSeparator.displayName = "TimelineSeparator";
 var TimelineDot = React32.forwardRef(({ variant = "default", className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       ref,
@@ -3360,7 +3436,7 @@ var TimelineDot = React32.forwardRef(({ variant = "default", className, ...props
 TimelineDot.displayName = "TimelineDot";
 var TimelineConnector = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       ref,
@@ -3378,7 +3454,7 @@ var TimelineConnector = React32.forwardRef(({ className, ...props }, ref) => {
 TimelineConnector.displayName = "TimelineConnector";
 var TimelineContent = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       ref,
@@ -3396,12 +3472,12 @@ var TimelineContent = React32.forwardRef(({ className, ...props }, ref) => {
 TimelineContent.displayName = "TimelineContent";
 var TimelineTitle = React32.forwardRef((props, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx42("div", { ref, "data-orientation": orientation, ...props });
+  return /* @__PURE__ */ jsx43("div", { ref, "data-orientation": orientation, ...props });
 });
 TimelineTitle.displayName = "TimelineTitle";
 var TimelineDescription = React32.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useTimeline();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       ref,
@@ -3416,11 +3492,11 @@ TimelineDescription.displayName = "TimelineDescription";
 // src/components/tooltip.tsx
 import * as React33 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React33.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx43(
+var TooltipContent = React33.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx44(
   TooltipPrimitive.Content,
   {
     ref,
@@ -3552,6 +3628,7 @@ export {
   FormMessage,
   ButtonIcon as Icon,
   ImageCard,
+  ImageZoom,
   Input,
   InputOTP,
   InputOTPGroup,