@dimasbaguspm/versaur 0.0.31 → 0.0.33

package/dist/js/{image-rectangle-BpMI_fTE.js → image-rectangle-oPc5hFMM.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, 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",
@@ -148,10 +148,10 @@ const alertVariants = cva(
     className: s,
     children: i,
     ...o
-  }, n) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      ref: n,
+      ref: a,
       role: "alert",
       className: cn(alertVariants({ variant: e, color: t }), s),
       ...o,
@@ -228,16 +228,16 @@ const alertVariants = cva(
     fontSize: s = "base",
     fontWeight: i = "medium",
     quiet: o = !1,
-    ...n
-  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ...a
+  }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
-      ref: a,
+      ref: n,
       className: cn(
         anchorVariants({ color: r, fontSize: s, fontWeight: i, quiet: o }),
         t
       ),
-      ...n,
+      ...a,
       children: e
     }
   )
@@ -318,15 +318,15 @@ const alertVariants = cva(
     isCapitalize: s = !1,
     align: i = "left",
     italic: o = !1,
-    clamp: n = "none",
-    ellipsis: a = !1,
+    clamp: a = "none",
+    ellipsis: n = !1,
     fontSize: l,
     fontWeight: c,
     className: u,
-    children: d,
-    ...g
-  }, f) => {
-    const x = [
+    children: g,
+    ...d
+  }, m) => {
+    const w = [
       "h1",
       "h2",
       "h3",
@@ -336,11 +336,11 @@ const alertVariants = cva(
       "p",
       "span",
       "label"
-    ].includes(e) ? e : "span", m = l ? `text-${l}` : "", h = c ? `font-${c}` : "";
+    ].includes(e) ? e : "span", p = l ? `text-${l}` : "", v = c ? `font-${c}` : "";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       e,
       {
-        ref: f,
+        ref: m,
         className: cn(
           textVariants({
             color: t,
@@ -348,17 +348,17 @@ const alertVariants = cva(
             isCapitalize: s,
             align: i,
             italic: o,
-            clamp: n,
-            ellipsis: a,
+            clamp: a,
+            ellipsis: n,
             // @ts-expect-error - `as` is not a valid variant
-            as: x
+            as: w
           }),
-          m,
-          h,
+          p,
+          v,
           u
         ),
-        ...g,
-        children: d
+        ...d,
+        children: g
       }
     );
   }
@@ -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, ...o }, n) {
-  const a = getColSpan(s);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: n, className: cn(a, r), ...o, 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 }, o) {
-    const n = getGridCols(s);
+    const a = getGridCols(s);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "ul",
       {
         ref: o,
-        className: cn("grid gap-4", n, r),
+        className: cn("grid gap-4", a, r),
         ...i,
         children: t
       }
@@ -504,10 +504,10 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     className: s,
     children: i,
     ...o
-  }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: n,
+      ref: a,
       className: cn(avatarVariants({ variant: e, size: t, shape: r }), s),
       ...o,
       children: i
@@ -515,17 +515,17 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
   )
 ), AvatarImage = forwardRef(
   ({ src: e, alt: t, className: r, onError: s, ...i }, o) => {
-    const [n, a] = useState(!1);
+    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 n ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return a ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
         ref: o,
@@ -703,11 +703,11 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     size: s = "md",
     iconLeft: i,
     iconRight: o,
-    className: n,
-    children: a,
+    className: a,
+    children: n,
     ...l
   }, c) => {
-    const g = !(a != null && a !== "") && !!(i || o);
+    const d = !(n != null && n !== "") && !!(i || o);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
@@ -718,19 +718,19 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
             color: r,
             shape: t,
             size: s,
-            iconOnly: g
+            iconOnly: d
           }),
-          n
+          a
         ),
         ...l,
-        children: g ? (
+        children: d ? (
           // Icon-only mode: display only the icon
           i || o
         ) : (
           // Normal mode: display icon(s) and text
           /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             i,
-            a,
+            n,
             o
           ] })
         )
@@ -833,8 +833,8 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     size: s = "md",
     disabled: i = !1,
     type: o = "button",
-    children: n,
-    ...a
+    children: a,
+    ...n
   }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
@@ -845,142 +845,167 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         disabled: i,
         "aria-disabled": i,
         inert: i ? !0 : void 0,
-        ...a,
-        children: n
+        ...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 shadow-lg",
   {
     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 scale-100",
+        false: "opacity-0 pointer-events-none scale-95"
       }
     },
     defaultVariants: {
-      variant: "primary",
-      size: "md"
+      size: "md",
+      open: !1
     }
   }
 );
