@dimasbaguspm/versaur 0.0.0

package/dist/menu-BZvilMF7.js

@@ -0,0 +1,174 @@
+import { c as b, j as l } from "./index-DU1SCUkk.js";
+import { createContext as h, useContext as w, forwardRef as f, useId as M, useEffect as m, useRef as g } from "react";
+import { c as y } from "./cn-Ca4KprQ1.js";
+const x = h(null), p = () => {
+  const n = w(x);
+  if (!n)
+    throw new Error("useMenuContext must be used within a Menu component");
+  return n;
+}, E = b(
+  // Modern, clean, accessible base style
+  "z-50 min-w-40 bg-neutral-50 text-black rounded-lg shadow-md border border-transparent",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "border bg-transparent"
+      },
+      size: {
+        sm: "py-2",
+        md: "py-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+), z = b(
+  "w-full text-left px-4 rounded-md cursor-pointer transition-colors duration-150 font-medium select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coral/70 hover:bg-slate-100 active:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "border border-color-neutral"
+      },
+      size: {
+        sm: "text-sm py-2",
+        md: "text-base py-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+), I = f(
+  ({ children: n, ...e }, t) => {
+    const { open: u, triggerRef: r } = p();
+    return /* @__PURE__ */ l.jsx(
+      "button",
+      {
+        ref: (o) => {
+          r.current = o, typeof t == "function" ? t(o) : t && (t.current = o);
+        },
+        "aria-haspopup": "menu",
+        "aria-expanded": u,
+        "aria-controls": "menu-content",
+        type: "button",
+        ...e,
+        children: n
+      }
+    );
+  }
+), j = f(
+  ({ children: n, className: e, ...t }, u) => {
+    const { open: r, contentRef: o, triggerRef: i, size: s } = p(), d = M();
+    let c = 0, v = 0;
+    if (i.current) {
+      const a = i.current.getBoundingClientRect();
+      c = a.bottom + window.scrollY + 4, v = a.left + window.scrollX;
+    }
+    return /* @__PURE__ */ l.jsx(
+      "div",
+      {
+        ref: (a) => {
+          o.current = a, typeof u == "function" ? u(a) : u && (u.current = a);
+        },
+        id: `menu-content-${d}`,
+        role: "menu",
+        tabIndex: -1,
+        "aria-hidden": !r,
+        className: y(
+          E({
+            size: s
+          }),
+          "absolute z-50 transition-opacity duration-150 ease-out",
+          r ? "opacity-100" : "opacity-0",
+          e
+        ),
+        style: {
+          minWidth: i.current?.offsetWidth,
+          top: c,
+          left: v
+        },
+        ...t,
+        children: r && n
+      }
+    );
+  }
+), k = f(
+  ({ children: n, disabled: e, className: t, ...u }, r) => {
+    const { size: o } = p();
+    return /* @__PURE__ */ l.jsx(
+      "button",
+      {
+        ref: r,
+        role: "menuitem",
+        tabIndex: 0,
+        disabled: e,
+        "aria-disabled": e,
+        className: y(
+          z({
+            size: o
+          }),
+          t
+        ),
+        ...u,
+        children: n
+      }
+    );
+  }
+);
+function C(n, e, t, u) {
+  m(() => {
+    if (!n) return;
+    function r(o) {
+      !e.current?.contains(o.target) && !t.current?.contains(o.target) && u();
+    }
+    return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+  }, [n, u, e, t]);
+}
+function D(n, e) {
+  m(() => {
+    if (n && e.current) {
+      const t = e.current.querySelectorAll('[role="menuitem"]');
+      t.length && t[0].focus();
+    }
+  }, [n, e]);
+}
+function A(n, e, t, u) {
+  m(() => {
+    if (!n || !e.current) return;
+    const r = e.current;
+    function o(i) {
+      const s = Array.from(
+        r.querySelectorAll('[role="menuitem"]')
+      ), d = document.activeElement, c = s.indexOf(d);
+      i.key === "ArrowDown" ? (i.preventDefault(), s.length && s[(c + 1) % s.length].focus()) : i.key === "ArrowUp" ? (i.preventDefault(), s.length && s[(c - 1 + s.length) % s.length].focus()) : i.key === "Home" ? (i.preventDefault(), s.length && s[0].focus()) : i.key === "End" ? (i.preventDefault(), s.length && s[s.length - 1].focus()) : i.key === "Escape" && (i.preventDefault(), u(), t.current?.focus());
+    }
+    return r.addEventListener("keydown", o), () => r.removeEventListener("keydown", o);
+  }, [n, u, e, t]);
+}
+const L = ({
+  children: n,
+  isOpen: e,
+  onOutsideClick: t,
+  size: u = "md"
+}) => {
+  const r = g(null), o = g(null);
+  return C(e, o, r, t), D(e, o), A(e, o, r, t), /* @__PURE__ */ l.jsx(
+    x.Provider,
+    {
+      value: { open: e, triggerRef: r, contentRef: o, size: u },
+      children: n
+    }
+  );
+}, q = Object.assign(L, {
+  Trigger: I,
+  Content: j,
+  Item: k
+});
+export {
+  q as M
+};

