@dimasbaguspm/versaur 0.0.8 → 0.0.9

package/dist/layouts/form-layout/form-layout.d.ts

@@ -0,0 +1,4 @@
+import { FormLayoutProps, FormLayoutColumnProps } from './types';
+export declare const FormLayout: import('react').ForwardRefExoticComponent<FormLayoutProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Column: import('react').ForwardRefExoticComponent<FormLayoutColumnProps & import('react').RefAttributes<HTMLDivElement>>;
+};

package/dist/layouts/form-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { FormLayout } from './form-layout';
+export type * from './types';

package/dist/layouts/form-layout/types.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Props for the FormLayout root component
+ */
+export interface FormLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children (should be FormLayout.Column components)
+     */
+    children: ReactNode;
+}
+/**
+ * Props for the FormLayout.Column sub-component
+ */
+export interface FormLayoutColumnProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number of columns to span (1-12, default 4)
+     * @default 4
+     */
+    span?: number;
+}

package/dist/layouts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './app-bar';
+export * from './bottom-bar';
+export * from './top-bar';
+export * from './page-layout';
+export * from './form-layout';

package/dist/layouts/index.js

@@ -0,0 +1,8 @@
+import { A as r, B as s, F as t, P as B, T as p } from "../form-layout-COQbtyW5.js";
+export {
+  r as AppBar,
+  s as BottomBar,
+  t as FormLayout,
+  B as PageLayout,
+  p as TopBar
+};

package/dist/menu--hEHXVZf.js

