@vtx-ui/react 0.0.1-beta.1

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

@@ -0,0 +1,98 @@
+import { ReactNode } from 'react';
+export interface AccordionItemProps {
+    /** Unique identifier for the accordion item */
+    id: string;
+    /** The header content for the accordion item */
+    header: ReactNode;
+    /** The body content for the accordion item */
+    children: ReactNode;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Custom class name for the accordion item */
+    className?: string;
+    /** Loading state for this specific item */
+    loading?: boolean;
+    /** Status indicator for the item */
+    status?: 'default' | 'success' | 'warning' | 'error' | 'featured';
+    /** Custom icon for this specific item (overrides accordion-level icons) */
+    icon?: {
+        expanded?: React.ReactNode;
+        collapsed?: React.ReactNode;
+    };
+    /** Additional data attributes for testing or analytics */
+    dataTestId?: string;
+}
+export interface AccordionProps {
+    /** Array of accordion items */
+    items?: AccordionItemProps[];
+    /** Children accordion items (alternative to items prop) */
+    children?: ReactNode;
+    /** Whether multiple items can be open at once */
+    allowMultiple?: boolean;
+    /** Default open items (controlled) */
+    defaultOpenItems?: string[];
+    /** Open items (uncontrolled) */
+    openItems?: string[];
+    /** Callback when items are toggled */
+    onToggle?: (openItems: string[]) => void;
+    /** Visual variant style of the accordion */
+    variant?: 'default' | 'bordered' | 'separated' | 'flush';
+    /** Size variant of the accordion */
+    size?: 'sm' | 'md' | 'lg';
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Whether to show chevron icons */
+    showChevron?: boolean;
+    /** Position of the chevron icon */
+    chevronPosition?: 'left' | 'right';
+    /** Custom icon for expanded state */
+    expandedIcon?: React.ReactNode;
+    /** Custom icon for collapsed state */
+    collapsedIcon?: React.ReactNode;
+    /** Icon type preset */
+    iconType?: 'chevron' | 'plus-minus' | 'custom';
+    /** Whether to show divider lines between items */
+    showDivider?: boolean;
+    /** Whether items are collapsible (can all be closed) */
+    collapsible?: boolean;
+    /** Loading state for the entire accordion */
+    loading?: boolean;
+    /** Disable all accordion interactions */
+    disabled?: boolean;
+    /** Spacing variant for compact or spacious layouts */
+    spacing?: 'compact' | 'default' | 'spacious';
+    /** Disable animations for better performance or accessibility */
+    disableAnimations?: boolean;
+}
+export interface AccordionItemComponentProps {
+    /** The accordion item data */
+    item: AccordionItemProps;
+    /** Whether this item is open */
+    isOpen: boolean;
+    /** Function to toggle this item */
+    onToggle: () => void;
+    /** Variant from parent accordion */
+    variant: AccordionProps['variant'];
+    /** Size from parent accordion */
+    size: AccordionProps['size'];
+    /** Whether to show chevron */
+    showChevron: boolean;
+    /** Chevron position */
+    chevronPosition: AccordionProps['chevronPosition'];
+    /** Custom icon for expanded state */
+    expandedIcon?: React.ReactNode;
+    /** Custom icon for collapsed state */
+    collapsedIcon?: React.ReactNode;
+    /** Icon type preset */
+    iconType?: AccordionProps['iconType'];
+    /** Loading state from parent accordion */
+    loading?: boolean;
+    /** Disabled state from parent accordion */
+    disabled?: boolean;
+    /** Spacing variant from parent accordion */
+    spacing?: AccordionProps['spacing'];
+    /** Disable animations */
+    disableAnimations?: boolean;
+}

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import './Alert.css';
+export interface AlertProps {
+    /**
+     * Content of the alert (primary message, can be any ReactNode)
+     */
+    children?: React.ReactNode;
+    /**
+     * Alert title
+     */
+    title?: string;
+    /**
+     * Alert description - alternative to children for simple text
+     */
+    description?: string;
+    /**
+     * Visual variant of the alert
+     * @default 'info'
+     */
+    variant?: 'success' | 'error' | 'warning' | 'info' | 'neutral';
+    /**
+     * Visual style of the alert
+     * @default 'subtle'
+     */
+    alertStyle?: 'filled' | 'outlined' | 'subtle' | 'left-accent';
+    /** Size of the alert. Defaults to theme defaultSize or 'md'. */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Custom icon or false to hide icon
+     * If not provided, shows default icon based on variant
+     */
+    icon?: React.ReactNode | false;
+    /**
+     * If true, shows close button
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Callback fired when alert is dismissed
+     */
+    onClose?: () => void;
+    /**
+     * Action element (button or link) displayed on the right
+     */
+    action?: React.ReactNode;
+    /**
+     * If true, alert takes full width of container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Custom inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Role attribute for accessibility
+     * @default 'alert'
+     */
+    role?: string;
+}
+/**
+ * Alert component - Displays important messages and notifications
+ *
+ * A flexible alert component supporting multiple variants, styles, and interactive features.
+ * Can display simple messages or complex content with titles, actions, and custom icons.
+ *
+ * @example
+ * Simple alert with children
+ * ```tsx
+ * <Alert variant="success">
+ *   Your changes have been saved!
+ * </Alert>
+ * ```
+ *
+ * @example
+ * Alert with title and description
+ * ```tsx
+ * <Alert
+ *   variant="error"
+ *   title="Error occurred"
+ *   description="Unable to connect to the server."
+ *   dismissible
+ *   onClose={() => console.log('closed')}
+ * />
+ * ```
+ *
+ * @example
+ * Alert with action button
+ * ```tsx
+ * <Alert
+ *   variant="warning"
+ *   title="Update available"
+ *   style="left-accent"
+ *   action={<Button size="small">Update Now</Button>}
+ * >
+ *   A new version is available. Update to get the latest features.
+ * </Alert>
+ * ```
+ *
+ * @example
+ * Alert with custom icon
+ * ```tsx
+ * <Alert
+ *   variant="info"
+ *   icon={<CustomIcon />}
+ *   title="Custom notification"
+ * >
+ *   This alert uses a custom icon.
+ * </Alert>
+ * ```
+ */
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.FC<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { Alert };

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

@@ -0,0 +1,3 @@
+export { default as Alert } from './Alert';
+export type { AlertProps } from './Alert';
+export { Alert as AlertComponent } from './Alert';

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

@@ -0,0 +1,63 @@
+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/types/components/Avatar/index.d.ts

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

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

@@ -0,0 +1,81 @@
+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/types/components/Badge/index.d.ts

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

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