@dimasbaguspm/versaur 0.0.7 → 0.0.9

package/dist/{components → layouts}/app-bar/app-bar.atoms.d.ts

@@ -1,4 +1,8 @@
-import { AppBarLeadingProps, AppBarHeadlineProps, AppBarSubtitleProps, AppBarTrailingProps, AppBarCenterProps } from './types';
+import { AppBarLeadingProps, AppBarHeadlineProps, AppBarSubtitleProps, AppBarTrailingProps, AppBarCenterProps, AppBarBottomProps } from './types';
+/**
+ * Bottom section (flexible area for additional content, e.g. tabs)
+ */
+export declare const AppBarBottom: import('react').ForwardRefExoticComponent<AppBarBottomProps & import('react').RefAttributes<HTMLDivElement>>;
 /**
  * Leading section (logo, nav icon)
  */

package/dist/{components → layouts}/app-bar/app-bar.d.ts

@@ -5,4 +5,5 @@ export declare const AppBar: (({ children, className, variant, }: AppBarProps) =
     Subtitle: import('react').ForwardRefExoticComponent<import('./types').AppBarSubtitleProps & import('react').RefAttributes<HTMLDivElement>>;
     Trailing: import('react').ForwardRefExoticComponent<import('./types').AppBarTrailingProps & import('react').RefAttributes<HTMLDivElement>>;
     Center: import('react').ForwardRefExoticComponent<import('./types').AppBarCenterProps & import('react').RefAttributes<HTMLDivElement>>;
+    Bottom: import('react').ForwardRefExoticComponent<import('./types').AppBarBottomProps & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/{components → layouts}/app-bar/types.d.ts

@@ -37,3 +37,9 @@ export interface AppBarProps extends HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral';
 }
+/**
+ * Props for AppBarBottom (bottom area for additional content)
+ */
+export interface AppBarBottomProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}

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/layouts/page-layout/index.d.ts

@@ -0,0 +1 @@
+export * from './page-layout';

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

@@ -0,0 +1,8 @@
+import { PageLayoutProps } from './types';
+import * as React from 'react';
+/**
+ * PageLayout component for consistent responsive layout breakpoints
+ *
+ * @group Layout
+ */
+export declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,20 @@
+/**
+ * Props for the PageLayout component
+ */
+export interface PageLayoutProps {
+    /**
+     * The layout type to use for breakpoint consistency
+     * - 'desktop': For large screens (default)
+     * - 'tablet': For medium screens
+     * - 'mobile': For small screens
+     */
+    type?: 'desktop' | 'tablet' | 'mobile';
+    /**
+     * Content to render inside the layout
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class names to apply to the root element
+     */
+    className?: string;
+}

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/drawer/index.d.ts

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

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

@@ -1,6 +1,10 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { VariantProps } from '../../utils/variants';
 import { drawerVariants } from './helpers';
+/**
+ * Drawer transition type options
+ */
+export type DrawerTransitionType = 'slide' | 'fade';
 /**
  * Base drawer variant props derived from the drawer variants
  */
@@ -31,6 +35,8 @@ export interface DrawerContextValue {
     size: DrawerSize;
     /** Drawer variant */
     variant: DrawerVariant;
+    /** Drawer transition type */
+    transitionType: DrawerTransitionType;
 }
 /**
  * Props for the Drawer component (controlled component)
@@ -46,6 +52,8 @@ export interface DrawerProps extends ComponentPropsWithoutRef<'div'> {
     size?: DrawerSize;
     /** Drawer variant */
     variant?: DrawerVariant;
+    /** Drawer transition type */
+    transitionType?: DrawerTransitionType;
     /** Children components */
     children: ReactNode;
     /** Additional CSS classes */

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/primitive/button-float/use-floating-position.d.ts

@@ -0,0 +1,12 @@
+import { RefCallback, CSSProperties } from 'react';
+/**
+ * useFloatingPositionSticky
+ * Determines the correct positioning and style for a floating element that should always be visible
+ * at the bottom right of a scrollable container, even if the container is taller than the viewport.
+ *
+ * Returns:
+ *   - containerRef: attach to the container div
+ *   - style: CSSProperties for the button (position, bottom, right, transform)
+ *   - positionClass: string for Tailwind/utility classes
+ */
+export declare function useFloatingPosition(side: 'right' | 'left', offset?: string): [RefCallback<HTMLDivElement>, CSSProperties, string];

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/calculator/calculator.atoms.d.ts

@@ -0,0 +1,2 @@
+import { CalculatorButtonProps } from './types';
+export declare const CalculatorButton: import('react').ForwardRefExoticComponent<CalculatorButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/primitive/calculator/calculator.d.ts

@@ -0,0 +1,2 @@
+import { CalculatorProps } from './types';
+export declare const Calculator: import('react').ForwardRefExoticComponent<CalculatorProps & import('react').RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,29 @@
+import { ButtonHTMLAttributes } from 'react';
+/**
+ * Props for Calculator component
+ */
+export interface CalculatorProps {
+    /**
+     * Initial value to display in the calculator input
+     */
+    initialValue?: string | number;
+    /**
+     * Callback when the value changes (on equals or input)
+     */
+    onChange?: (value: string) => void;
+    /**
+     * If true, disables all calculator input
+     */
+    disabled?: boolean;
+    /**
+     * Optional className for the calculator root
+     */
+    className?: string;
+    /**
+     * Optional aria-label for accessibility
+     */
+    'aria-label'?: string;
+}
+export interface CalculatorButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'default' | 'action' | 'operator' | 'danger';
+}

package/dist/primitive/calculator/use-calculator.d.ts

@@ -0,0 +1,11 @@
+export interface UseCalculatorOptions {
+    initialValue?: string | number;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+}
+export declare function useCalculator({ initialValue, disabled, onChange, }: UseCalculatorOptions): {
+    input: string;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
+    handleButton: (val: string) => void;
+    handleInput: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};

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';