@@ -0,0 +1,315 @@
+import { j as u, a as x, c as y } from "./index-DOdDlCoL.js";
+import { forwardRef as f, useEffect as m, useRef as v, useState as M, createContext as j, useContext as k, useId as I } from "react";
+const z = f(
+  ({ className: e, ...t }, n) => /* @__PURE__ */ u.jsx(
+    "div",
+    {
+      ref: n,
+      className: x("px-6 pt-6 pb-2 text-lg font-semibold", e),
+      ...t
+    }
+  )
+), D = f(
+  ({ className: e, ...t }, n) => /* @__PURE__ */ u.jsx(
+    "div",
+    {
+      ref: n,
+      className: x("px-6 py-4  flex justify-end gap-2", e),
+      ...t
+    }
+  )
+), V = f(
+  ({ className: e, ...t }, n) => /* @__PURE__ */ u.jsx("div", { ref: n, className: x("px-6 py-2", e), ...t })
+), A = f(
+  ({ onOverlayClick: e, ...t }, n) => /* @__PURE__ */ u.jsx(
+    "div",
+    {
+      ref: n,
+      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"
+    }
+  }
+), C = 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 R(e, t) {
+  m(() => {
+    if (t && e.current) {
+      const n = e.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      n.length && n[0].focus();
+    }
+  }, [t, e]);
+}
+function F(e, t) {
+  m(() => {
+    if (!e) return;
+    const n = (o) => {
+      o.key === "Escape" && t();
+    };
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [e, t]);
+}
+const L = 200, T = ({
+  isOpen: e,
+  onOpenChange: t,
+  size: n = "md",
+  placement: o = "center",
+  children: r,
+  disableOverlayClose: a,
+  disableEscClose: i,
+  ...s
+}) => {
+  const d = v(null), c = v(null), [p, l] = M(e), [h, b] = M(!1);
+  return m(() => {
+    if (e)
+      l(!0), b(!1), d.current = document.activeElement;
+    else if (p) {
+      b(!0);
+      const g = setTimeout(() => {
+        l(!1), b(!1), d.current && d.current.focus();
+      }, L);
+      return () => clearTimeout(g);
+    }
+  }, [e]), F(e && !i, () => {
+    t && t(!1);
+  }), R(c, e), /* @__PURE__ */ u.jsx(
+    A,
+    {
+      ref: c,
+      className: `${N({ placement: o })} transition-opacity duration-200 ease-in-out ` + (e && !h ? "opacity-100" : "opacity-0 pointer-events-none"),
+      onOverlayClick: (g) => {
+        g.target === c.current && !a && t && t(!1);
+      },
+      placement: o,
+      children: /* @__PURE__ */ u.jsx(
+        "div",
+        {
+          className: `${C({ size: n, placement: o })} transition-all duration-200 ease-in-out ` + (e && !h ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
+          role: "dialog",
+          ...s,
+          tabIndex: 0,
+          "aria-hidden": !e,
+          children: r
+        }
+      )
+    }
+  );
+}, _ = Object.assign(T, {
+  Header: z,
+  Body: V,
+  Footer: D
+}), E = j(null), w = () => {
+  const e = k(E);
+  if (!e)
+    throw new Error("useMenuContext must be used within a Menu component");
+  return e;
+}, S = y(
+  // 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"
+    }
+  }
+), q = y(
+  "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"
+    }
+  }
+), B = f(
+  ({ children: e, ...t }, n) => {
+    const { open: o, triggerRef: r } = w();
+    return /* @__PURE__ */ u.jsx(
+      "span",
+      {
+        ref: (a) => {
+          r.current = a, typeof n == "function" ? n(a) : n && (n.current = a);
+        },
+        "aria-haspopup": "menu",
+        "aria-expanded": o,
+        "aria-controls": "menu-content",
+        ...t,
+        children: e
+      }
+    );
+  }
+), H = f(
+  ({ children: e, className: t, ...n }, o) => {
+    const { open: r, contentRef: a, triggerRef: i, size: s } = w(), d = I();
+    let c = 0, p = 0;
+    if (i.current) {
+      const l = i.current.getBoundingClientRect();
+      c = l.bottom + window.scrollY + 4, p = l.left + window.scrollX;
+    }
+    return /* @__PURE__ */ u.jsx(
+      "div",
+      {
+        ref: (l) => {
+          a.current = l, typeof o == "function" ? o(l) : o && (o.current = l);
+        },
+        id: `menu-content-${d}`,
+        role: "menu",
+        tabIndex: -1,
+        "aria-hidden": !r,
+        className: x(
+          S({
+            size: s
+          }),
+          "absolute z-50 transition-opacity duration-150 ease-out",
+          r ? "opacity-100" : "opacity-0",
+          t
+        ),
+        style: {
+          minWidth: i.current?.offsetWidth,
+          top: c,
+          left: p
+        },
+        ...n,
+        children: r && e
+      }
+    );
+  }
+), K = f(
+  ({ children: e, disabled: t, className: n, ...o }, r) => {
+    const { size: a } = w();
+    return /* @__PURE__ */ u.jsx(
+      "button",
+      {
+        ref: r,
+        role: "menuitem",
+        tabIndex: 0,
+        disabled: t,
+        "aria-disabled": t,
+        className: x(
+          q({
+            size: a
+          }),
+          n
+        ),
+        ...o,
+        children: e
+      }
+    );
+  }
+);
+function $(e, t, n, o) {
+  m(() => {
+    if (!e) return;
+    function r(a) {
+      !t.current?.contains(a.target) && !n.current?.contains(a.target) && o();
+    }
+    return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+  }, [e, o, t, n]);
+}
+function U(e, t) {
+  m(() => {
+    if (e && t.current) {
+      const n = t.current.querySelectorAll('[role="menuitem"]');
+      n.length && n[0].focus();
+    }
+  }, [e, t]);
+}
+function W(e, t, n, o) {
+  m(() => {
+    if (!e || !t.current) return;
+    const r = t.current;
+    function a(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(), o(), n.current?.focus());
+    }
+    return r.addEventListener("keydown", a), () => r.removeEventListener("keydown", a);
+  }, [e, o, t, n]);
+}
+const P = ({
+  children: e,
+  isOpen: t,
+  onOutsideClick: n,
+  size: o = "md"
+}) => {
+  const r = v(null), a = v(null);
+  return $(t, a, r, n), U(t, a), W(t, a, r, n), /* @__PURE__ */ u.jsx(
+    E.Provider,
+    {
+      value: { open: t, triggerRef: r, contentRef: a, size: o },
+      children: e
+    }
+  );
+}, G = Object.assign(P, {
+  Trigger: B,
+  Content: H,
+  Item: K
+});
+export {
+  G as M,
+  _ as a
+};

package/dist/navigation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './breadcrumbs';
+export * from './tabs';

package/dist/navigation/index.js

@@ -0,0 +1,5 @@
+import { B as s, T as b } from "../tabs-KyFmo5cA.js";
+export {
+  s as Breadcrumbs,
+  b as Tabs
+};

package/dist/{components → navigation}/tabs/types.d.ts

@@ -9,6 +9,8 @@ export interface TabsContextValue {
     setActiveTab: (tab: string) => void;
     /** Default color for triggers */
     color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral';
+    /** Variant for tab style */
+    variant?: 'underline' | 'filled';
 }
 /**
  * TabsRootProps: Props for Tabs root
@@ -20,6 +22,8 @@ export interface TabsRootProps extends HTMLAttributes<HTMLDivElement> {
     onValueChange: (tab: string) => void;
     /** Color for triggers */
     color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral';
