@dimasbaguspm/versaur 0.0.22 → 0.0.24

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

@@ -0,0 +1,14 @@
+import { ReactNode, HTMLAttributes } from 'react';
+/**
+ * Props for PageContent main container
+ *
+ * A layout component that provides consistent horizontal spacing
+ * matching the page-header component, with additional vertical
+ * padding for content separation
+ */
+export interface PageContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content to be displayed inside the page content area
+     */
+    children?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { PageHeader } from './page-header';
+export * from './types';

package/dist/types/layouts/page-header/page-header.atoms.d.ts

@@ -0,0 +1,35 @@
+import { PageHeaderTopProps, PageHeaderBreadcrumbsProps, PageHeaderContentProps, PageHeaderBadgesProps, PageHeaderActionsProps, PageHeaderBottomProps } from './types';
+/**
+ * PageHeaderTop - main header area containing breadcrumbs, content, and actions
+ */
+export declare const PageHeaderTop: import('react').ForwardRefExoticComponent<PageHeaderTopProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * PageHeaderBreadcrumbs - breadcrumbs section
+ */
+export declare const PageHeaderBreadcrumbs: import('react').ForwardRefExoticComponent<PageHeaderBreadcrumbsProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * PageHeaderContent - content area for title, subtitle, and badges
+ */
+export declare const PageHeaderContent: import('react').ForwardRefExoticComponent<PageHeaderContentProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * PageHeaderTitle - main title heading
+ * Responsive font size: smaller on mobile, larger on desktop
+ */
+export declare const PageHeaderTitle: import('react').ForwardRefExoticComponent<import('../../primitive').TextProps & import('react').RefAttributes<HTMLHeadingElement>>;
+/**
+ * PageHeaderSubtitle - subtitle/description text
+ * Responsive font size and line clamping for mobile
+ */
+export declare const PageHeaderSubtitle: import('react').ForwardRefExoticComponent<import('../../primitive').TextProps & import('react').RefAttributes<HTMLParagraphElement>>;
+/**
+ * PageHeaderBadges - badges container
+ */
+export declare const PageHeaderBadges: import('react').ForwardRefExoticComponent<PageHeaderBadgesProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * PageHeaderActions - actions section for buttons and button groups
+ */
+export declare const PageHeaderActions: import('react').ForwardRefExoticComponent<PageHeaderActionsProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * PageHeaderBottom - bottom section for tabs and filters
+ */
+export declare const PageHeaderBottom: import('react').ForwardRefExoticComponent<PageHeaderBottomProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { PageHeaderProps } from './types';
+/**
+ * PageHeader - Compound layout component for page headers
+ *
+ * Provides a flexible layout system for page headers that can include:
+ * - Breadcrumbs navigation
+ * - Title and subtitle
+ * - Status badges
+ * - Action buttons and button groups
+ * - Bottom tabs or filters
+ */
+interface PageHeaderRootProps extends Omit<PageHeaderProps, 'title'> {
+    /**
+     * Simplified API: Page title
+     */
+    title: ReactNode;
+    /**
+     * Simplified API: Page subtitle/description
+     */
+    subtitle?: ReactNode;
+    /**
+     * Simplified API: Breadcrumbs navigation component
+     */
+    breadcrumbs?: ReactNode;
+    /**
+     * Simplified API: Status badges
+     */
+    badges?: ReactNode;
+    /**
+     * Simplified API: Action buttons/button groups
+     */
+    actions?: ReactNode;
+    /**
+     * Simplified API: Bottom content (tabs, filters)
+     */
+    tabs?: ReactNode;
+}
+export declare const PageHeader: import('react').ForwardRefExoticComponent<PageHeaderRootProps & import('react').RefAttributes<HTMLElement>>;
+export {};

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

@@ -0,0 +1,52 @@
+import { TextProps } from '../../primitive';
+import { ReactNode, HTMLAttributes } from 'react';
+/**
+ * Props for PageHeader main container
+ */
+export interface PageHeaderProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+/**
+ * Props for PageHeaderTop - main header area (breadcrumbs, title, actions)
+ */
+export interface PageHeaderTopProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * Props for PageHeaderBreadcrumbs - breadcrumbs section
+ */
+export interface PageHeaderBreadcrumbsProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * Props for PageHeaderContent - title and subtitle area
+ */
+export interface PageHeaderContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * Props for PageHeaderTitle - main title
+ */
+export type PageHeaderTitleProps = TextProps;
+/**
+ * Props for PageHeaderSubtitle - subtitle/description
+ */
+export type PageHeaderSubtitleProps = TextProps;
+/**
+ * Props for PageHeaderBadges - badges section
+ */
+export interface PageHeaderBadgesProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * Props for PageHeaderActions - actions section (buttons, button groups)
+ */
+export interface PageHeaderActionsProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * Props for PageHeaderBottom - bottom section (tabs, filters, etc.)
+ */
+export interface PageHeaderBottomProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}

