@vtx-ui/react 0.0.1-beta.8 → 0.0.1-beta.9

package/dist/types/index.d.ts

@@ -25,9 +25,11 @@ export type { MenuItemProps, MenuProps } from './components/Menu';
 export { Modal } from './components/Modal';
 export type { ModalProps } from './components/Modal';
 export { Toast, toast, ToastContainer, useToast } from './components/Toast';
-export type { ToastContainerProps, ToastOptions, ToastProps } from './components/Toast/types';
+export type { ToastContainerProps, ToastOptions, ToastProps, ToastVariant, ToastPosition, ToastInstance } from './components/Toast/types';
 export { Tooltip } from './components/Tooltip';
 export type { TooltipProps } from './components/Tooltip';
+export { AdminHeader } from './components/AdminHeader';
+export type { AdminHeaderProps, NotificationItem as AdminNotificationItem, UserMenuItem, QuickAction, SearchSuggestion } from './components/AdminHeader';
 export { Avatar } from './components/Avatar';
 export type { AvatarProps } from './components/Avatar';
 export { Badge } from './components/Badge';
@@ -42,6 +44,7 @@ export { Header } from './components/Header';
 export type { HeaderProps, NotificationItem } from './components/Header';
 export { SideMenu } from './components/SideMenu';
 export type { SideMenuItemProps, SideMenuProps } from './components/SideMenu';
+export { SideMenuItem } from './components/SideMenu';
 export { Table } from './components/Table';
 export type { TableColumn, TableProps } from './components/Table';
 export { Text } from './components/Text';
@@ -53,9 +56,9 @@ export type { FlexProps } from './components/Flex';
 export { Grid } from './components/Grid';
 export type { GridProps } from './components/Grid';
 export { ThemeProvider, useThemeContext } from './theme';
-export type { Theme, ThemeProviderProps } from './theme';
-export { tokens, generateCSSVariables, injectCSSVariables } from './theme';
-export type { Tokens, ColorScale, ColorShade } from './theme';
+export type { Theme, ThemeProviderProps, Size } from './theme';
+export { tokens, generateCSSVariables, injectCSSVariables, createCustomTokens, generateColorShades, normalizeColors } from './theme';
+export type { Tokens, ColorScale, ColorShade, CustomTokens, CustomColors, ColorPalette } from './theme';
 export { useBodyScrollLock, useClickOutside, useDebounce, useEscapeKey, useFocusTrap, useId, } from './hooks';
 export { InfoCard } from './widgets/InfoCard';
 export type { InfoCardBaseProps, InfoCardMetricProps } from './widgets/InfoCard';

package/dist/types/theme/index.d.ts

@@ -1,5 +1,5 @@
 export { ThemeProvider, useThemeContext } from './ThemeProvider';
-export { tokens } from './tokens';
+export { tokens, createCustomTokens, generateColorShades, normalizeColors } from './tokens';
 export { generateCSSVariables, injectCSSVariables } from './cssVariables';
 export type { Theme, ThemeProviderProps, Size } from './ThemeProvider';
 export type { Tokens, ColorScale, ColorShade, CustomTokens, CustomColors, ColorPalette } from './tokens';

package/dist/types/theme/tokens.d.ts

@@ -3,6 +3,11 @@
  * These tokens define the core visual language of the design system
  */
 export declare const COLOR_KEYS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+/**
+ * Generates a color palette from a single hex color
+ * Creates lighter shades (50-400) and darker shades (600-900) based on the base color (500)
+ */
+export declare function generateColorShades(hexColor: string): Record<number, string>;
 /**
  * Normalizes a colors object so that:
  * - String values (e.g., primary: "#fff") are expanded to full color palettes
@@ -12,18 +17,7 @@ export declare const COLOR_KEYS: readonly [50, 100, 200, 300, 400, 500, 600, 700
 export declare function normalizeColors(colors: Record<string, any>): Record<string, any>;
 export declare const tokens: {
     colors: {
-        primary: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-        };
+        primary: Record<number, string>;
         secondary: {
             50: string;
             100: string;
@@ -306,3 +300,14 @@ export type CustomTokens = {
 };
 export type ColorScale = keyof Colors;
 export type ColorShade = keyof ColorPalette;
+/**
+ * Helper function for creating custom tokens with proper type inference
+ * @example
+ * const myTokens = createCustomTokens({
+ *   colors: {
+ *     primary: '#0c6b58',  // Auto-generates 50-900 shades
+ *     secondary: { 500: '#ff5722', 600: '#f4511e' },  // Partial palette
+ *   }
+ * });
+ */
+export declare function createCustomTokens(tokens: CustomTokens): CustomTokens;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@vtx-ui/react",
-  "version": "0.0.1-beta.8",
+  "version": "0.0.1-beta.9",
   "description": "A production-ready React + TypeScript UI library with enterprise-grade components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/index.esm.js",
       "require": "./dist/index.cjs.js"
     },
     "./theme": {
-      "types": "./dist/theme/index.d.ts",
+      "types": "./dist/types/theme/index.d.ts",
       "import": "./dist/index.esm.js",
       "require": "./dist/index.cjs.js"
     },
@@ -20,8 +20,12 @@
   },
   "typesVersions": {
     "*": {
-      "*": ["dist/index.d.ts"],
-      "theme": ["dist/theme/index.d.ts"]
+      "*": [
+        "dist/types/index.d.ts"
+      ],
+      "theme": [
+        "dist/types/theme/index.d.ts"
+      ]
     }
   },
   "publishConfig": {

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

@@ -1,31 +0,0 @@
-import React from "react";
-import { AccordionProps } from "./types";
-import './Accordion.css';
-/**
- * Accordion component - Collapsible content panels for presenting information in a limited space.
- *
- * @example
- * Basic usage with items prop:
- * ```tsx
- * <Accordion
- *   items={[
- *     { id: 'item1', header: 'Section 1', children: <div>Content 1</div> },
- *     { id: 'item2', header: 'Section 2', children: <div>Content 2</div> },
- *   ]}
- * />
- * ```
- *
- * @example
- * Usage with AccordionItem children:
- * ```tsx
- * <Accordion>
- *   <AccordionItem id="item1" header="Section 1">Content 1</AccordionItem>
- *   <AccordionItem id="item2" header="Section 2">Content 2</AccordionItem>
- * </Accordion>
- * ```
- */
-declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.FC<AccordionProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
-export { Accordion };
-export type { AccordionProps };

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

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const AccordionExamples: React.FC;
-export default AccordionExamples;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-import { AccordionItemComponentProps, AccordionItemProps } from './types';
-declare const _default: React.FC<AccordionItemComponentProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
-export declare const AccordionItemWrapper: React.FC<AccordionItemProps>;

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

@@ -1,4 +0,0 @@
-export { default as Accordion } from './Accordion';
-export type { AccordionProps, AccordionItemProps, AccordionItemComponentProps } from './types';
-export { Accordion as AccordionComponent } from './Accordion';
-export { default as AccordionItem, AccordionItemWrapper } from './AccordionItem';

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

@@ -1,98 +0,0 @@
-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/components/Alert/Alert.d.ts

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

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

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';