@dimasbaguspm/versaur 0.0.18 → 0.0.20

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

@@ -1,43 +1,10 @@
 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";
-const iconVariants = cva("inline-flex items-center justify-center", {
-  variants: {
-    size: {
-      xs: "w-3 h-3",
-      sm: "w-4 h-4",
-      md: "w-5 h-5",
-      lg: "w-6 h-6",
-      xl: "w-8 h-8"
-    },
-    color: {
-      primary: "text-primary",
-      secondary: "text-secondary",
-      tertiary: "text-tertiary",
-      ghost: "text-ghost",
-      neutral: "text-neutral",
-      success: "text-success",
-      info: "text-info",
-      warning: "text-warning",
-      danger: "text-danger",
-      inherit: ""
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    color: "primary"
-  }
-}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: n, ...o }, i) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    t,
-    {
-      ref: i,
-      className: iconVariants({ color: r, size: s, className: n }),
-      ...o
-    }
-  );
-}), alertVariants = cva(
+import React__default, { forwardRef, useState, useEffect, useCallback, useRef, createContext, useContext } from "react";
+import { X, ChevronLeft, ChevronRight, ImageOff } from "lucide-react";
+import { T as Text } from "./text-CRsIInRA.js";
+import { S as Skeleton } from "./skeleton-BNZyaRjo.js";
+const alertVariants = cva(
   "relative flex items-center gap-2 rounded-md p-2 text-sm transition-all duration-200",
   {
     variants: {
@@ -180,18 +147,18 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     color: t = "neutral",
     icon: r,
     className: s,
-    children: n,
-    ...o
+    children: o,
+    ...n
   }, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       ref: i,
       role: "alert",
       className: cn(alertVariants({ variant: e, color: t }), s),
-      ...o,
+      ...n,
       children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, { children: r }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: n })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: o })
       ]
     }
   )
@@ -260,15 +227,15 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     className: t,
     color: r = "primary",
     fontSize: s = "base",
-    fontWeight: n = "medium",
-    quiet: o = !1,
+    fontWeight: o = "medium",
+    quiet: n = !1,
     ...i
   }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
       ref: a,
       className: cn(
-        anchorVariants({ color: r, fontSize: s, fontWeight: n, quiet: o }),
+        anchorVariants({ color: r, fontSize: s, fontWeight: o, quiet: n }),
         t
       ),
       ...i,
@@ -319,24 +286,24 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     size: t = "md",
     shape: r = "circle",
     className: s,
-    children: n,
-    ...o
+    children: o,
+    ...n
   }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref: i,
       className: cn(avatarVariants({ variant: e, size: t, shape: r }), s),
-      ...o,
-      children: n
+      ...n,
+      children: o
     }
   )
 ), AvatarImage = forwardRef(
-  ({ src: e, alt: t, className: r, onError: s, ...n }, o) => {
+  ({ src: e, alt: t, className: r, onError: s, ...o }, n) => {
     const [i, a] = useState(!1);
     useEffect(() => {
       a(!1);
     }, [e]);
-    const u = useCallback(
+    const g = useCallback(
       (c) => {
         a(!0), s?.(c);
       },
@@ -345,12 +312,12 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     return i ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        ref: o,
+        ref: n,
         src: e,
         alt: t,
         className: cn(avatarImageVariants(), r),
-        onError: u,
-        ...n
+        onError: g,
+        ...o
       }
     );
   }
@@ -518,13 +485,13 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     shape: t = "square",
     color: r = "primary",
     size: s = "md",
-    iconLeft: n,
-    iconRight: o,
+    iconLeft: o,
+    iconRight: n,
     className: i,
     children: a,
-    ...u
+    ...g
   }, c) => {
-    const f = !(a != null && a !== "") && !!(n || o);
+    const f = !(a != null && a !== "") && !!(o || n);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
@@ -539,16 +506,16 @@ const iconVariants = cva("inline-flex items-center justify-center", {
           }),
           i
         ),
-        ...u,
+        ...g,
         children: f ? (
           // Icon-only mode: display only the icon
-          n || o
+          o || n
         ) : (
           // Normal mode: display icon(s) and text
           /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            n,
+            o,
             a,
-            o
+            n
           ] })
         )
       }
