@dimasbaguspm/versaur 0.0.22 → 0.0.24

package/dist/js/top-bar-COx4DTbS.js

@@ -0,0 +1,608 @@
+import { c as i, j as s, a as l } from "./index-DOdDlCoL.js";
+import * as v from "react";
+import { forwardRef as n } from "react";
+import "./image-rectangle-GA3oWX7A.js";
+import "./snackbar-DH8jCh2V.js";
+import { T as d } from "./text-CRsIInRA.js";
+const h = i(
+  "w-full flex flex-wrap items-center pt-3 mb-3 gap-2 bg-white [&>[data-versaur-appbar-bottom]]:basis-full [&>[data-versaur-appbar-bottom]]:w-full [&:has([data-versaur-appbar-bottom])>[data-versaur-appbar-leading]]:pl-4 [&:has([data-versaur-appbar-bottom])>[data-versaur-appbar-trailing]]:pr-4 [&:not(:has([data-versaur-appbar-bottom]))]:px-4",
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+), j = i(
+  "flex flex-col justify-center min-w-0 flex-grow",
+  {
+    variants: {
+      placement: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end"
+      }
+    },
+    defaultVariants: {
+      placement: "start"
+    }
+  }
+), y = n(
+  ({ children: t, className: a }, e) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: e,
+      "data-versaur-appbar-bottom": !0,
+      className: l("w-full flex items-center min-h-[2.5rem] mt-2", a),
+      children: t
+    }
+  )
+), B = n(
+  ({ children: t, className: a }, e) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: e,
+      className: l("flex items-center", a),
+      "data-versaur-appbar-leading": !0,
+      children: t
+    }
+  )
+), w = n(({ children: t, ...a }, e) => /* @__PURE__ */ s.jsx(
+  d,
+  {
+    ...a,
+    as: "h1",
+    ref: e,
+    fontSize: "lg",
+    fontWeight: "semibold",
+    ellipsis: !0,
+    clamp: 1,
+    children: t
+  }
+)), N = n(({ children: t, ...a }, e) => /* @__PURE__ */ s.jsx(
+  d,
+  {
+    ...a,
+    ref: e,
+    as: "p",
+    fontSize: "xs",
+    fontWeight: "normal",
+    ellipsis: !0,
+    clamp: 1,
+    color: "gray",
+    children: t
+  }
+)), V = n(
+  ({ children: t, className: a }, e) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: e,
+      className: l("flex items-center justify-end gap-2", a),
+      "data-versaur-appbar-trailing": !0,
+      children: t
+    }
+  )
+), T = n(
+  ({ children: t, className: a, placement: e }, r) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: r,
+      className: l(j({ placement: e }), a),
+      children: t
+    }
+  )
+), S = ({
+  children: t,
+  className: a,
+  variant: e = "primary"
+}) => /* @__PURE__ */ s.jsx(
+  "header",
+  {
+    className: l(h({ variant: e }), a),
+    role: "banner",
+    children: t
+  }
+), ya = Object.assign(S, {
+  Leading: B,
+  Headline: w,
+  Subtitle: N,
+  Trailing: V,
+  Center: T,
+  Bottom: y
+}), H = i(
+  "sticky bottom-0 left-0 w-full flex justify-between items-center bg-white border-t border-border shadow-xs z-40 safe-bottom px-8 py-1",
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: "",
+        ghost: "",
+        neutral: "",
+        tertiary: ""
+      },
+      size: {
+        sm: "h-12 text-sm",
+        md: "h-16 text-base",
+        lg: "h-20 text-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+), A = i(
+  "flex flex-col items-center justify-center gap-1 px-2 py-1",
+  {
+    variants: {
+      active: {
+        true: "font-semibold text-primary",
+        false: "text-ghost"
+      }
+    },
+    defaultVariants: {
+      active: !1
+    }
+  }
+), L = n(
+  ({ icon: t, label: a, active: e = !1, className: r, ...o }, c) => /* @__PURE__ */ s.jsxs(
+    "div",
+    {
+      ref: c,
+      "aria-current": e ? "page" : void 0,
+      className: A({ active: e, className: r }),
+      ...o,
+      children: [
+        t,
+        a && /* @__PURE__ */ s.jsx("span", { className: "text-xs mt-0.5", children: a })
+      ]
+    }
+  )
+), P = ({
+  children: t,
+  variant: a = "primary",
+  size: e = "md",
+  className: r,
+  ...o
+}) => /* @__PURE__ */ s.jsx(
+  "nav",
+  {
+    role: "navigation",
+    "aria-label": "Bottom navigation",
+    className: H({ variant: a, size: e, className: r }),
+    ...o,
+    children: t
+  }
+), Ba = Object.assign(P, {
+  Item: L
+}), C = i("flex", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col"
+    },
+    alignment: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    gap: {
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-3",
+      lg: "gap-4",
+      xl: "gap-6"
+    },
+    fluid: {
+      true: "[&>*]:flex-1",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    alignment: "start",
+    gap: "md",
+    fluid: !1
+  }
+}), wa = n(
+  function({
+    className: a,
+    children: e,
+    orientation: r = "horizontal",
+    alignment: o = "start",
+    gap: c = "md",
+    fluid: p = !1,
+    ...m
+  }, x) {
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: x,
+        className: l(
+          C({
+            orientation: r,
+            alignment: o,
+            gap: c,
+            fluid: p
+          }),
+          a
+        ),
+        role: "group",
+        ...m,
+        children: e
+      }
+    );
+  }
+), z = i("w-full px-4 sm:px-6 py-6 sm:py-8"), Na = n(
+  ({ children: t, className: a, ...e }, r) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: r,
+      className: l(z(), a),
+      ...e,
+      children: t
+    }
+  )
+), R = i("w-full"), I = i(
+  "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 px-4 sm:px-6 mb-4"
+), k = i("mb-4 px-4 sm:px-6"), F = i(
+  "flex-1 min-w-0 flex flex-col gap-2 w-full sm:w-auto"
+), G = i("flex items-center gap-2 flex-wrap"), O = i(
+  "flex flex-col sm:flex-row gap-2 sm:gap-3 w-full sm:w-auto sm:ml-auto sm:shrink-0 [&>*]:w-full sm:[&>*]:w-auto"
+), W = i(
+  "w-full flex items-center px-4 sm:px-6 py-0 overflow-x-auto"
+), M = n(
+  ({ children: t, className: a, ...e }, r) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: r,
+      className: l(I(), a),
+      "data-versaur-page-header-top": !0,
+      ...e,
+      children: t
+    }
+  )
+), E = n(({ children: t, className: a, ...e }, r) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    ref: r,
+    className: l(k(), a),
+    "data-versaur-page-header-breadcrumbs": !0,
+    ...e,
+    children: t
+  }
+)), $ = n(({ children: t, className: a, ...e }, r) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    ref: r,
+    className: l(F(), a),
+    "data-versaur-page-header-content": !0,
+    ...e,
+    children: t
+  }
+)), q = n((t, a) => /* @__PURE__ */ s.jsx(
+  d,
+  {
+    ...t,
+    as: "h1",
+    fontSize: "xl",
+    fontWeight: "semibold",
+    ellipsis: !0,
+    ref: a
+  }
+)), D = n(({ className: t, ...a }, e) => /* @__PURE__ */ s.jsx(
+  d,
+  {
+    as: "p",
+    fontSize: "sm",
+    fontWeight: "normal",
+    clamp: 2,
+    ref: e,
+    className: l("mb-2 sm:clamp-3", t),
+    ...a
+  }
+)), J = n(({ children: t, className: a, ...e }, r) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    ref: r,
+    className: l(G(), a),
+    "data-versaur-page-header-badges": !0,
+    ...e,
+    children: t
+  }
+)), K = n(({ children: t, className: a, ...e }, r) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    ref: r,
+    className: l(O(), a),
+    "data-versaur-page-header-actions": !0,
+    ...e,
+    children: t
+  }
+)), Q = n(({ children: t, className: a, ...e }, r) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    ref: r,
+    className: l(W(), a),
+    "data-versaur-page-header-bottom": !0,
+    ...e,
+    children: t
+  }
+)), U = n(
+  ({
+    children: t,
+    className: a,
+    title: e,
+    subtitle: r,
+    breadcrumbs: o,
+    badges: c,
+    actions: p,
+    tabs: m,
+    ...x
+  }, u) => {
+    const g = e || r || o || c || p, b = m;
+    return /* @__PURE__ */ s.jsxs(
+      "header",
+      {
+        ref: u,
+        className: l(R(), a),
+        role: "banner",
+        ...x,
+        children: [
+          o && /* @__PURE__ */ s.jsx(E, { children: o }),
+          g && /* @__PURE__ */ s.jsxs(M, { children: [
+            /* @__PURE__ */ s.jsxs($, { children: [
+              e && /* @__PURE__ */ s.jsx(q, { children: e }),
+              r && /* @__PURE__ */ s.jsx(D, { children: r }),
+              c && /* @__PURE__ */ s.jsx(J, { children: c })
+            ] }),
+            p && /* @__PURE__ */ s.jsx(K, { children: p })
+          ] }),
+          b && /* @__PURE__ */ s.jsx(Q, { children: m }),
+          t
+        ]
+      }
+    );
+  }
+), Va = U, X = i("w-full mx-auto relative", {
+  variants: {
+    type: {
+      desktop: "max-w-7xl px-6 pb-10",
+      tablet: "max-w-3xl px-4",
+      mobile: "w-full"
+    }
+  },
+  defaultVariants: {
+    type: "desktop"
+  }
+}), Ta = v.forwardRef(
+  function({ type: a = "desktop", className: e, children: r, ...o }, c) {
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: c,
+        className: l(X({ type: a }), e),
+        ...o,
+        children: r
+      }
+    );
+  }
+), Y = i("grid w-full gap-4 grid-cols-12"), Z = i("", {
+  variants: {
+    span: {
+      1: "col-span-1",
+      2: "col-span-2",
+      3: "col-span-3",
+      4: "col-span-4",
+      5: "col-span-5",
+      6: "col-span-6",
+      7: "col-span-7",
+      8: "col-span-8",
+      9: "col-span-9",
+      10: "col-span-10",
+      11: "col-span-11",
+      12: "col-span-12"
+    }
+  },
+  defaultVariants: {
+    span: "4"
+  }
+}), _ = n(
+  function({ className: a, children: e, ...r }, o) {
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: o,
+        className: l(Y(), a),
+        ...r,
+        children: e
+      }
+    );
+  }
+), aa = n(
+  function({ span: a = 4, className: e, children: r, ...o }, c) {
+    const p = Math.min(12, Math.max(1, a));
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: c,
+        className: l(
+          Z({ span: `${p}` }),
+          e
+        ),
+        ...o,
+        children: r
+      }
+    );
+  }
+), Sa = Object.assign(_, {
+  Column: aa
+}), f = i(
+  "flex items-center gap-2 px-4 py-2 rounded-md hover:text-primary focus:outline-none transition-colors",
+  {
+    variants: {
+      active: {
+        true: "bg-primary/10 text-primary",
+        false: "text-ghost"
+      },
+      disabled: {
+        true: "opacity-50 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      active: !1,
+      disabled: !1
+    }
+  }
+), ea = n(
+  (t, a) => {
+    const { icon: e, children: r, href: o, onClick: c, active: p, ...m } = t;
+    if (typeof o == "string") {
+      const u = m;
+      return /* @__PURE__ */ s.jsx("li", { children: /* @__PURE__ */ s.jsxs(
+        "a",
+        {
+          ref: a,
+          href: o,
+          className: f({
+            disabled: !!t["aria-disabled"],
+            active: p
+          }),
+          ...u,
+          children: [
+            e,
+            /* @__PURE__ */ s.jsx(d, { as: "span", color: "inherit", fontSize: "sm", children: r })
+          ]
+        }
+      ) });
+    } else {
+      const u = m;
+      return /* @__PURE__ */ s.jsx("li", { children: /* @__PURE__ */ s.jsxs(
+        "button",
+        {
+          ref: a,
+          type: "button",
+          onClick: c,
+          className: l(
+            f({ disabled: !!u.disabled, active: p }),
+            "w-full text-left"
+          ),
+          ...u,
+          children: [
+            e,
+            /* @__PURE__ */ s.jsx(d, { as: "span", color: "inherit", fontSize: "sm", children: r })
+          ]
+        }
+      ) });
+    }
+  }
+), ta = n(
+  function({ children: a, label: e, ...r }, o) {
+    return /* @__PURE__ */ s.jsxs("li", { ref: o, className: "flex flex-col gap-2 mt-2", ...r, children: [
+      /* @__PURE__ */ s.jsx(
+        d,
+        {
+          as: "h2",
+          fontSize: "xs",
+          fontWeight: "semibold",
+          color: "gray",
+          className: "px-2",
+          children: e
+        }
+      ),
+      /* @__PURE__ */ s.jsx("ul", { className: "flex flex-col gap-1", children: a })
+    ] });
+  }
+), sa = n(
+  ({ children: t, ...a }, e) => /* @__PURE__ */ s.jsx(
+    "nav",
+    {
+      ref: e,
+      className: "w-56 bg-background border-r border-border flex flex-col my-2",
+      "aria-label": "Sidebar",
+      ...a,
+      children: /* @__PURE__ */ s.jsx("div", { className: "flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-background", children: /* @__PURE__ */ s.jsx("ul", { className: "flex flex-col gap-1 mx-2", children: t }) })
+    }
+  )
+), Ha = Object.assign(sa, {
+  Item: ea,
+  Group: ta
+}), ra = i(
+  "w-full flex items-center px-6 py-4 mb-6 border-b border-border shadow-xs bg-white",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+), oa = i("flex items-center gap-3 min-w-0 flex-1"), na = i("flex items-center gap-2 ml-auto"), ia = i(
+  "px-2.5 py-1.5 rounded-md text-sm cursor-pointer transition-colors",
+  {
+    variants: {
+      active: {
+        true: "bg-primary/10 text-primary",
+        false: "hover:text-primary text-ghost"
+      }
+    },
+    defaultVariants: {
+      active: !1
+    }
+  }
+), la = i("flex items-center gap-2 ml-4"), ca = i("flex items-center gap-2 mr-4"), pa = n(
+  function({ children: a, className: e, ...r }, o) {
+    return /* @__PURE__ */ s.jsx("nav", { ref: o, className: la({ className: e }), ...r, children: a });
+  }
+), ma = n(
+  function({ children: a, className: e, ...r }, o) {
+    return /* @__PURE__ */ s.jsx("div", { ref: o, className: ca({ className: e }), ...r, children: a });
+  }
+), da = n(
+  function({ children: a, className: e, ...r }, o) {
+    return /* @__PURE__ */ s.jsx("div", { ref: o, className: oa({ className: e }), ...r, children: a });
+  }
+), ua = n(
+  function({ children: a, className: e, ...r }, o) {
+    return /* @__PURE__ */ s.jsx("div", { ref: o, className: na({ className: e }), ...r, children: a });
+  }
+), xa = n(
+  function({ children: a, className: e, active: r, ...o }, c) {
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: c,
+        className: ia({ active: r, className: e }),
+        "aria-current": r ? "page" : void 0,
+        ...o,
+        children: a
+      }
+    );
+  }
+), fa = n(
+  ({ children: t, className: a, ...e }, r) => /* @__PURE__ */ s.jsx("header", { ref: r, className: ra({ className: a }), ...e, children: t })
+), Aa = Object.assign(fa, {
+  Leading: da,
+  Trailing: ua,
+  NavItem: xa,
+  Nav: pa,
+  Actions: ma
+});
+export {
+  ya as A,
+  Ba as B,
+  Sa as F,
+  Na as P,
+  Ha as S,
+  Aa as T,
+  wa as a,
+  Va as b,
+  Ta as c
+};

