@vtx-ui/react 0.0.1-beta.1 → 0.0.1-beta.10

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

@@ -51,64 +51,10 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      */
     inputClassName?: string;
 }
-/**
- * Checkbox component - Allows users to select one or more items from a set
- *
- * The Checkbox component provides a customizable checkbox input with support
- * for labels, error states, indeterminate state, and three sizes.
- *
- * ## CSS Customization
- *
- * You can customize the checkbox appearance using CSS custom properties:
- *
- * ```css
- * :root {
- *   --vtx-checkbox-color: #1976d2;
- *   --vtx-checkbox-size: 20px;
- *   --vtx-checkbox-border-width: 2px;
- *   --vtx-checkbox-border-radius: 4px;
- * }
- * ```
- *
- * @example
- * Basic checkbox
- * ```tsx
- * <Checkbox label="Accept terms and conditions" />
- * ```
- *
- * @example
- * Controlled checkbox with size
- * ```tsx
- * const [checked, setChecked] = useState(false);
- * <Checkbox
- *   checked={checked}
- *   onChange={(e) => setChecked(e.target.checked)}
- *   label="Subscribe to newsletter"
- *   size="lg"
- *   variant="secondary"
- * />
- * ```
- *
- * @example
- * With error state
- * ```tsx
- * <Checkbox
- *   label="I agree"
- *   error
- *   helperText="You must agree to continue"
- * />
- * ```
- *
- * @example
- * Indeterminate state
- * ```tsx
- * <Checkbox
- *   label="Select all"
- *   indeterminate
- * />
- * ```
- */
-declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+declare const CheckboxWithParsedClasses: {
+    (props: CheckboxProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
-export { Checkbox };
+export { CheckboxWithParsedClasses as Checkbox };

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

@@ -64,58 +64,10 @@ export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivEle
      */
     className?: string;
 }
-/**
- * CheckboxGroup component - Manages a group of related checkboxes
- *
- * The CheckboxGroup component provides a convenient way to manage multiple
- * checkboxes with shared state, labels, and error handling.
- *
- * @example
- * Basic usage
- * ```tsx
- * <CheckboxGroup
- *   label="Select your interests"
- *   options={[
- *     { value: 'sports', label: 'Sports' },
- *     { value: 'music', label: 'Music' },
- *     { value: 'travel', label: 'Travel' },
- *   ]}
- * />
- * ```
- *
- * @example
- * Controlled mode
- * ```tsx
- * const [selected, setSelected] = useState(['sports']);
- * <CheckboxGroup
- *   label="Interests"
- *   options={options}
- *   value={selected}
- *   onChange={setSelected}
- * />
- * ```
- *
- * @example
- * Horizontal layout
- * ```tsx
- * <CheckboxGroup
- *   label="Preferences"
- *   options={options}
- *   orientation="horizontal"
- * />
- * ```
- *
- * @example
- * With error state
- * ```tsx
- * <CheckboxGroup
- *   label="Required selection"
- *   options={options}
- *   error
- *   helperText="Please select at least one option"
- * />
- * ```
- */
-export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const CheckboxGroupWithParsedClasses: {
+    (props: CheckboxGroupProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { CheckboxGroupWithParsedClasses as CheckboxGroup };

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

@@ -1,4 +1,5 @@
 import React, { ReactNode, MouseEvent } from 'react';
+import { Size } from '../../theme';
 import './Chip.css';
 export interface ChipProps {
     /**
@@ -9,7 +10,7 @@ export interface ChipProps {
      * Size of the chip
      * @default 'md'
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: Size;
     /**
      * Visual style variant
      * @default 'filled'
@@ -55,37 +56,10 @@ export interface ChipProps {
      */
     'data-testid'?: string;
 }
-/**
- * Chip component - Compact element for displaying tags, labels, or selections
- *
- * A versatile chip component for representing small pieces of information like tags,
- * filters, selections, or categories with optional delete functionality.
- *
- * @example
- * Basic usage
- * ```tsx
- * <Chip label="React" />
- * ```
- *
- * @example
- * With delete functionality
- * ```tsx
- * <Chip
- *   label="JavaScript"
- *   onDelete={() => handleRemove('js')}
- * />
- * ```
- *
- * @example
- * With avatar
- * ```tsx
- * <Chip
- *   label="John Doe"
- *   avatar="https://avatar.url/john.jpg"
- *   variant="outlined"
- * />
- * ```
- */
-export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChipWithParsedClasses: {
+    (props: ChipProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<ChipProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { ChipWithParsedClasses as Chip };

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

@@ -0,0 +1,97 @@
+import React, { TableHTMLAttributes } from 'react';
+import { Size } from '../../theme';
+import './DataGrid.css';
+export interface GridFilterOperator {
+    label: string;
+    value: string;
+    getApplyFilterFn: (filterItem: GridFilterItem) => (value: any) => boolean;
+    InputComponent?: React.ComponentType<FilterInputComponentProps>;
+}
+export interface FilterInputComponentProps {
+    item: GridFilterItem;
+    applyValue: (value: string) => void;
+}
+export interface GridFilterItem {
+    id?: number;
+    field: string;
+    operator: string;
+    value?: string;
+}
+export interface GridFilterModel {
+    items: GridFilterItem[];
+    logicOperator?: 'and' | 'or';
+}
+export interface DataGridColumn<T = any> {
+    field: string;
+    headerName: string;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    flex?: number;
+    sortable?: boolean;
+    filterable?: boolean;
+    type?: 'string' | 'number' | 'date' | 'boolean' | 'singleSelect';
+    valueGetter?: (row: T) => any;
+    valueFormatter?: (value: any) => string;
+    renderCell?: (params: {
+        row: T;
+        value: any;
+        field: string;
+    }) => React.ReactNode;
+    filterOperators?: GridFilterOperator[];
+    align?: 'left' | 'center' | 'right';
+    headerAlign?: 'left' | 'center' | 'right';
+    /**
+     * Pin/freeze column to left or right side
+     * @default false
+     */
+    pinned?: 'left' | 'right' | false;
+}
+export type GridRowSelectionModel = (string | number)[];
+export interface DataGridProps<T = any> extends Omit<TableHTMLAttributes<HTMLDivElement>, 'children'> {
+    columns: DataGridColumn<T>[];
+    rows: T[];
+    getRowId?: (row: T, index?: number) => string | number;
+    filterModel?: GridFilterModel;
+    onFilterModelChange?: (model: GridFilterModel) => void;
+    initialState?: {
+        filter?: {
+            filterModel?: GridFilterModel;
+        };
+    };
+    disableColumnFilter?: boolean;
+    ignoreDiacritics?: boolean;
+    sortModel?: {
+        field: string;
+        sort: 'asc' | 'desc';
+    }[];
+    onSortModelChange?: (model: {
+        field: string;
+        sort: 'asc' | 'desc';
+    }[]) => void;
+    checkboxSelection?: boolean;
+    rowSelectionModel?: GridRowSelectionModel;
+    onRowSelectionModelChange?: (model: GridRowSelectionModel) => void;
+    pagination?: boolean;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    loading?: boolean;
+    autoHeight?: boolean;
+    density?: 'compact' | 'standard' | 'comfortable';
+    disableColumnMenu?: boolean;
+    hideFooter?: boolean;
+    /**
+     * Size of the data grid
+     * @default theme.defaultSize
+     */
+    size?: Size;
+    className?: string;
+    sx?: Record<string, any>;
+}
+declare const DataGridWithParsedClasses: {
+    (props: DataGridProps<any>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.FC<DataGridProps>;
+export default _default;
+export { DataGridWithParsedClasses as DataGrid };

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

@@ -0,0 +1,2 @@
+export { default as DataGrid, DataGrid as default } from './DataGrid';
+export type { DataGridColumn, DataGridProps, GridFilterItem, GridFilterModel, GridFilterOperator, GridRowSelectionModel, FilterInputComponentProps, } from './DataGrid';

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

@@ -42,77 +42,10 @@ export interface DividerProps extends React.HTMLAttributes<HTMLHRElement | HTMLD
      */
     className?: 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>
- * ```
- */
-export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement | HTMLHRElement>>;
+declare const DividerWithParsedClasses: {
+    (props: DividerProps & React.RefAttributes<HTMLDivElement | HTMLHRElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<DividerProps & React.RefAttributes<HTMLHRElement | HTMLDivElement>>;
 export default _default;
+export { DividerWithParsedClasses as Divider };

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

@@ -36,31 +36,10 @@ export interface FlexProps {
     /** HTML element to render as */
     as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'main';
 }
-/**
- * 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>
- * ```
- */
-export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FlexWithParsedClasses: {
+    (props: FlexProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<FlexProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { FlexWithParsedClasses as Flex };

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

@@ -75,82 +75,10 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     children?: React.ReactNode;
 }
-/**
- * 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>
- * ```
- */
-export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridWithParsedClasses: {
+    (props: GridProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<GridProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { GridWithParsedClasses as Grid };

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

@@ -101,38 +101,10 @@ export interface HeaderProps {
      */
     sticky?: boolean;
 }
-/**
- * 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' }
- *   ]}
- * />
- * ```
- */
-export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const HeaderWithParsedClasses: {
+    (props: HeaderProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<HeaderProps & React.RefAttributes<HTMLElement>>;
 export default _default;
+export { HeaderWithParsedClasses as Header };

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

@@ -1,4 +1,5 @@
 import React, { InputHTMLAttributes } from 'react';
+import { Size } from '../../theme';
 import './Input.css';
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /**
@@ -21,9 +22,9 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     success?: string;
     /**
      * Size of the input
-     * @default 'medium'
+     * @default theme.defaultSize
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
     /**
      * If true, input will take full width of its container
      * @default false
@@ -73,57 +74,10 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
      */
     suffix?: 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)}
- * />
- * ```
- */
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const InputWithParsedClasses: {
+    (props: InputProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
+export { InputWithParsedClasses as Input };

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

@@ -78,37 +78,10 @@ export interface MenuProps {
  * MenuItem component - Individual menu item with submenu support
  */
 export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * Menu component - Navigation or action menu with responsive support
- *
- * @example
- * Basic menu with items array
- * ```tsx
- * <Menu
- *   items={[
- *     { label: 'Profile', icon: <UserIcon />, onClick: () => {} },
- *     { label: 'Settings', icon: <SettingsIcon />, onClick: () => {} },
- *     { label: 'Logout', icon: <LogoutIcon />, onClick: () => {}, variant: 'danger' }
- *   ]}
- * />
- * ```
- *
- * @example
- * Horizontal menu with custom children
- * ```tsx
- * <Menu orientation="horizontal">
- *   <MenuItem label="Home" active />
- *   <MenuItem label="Products" />
- *   <MenuItem label="About" />
- * </Menu>
- * ```
- *
- * @example
- * Responsive menu (hamburger on mobile)
- * ```tsx
- * <Menu responsive items={menuItems} />
- * ```
- */
-export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuWithParsedClasses: {
+    (props: MenuProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<MenuProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { MenuWithParsedClasses as Menu };