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

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

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

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

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

@@ -1,118 +0,0 @@
-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/components/Divider/index.d.ts

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

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

@@ -1,66 +0,0 @@
-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/components/Flex/index.d.ts

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

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

@@ -1,156 +0,0 @@
-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/components/Grid/index.d.ts

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

package/dist/components/Header/Header.d.ts

@@ -1,138 +0,0 @@
-import React from 'react';
-import './Header.css';
-export interface NotificationItem {
-    /**
-     * Notification ID
-     */
-    id: string;
-    /**
-     * Notification title
-     */
-    title: string;
-    /**
-     * Notification description
-     */
-    description?: string;
-    /**
-     * Timestamp or time ago string
-     */
-    time: string;
-    /**
-     * Whether notification is read
-     * @default false
-     */
-    read?: boolean;
-    /**
-     * Notification icon
-     */
-    icon?: React.ReactNode;
-    /**
-     * Click handler
-     */
-    onClick?: () => void;
-    /**
-     * Notification type for styling
-     */
-    type?: 'info' | 'success' | 'warning' | 'error';
-}
-export interface HeaderProps {
-    /**
-     * Logo or brand element
-     */
-    logo?: React.ReactNode;
-    /**
-     * Title text
-     */
-    title?: string;
-    /**
-     * Toggle button click handler (for sidebar)
-     */
-    onToggleSidebar?: () => void;
-    /**
-     * Whether to show toggle button
-     * @default true
-     */
-    showToggle?: boolean;
-    /**
-     * Notifications list
-     */
-    notifications?: NotificationItem[];
-    /**
-     * Notification click handler
-     */
-    onNotificationClick?: (notification: NotificationItem) => void;
-    /**
-     * Mark all as read handler
-     */
-    onMarkAllAsRead?: () => void;
-    /**
-     * User name
-     */
-    userName?: string;
-    /**
-     * User email or role
-     */
-    userSubtitle?: string;
-    /**
-     * User avatar image URL
-     */
-    userAvatar?: string;
-    /**
-     * User menu items
-     */
-    userMenuItems?: Array<{
-        label: string;
-        icon?: React.ReactNode;
-        onClick?: () => void;
-        variant?: 'default' | 'danger';
-        divider?: boolean;
-    }>;
-    /**
-     * Custom actions (buttons, search, etc.)
-     */
-    actions?: React.ReactNode;
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Whether header is sticky
-     * @default true
-     */
-    sticky?: boolean;
-}
-/**
- * Header component - Professional admin panel header with notifications and user menu
- *
- * @example
- * Basic header
- * ```tsx
- * <Header
- *   title="Admin Dashboard"
- *   userName="John Doe"
- *   userSubtitle="Admin"
- *   onToggleSidebar={() => setCollapsed(!collapsed)}
- * />
- * ```
- *
- * @example
- * With notifications
- * ```tsx
- * <Header
- *   title="Dashboard"
- *   notifications={[
- *     { id: '1', title: 'New order received', time: '2 min ago', read: false },
- *     { id: '2', title: 'User registered', time: '1 hour ago', read: true }
- *   ]}
- *   userName="John Doe"
- *   userMenuItems={[
- *     { label: 'Profile', icon: <UserIcon /> },
- *     { label: 'Settings', icon: <SettingsIcon /> },
- *     { label: 'Logout', icon: <LogoutIcon />, variant: 'danger' }
- *   ]}
- * />
- * ```
- */
-export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.FC<HeaderProps & React.RefAttributes<HTMLElement>>;
-export default _default;

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

@@ -1,3 +0,0 @@
-export { default as Header } from './Header';
-export type { HeaderProps, NotificationItem } from './Header';
-export { Header as HeaderComponent } from './Header';