package/dist/types/layouts/button-group/button-group.d.ts

@@ -0,0 +1,27 @@
+import { ButtonGroupProps } from './types';
+/**
+ * ButtonGroup provides layout management for buttons with control over
+ * positioning, alignment, and fluid behavior
+ *
+ * @example
+ * <ButtonGroup alignment="center" gap="sm">
+ *   <Button variant="primary">Save</Button>
+ *   <Button variant="ghost">Cancel</Button>
+ * </ButtonGroup>
+ *
+ * @example
+ * // Vertical button group
+ * <ButtonGroup orientation="vertical" fluid>
+ *   <Button variant="primary">Save</Button>
+ *   <Button variant="secondary">Save as Draft</Button>
+ *   <Button variant="ghost">Cancel</Button>
+ * </ButtonGroup>
+ *
+ * @example
+ * // Fluid buttons with space between
+ * <ButtonGroup alignment="between" fluid>
+ *   <Button variant="ghost">Back</Button>
+ *   <Button variant="primary">Next</Button>
+ * </ButtonGroup>
+ */
+export declare const ButtonGroup: import('react').ForwardRefExoticComponent<ButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/layouts/button-group/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './button-group';
+export type { ButtonGroupProps } from './types';

package/dist/types/layouts/button-group/types.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from '../../utils/variants';
+import { buttonGroupVariants } from './helpers';
+/**
+ * Props for the ButtonGroup component
+ */
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof buttonGroupVariants> {
+    /**
+     * Children (should be Button components)
+     */
+    children: ReactNode;
+    /**
+     * Alignment of buttons within the group
+     * @default 'start'
+     */
+    alignment?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    /**
+     * Whether buttons should be fluid (full width)
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Orientation of the button group
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Size of the gap between buttons
+     * @default 'md'
+     */
+    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}

package/dist/types/layouts/index.d.ts

@@ -1,6 +1,9 @@
 export * from './app-bar';
 export * from './bottom-bar';
-export * from './top-bar';
+export * from './button-group';
+export * from './page-content';
+export * from './page-header';
 export * from './page-layout';
 export * from './form-layout';
 export * from './side-bar';
+export * from './top-bar';

package/dist/types/layouts/page-content/index.d.ts

@@ -0,0 +1,2 @@
+export { PageContent } from './page-content';
+export type { PageContentProps } from './types';

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

@@ -0,0 +1,15 @@
+import { PageContentProps } from './types';
+/**
+ * PageContent - Layout component for page content areas
+ *
+ * Provides consistent horizontal spacing that matches the page-header
+ * component, with additional vertical padding for proper content separation.
+ * Designed to be used as a sibling to PageHeader for consistent page layouts.
+ *
+ * Key features:
+ * - Horizontal padding matches page-header (px-4 sm:px-6)
+ * - Additional vertical padding for content separation (py-6 sm:py-8)
+ * - Mobile-first responsive design
+ * - Full width container
+ */
+export declare const PageContent: import('react').ForwardRefExoticComponent<PageContentProps & import('react').RefAttributes<HTMLDivElement>>;