-function useFloatingPosition(e, t = "1rem") {
-  const r = useRef(null), [s, i] = useState({}), [o, n] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
-    const c = r.current;
-    if (!c) return;
-    const d = c.getBoundingClientRect().height > window.innerHeight;
-    let g = {}, f = "";
-    d ? (g = {
-      position: "fixed",
-      bottom: t,
-      zIndex: 50,
-      transform: `translateY(${c.scrollTop}px)`
-    }, f = `fixed bottom-4 ${e}-4`) : (g = {
-      position: "fixed",
-      bottom: t,
-      zIndex: 50
-    }, f = `fixed bottom-4 ${e}-4`), i(g), n(f);
+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 useMenuEscapeClose(e, t) {
+  useEffect(() => {
+    if (!e) return;
+    const r = (s) => {
+      s.key === "Escape" && t();
+    };
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
   }, [e, t]);
+}
+function useMenuPosition(e, t, r, s = "bottom-start", i) {
+  const [o, a] = useState({});
   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);
-    };
-  }, [a]), useEffect(() => {
-    r.current && a();
-  }, [e, t, a]), [useCallback(
-    (c) => {
-      r.current = c, c && a();
-    },
-    [a]
-  ), s, o];
+    if (!e || !t.current || !r.current) {
+      a({});
+      return;
+    }
+    const n = t.current, l = r.current, c = i || document.documentElement, u = n.getBoundingClientRect(), g = c.getBoundingClientRect(), d = l.style.visibility, m = l.style.position;
+    l.style.visibility = "hidden", l.style.position = "absolute";
+    const h = l.getBoundingClientRect();
+    l.style.visibility = d, l.style.position = m;
+    const w = g.bottom - u.bottom - 8, p = u.top - g.top - 8, v = g.right - u.left - 8, y = u.right - g.left - 8;
+    let b = s;
+    s === "auto" && (w >= h.height && v >= h.width ? b = "bottom-start" : w >= h.height && y >= h.width ? b = "bottom-end" : p >= h.height && v >= h.width ? b = "top-start" : p >= h.height && y >= h.width ? b = "top-end" : b = w >= p ? "bottom-start" : "top-start");
+    const f = {};
+    switch (b) {
+      case "bottom-start":
+        f.top = u.height + 4, f.left = 0;
+        break;
+      case "bottom-end":
+        f.top = u.height + 4, f.right = 0;
+        break;
+      case "top-start":
+        f.bottom = u.height + 4, f.left = 0;
+        break;
+      case "top-end":
+        f.bottom = u.height + 4, f.right = 0;
+        break;
+    }
+    if (i) {
+      const R = {
+        top: b.startsWith("bottom") ? u.bottom + 4 : u.top - h.height - 4,
+        left: b.endsWith("start") ? u.left : u.right - h.width,
+        width: h.width,
+        height: h.height
+      };
+      if (R.left < g.left + 8) {
+        const x = g.left + 8 - R.left;
+        b.endsWith("start") ? f.left = (f.left || 0) + x : f.right = (f.right || 0) - x;
+      } else if (R.left + R.width > g.right - 8) {
+        const x = R.left + R.width - (g.right - 8);
+        b.endsWith("start") ? f.left = (f.left || 0) - x : f.right = (f.right || 0) + x;
+      }
+      if (b.startsWith("bottom")) {
+        const x = Math.max(
+          50,
+          g.bottom - u.bottom - 16
+        );
+        h.height > x && (f.maxHeight = x);
+      } else {
+        const x = Math.max(
+          50,
+          u.top - g.top - 16
+        );
+        h.height > x && (f.maxHeight = x);
+      }
+    }
+    a(f);
+  }, [e, s, i, t, r]), o;
 }
