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

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

@@ -1,63 +0,0 @@
-import React from "react";
-import { HTMLAttributes, ImgHTMLAttributes } from "react";
-import './Avatar.css';
-/**
- * Avatar component - Displays user profile image, initials, or fallback
- *
- * The Avatar component supports images, fallback text, different sizes, shapes, and status indicators.
- *
- * @example
- * Basic avatar with image
- * ```tsx
- * <Avatar src="https://randomuser.me/api/portraits/men/1.jpg" alt="John Doe" />
- * ```
- *
- * @example
- * Avatar with fallback text
- * ```tsx
- * <Avatar fallback="JD" />
- * ```
- *
- * @example
- * Different sizes
- * ```tsx
- * <Avatar src="..." size="small" />
- * <Avatar src="..." size="large" />
- * ```
- *
- * @example
- * Square shape
- * ```tsx
- * <Avatar src="..." shape="square" />
- * ```
- *
- * @example
- * Status indicator
- * ```tsx
- * <Avatar
- *   src="..."
- *   statusIndicator={<span style={{ background: 'green', borderRadius: '50%', width: 12, height: 12, display: 'inline-block' }} />}
- *   statusPosition="top-right"
- * />
- * ```
- */
-export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-    src?: string;
-    alt?: string;
-    /**
-     * Size of the avatar
-     * @default theme.defaultSize or 'md'
-     */
-    size?: 'sm' | 'md' | 'lg';
-    shape?: 'circle' | 'square';
-    fallback?: string;
-    onImageError?: (error: React.SyntheticEvent<HTMLImageElement, Event>) => void;
-    onImageLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
-    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'className' | 'onError' | 'onLoad'>;
-    statusIndicator?: React.ReactNode;
-    statusPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-}
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.FC<AvatarProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
-export { Avatar };

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

@@ -1,3 +0,0 @@
-export { default as Avatar } from './Avatar';
-export type { AvatarProps } from './Avatar';
-export { Avatar as AvatarComponent } from './Avatar';

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

@@ -1,81 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import './Badge.css';
-export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Visual variant of the badge
-     * @default 'neutral'
-     */
-    variant?: 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';
-    /**
-     * Size of the badge
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * If true, badge will be pill-shaped with rounded ends
-     * @default false
-     */
-    pill?: boolean;
-    /**
-     * If true, displays a dot indicator before the content
-     * Useful for status indicators
-     * @default false
-     */
-    dot?: boolean;
-    /**
-     * If true, displays the badge with an outline style instead of filled
-     * @default false
-     */
-    outline?: boolean;
-    /**
-     * Maximum content length before truncation
-     * Useful for limiting badge text length
-     */
-    maxLength?: number;
-    /**
-     * Icon to display before the badge content
-     */
-    icon?: React.ReactNode;
-    /**
-     * Badge content - text, numbers, or custom elements
-     */
-    children: React.ReactNode;
-    /**
-     * Callback fired when badge is clicked
-     */
-    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}
-/**
- * Badge component - Small labels and indicators for status, counts, or categories
- *
- * A versatile badge component that can display status indicators, counts, tags, or any short text
- * with various visual styles and customization options.
- *
- * @example
- * Basic status badges
- * ```tsx
- * <Badge variant="success">Active</Badge>
- * <Badge variant="error" dot>Error</Badge>
- * <Badge variant="primary" pill>NEW</Badge>
- * ```
- *
- * @example
- * With icon and outline
- * ```tsx
- * <Badge variant="info" icon={<InfoIcon />} outline>
- *   Information
- * </Badge>
- * ```
- *
- * @example
- * Removable badge
- * ```tsx
- * <Badge variant="primary" onRemove={(e) => handleRemove()}>
- *   Tag 1
- * </Badge>
- * ```
- */
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-declare const _default: React.FC<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-export default _default;
-export { Badge };

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

@@ -1,3 +0,0 @@
-export { default as Badge } from './Badge';
-export type { BadgeProps } from './Badge';
-export { Badge as BadgeComponent } from './Badge';

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

@@ -1,117 +0,0 @@
-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

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

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

@@ -1,120 +0,0 @@
-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

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

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

@@ -1,114 +0,0 @@
-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

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

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

@@ -1,121 +0,0 @@
-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

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