@dimasbaguspm/versaur 0.0.48 → 0.0.49

package/dist/types/forms/textarea-input/textarea-input.d.ts

@@ -3,8 +3,8 @@ import { TextAreaInputProps } from './types';
 /**
  * TextAreaInput component for Versaur UI
  *
- * Provides a styled textarea field with semantic color, variant, error, and disabled support
- * Supports field-sizing for auto-resizing and configurable rows
+ * Uses contentEditable div for robust multi-line text input with better control
+ * Provides error states, disabled, and readOnly support
  * Follows browser standards and accessibility best practices
  */
-export declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/forms/textarea-input/types.d.ts

@@ -1,15 +1,8 @@
-import { TextareaHTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 /**
  * Props for the TextAreaInput component
  */
-export interface TextAreaInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
-    /**
-     * Visual style variant supporting Versaur color system
-     * Core variants: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
-     * Semantic variants: success, info, warning, danger
-     * Each variant supports outline form for flexible design expression
-     */
-    variant?: 'primary' | 'primary-outline' | 'secondary' | 'secondary-outline' | 'tertiary' | 'tertiary-outline' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'success' | 'success-outline' | 'info' | 'info-outline' | 'warning' | 'warning-outline' | 'danger' | 'danger-outline';
+export interface TextAreaInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children' | 'defaultValue'> {
     /**
      * Label text to display above the textarea
      */
@@ -23,18 +16,40 @@ export interface TextAreaInputProps extends Omit<TextareaHTMLAttributes<HTMLText
      */
     error?: ReactNode;
     /**
-     * Minimum number of rows for the textarea
+     * The current value of the textarea (for controlled components)
+     */
+    value?: string;
+    /**
+     * The default value for uncontrolled components
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the content changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Whether the textarea is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the textarea is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Placeholder text to display when empty
+     */
+    placeholder?: string;
+    /**
+     * Name attribute for form submission
      */
-    minRows?: number;
+    name?: string;
     /**
-     * Maximum number of rows for the textarea
-     * Only applies when fieldSizing is 'fixed'
+     * Number of rows (height in rem units)
+     * @default 3
      */
-    maxRows?: number;
+    row?: number;
     /**
-     * Enable field-sizing CSS property for auto-resizing
-     * 'content' - Auto-resize to fit content (ignores maxRows)
-     * 'fixed' - Fixed size with manual resize handle (respects minRows/maxRows)
+     * Whether the textarea is required
      */
-    fieldSizing?: 'content' | 'fixed';
+    required?: boolean;
 }

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

@@ -3,9 +3,8 @@ export * from './bottom-bar';
 export * from './badge-group';
 export * from './button-group';
 export * from './filter-chip-group';
-export * from './page-content';
 export * from './page-header';
-export * from './page-layout';
+export * from './page-content';
 export * from './page-loader';
 export * from './form-layout';
 export * from './side-bar';

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

@@ -1,2 +1,2 @@
 export { PageContent } from './page-content';
-export type { PageContentProps } from './types';
+export type * from './types';

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

@@ -1,15 +1,9 @@
 import { PageContentProps } from './types';
+import * as React from 'react';
 /**
- * PageContent - Layout component for page content areas
+ * PageContent component serves as a parent wrapper for main content
+ * Sits in the body region or below the page header
  *
- * Provides consistent horizontal spacing that matches the page-header
- * component, with additional vertical padding for proper content separation.
- * Designed to be used as a sibling to PageHeader for consistent page layouts.
- *
- * Key features:
- * - Horizontal padding matches page-header (px-4 sm:px-6)
- * - Additional vertical padding for content separation (py-6 sm:py-8)
- * - Mobile-first responsive design
- * - Full width container
+ * @group Layout
  */
-export declare const PageContent: import('react').ForwardRefExoticComponent<PageContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const PageContent: React.ForwardRefExoticComponent<PageContentProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,14 +1,34 @@
-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
+ * Props for the PageContent component
  */
-export interface PageContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface PageContentProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * Content to be displayed inside the page content area
+     * Size determines the max-width and padding
+     * - 'fluid': No padding, full viewport width
+     * - 'wide': Container for desktop screens (centered)
+     * - 'narrow': Container for mobile screens (centered)
      */
