@vtx-ui/react 0.0.1-beta.4 → 0.0.1-beta.5

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

@@ -170,7 +170,10 @@ export interface AdminHeaderProps {
         onClick?: () => void;
     }>;
 }
-declare const AdminHeaderWithParsedClasses: (props: AdminHeaderProps & React.RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+declare const AdminHeaderWithParsedClasses: {
+    (props: AdminHeaderProps & React.RefAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { AdminHeaderWithParsedClasses as AdminHeader };
 declare const _default: React.FC<AdminHeaderProps & React.RefAttributes<HTMLElement>>;
 export default _default;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Size } from '../../theme';
 import './Alert.css';
 export interface AlertProps {
     /**
@@ -24,7 +25,7 @@ export interface AlertProps {
      */
     alertStyle?: 'filled' | 'outlined' | 'subtle' | 'left-accent';
     /** Size of the alert. Defaults to theme defaultSize or 'md'. */
-    size?: 'sm' | 'md' | 'lg';
+    size?: Size;
     /**
      * Custom icon or false to hide icon
      * If not provided, shows default icon based on variant
@@ -62,7 +63,10 @@ export interface AlertProps {
      */
     role?: string;
 }
-declare const AlertWithParsedClasses: (props: AlertProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const AlertWithParsedClasses: {
+    (props: AlertProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<AlertProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 export { AlertWithParsedClasses as Alert };

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

@@ -57,7 +57,10 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     statusIndicator?: React.ReactNode;
     statusPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
-declare const AvatarWithParsedClasses: (props: AvatarProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const AvatarWithParsedClasses: {
+    (props: AvatarProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<AvatarProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 export { AvatarWithParsedClasses as Avatar };

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

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from 'react';
+import { Size } from '../../theme';
 import './Badge.css';
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /**
@@ -8,9 +9,9 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';
     /**
      * Size of the badge
-     * @default 'medium'
+     * @default theme.defaultSize
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
     /**
      * If true, badge will be pill-shaped with rounded ends
      * @default false
@@ -45,7 +46,10 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
      */
     onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
-declare const BadgeWithParsedClasses: (props: BadgeProps & React.RefAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+declare const BadgeWithParsedClasses: {
+    (props: BadgeProps & React.RefAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;
 export { BadgeWithParsedClasses as Badge };

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

@@ -1,4 +1,5 @@
 import React, { ButtonHTMLAttributes } from 'react';
+import { Size } from '../../theme';
 import './Button.css';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
@@ -10,7 +11,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * Size of the button
      * @default 'md'
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: Size;
     /**
      * If true, button will take full width of its container
      * @default false
@@ -71,7 +72,10 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     darkText?: boolean;
     children?: React.ReactNode;
 }
-declare const ButtonWithParsedClasses: (props: ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonWithParsedClasses: {
+    (props: ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default _default;
 export { ButtonWithParsedClasses as Button };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Size } from '../../theme';
 import './Card.css';
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -14,7 +15,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
      * Size of the card
      * @default 'md'
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: Size;
     /**
      * If true, removes padding from the card
      * @default false
@@ -53,7 +54,10 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     divider?: boolean;
 }
-declare const CardWithParsedClasses: (props: CardProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const CardWithParsedClasses: {
+    (props: CardProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<CardProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 export { CardWithParsedClasses as Card };

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

@@ -51,7 +51,10 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      */
     inputClassName?: string;
 }
-declare const CheckboxWithParsedClasses: (props: CheckboxProps & React.RefAttributes<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+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 { CheckboxWithParsedClasses as Checkbox };

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

@@ -64,7 +64,10 @@ export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivEle
      */
     className?: string;
 }
-declare const CheckboxGroupWithParsedClasses: (props: CheckboxGroupProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+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,7 +56,10 @@ export interface ChipProps {
      */
     'data-testid'?: string;
 }
-declare const ChipWithParsedClasses: (props: ChipProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+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,7 +42,10 @@ 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;
+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,7 +36,10 @@ 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;
+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,7 +75,10 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     children?: React.ReactNode;
 }
-declare const GridWithParsedClasses: (props: GridProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+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,7 +101,10 @@ export interface HeaderProps {
      */
     sticky?: boolean;
 }
-declare const HeaderWithParsedClasses: (props: HeaderProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+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,7 +74,10 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
      */
     suffix?: string;
 }
-declare const InputWithParsedClasses: (props: InputProps & React.RefAttributes<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+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,7 +78,10 @@ export interface MenuProps {
  * MenuItem component - Individual menu item with submenu support
  */
 export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
-declare const MenuWithParsedClasses: (props: MenuProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+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 };

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

@@ -126,7 +126,10 @@ export interface ModalProps {
      */
     centered?: boolean;
 }
-declare const ModalWithParsedClasses: (props: ModalProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const ModalWithParsedClasses: {
+    (props: ModalProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<ModalProps>;
 export default _default;
 export { ModalWithParsedClasses as Modal };

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

@@ -145,7 +145,10 @@ export interface MultiSelectProps {
      */
     loading?: boolean;
 }
-declare const MultiSelectWithParsedClasses: (props: MultiSelectProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectWithParsedClasses: {
+    (props: MultiSelectProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 export { MultiSelectWithParsedClasses as MultiSelect };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Size } from '../../theme';
 import './Radio.css';
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     /**
@@ -16,9 +17,9 @@ export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     label?: React.ReactNode;
     /**
      * The size of the radio
-     * @default 'medium'
+     * @default theme.defaultSize
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
     /**
      * The variant of the radio
      * @default 'primary'
@@ -46,7 +47,10 @@ export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      */
     inputClassName?: string;
 }
-declare const RadioWithParsedClasses: (props: RadioProps & React.RefAttributes<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+declare const RadioWithParsedClasses: {
+    (props: RadioProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<RadioProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
 export { RadioWithParsedClasses as Radio };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Size } from '../../theme';
 import './RadioGroup.css';
 export interface RadioOption {
     /**
@@ -60,9 +61,9 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     orientation?: 'horizontal' | 'vertical';
     /**
      * The size of the radios
-     * @default 'medium'
+     * @default theme.defaultSize
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
     /**
      * The variant of the radios
      * @default 'primary'
@@ -73,7 +74,10 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      */
     className?: string;
 }
-declare const RadioGroupWithParsedClasses: (props: RadioGroupProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const RadioGroupWithParsedClasses: {
+    (props: RadioGroupProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 export { RadioGroupWithParsedClasses as RadioGroup };

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

@@ -1,4 +1,5 @@
 import React, { SelectHTMLAttributes } from 'react';
+import { Size } from '../../theme';
 import './Select.css';
 export interface SelectOption {
     /**
@@ -39,9 +40,9 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
     success?: string;
     /**
      * Size of the select
-     * @default 'medium'
+     * @default theme.defaultSize
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
     /**
      * If true, select will take full width of its container
      * @default false
@@ -107,7 +108,10 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
      */
     loading?: boolean;
 }
-declare const SelectWithParsedClasses: (props: SelectProps & React.RefAttributes<HTMLSelectElement>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectWithParsedClasses: {
+    (props: SelectProps & React.RefAttributes<HTMLSelectElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { SelectWithParsedClasses as Select };
 declare const _default: React.FC<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default _default;