+    /** Variant for tab style */
+    variant?: 'underline' | 'filled';
     /** Children: Tabs.Trigger */
     children: ReactNode;
 }

package/dist/overlays/index.d.ts

@@ -0,0 +1,3 @@
+export * from './drawer';
+export * from './menu';
+export * from './modal';

package/dist/overlays/index.js

@@ -0,0 +1,7 @@
+import { D as o } from "../drawer-Cn7sreJG.js";
+import { M as s, a as M } from "../menu--hEHXVZf.js";
+export {
+  o as Drawer,
+  s as Menu,
+  M as Modal
+};

package/dist/{components → overlays}/menu/menu.atoms.d.ts

@@ -3,7 +3,7 @@ import { MenuTriggerProps, MenuContentProps, MenuItemProps } from './types';
 /**
  * MenuTrigger: Button to open/close menu
  */
-export declare const MenuTrigger: React.ForwardRefExoticComponent<MenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const MenuTrigger: React.ForwardRefExoticComponent<MenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
 /**
  * MenuContent: Menu popup, positioned below trigger
  */

package/dist/{components → overlays}/menu/menu.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { MenuRootProps } from './types';
 export declare const Menu: React.FC<MenuRootProps> & {
-    Trigger: React.ForwardRefExoticComponent<import('./types').MenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Trigger: React.ForwardRefExoticComponent<import('./types').MenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
     Content: React.ForwardRefExoticComponent<import('./types').MenuContentProps & React.RefAttributes<HTMLDivElement>>;
     Item: React.ForwardRefExoticComponent<import('./types').MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
 };

package/dist/{components → overlays}/menu/types.d.ts

@@ -16,7 +16,7 @@ export interface MenuRootProps {
 /**
  * Props for MenuTrigger
  */
-export interface MenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface MenuTriggerProps extends HTMLAttributes<HTMLSpanElement> {
     /** Trigger content */
     children: ReactNode;
 }

package/dist/primitive/brand/brand.atoms.d.ts

@@ -0,0 +1,6 @@
+import { BrandAtomProps } from './types';
+/**
+ * Atom: BrandLogo
+ * Handles SVG rendering and shape at SVG level
+ */
+export declare const BrandLogo: import('react').ForwardRefExoticComponent<BrandAtomProps & import('react').RefAttributes<SVGSVGElement>>;

package/dist/primitive/brand/brand.d.ts

@@ -0,0 +1,8 @@
+import { BrandProps } from './types';
+/**
+ * Brand component for displaying app identity icon and name
+ *
+ * @param {BrandProps} props - Brand component props
+ * @returns {JSX.Element}
+ */
+export declare const Brand: import('react').ForwardRefExoticComponent<BrandProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/primitive/brand/index.d.ts

@@ -0,0 +1,2 @@
+export { Brand } from './brand';
+export type * from './types';

package/dist/primitive/brand/types.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Props for the Brand component
+ */
+export interface BrandProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The app name to display (predefined, default: 'spenicle')
+     */
+    name: 'spenicle';
+    /**
+     * The size of the brand icon and text
+     * @default 'md'
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'square' | 'rounded' | 'circle';
+}
+export type BrandAtomProps = Pick<BrandProps, 'shape' | 'size'>;

package/dist/{components → primitive}/button-icon/types.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
-import { IconProps } from '../icon/types';
+import { IconProps } from '../icon';
 /**
  * ButtonIconProps defines the props for the ButtonIcon component
  * @property as - Icon component to render inside the button (e.g., from lucide-react)

package/dist/primitive/index.d.ts

@@ -0,0 +1,14 @@
+export * from './alert';
+export * from './avatar';
+export * from './badge';
+export * from './brand';
+export * from './button';
+export * from './button-float';
+export * from './button-icon';
+export * from './calculator';
+export * from './calendar';
+export * from './icon';
+export * from './snackbar';
+export * from './table';
+export * from './text';
+export * from './tile';

package/dist/primitive/index.js

@@ -0,0 +1,18 @@
+import { A as t, a as o, B as r, b as e, c as n, S as l, T as B, d as c } from "../tile-BinjKW_i.js";
+import { B as b, a as d, C as u, b as x, I as A, T as C } from "../calendar-DwRERSxq.js";
+export {
+  t as Alert,
+  o as Avatar,
+  r as Badge,
+  e as Brand,
+  b as Button,
+  n as ButtonFloat,
+  d as ButtonIcon,
+  u as Calculator,
+  x as Calendar,
+  A as Icon,
+  l as Snackbar,
+  B as Table,
+  C as Text,
+  c as Tile
+};