@dimasbaguspm/versaur 0.0.33 → 0.0.35

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

@@ -1,2 +1,2 @@
 import { BottomBarItemProps } from './types';
-export declare const BottomBarItem: import('react').ForwardRefExoticComponent<BottomBarItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const BottomBarItem: import('react').ForwardRefExoticComponent<BottomBarItemProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -1,4 +1,4 @@
 import { BottomBarProps } from './types';
 export declare const BottomBar: (({ children, variant, size, className, ...props }: BottomBarProps) => import("react/jsx-runtime").JSX.Element) & {
-    Item: import('react').ForwardRefExoticComponent<import('./types').BottomBarItemProps & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<import('./types').BottomBarItemProps & import('react').RefAttributes<HTMLButtonElement>>;
 };

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 /**
  * Props for the BottomBar container
  */
@@ -17,11 +17,12 @@ export interface BottomBarProps extends HTMLAttributes<HTMLElement> {
 /**
  * Props for each BottomBar.Item
  */
-export interface BottomBarItemProps extends HTMLAttributes<HTMLDivElement> {
+export interface BottomBarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    as?: 'div' | 'button';
     /**
      * Icon element for the item
      */
-    icon: React.ReactNode;
+    icon?: ReactNode;
     /**
      * Label for the item
      */

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

@@ -29,4 +29,9 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement>, Varian
      * @default 'md'
      */
     gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Whether the badge group has bottom margin
+     * @default false
+     */
+    hasMargin?: boolean;
 }

package/dist/types/layouts/filter-chip-group/types.d.ts

@@ -29,4 +29,9 @@ export interface FilterChipGroupProps extends HTMLAttributes<HTMLDivElement>, Va
      * @default 'md'
      */
     gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Whether the badge group has bottom margin
+     * @default false
+     */
+    hasMargin?: boolean;
 }

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

@@ -1,9 +1,3 @@
 import { MenuContentProps, MenuItemProps } from './types';
-/**
- * MenuContent: Wraps menu items
- */
 export declare const MenuContent: import('react').ForwardRefExoticComponent<MenuContentProps & import('react').RefAttributes<HTMLUListElement>>;
-/**
- * MenuItem: Single menu item
- */
 export declare const MenuItem: import('react').ForwardRefExoticComponent<MenuItemProps & import('react').RefAttributes<HTMLLIElement>>;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, MouseEvent, ReactNode, RefObject } from 'react';
 export type MenuSize = 'sm' | 'md';
 export type MenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'auto';
 /**
@@ -18,7 +18,9 @@ export interface MenuProps {
     /** Preferred placement of the menu relative to trigger */
     placement?: MenuPlacement;
     /** Container element to respect boundaries (defaults to viewport) */
-    container?: HTMLElement | null;
+    container?: HTMLElement | RefObject<HTMLElement | null> | null;
+    /** Whether to keep the menu after list item clicked */
+    preserve?: boolean;
 }
 /**
  * Props for MenuContent
@@ -30,9 +32,10 @@ export interface MenuContentProps extends HTMLAttributes<HTMLUListElement> {
 /**
  * Props for MenuItem
  */
