@dimasbaguspm/versaur 0.0.57 → 0.0.58

package/dist/js/{use-snackbars-Cou8L41F.js → use-snackbars-B6lnVjrX.js}

@@ -1,7 +1,8 @@
-import { c as d, j as c } from "./index-DOdDlCoL.js";
-import { createContext as x, useState as p, useRef as k, useCallback as m, useEffect as S, useMemo as v, useContext as w } from "react";
-import { S as h } from "./snackbar-DH8jCh2V.js";
-const f = x(
+import { j as c } from "./jsx-runtime-C5mzlN2N.js";
+import { createContext as p, useState as x, useRef as k, useCallback as l, useEffect as S, useMemo as v, useContext as w } from "react";
+import { S as h } from "./snackbar-CTq4MLir.js";
+import { c as d } from "./index-BDtz_hQY.js";
+const f = p(
   null
 ), j = d(
   [
@@ -20,11 +21,11 @@ const f = x(
   }
 }), C = 4e3;
 function E() {
-  const [a, o] = p([]), t = k({}), n = m((e) => {
+  const [a, o] = x([]), t = k({}), n = l((e) => {
     o((r) => r.filter((s) => s.id !== e)), t.current[e] && (clearTimeout(t.current[e]), delete t.current[e]);
-  }, []), i = m(
+  }, []), i = l(
     (e, r, s) => {
-      const u = `${Date.now()}-${Math.random()}`, l = s?.duration ?? C;
+      const u = `${Date.now()}-${Math.random()}`, m = s?.duration ?? C;
       o((b) => [
         ...b,
         {
@@ -32,11 +33,11 @@ function E() {
           color: e,
           message: r,
           ...s,
-          duration: l
+          duration: m
         }
       ]), t.current[u] = setTimeout(() => {
         n(u);
-      }, l);
+      }, m);
     },
     [n]
   );
@@ -44,7 +45,7 @@ function E() {
     Object.values(t.current).forEach(clearTimeout), t.current = {};
   }, []), { queue: a, showSnack: i, removeSnack: n };
 }
