@komensal/ui 0.4.0 → 0.5.0

package/dist/index.js

@@ -313,6 +313,7 @@ var Button = React2.forwardRef(
     const buttonNode = /* @__PURE__ */ jsxs5(
       Comp,
       {
+        "aria-busy": isLoading || void 0,
         className: cn(buttonVariants({ hoverStyle, size, variant }), isLoading && "relative opacity-40", className),
         disabled: disabled === true || isLoading,
         ref,
@@ -1345,21 +1346,76 @@ var SelectField = ({
   );
 };
 
+// src/components/image.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var Image = ({
+  alt = "",
+  aspectRatio,
+  className,
+  fallback,
+  loading = "lazy",
+  onError,
+  onLoad,
+  wrapperClassName,
+  ...props
+}) => {
+  const ref = useRef3(null);
+  const [loaded, setLoaded] = useState4(false);
+  const [errored, setErrored] = useState4(false);
+  useEffect3(() => {
+    if (ref.current?.complete && ref.current.naturalWidth > 0) setLoaded(true);
+  }, []);
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      className: cn("bg-inactive relative overflow-hidden", wrapperClassName),
+      style: aspectRatio ? { aspectRatio } : void 0,
+      children: [
+        !loaded && !errored && /* @__PURE__ */ jsx20("div", { className: "absolute inset-0 animate-pulse" }),
+        errored ? fallback ?? null : /* @__PURE__ */ jsx20(
+          "img",
+          {
+            alt,
+            className: cn(
+              "h-full w-full object-cover transition-opacity duration-300",
+              loaded ? "opacity-100" : "opacity-0",
+              className
+            ),
+            decoding: "async",
+            loading,
+            onError: (e) => {
+              setErrored(true);
+              onError?.(e);
+            },
+            onLoad: (e) => {
+              setLoaded(true);
+              onLoad?.(e);
+            },
+            ref,
+            ...props
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/components/loading.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function Loading({ className = "", isSpinner = true }) {
-  return /* @__PURE__ */ jsx20("div", { className: cn("relative flex min-h-screen items-center justify-center gap-6", className), children: isSpinner && /* @__PURE__ */ jsx20("div", { className: "absolute right-0 bottom-0 m-10", children: /* @__PURE__ */ jsx20(Spinner, {}) }) });
+  return /* @__PURE__ */ jsx21("div", { className: cn("relative flex min-h-screen items-center justify-center gap-6", className), children: isSpinner && /* @__PURE__ */ jsx21("div", { className: "absolute right-0 bottom-0 m-10", children: /* @__PURE__ */ jsx21(Spinner, {}) }) });
 }
 
 // src/components/password-checklist.tsx
 import { IoMdCheckmarkCircle, IoMdCloseCircle } from "react-icons/io";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var PasswordChecklist = ({ className, rules, value }) => {
   if (rules.length === 0) return null;
-  return /* @__PURE__ */ jsx21("ul", { className: cn("flex flex-col gap-1", className), children: rules.map((rule) => {
+  return /* @__PURE__ */ jsx22("ul", { className: cn("flex flex-col gap-1", className), children: rules.map((rule) => {
     const isMet = rule.test(value);
     const Icon2 = isMet ? IoMdCheckmarkCircle : IoMdCloseCircle;
-    return /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs17(
       "li",
       {
         className: cn(
@@ -1367,8 +1423,8 @@ var PasswordChecklist = ({ className, rules, value }) => {
           isMet ? "text-success" : "text-inactive-text"
         ),
         children: [
-          /* @__PURE__ */ jsx21(Icon2, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ jsx21("span", { children: rule.label })
+          /* @__PURE__ */ jsx22(Icon2, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx22("span", { children: rule.label })
         ]
       },
       rule.key
@@ -1380,11 +1436,11 @@ var PasswordChecklist = ({ className, rules, value }) => {
 import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import * as React11 from "react";
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs17(
+var SelectTrigger = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs18(
   SelectPrimitive.Trigger,
   {
     className: cn(
@@ -1395,32 +1451,32 @@ var SelectTrigger = React11.forwardRef(({ children, className, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx22(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx22(CaretSortIcon, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsx23(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx23(CaretSortIcon, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
   SelectPrimitive.ScrollUpButton,
   {
     className: cn("flex cursor-default items-center justify-center py-1", className),
     ref,
     ...props,
-    children: /* @__PURE__ */ jsx22(ChevronUpIcon, {})
+    children: /* @__PURE__ */ jsx23(ChevronUpIcon, {})
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
   SelectPrimitive.ScrollDownButton,
   {
     className: cn("flex cursor-default items-center justify-center py-1", className),
     ref,
     ...props,
-    children: /* @__PURE__ */ jsx22(ChevronDownIcon, {})
+    children: /* @__PURE__ */ jsx23(ChevronDownIcon, {})
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React11.forwardRef(({ children, className, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx22(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs17(
+var SelectContent = React11.forwardRef(({ children, className, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs18(
   SelectPrimitive.Content,
   {
     className: cn(
@@ -1432,8 +1488,8 @@ var SelectContent = React11.forwardRef(({ children, className, position = "poppe
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx22(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx23(
         SelectPrimitive.Viewport,
         {
           className: cn(
@@ -1443,14 +1499,14 @@ var SelectContent = React11.forwardRef(({ children, className, position = "poppe
           children
         }
       ),
-      /* @__PURE__ */ jsx22(SelectScrollDownButton, {})
+      /* @__PURE__ */ jsx23(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(SelectPrimitive.Label, { className: cn("px-2 py-1.5 text-sm font-semibold", className), ref, ...props }));
+var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Label, { className: cn("px-2 py-1.5 text-sm font-semibold", className), ref, ...props }));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs17(
+var SelectItem = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs18(
   SelectPrimitive.Item,
   {
     className: cn(
@@ -1460,32 +1516,32 @@ var SelectItem = React11.forwardRef(({ children, className, ...props }, ref) =>
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx22("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx22(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx22(CheckIcon, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx22(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx22("span", { children }) })
+      /* @__PURE__ */ jsx23("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx23(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx23(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx23(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx23("span", { children }) })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(SelectPrimitive.Separator, { className: cn("bg-border -mx-1 my-1 h-px", className), ref, ...props }));
+var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Separator, { className: cn("bg-border -mx-1 my-1 h-px", className), ref, ...props }));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/step-header.tsx
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
-var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-1", children: [
-  /* @__PURE__ */ jsx23("h1", { className: "text-title text-2xl font-bold", children: title }),
-  subtitle !== void 0 && /* @__PURE__ */ jsx23("p", { className: cn("text-subtitle text-sm", subtitleClassName), children: subtitle })
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
+  /* @__PURE__ */ jsx24("h1", { className: "text-title text-2xl font-bold", children: title }),
+  subtitle !== void 0 && /* @__PURE__ */ jsx24("p", { className: cn("text-subtitle text-sm", subtitleClassName), children: subtitle })
 ] });
 
 // src/components/stepper.tsx
 import { CheckIcon as CheckIcon2 } from "lucide-react";
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
-  return /* @__PURE__ */ jsx24("div", { className: cn("flex w-full items-start", className), children: steps.map((step, index) => {
+  return /* @__PURE__ */ jsx25("div", { className: cn("flex w-full items-start", className), children: steps.map((step, index) => {
     const isCompleted = intermediate ? index <= activeIndex : index < activeIndex;
     const isActive = !intermediate && index === activeIndex;
-    return /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 flex-col items-center", children: [
-      /* @__PURE__ */ jsxs19("div", { className: "flex w-full items-center", children: [
-        /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 flex-col items-center", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex w-full items-center", children: [
+        /* @__PURE__ */ jsx25(
           "div",
           {
             className: cn(
@@ -1495,7 +1551,7 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "div",
           {
             "aria-current": isActive ? "step" : void 0,
@@ -1505,10 +1561,10 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
               isActive && "bg-primary border-primary text-inverse",
               !isCompleted && !isActive && "bg-inactive border-inactive text-surface"
             ),
-            children: isCompleted ? /* @__PURE__ */ jsx24(CheckIcon2, { className: "h-4 w-4" }) : index + 1
+            children: isCompleted ? /* @__PURE__ */ jsx25(CheckIcon2, { className: "h-4 w-4" }) : index + 1
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "div",
           {
             className: cn(
@@ -1516,7 +1572,7 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
               isCompleted ? "bg-primary" : "bg-inactive",
               index === steps.length - 1 && "rounded-r-full"
             ),
-            children: index === 0 && /* @__PURE__ */ jsx24(
+            children: index === 0 && /* @__PURE__ */ jsx25(
               "div",
               {
                 className: cn(
@@ -1528,22 +1584,22 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx24("span", { className: cn("mt-1 text-xs font-normal", isCompleted || isActive ? "text-primary" : "text-muted"), children: step.label })
+      /* @__PURE__ */ jsx25("span", { className: cn("mt-1 text-xs font-normal", isCompleted || isActive ? "text-primary" : "text-muted"), children: step.label })
     ] }, step.label);
   }) });
 };
 
 // src/components/toast/toast.tsx
 import { AlertTriangle, Check, X } from "lucide-react";
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
 import { IoDocumentLockOutline, IoInformationCircle } from "react-icons/io5";
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 var EXIT_ANIMATION_MS = 200;
 function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
-  const [leaving, setLeaving] = useState4(false);
-  const startedAtRef = useRef3(Date.now());
-  const timeoutRef = useRef3(null);
-  const exitRef = useRef3(null);
+  const [leaving, setLeaving] = useState5(false);
+  const startedAtRef = useRef4(Date.now());
+  const timeoutRef = useRef4(null);
+  const exitRef = useRef4(null);
   const Icon2 = useMemo3(() => {
     if (type === "success") return Check;
     if (type === "error") return X;
@@ -1566,7 +1622,7 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
     }
     return { border: "border-wait", icon: "text-wait", iconBorder: "border-wait" };
   }, [type]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     if (exitRef.current) clearTimeout(exitRef.current);
     const elapsed = Date.now() - startedAtRef.current;
@@ -1580,7 +1636,7 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
       if (exitRef.current) clearTimeout(exitRef.current);
     };
   }, [id, duration, onClose]);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       "aria-live": "polite",
@@ -1598,9 +1654,9 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
       ].join(" "),
       role: "status",
       children: [
-        /* @__PURE__ */ jsx25("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ jsx25("h4", { className: ["text-[16px] leading-normal font-semibold", "text-foreground", "line-clamp-2"].join(" "), children: title }) }),
-        subtitle ? /* @__PURE__ */ jsx25("div", { className: "shrink-0 pr-4 text-left", children: /* @__PURE__ */ jsx25("div", { className: ["max-w-28 text-[14px] leading-[19.5px] font-normal", "text-body"].join(" "), children: subtitle }) }) : null,
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ jsx26("h4", { className: ["text-[16px] leading-normal font-semibold", "text-foreground", "line-clamp-2"].join(" "), children: title }) }),
+        subtitle ? /* @__PURE__ */ jsx26("div", { className: "shrink-0 pr-4 text-left", children: /* @__PURE__ */ jsx26("div", { className: ["max-w-28 text-[14px] leading-[19.5px] font-normal", "text-body"].join(" "), children: subtitle }) }) : null,
+        /* @__PURE__ */ jsx26(
           "div",
           {
             className: [
@@ -1608,7 +1664,7 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
               "flex h-8 w-8 min-w-8 items-center justify-center rounded-full border-2",
               styles.iconBorder
             ].join(" "),
-            children: /* @__PURE__ */ jsx25(Icon2, { className: ["h-5 w-5", styles.icon].join(" ") })
+            children: /* @__PURE__ */ jsx26(Icon2, { className: ["h-5 w-5", styles.icon].join(" ") })
           }
         )
       ]
@@ -1617,12 +1673,12 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
 }
 
 // src/components/toast/toast-provider.tsx
-import { useCallback as useCallback3, useEffect as useEffect4, useLayoutEffect, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx26 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import { Fragment as Fragment4, jsx as jsx27 } from "react/jsx-runtime";
 function ToastProvider() {
-  const [toasts, setToasts] = useState5([]);
-  const itemRefs = useRef4(/* @__PURE__ */ new Map());
-  const prevRects = useRef4(/* @__PURE__ */ new Map());
+  const [toasts, setToasts] = useState6([]);
+  const itemRefs = useRef5(/* @__PURE__ */ new Map());
+  const prevRects = useRef5(/* @__PURE__ */ new Map());
   const showToast = useCallback3((type, options) => {
     setToasts((prev) => [
       ...prev,
@@ -1638,7 +1694,7 @@ function ToastProvider() {
   const removeToast = useCallback3((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     registerToastEmitter(showToast);
     return () => registerToastEmitter(null);
   }, [showToast]);
@@ -1679,7 +1735,7 @@ function ToastProvider() {
       itemRefs.current.set(id, el);
     };
   }, []);
-  return /* @__PURE__ */ jsx26(Fragment4, { children: Object.entries(grouped).map(([position, list]) => /* @__PURE__ */ jsx26("div", { className: `fixed z-4000 ${getPositionClass(position)}`, children: /* @__PURE__ */ jsx26("div", { className: "relative flex flex-col gap-3", children: list.map((toast2) => /* @__PURE__ */ jsx26("div", { ref: setItemRef(toast2.id), children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(Fragment4, { children: Object.entries(grouped).map(([position, list]) => /* @__PURE__ */ jsx27("div", { className: `fixed z-4000 ${getPositionClass(position)}`, children: /* @__PURE__ */ jsx27("div", { className: "relative flex flex-col gap-3", children: list.map((toast2) => /* @__PURE__ */ jsx27("div", { ref: setItemRef(toast2.id), children: /* @__PURE__ */ jsx27(
     Toast,
     {
       duration: toast2.duration,
@@ -1707,9 +1763,9 @@ function getPositionClass(position) {
 }
 
 // src/components/wrapper.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Wrapper = ({ children, className }) => {
-  return /* @__PURE__ */ jsx27("div", { className: cn("mx-auto h-full w-full", className), children });
+  return /* @__PURE__ */ jsx28("div", { className: cn("mx-auto h-full w-full", className), children });
 };
 export {
   Alert,
@@ -1742,6 +1798,7 @@ export {
   FormLabel,
   FormMessage,
   GoogleMapPicker,
+  Image,
   Input,
   InputField,
   InputOTP,