@dimasbaguspm/versaur 0.0.30 → 0.0.32

package/dist/js/{image-rectangle-BMEGIW-6.js → image-rectangle-BS6j3xEC.js}

@@ -1,7 +1,7 @@
 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 } from "react";
-import { X, ChevronLeft, ChevronRight, XIcon, ImageOff } from "lucide-react";
+import React__default, { forwardRef, useState, useEffect, useCallback, useRef, useId, cloneElement, createContext, useContext } from "react";
+import { EllipsisVerticalIcon, X, XIcon, ImageOff } from "lucide-react";
 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",
@@ -147,14 +147,14 @@ const alertVariants = cva(
     icon: r,
     className: s,
     children: i,
-    ...n
-  }, o) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ...o
+  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      ref: o,
+      ref: a,
       role: "alert",
       className: cn(alertVariants({ variant: e, color: t }), s),
-      ...n,
+      ...o,
       children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, { children: r }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: i })
@@ -227,17 +227,17 @@ const alertVariants = cva(
     color: r = "primary",
     fontSize: s = "base",
     fontWeight: i = "medium",
-    quiet: n = !1,
-    ...o
-  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    quiet: o = !1,
+    ...a
+  }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
-      ref: a,
+      ref: n,
       className: cn(
-        anchorVariants({ color: r, fontSize: s, fontWeight: i, quiet: n }),
+        anchorVariants({ color: r, fontSize: s, fontWeight: i, quiet: o }),
         t
       ),
-      ...o,
+      ...a,
       children: e
     }
   )
@@ -317,16 +317,16 @@ const alertVariants = cva(
     hasUnderline: r = !1,
     isCapitalize: s = !1,
     align: i = "left",
-    italic: n = !1,
-    clamp: o = "none",
-    ellipsis: a = !1,
+    italic: o = !1,
+    clamp: a = "none",
+    ellipsis: n = !1,
     fontSize: l,
     fontWeight: c,
-    className: h,
-    children: b,
-    ...d
-  }, p) => {
-    const f = [
+    className: g,
+    children: d,
+    ...u
+  }, f) => {
+    const x = [
       "h1",
       "h2",
       "h3",
@@ -336,35 +336,35 @@ const alertVariants = cva(
       "p",
       "span",
       "label"
-    ].includes(e) ? e : "span", v = l ? `text-${l}` : "", w = c ? `font-${c}` : "";
+    ].includes(e) ? e : "span", m = l ? `text-${l}` : "", h = c ? `font-${c}` : "";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       e,
       {
-        ref: p,
+        ref: f,
         className: cn(
           textVariants({
             color: t,
             hasUnderline: r,
             isCapitalize: s,
             align: i,
-            italic: n,
-            clamp: o,
-            ellipsis: a,
+            italic: o,
+            clamp: a,
+            ellipsis: n,
             // @ts-expect-error - `as` is not a valid variant
-            as: f
+            as: x
           }),
-          v,
-          w,
-          h
+          m,
+          h,
+          g
         ),
-        ...d,
-        children: b
+        ...u,
+        children: d
       }
     );
   }
 ), Attribute = forwardRef(
-  function({ title: t, children: r, className: s, ...i }, n) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: n, className: cn("space-y-1", s), ...i, children: [
+  function({ title: t, children: r, className: s, ...i }, o) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: o, className: cn("space-y-1", s), ...i, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Text,
         {
@@ -380,7 +380,7 @@ const alertVariants = cva(
     ] });
   }
 );
-function getColSpan$1(e = 1) {
+function getColSpan(e = 1) {
   switch (e) {
     case 1:
       return "col-span-1";
@@ -440,17 +440,17 @@ function getGridCols(e = 4) {
       return "grid-cols-4";
   }
 }
-const AttributeListItem = forwardRef(function({ children: t, className: r, span: s = 1, title: i, ...n }, o) {
-  const a = getColSpan$1(s);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: o, className: cn(a, r), ...n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: i, children: t }) });
+const AttributeListItem = forwardRef(function({ children: t, className: r, span: s = 1, title: i, ...o }, a) {
+  const n = getColSpan(s);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: a, className: cn(n, r), ...o, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: i, children: t }) });
 }), AttributeListRoot = forwardRef(
-  function({ children: t, className: r, columns: s = 4, ...i }, n) {
-    const o = getGridCols(s);
+  function({ children: t, className: r, columns: s = 4, ...i }, o) {
+    const a = getGridCols(s);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "ul",
       {
-        ref: n,
-        className: cn("grid gap-4", o, r),
+        ref: o,
+        className: cn("grid gap-4", a, r),
         ...i,
         children: t
       }
@@ -477,10 +477,10 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
       },
       size: {
         xs: "h-6 w-6 text-xs",
-        sm: "h-8 w-8 text-xs",
-        md: "h-10 w-10 text-sm",
-        lg: "h-12 w-12 text-base",
-        xl: "h-16 w-16 text-xl"
+        sm: "h-7 w-7 text-xs",
+        md: "h-9 w-9 text-sm",
+        lg: "h-10 w-10 text-base",
+        xl: "h-12 w-12 text-xl"
       },
       shape: {
         circle: "rounded-full",
@@ -503,32 +503,32 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     shape: r = "circle",
     className: s,
     children: i,
-    ...n
-  }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ...o
+  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: o,
+      ref: a,
       className: cn(avatarVariants({ variant: e, size: t, shape: r }), s),
-      ...n,
+      ...o,
       children: i
     }
   )
 ), AvatarImage = forwardRef(
-  ({ src: e, alt: t, className: r, onError: s, ...i }, n) => {
-    const [o, a] = useState(!1);
+  ({ src: e, alt: t, className: r, onError: s, ...i }, o) => {
+    const [a, n] = useState(!1);
     useEffect(() => {
-      a(!1);
+      n(!1);
     }, [e]);
     const l = useCallback(
       (c) => {
-        a(!0), s?.(c);
+        n(!0), s?.(c);
       },
       [s]
     );
-    return o ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return a ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        ref: n,
+        ref: o,
         src: e,
         alt: t,
         className: cn(avatarImageVariants(), r),
@@ -702,12 +702,12 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     color: r = "primary",
     size: s = "md",
     iconLeft: i,
-    iconRight: n,
-    className: o,
-    children: a,
+    iconRight: o,
+    className: a,
+    children: n,
     ...l
   }, c) => {
-    const d = !(a != null && a !== "") && !!(i || n);
+    const u = !(n != null && n !== "") && !!(i || o);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
@@ -718,20 +718,20 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
             color: r,
             shape: t,
             size: s,
-            iconOnly: d
+            iconOnly: u
           }),