-const ButtonFloat = forwardRef(
-  function({
-    className: t,
-    variant: r = "primary",
-    size: s = "md",
-    side: i = "right",
-    offset: o = "1rem",
-    ...n
-  }, a) {
-    const [l, c, u] = useFloatingPosition(
-      i,
-      o
-    ), [d, g] = useState(!1);
-    return useEffect(() => {
-      g(!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,
+  placement: o = "bottom-start",
+  container: a
+}) => {
+  const n = useRef(null), l = useRef(null), c = useId();
+  useMenuOutsideClick(e, l, n, t), useMenuEscapeClose(e, t);
+  const u = useMenuPosition(
+    e,
+    n,
+    l,
+    o,
+    a
+  ), g = {
+    ...u,
+    overflowY: u.maxHeight ? "auto" : void 0,
+    overflowX: u.maxWidth ? "auto" : void 0
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-fit", children: [
+    cloneElement(i, {
+      // @ts-expect-error: ref is valid for button or forwardRef components
+      ref: n,
+      "aria-haspopup": "menu",
+      "aria-expanded": e,
+      "aria-controls": c
+    }),
+    e && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
       {
-        ref: a,
-        type: n.type || "button",
-        className: cn(
-          buttonFloatVariants({ variant: r, size: s }),
-          u,
-          d && "animate-fab-in",
-          t
-        ),
-        style: c,
-        ...n
+        id: c,
+        ref: l,
+        className: cn(menuVariants({ size: r, open: e })),
+        style: g,
+        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)
@@ -1098,11 +1123,11 @@ const buttonIconVariants = cva(
     size: "md",
     color: "primary"
   }
-}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: i, ...o }, n) {
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: i, ...o }, a) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     t,
     {
-      ref: n,
+      ref: a,
       className: iconVariants({ color: r, size: s, className: i }),
       ...o
     }
@@ -1114,8 +1139,8 @@ const buttonIconVariants = cva(
     size: s = "md",
     shape: i = "rounded",
     disabled: o = !1,
-    as: n,
-    "aria-label": a,
+    as: a,
+    "aria-label": n,
     ...l
   }, c) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1133,13 +1158,13 @@ const buttonIconVariants = cva(
         ),
         disabled: o,
         "aria-disabled": o,
-        "aria-label": a,
+        "aria-label": n,
         inert: o ? !0 : void 0,
         ...l,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Icon,
           {
-            as: n,
+            as: a,
             size: "sm",
             color: getIconColorFromVariant(r)
           }
@@ -1147,6 +1172,166 @@ const buttonIconVariants = cva(
       }
     );
   }
+), ButtonMenuIconRoot = forwardRef(
+  (e, t) => {
+    const {
+      as: r = EllipsisVerticalIcon,
+      children: s,
+      onOpenChange: i,
+      onClick: o,
+      ...a
+    } = e ?? {}, [n, l] = useState(!1);
+    useEffect(() => {
+      i?.(n);
+    }, [n, i]);
+    const c = () => {
+      l(!1);
+    }, u = (g) => {
+      l((d) => !d), o?.(g);
+    };
+    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: u, ...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 g = c.getBoundingClientRect().height > window.innerHeight;
+    let d = {}, m = "";
+    g ? (d = {
+      position: "fixed",
+      bottom: t,
+      zIndex: 50,
+      transform: `translateY(${c.scrollTop}px)`
+    }, m = `fixed bottom-4 ${e}-4`) : (d = {
+      position: "fixed",
+      bottom: t,
+      zIndex: 50
+    }, m = `fixed bottom-4 ${e}-4`), i(d), a(m);
+  }, [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, u] = useFloatingPosition(
+      i,
+      o
+    ), [g, d] = useState(!1);
+    return useEffect(() => {
+      d(!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 }),
+          u,
+          g && "animate-fab-in",
+          t
+        ),
+        style: c,
+        ...a
+      }
+    ) });
+  }
 ), calculatorRootVariants = cva(
   "flex flex-col w-full max-w-xs rounded-lg bg-background",
   {
@@ -1265,7 +1450,7 @@ const BUTTONS = [
     className: s,
     "aria-label": i
   }, o) => {
-    const { input: n, inputRef: a, handleButton: l, handleInput: c } = useCalculator({
+    const { input: a, inputRef: n, handleButton: l, handleInput: c } = useCalculator({
       initialValue: e,
       disabled: r,
       onChange: t
@@ -1281,16 +1466,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: n,
+              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((u, d) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: u.map((g) => g === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((u, g) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: u.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ButtonIcon,
             {
               as: X,
@@ -1304,14 +1489,14 @@ const BUTTONS = [
           ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
             CalculatorButton,
             {
-              variant: g === "=" ? "action" : g === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(g) ? "operator" : "default",
-              onClick: () => l(g),
+              variant: d === "=" ? "action" : d === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(d) ? "operator" : "default",
+              onClick: () => l(d),
               disabled: r,
-              "aria-label": g,
-              children: g
+              "aria-label": d,
+              children: d
             },
-            g
-          )) }, d)) })
+            d
+          )) }, g)) })
         ]
       }
     );
@@ -1363,26 +1548,26 @@ const cardVariants = cva(
     title: s,
     subtitle: i,
     badge: o,
-    supplementaryInfo: n,
-    bordered: a = !1,
+    supplementaryInfo: a,
+    bordered: n = !1,
     className: l,
     ...c
   }, u) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "button",
     {
       ref: u,
-      className: cn(cardVariants({ size: e, shape: t, bordered: a }), l),
+      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: "mb-2", children: [
-            s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h3", fontSize: "lg", fontWeight: "semibold", children: s }),
+            s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h3", fontSize: "base", fontWeight: "semibold", children: s }),
             i && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: i })
           ] }),