package/dist/utils/enforce-subpath-import.js

@@ -29,7 +29,10 @@ const symbolToSubpath = {
   "TimePickerInput": "forms",
   "AppBar": "layouts",
   "BottomBar": "layouts",
+  "ButtonGroup": "layouts",
   "FormLayout": "layouts",
+  "PageContent": "layouts",
+  "PageHeader": "layouts",
   "PageLayout": "layouts",
   "SideBar": "layouts",
   "TopBar": "layouts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimasbaguspm/versaur",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",

package/dist/js/side-bar-li3CbgUw.js

@@ -1,413 +0,0 @@
-import { c as i, j as s, a as c } from "./index-DOdDlCoL.js";
-import * as f from "react";
-import { forwardRef as n } from "react";
-import "./image-rectangle-C6cgL8R9.js";
-import "./snackbar-DH8jCh2V.js";
-import { T as p } from "./text-CRsIInRA.js";
-const b = 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"
-    }
-  }
-), g = 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"
-    }
-  }
-), v = n(
-  ({ children: e, className: a }, t) => /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      ref: t,
-      "data-versaur-appbar-bottom": !0,
-      className: c("w-full flex items-center min-h-[2.5rem] mt-2", a),
-      children: e
-    }
-  )
-), y = n(
-  ({ children: e, className: a }, t) => /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      ref: t,
-      className: c("flex items-center", a),
-      "data-versaur-appbar-leading": !0,
-      children: e
-    }
-  )
-), h = n(({ children: e, ...a }, t) => /* @__PURE__ */ s.jsx(
-  p,
-  {
-    ...a,
-    as: "h1",
-    ref: t,
-    fontSize: "lg",
-    fontWeight: "semibold",
-    ellipsis: !0,
-    clamp: 1,
-    children: e
-  }
-)), B = n(({ children: e, ...a }, t) => /* @__PURE__ */ s.jsx(
-  p,
-  {
-    ...a,
-    ref: t,
-    as: "p",
-    fontSize: "xs",
-    fontWeight: "normal",
-    ellipsis: !0,
-    clamp: 1,
-    color: "gray",
-    children: e
-  }
-)), j = n(
-  ({ children: e, className: a }, t) => /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      ref: t,
-      className: c("flex items-center justify-end gap-2", a),
-      "data-versaur-appbar-trailing": !0,
-      children: e
-    }
-  )
-), N = n(
-  ({ children: e, className: a, placement: t }, r) => /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      ref: r,
-      className: c(g({ placement: t }), a),
-      children: e
-    }
-  )
-), w = ({
-  children: e,
-  className: a,
-  variant: t = "primary"
-}) => /* @__PURE__ */ s.jsx(
-  "header",
-  {
-    className: c(b({ variant: t }), a),
-    role: "banner",
-    children: e
-  }
-), ta = Object.assign(w, {
-  Leading: y,
-  Headline: h,
-  Subtitle: B,
-  Trailing: j,
-  Center: N,
-  Bottom: v
-}), S = 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"
-    }
-  }
-), T = 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: e, label: a, active: t = !1, className: r, ...o }, l) => /* @__PURE__ */ s.jsxs(
-    "div",
-    {
-      ref: l,
-      "aria-current": t ? "page" : void 0,
-      className: T({ active: t, className: r }),
-      ...o,
-      children: [
-        e,
-        a && /* @__PURE__ */ s.jsx("span", { className: "text-xs mt-0.5", children: a })
-      ]
-    }
-  )
-), V = ({
-  children: e,
-  variant: a = "primary",
-  size: t = "md",
-  className: r,
-  ...o
-}) => /* @__PURE__ */ s.jsx(
-  "nav",
-  {
-    role: "navigation",
-    "aria-label": "Bottom navigation",
-    className: S({ variant: a, size: t, className: r }),
-    ...o,
-    children: e
-  }
-), ea = Object.assign(V, {
-  Item: L
-}), A = i(
-  "w-full flex items-center px-6 py-4 mb-6 border-b border-border shadow-xs bg-white",
-  {
-    variants: {},
-    defaultVariants: {}
-  }
-), R = i("flex items-center gap-3 min-w-0 flex-1"), I = i("flex items-center gap-2 ml-auto"), C = 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
-    }
-  }
-), k = i("flex items-center gap-2 ml-4"), z = i("flex items-center gap-2 mr-4"), F = n(
-  function({ children: a, className: t, ...r }, o) {
-    return /* @__PURE__ */ s.jsx("nav", { ref: o, className: k({ className: t }), ...r, children: a });
-  }
-), O = n(
-  function({ children: a, className: t, ...r }, o) {
-    return /* @__PURE__ */ s.jsx("div", { ref: o, className: z({ className: t }), ...r, children: a });
-  }
-), P = n(
-  function({ children: a, className: t, ...r }, o) {
-    return /* @__PURE__ */ s.jsx("div", { ref: o, className: R({ className: t }), ...r, children: a });
-  }
-), G = n(
-  function({ children: a, className: t, ...r }, o) {
-    return /* @__PURE__ */ s.jsx("div", { ref: o, className: I({ className: t }), ...r, children: a });
-  }
-), W = n(
-  function({ children: a, className: t, active: r, ...o }, l) {
-    return /* @__PURE__ */ s.jsx(
-      "div",
-      {
-        ref: l,
-        className: C({ active: r, className: t }),
-        "aria-current": r ? "page" : void 0,
-        ...o,
-        children: a
-      }
-    );
-  }
-), H = n(
-  ({ children: e, className: a, ...t }, r) => /* @__PURE__ */ s.jsx("header", { ref: r, className: A({ className: a }), ...t, children: e })
-), sa = Object.assign(H, {
-  Leading: P,
-  Trailing: G,
-  NavItem: W,
-  Nav: F,
-  Actions: O
-}), M = 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"
-  }
-}), ra = f.forwardRef(
-  function({ type: a = "desktop", className: t, children: r, ...o }, l) {
-    return /* @__PURE__ */ s.jsx(
-      "div",
-      {
-        ref: l,
-        className: c(M({ type: a }), t),
-        ...o,
-        children: r
-      }
-    );
-  }
-), E = i("grid w-full gap-4 grid-cols-12"), $ = 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"
-  }
-}), q = n(
-  function({ className: a, children: t, ...r }, o) {
-    return /* @__PURE__ */ s.jsx(
-      "div",
-      {
-        ref: o,
-        className: c(E(), a),
-        ...r,
-        children: t
-      }
-    );
-  }
-), D = n(
-  function({ span: a = 4, className: t, children: r, ...o }, l) {
-    const m = Math.min(12, Math.max(1, a));
-    return /* @__PURE__ */ s.jsx(
-      "div",
-      {
-        ref: l,
-        className: c(
-          $({ span: `${m}` }),
-          t
-        ),
-        ...o,
-        children: r
-      }
-    );
-  }
-), oa = Object.assign(q, {
-  Column: D
-}), x = 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
-    }
-  }
-), J = n(
-  (e, a) => {
-    const { icon: t, children: r, href: o, onClick: l, active: m, ...u } = e;
-    if (typeof o == "string") {
-      const d = u;
-      return /* @__PURE__ */ s.jsx("li", { children: /* @__PURE__ */ s.jsxs(
-        "a",
-        {
-          ref: a,
-          href: o,
-          className: x({
-            disabled: !!e["aria-disabled"],
-            active: m
-          }),
-          ...d,
-          children: [
-            t,
-            /* @__PURE__ */ s.jsx(p, { as: "span", color: "inherit", fontSize: "sm", children: r })
-          ]
-        }
-      ) });
-    } else {
-      const d = u;
-      return /* @__PURE__ */ s.jsx("li", { children: /* @__PURE__ */ s.jsxs(
-        "button",
-        {
-          ref: a,
-          type: "button",
-          onClick: l,
-          className: c(
-            x({ disabled: !!d.disabled, active: m }),
-            "w-full text-left"
-          ),
-          ...d,
-          children: [
-            t,
-            /* @__PURE__ */ s.jsx(p, { as: "span", color: "inherit", fontSize: "sm", children: r })
-          ]
-        }
-      ) });
-    }
-  }
-), K = n(
-  function({ children: a, label: t, ...r }, o) {
-    return /* @__PURE__ */ s.jsxs("li", { ref: o, className: "flex flex-col gap-2 mt-2", ...r, children: [
-      /* @__PURE__ */ s.jsx(
-        p,
-        {
-          as: "h2",
-          fontSize: "xs",
-          fontWeight: "semibold",
-          color: "gray",
-          className: "px-2",
-          children: t
-        }
-      ),
-      /* @__PURE__ */ s.jsx("ul", { className: "flex flex-col gap-1", children: a })
-    ] });
-  }
-), Q = n(
-  ({ children: e, ...a }, t) => /* @__PURE__ */ s.jsx(
-    "nav",
-    {
-      ref: t,
-      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: e }) })
-    }
-  )
-), na = Object.assign(Q, {
-  Item: J,
-  Group: K
-});
-export {
-  ta as A,
-  ea as B,
-  oa as F,
-  ra as P,
-  na as S,
-  sa as T
-};