@dimasbaguspm/versaur 0.0.18 → 0.0.19

package/dist/js/forms/index.js

@@ -1,18 +1,20 @@
-import { C as a, b as n, a as p, D as u, E as s, P as I, R as i, d as l, c as S, S as c, e as r, h as g, f as h, T as m, g as o } from "../email-input-BIbrfs5q.js";
+import { C as a, b as n, a as p, D as u, E as i, P as s, R as I, d as l, c as S, S as c, e as g, j as r, i as h, h as m, f as b, T as o, g as x } from "../selectable-multiple-input-CJXfqy1Z.js";
 export {
   a as CheckboxInput,
   n as ChipMultipleInput,
   p as ChipSingleInput,
   u as DateSinglePickerInput,
-  s as EmailInput,
-  I as PriceInput,
-  i as RadioInput,
+  i as EmailInput,
+  s as PriceInput,
+  I as RadioInput,
   l as SearchInput,
   S as SegmentMultipleInput,
   c as SegmentSingleInput,
-  r as SelectInput,
-  g as SwitchInput,
-  h as TextAreaInput,
-  m as TextInput,
-  o as TimePickerInput
+  g as SelectInput,
+  r as SelectableMultipleInput,
+  h as SelectableSingleInput,
+  m as SwitchInput,
+  b as TextAreaInput,
+  o as TextInput,
+  x as TimePickerInput
 };

package/dist/js/{description-list-DZQF212Z.js → image-rectangle-CLU-GVtw.js}

@@ -1,7 +1,8 @@
 import { c as cva, j as jsxRuntimeExports, a as cn } from "./index-DOdDlCoL.js";
 import * as React from "react";
 import React__default, { forwardRef, useState, useEffect, useCallback, useRef, createContext, useContext, useMemo } from "react";