-    children?: ReactNode;
+    size?: 'fluid' | 'wide' | 'narrow';
+    /**
+     * Template defines the column layout structure
+     * - 'single-column': Single centered column
+     * - 'two-column': Two equal columns
+     * - 'two-column-asymmetric-left': Two columns with left column wider
+     * - 'two-column-asymmetric-right': Two columns with right column wider
+     */
+    template?: 'single-column' | 'two-column' | 'two-column-asymmetric-left' | 'two-column-asymmetric-right';
+    /**
+     * Background color of the layout
+     * - 'white': White background
+     * - 'gray': Gray background
+     */
+    backgroundColor?: 'white' | 'gray';
+    /**
+     * Content to render inside the layout
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class names to apply to the root element
+     */
+    className?: string;
 }

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

@@ -4,6 +4,19 @@ import { ReactNode, HTMLAttributes } from 'react';
  * Props for PageHeader main container
  */
 export interface PageHeaderProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Size determines the max-width and padding
+     * - 'fluid': No padding, full viewport width
+     * - 'wide': Container for desktop screens (centered)
+     * - 'narrow': Container for mobile screens (centered)
+     */
+    size?: 'fluid' | 'wide' | 'narrow';
+    /**
+     * Background color of the header
+     * - 'white': White background
+     * - 'gray': Gray background
+     */
+    backgroundColor?: 'white' | 'gray';
     children?: ReactNode;
 }
 /**

package/dist/types/navigation/tabs/tabs.atoms.d.ts

@@ -1,10 +1,11 @@
 import { default as React } from 'react';
 import { TabsTriggerProps, TabsIndicatorProps } from './types';
 /**
- * TabsTrigger: Individual tab button
+ * TabsTrigger: Semantic tab link (li > a)
+ * Follows WCAG 2.1 AA standards for navigation tabs
  */
 export declare const TabsTrigger: React.FC<TabsTriggerProps>;
 /**
- * TabsIndicator: Animated underline indicator for active tab
+ * TabsIndicator: Animated underline indicator for active tab (primary color)
  */
 export declare const TabsIndicator: React.FC<TabsIndicatorProps>;

package/dist/types/navigation/tabs/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, HTMLAttributes } from 'react';
+import { ReactNode, HTMLAttributes, AnchorHTMLAttributes } from 'react';
 /**
  * TabsContextValue: Shared state for compound/context Tabs
  */
@@ -7,30 +7,22 @@ export interface TabsContextValue {
     activeTab: string;
     /** Set active tab */
     setActiveTab: (tab: string) => void;
-    /** Default color for triggers */
-    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral';
-    /** Variant for tab style */
-    variant?: 'underline' | 'filled';
 }
 /**
- * TabsRootProps: Props for Tabs root
+ * TabsRootProps: Props for Tabs root (rendered as nav element)
  */