-          (o || n) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
+          (o || a) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
             o,
-            typeof n == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: n }) : n
+            typeof a == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: a }) : a
           ] })
         ] })
       ] })
@@ -1436,19 +1621,19 @@ const cardVariants = cva(
     size: s = "md",
     disabled: i = !1,
     children: o,
-    ...n
-  }, a) {
+    ...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": `${o}, removable`,
         inert: i ? !0 : void 0,
-        ...n,
+        ...a,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: o }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: XIcon, color: "inherit", size: s === "lg" ? "md" : "sm" })
@@ -1478,15 +1663,15 @@ const cardVariants = cva(
 ), 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: o, hasGrayBackground: n, ...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: n }), o),
+        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" }),
@@ -1631,14 +1816,14 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: s, className: i, ...o }, n) => {
-    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: n,
-        role: a,
+        ref: a,
+        role: n,
         className: cn(
           "px-4 py-2",
           "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
@@ -1749,9 +1934,9 @@ const getTableColumnClass = (e) => {
   )
 );
 function useImage({ src: e }) {
-  const [t, r] = useState(!1), [s, i] = useState(!1), o = useRef(!1), n = () => {
+  const [t, r] = useState(!1), [s, i] = useState(!1), o = useRef(!1), a = () => {
     r(!0);
-  }, a = () => {
+  }, n = () => {
     i(!0);
   };
   return useEffect(() => {
@@ -1767,8 +1952,8 @@ function useImage({ src: e }) {
   }, [e]), {
     loaded: t,
     errored: s,
-    handleLoad: n,
-    handleError: a
+    handleLoad: a,
+    handleError: n
   };
 }
 const imageVariants = cva("block object-cover", {
@@ -1846,12 +2031,12 @@ function BaseImageFallback({
   className: s,
   style: i,
   shape: o,
-  size: n
+  size: a
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: imageAtomVariants({ shape: o, size: n, className: s }),
+      className: imageAtomVariants({ shape: o, size: a, className: s }),
       style: { width: t, height: r, ...i },
       "aria-label": e,
       role: "img",
@@ -1877,55 +2062,55 @@ const BaseImage = forwardRef(
     onError: s,
     width: i,
     height: o,
-    loading: n = "lazy",
-    position: a = "cover",
+    loading: a = "lazy",
+    position: n = "cover",
     size: l = "auto",
     shape: c,
     className: u,
-    ...d
-  }, g) => {
-    const { loaded: f, errored: b, handleLoad: x, handleError: m } = useImage({
+    ...g
+  }, d) => {
+    const { loaded: m, errored: h, handleLoad: w, handleError: p } = useImage({
       src: e
-    }), h = typeof i == "number" ? i : Number(i), v = typeof o == "number" ? o : Number(o);
-    return !f && !b ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    }), v = typeof i == "number" ? i : Number(i), y = typeof o == "number" ? o : Number(o);
+    return !m && !h ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageSkeleton,
       {
         shape: c,
-        width: h,
-        height: v
+        width: v,
+        height: y
       }
-    ) : b ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ) : h ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageFallback,
       {
         shape: c,
         alt: t,
-        width: h,
-        height: v
+        width: v,
+        height: y
       }
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        ref: g,
+        ref: d,
         src: e,
         alt: t,
-        width: h,
-        height: v,
-        loading: n,
+        width: v,
+        height: y,
+        loading: a,
         className: cn(
           imageVariants({
-            position: a,
+            position: n,
             size: l,
             shape: c
           }),
           u
         ),
-        onLoad: (w) => {
-          x(), r?.(w);
+        onLoad: (b) => {
+          w(), r?.(b);
         },
-        onError: (w) => {
-          m(), s?.(w);
+        onError: (b) => {
+          p(), s?.(b);
         },
-        ...d
+        ...g
       }
     );
   }
@@ -1936,6 +2121,7 @@ export {
   Calculator as C,
   FilterChip as F,
   Icon as I,
+  Menu as M,
   NoResults as N,
   Table as T,
   Anchor as a,
@@ -1944,13 +2130,14 @@ export {
   Avatar as d,
   Brand as e,
   Button as f,
-  ButtonFloat as g,
-  ButtonIcon as h,
-  Card as i,
-  Text as j,
-  Tile as k,
-  ImageCircle as l,
-  ImageSquare as m,
-  ImageRectangle as n,
-  BaseImage as o
+  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
 };