@vtx-ui/react 0.0.1-beta.1

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import './Checkbox.css';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * If true, the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * If true, the checkbox appears indeterminate
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * If true, the checkbox is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The label for the checkbox
+     */
+    label?: React.ReactNode;
+    /**
+     * The size of the checkbox
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The variant of the checkbox
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+    /**
+     * If true, displays error styling
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Helper text displayed below the checkbox
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Callback fired when the state is changed
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Additional CSS class name for the container
+     */
+    className?: string;
+    /**
+     * Additional CSS class name for the input element
+     */
+    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 _default: React.FC<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export { Checkbox };

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

@@ -0,0 +1,3 @@
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { Checkbox as CheckboxComponent } from './Checkbox';

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import './CheckboxGroup.css';
+export interface CheckboxOption {
+    /**
+     * The value of the checkbox
+     */
+    value: string;
+    /**
+     * The label for the checkbox
+     */
+    label: React.ReactNode;
+    /**
+     * If true, the checkbox is disabled
+     */
+    disabled?: boolean;
+}
+export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * The label for the checkbox group
+     */
+    label?: React.ReactNode;
+    /**
+     * Array of checkbox options
+     */
+    options: CheckboxOption[];
+    /**
+     * Array of selected values
+     */
+    value?: string[];
+    /**
+     * Default selected values for uncontrolled mode
+     */
+    defaultValue?: string[];
+    /**
+     * Callback fired when the selection changes
+     */
+    onChange?: (value: string[]) => void;
+    /**
+     * If true, all checkboxes are disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, displays error styling
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Helper text displayed below the group
+     */
+    helperText?: React.ReactNode;
+    /**
+     * The layout orientation of the checkboxes
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The size of the checkboxes
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Additional CSS class name
+     */
+    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 _default: React.FC<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupProps, CheckboxOption } from './CheckboxGroup';
+export { CheckboxGroup as CheckboxGroupComponent } from './CheckboxGroup';

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

@@ -0,0 +1,91 @@
+import React, { ReactNode, MouseEvent } from 'react';
+import './Chip.css';
+export interface ChipProps {
+    /**
+     * The label text to display inside the chip
+     */
+    label: string;
+    /**
+     * Size of the chip
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Visual style variant
+     * @default 'filled'
+     */
+    variant?: 'filled' | 'outlined' | 'light';
+    /**
+     * Color theme of the chip
+     * @default 'default'
+     */
+    color?: 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info';
+    /**
+     * Icon to display at the start of the chip
+     */
+    icon?: ReactNode;
+    /**
+     * Avatar image URL to display at the start
+     */
+    avatar?: string;
+    /**
+     * If true, shows a delete/close button
+     * @default false
+     */
+    onDelete?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Callback when chip is clicked
+     */
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * If true, chip cannot be interacted with
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom aria-label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Data attribute for testing
+     */
+    '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 _default: React.FC<ChipProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Chip } from './Chip';
+export type { ChipProps } from './Chip';
+export { Chip as ChipComponent } from './Chip';

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import './Divider.css';
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement | HTMLDivElement> {
+    /**
+     * Align the content within the divider
+     * Only works when children are provided
+     * @default 'center'
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    /**
+     * The component orientation
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The variant to use
+     * @default 'fullWidth'
+     */
+    variant?: 'fullWidth' | 'inset' | 'middle';
+    /**
+     * If true, the divider will have a lighter color
+     * @default false
+     */
+    light?: boolean;
+    /**
+     * If true, the divider will be optimized for use in flex containers
+     * @default false
+     */
+    flexItem?: boolean;
+    /**
+     * The content of the divider
+     */
+    children?: React.ReactNode;
+    /**
+     * The component used for the root node
+     * Either a string to use a HTML element or a component
+     * @default 'hr'
+     */
+    component?: React.ElementType;
+    /**
+     * Additional CSS class name
+     */
+    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 _default: React.FC<DividerProps & React.RefAttributes<HTMLHRElement | HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Divider } from './Divider';
+export type { DividerProps } from './Divider';
+export { Divider as DividerComponent } from './Divider';

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import './Flex.css';
+export interface FlexProps {
+    /** Child elements */
+    children?: React.ReactNode;
+    /** Flex direction */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /** Flex wrap behavior */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /** Justify content alignment */
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+    /** Align items alignment */
+    align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    /** Align content alignment (multi-line) */
+    alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';
+    /** Gap between items */
+    gap?: number | string;
+    /** Row gap (overrides gap for rows) */
+    rowGap?: number | string;
+    /** Column gap (overrides gap for columns) */
+    columnGap?: number | string;
+    /** Whether the container is inline-flex */
+    inline?: boolean;
+    /** Whether the container takes full width (default: true) */
+    fullWidth?: boolean;
+    /** Flex grow value */
+    grow?: number;
+    /** Flex shrink value */
+    shrink?: number;
+    /** Flex basis value */
+    basis?: string | number;
+    /** Custom className */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** 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 _default: React.FC<FlexProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Flex } from './Flex';
+export type { FlexProps } from './Flex';
+export { Flex as FlexComponent } from './Flex';

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

@@ -0,0 +1,156 @@
+import React from 'react';
+import './Grid.css';
+type GridSize = boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If true, the component will have the flex container behavior
+     * @default false
+     */
+    container?: boolean;
+    /**
+     * If true, the component will have the flex item behavior
+     * @default false
+     */
+    item?: boolean;
+    /**
+     * Defines the space between items (applies to container)
+     * @default 0
+     */
+    spacing?: GridSpacing;
+    /**
+     * Defines the row gap between items (applies to container)
+     */
+    rowSpacing?: GridSpacing;
+    /**
+     * Defines the column gap between items (applies to container)
+     */
+    columnSpacing?: GridSpacing;
+    /**
+     * Number of columns (1-12) for all breakpoints
+     */
+    xs?: GridSize;
+    /**
+     * Number of columns (1-12) for small devices (≥600px)
+     */
+    sm?: GridSize;
+    /**
+     * Number of columns (1-12) for medium devices (≥960px)
+     */
+    md?: GridSize;
+    /**
+     * Number of columns (1-12) for large devices (≥1280px)
+     */
+    lg?: GridSize;
+    /**
+     * Number of columns (1-12) for extra large devices (≥1920px)
+     */
+    xl?: GridSize;
+    /**
+     * Defines the justify-content style property
+     */
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    /**
+     * Defines the align-items style property
+     */
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    /**
+     * Defines the align-content style property
+     */
+    alignContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'stretch';
+    /**
+     * Defines the flex-direction style property
+     */
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    /**
+     * Defines the flex-wrap style property
+     */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * The content of the component
+     */
+    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 _default: React.FC<GridProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Grid } from './Grid';
+export type { GridProps } from './Grid';
+export { Grid as GridComponent } from './Grid';