-export interface MenuItemProps extends HTMLAttributes<HTMLLIElement> {
+export interface MenuItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'onClick'> {
     /** Item content */
     children: ReactNode;
     /** Whether the item is disabled */
     disabled?: boolean;
+    onClick?: (ev: MouseEvent<HTMLButtonElement>) => void;
 }

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

@@ -1,9 +1,6 @@
+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;
-/**
- * Menu-specific escape close hook that doesn't disable body scrolling
- */
-export declare function useMenuEscapeClose(isOpen: boolean, onClose: () => void): void;
 interface MenuPosition {
     top?: number;
     bottom?: number;
@@ -11,6 +8,8 @@ interface MenuPosition {
     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, container?: HTMLElement | null): MenuPosition;
+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 {};

package/dist/types/primitive/accordion/accordion.atoms.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Accordion Title sub-component
+ * Renders the title content within the accordion header
+ */
+export declare const AccordionTitle: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLHeadingElement> & {
+    children: import('react').ReactNode;
+} & import('react').RefAttributes<HTMLHeadingElement>>;
+/**
+ * Accordion Content sub-component
+ * Renders the expandable content area when accordion is open
+ */
+export declare const AccordionContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+    children: import('react').ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Accordion Icon sub-component
+ * Renders the expand/collapse icon with rotation animation
+ */
+export declare const AccordionIcon: import('react').ForwardRefExoticComponent<{
+    as: React.ComponentType<{
+        className?: string;
+    }>;
+} & import('react').RefAttributes<SVGSVGElement>>;

package/dist/types/primitive/accordion/accordion.d.ts

@@ -0,0 +1,20 @@
+export declare const Accordion: import('react').ForwardRefExoticComponent<Omit<import('react').HTMLAttributes<HTMLDivElement>, "title"> & {
+    title: import('react').ReactNode;
+    subtitle?: import('react').ReactNode;
+    isDefaultOpen?: boolean;
+    disabled?: boolean;
+    children?: import('react').ReactNode;
+    hasMargin?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLHeadingElement> & {
+        children: import('react').ReactNode;
+    } & import('react').RefAttributes<HTMLHeadingElement>>;
+    Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+        children: import('react').ReactNode;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Icon: import('react').ForwardRefExoticComponent<{
+        as: React.ComponentType<{
+            className?: string;
+        }>;
+    } & import('react').RefAttributes<SVGSVGElement>>;
+};

package/dist/types/primitive/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion } from './accordion';
+export type { AccordionProps, AccordionTitleProps, AccordionContentProps, } from './types';

package/dist/types/primitive/accordion/types.d.ts

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+/**
+ * AccordionProps defines the props for the Accordion component
+ * @property title - Title content to display in the accordion header
+ * @property subtitle - Optional subtitle content (e.g., actions, secondary info)
+ * @property isDefaultOpen - Whether the accordion is open by default
+ * @property disabled - Whether the accordion is disabled
+ * @property children - Content to show when accordion is expanded
+ * Extends HTMLAttributes<HTMLDivElement> for native div props
+ */
+export type AccordionProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
+    /**
+     * Title content to display in the accordion header
+     */
+    title: ReactNode;
+    /**
+     * Optional subtitle content (e.g., actions, secondary info)
+     */
+    subtitle?: ReactNode;
+    /**
+     * Whether the accordion is open by default
+     */
+    isDefaultOpen?: boolean;
+    /**
+     * Whether the accordion is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Content to show when accordion is expanded
+     */
+    children?: ReactNode;
+    /**
+     * Whether the accordion has bottom margin
+     * @default false
+     */
+    hasMargin?: boolean;
+};
+/**
+ * AccordionTitleProps defines the props for the Accordion.Title component
+ * @property children - Title content
+ * Extends HTMLAttributes<HTMLHeadingElement> for native heading props
+ */
+export type AccordionTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    /**
+     * Title content
+     */
+    children: ReactNode;
+};
+/**
+ * AccordionContentProps defines the props for the Accordion.Content component
+ * @property children - Content to display when expanded
+ * Extends HTMLAttributes<HTMLDivElement> for native div props
+ */
+export type AccordionContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Content to display when expanded
+     */
+    children: ReactNode;
+};
+/**
+ * AccordionContextValue defines the context value for Accordion state management
+ */
+export type AccordionContextValue = {
+    /**
+     * Whether the accordion is currently open
+     */
+    isOpen: boolean;
+    /**
+     * Function to toggle the accordion state
+     */
+    toggle: () => void;
+    /**
+     * Whether the accordion is disabled
+     */
+    disabled: boolean;
+};

package/dist/types/primitive/attribute/types.d.ts

@@ -11,4 +11,9 @@ export interface AttributeProps extends HTMLAttributes<HTMLDivElement> {
      * The attribute content (displayed as p)
      */
     children: ReactNode;
+    /**
+     * Whether the attribute has bottom margin
+     * @default false
+     */
+    hasMargin?: boolean;
 }

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

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

package/dist/types/primitive/heading/heading.d.ts