-import { X, ChevronLeft, ChevronRight } from "lucide-react";
+import { X, ChevronLeft, ChevronRight, ImageOff } from "lucide-react";
+import { S as Skeleton } from "./skeleton-BNZyaRjo.js";
 const iconVariants = cva("inline-flex items-center justify-center", {
   variants: {
     size: {
@@ -337,8 +338,8 @@ const iconVariants = cva("inline-flex items-center justify-center", {
       a(!1);
     }, [e]);
     const u = useCallback(
-      (c) => {
-        a(!0), s?.(c);
+      (l) => {
+        a(!0), s?.(l);
       },
       [s]
     );
@@ -523,12 +524,12 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     className: i,
     children: a,
     ...u
-  }, c) => {
+  }, l) => {
     const f = !(a != null && a !== "") && !!(n || o);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
-        ref: c,
+        ref: l,
         className: cn(
           badgeVariants({
             variant: e,
@@ -738,32 +739,32 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
 );
 function useFloatingPosition(e, t = "1rem") {
   const r = useRef(null), [s, n] = useState({}), [o, i] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
-    const c = r.current;
-    if (!c) return;
-    const b = c.getBoundingClientRect().height > window.innerHeight;
-    let f = {}, w = "";
-    b ? (f = {
+    const l = r.current;
+    if (!l) return;
+    const h = l.getBoundingClientRect().height > window.innerHeight;
+    let f = {}, p = "";
+    h ? (f = {
       position: "fixed",
       bottom: t,
       zIndex: 50,
-      transform: `translateY(${c.scrollTop}px)`
-    }, w = `fixed bottom-4 ${e}-4`) : (f = {
+      transform: `translateY(${l.scrollTop}px)`
+    }, p = `fixed bottom-4 ${e}-4`) : (f = {
       position: "fixed",
       bottom: t,
       zIndex: 50
-    }, w = `fixed bottom-4 ${e}-4`), n(f), i(w);
+    }, p = `fixed bottom-4 ${e}-4`), n(f), i(p);
   }, [e, t]);
   return useEffect(() => {
     a();
-    const c = r.current;
-    return c && c.addEventListener("scroll", a), window.addEventListener("resize", a), () => {
-      c && c.removeEventListener("scroll", a), window.removeEventListener("resize", a);
+    const l = r.current;
+    return l && l.addEventListener("scroll", a), window.addEventListener("resize", a), () => {
+      l && l.removeEventListener("scroll", a), window.removeEventListener("resize", a);
     };
   }, [a]), useEffect(() => {
     r.current && a();
   }, [e, t, a]), [useCallback(
-    (c) => {
-      r.current = c, c && a();
+    (l) => {
+      r.current = l, l && a();
     },
     [a]
   ), s, o];
@@ -777,10 +778,10 @@ const ButtonFloat = forwardRef(
     offset: o = "1rem",
     ...i
   }, a) {
-    const [u, c, x] = useFloatingPosition(
+    const [u, l, x] = useFloatingPosition(
       n,
       o
-    ), [b, f] = useState(!1);
+    ), [h, f] = useState(!1);
     return useEffect(() => {
       f(!0);
     }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -791,10 +792,10 @@ const ButtonFloat = forwardRef(
         className: cn(
           buttonFloatVariants({ variant: r, size: s }),
           x,
-          b && "animate-fab-in",
+          h && "animate-fab-in",
           t
         ),
-        style: c,
+        style: l,
         ...i
       }
     ) });
@@ -903,11 +904,11 @@ const buttonIconVariants = cva(
     as: i,
     "aria-label": a,
     ...u
-  }, c) {
+  }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        ref: c,
+        ref: l,
         type: "button",
         className: cn(
           buttonIconVariants({
@@ -1051,7 +1052,7 @@ const BUTTONS = [
     className: s,
     "aria-label": n
   }, o) => {
-    const { input: i, inputRef: a, handleButton: u, handleInput: c } = useCalculator({
+    const { input: i, inputRef: a, handleButton: u, handleInput: l } = useCalculator({
       initialValue: e,
       disabled: r,
       onChange: t
@@ -1070,13 +1071,13 @@ const BUTTONS = [
               ref: a,
               className: "w-full mb-3 px-3 py-2 rounded border border-[var(--color-neutral)] bg-[var(--color-neutral-soft)] text-right text-xl font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]",
               value: i,
-              onChange: c,
+              onChange: l,
               disabled: r,
               inputMode: "decimal",
               "aria-label": "Calculator input"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((x, b) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: x.map((f) => f === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((x, h) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: x.map((f) => f === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ButtonIcon,
             {
               as: X,
@@ -1097,7 +1098,7 @@ const BUTTONS = [
               children: f
             },
             f
-          )) }, b)) })
+          )) }, h)) })
         ]
       }
     );
@@ -1184,11 +1185,11 @@ const textVariants = cva("", {
     clamp: i = "none",
     ellipsis: a = !1,
     fontSize: u,
-    fontWeight: c,
+    fontWeight: l,
     className: x,
-    children: b,
+    children: h,
     ...f
-  }, w) => {
+  }, p) => {
     const d = [
       "h1",
       "h2",
@@ -1199,11 +1200,11 @@ const textVariants = cva("", {
       "p",
       "span",
       "label"
-    ].includes(e) ? e : "span", v = u ? `text-${u}` : "", p = c ? `font-${c}` : "";
+    ].includes(e) ? e : "span", v = u ? `text-${u}` : "", w = l ? `font-${l}` : "";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       e,
       {
-        ref: w,
+        ref: p,
         className: cn(
           textVariants({
             color: t,
@@ -1217,11 +1218,11 @@ const textVariants = cva("", {
             as: d
           }),
           v,
-          p,
+          w,
           x
         ),
         ...f,
-        children: b
+        children: h
       }
     );
   }
@@ -1268,9 +1269,9 @@ const CalendarHeader = () => {
     ] })
   ] });
 }, CalendarWeekdays = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 px-4 text-ghost-500 mb-3", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((e) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "xs", color: "ghost", align: "center", children: e }, e)) }), CalendarDaysSingle = () => {
