@vtx-ui/react 0.0.1-beta.15 → 0.0.1-beta.16

package/dist/types/components/Container/Container.d.ts

@@ -31,10 +31,46 @@ export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     children?: React.ReactNode;
 }
-declare const ContainerWithParsedClasses: {
-    (props: ContainerProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Container component - A responsive container that centers content
+ *
+ * Similar to Bootstrap's container, this component provides a responsive
+ * fixed-width container with automatic margins and padding.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Container>
+ *   <h1>Hello World</h1>
+ *   <p>Content goes here...</p>
+ * </Container>
+ * ```
+ *
+ * @example
+ * Fluid container (full width)
+ * ```tsx
+ * <Container fluid>
+ *   <p>This spans the full width</p>
+ * </Container>
+ * ```
+ *
+ * @example
+ * Custom max width
+ * ```tsx
+ * <Container maxWidth="sm">
+ *   <p>Smaller container for forms</p>
+ * </Container>
+ * ```
+ *
+ * @example
+ * Without gutters
+ * ```tsx
+ * <Container disableGutters>
+ *   <p>No horizontal padding</p>
+ * </Container>
+ * ```
+ */
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<ContainerProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { ContainerWithParsedClasses as Container };
+export { Container };

package/dist/types/components/DataGrid/DataGrid.d.ts

@@ -115,10 +115,10 @@ export interface DataGridProps<T = any> extends Omit<TableHTMLAttributes<HTMLDiv
     className?: string;
     sx?: Record<string, any>;
 }
-declare const DataGridWithParsedClasses: {
-    (props: DataGridProps<any>): import("react/jsx-runtime").JSX.Element;
+declare const DataGridBase: {
+    ({ columns, rows, getRowId, filterModel: controlledFilterModel, onFilterModelChange, initialState, disableColumnFilter, ignoreDiacritics, sortModel: controlledSortModel, onSortModelChange, checkboxSelection, rowSelectionModel: controlledSelectionModel, onRowSelectionModelChange, pagination, pageSize: initialPageSize, pageSizeOptions, loading, skeletonLoader, skeletonRows, loadingContent, emptyStateIcon, emptyStateTitle, emptyStateDescription, autoHeight, density, disableColumnMenu, hideFooter, size, className, ...props }: DataGridProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const _default: React.FC<DataGridProps>;
 export default _default;
-export { DataGridWithParsedClasses as DataGrid };
+export { DataGridBase as DataGrid };

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -90,10 +90,40 @@ export interface DatePickerProps {
      */
     clearable?: boolean;
 }
-declare const DatePickerWithParsedClasses: {
-    (props: DatePickerProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * DatePicker component - A professional date picker with calendar dropdown
+ *
+ * Features:
+ * - Calendar view with month navigation
+ * - Keyboard navigation support
+ * - Customizable date ranges and disabled dates
+ * - Professional design following modern UI patterns
+ * - Accessibility support
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <DatePicker
+ *   label="Birth Date"
+ *   value={birthDate}
+ *   onChange={setBirthDate}
+ *   placeholder="Select date"
+ * />
+ * ```
+ *
+ * @example
+ * With constraints
+ * ```tsx
+ * <DatePicker
+ *   label="Appointment Date"
+ *   value={appointmentDate}
+ *   onChange={setAppointmentDate}
+ *   minDate={new Date()}
+ *   maxDate={new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)}
+ * />
+ * ```
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
 declare const _default: React.FC<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
-export { DatePickerWithParsedClasses as DatePicker };
+export { DatePicker };

package/dist/types/components/DatePicker/DateRangePicker.d.ts

@@ -105,10 +105,44 @@ export interface DateRangePickerProps {
      */
     clearable?: boolean;
 }
-declare const DateRangePickerWithParsedClasses: {
-    (props: DateRangePickerProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * DateRangePicker component - A professional date range picker with calendar dropdown
+ *
+ * Features:
+ * - Calendar view with range selection
+ * - Preset date ranges (Today, Last 7 days, etc.)
+ * - Keyboard navigation support
+ * - Customizable date ranges and disabled dates
+ * - Professional design following modern UI patterns
+ * - Accessibility support
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <DateRangePicker
+ *   label="Date Range"
+ *   value={dateRange}
+ *   onChange={setDateRange}
+ *   startPlaceholder="Start date"
+ *   endPlaceholder="End date"
+ * />
+ * ```
+ *
+ * @example
+ * With presets
+ * ```tsx
+ * <DateRangePicker
+ *   label="Reporting Period"
+ *   value={reportingRange}
+ *   onChange={setReportingRange}
+ *   presets={[
+ *     { label: 'Last Quarter', range: { start: lastQuarterStart, end: lastQuarterEnd } },
+ *     { label: 'This Year', range: { start: yearStart, end: new Date() } },
+ *   ]}
+ * />
+ * ```
+ */
+declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;
 declare const _default: React.FC<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
-export { DateRangePickerWithParsedClasses as DateRangePicker };
+export { DateRangePicker };

package/dist/types/components/Divider/Divider.d.ts

@@ -42,10 +42,78 @@ export interface DividerProps extends React.HTMLAttributes<HTMLHRElement | HTMLD
      */
     className?: string;
 }
-declare const DividerWithParsedClasses: {
-    (props: DividerProps & React.RefAttributes<HTMLDivElement | HTMLHRElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Divider component - A thin line that groups content in lists and layouts
+ *
+ * The Divider component provides a thin, unobtrusive line for grouping elements
+ * to reinforce visual hierarchy. It supports horizontal and vertical orientations,
+ * multiple variants, and can wrap content like text or chips.
+ *
+ * ## CSS Customization
+ *
+ * You can customize the divider appearance using CSS custom properties:
+ *
+ * ```css
+ * .custom-divider {
+ *   --vtx-divider-color: #e91e63;
+ *   --vtx-divider-color-light: #fce4ec;
+ *   --vtx-divider-text-color: #c2185b;
+ *   --vtx-divider-text-color-light: #f48fb1;
+ *   --vtx-divider-text-size: 14px;
+ *   --vtx-divider-text-weight: 600;
+ * }
+ * ```
+ *
+ * Or set them globally on :root:
+ *
+ * ```css
+ * :root {
+ *   --vtx-divider-color: #1976d2;
+ *   --vtx-divider-text-color: #0d47a1;
+ * }
+ * ```
+ *
+ * @example
+ * Basic horizontal divider
+ * ```tsx
+ * <Divider />
+ * ```
+ *
+ * @example
+ * Vertical divider in flex container
+ * ```tsx
+ * <Box display="flex" alignItems="center">
+ *   <Chip label="Item 1" />
+ *   <Divider orientation="vertical" flexItem />
+ *   <Chip label="Item 2" />
+ * </Box>
+ * ```
+ *
+ * @example
+ * With text content
+ * ```tsx
+ * <div>
+ *   <p>Content above</p>
+ *   <Divider>OR</Divider>
+ *   <p>Content below</p>
+ * </div>
+ * ```
+ *
+ * @example
+ * With chip and custom alignment
+ * ```tsx
+ * <Divider textAlign="left">
+ *   <Chip label="Section" size="small" />
+ * </Divider>
+ * ```
+ *
+ * @example
+ * Custom colored divider
+ * ```tsx
+ * <Divider className="custom-divider">Custom</Divider>
+ * ```
+ */
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement | HTMLHRElement>>;
 declare const _default: React.FC<DividerProps & React.RefAttributes<HTMLHRElement | HTMLDivElement>>;
 export default _default;
-export { DividerWithParsedClasses as Divider };
+export { Divider };

package/dist/types/components/Flex/Flex.d.ts

@@ -36,10 +36,32 @@ export interface FlexProps {
     /** HTML element to render as */
     as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'main';
 }
-declare const FlexWithParsedClasses: {
-    (props: FlexProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Flex component - A flexible container for flexbox layouts
+ *
+ * @example
+ * ```tsx
+ * // Basic row with gap
+ * <Flex gap={16}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Flex>
+ *
+ * // Centered column
+ * <Flex direction="column" align="center" justify="center">
+ *   <h1>Title</h1>
+ *   <p>Content</p>
+ * </Flex>
+ *
+ * // Space between with wrap
+ * <Flex justify="between" wrap="wrap" gap={8}>
+ *   <button>Button 1</button>
+ *   <button>Button 2</button>
+ *   <button>Button 3</button>
+ * </Flex>
+ * ```
+ */
+declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<FlexProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { FlexWithParsedClasses as Flex };
+export { Flex };

package/dist/types/components/FormControl/FormControl.d.ts

@@ -68,10 +68,53 @@ export interface FormControlProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     labelPosition?: 'top' | 'left';
 }
-declare const FormControlWithParsedClasses: {
-    (props: FormControlProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * FormControl component - Wrapper for form inputs with consistent spacing and layout
+ *
+ * Provides consistent label, helper text, error handling, and spacing for all form inputs.
+ * Works with Input, Textarea, Select, RichTextEditor, and custom form components.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <FormControl label="Email" helperText="Enter your email address">
+ *   <Input type="email" placeholder="you@example.com" />
+ * </FormControl>
+ * ```
+ *
+ * @example
+ * With error state
+ * ```tsx
+ * <FormControl label="Password" error="Password is required" required>
+ *   <Input type="password" />
+ * </FormControl>
+ * ```
+ *
+ * @example
+ * Form with multiple fields
+ * ```tsx
+ * <div>
+ *   <FormControl label="First Name" required>
+ *     <Input />
+ *   </FormControl>
+ *   <FormControl label="Last Name" required>
+ *     <Input />
+ *   </FormControl>
+ *   <FormControl label="Bio" helperText="Tell us about yourself">
+ *     <Textarea />
+ *   </FormControl>
+ * </div>
+ * ```
+ *
+ * @example
+ * Horizontal label
+ * ```tsx
+ * <FormControl label="Email" labelPosition="left">
+ *   <Input type="email" />
+ * </FormControl>
+ * ```
+ */
+declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<FormControlProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { FormControlWithParsedClasses as FormControl };
+export { FormControl };

package/dist/types/components/Grid/Grid.d.ts

@@ -75,10 +75,83 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     children?: React.ReactNode;
 }
-declare const GridWithParsedClasses: {
-    (props: GridProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Grid component - A responsive grid layout system
+ *
+ * The Grid component uses a 12-column responsive grid layout inspired by Material-UI.
+ * It supports five breakpoints (xs, sm, md, lg, xl) and provides flexible spacing,
+ * alignment, and direction options.
+ *
+ * ## Breakpoints
+ * - xs: 0px and up (extra small devices)
+ * - sm: 600px and up (small devices)
+ * - md: 960px and up (medium devices)
+ * - lg: 1280px and up (large devices)
+ * - xl: 1920px and up (extra large devices)
+ *
+ * ## CSS Customization
+ *
+ * You can customize the grid spacing using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --vtx-grid-spacing-unit: 8px;
+ * }
+ * ```
+ *
+ * @example
+ * Basic grid with equal columns
+ * ```tsx
+ * <Grid container spacing={2}>
+ *   <Grid item xs={12} sm={6} md={4}>
+ *     <div>Column 1</div>
+ *   </Grid>
+ *   <Grid item xs={12} sm={6} md={4}>
+ *     <div>Column 2</div>
+ *   </Grid>
+ *   <Grid item xs={12} sm={6} md={4}>
+ *     <div>Column 3</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * Responsive layout
+ * ```tsx
+ * <Grid container spacing={3}>
+ *   <Grid item xs={12} md={8}>
+ *     <div>Main content</div>
+ *   </Grid>
+ *   <Grid item xs={12} md={4}>
+ *     <div>Sidebar</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * Auto-width columns
+ * ```tsx
+ * <Grid container spacing={2}>
+ *   <Grid item xs="auto">
+ *     <div>Auto width</div>
+ *   </Grid>
+ *   <Grid item xs>
+ *     <div>Fills remaining space</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * With alignment
+ * ```tsx
+ * <Grid container spacing={2} justifyContent="center" alignItems="center">
+ *   <Grid item xs={6}>
+ *     <div>Centered content</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<GridProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { GridWithParsedClasses as Grid };
+export { Grid };

package/dist/types/components/Header/Header.d.ts

@@ -101,10 +101,39 @@ export interface HeaderProps {
      */
     sticky?: boolean;
 }
-declare const HeaderWithParsedClasses: {
-    (props: HeaderProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Header component - Professional admin panel header with notifications and user menu
+ *
+ * @example
+ * Basic header
+ * ```tsx
+ * <Header
+ *   title="Admin Dashboard"
+ *   userName="John Doe"
+ *   userSubtitle="Admin"
+ *   onToggleSidebar={() => setCollapsed(!collapsed)}
+ * />
+ * ```
+ *
+ * @example
+ * With notifications
+ * ```tsx
+ * <Header
+ *   title="Dashboard"
+ *   notifications={[
+ *     { id: '1', title: 'New order received', time: '2 min ago', read: false },
+ *     { id: '2', title: 'User registered', time: '1 hour ago', read: true }
+ *   ]}
+ *   userName="John Doe"
+ *   userMenuItems={[
+ *     { label: 'Profile', icon: <UserIcon /> },
+ *     { label: 'Settings', icon: <SettingsIcon /> },
+ *     { label: 'Logout', icon: <LogoutIcon />, variant: 'danger' }
+ *   ]}
+ * />
+ * ```
+ */
+declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<HeaderProps & React.RefAttributes<HTMLElement>>;
 export default _default;
-export { HeaderWithParsedClasses as Header };
+export { Header };

package/dist/types/components/Input/Input.d.ts

@@ -74,10 +74,58 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
      */
     suffix?: string;
 }
-declare const InputWithParsedClasses: {
-    (props: InputProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Input component - Text input field with label, helper text, validation states, and rich features
+ *
+ * A comprehensive input component with support for icons, prefixes, suffixes, character counting,
+ * clear functionality, and various validation states.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   helperText="We'll never share your email"
+ * />
+ * ```
+ *
+ * @example
+ * With error state
+ * ```tsx
+ * <Input
+ *   label="Username"
+ *   error="Username is already taken"
+ *   value={username}
+ *   onChange={(e) => setUsername(e.target.value)}
+ * />
+ * ```
+ *
+ * @example
+ * With icons and clear button
+ * ```tsx
+ * <Input
+ *   label="Search"
+ *   leftIcon={<SearchIcon />}
+ *   clearable
+ *   onClear={() => setSearch('')}
+ * />
+ * ```
+ *
+ * @example
+ * With character counter
+ * ```tsx
+ * <Input
+ *   label="Bio"
+ *   maxLength={100}
+ *   showCount
+ *   value={bio}
+ *   onChange={(e) => setBio(e.target.value)}
+ * />
+ * ```
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 declare const _default: React.FC<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
-export { InputWithParsedClasses as Input };
+export { Input };

package/dist/types/components/Link/Link.d.ts

@@ -59,10 +59,53 @@ export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>,
     download?: boolean | string;
     children?: React.ReactNode;
 }
-declare const LinkWithParsedClasses: {
-    (props: LinkProps & React.RefAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Link component - Hyperlink with routing library support
+ *
+ * A flexible link component that works with native anchors, React Router, Next.js,
+ * or any custom routing library. Supports text variants and theming.
+ *
+ * @example
+ * Basic usage (native link)
+ * ```tsx
+ * <Link href="/about">About Us</Link>
+ * ```
+ *
+ * @example
+ * With React Router
+ * ```tsx
+ * import { Link as RouterLink } from 'react-router-dom'
+ * <Link component={RouterLink} to="/dashboard">Dashboard</Link>
+ * ```
+ *
+ * @example
+ * With Next.js
+ * ```tsx
+ * import NextLink from 'next/link'
+ * <Link component={NextLink} href="/profile">Profile</Link>
+ * ```
+ *
+ * @example
+ * With variants and icons
+ * ```tsx
+ * <Link
+ *   href="/downloads"
+ *   variant="h6"
+ *   leftIcon={<DownloadIcon />}
+ * >
+ *   Download
+ * </Link>
+ * ```
+ *
+ * @example
+ * External link
+ * ```tsx
+ * <Link href="https://example.com" external>
+ *   Visit Website
+ * </Link>
+ * ```
+ */
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
 declare const _default: React.FC<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export default _default;
-export { LinkWithParsedClasses as Link };
+export { Link };

package/dist/types/components/Menu/ActionMenu.d.ts

@@ -54,10 +54,61 @@ export interface ActionMenuProps {
      */
     onClose?: () => void;
 }
-declare const ActionMenuWithParsedClasses: {
-    (props: ActionMenuProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * ActionMenu component - Dropdown menu triggered by a button click
+ *
+ * A dropdown menu that opens below a trigger element. Perfect for actions menus,
+ * context menus, and dropdown options.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <ActionMenu
+ *   triggerLabel="Actions"
+ *   items={[
+ *     { label: 'Edit', icon: <EditIcon />, onClick: () => {} },
+ *     { label: 'Delete', icon: <DeleteIcon />, onClick: () => {}, variant: 'danger' }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * Custom trigger element
+ * ```tsx
+ * <ActionMenu
+ *   trigger={<Button>Open Menu</Button>}
+ *   items={menuItems}
+ * />
+ * ```
+ *
+ * @example
+ * Custom trigger with render function (full control)
+ * ```tsx
+ * <ActionMenu
+ *   trigger={({ isOpen, toggle, disabled }) => (
+ *     <Button onClick={toggle} disabled={disabled}>
+ *       Menu {isOpen ? '▲' : '▼'}
+ *     </Button>
+ *   )}
+ *   items={menuItems}
+ * />
+ * ```
+ *
+ * @example
+ * With icon
+ * ```tsx
+ * <ActionMenu
+ *   triggerLabel="More"
+ *   triggerIcon={<MoreVerticalIcon />}
+ *   position="bottom-end"
+ *   items={[
+ *     { label: 'Share', icon: <ShareIcon /> },
+ *     { label: 'Download', icon: <DownloadIcon /> }
+ *   ]}
+ * />
+ * ```
+ */
+declare const ActionMenu: React.ForwardRefExoticComponent<ActionMenuProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<ActionMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { ActionMenuWithParsedClasses as ActionMenu };
+export { ActionMenu };