@@ -0,0 +1,7 @@
+import { HeadingProps } from './types';
+/**
+ * Heading component for Versaur UI
+ * Provides semantic heading typography (h1-h6), color, underline, capitalization, and margin support
+ * @example <Heading level={1} color="primary" hasUnderline isCapitalize hasMargin>Main Title</Heading>
+ */
+export declare const Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;

package/dist/types/primitive/heading/index.d.ts

@@ -0,0 +1,2 @@
+export { Heading } from './heading';
+export type { HeadingProps } from './types';

package/dist/types/primitive/heading/types.d.ts

@@ -0,0 +1,37 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * HeadingProps defines the props for the Heading component
+ * @property level - Heading level (1-6, corresponding to h1-h6)
+ * @property color - Versaur color system (primary, secondary, tertiary, ghost, neutral, success, info, warning, danger)
+ * @property hasUnderline - Whether to underline the text
+ * @property isCapitalize - Whether to capitalize the text
+ * @property hasMargin - Whether to add margin bottom (mb-4)
+ * @property align - Text alignment
+ * @property italic - Whether to italicize the text
+ * @property clamp - Clamp lines (1-5) or none
+ * @property ellipsis - Whether to truncate text with ellipsis
+ * @property className - Additional CSS classes
+ * @property children - Text content
+ */
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** Heading level (1-6, corresponding to h1-h6) */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Versaur color system */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'inherit' | 'white' | 'black' | 'gray';
+    /** Underline text */
+    hasUnderline?: boolean;
+    /** Capitalize text */
+    isCapitalize?: boolean;
+    /** Add margin bottom (mb-4) */
+    hasMargin?: boolean;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /** Italic text */
+    italic?: boolean;
+    /** Clamp lines (1-5) or none */
+    clamp?: 1 | 2 | 3 | 4 | 5 | 'none';
+    /** Ellipsis (truncate) */
+    ellipsis?: boolean;
+    /** Text content */
+    children: ReactNode;
+}

package/dist/types/primitive/hr/hr.d.ts

@@ -0,0 +1,20 @@
+import { HrProps } from './types';
+/**
+ * Hr component for creating a horizontal line separator with optional margin
+ *
+ * Follows the Regular Pattern - a simple styled wrapper that aligns with standard HTML behavior.
+ * Creates a 1px height horizontal line with border color and optional bottom margin.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Hr />
+ *
+ * // With bottom margin
+ * <Hr hasMargin />
+ *
+ * // With custom className
+ * <Hr className="my-8" />
+ * ```
+ */
+export declare const Hr: import('react').ForwardRefExoticComponent<HrProps & import('react').RefAttributes<HTMLHRElement>>;

package/dist/types/primitive/hr/index.d.ts

@@ -0,0 +1,2 @@
+export { Hr } from './hr';
+export type { HrProps } from './types';

package/dist/types/primitive/hr/types.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+/**
+ * HrProps defines the props for the Hr component
+ * @property hasMargin - Whether to include bottom margin (mb-4)
+ */
+export interface HrProps extends HTMLAttributes<HTMLHRElement> {
+    /**
+     * Whether to include bottom margin
+     * - When true: Adds mb-4 for spacing
+     * - When false: No margin applied (default)
+     */
+    hasMargin?: boolean;
+}

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

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './alert';
 export * from './anchor';
 export * from './attribute';
@@ -12,6 +13,8 @@ export * from './button-icon';
 export * from './calculator';
 export * from './card';
 export * from './filter-chip';
+export * from './heading';
+export * from './hr';
 export * from './icon';
 export * from './no-results';
 export * from './snackbar';

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

@@ -45,6 +45,7 @@ const symbolToSubpath = {
   "Menu": "overlays",
   "Modal": "overlays",
   "Tooltip": "overlays",
+  "Accordion": "primitive",
   "Alert": "primitive",
   "Anchor": "primitive",
   "Attribute": "primitive",
@@ -59,6 +60,8 @@ const symbolToSubpath = {
   "Calculator": "primitive",
   "Card": "primitive",
   "FilterChip": "primitive",
+  "Heading": "primitive",
+  "Hr": "primitive",
   "Icon": "primitive",
   "ImageCircle": "primitive",
   "ImageSquare": "primitive",

package/package.json

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