@dimasbaguspm/versaur 0.0.21 → 0.0.22

package/dist/js/{side-bar-BUACYQUo.js → side-bar-li3CbgUw.js}

@@ -1,11 +1,11 @@
-import { c as i, j as s, a as l } from "./index-DOdDlCoL.js";
+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 d } from "./text-CRsIInRA.js";
+import { T as p } from "./text-CRsIInRA.js";
 const b = i(
-  "w-full flex flex-wrap items-center px-4 pt-3 mb-3 gap-2 bg-white [&>[data-versaur-appbar-bottom]]:basis-full [&>[data-versaur-appbar-bottom]]:w-full",
+  "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: {
@@ -40,36 +40,52 @@ const b = i(
     {
       ref: t,
       "data-versaur-appbar-bottom": !0,
-      className: l("w-full flex items-center min-h-[2.5rem] mt-2", a),
+      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: l("flex items-center", a), children: e })
-), B = n(
   ({ children: e, className: a }, t) => /* @__PURE__ */ s.jsx(
     "div",
     {
       ref: t,
-      className: l("font-semibold text-lg truncate min-w-0", a),
+      className: c("flex items-center", a),
+      "data-versaur-appbar-leading": !0,
       children: e
     }
   )
-), h = n(
-  ({ children: e, className: a }, t) => /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      ref: t,
-      className: l("text-xs text-ghost-400 truncate min-w-0", a),
-      children: e
-    }
-  )
-), j = n(
+), 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: l("flex items-center justify-end gap-2", a),
+      className: c("flex items-center justify-end gap-2", a),
+      "data-versaur-appbar-trailing": !0,
       children: e
     }
   )
@@ -78,7 +94,7 @@ const b = i(
     "div",
     {
       ref: r,
-      className: l(g({ placement: t }), a),
+      className: c(g({ placement: t }), a),
       children: e
     }
   )
@@ -89,18 +105,18 @@ const b = i(
 }) => /* @__PURE__ */ s.jsx(
   "header",
   {
-    className: l(b({ variant: t }), a),
+    className: c(b({ variant: t }), a),
     role: "banner",
     children: e
   }
 ), ta = Object.assign(w, {
   Leading: y,
-  Headline: B,
-  Subtitle: h,
+  Headline: h,
+  Subtitle: B,
   Trailing: j,
   Center: N,
   Bottom: v
-}), T = i(
+}), 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: {
@@ -122,7 +138,7 @@ const b = i(
       size: "md"
     }
   }