-          o
+          a
         ),
         ...l,
-        children: d ? (
+        children: u ? (
           // Icon-only mode: display only the icon
-          i || n
+          i || o
         ) : (
           // Normal mode: display icon(s) and text
           /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             i,
-            a,
-            n
+            n,
+            o
           ] })
         )
       }
@@ -741,8 +741,8 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
   variants: {
     size: {
       xs: "h-6 w-6",
-      sm: "h-6 w-6",
-      md: "h-8 w-8",
+      sm: "h-7 w-7",
+      md: "h-9 w-9",
       lg: "h-10 w-10",
       xl: "h-12 w-12"
     }
@@ -752,13 +752,13 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
   }
 }), BrandLogo = forwardRef(
   ({ shape: e = "square", size: t, ...r }, s) => {
-    const n = {
+    const o = {
       square: SvgSpenicleSquare,
       rounded: SvgSpenicleRounded,
       circle: SvgSpenicleCircle
     }[e] || SvgSpenicleSquare;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      n,
+      o,
       {
         ref: s,
         ...r,
@@ -832,155 +832,109 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     variant: r = "primary",
     size: s = "md",
     disabled: i = !1,
-    type: n = "button",
-    children: o,
-    ...a
+    type: o = "button",
+    children: a,
+    ...n
   }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
         ref: l,
-        type: n,
+        type: o,
         className: cn(buttonVariants({ variant: r, size: s }), t),
         disabled: i,
         "aria-disabled": i,
         inert: i ? !0 : void 0,
-        ...a,
-        children: o
+        ...n,
+        children: a
       }
     );
   }
-), buttonFloatVariants = cva(
-  [
-    "inline-flex items-center justify-center gap-2",
-    "rounded-lg",
-    "font-medium",
-    "transition-all",
-    "duration-200",
-    "focus-visible:outline-none",
-    "focus-visible:ring-2",
-    "focus-visible:ring-offset-2",
-    "disabled:opacity-50",
-    "disabled:pointer-events-none",
-    "select-none",
-    "shadow-lg",
-    "transition-transform",
-    "transition-shadow",
-    "will-change-transform,opacity,box-shadow",
-    "hover:scale-105",
-    "active:scale-95",
-    "focus-visible:shadow-xl",
-    "hover:shadow-xl",
-    "active:shadow-md"
-  ].join(" "),
+), menuVariants = cva(
+  "absolute z-70 min-w-40 bg-background rounded-lg border border-border transition-all duration-200 ease-out will-change-transform",
   {
     variants: {
-      variant: {
-        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
-        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white shadow-sm",
-        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
-        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
-        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
-        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
-        "neutral-outline": "border border-border text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-light focus-visible:ring-offset-white transition-all",
-        "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
-        "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary/20 focus-visible:ring-tertiary focus-visible:ring-offset-white",
-        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/50 focus-visible:ring-foreground focus-visible:ring-offset-white",
-        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
-        "success-ghost": "text-success bg-white hover:bg-success/20 focus-visible:ring-success-light focus-visible:ring-offset-white",
-        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
-        "info-ghost": "text-info bg-white hover:bg-info/20 focus-visible:ring-info-light focus-visible:ring-offset-white",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
-        "warning-ghost": "text-warning bg-white hover:bg-warning/20 focus-visible:ring-warning-light focus-visible:ring-offset-white",
-        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
-        "danger-ghost": "text-danger bg-white hover:bg-danger/20 focus-visible:ring-danger-light focus-visible:ring-offset-white",
-        outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
-        destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
-      },
       size: {
-        sm: "h-12 w-12 min-w-12 min-h-12 text-base",
-        md: "h-14 w-14 min-w-14 min-h-14 text-lg",
-        lg: "h-16 w-16 min-w-16 min-h-16 text-xl"
+        sm: "py-1.5 px-1",
+        md: "py-2 px-1"
+      },
+      open: {
+        true: "opacity-100 translate-y-1",
+        false: "opacity-0 pointer-events-none translate-y-3"
       }
     },
     defaultVariants: {
-      variant: "primary",
-      size: "md"
+      size: "md",
+      open: !1
     }
   }
 );
