@dimasbaguspm/versaur 0.0.22 → 0.0.23

package/dist/js/{tabs-BbOkYchB.js → tabs-p6g9kN0N.js}

@@ -1,64 +1,46 @@
-import { c as d, j as o, a as u } from "./index-DOdDlCoL.js";
+import { c as d, j as s, a as u } from "./index-DOdDlCoL.js";
 import { forwardRef as f, createContext as x, useContext as g, useState as p, useLayoutEffect as y, useRef as h } from "react";
-const w = d(
-  "flex items-center gap-2 text-sm text-tertiary",
-  {
-    variants: {
-      separator: {
-        default: "gap-2",
-        compact: "gap-1"
-      }
-    },
-    defaultVariants: {
-      separator: "default"
-    }
-  }
-), T = d(
-  "inline-flex items-center gap-1 transition-colors",
-  {
-    variants: {
-      isCurrent: {
-        true: "font-semibold text-black cursor-default",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      isCurrent: !1
-    }
-  }
-), j = "mx-1 text-ghost-400 select-none", I = f(function({ children: t, icon: r, isCurrent: a, className: n, ...s }, i) {
-  return /* @__PURE__ */ o.jsx("li", { className: "flex items-center", children: /* @__PURE__ */ o.jsxs(
+import { I as w } from "./image-rectangle-GA3oWX7A.js";
+import "./snackbar-DH8jCh2V.js";
+import "./text-CRsIInRA.js";
+import { ChevronRight as T } from "lucide-react";
+const j = d(
+  "flex items-center gap-2 text-sm text-gray-500"
+), I = d(
+  "inline-flex items-center gap-1 transition-colors hover:underline cursor-pointer"
+), B = f(function({ children: t, icon: r, isCurrent: a, className: n, ...o }, i) {
+  return /* @__PURE__ */ s.jsx("li", { className: "flex items-center", children: /* @__PURE__ */ s.jsxs(
     "a",
     {
       ref: i,
       "aria-current": a ? "page" : void 0,
       tabIndex: a ? -1 : 0,
-      className: u(T({ isCurrent: a }) + n),
-      ...s,
+      className: u(I(), n),
+      ...o,
       children: [
-        r && /* @__PURE__ */ o.jsx("span", { className: "mr-1 inline-flex", children: r }),
+        r && /* @__PURE__ */ s.jsx("span", { className: "mr-1 inline-flex", children: r }),
         t
       ]
     }
   ) });
 });
-function V() {
-  return /* @__PURE__ */ o.jsx("span", { className: j, "aria-hidden": "true", children: "/" });
+function C() {
+  return /* @__PURE__ */ s.jsx(w, { as: T, size: "xs", color: "inherit" });
 }
-const C = f(
+const V = f(
   function({ children: t, "aria-label": r = "Breadcrumb", ...a }, n) {
-    return /* @__PURE__ */ o.jsx("nav", { "aria-label": r, ...a, children: /* @__PURE__ */ o.jsx("ol", { ref: n, className: w(), children: t }) });
+    return /* @__PURE__ */ s.jsx("nav", { "aria-label": r, ...a, children: /* @__PURE__ */ s.jsx("ol", { ref: n, className: j(), children: t }) });
   }
-), O = Object.assign(C, {
-  Item: I,
-  Separator: V
+), W = Object.assign(V, {
+  Item: B,
+  Separator: C
 }), v = x(null), m = () => {
   const e = g(v);
   if (!e)
     throw new Error("useTabsContext must be used within a TabsProvider");
   return e;
-}, B = d(
-  "inline-flex items-center justify-center transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none select-none px-4 py-2 text-base relative",
+}, N = d(
+  "inline-flex items-center justify-center transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none select-none px-4 py-2 text-sm relative",
   {
     variants: {
       active: {
@@ -157,7 +139,7 @@ const C = f(
       variant: "underline"
     }
   }
-), N = d(
+), R = d(
   "flex flex-row w-full overflow-x-auto whitespace-nowrap",
   {
     variants: {
@@ -186,7 +168,7 @@ const C = f(
       color: "primary"
     }
   }
-), R = ({
+), A = ({
   value: e,
   children: t,
   className: r,
@@ -194,40 +176,40 @@ const C = f(
 }) => {
   const {
     activeTab: n,
-    setActiveTab: s,
+    setActiveTab: o,
     color: i,
-    variant: c = "underline"
-  } = m(), l = n === e;
-  return /* @__PURE__ */ o.jsx(
+    variant: l = "underline"
+  } = m(), c = n === e;
+  return /* @__PURE__ */ s.jsx(
     "button",
     {
       role: "tab",
       id: `tabs-trigger-${e}`,
-      "aria-selected": l,
+      "aria-selected": c,
       "aria-controls": `tabs-content-${e}`,
-      tabIndex: l ? 0 : -1,
+      tabIndex: c ? 0 : -1,
       className: u(
-        B({
-          active: l,
+        N({
+          active: c,
           color: i,
-          variant: c
+          variant: l
         }),
         r
       ),
-      onClick: () => s(e),
+      onClick: () => o(e),
       type: "button",
       ...a,
       children: t
     }
   );
-}, A = ({
+}, E = ({
   left: e,
   width: t,
   className: r,
   ...a
 }) => {
   const { color: n } = m();
-  return /* @__PURE__ */ o.jsx(
+  return /* @__PURE__ */ s.jsx(
     "div",
     {
       "aria-hidden": !0,
@@ -241,19 +223,19 @@ const C = f(
     }
   );
 };
-function E(e, t, r) {
+function $(e, t, r) {
   const [a, n] = p({
     left: 0,
     width: 0
   });
   return y(() => {
     if (!t.current) return;
-    const s = t.current.querySelector(
+    const o = t.current.querySelector(
       `#tabs-trigger-${e}`
     );
-    if (s) {
-      const { offsetLeft: i, offsetWidth: c } = s;
-      n({ left: i, width: c }), s.scrollIntoView({
+    if (o) {
+      const { offsetLeft: i, offsetWidth: l } = o;
+      n({ left: i, width: l }), o.scrollIntoView({
         behavior: "smooth",
         inline: "center",
         block: "nearest"
@@ -267,32 +249,32 @@ const k = ({
   children: r,
   className: a,
   color: n = "primary",
-  variant: s = "underline",
+  variant: o = "underline",
   ...i
 }) => {
-  const c = {
+  const l = {
     activeTab: e,
     setActiveTab: t,
     color: n,
-    variant: s
-  }, l = h(null), b = E(e, l, r);
-  return /* @__PURE__ */ o.jsx(v.Provider, { value: c, children: /* @__PURE__ */ o.jsxs(
+    variant: o
+  }, c = h(null), b = $(e, c, r);
+  return /* @__PURE__ */ s.jsx(v.Provider, { value: l, children: /* @__PURE__ */ s.jsxs(
     "div",
     {
       role: "tablist",
       className: u(
-        N({
-          variant: s
+        R({
+          variant: o
         }),
         a
       ),
-      ref: l,
+      ref: c,
       style: { position: "relative" },
       ...i,
       children: [
         r,
-        s === "underline" && /* @__PURE__ */ o.jsx(
-          A,
+        o === "underline" && /* @__PURE__ */ s.jsx(
+          E,
           {
             left: b.left,
             width: b.width
@@ -301,10 +283,10 @@ const k = ({
       ]
     }
   ) });
-}, P = Object.assign(k, {
-  Trigger: R
+}, D = Object.assign(k, {
+  Trigger: A
 });
 export {
-  O as B,
-  P as T
+  W as B,
+  D as T
 };

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,5 +1,7 @@
 export * from './app-bar';
 export * from './bottom-bar';
+export * from './button-group';
+export * from './page-header';
 export * from './top-bar';
 export * from './page-layout';
 export * from './form-layout';

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,9 @@ const symbolToSubpath = {
   "TimePickerInput": "forms",
   "AppBar": "layouts",
   "BottomBar": "layouts",
+  "ButtonGroup": "layouts",
   "FormLayout": "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.23",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",