@@ -571,13 +538,13 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
   }
 }), BrandLogo = forwardRef(
   ({ shape: e = "square", size: t, ...r }, s) => {
-    const o = {
+    const n = {
       square: SvgSpenicleSquare,
       rounded: SvgSpenicleRounded,
       circle: SvgSpenicleCircle
     }[e] || SvgSpenicleSquare;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      o,
+      n,
       {
         ref: s,
         ...r,
@@ -586,10 +553,10 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
     );
   }
 ), Brand = forwardRef(
-  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "span",
     {
-      ref: n,
+      ref: o,
       className: cn("inline-flex items-center gap-2"),
       ...s,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrandLogo, { shape: r, size: t, "aria-hidden": "true" })
@@ -650,20 +617,20 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
     className: t,
     variant: r = "primary",
     size: s = "md",
-    disabled: n = !1,
-    type: o = "button",
+    disabled: o = !1,
+    type: n = "button",
     children: i,
     ...a
-  }, u) {
+  }, g) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        ref: u,
-        type: o,
+        ref: g,
+        type: n,
         className: cn(buttonVariants({ variant: r, size: s }), t),
-        disabled: n,
-        "aria-disabled": n,
-        inert: n ? !0 : void 0,
+        disabled: o,
+        "aria-disabled": o,
+        inert: o ? !0 : void 0,
         ...a,
         children: i
       }