-function useFloatingPosition(e, t = "1rem") {
-  const r = useRef(null), [s, i] = useState({}), [n, o] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
-    const c = r.current;
-    if (!c) return;
-    const b = c.getBoundingClientRect().height > window.innerHeight;
-    let d = {}, p = "";
-    b ? (d = {
-      position: "fixed",
-      bottom: t,
-      zIndex: 50,
-      transform: `translateY(${c.scrollTop}px)`
-    }, p = `fixed bottom-4 ${e}-4`) : (d = {
-      position: "fixed",
-      bottom: t,
-      zIndex: 50
-    }, p = `fixed bottom-4 ${e}-4`), i(d), o(p);
-  }, [e, t]);
+function useMenuOutsideClick(e, t, r, s) {
+  useEffect(() => {
+    if (!e) return;
+    function i(o) {
+      !t.current?.contains(o.target) && !r.current?.contains(o.target) && s();
+    }
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [e, s, t, r]);
+}
+function useEscapeClose(e, t, r) {
+  const s = useRef(null);
   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);
+    s.current && s.current.focus();
+  }, []), useEffect(() => {
+    const i = (o) => {
+      o.key === "Escape" && e && s.current && s.current.contains(document.activeElement) && !r && t();
     };
-  }, [a]), useEffect(() => {
-    r.current && a();
-  }, [e, t, a]), [useCallback(
-    (c) => {
-      r.current = c, c && a();
-    },
-    [a]
-  ), s, n];
+    return e && (document.addEventListener("keydown", i), document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", i), document.body.style.overflow = "unset";
+    };
+  }, [e, t, r, s]), s;
 }
-const ButtonFloat = forwardRef(
-  function({
-    className: t,
-    variant: r = "primary",
-    size: s = "md",
-    side: i = "right",
-    offset: n = "1rem",
-    ...o
-  }, a) {
-    const [l, c, h] = useFloatingPosition(
-      i,
-      n
-    ), [b, d] = useState(!1);
-    return useEffect(() => {
-      d(!0);
-    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: l, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
+const MenuContent = forwardRef(
+  ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: t, className: "flex flex-col gap-1", children: e })
+), MenuItem = forwardRef(
+  ({ children: e, disabled: t, ...r }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: s, ...r, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Button,
+    {
+      variant: "ghost",
+      className: cn("block text-left w-full"),
+      disabled: t,
+      children: e
+    }
+  ) })
+), MenuRoot = ({
+  isOpen: e,
+  onOutsideClick: t,
+  size: r = "md",
+  content: s,
+  children: i
+}) => {
+  const o = useRef(null), a = useRef(null), n = useId();
+  return useMenuOutsideClick(e, a, o, t), useEscapeClose(e, t), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-fit", children: [
+    cloneElement(i, {
+      // @ts-expect-error: ref is valid for button or forwardRef components
+      ref: o,
+      "aria-haspopup": "menu",
+      "aria-expanded": e,
+      "aria-controls": n
+    }),
+    e && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
       {
+        id: n,
         ref: a,
-        type: o.type || "button",
-        className: cn(
-          buttonFloatVariants({ variant: r, size: s }),
-          h,
-          b && "animate-fab-in",
-          t
-        ),
-        style: c,
-        ...o
+        className: cn(menuVariants({ size: r, open: e })),
+        role: "menu",
+        "aria-hidden": !e,
+        children: s
       }
-    ) });
-  }
-);
+    )
+  ] });
+}, Menu = Object.assign(MenuRoot, {
+  Content: MenuContent,
+  Item: MenuItem
+});
 function getIconColorFromVariant(e = "primary") {
   const t = e.split("-");
   if (t.length === 1)
@@ -1017,7 +971,7 @@ function getIconColorFromVariant(e = "primary") {
   }
 }
 const buttonIconVariants = cva(
-  "inline-flex items-center justify-center font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] select-none",
+  "inline-flex items-center justify-center font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] select-none cursor-pointer",
   {
     variants: {
       variant: {
@@ -1026,36 +980,36 @@ const buttonIconVariants = cva(
         tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
         ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
         neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white shadow-sm",
-        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
-        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
-        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
-        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
+        "primary-outline": "border border-border text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
+        "secondary-outline": "border border-border text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
+        "tertiary-outline": "border border-border text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
+        "ghost-outline": "border border-border text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
         "neutral-outline": "border border-border text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-light focus-visible:ring-offset-white transition-all",
         "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
         "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
         "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary/20 focus-visible:ring-tertiary focus-visible:ring-offset-white",
         "neutral-ghost": "text-foreground bg-white hover:bg-neutral/50 focus-visible:ring-foreground focus-visible:ring-offset-white",
         success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
+        "success-outline": "border border-border text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
         "success-ghost": "text-success bg-white hover:bg-success/20 focus-visible:ring-success-light focus-visible:ring-offset-white",
         info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
+        "info-outline": "border border-border text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
         "info-ghost": "text-info bg-white hover:bg-info/20 focus-visible:ring-info-light focus-visible:ring-offset-white",
         warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
+        "warning-outline": "border border-border text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
         "warning-ghost": "text-warning bg-white hover:bg-warning/20 focus-visible:ring-warning-light focus-visible:ring-offset-white",
         danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
+        "danger-outline": "border border-border text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
         "danger-ghost": "text-danger bg-white hover:bg-danger/20 focus-visible:ring-danger-light focus-visible:ring-offset-white",
         outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
         destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
       },
       size: {
         xs: "h-6 w-6",
-        sm: "h-8 w-8",
-        md: "h-10 w-10",
-        lg: "h-12 w-12",
-        xl: "h-14 w-14"
+        sm: "h-7 w-7",
+        md: "h-9 w-9",
+        lg: "h-10 w-10",
+        xl: "h-12 w-12"
       },
       shape: {
         rounded: "rounded-md",
@@ -1098,13 +1052,13 @@ const buttonIconVariants = cva(
     size: "md",
     color: "primary"
   }
-}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: i, ...n }, o) {
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: i, ...o }, a) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     t,
     {
-      ref: o,
+      ref: a,
       className: iconVariants({ color: r, size: s, className: i }),
-      ...n
+      ...o
     }
   );
 }), ButtonIcon = React__default.forwardRef(
@@ -1113,9 +1067,9 @@ const buttonIconVariants = cva(
     variant: r = "primary",
     size: s = "md",
     shape: i = "rounded",
-    disabled: n = !1,
-    as: o,
-    "aria-label": a,
+    disabled: o = !1,
+    as: a,
+    "aria-label": n,
     ...l
   }, c) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1131,22 +1085,182 @@ const buttonIconVariants = cva(
           }),
           t
         ),