package/dist/modal-BGAtqMl9.js

@@ -0,0 +1,149 @@
+import { j as o, c as y } from "./index-DU1SCUkk.js";
+import { forwardRef as s, useEffect as d, useRef as x, useState as p } from "react";
+import { c as u } from "./cn-Ca4KprQ1.js";
+const E = s(
+  ({ className: e, ...t }, a) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: a,
+      className: u("px-6 pt-6 pb-2 text-lg font-semibold", e),
+      ...t
+    }
+  )
+), k = s(
+  ({ className: e, ...t }, a) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: a,
+      className: u("px-6 py-4  flex justify-end gap-2", e),
+      ...t
+    }
+  )
+), M = s(
+  ({ className: e, ...t }, a) => /* @__PURE__ */ o.jsx("div", { ref: a, className: u("px-6 py-2", e), ...t })
+), R = s(
+  ({ onOverlayClick: e, ...t }, a) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: a,
+      role: "presentation",
+      tabIndex: -1,
+      "aria-modal": "true",
+      onClick: e,
+      ...t
+    }
+  )
+), N = y(
+  "fixed inset-0 z-51 transition-opacity duration-300 bg-black/30 backdrop-blur-md flex items-center justify-center transition-opacity duration-200 ease-in-out",
+  {
+    variants: {
+      placement: {
+        top: "items-start",
+        center: "items-center"
+      }
+    },
+    defaultVariants: {
+      placement: "center"
+    }
+  }
+), V = y(
+  [
+    "bg-white rounded-lg shadow-xl relative",
+    "flex flex-col",
+    "outline-none",
+    "mx-4",
+    "transition-all duration-200 ease-in-out "
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-[20rem] max-w-sm",
+        // 20rem, 320px
+        md: "w-[28rem] max-w-md",
+        // 28rem, 448px
+        lg: "w-[36rem] max-w-lg"
+        // 36rem, 576px
+      },
+      placement: {
+        top: "mt-4",
+        center: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      placement: "center"
+    }
+  }
+);
+function A(e, t) {
+  d(() => {
+    if (t && e.current) {
+      const a = e.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      a.length && a[0].focus();
+    }
+  }, [t, e]);
+}
+function F(e, t) {
+  d(() => {
+    if (!e) return;
+    const a = (n) => {
+      n.key === "Escape" && t();
+    };
+    return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
+  }, [e, t]);
+}
+const I = 200, T = ({
+  isOpen: e,
+  onOpenChange: t,
+  size: a = "md",
+  placement: n = "center",
+  children: v,
+  disableOverlayClose: b,
+  disableEscClose: w,
+  ...j
+}) => {
+  const r = x(null), i = x(null), [g, m] = p(e), [f, c] = p(!1);
+  return d(() => {
+    if (e)
+      m(!0), c(!1), r.current = document.activeElement;
+    else if (g) {
+      c(!0);
+      const l = setTimeout(() => {
+        m(!1), c(!1), r.current && r.current.focus();
+      }, I);
+      return () => clearTimeout(l);
+    }
+  }, [e]), F(e && !w, () => {
+    t && t(!1);
+  }), A(i, e), /* @__PURE__ */ o.jsx(
+    R,
+    {
+      ref: i,
+      className: `${N({ placement: n })} transition-opacity duration-200 ease-in-out ` + (e && !f ? "opacity-100" : "opacity-0 pointer-events-none"),
+      onOverlayClick: (l) => {
+        l.target === i.current && !b && t && t(!1);
+      },
+      placement: n,
+      children: /* @__PURE__ */ o.jsx(
+        "div",
+        {
+          className: `${V({ size: a, placement: n })} transition-all duration-200 ease-in-out ` + (e && !f ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
+          role: "dialog",
+          ...j,
+          tabIndex: 0,
+          "aria-hidden": !e,
+          children: v
+        }
+      )
+    }
+  );
+}, B = Object.assign(T, {
+  Header: E,
+  Body: M,
+  Footer: k
+});
+export {
+  B as M
+};

package/dist/radio-input-BRGoevZY.js

@@ -0,0 +1,173 @@
+import { c as m, j as r } from "./index-DU1SCUkk.js";
+import f, { createContext as k, useContext as w } from "react";
+import { c as h } from "./cn-Ca4KprQ1.js";
+const y = m("space-y-2", {
+  variants: {
+    direction: {
+      vertical: "space-y-2 space-x-0",
+      horizontal: "flex flex-wrap gap-4 space-y-0"
+    }
+  },
+  defaultVariants: {
+    direction: "vertical"
+  }
+}), v = m(
+  "relative h-4 w-4 rounded-full border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed appearance-none bg-white",
+  {
+    variants: {
+      variant: {
+        // Core variants using Versaur color system
+        primary: "border-coral/40 checked:bg-coral checked:border-coral focus:ring-coral/20",
+        secondary: "border-sage/40 checked:bg-sage checked:border-sage focus:ring-sage/20",
+        tertiary: "border-mist/40 checked:bg-mist checked:border-mist focus:ring-mist/20",
+        ghost: "border-slate/40 checked:bg-slate checked:border-slate focus:ring-slate/20",
+        neutral: "border-gray-300 checked:bg-gray-500 checked:border-gray-500 focus:ring-gray-400/20",
+        // Outline variants
+        "primary-outline": "border-coral checked:bg-white checked:border-coral focus:ring-coral/20",
+        "secondary-outline": "border-sage checked:bg-white checked:border-sage focus:ring-sage/20",
+        "tertiary-outline": "border-mist checked:bg-white checked:border-mist focus:ring-mist/20",
+        "ghost-outline": "border-slate checked:bg-white checked:border-slate focus:ring-slate/20",
+        "neutral-outline": "border-gray-400 checked:bg-white checked:border-gray-400 focus:ring-gray-500/20",
+        // Semantic variants
+        success: "border-success/40 checked:bg-success checked:border-success focus:ring-success/20",
+        "success-outline": "border-success checked:bg-white checked:border-success focus:ring-success/20",
+        info: "border-info/40 checked:bg-info checked:border-info focus:ring-info/20",
+        "info-outline": "border-info checked:bg-white checked:border-info focus:ring-info/20",
+        warning: "border-warning/40 checked:bg-warning checked:border-warning focus:ring-warning/20",
+        "warning-outline": "border-warning checked:bg-white checked:border-warning focus:ring-warning/20",
+        danger: "border-danger/40 checked:bg-danger checked:border-danger focus:ring-danger/20",
+        "danger-outline": "border-danger checked:bg-white checked:border-danger focus:ring-danger/20"
+      },
+      size: {
+        sm: "h-3 w-3",
+        md: "h-4 w-4",
+        lg: "h-5 w-5"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+), j = m(
+  "text-foreground cursor-pointer select-none",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: !1
+    }
+  }
+), x = k(
+  null
+), z = () => {
+  const o = w(x);
+  if (!o)
+    throw new Error(
+      "useRadioInputContext must be used within RadioInputContext"
+    );
+  return o;
+}, R = f.forwardRef(
+  ({ children: o, description: c, className: a, disabled: i, id: n, value: l, ...b }, g) => {
+    const e = z(), u = f.useId(), d = n || u, t = i || e.disabled, s = e.error ? "danger" : e.variant || "primary";
+    return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ r.jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          ref: g,
+          type: "radio",
+          id: d,
+          name: e.name,
+          value: l,
+          disabled: t,
+          className: h(
+            v({
+              variant: s,
+              size: e.size
+            }),
+            // Custom radio dot styling using ::before - centered positioning with size variants
+            'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-white before:opacity-0 before:transition-opacity before:duration-200',
+            // Size-specific radio dot dimensions
+            e.size === "sm" && "before:w-[6px] before:h-[6px]",
+            e.size === "md" && "before:w-[8px] before:h-[8px]",
+            e.size === "lg" && "before:w-[10px] before:h-[10px]",
+            "checked:before:opacity-100",
+            // Outline variants use colored radio dot
+            s?.includes("outline") && "checked:before:bg-current",
+            a
+          ),
+          ...b
+        }
+      ) }),
+      /* @__PURE__ */ r.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ r.jsx(
+          "label",
+          {
+            htmlFor: d,
+            className: j({
+              size: e.size,
+              disabled: t
+            }),
+            children: o
+          }
+        ),
+        c && /* @__PURE__ */ r.jsx(
+          "div",
+          {
+            className: h(
+              "text-gray-600 mt-1",
+              e.size === "sm" && "text-xs",
+              e.size === "md" && "text-xs",
+              e.size === "lg" && "text-sm",
+              t && "opacity-50"
+            ),
+            children: c
+          }
+        )
+      ] })
+    ] });
+  }
+), N = f.forwardRef(
+  ({
+    variant: o = "primary",
+    size: c = "md",
+    label: a,
+    helperText: i,
+    error: n,
+    direction: l = "vertical",
+    className: b,
+    disabled: g,
+    name: e,
+    children: u,
+    ...d
+  }, t) => {
+    const s = !!n, p = {
+      variant: o,
+      size: c,
+      disabled: g,
+      error: s,
+      name: e
+    };
+    return /* @__PURE__ */ r.jsx(x.Provider, { value: p, children: /* @__PURE__ */ r.jsxs("div", { ref: t, className: h("w-full", b), ...d, children: [
+      a && /* @__PURE__ */ r.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: a }),
+      /* @__PURE__ */ r.jsx("div", { className: y({ direction: l }), children: u }),
+      s && /* @__PURE__ */ r.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: n }),
+      !s && i && /* @__PURE__ */ r.jsx("div", { className: "mt-2 text-sm text-gray-600", children: i })
+    ] }) });
+  }
+), O = Object.assign(N, {
+  Option: R
+});
+export {
+  O as R
+};