-), S = i(
+), T = i(
   "flex flex-col items-center justify-center gap-1 px-2 py-1",
   {
     variants: {
@@ -136,12 +152,12 @@ const b = i(
     }
   }
 ), L = n(
-  ({ icon: e, label: a, active: t = !1, className: r, ...o }, c) => /* @__PURE__ */ s.jsxs(
+  ({ icon: e, label: a, active: t = !1, className: r, ...o }, l) => /* @__PURE__ */ s.jsxs(
     "div",
     {
-      ref: c,
+      ref: l,
       "aria-current": t ? "page" : void 0,
-      className: S({ active: t, className: r }),
+      className: T({ active: t, className: r }),
       ...o,
       children: [
         e,
@@ -160,7 +176,7 @@ const b = i(
   {
     role: "navigation",
     "aria-label": "Bottom navigation",
-    className: T({ variant: a, size: t, className: r }),
+    className: S({ variant: a, size: t, className: r }),
     ...o,
     children: e
   }
@@ -201,12 +217,12 @@ const b = i(
   function({ children: a, className: t, ...r }, o) {
     return /* @__PURE__ */ s.jsx("div", { ref: o, className: I({ className: t }), ...r, children: a });
   }
-), H = n(
-  function({ children: a, className: t, active: r, ...o }, c) {
+), W = n(
+  function({ children: a, className: t, active: r, ...o }, l) {
     return /* @__PURE__ */ s.jsx(
       "div",
       {
-        ref: c,
+        ref: l,
         className: C({ active: r, className: t }),
         "aria-current": r ? "page" : void 0,
         ...o,
@@ -214,38 +230,38 @@ const b = i(
       }
     );
   }
-), M = n(
+), H = n(
   ({ children: e, className: a, ...t }, r) => /* @__PURE__ */ s.jsx("header", { ref: r, className: A({ className: a }), ...t, children: e })
-), sa = Object.assign(M, {
+), sa = Object.assign(H, {
   Leading: P,
   Trailing: G,
-  NavItem: H,
+  NavItem: W,
   Nav: F,
   Actions: O
-}), E = i("w-full mx-auto relative", {
+}), 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 px-4"
+      mobile: "w-full"
     }
   },
   defaultVariants: {
     type: "desktop"
   }
 }), ra = f.forwardRef(
-  function({ type: a = "desktop", className: t, children: r, ...o }, c) {
+  function({ type: a = "desktop", className: t, children: r, ...o }, l) {
     return /* @__PURE__ */ s.jsx(
       "div",
       {
-        ref: c,
-        className: l(E({ type: a }), t),
+        ref: l,
+        className: c(M({ type: a }), t),
         ...o,
         children: r
       }
     );
   }
-), W = i("grid w-full gap-4 grid-cols-12"), $ = i("", {
+), E = i("grid w-full gap-4 grid-cols-12"), $ = i("", {
   variants: {
     span: {
       1: "col-span-1",
@@ -271,20 +287,20 @@ const b = i(
       "div",
       {
         ref: o,
-        className: l(W(), a),
+        className: c(E(), a),
         ...r,
         children: t
       }
     );
   }
 ), D = n(
-  function({ span: a = 4, className: t, children: r, ...o }, c) {
+  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: c,
-        className: l(
+        ref: l,
+        className: c(
           $({ span: `${m}` }),
           t
         ),
@@ -295,7 +311,7 @@ const b = i(
   }
 ), oa = Object.assign(q, {
   Column: D
-}), u = i(
+}), x = i(
   "flex items-center gap-2 px-4 py-2 rounded-md hover:text-primary focus:outline-none transition-colors",
   {
     variants: {
@@ -315,41 +331,41 @@ const b = i(
   }
 ), J = n(
   (e, a) => {
-    const { icon: t, children: r, href: o, onClick: c, active: m, ...x } = e;
+    const { icon: t, children: r, href: o, onClick: l, active: m, ...u } = e;
     if (typeof o == "string") {
-      const p = x;
+      const d = u;
       return /* @__PURE__ */ s.jsx("li", { children: /* @__PURE__ */ s.jsxs(
         "a",
         {
           ref: a,
           href: o,
-          className: u({
+          className: x({
             disabled: !!e["aria-disabled"],
             active: m
           }),
-          ...p,
+          ...d,
           children: [
             t,
-            /* @__PURE__ */ s.jsx(d, { as: "span", color: "inherit", fontSize: "sm", children: r })
+            /* @__PURE__ */ s.jsx(p, { as: "span", color: "inherit", fontSize: "sm", children: r })
           ]
         }
       ) });
     } else {
-      const p = x;
+      const d = u;
       return /* @__PURE__ */ s.jsx("li", { children: /* @__PURE__ */ s.jsxs(
         "button",
         {
           ref: a,
           type: "button",
-          onClick: c,
-          className: l(
-            u({ disabled: !!p.disabled, active: m }),
+          onClick: l,
+          className: c(
+            x({ disabled: !!d.disabled, active: m }),
             "w-full text-left"
           ),
-          ...p,
+          ...d,
           children: [
             t,
-            /* @__PURE__ */ s.jsx(d, { as: "span", color: "inherit", fontSize: "sm", children: r })
+            /* @__PURE__ */ s.jsx(p, { as: "span", color: "inherit", fontSize: "sm", children: r })
           ]
         }
       ) });
@@ -359,7 +375,7 @@ const b = i(
   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(
-        d,
+        p,
         {
           as: "h2",
           fontSize: "xs",

package/dist/js/{use-snackbars-oPoF7J5t.js → use-snackbars-B0MaRlg1.js}

@@ -5,7 +5,7 @@ const f = x(
   null
 ), j = d(
   [
-    "fixed z-50 flex flex-col gap-2 px-0 pb-2",
+    "fixed z-100 flex flex-col gap-2 px-0 pb-2",
     "w-screen left-0 bottom-0",
     // mobile: full width
     "sm:w-auto sm:left-4 sm:bottom-4 sm:max-w-sm"

package/dist/types/layouts/app-bar/app-bar.atoms.d.ts

@@ -10,11 +10,11 @@ export declare const AppBarLeading: import('react').ForwardRefExoticComponent<Ap
 /**
  * Headline section (main title)
  */
-export declare const AppBarHeadline: import('react').ForwardRefExoticComponent<AppBarHeadlineProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AppBarHeadline: import('react').ForwardRefExoticComponent<AppBarHeadlineProps & import('react').RefAttributes<HTMLParagraphElement>>;
 /**
  * Subtitle section (secondary text)
  */
-export declare const AppBarSubtitle: import('react').ForwardRefExoticComponent<AppBarSubtitleProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AppBarSubtitle: import('react').ForwardRefExoticComponent<AppBarSubtitleProps & import('react').RefAttributes<HTMLParagraphElement>>;
 /**
  * Trailing section (actions, avatar, etc.)
  */

package/dist/types/layouts/app-bar/app-bar.d.ts

@@ -1,8 +1,8 @@
 import { AppBarProps } from './types';
 export declare const AppBar: (({ children, className, variant, }: AppBarProps) => import("react/jsx-runtime").JSX.Element) & {
     Leading: import('react').ForwardRefExoticComponent<import('./types').AppBarLeadingProps & import('react').RefAttributes<HTMLDivElement>>;
-    Headline: import('react').ForwardRefExoticComponent<import('./types').AppBarHeadlineProps & import('react').RefAttributes<HTMLDivElement>>;
-    Subtitle: import('react').ForwardRefExoticComponent<import('./types').AppBarSubtitleProps & import('react').RefAttributes<HTMLDivElement>>;
+    Headline: import('react').ForwardRefExoticComponent<import('./types').AppBarHeadlineProps & import('react').RefAttributes<HTMLParagraphElement>>;
+    Subtitle: import('react').ForwardRefExoticComponent<import('./types').AppBarSubtitleProps & import('react').RefAttributes<HTMLParagraphElement>>;
     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/types/layouts/app-bar/types.d.ts

@@ -1,3 +1,4 @@
+import { TextProps } from '../../primitive';
 import { ReactNode, HTMLAttributes } from 'react';
 /**
  * Props for AppBarLeading
@@ -8,13 +9,13 @@ export interface AppBarLeadingProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * Props for AppBarHeadline
  */
-export interface AppBarHeadlineProps extends HTMLAttributes<HTMLDivElement> {
+export interface AppBarHeadlineProps extends TextProps {
     children: ReactNode;
 }
 /**
  * Props for AppBarSubtitle
  */
-export interface AppBarSubtitleProps extends HTMLAttributes<HTMLDivElement> {
+export interface AppBarSubtitleProps extends TextProps {
     children: ReactNode;
 }
 /**

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

@@ -65,7 +65,8 @@ const symbolToSubpath = {
   "useSnackbars": "providers",
   "cn": "utils",
   "cva": "utils",
-  "createVariants": "utils"
+  "createVariants": "utils",
+  "useKeyboardVirtual": "utils"
 };
 
 /**

package/package.json

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