-        disabled: n,
-        "aria-disabled": n,
-        "aria-label": a,
-        inert: n ? !0 : void 0,
+        disabled: o,
+        "aria-disabled": o,
+        "aria-label": n,
+        inert: o ? !0 : void 0,
         ...l,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Icon,
           {
-            as: o,
-            size: s,
+            as: a,
+            size: "sm",
             color: getIconColorFromVariant(r)
           }
         )
       }
     );
   }
+), ButtonMenuIconRoot = forwardRef(
+  (e, t) => {
+    const {
+      as: r = EllipsisVerticalIcon,
+      content: s,
+      onOpenChange: i,
+      onClick: o,
+      ...a
+    } = e ?? {}, [n, l] = useState(!1);
+    useEffect(() => {
+      i?.(n);
+    }, [n, i]);
+    const c = () => {
+      l(!1);
+    }, g = (d) => {
+      l((u) => !u), o?.(d);
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Menu,
+      {
+        isOpen: n,
+        onOutsideClick: c,
+        size: "md",
+        content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: s }),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { ref: t, as: r, onClick: g, ...a })
+      }
+    );
+  }
+), ButtonMenuIcon = Object.assign(ButtonMenuIconRoot, {
+  Item: Menu.Item
+}), buttonFloatVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "rounded-lg",
+    "font-medium",
+    "transition-all",
+    "duration-200",
+    "focus-visible:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-offset-2",
+    "disabled:opacity-50",
+    "disabled:pointer-events-none",
+    "select-none",
+    "shadow-lg",
+    "transition-transform",
+    "transition-shadow",
+    "will-change-transform,opacity,box-shadow",
+    "hover:scale-105",
+    "active:scale-95",
+    "focus-visible:shadow-xl",
+    "hover:shadow-xl",
+    "active:shadow-md"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
+        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white shadow-sm",
+        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
+        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
+        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
+        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
+        "neutral-outline": "border border-border text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-light focus-visible:ring-offset-white transition-all",
+        "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
+        "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary/20 focus-visible:ring-tertiary focus-visible:ring-offset-white",
+        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/50 focus-visible:ring-foreground focus-visible:ring-offset-white",
+        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
+        "success-ghost": "text-success bg-white hover:bg-success/20 focus-visible:ring-success-light focus-visible:ring-offset-white",
+        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
+        "info-ghost": "text-info bg-white hover:bg-info/20 focus-visible:ring-info-light focus-visible:ring-offset-white",
+        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
+        "warning-ghost": "text-warning bg-white hover:bg-warning/20 focus-visible:ring-warning-light focus-visible:ring-offset-white",
+        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
+        "danger-ghost": "text-danger bg-white hover:bg-danger/20 focus-visible:ring-danger-light focus-visible:ring-offset-white",
+        outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
+        destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
+      },
+      size: {
+        sm: "h-12 w-12 min-w-12 min-h-12 text-base",
+        md: "h-14 w-14 min-w-14 min-h-14 text-lg",
+        lg: "h-16 w-16 min-w-16 min-h-16 text-xl"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function useFloatingPosition(e, t = "1rem") {
+  const r = useRef(null), [s, i] = useState({}), [o, a] = useState("fixed bottom-4 right-4"), n = useCallback(() => {
+    const c = r.current;
+    if (!c) return;
+    const d = c.getBoundingClientRect().height > window.innerHeight;
+    let u = {}, f = "";
+    d ? (u = {
+      position: "fixed",
+      bottom: t,
+      zIndex: 50,
+      transform: `translateY(${c.scrollTop}px)`
+    }, f = `fixed bottom-4 ${e}-4`) : (u = {
+      position: "fixed",
+      bottom: t,
+      zIndex: 50
+    }, f = `fixed bottom-4 ${e}-4`), i(u), a(f);
+  }, [e, t]);
+  return useEffect(() => {
+    n();
+    const c = r.current;
+    return c && c.addEventListener("scroll", n), window.addEventListener("resize", n), () => {
+      c && c.removeEventListener("scroll", n), window.removeEventListener("resize", n);
+    };
+  }, [n]), useEffect(() => {
+    r.current && n();
+  }, [e, t, n]), [useCallback(
+    (c) => {
+      r.current = c, c && n();
+    },
+    [n]
+  ), s, o];
+}
+const ButtonFloat = forwardRef(
+  function({
+    className: t,
+    variant: r = "primary",
+    size: s = "md",
+    side: i = "right",
+    offset: o = "1rem",
+    ...a
+  }, n) {
+    const [l, c, g] = useFloatingPosition(
+      i,
+      o
+    ), [d, u] = useState(!1);
+    return useEffect(() => {
+      u(!0);
+    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: l, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        ref: n,
+        type: a.type || "button",
+        className: cn(
+          buttonFloatVariants({ variant: r, size: s }),
+          g,
+          d && "animate-fab-in",
+          t
+        ),
+        style: c,
+        ...a
+      }
+    ) });
+  }
 ), calculatorRootVariants = cva(
   "flex flex-col w-full max-w-xs rounded-lg bg-background",
   {
@@ -1264,8 +1378,8 @@ const BUTTONS = [
     disabled: r,
     className: s,
     "aria-label": i
-  }, n) => {
-    const { input: o, inputRef: a, handleButton: l, handleInput: c } = useCalculator({
+  }, o) => {
+    const { input: a, inputRef: n, handleButton: l, handleInput: c } = useCalculator({
       initialValue: e,
       disabled: r,
       onChange: t
@@ -1273,7 +1387,7 @@ const BUTTONS = [
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        ref: n,
+        ref: o,
         className: cn(calculatorRootVariants({ disabled: r }), s),
         "aria-label": i || "Calculator",
         role: "region",
@@ -1281,16 +1395,16 @@ const BUTTONS = [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
-              ref: a,
+              ref: n,
               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: o,
+              value: a,
               onChange: c,
               disabled: r,
               inputMode: "decimal",
               "aria-label": "Calculator input"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((h, b) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: h.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((g, d) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: g.map((u) => u === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ButtonIcon,
             {
               as: X,
@@ -1304,285 +1418,21 @@ const BUTTONS = [
           ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
             CalculatorButton,
             {
-              variant: d === "=" ? "action" : d === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(d) ? "operator" : "default",
-              onClick: () => l(d),
+              variant: u === "=" ? "action" : u === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(u) ? "operator" : "default",
+              onClick: () => l(u),
               disabled: r,
-              "aria-label": d,
-              children: d
+              "aria-label": u,
+              children: u
             },
-            d
-          )) }, b)) })
+            u
+          )) }, d)) })
         ]
       }
     );
   }
 );
 Calculator.displayName = "Calculator";
