@vtx-ui/react 0.0.1-beta.1

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

@@ -0,0 +1,117 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import './Button.css';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Visual style variant of the button
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning';
+    /**
+     * Size of the button
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * If true, button will take full width of its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Loading state - shows loading indicator and disables interaction
+     * When true, the button becomes unclickable and shows a spinner
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Icon to display before button text
+     * Pass any React node (icon component, emoji, etc.)
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Icon to display after button text
+     * Pass any React node (icon component, emoji, etc.)
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * If true, renders the button as an icon-only button (no text padding)
+     * Content should be an icon element
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Custom loading text to display when loading is true
+     * @default undefined (uses children content)
+     */
+    loadingText?: string;
+    /**
+     * If true, renders button as a link element with button styling
+     * Requires href prop when true
+     * @default false
+     */
+    asLink?: boolean;
+    /**
+     * URL when rendering as link (requires asLink=true)
+     */
+    href?: string;
+    /**
+     * Target attribute when rendering as link
+     */
+    target?: string;
+    /**
+     * Rel attribute when rendering as link
+     */
+    rel?: string;
+    /**
+     * Optional text color for the button
+     */
+    textColor?: string;
+    /**
+     * If true/false, applies dark or light text color class
+     */
+    darkText?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Button component - Primary interactive element for user actions
+ *
+ * A comprehensive button component with multiple variants, sizes, loading states,
+ * and icon support. Can also render as a link with button styling.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Button variant="primary" size="medium" onClick={() => console.log('clicked')}>
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example
+ * With icons
+ * ```tsx
+ * <Button variant="primary" leftIcon={<SaveIcon />}>
+ *   Save Changes
+ * </Button>
+ * <Button variant="secondary" rightIcon={<ArrowIcon />}>
+ *   Next
+ * </Button>
+ * ```
+ *
+ * @example
+ * Loading state
+ * ```tsx
+ * <Button loading loadingText="Saving...">
+ *   Save
+ * </Button>
+ * ```
+ *
+ * @example
+ * As link
+ * ```tsx
+ * <Button asLink href="/dashboard" variant="primary">
+ *   Go to Dashboard
+ * </Button>
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare const _default: React.FC<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Button } from './Button';
+export type { ButtonProps } from './Button';
+export { Button as ButtonComponent } from './Button';

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import './Card.css';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of the card
+     */
+    children: React.ReactNode;
+    /**
+     * The variant of the card
+     * @default 'elevated'
+     */
+    variant?: 'elevated' | 'outlined' | 'filled';
+    /**
+     * Size of the card
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * If true, removes padding from the card
+     * @default false
+     */
+    noPadding?: boolean;
+    /**
+     * Custom padding value (e.g., '16px', '1rem', '0')
+     * Overrides noPadding when provided
+     */
+    padding?: string;
+    /**
+     * If true, makes the card hoverable with interaction effects
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * If true, makes the card clickable (adds cursor pointer)
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Header content for the card
+     */
+    header?: React.ReactNode;
+    /**
+     * Footer content for the card
+     */
+    footer?: React.ReactNode;
+    /**
+     * If true, adds dividers between header, content, and footer
+     * @default false
+     */
+    divider?: boolean;
+}
+/**
+ * Card component - Container for grouping related content
+ *
+ * A versatile card component with support for variants, padding control,
+ * headers, footers, and interactive states.
+ *
+ * @example
+ * Basic card
+ * ```tsx
+ * <Card>
+ *   <h3>Card Title</h3>
+ *   <p>Card content goes here</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Card without padding
+ * ```tsx
+ * <Card noPadding>
+ *   <img src="image.jpg" alt="Full bleed image" />
+ * </Card>
+ * ```
+ *
+ * @example
+ * Card with custom padding
+ * ```tsx
+ * <Card padding="32px">
+ *   <p>Card with custom padding</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Card with header and footer
+ * ```tsx
+ * <Card
+ *   header={<h3>Card Header</h3>}
+ *   footer={<button>Action</button>}
+ *   divider
+ * >
+ *   <p>Card content</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Interactive card
+ * ```tsx
+ * <Card hoverable clickable onClick={() => console.log('clicked')}>
+ *   <p>Click me!</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Customize appearance with CSS
+ * ```css
+ * .vtx-card {
+ *   --vtx-card-bg: #ffffff;
+ *   --vtx-card-border-radius: 8px;
+ *   --vtx-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ *   --vtx-card-padding: 16px;
+ * }
+ * ```
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.FC<CardProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Card } from './Card';
+export type { CardProps } from './Card';
+export { Card as CardComponent } from './Card';

package/dist/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/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/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/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/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/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/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;