-  const e = useCalendarContext(), { year: t, month: r, value: s, onChange: n, setMonth: o, setYear: i } = e, a = (g, m) => new Date(g, m + 1, 0).getDate(), c = ((g, m) => new Date(g, m, 1).getDay())(t, r), x = a(t, r), b = r - 1 < 0 ? 11 : r - 1, f = r === 0 ? t - 1 : t, w = a(t, b), y = r === 11 ? 0 : r + 1, d = r === 11 ? t + 1 : t, v = [];
-  for (let g = 0; g < c; g++) {
-    const m = w - c + g + 1;
+  const e = useCalendarContext(), { year: t, month: r, value: s, onChange: n, setMonth: o, setYear: i } = e, a = (g, m) => new Date(g, m + 1, 0).getDate(), l = ((g, m) => new Date(g, m, 1).getDay())(t, r), x = a(t, r), h = r - 1 < 0 ? 11 : r - 1, f = r === 0 ? t - 1 : t, p = a(t, h), y = r === 11 ? 0 : r + 1, d = r === 11 ? t + 1 : t, v = [];
+  for (let g = 0; g < l; g++) {
+    const m = p - l + g + 1;
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1280,7 +1281,7 @@ const CalendarHeader = () => {
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            n?.(new Date(f, b, m)), o(b), i(f);
+            n?.(new Date(f, h, m)), o(h), i(f);
           }
         },
         "prev-" + g
@@ -1315,8 +1316,8 @@ const CalendarHeader = () => {
       )
     );
   }
-  const p = c + x;
-  for (let g = 0; g < (p % 7 === 0 ? 0 : 7 - p % 7); g++)
+  const w = l + x;
+  for (let g = 0; g < (w % 7 === 0 ? 0 : 7 - w % 7); g++)
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1334,35 +1335,35 @@ const CalendarHeader = () => {
     );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: v });
 }, CalendarDaysRange = () => {
-  const { year: e, month: t, value: r, onChange: s, setMonth: n, setYear: o } = useCalendarContext(), i = (l, h) => new Date(l, h + 1, 0).getDate(), u = ((l, h) => new Date(l, h, 1).getDay())(e, t), c = i(e, t), x = t - 1 < 0 ? 11 : t - 1, b = t === 0 ? e - 1 : e, f = i(e, x), w = t === 11 ? 0 : t + 1, y = t === 11 ? e + 1 : e, d = [], v = () => {
+  const { year: e, month: t, value: r, onChange: s, setMonth: n, setYear: o } = useCalendarContext(), i = (c, b) => new Date(c, b + 1, 0).getDate(), u = ((c, b) => new Date(c, b, 1).getDay())(e, t), l = i(e, t), x = t - 1 < 0 ? 11 : t - 1, h = t === 0 ? e - 1 : e, f = i(e, x), p = t === 11 ? 0 : t + 1, y = t === 11 ? e + 1 : e, d = [], v = () => {
     if (!Array.isArray(r)) return [null, null];
-    const [l, h] = r;
-    return !l && !h ? [null, null] : l && h ? l <= h ? [l, h] : [h, l] : [l, h];
-  }, [p, g] = v(), m = (l) => {
-    if (!p || !g) return !1;
-    const h = new Date(e, t, l);
-    return h >= p && h <= g;
-  }, D = (l) => p ? p.getFullYear() === e && p.getMonth() === t && p.getDate() === l : !1, N = (l) => g ? g.getFullYear() === e && g.getMonth() === t && g.getDate() === l : !1;
-  for (let l = 0; l < u; l++) {
-    const h = f - u + l + 1;
+    const [c, b] = r;
+    return !c && !b ? [null, null] : c && b ? c <= b ? [c, b] : [b, c] : [c, b];
+  }, [w, g] = v(), m = (c) => {
+    if (!w || !g) return !1;
+    const b = new Date(e, t, c);
+    return b >= w && b <= g;
+  }, I = (c) => w ? w.getFullYear() === e && w.getMonth() === t && w.getDate() === c : !1, N = (c) => g ? g.getFullYear() === e && g.getMonth() === t && g.getDate() === c : !1;
+  for (let c = 0; c < u; c++) {
+    const b = f - u + c + 1;
     d.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
         {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: h }),
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: b }),
           size: "sm",
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            s?.([null, null]), n(x), o(b);
+            s?.([null, null]), n(x), o(h);
           }
         },
-        "prev-" + l
+        "prev-" + c
       )
     );
   }