@@ -737,21 +704,21 @@ 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 r = useRef(null), [s, o] = useState({}), [n, 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 = "";
+    let f = {}, p = "";
     b ? (f = {
       position: "fixed",
       bottom: t,
       zIndex: 50,
       transform: `translateY(${c.scrollTop}px)`
-    }, w = `fixed bottom-4 ${e}-4`) : (f = {
+    }, 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`), o(f), i(p);
   }, [e, t]);
   return useEffect(() => {
     a();
@@ -766,31 +733,31 @@ function useFloatingPosition(e, t = "1rem") {
       r.current = c, c && a();
     },
     [a]
-  ), s, o];
+  ), s, n];
 }
 const ButtonFloat = forwardRef(
   function({
     className: t,
     variant: r = "primary",
     size: s = "md",
-    side: n = "right",
-    offset: o = "1rem",
+    side: o = "right",
+    offset: n = "1rem",
     ...i
   }, a) {
-    const [u, c, x] = useFloatingPosition(
-      n,
-      o
+    const [g, c, m] = useFloatingPosition(
+      o,
+      n
     ), [b, f] = useState(!1);
     return useEffect(() => {
       f(!0);
-    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: g, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
         ref: a,
         type: i.type || "button",
         className: cn(
           buttonFloatVariants({ variant: r, size: s }),
-          x,
+          m,
           b && "animate-fab-in",
           t
         ),
@@ -893,16 +860,51 @@ const buttonIconVariants = cva(
       shape: "rounded"
     }
   }
-), ButtonIcon = React__default.forwardRef(
+), iconVariants = cva("inline-flex items-center justify-center", {
+  variants: {
+    size: {
+      xs: "w-3 h-3",
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-6 h-6",
+      xl: "w-8 h-8"
+    },
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      tertiary: "text-tertiary",
+      ghost: "text-ghost",
+      neutral: "text-neutral",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      danger: "text-danger",
+      inherit: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: o, ...n }, i) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    t,
+    {
+      ref: i,
+      className: iconVariants({ color: r, size: s, className: o }),
+      ...n
+    }
+  );
+}), ButtonIcon = React__default.forwardRef(
   function({
     className: t,
     variant: r = "primary",
     size: s = "md",
-    shape: n = "rounded",
-    disabled: o = !1,
+    shape: o = "rounded",
+    disabled: n = !1,
     as: i,
     "aria-label": a,
-    ...u
+    ...g
   }, c) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
@@ -913,15 +915,15 @@ const buttonIconVariants = cva(
           buttonIconVariants({
             variant: r,
             size: s,
-            shape: n
+            shape: o
           }),
           t
         ),
-        disabled: o,
-        "aria-disabled": o,
+        disabled: n,
+        "aria-disabled": n,
         "aria-label": a,
-        inert: o ? !0 : void 0,
-        ...u,
+        inert: n ? !0 : void 0,
+        ...g,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Icon,
           {
@@ -1049,9 +1051,9 @@ const BUTTONS = [
     onChange: t,
     disabled: r,
     className: s,
-    "aria-label": n
-  }, o) => {
-    const { input: i, inputRef: a, handleButton: u, handleInput: c } = useCalculator({
+    "aria-label": o
+  }, n) => {
+    const { input: i, inputRef: a, handleButton: g, handleInput: c } = useCalculator({
       initialValue: e,
       disabled: r,
       onChange: t
@@ -1059,9 +1061,9 @@ const BUTTONS = [
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        ref: o,
+        ref: n,
         className: cn(calculatorRootVariants({ disabled: r }), s),
-        "aria-label": n || "Calculator",
+        "aria-label": o || "Calculator",
         role: "region",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1076,14 +1078,14 @@ const BUTTONS = [
               "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((m, b) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: m.map((f) => f === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ButtonIcon,
             {
               as: X,
               variant: "danger-ghost",
               "aria-label": "Backspace",
               size: "md",
-              onClick: () => u("⌫"),
+              onClick: () => g("⌫"),
               disabled: r
             },
             "backspace"
@@ -1091,7 +1093,7 @@ const BUTTONS = [
             CalculatorButton,
             {
               variant: f === "=" ? "action" : f === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(f) ? "operator" : "default",
-              onClick: () => u(f),
+              onClick: () => g(f),
               disabled: r,
               "aria-label": f,
               children: f
@@ -1104,128 +1106,7 @@ const BUTTONS = [
   }
 );
 Calculator.displayName = "Calculator";
-const textVariants = cva("", {
-  variants: {
-    color: {
-      primary: "text-primary",
-      secondary: "text-secondary",
-      tertiary: "text-tertiary",
-      ghost: "text-ghost",
-      neutral: "text-ghost",
-      success: "text-success",
-      info: "text-info",
-      warning: "text-warning",
-      danger: "text-danger",
-      inherit: "",
-      gray: "text-gray-500",
-      black: "text-black",
-      white: "text-white"
-    },
-    hasUnderline: {
-      true: "underline",
-      false: ""
-    },
-    isCapitalize: {
-      true: "capitalize",
-      false: ""
-    },
-    align: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right",
-      justify: "text-justify"
-    },
-    italic: {
-      true: "italic",
-      false: ""
-    },
-    clamp: {
-      1: "line-clamp-1",
-      2: "line-clamp-2",
-      3: "line-clamp-3",
-      4: "line-clamp-4",
-      5: "line-clamp-5",
-      none: ""
-    },
-    ellipsis: {
-      true: "truncate",
-      false: ""
-    },
-    as: {
-      h1: "font-bold text-4xl leading-loose",
-      h2: "font-semibold text-3xl leading-relaxed",
-      h3: "font-medium text-2xl leading-relaxed",
-      h4: "font-bold text-xl leading-normal",
-      h5: "font-semibold text-lg leading-normal",
-      h6: "font-medium text-base leading-normal",
-      p: "font-normal text-base leading-normal",
-      span: "font-normal text-base leading-normal",
-      label: "font-normal text-xs leading-normal"
-    }
-  },
-  defaultVariants: {
-    color: "neutral",
-    hasUnderline: !1,
-    isCapitalize: !1,
-    align: "left",
-    italic: !1,
-    clamp: "none",
-    ellipsis: !1,
-    as: "span"
-  }
-}), Text = forwardRef(
-  ({
-    as: e = "span",
-    color: t = "ghost",
-    hasUnderline: r = !1,
-    isCapitalize: s = !1,
-    align: n = "left",
-    italic: o = !1,
-    clamp: i = "none",
-    ellipsis: a = !1,
-    fontSize: u,
-    fontWeight: c,
-    className: x,
-    children: b,
-    ...f
-  }, w) => {
-    const d = [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
-      "p",
-      "span",
-      "label"
-    ].includes(e) ? e : "span", v = u ? `text-${u}` : "", p = c ? `font-${c}` : "";
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      e,
-      {
-        ref: w,
-        className: cn(
-          textVariants({
-            color: t,
-            hasUnderline: r,
-            isCapitalize: s,
-            align: n,
-            italic: o,
-            clamp: i,
-            ellipsis: a,
-            // @ts-expect-error - `as` is not a valid variant
-            as: d
-          }),
-          v,
-          p,
-          x
-        ),
-        ...f,
-        children: b
-      }
-    );
-  }
-), CalendarContext = createContext(null);
+const CalendarContext = createContext(null);
 function useCalendarContext() {
   const e = useContext(CalendarContext);
   if (!e)
@@ -1268,27 +1149,27 @@ 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: o, setMonth: n, setYear: i } = e, a = (u, x) => new Date(u, x + 1, 0).getDate(), c = ((u, x) => new Date(u, x, 1).getDay())(t, r), m = a(t, r), b = r - 1 < 0 ? 11 : r - 1, f = r === 0 ? t - 1 : t, p = a(t, b), y = r === 11 ? 0 : r + 1, d = r === 11 ? t + 1 : t, v = [];
+  for (let u = 0; u < c; u++) {
+    const x = p - c + u + 1;
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
         {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: m }),
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: x }),
           size: "sm",
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            n?.(new Date(f, b, m)), o(b), i(f);
+            o?.(new Date(f, b, x)), n(b), i(f);
           }
         },
-        "prev-" + g
+        "prev-" + u
       )
     );
   }
-  for (let g = 1; g <= x; g++) {
-    const m = s instanceof Date && s.getFullYear() === t && s.getMonth() === r && s.getDate() === g;
+  for (let u = 1; u <= m; u++) {
+    const x = s instanceof Date && s.getFullYear() === t && s.getMonth() === r && s.getDate() === u;
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1298,53 +1179,53 @@ const CalendarHeader = () => {
             {
               as: "span",
               fontSize: "sm",
-              color: m ? "inherit" : "ghost",
-              className: m ? "bg-primary text-white rounded-full" : "",
-              children: g
+              color: x ? "inherit" : "ghost",
+              className: x ? "bg-primary text-white rounded-full" : "",
+              children: u
             }
           ),
-          variant: m ? "primary" : "ghost",
+          variant: x ? "primary" : "ghost",
           size: "sm",
-          "aria-label": `Select ${t}-${r + 1}-${g}`,
-          "aria-current": m ? "date" : void 0,
+          "aria-label": `Select ${t}-${r + 1}-${u}`,
+          "aria-current": x ? "date" : void 0,
           onClick: () => {
-            n?.(new Date(t, r, g));
+            o?.(new Date(t, r, u));
           }
         },
-        g
+        u
       )
     );
   }
-  const p = c + x;
-  for (let g = 0; g < (p % 7 === 0 ? 0 : 7 - p % 7); g++)
+  const w = c + m;
+  for (let u = 0; u < (w % 7 === 0 ? 0 : 7 - w % 7); u++)
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
         {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: g + 1 }),
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: u + 1 }),
           size: "sm",
           "aria-label": "Next month day",
           variant: "ghost",
           onClick: () => {
-            n?.(new Date(d, y, g + 1)), o(y), i(d);
+            o?.(new Date(d, y, u + 1)), n(y), i(d);
           }
         },
-        "next-" + g
+        "next-" + u
       )
     );
   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: o, setYear: n } = useCalendarContext(), i = (l, h) => new Date(l, h + 1, 0).getDate(), g = ((l, h) => new Date(l, h, 1).getDay())(e, t), c = i(e, t), m = t - 1 < 0 ? 11 : t - 1, b = t === 0 ? e - 1 : e, f = i(e, m), 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;
+  }, [w, u] = v(), x = (l) => {
+    if (!w || !u) 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;
+    return h >= w && h <= u;
+  }, S = (l) => w ? w.getFullYear() === e && w.getMonth() === t && w.getDate() === l : !1, N = (l) => u ? u.getFullYear() === e && u.getMonth() === t && u.getDate() === l : !1;
+  for (let l = 0; l < g; l++) {
+    const h = f - g + l + 1;
     d.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1354,7 +1235,7 @@ const CalendarHeader = () => {
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            s?.([null, null]), n(x), o(b);
+            s?.([null, null]), o(m), n(b);
           }
         },
         "prev-" + l
@@ -1362,7 +1243,7 @@ const CalendarHeader = () => {
     );
   }
   for (let l = 1; l <= c; l++) {
-    const h = m(l), C = D(l), E = N(l);
+    const h = x(l), E = S(l), C = N(l);
     d.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1372,19 +1253,19 @@ const CalendarHeader = () => {
             {
               as: "span",
               fontSize: "sm",
-              color: h || C || E ? "inherit" : "ghost",
+              color: h || E || C ? "inherit" : "ghost",
               className: cn(
                 h && " bg-primary text-white",
-                C && "rounded-l-full bg-primary text-white",
-                E && "rounded-r-full bg-primary text-white"
+                E && "rounded-l-full bg-primary text-white",
+                C && "rounded-r-full bg-primary text-white"
               ),
               children: l
             }
           ),
-          variant: C || E || h ? "primary" : "ghost",
+          variant: E || C || h ? "primary" : "ghost",
           size: "sm",
           "aria-label": `Select ${e}-${t + 1}-${l}`,
-          "aria-current": C || E ? "date" : void 0,
+          "aria-current": E || C ? "date" : void 0,
           onClick: () => {
             if (!Array.isArray(r) || !r[0] || r[0] && r[1])
               s?.([new Date(e, t, l), null]);
@@ -1398,8 +1279,8 @@ const CalendarHeader = () => {
       )
     );
   }
-  const S = u + c;
-  for (let l = 0; l < (S % 7 === 0 ? 0 : 7 - S % 7); l++)
+  const I = g + c;
+  for (let l = 0; l < (I % 7 === 0 ? 0 : 7 - I % 7); l++)
     d.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1409,7 +1290,7 @@ const CalendarHeader = () => {
           "aria-label": "Next month day",
           variant: "ghost",
           onClick: () => {
-            s?.([null, null]), n(w), o(y);
+            s?.([null, null]), o(p), n(y);
           }
         },
         "next-" + l
@@ -1425,35 +1306,35 @@ function useCalendar({
   type: t,
   onChange: r,
   initialYear: s,
-  initialMonth: n
+  initialMonth: o
 }) {
-  const [o, i] = useState(n), [a, u] = useState(s), [c, x] = useState([
+  const [n, i] = useState(o), [a, g] = useState(s), [c, m] = useState([
     null,
     null
   ]);
   let b = e;
   t === "range" && !e && (b = c);
   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(() => {
-    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(
+    const d = n === 0 ? 11 : n - 1, v = n === 0 ? a - 1 : a;
+    i(d), g(v), t === "single" && r?.(new Date(v, d, 1));
+  }, [n, a, t, r]), p = useCallback(() => {
+    const d = n === 11 ? 0 : n + 1, v = n === 11 ? a + 1 : a;
+    i(d), g(v), t === "single" && r?.(new Date(v, d, 1));
+  }, [n, a, t, r]), y = useCallback(
     (d) => {
-      t === "single" ? r?.(d) : t === "range" && (x(d), r?.(d));
+      t === "single" ? r?.(d) : t === "range" && (m(d), r?.(d));
     },
     [t, r]
   );
   return {
     year: a,
-    month: o,
+    month: n,
     value: b,
     setMonth: i,
-    setYear: u,
+    setYear: g,
     onChange: y,
     handlePrevMonth: f,
-    handleNextMonth: w
+    handleNextMonth: p
   };
 }
 const CalendarRoot = ({
@@ -1461,14 +1342,14 @@ const CalendarRoot = ({
   onChange: t,
   className: r,
   type: s = "single",
-  ...n
+  ...o
 }) => {
-  const o = /* @__PURE__ */ new Date(), i = useCalendar({
+  const n = /* @__PURE__ */ new Date(), i = useCalendar({
     value: e,
     onChange: t,
     type: s,
-    initialYear: o.getFullYear(),
-    initialMonth: o.getMonth()
+    initialYear: n.getFullYear(),
+    initialMonth: n.getMonth()
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     CalendarContext.Provider,
@@ -1482,7 +1363,7 @@ const CalendarRoot = ({
         setYear: i.setYear,
         onChange: i.onChange
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", r), ...n, children: [
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", r), ...o, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarHeader, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarWeekdays, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, {})
@@ -1560,7 +1441,7 @@ const getTableColumnClass = (e) => {
   }
 }, TableHeader = forwardRef(
   ({ children: e, className: t, ...r }, s) => {
-    const { maxColumns: n } = useTableContext();
+    const { columns: o } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -1572,7 +1453,7 @@ const getTableColumnClass = (e) => {
           "div",
           {
             role: "row",
-            className: cn("grid gap-4", getTableColumnClass(n)),
+            className: cn("grid gap-4", getTableColumnClass(o)),
             children: e
           }
         )
@@ -1583,7 +1464,7 @@ const getTableColumnClass = (e) => {
   ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "rowgroup", ref: s, className: cn(t), ...r, children: e })
 ), TableFooter = forwardRef(
   ({ children: e, className: t, ...r }, s) => {
-    const { maxColumns: n } = useTableContext();
+    const { columns: o } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -1595,7 +1476,7 @@ const getTableColumnClass = (e) => {
           "div",
           {
             role: "row",
-            className: cn("grid gap-4", getTableColumnClass(n)),
+            className: cn("grid gap-4", getTableColumnClass(o)),
             children: e
           }
         )
@@ -1604,14 +1485,14 @@ const getTableColumnClass = (e) => {
   }
 ), TableRow = forwardRef(
   ({ children: e, className: t, ...r }, s) => {
-    const { maxColumns: n } = useTableContext();
+    const { columns: o } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         role: "row",
         className: cn(
           "grid gap-4",
-          getTableColumnClass(n),
+          getTableColumnClass(o),
           "border-b border-border last:border-0",
           t
         ),
@@ -1622,10 +1503,10 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: s, className: n, ...o }, i) => {
+  ({ as: e = "td", span: t, align: r = "left", children: s, className: o, ...n }, i) => {
     const a = e === "th" ? "columnheader" : "cell";
-    let u = "text-left";
-    return r === "center" ? u = "text-center" : r === "right" && (u = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
+    let g = "text-left";
+    return r === "center" ? g = "text-center" : r === "right" && (g = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         ref: i,
@@ -1634,40 +1515,66 @@ const getTableColumnClass = (e) => {
           "px-4 py-2",
           "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
           getRowSpanClass(t),
-          u,
-          n
+          g,
+          "truncate overflow-hidden whitespace-nowrap",
+          o
         ),
-        ...o,
+        ...n,
         children: s
       }
     );
   }
+), TableRowItem = forwardRef(
+  (e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    TableColumn,
+    {
+      ...e,
+      as: "td",
+      ref: t,
+      className: cn(
+        "truncate overflow-hidden whitespace-nowrap",
+        e.className
+      )
+    }
+  )
+), TableHeaderItem = forwardRef(
+  (e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    TableColumn,
+    {
+      ...e,
+      as: "th",
+      ref: t,
+      className: cn(
+        "truncate overflow-hidden whitespace-nowrap",
+        e.className
+      )
+    }
+  )
 ), TableRoot = forwardRef(
-  ({ children: e, className: t, maxColumns: r = 12, ...s }, n) => {
-    const o = useMemo(
-      () => ({ maxColumns: r }),
-      [r]
-    );
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: o, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        ref: n,
-        role: "table",
-        className: cn(
-          "w-full overflow-x-auto rounded-lg border border-border",
-          t
-        ),
-        ...s,
-        children: e
-      }
-    ) });
-  }
+  ({ children: e, className: t, columns: r = 12, ...s }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: { columns: r }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: o,
+      role: "table",
+      className: cn(
+        // Versaur design system: border, background, shadow, rounded, spacing
+        "w-full overflow-x-auto border border-border bg-background rounded-lg ",
+        "text-foreground",
+        "sm:rounded-xl",
+        "transition-colors",
+        t
+      ),
+      ...s,
+      children: e
+    }
+  ) })
 ), Table = Object.assign(TableRoot, {
   Header: TableHeader,
+  HeaderItem: TableHeaderItem,
   Body: TableBody,
   Footer: TableFooter,
   Row: TableRow,
-  Column: TableColumn
+  RowItem: TableRowItem
 }), tileVariants = cva(
   // Base classes
   "block transition-colors duration-200",
@@ -1704,12 +1611,12 @@ const getTableColumnClass = (e) => {
     }
   }
 ), Tile = forwardRef(
-  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...n }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...o }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: o,
+      ref: n,
       className: cn(tileVariants({ variant: e, size: t, shape: r }), s),
-      ...n
+      ...o
     }
   )
 );
@@ -1743,19 +1650,19 @@ function getColSpan(e = 4) {
       return "col-span-4";
   }
 }
-const DescriptionListItem = forwardRef(function e({ children: t, className: r, span: s = 4, ...n }, o) {
+const DescriptionListItem = forwardRef(function e({ children: t, className: r, span: s = 4, ...o }, n) {
   const i = getColSpan(s);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: o, className: cn(i, r), ...n, children: t });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: n, className: cn(i, r), ...o, children: t });
 }), DescriptionListTerm = forwardRef(function e({ children: t, ...r }, s) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("dt", { ref: s, ...r, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", fontWeight: "medium", color: "gray", children: t }) });
-}), DescriptionListDetails = forwardRef(function e({ children: t, color: r = "black", ...s }, n) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { ref: n, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "base", fontWeight: "medium", color: r, children: t }) });
+}), DescriptionListDetails = forwardRef(function e({ children: t, color: r = "black", ...s }, o) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { ref: o, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "base", fontWeight: "medium", color: r, children: t }) });
 }), DescriptionListRoot = forwardRef(
-  function e({ children: t, className: r, ...s }, n) {
+  function e({ children: t, className: r, ...s }, o) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "dl",
       {
-        ref: n,
+        ref: o,
         className: cn("grid grid-cols-12 gap-y-4", r),
         ...s,
         children: t
@@ -1767,6 +1674,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, o] = useState(!1), n = useRef(!1), i = () => {
+    r(!0);
+  }, a = () => {
+    o(!0);
+  };
+  return useEffect(() => {
+    if (!e) return;
+    const g = new Image();
+    return g.src = e, g.onload = () => {
+      n.current || r(!0);
+    }, g.onerror = () => {
+      n.current || o(!0);
+    }, () => {
+      n.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: o
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Skeleton,
+    {
+      className: cn(imageAtomVariants({ shape: t, size: r }), e),
+      style: { height: s, width: o }
+    }
+  );
+}
+function BaseImageFallback({
+  alt: e,
+  width: t,
+  height: r,
+  className: s,
+  style: o,
+  shape: n,
+  size: i
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: imageAtomVariants({ shape: n, size: i, className: s }),
+      style: { width: t, height: r, ...o },
+      "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: o,
+    height: n,
+    loading: i = "lazy",
+    position: a = "cover",
+    size: g = "auto",
+    shape: c,
+    className: m,
+    ...b
+  }, f) => {
+    const { loaded: p, errored: y, handleLoad: d, handleError: v } = useImage({
+      src: e
+    }), w = typeof o == "number" ? o : Number(o), u = typeof n == "number" ? n : Number(n);
+    return !p && !y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      BaseImageSkeleton,
+      {
+        shape: c,
+        width: w,
+        height: u
+      }
+    ) : y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      BaseImageFallback,
+      {
+        shape: c,
+        alt: t,
+        width: w,
+        height: u
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        ref: f,
+        src: e,
+        alt: t,
+        width: w,
+        height: u,
+        loading: i,
+        className: cn(
+          imageVariants({
+            position: a,
+            size: g,
+            shape: c
+          }),
+          m
+        ),
+        onLoad: (x) => {
+          d(), r?.(x);
+        },
+        onError: (x) => {
+          v(), s?.(x);
+        },
+        ...b
+      }
+    );
+  }
+), 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,
@@ -1781,6 +1870,9 @@ export {
   ButtonFloat as e,
   ButtonIcon as f,
   Calendar as g,
-  Text as h,
-  Tile as i
+  Tile as h,
+  ImageCircle as i,
+  ImageSquare as j,
+  ImageRectangle as k,
+  BaseImage as l
 };