-const V = ({ children: a }) => {
+const N = ({ children: a }) => {
   const { queue: o, showSnack: t, removeSnack: n } = E(), i = v(() => ({ showSnack: t }), [t]);
   return /* @__PURE__ */ c.jsxs(f.Provider, { value: i, children: [
     a,
@@ -79,13 +80,13 @@ const V = ({ children: a }) => {
     )
   ] });
 };
-function N() {
+function $() {
   const a = w(f);
   if (!a)
     throw new Error("useSnackbars must be used within a SnackbarsProvider");
   return a;
 }
 export {
-  V as S,
-  N as u
+  N as S,
+  $ as u
 };

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

@@ -0,0 +1 @@
+export * from './match-media';

package/dist/types/helpers/match-media/built-in/components/desktop-breakpoint.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for breakpoint components
+ */
+interface BreakpointComponentProps {
+    children: React.ReactNode;
+}
+/**
+ * Component that only renders children on desktop viewports
+ *
+ * @example
+ * ```tsx
+ * <DesktopBreakpoint>
+ *   <DesktopOnlyContent />
+ * </DesktopBreakpoint>
+ * ```
+ */
+export declare function DesktopBreakpoint({ children }: BreakpointComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/helpers/match-media/built-in/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './mobile-breakpoint';
+export * from './tablet-breakpoint';
+export * from './desktop-breakpoint';

package/dist/types/helpers/match-media/built-in/components/mobile-breakpoint.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for breakpoint components
+ */
+interface BreakpointComponentProps {
+    children: React.ReactNode;
+}
+/**
+ * Component that only renders children on mobile viewports
+ *
+ * @example
+ * ```tsx
+ * <MobileBreakpoint>
+ *   <MobileOnlyContent />
+ * </MobileBreakpoint>
+ * ```
+ */
+export declare function MobileBreakpoint({ children }: BreakpointComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/helpers/match-media/built-in/components/tablet-breakpoint.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for breakpoint components
+ */
+interface BreakpointComponentProps {
+    children: React.ReactNode;
+}
+/**
+ * Component that only renders children on tablet viewports
+ *
+ * @example
+ * ```tsx
+ * <TabletBreakpoint>
+ *   <TabletOnlyContent />
+ * </TabletBreakpoint>
+ * ```
+ */
+export declare function TabletBreakpoint({ children }: BreakpointComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/helpers/match-media/built-in/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './use-mobile-breakpoint';
+export * from './use-tablet-breakpoint';
+export * from './use-desktop-breakpoint';

package/dist/types/helpers/match-media/built-in/hooks/use-desktop-breakpoint.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to detect if the current viewport is desktop
+ *
+ * @returns boolean indicating if viewport is desktop (min-width: 1024px)
+ *
+ * @example
+ * ```tsx
+ * const isDesktop = useDesktopBreakpoint()
+ * ```
+ */
+export declare function useDesktopBreakpoint(): boolean;

package/dist/types/helpers/match-media/built-in/hooks/use-mobile-breakpoint.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to detect if the current viewport is mobile
+ *
+ * @returns boolean indicating if viewport is mobile (max-width: 767px)
+ *
+ * @example
+ * ```tsx
+ * const isMobile = useMobileBreakpoint()
+ * ```
+ */
+export declare function useMobileBreakpoint(): boolean;

package/dist/types/helpers/match-media/built-in/hooks/use-tablet-breakpoint.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to detect if the current viewport is tablet
+ *
+ * @returns boolean indicating if viewport is tablet (768px - 1023px)
+ *
+ * @example
+ * ```tsx
+ * const isTablet = useTabletBreakpoint()
+ * ```
+ */
+export declare function useTabletBreakpoint(): boolean;

package/dist/types/helpers/match-media/built-in/index.d.ts

@@ -0,0 +1,2 @@
+export * from './hooks';
+export * from './components';

package/dist/types/helpers/match-media/constants.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Standard Tailwind breakpoint definitions
+ * These align with common Tailwind CSS breakpoints
+ */
+export declare const BREAKPOINT_MOBILE = "(max-width: 767px)";
+export declare const BREAKPOINT_TABLET = "(min-width: 768px) and (max-width: 1023px)";
+export declare const BREAKPOINT_DESKTOP = "(min-width: 1024px)";

package/dist/types/helpers/match-media/index.d.ts

@@ -0,0 +1,4 @@
+export * from './constants';
+export * from './use-match-media';
+export * from './match-media';
+export * from './built-in';

package/dist/types/helpers/match-media/match-media.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Props for MatchMedia component
+ */
+interface MatchMediaProps {
+    /** CSS media query string to match against */
+    query: string;
+    /** Content to render when query matches */
+    children: React.ReactNode;
+}
+/**
+ * Component that conditionally renders children based on a media query
+ *
+ * @example
+ * ```tsx
+ * <MatchMedia query="(min-width: 1024px)">
+ *   <DesktopContent />
+ * </MatchMedia>
+ *
+ * <MatchMedia query="(prefers-color-scheme: dark)">
+ *   <DarkModeUI />
+ * </MatchMedia>
+ * ```
+ */
+export declare function MatchMedia({ query, children }: MatchMediaProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/helpers/match-media/test-helpers.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Creates a mock MediaQueryList for testing
+ */
+export declare const createMatchMediaMock: (matches: boolean) => {
+    matches: boolean;
+    media: string;
+    onchange: null;
+    addListener: import('vitest').Mock<(...args: any[]) => any>;
+    removeListener: import('vitest').Mock<(...args: any[]) => any>;
+    addEventListener: import('vitest').Mock<(event: string, listener: (event: MediaQueryListEvent) => void) => void>;
+    removeEventListener: import('vitest').Mock<(event: string, listener: (event: MediaQueryListEvent) => void) => void>;
+    dispatchEvent: import('vitest').Mock<(...args: any[]) => any>;
+    _triggerChange: (newMatches: boolean) => void;
+};
+/**
+ * Setup and teardown for matchMedia mocking
+ */
+export declare const setupMatchMediaMock: () => {
+    beforeEach: () => void;
+    afterEach: () => void;
+};

package/dist/types/helpers/match-media/use-match-media.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Base hook to detect if a media query matches
+ * Uses the native matchMedia API for optimal performance
+ *
+ * @param query - CSS media query string
+ * @returns boolean indicating if the query matches
+ *
+ * @example
+ * ```tsx
+ * const isMobile = useMatchMedia(BREAKPOINT_MOBILE)
+ * const isDesktop = useMatchMedia(BREAKPOINT_DESKTOP)
+ * const prefersDark = useMatchMedia('(prefers-color-scheme: dark)')
+ * ```
+ */
+export declare function useMatchMedia(query: string): boolean;

package/dist/types/index.d.ts

@@ -5,3 +5,4 @@ export * from './overlays';
 export * from './primitive';
 export * from './navigation';
 export * from './providers';
+export * from './helpers';

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

@@ -24,12 +24,26 @@ export interface PageHeaderProps extends HTMLAttributes<HTMLElement> {
  */
 export interface PageHeaderTopProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
+    /**
+     * Size determines the horizontal padding
+     * - 'fluid': No padding
+     * - 'wide': px-6
+     * - 'narrow': px-4
+     */
+    size?: 'fluid' | 'wide' | 'narrow';
 }
 /**
  * Props for PageHeaderBreadcrumbs - breadcrumbs section
  */
 export interface PageHeaderBreadcrumbsProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
+    /**
+     * Size determines the horizontal padding
+     * - 'fluid': No padding
+     * - 'wide': px-6
+     * - 'narrow': px-4
+     */
+    size?: 'fluid' | 'wide' | 'narrow';
 }
 /**
  * Props for PageHeaderContent - title and subtitle area

package/dist/types/overlays/menu/types.d.ts

@@ -1,14 +1,14 @@
-import { HTMLAttributes, MouseEvent, ReactNode, RefObject } from 'react';
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { PopoverPlacement } from '../../utils/popover';
 export type MenuSize = 'sm' | 'md';
-export type MenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'auto';
 /**
  * Props for Menu
  */
 export interface MenuProps {
-    /** Whether the menu is open (controlled externally) */
+    /** Whether the menu is open (controlled) */
     isOpen: boolean;
-    /** Callback when clicking outside menu */
-    onOutsideClick: () => void;
+    /** Callback when the menu closes */
+    onClose: () => void;
     /** Menu size variant */
     size?: MenuSize;
     /** Menu content (MenuContent/MenuItem) */
@@ -16,9 +16,9 @@ export interface MenuProps {
     /** Trigger element */
     children: ReactNode;
     /** Preferred placement of the menu relative to trigger */
-    placement?: MenuPlacement;
-    /** Container element to respect boundaries (defaults to viewport) */
-    container?: HTMLElement | RefObject<HTMLElement | null> | null;
+    placement?: PopoverPlacement;
+    /** Gap between trigger and menu in pixels */
+    gap?: number;
     /** Whether to keep the menu after list item clicked */
     preserve?: boolean;
 }

package/dist/types/primitive/button-menu/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { MenuProps } from '../../overlays/menu/types';
 import { ButtonProps } from '../button/types';
-export interface ButtonMenuProps extends Omit<ButtonProps, 'content'>, Pick<MenuProps, 'placement' | 'container' | 'preserve'> {
+export interface ButtonMenuProps extends Omit<ButtonProps, 'content'>, Pick<MenuProps, 'placement' | 'preserve'> {
     /**
      * Callback function triggered when the menu open state changes.
      */

package/dist/types/primitive/button-menu-icon/types.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { IconProps } from '../icon';
 import { ButtonIconProps } from '../button-icon';
 import { MenuProps } from '../../overlays/menu/types';
-export interface ButtonMenuIconProps extends Omit<ButtonIconProps, 'content'>, Pick<IconProps, 'as'>, Pick<MenuProps, 'placement' | 'container' | 'preserve'> {
+export interface ButtonMenuIconProps extends Omit<ButtonIconProps, 'content'>, Pick<IconProps, 'as'>, Pick<MenuProps, 'placement' | 'preserve'> {
     /**
      * Callback function triggered when the menu open state changes.
      */

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

@@ -76,7 +76,9 @@ const symbolToSubpath = {
   "cn": "utils",
   "cva": "utils",
   "createVariants": "utils",
-  "useKeyboardVirtual": "utils"
+  "Popover": "utils",
+  "useKeyboardVirtual": "utils",
+  "usePopover": "utils"
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimasbaguspm/versaur",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",
@@ -46,6 +46,10 @@
       "import": "./dist/js/templates/index.js",
       "types": "./dist/types/templates/index.d.ts"
     },
+    "./helpers": {
+      "import": "./dist/js/helpers/index.js",
+      "types": "./dist/types/helpers/index.d.ts"
+    },
     "./styles.css": "./dist/assets/styles.css",
     "./eslint-subpath-import": "./dist/utils/enforce-subpath-import.js"
   },

package/dist/types/overlays/menu/use-menu.d.ts

@@ -1,15 +0,0 @@
-import { RefObject } from 'react';
-import { MenuPlacement } from './types';
-export declare function useMenuOutsideClick(isOpen: boolean, contentRef: React.RefObject<HTMLDivElement | null>, triggerRef: React.RefObject<HTMLButtonElement | null>, onOutsideClick: () => void): void;
-interface MenuPosition {
-    top?: number;
-    bottom?: number;
-    left?: number;
-    right?: number;
-    maxHeight?: number;
-    maxWidth?: number;
-    position?: 'absolute' | 'fixed';
-    isReady?: boolean;
-}
-export declare function useMenuPosition(isOpen: boolean, triggerRef: React.RefObject<HTMLElement | null>, contentRef: React.RefObject<HTMLDivElement | null>, placement: MenuPlacement | undefined, container: HTMLElement | RefObject<HTMLElement | null> | null): MenuPosition;
-export {};