-const CalendarContext = createContext(null);
-function useCalendarContext() {
-  const e = useContext(CalendarContext);
-  if (!e)
-    throw new Error(
-      "useCalendarContext must be used within CalendarContext.Provider"
-    );
-  return e;
-}
-const CalendarHeader = () => {
-  const { value: e, year: t, month: r, setMonth: s } = useCalendarContext();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-4 pt-4 pb-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "base", fontWeight: "semibold", className: "ml-2", children: e ? e instanceof Date ? e.toLocaleDateString(void 0, {
-      year: "numeric",
-      month: "long"
-    }) : Array.isArray(e) && e[0] ? e[0].toLocaleDateString(void 0, {
-      year: "numeric",
-      month: "long"
-    }) : `${t} ${new Date(t, r).toLocaleString(void 0, { month: "long" })}` : `${t} ${new Date(t, r).toLocaleString(void 0, { month: "long" })}` }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ButtonIcon,
-        {
-          as: ChevronLeft,
-          variant: "ghost",
-          size: "sm",
-          "aria-label": "Previous month",
-          onClick: () => s(r === 0 ? 11 : r - 1)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ButtonIcon,
-        {
-          as: ChevronRight,
-          variant: "ghost",
-          size: "sm",
-          "aria-label": "Next month",
-          onClick: () => s(r === 11 ? 0 : r + 1)
-        }
-      )
-    ] })
-  ] });
-}, 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: i, setMonth: n, setYear: o } = e, a = (g, m) => new Date(g, m + 1, 0).getDate(), c = ((g, m) => new Date(g, m, 1).getDay())(t, r), h = a(t, r), b = r - 1 < 0 ? 11 : r - 1, d = r === 0 ? t - 1 : t, p = a(t, b), y = r === 11 ? 0 : r + 1, f = r === 11 ? t + 1 : t, v = [];
-  for (let g = 0; g < c; g++) {
-    const m = p - c + g + 1;
-    v.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ButtonIcon,
-        {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: m }),
-          size: "sm",
-          "aria-label": "Previous month day",
-          variant: "ghost",
-          onClick: () => {
-            i?.(new Date(d, b, m)), n(b), o(d);
-          }
-        },
-        "prev-" + g
-      )
-    );
-  }
-  for (let g = 1; g <= h; g++) {
-    const m = s instanceof Date && s.getFullYear() === t && s.getMonth() === r && s.getDate() === g;
-    v.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ButtonIcon,
-        {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Text,
-            {
-              as: "span",
-              fontSize: "sm",
-              color: m ? "inherit" : "ghost",
-              className: m ? "bg-primary text-white rounded-full" : "",
-              children: g
-            }
-          ),
-          variant: m ? "primary" : "ghost",
-          size: "sm",
-          "aria-label": `Select ${t}-${r + 1}-${g}`,
-          "aria-current": m ? "date" : void 0,
-          onClick: () => {
-            i?.(new Date(t, r, g));
-          }
-        },
-        g
-      )
-    );
-  }
-  const w = c + h;
-  for (let g = 0; g < (w % 7 === 0 ? 0 : 7 - w % 7); g++)
-    v.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ButtonIcon,
-        {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: g + 1 }),
-          size: "sm",
-          "aria-label": "Next month day",
-          variant: "ghost",
-          onClick: () => {
-            i?.(new Date(f, y, g + 1)), n(y), o(f);
-          }
-        },
-        "next-" + g
-      )
-    );
-  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: i, setYear: n } = useCalendarContext(), o = (u, x) => new Date(u, x + 1, 0).getDate(), l = ((u, x) => new Date(u, x, 1).getDay())(e, t), c = o(e, t), h = t - 1 < 0 ? 11 : t - 1, b = t === 0 ? e - 1 : e, d = o(e, h), p = t === 11 ? 0 : t + 1, y = t === 11 ? e + 1 : e, f = [], v = () => {
-    if (!Array.isArray(r)) return [null, null];
-    const [u, x] = r;
-    return !u && !x ? [null, null] : u && x ? u <= x ? [u, x] : [x, u] : [u, x];
-  }, [w, g] = v(), m = (u) => {
-    if (!w || !g) return !1;
-    const x = new Date(e, t, u);
-    return x >= w && x <= g;
-  }, S = (u) => w ? w.getFullYear() === e && w.getMonth() === t && w.getDate() === u : !1, I = (u) => g ? g.getFullYear() === e && g.getMonth() === t && g.getDate() === u : !1;
-  for (let u = 0; u < l; u++) {
-    const x = d - l + u + 1;
-    f.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ButtonIcon,
-        {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: x }),
-          size: "sm",
-          "aria-label": "Previous month day",
-          variant: "ghost",
-          onClick: () => {
-            s?.([null, null]), i(h), n(b);
-          }
-        },
-        "prev-" + u
-      )
-    );
-  }
-  for (let u = 1; u <= c; u++) {
-    const x = m(u), E = S(u), C = I(u);
-    f.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ButtonIcon,
-        {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Text,
-            {
-              as: "span",
-              fontSize: "sm",
-              color: x || E || C ? "inherit" : "ghost",
-              className: cn(
-                x && " bg-primary text-white",
-                E && "rounded-l-full bg-primary text-white",
-                C && "rounded-r-full bg-primary text-white"
-              ),
-              children: u
-            }
-          ),
-          variant: E || C || x ? "primary" : "ghost",
-          size: "sm",
-          "aria-label": `Select ${e}-${t + 1}-${u}`,
-          "aria-current": E || C ? "date" : void 0,
-          onClick: () => {
-            if (!Array.isArray(r) || !r[0] || r[0] && r[1])
-              s?.([new Date(e, t, u), null]);
-            else if (r[0] && !r[1]) {
-              const j = r[0], R = new Date(e, t, u);
-              j.getTime() === R.getTime() ? s?.([j, R]) : s?.(j < R ? [j, R] : [R, j]);
-            }
-          }
-        },
-        u
-      )
-    );
-  }
-  const N = l + c;
-  for (let u = 0; u < (N % 7 === 0 ? 0 : 7 - N % 7); u++)
-    f.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ButtonIcon,
-        {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: u + 1 }),
-          size: "sm",
-          "aria-label": "Next month day",
-          variant: "ghost",
-          onClick: () => {
-            s?.([null, null]), i(p), n(y);
-          }
-        },
-        "next-" + u
-      )
-    );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: f });
-}, CalendarDays = () => {
-  const { type: e } = useCalendarContext();
-  return e === "range" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDaysRange, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDaysSingle, {});
-};
-function useCalendar({
-  value: e,
-  type: t,
-  onChange: r,
-  initialYear: s,
-  initialMonth: i
-}) {
-  const [n, o] = useState(i), [a, l] = useState(s), [c, h] = useState([
-    null,
-    null
-  ]);
-  let b = e;
-  t === "range" && !e && (b = c);
-  const d = useCallback(() => {
-    const f = n === 0 ? 11 : n - 1, v = n === 0 ? a - 1 : a;
-    o(f), l(v), t === "single" && r?.(new Date(v, f, 1));
-  }, [n, a, t, r]), p = useCallback(() => {
-    const f = n === 11 ? 0 : n + 1, v = n === 11 ? a + 1 : a;
-    o(f), l(v), t === "single" && r?.(new Date(v, f, 1));
-  }, [n, a, t, r]), y = useCallback(
-    (f) => {
-      t === "single" ? r?.(f) : t === "range" && (h(f), r?.(f));
-    },
-    [t, r]
-  );
-  return {
-    year: a,
-    month: n,
-    value: b,
-    setMonth: o,
-    setYear: l,
-    onChange: y,
-    handlePrevMonth: d,
-    handleNextMonth: p
-  };
-}
-const CalendarRoot = ({
-  value: e,
-  onChange: t,
-  className: r,
-  type: s = "single",
-  ...i
-}) => {
-  const n = /* @__PURE__ */ new Date(), o = useCalendar({
-    value: e,
-    onChange: t,
-    type: s,
-    initialYear: n.getFullYear(),
-    initialMonth: n.getMonth()
-  });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    CalendarContext.Provider,
-    {
-      value: {
-        year: o.year,
-        month: o.month,
-        value: o.value,
-        type: s,
-        setMonth: o.setMonth,
-        setYear: o.setYear,
-        onChange: o.onChange
-      },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", r), ...i, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarHeader, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarWeekdays, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, {})
-      ] })
-    }
-  );
-}, Calendar = Object.assign(CalendarRoot, {}), cardVariants = cva(
+const cardVariants = cva(
   "block transition-colors duration-200 cursor-pointer w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light hover:bg-gray-50",
   {
     variants: {
@@ -1608,40 +1458,54 @@ const CalendarRoot = ({
       bordered: !1
     }
   }
-), Card = forwardRef(
+), CardList = forwardRef(
+  ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: t, className: "inline-flex items-center", children: e })
+), CardListItem = forwardRef(
+  ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "li",
+    {
+      ref: t,
+      className: "flex items-center after:content-[''] after:inline-block after:mx-2 after:w-1 after:h-1 after:rounded-full after:bg-ghost last:after:hidden",
+      children: e
+    }
+  )
+), CardRoot = forwardRef(
   ({
     size: e = "md",
     shape: t = "rounded",
     avatar: r,
     title: s,
     subtitle: i,
-    badge: n,
-    supplementaryInfo: o,
-    bordered: a = !1,
+    badge: o,
+    supplementaryInfo: a,
+    bordered: n = !1,
     className: l,
     ...c
-  }, h) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, g) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "button",
     {
-      ref: h,
-      className: cn(cardVariants({ size: e, shape: t, bordered: a }), l),
+      ref: g,
+      className: cn(cardVariants({ size: e, shape: t, bordered: n }), l),
       ...c,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("mb-4", !n && !o && "mb-0"), children: [
-            s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h3", fontSize: "base", fontWeight: "semibold", children: s }),
-            i && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "xs", color: "gray", children: i })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
+            s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h3", fontSize: "lg", fontWeight: "semibold", children: s }),
+            i && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: i })
           ] }),