-export interface TabsRootProps extends HTMLAttributes<HTMLDivElement> {
+export interface TabsRootProps extends HTMLAttributes<HTMLElement> {
     /** Controlled tab value */
     value: string;
     /** Callback when tab changes */
     onValueChange: (tab: string) => void;
-    /** Color for triggers */
-    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral';
-    /** Variant for tab style */
-    variant?: 'underline' | 'filled';
     /** Children: Tabs.Trigger */
     children: ReactNode;
 }
 /**
- * TabsTriggerProps: Individual tab button
+ * TabsTriggerProps: Individual tab link (rendered as li > a)
  */
-export interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+export interface TabsTriggerProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /** Tab value (unique string) */
     value: string;
     /** Children: tab label */

package/dist/types/navigation/tabs/use-tab-indicator.d.ts

@@ -1,13 +1,13 @@
-import { default as React } from 'react';
 /**
- * useTabIndicatorAndFocus
- * Handles indicator position and focusing the active tab in a tablist
- * @param value - active tab value
- * @param containerRef - ref to the tablist container
- * @param children - tablist children (for effect dependency)
- * @returns { left: number, width: number }
+ * useTabIndicator
+ * Calculates position and width for the animated underline indicator
+ * Also scrolls active tab into view for better UX
+ *
+ * @param value - Currently active tab value
+ * @param containerRef - Reference to the ul[role="tablist"] element
+ * @returns Object with left offset and width for the indicator
  */
-export declare function useTabIndicatorAndFocus(value: string, containerRef: React.RefObject<HTMLDivElement | null>, children: React.ReactNode): {
+export declare function useTabIndicator(value: string, containerRef: React.RefObject<HTMLUListElement | null>): {
     left: number;
     width: number;
 };

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

@@ -3,25 +3,35 @@ import { DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerHeaderTabP
 import { ButtonIconProps, TextProps } from '../../primitive';
 /**
  * DrawerOverlay - Background overlay that appears behind the drawer
- * Always provides a dark blurred background to help users focus on the drawer content
+ * Provides a dark blurred background to help users focus on the drawer content
  */
 export declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
  * DrawerHeader - Header section of the drawer
- * Typically contains the title and close button
+ * Uses semantic <header> element with proper ARIA labeling
+ */
+export declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLElement>>;
+/**
+ * DrawerTitle - Title element for the drawer header
+ * Automatically uses the titleId from context for ARIA labeling
  */
-export declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export declare const DrawerTitle: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+/**
+ * DrawerCloseButton - Close button for the drawer
+ * Triggers the onClose callback when clicked
+ */
 export declare const DrawerCloseButton: React.ForwardRefExoticComponent<Partial<ButtonIconProps> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * DrawerTab - Container for tabbed navigation within drawer header
+ */
 export declare const DrawerTab: React.ForwardRefExoticComponent<DrawerHeaderTabProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * DrawerBody - Main content area of the drawer
- * Scrollable container for the drawer content
+ * Uses semantic <main> element and scrollable container
  */
-export declare const DrawerBody: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerBody: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLElement>>;
 /**
  * DrawerFooter - Footer section of the drawer
- * Typically contains action buttons
- * Supports responsive flex behavior for optimal button layout across screen sizes
+ * Uses semantic <footer> element for action buttons
  */
-export declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLElement>>;

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

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
 import { DrawerProps } from './types';
 /**
- * Drawer - A controlled sliding drawer overlay component
- * Provides additional space for content with positioning, sizing, and glass variant options
+ * DrawerRoot - A controlled sliding drawer overlay component
+ * Provides additional space for content with positioning and sizing options
  */
 export declare const DrawerRoot: React.FC<DrawerProps>;
 /**
@@ -10,10 +10,10 @@ export declare const DrawerRoot: React.FC<DrawerProps>;
  * Provides a convenient API for using the drawer with all its parts
  */
 export declare const Drawer: React.FC<DrawerProps> & {
-    Header: React.ForwardRefExoticComponent<import('./types').DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<import('./types').DrawerHeaderProps & React.RefAttributes<HTMLElement>>;
     Title: React.ForwardRefExoticComponent<import('../..').TextProps & React.RefAttributes<HTMLElement>>;
     CloseButton: React.ForwardRefExoticComponent<Partial<import('../..').ButtonIconProps> & React.RefAttributes<HTMLButtonElement>>;
     Tab: React.ForwardRefExoticComponent<import('./types').DrawerHeaderTabProps & React.RefAttributes<HTMLDivElement>>;
-    Body: React.ForwardRefExoticComponent<import('./types').DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
-    Footer: React.ForwardRefExoticComponent<import('./types').DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import('./types').DrawerBodyProps & React.RefAttributes<HTMLElement>>;
+    Footer: React.ForwardRefExoticComponent<import('./types').DrawerFooterProps & React.RefAttributes<HTMLElement>>;
 };

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

@@ -1,15 +1,9 @@
 import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';
-import { VariantProps } from '../../utils/variants';
-import { drawerVariants } from './helpers';
 import { OverlayPortalProps } from '../../utils/overlay-portal';
 /**
  * Drawer transition type options
  */
 export type DrawerTransitionType = 'slide' | 'fade';
-/**
- * Base drawer variant props derived from the drawer variants
- */
-export type DrawerVariantProps = VariantProps<typeof drawerVariants>;
 /**
  * Drawer positioning options
  */
@@ -18,10 +12,6 @@ export type DrawerPosition = 'left' | 'right';
  * Drawer size options
  */
 export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | '3/4' | 'full';
-/**
- * Drawer variant options
- */
-export type DrawerVariant = 'default' | 'glass';
 /**
  * Context value for the Drawer compound component
  */
@@ -34,14 +24,16 @@ export interface DrawerContextValue {
     position: DrawerPosition;
     /** Drawer size */
     size: DrawerSize;
-    /** Drawer variant */
-    variant: DrawerVariant;
     /** Drawer transition type */
     transitionType: DrawerTransitionType;
     /** Whether to disable overlay click to close */
     disableOverlayClickToClose: boolean;
     /** Whether to disable escape key down */
     disableEscapeKeyDown: boolean;
+    /** ID for the drawer title element (for aria-labelledby) */
+    titleId: string;
+    /** ID for the drawer description element (for aria-describedby) */
+    descriptionId: string;
 }
 /**
  * Props for the Drawer component (controlled component)
@@ -53,11 +45,15 @@ export interface DrawerProps extends ComponentPropsWithoutRef<'div'>, OverlayPor
 /**
  * Props for the DrawerHeader component
  */
-export interface DrawerHeaderProps extends ComponentPropsWithoutRef<'div'> {
+export interface DrawerHeaderProps extends ComponentPropsWithoutRef<'header'> {
     /** Children components */
     children: ReactNode;
+    /** Whether the header has tabs */
     hasTab?: boolean;
 }
+/**
+ * Props for the DrawerTab component
+ */
 export interface DrawerHeaderTabProps extends HTMLAttributes<HTMLDivElement> {
     /** Children components */
     children: ReactNode;
@@ -65,14 +61,14 @@ export interface DrawerHeaderTabProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * Props for the DrawerBody component
  */
-export interface DrawerBodyProps extends ComponentPropsWithoutRef<'div'> {
+export interface DrawerBodyProps extends ComponentPropsWithoutRef<'main'> {
     /** Children components */
     children: ReactNode;
 }
 /**
  * Props for the DrawerFooter component
  */
-export interface DrawerFooterProps extends ComponentPropsWithoutRef<'div'> {
+export interface DrawerFooterProps extends ComponentPropsWithoutRef<'footer'> {
     /** Children components */
     children: ReactNode;
 }

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

@@ -1,3 +1,8 @@
 import { default as React } from 'react';
 import { ButtonProps } from './types';
+/**
+ * Button component following browser-standard button behavior
+ * Supports 4 variants: primary, ghost, outline, and destructive
+ * Provides 3 sizes: sm, md (default), lg
+ */
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,25 +1,26 @@
 import { ButtonHTMLAttributes } from 'react';
 /**
  * ButtonProps defines the props for the Button component
- * @property variant - Visual style variant based on Versaur color system
+ * @property variant - Visual style variant (primary, ghost, outline, destructive)
  * @property size - Size of the button (sm, md, lg)
  * @property disabled - Whether the button is disabled
- * @property type - Button type attribute
- * @property onClick - Click event handler
+ * @property busy - Whether the button is in a loading/busy state
+ * @property type - Button type attribute (button, submit, reset)
  */
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
-     * Visual style variant supporting Versaur color system
-     * Core variants: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
-     * Semantic variants: success, info, warning, danger
-     * Each variant supports outline and ghost forms for flexible design expression
+     * Visual style variant
+     * - primary: Main action button with coral background (default)
+     * - ghost: Subtle, minimal visual weight for secondary actions
+     * - outline: Bordered lightweight alternative for secondary actions
+     * - destructive: For dangerous or irreversible actions (delete, remove, etc.)
      */
-    variant?: 'primary' | 'primary-outline' | 'primary-ghost' | 'secondary' | 'secondary-outline' | 'secondary-ghost' | 'tertiary' | 'tertiary-outline' | 'tertiary-ghost' | 'accent_1' | 'accent_1-outline' | 'accent_1-ghost' | 'accent_2' | 'accent_2-outline' | 'accent_2-ghost' | 'accent_3' | 'accent_3-outline' | 'accent_3-ghost' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'neutral-ghost' | 'success' | 'success-outline' | 'success-ghost' | 'info' | 'info-outline' | 'info-ghost' | 'warning' | 'warning-outline' | 'warning-ghost' | 'danger' | 'danger-outline' | 'danger-ghost' | 'outline' | 'destructive';
+    variant?: 'primary' | 'ghost' | 'outline' | 'destructive';
     /**
      * Size of the button
-     * sm: 36px height, compact for space-constrained interfaces
-     * md: 40px height, standard for most use cases
-     * lg: 44px height, prominent for primary actions
+     * - sm: 28px height, compact for space-constrained interfaces
+     * - md: 36px height, standard for most use cases (default)
+     * - lg: 40px height, prominent for primary actions
      */
     size?: 'sm' | 'md' | 'lg';
     /**
@@ -27,4 +28,16 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * When true, the button becomes non-interactive and visually dimmed
      */
     disabled?: boolean;
+    /**
+     * Whether the button is in a loading/busy state
+     * Can be used to show loading indicators or disable interaction during async operations
+     */
+    busy?: boolean;
+    /**
+     * Button type attribute
+     * - button: Standard button (default, prevents form submission)
+     * - submit: Submits the containing form
+     * - reset: Resets the containing form
+     */
+    type?: 'button' | 'submit' | 'reset';
 }

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ButtonAnchorProps } from './types';
+/**
+ * ButtonAnchor component styled as a button but rendered as an anchor
+ * Supports 3 variants: primary, ghost, and outline
+ * Provides 3 sizes: sm, md (default), lg
+ * Useful for navigation actions that should look like buttons
+ */
+export declare const ButtonAnchor: React.ForwardRefExoticComponent<ButtonAnchorProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/types/primitive/button-anchor/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonAnchor } from './button-anchor';
+export type { ButtonAnchorProps } from './types';

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

@@ -0,0 +1,35 @@
+import { AnchorHTMLAttributes } from 'react';
+/**
+ * ButtonAnchorProps defines the props for the ButtonAnchor component
+ * @property variant - Visual style variant (primary, ghost, outline)
+ * @property size - Size of the anchor button (sm, md, lg)
+ * @property disabled - Whether the anchor is disabled (prevents navigation and applies disabled styles)
+ * @property href - Required URL that the anchor links to
+ */
+export interface ButtonAnchorProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    /**
+     * Visual style variant
+     * - primary: Main action button with coral background (default)
+     * - ghost: Subtle, minimal visual weight for secondary actions
+     * - outline: Bordered lightweight alternative for secondary actions
+     */
+    variant?: 'primary' | 'ghost' | 'outline';
+    /**
+     * Size of the anchor button
+     * - sm: 28px height, compact for space-constrained interfaces
+     * - md: 36px height, standard for most use cases (default)
+     * - lg: 40px height, prominent for primary actions
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the anchor is disabled
+     * When true, the anchor becomes non-interactive and visually dimmed
+     * Prevents navigation by removing href and adding aria-disabled
+     */
+    disabled?: boolean;
+    /**
+     * URL the anchor links to (required)
+     * When disabled, this href will be temporarily removed but preserved for when enabled
+     */
+    href: string;
+}

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

@@ -1,3 +1,9 @@
 import { default as React } from 'react';
 import { ButtonIconProps } from './types';
+/**
+ * ButtonIcon component - icon-only button following browser-standard button behavior
+ * Supports 4 variants: primary, ghost, outline, and destructive
+ * Provides 3 sizes: sm, md (default), lg
+ * Provides 3 shapes: rounded (default), square, circle
+ */
 export declare const ButtonIcon: React.ForwardRefExoticComponent<ButtonIconProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -3,32 +3,38 @@ import { IconProps } from '../icon';
 /**
  * ButtonIconProps defines the props for the ButtonIcon component
  * @property as - Icon component to render inside the button (e.g., from lucide-react)
- * @property variant - Visual style variant based on Versaur color system
+ * @property variant - Visual style variant (primary, ghost, outline, destructive)
  * @property shape - Shape type of the button (rounded, square, circle)
  * @property size - Size of the button (sm, md, lg)
  * @property disabled - Whether the button is disabled
+ * @property busy - Whether the button is in a loading/busy state
  * @property aria-label - Accessible label for screen readers (required for icon-only buttons)
- *
- * Inherits icon sizing and color props from IconProps for alignment
  */
 export interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'color'>, Pick<IconProps, 'as'> {
     /**
      * Icon component to render inside the button (e.g., from lucide-react)
      */
+    as: IconProps['as'];
     /**
-     * Visual style variant supporting Versaur color system
+     * Visual style variant
+     * - primary: Main action button with coral background (default)
+     * - ghost: Subtle, minimal visual weight for secondary actions
+     * - outline: Bordered lightweight alternative for secondary actions
+     * - destructive: For dangerous or irreversible actions (delete, remove, etc.)
      */
-    variant?: 'primary' | 'primary-outline' | 'primary-ghost' | 'secondary' | 'secondary-outline' | 'secondary-ghost' | 'tertiary' | 'tertiary-outline' | 'tertiary-ghost' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'neutral-ghost' | 'success' | 'success-outline' | 'success-ghost' | 'info' | 'info-outline' | 'info-ghost' | 'warning' | 'warning-outline' | 'warning-ghost' | 'danger' | 'danger-outline' | 'danger-ghost' | 'outline' | 'destructive';
+    variant?: 'primary' | 'ghost' | 'outline' | 'destructive';
     /**
      * Size of the button and icon
-     * xs: 24px, sm: 32px, md: 40px, lg: 48px, xl: 56px
+     * - sm: 28px height/width, compact for space-constrained interfaces
+     * - md: 36px height/width, standard for most use cases (default)
+     * - lg: 40px height/width, prominent for primary actions
      */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: 'sm' | 'md' | 'lg';
     /**
      * Shape type of the button
-     * rounded: Standard rounded corners (default)
-     * square: Perfect square with minimal rounded corners
-     * circle: Circular shape
+     * - rounded: Standard rounded corners (default)
+     * - square: Perfect square with minimal rounded corners
+     * - circle: Circular shape
      */
     shape?: 'rounded' | 'square' | 'circle';
     /**
@@ -36,6 +42,11 @@ export interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
      * When true, the button becomes non-interactive and visually dimmed
      */
     disabled?: boolean;
+    /**
+     * Whether the button is in a loading/busy state
+     * Can be used to show loading indicators or disable interaction during async operations
+     */
+    busy?: boolean;
     /**
      * Accessible label for screen readers
      * Required for icon-only buttons to ensure accessibility

package/dist/types/primitive/filter-chip/types.d.ts

@@ -1,20 +1,10 @@
 import { ButtonHTMLAttributes } from 'react';
 /**
  * FilterChipProps defines the props for the FilterChip component
- * @property variant - Visual style variant based on Versaur color system
  * @property size - Size of the chip (sm, md, lg)
  * @property disabled - Whether the chip is disabled
- * @property onRemove - Callback when the remove icon is clicked
- * @property label - The text content of the chip
  */
 export interface FilterChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * Visual style variant supporting Versaur color system
-     * Core variants: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
-     * Semantic variants: success, info, warning, danger
-     * Each variant supports outline forms for flexible design expression
-     */
-    variant?: 'primary' | 'primary-outline' | 'secondary' | 'secondary-outline' | 'tertiary' | 'tertiary-outline' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'success' | 'success-outline' | 'info' | 'info-outline' | 'warning' | 'warning-outline' | 'danger' | 'danger-outline';
     /**
      * Size of the chip
      * sm: 28px height, compact for dense layouts

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

@@ -8,6 +8,7 @@ export * from './avatar';
 export * from './badge';
 export * from './brand';
 export * from './button';
+export * from './button-anchor';
 export * from './button-menu';
 export * from './button-menu-icon';
 export * from './button-icon';