-  for (let l = 1; l <= c; l++) {
-    const h = m(l), C = D(l), E = N(l);
+  for (let c = 1; c <= l; c++) {
+    const b = m(c), C = I(c), E = N(c);
     d.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1372,47 +1373,47 @@ const CalendarHeader = () => {
             {
               as: "span",
               fontSize: "sm",
-              color: h || C || E ? "inherit" : "ghost",
+              color: b || C || E ? "inherit" : "ghost",
               className: cn(
-                h && " bg-primary text-white",
+                b && " bg-primary text-white",
                 C && "rounded-l-full bg-primary text-white",
                 E && "rounded-r-full bg-primary text-white"
               ),
-              children: l
+              children: c
             }
           ),
-          variant: C || E || h ? "primary" : "ghost",
+          variant: C || E || b ? "primary" : "ghost",
           size: "sm",
-          "aria-label": `Select ${e}-${t + 1}-${l}`,
+          "aria-label": `Select ${e}-${t + 1}-${c}`,
           "aria-current": C || E ? "date" : void 0,
           onClick: () => {
             if (!Array.isArray(r) || !r[0] || r[0] && r[1])
-              s?.([new Date(e, t, l), null]);
+              s?.([new Date(e, t, c), null]);
             else if (r[0] && !r[1]) {
-              const j = r[0], R = new Date(e, t, l);
+              const j = r[0], R = new Date(e, t, c);
               j.getTime() === R.getTime() ? s?.([j, R]) : s?.(j < R ? [j, R] : [R, j]);
             }
           }
         },
-        l
+        c
       )
     );
   }
-  const S = u + c;
-  for (let l = 0; l < (S % 7 === 0 ? 0 : 7 - S % 7); l++)
+  const S = u + l;
+  for (let c = 0; c < (S % 7 === 0 ? 0 : 7 - S % 7); c++)
     d.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
         {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: l + 1 }),
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: c + 1 }),
           size: "sm",
           "aria-label": "Next month day",
           variant: "ghost",
           onClick: () => {
-            s?.([null, null]), n(w), o(y);
+            s?.([null, null]), n(p), o(y);
           }
         },
-        "next-" + l
+        "next-" + c
       )
     );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: d });