-          (n || o) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
-            n,
-            o && o
+          (o || a) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
+            o,
+            typeof a == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: a }) : a
           ] })
         ] })
       ] })
     }
   )
-), filterChipVariants = cva(
+), Card = Object.assign(CardRoot, {
+  List: CardList,
+  ListItem: CardListItem
+}), filterChipVariants = cva(
   "inline-flex items-center gap-1.5 rounded-full font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none select-none cursor-pointer text-sm leading-none",
   {
     variants: {
@@ -1685,22 +1549,22 @@ const CalendarRoot = ({
     variant: r = "neutral-outline",
     size: s = "md",
     disabled: i = !1,
-    children: n,
-    ...o
-  }, a) {
+    children: o,
+    ...a
+  }, n) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
-        ref: a,
+        ref: n,
         type: "button",
         className: cn(filterChipVariants({ variant: r, size: s }), t),
         disabled: i,
         "aria-disabled": i,
-        "aria-label": `${n}, removable`,
+        "aria-label": `${o}, removable`,
         inert: i ? !0 : void 0,
-        ...o,
+        ...a,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: n }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: o }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: XIcon, color: "inherit", size: s === "lg" ? "md" : "sm" })
         ]
       }
@@ -1728,15 +1592,15 @@ const CalendarRoot = ({
 ), noResultsHeaderVariants = cva(
   "flex flex-row items-center gap-3 mb-2"
 ), NoResults = React__default.forwardRef(
-  function e({ icon: t, title: r, subtitle: s, action: i, className: n, hasGrayBackground: o, ...a }, l) {
+  function e({ icon: t, title: r, subtitle: s, action: i, className: o, hasGrayBackground: a, ...n }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "section",
       {
         ref: l,
-        className: cn(noResultsVariants({ hasGrayBackground: o }), n),
+        className: cn(noResultsVariants({ hasGrayBackground: a }), o),
         role: "status",
         "aria-label": "No results found",
-        ...a,
+        ...n,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: noResultsHeaderVariants(), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: t, size: "lg", color: "ghost", "aria-hidden": "true" }),
@@ -1881,14 +1745,14 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: s, className: i, ...n }, o) => {
-    const a = e === "th" ? "columnheader" : "cell";
+  ({ as: e = "td", span: t, align: r = "left", children: s, className: i, ...o }, a) => {
+    const n = e === "th" ? "columnheader" : "cell";
     let l = "text-left";
     return r === "center" ? l = "text-center" : r === "right" && (l = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        ref: o,
-        role: a,
+        ref: a,
+        role: n,
         className: cn(
           "px-4 py-2",
           "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
@@ -1897,7 +1761,7 @@ const getTableColumnClass = (e) => {
           "truncate overflow-hidden whitespace-nowrap",
           i
         ),
-        ...n,
+        ...o,
         children: s
       }
     );
@@ -1989,90 +1853,36 @@ const getTableColumnClass = (e) => {
     }
   }
 ), Tile = forwardRef(
-  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...i }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...i }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: n,
+      ref: o,
       className: cn(tileVariants({ variant: e, size: t, shape: r }), s),
       ...i
     }
   )
 );
-function getColSpan(e = 4) {
-  switch (e) {
-    case 1:
-      return "col-span-1";
-    case 2:
-      return "col-span-2";
-    case 3:
-      return "col-span-3";
-    case 4:
-      return "col-span-4";
-    case 5:
-      return "col-span-5";
-    case 6:
-      return "col-span-6";
-    case 7:
-      return "col-span-7";
-    case 8:
-      return "col-span-8";
-    case 9:
-      return "col-span-9";
-    case 10:
-      return "col-span-10";
-    case 11:
-      return "col-span-11";
-    case 12:
-      return "col-span-12";
-    default:
-      return "col-span-4";
-  }
-}
-const DescriptionListItem = forwardRef(function e({ children: t, className: r, span: s = 4, ...i }, n) {
-  const o = getColSpan(s);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: n, className: cn(o, r), ...i, 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 }, i) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { ref: i, ...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 }, i) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "dl",
-      {
-        ref: i,
-        className: cn("grid grid-cols-12 gap-y-4", r),
-        ...s,
-        children: t
-      }
-    );
-  }
-), DescriptionList = Object.assign(DescriptionListRoot, {
-  Item: DescriptionListItem,
-  Term: DescriptionListTerm,
-  Details: DescriptionListDetails
-});
 function useImage({ src: e }) {
-  const [t, r] = useState(!1), [s, i] = useState(!1), n = useRef(!1), o = () => {
+  const [t, r] = useState(!1), [s, i] = useState(!1), o = useRef(!1), a = () => {
     r(!0);
-  }, a = () => {
+  }, n = () => {
     i(!0);
   };
   return useEffect(() => {
     if (!e) return;
     const l = new Image();
     return l.src = e, l.onload = () => {
-      n.current || r(!0);
+      o.current || r(!0);
     }, l.onerror = () => {
-      n.current || i(!0);
+      o.current || i(!0);
     }, () => {
-      n.current = !0;
+      o.current = !0;
     };
   }, [e]), {
     loaded: t,
     errored: s,
-    handleLoad: o,
-    handleError: a
+    handleLoad: a,
+    handleError: n
   };
 }
 const imageVariants = cva("block object-cover", {
@@ -2149,13 +1959,13 @@ function BaseImageFallback({
   height: r,
   className: s,
   style: i,
-  shape: n,
-  size: o
+  shape: o,
+  size: a
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: imageAtomVariants({ shape: n, size: o, className: s }),
+      className: imageAtomVariants({ shape: o, size: a, className: s }),
       style: { width: t, height: r, ...i },
       "aria-label": e,
       role: "img",
@@ -2180,56 +1990,56 @@ const BaseImage = forwardRef(
     onLoad: r,
     onError: s,
     width: i,
-    height: n,
-    loading: o = "lazy",
-    position: a = "cover",
+    height: o,
+    loading: a = "lazy",
+    position: n = "cover",
     size: l = "auto",
     shape: c,
-    className: h,
-    ...b
-  }, d) => {
-    const { loaded: p, errored: y, handleLoad: f, handleError: v } = useImage({
+    className: g,
+    ...d
+  }, u) => {
+    const { loaded: f, errored: b, handleLoad: x, handleError: m } = useImage({
       src: e
-    }), w = typeof i == "number" ? i : Number(i), g = typeof n == "number" ? n : Number(n);
-    return !p && !y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    }), h = typeof i == "number" ? i : Number(i), v = typeof o == "number" ? o : Number(o);
+    return !f && !b ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageSkeleton,
       {
         shape: c,
-        width: w,
-        height: g
+        width: h,
+        height: v
       }
-    ) : y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ) : b ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageFallback,
       {
         shape: c,
         alt: t,
-        width: w,
-        height: g
+        width: h,
+        height: v
       }
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        ref: d,
+        ref: u,
         src: e,
         alt: t,
-        width: w,
-        height: g,
-        loading: o,
+        width: h,
+        height: v,
+        loading: a,
         className: cn(
           imageVariants({
-            position: a,
+            position: n,
             size: l,
             shape: c
           }),
-          h
+          g
         ),
-        onLoad: (m) => {
-          f(), r?.(m);
+        onLoad: (w) => {
+          x(), r?.(w);
         },
-        onError: (m) => {
-          v(), s?.(m);
+        onError: (w) => {
+          m(), s?.(w);
         },
-        ...b
+        ...d
       }
     );
   }
@@ -2238,9 +2048,9 @@ export {
   Alert as A,
   Badge as B,
   Calculator as C,
-  DescriptionList as D,
   FilterChip as F,
   Icon as I,
+  Menu as M,
   NoResults as N,
   Table as T,
   Anchor as a,
@@ -2249,14 +2059,15 @@ export {
   Avatar as d,
   Brand as e,
   Button as f,
-  ButtonFloat as g,
-  ButtonIcon as h,
-  Calendar as i,
+  ButtonMenuIcon as g,
+  ButtonFloat as h,
+  ButtonIcon as i,
   Card as j,
   Text as k,
   Tile as l,
   ImageCircle as m,
   ImageSquare as n,
   ImageRectangle as o,
-  BaseImage as p
+  BaseImage as p,
+  useEscapeClose as u
 };