@@ -1427,16 +1428,16 @@ function useCalendar({
   initialYear: s,
   initialMonth: n
 }) {
-  const [o, i] = useState(n), [a, u] = useState(s), [c, x] = useState([
+  const [o, i] = useState(n), [a, u] = useState(s), [l, x] = useState([
     null,
     null
   ]);
-  let b = e;
-  t === "range" && !e && (b = c);
+  let h = e;
+  t === "range" && !e && (h = l);
   const f = useCallback(() => {
     const d = o === 0 ? 11 : o - 1, v = o === 0 ? a - 1 : a;
     i(d), u(v), t === "single" && r?.(new Date(v, d, 1));
-  }, [o, a, t, r]), w = useCallback(() => {
+  }, [o, a, t, r]), p = useCallback(() => {
     const d = o === 11 ? 0 : o + 1, v = o === 11 ? a + 1 : a;
     i(d), u(v), t === "single" && r?.(new Date(v, d, 1));
   }, [o, a, t, r]), y = useCallback(
@@ -1448,12 +1449,12 @@ function useCalendar({
   return {
     year: a,
     month: o,
-    value: b,
+    value: h,
     setMonth: i,
     setYear: u,
     onChange: y,
     handlePrevMonth: f,
-    handleNextMonth: w
+    handleNextMonth: p
   };
 }
 const CalendarRoot = ({
@@ -1767,6 +1768,188 @@ const DescriptionListItem = forwardRef(function e({ children: t, className: r, s
   Term: DescriptionListTerm,
   Details: DescriptionListDetails
 });
+function useImage({ src: e }) {
+  const [t, r] = useState(!1), [s, n] = useState(!1), o = useRef(!1), i = () => {
+    r(!0);
+  }, a = () => {
+    n(!0);
+  };
+  return useEffect(() => {
+    if (!e) return;
+    const u = new Image();
+    return u.src = e, u.onload = () => {
+      o.current || r(!0);
+    }, u.onerror = () => {
+      o.current || n(!0);
+    }, () => {
+      o.current = !0;
+    };
+  }, [e]), {
+    loaded: t,
+    errored: s,
+    handleLoad: i,
+    handleError: a
+  };
+}
+const imageVariants = cva("block object-cover", {
+  variants: {
+    position: {
+      cover: "object-cover",
+      contain: "object-contain",
+      center: "object-center",
+      top: "object-top",
+      bottom: "object-bottom",
+      left: "object-left",
+      right: "object-right",
+      none: ""
+    },
+    size: {
+      sm: "w-16 h-16",
+      md: "w-32 h-32",
+      lg: "w-48 h-48",
+      full: "w-full h-full",
+      auto: ""
+    },
+    shape: {
+      rectangle: "rounded",
+      square: "aspect-square rounded",
+      circle: "rounded-full aspect-square"
+    }
+  },
+  defaultVariants: {
+    position: "cover",
+    size: "auto",
+    shape: "rectangle"
+  }
+}), imageAtomVariants = cva(
+  "flex items-center justify-center bg-neutral-soft text-ghost border border-border",
+  {
+    variants: {
+      shape: {
+        rectangle: "rounded",
+        square: "aspect-square rounded",
+        circle: "rounded-full aspect-square"
+      },
+      size: {
+        sm: "w-16 h-16",
+        md: "w-32 h-32",
+        lg: "w-48 h-48",
+        full: "w-full h-full",
+        auto: "w-full h-full"
+      }
+    },
+    defaultVariants: {
+      shape: "rectangle",
+      size: "auto"
+    }
+  }
+);
+function BaseImageSkeleton({
+  className: e,
+  shape: t,
+  size: r,
+  height: s,
+  width: n
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Skeleton,
+    {
+      className: cn(imageAtomVariants({ shape: t, size: r }), e),
+      style: { height: s, width: n }
+    }
+  );
+}
+function BaseImageFallback({
+  alt: e,
+  width: t,
+  height: r,
+  className: s,
+  style: n,
+  shape: o,
+  size: i
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: imageAtomVariants({ shape: o, size: i, className: s }),
+      style: { width: t, height: r, ...n },
+      "aria-label": e,
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ImageOff,
+          {
+            size: 32,
+            style: { opacity: 0.5, marginRight: 4 },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { opacity: 0.7 }, children: e })
+      ]
+    }
+  );
+}
+const BaseImage = forwardRef(
+  ({
+    src: e,
+    alt: t,
+    onLoad: r,
+    onError: s,
+    width: n,
+    height: o,
+    loading: i = "lazy",
+    position: a = "cover",
+    size: u = "auto",
+    shape: l,
+    className: x,
+    ...h
+  }, f) => {
+    const { loaded: p, errored: y, handleLoad: d, handleError: v } = useImage({
+      src: e
+    }), w = typeof n == "number" ? n : Number(n), g = typeof o == "number" ? o : Number(o);
+    return !p && !y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      BaseImageSkeleton,
+      {
+        shape: l,
+        width: w,
+        height: g
+      }
+    ) : y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      BaseImageFallback,
+      {
+        shape: l,
+        alt: t,
+        width: w,
+        height: g
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        ref: f,
+        src: e,
+        alt: t,
+        width: w,
+        height: g,
+        loading: i,
+        className: cn(
+          imageVariants({
+            position: a,
+            size: u,
+            shape: l
+          }),
+          x
+        ),
+        onLoad: (m) => {
+          d(), r?.(m);
+        },
+        onError: (m) => {
+          v(), s?.(m);
+        },
+        ...h
+      }
+    );
+  }
+), ImageCircle = forwardRef((e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(BaseImage, { ref: t, ...e, shape: "circle" })), ImageSquare = forwardRef((e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(BaseImage, { ref: t, ...e, shape: "square" })), ImageRectangle = forwardRef((e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(BaseImage, { ref: t, ...e, shape: "rectangle" }));
 export {
   Alert as A,
   Badge as B,
@@ -1782,5 +1965,9 @@ export {
   ButtonIcon as f,
   Calendar as g,
   Text as h,
-  Tile as i
+  Tile as i,
+  ImageCircle as j,
+  ImageSquare as k,
+  ImageRectangle as l,
+  BaseImage as m
 };