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

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,108 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import './Tooltip.css';
-export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
-    /**
-     * Content to display in the tooltip
-     * Can be text, JSX, or any React node
-     */
-    content: React.ReactNode;
-    /**
-     * Placement of the tooltip relative to the trigger element
-     * @default 'top'
-     */
-    placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
-    /**
-     * Delay before showing tooltip in milliseconds
-     * @default 200
-     */
-    delay?: number;
-    /**
-     * Delay before hiding tooltip in milliseconds
-     * @default 0
-     */
-    hideDelay?: number;
-    /**
-     * Element that triggers the tooltip
-     */
-    children: React.ReactElement<any>;
-    /**
-     * If true, tooltip is always visible
-     * @default false
-     */
-    open?: boolean;
-    /**
-     * If true, tooltip is disabled and won't show
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If true, shows an arrow pointing to the trigger element
-     * @default false
-     */
-    arrow?: boolean;
-    /**
-     * Maximum width of the tooltip
-     * @default '300px'
-     */
-    maxWidth?: string;
-    /**
-     * Tooltip variant for different visual styles
-     * @default 'dark'
-     */
-    variant?: 'dark' | 'light' | 'error' | 'warning' | 'success' | 'info';
-    /**
-     * If true, shows a close button to manually dismiss the tooltip
-     * @default false
-     */
-    dismissible?: boolean;
-    /**
-     * Callback fired when tooltip is shown
-     */
-    onShow?: () => void;
-    /**
-     * Callback fired when tooltip is hidden
-     */
-    onHide?: () => void;
-    /**
-     * Callback fired when dismiss button is clicked
-     */
-    onDismiss?: () => void;
-}
-/**
- * Tooltip component - Displays helpful information on hover or focus
- *
- * A feature-rich tooltip component with multiple placement options, variants,
- * customizable delays, and arrow indicators.
- *
- * @example
- * Basic usage
- * ```tsx
- * <Tooltip content="Click to save changes" placement="top">
- *   <Button>Save</Button>
- * </Tooltip>
- * ```
- *
- * @example
- * With arrow and variant
- * ```tsx
- * <Tooltip
- *   content="This action cannot be undone"
- *   placement="right"
- *   variant="warning"
- *   arrow
- * >
- *   <Button variant="danger">Delete</Button>
- * </Tooltip>
- * ```
- *
- * @example
- * Always visible
- * ```tsx
- * <Tooltip content="Important information" open>
- *   <span>Hover target</span>
- * </Tooltip>
- * ```
- */
-export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.FC<TooltipProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;

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

@@ -1,3 +0,0 @@
-export { default as Tooltip } from './Tooltip';
-export type { TooltipProps } from './Tooltip';
-export { Tooltip as TooltipComponent } from './Tooltip';

package/dist/hooks/index.d.ts

@@ -1,85 +0,0 @@
-import { RefObject } from 'react';
-/**
- * Hook to handle click events outside of a specified element
- *
- * @param ref - Reference to the element to detect clicks outside of
- * @param handler - Callback function to execute when clicking outside
- *
- * @example
- * ```tsx
- * function Dropdown() {
- *   const ref = useRef<HTMLDivElement>(null);
- *   const [isOpen, setIsOpen] = useState(false);
- *
- *   useClickOutside(ref, () => setIsOpen(false));
- *
- *   return <div ref={ref}>Dropdown content</div>;
- * }
- * ```
- */
-export declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void) => void;
-/**
- * Hook to manage focus trap within a component (useful for modals, dialogs)
- *
- * @param ref - Reference to the container element
- * @param isActive - Whether the focus trap is active
- *
- * @example
- * ```tsx
- * function Modal({ isOpen }) {
- *   const ref = useRef<HTMLDivElement>(null);
- *   useFocusTrap(ref, isOpen);
- *   return <div ref={ref}>Modal content</div>;
- * }
- * ```
- */
-export declare const useFocusTrap: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, isActive: boolean) => void;
-/**
- * Hook to handle escape key press
- *
- * @param handler - Callback function to execute when escape is pressed
- *
- * @example
- * ```tsx
- * function Modal({ onClose }) {
- *   useEscapeKey(onClose);
- *   return <div>Modal content</div>;
- * }
- * ```
- */
-export declare const useEscapeKey: (handler: () => void) => void;
-/**
- * Hook to manage body scroll lock (useful for modals)
- *
- * @param isLocked - Whether to lock the body scroll
- *
- * @example
- * ```tsx
- * function Modal({ isOpen }) {
- *   useBodyScrollLock(isOpen);
- *   return <div>Modal content</div>;
- * }
- * ```
- */
-export declare const useBodyScrollLock: (isLocked: boolean) => void;
-export declare const useId: (prefix?: string) => string;
-/**
- * Hook to debounce a value
- *
- * @param value - Value to debounce
- * @param delay - Delay in milliseconds
- * @returns Debounced value
- *
- * @example
- * ```tsx
- * function SearchInput() {
- *   const [search, setSearch] = useState('');
- *   const debouncedSearch = useDebounce(search, 300);
- *
- *   useEffect(() => {
- *     // API call with debouncedSearch
- *   }, [debouncedSearch]);
- * }
- * ```
- */
-export declare const useDebounce: <T>(value: T, delay: number) => T;

package/dist/hooks/useTheme.d.ts

@@ -1,268 +0,0 @@
-/**
- * Hook to access theme tokens and utilities
- *
- * @returns Theme tokens and theme mode setter
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { tokens, mode, setMode } = useTheme();
- *   return (
- *     <button
- *       style={{ background: tokens.colors.primary[500] }}
- *       onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
- *     >
- *       Toggle Theme
- *     </button>
- *   );
- * }
- * ```
- */
-export declare const useTheme: () => {
-    tokens: {
-        readonly colors: {
-            readonly primary: {
-                readonly 50: "#eff6ff";
-                readonly 100: "#dbeafe";
-                readonly 200: "#bfdbfe";
-                readonly 300: "#93c5fd";
-                readonly 400: "#60a5fa";
-                readonly 500: "#3b82f6";
-                readonly 600: "#2563eb";
-                readonly 700: "#1d4ed8";
-                readonly 800: "#1e40af";
-                readonly 900: "#1e3a8a";
-            };
-            readonly secondary: {
-                readonly 50: "#f5f3ff";
-                readonly 100: "#ede9fe";
-                readonly 200: "#ddd6fe";
-                readonly 300: "#c4b5fd";
-                readonly 400: "#a78bfa";
-                readonly 500: "#8b5cf6";
-                readonly 600: "#7c3aed";
-                readonly 700: "#6d28d9";
-                readonly 800: "#5b21b6";
-                readonly 900: "#4c1d95";
-            };
-            readonly neutral: {
-                readonly 50: "#fafafa";
-                readonly 100: "#f5f5f5";
-                readonly 200: "#e5e5e5";
-                readonly 300: "#d4d4d4";
-                readonly 400: "#a3a3a3";
-                readonly 500: "#737373";
-                readonly 600: "#525252";
-                readonly 700: "#404040";
-                readonly 800: "#262626";
-                readonly 900: "#171717";
-            };
-            readonly success: {
-                readonly 50: "#f0fdf4";
-                readonly 500: "#22c55e";
-                readonly 600: "#16a34a";
-                readonly 700: "#15803d";
-            };
-            readonly warning: {
-                readonly 50: "#fffbeb";
-                readonly 500: "#f59e0b";
-                readonly 600: "#d97706";
-                readonly 700: "#b45309";
-            };
-            readonly error: {
-                readonly 50: "#fef2f2";
-                readonly 500: "#ef4444";
-                readonly 600: "#dc2626";
-                readonly 700: "#b91c1c";
-            };
-            readonly info: {
-                readonly 50: "#eff6ff";
-                readonly 500: "#3b82f6";
-                readonly 600: "#2563eb";
-                readonly 700: "#1d4ed8";
-            };
-        };
-        readonly spacing: {
-            readonly 0: "0";
-            readonly 1: "0.25rem";
-            readonly 2: "0.5rem";
-            readonly 3: "0.75rem";
-            readonly 4: "1rem";
-            readonly 5: "1.25rem";
-            readonly 6: "1.5rem";
-            readonly 8: "2rem";
-            readonly 10: "2.5rem";
-            readonly 12: "3rem";
-            readonly 16: "4rem";
-            readonly 20: "5rem";
-            readonly 24: "6rem";
-        };
-        readonly typography: {
-            readonly fontFamily: {
-                readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
-                readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
-            };
-            readonly fontSize: {
-                readonly xs: "0.75rem";
-                readonly sm: "0.875rem";
-                readonly base: "1rem";
-                readonly lg: "1.125rem";
-                readonly xl: "1.25rem";
-                readonly '2xl': "1.5rem";
-                readonly '3xl': "1.875rem";
-                readonly '4xl': "2.25rem";
-                readonly '5xl': "3rem";
-                readonly '6xl': "3.75rem";
-                readonly '7xl': "4.5rem";
-                readonly '8xl': "6rem";
-                readonly '9xl': "8rem";
-            };
-            readonly fontWeight: {
-                readonly thin: "100";
-                readonly extralight: "200";
-                readonly light: "300";
-                readonly normal: "400";
-                readonly medium: "500";
-                readonly semibold: "600";
-                readonly bold: "700";
-                readonly extrabold: "800";
-                readonly black: "900";
-            };
-            readonly lineHeight: {
-                readonly none: "1";
-                readonly tight: "1.25";
-                readonly snug: "1.375";
-                readonly normal: "1.5";
-                readonly relaxed: "1.625";
-                readonly loose: "2";
-            };
-            readonly letterSpacing: {
-                readonly tighter: "-0.05em";
-                readonly tight: "-0.025em";
-                readonly normal: "0";
-                readonly wide: "0.025em";
-                readonly wider: "0.05em";
-                readonly widest: "0.1em";
-            };
-            readonly textVariants: {
-                readonly h1: {
-                    readonly fontSize: "3.75rem";
-                    readonly fontWeight: "700";
-                    readonly lineHeight: "1.2";
-                    readonly letterSpacing: "-0.025em";
-                };
-                readonly h2: {
-                    readonly fontSize: "3rem";
-                    readonly fontWeight: "700";
-                    readonly lineHeight: "1.25";
-                    readonly letterSpacing: "-0.025em";
-                };
-                readonly h3: {
-                    readonly fontSize: "2.25rem";
-                    readonly fontWeight: "600";
-                    readonly lineHeight: "1.3";
-                    readonly letterSpacing: "-0.025em";
-                };
-                readonly h4: {
-                    readonly fontSize: "1.875rem";
-                    readonly fontWeight: "600";
-                    readonly lineHeight: "1.35";
-                    readonly letterSpacing: "0";
-                };
-                readonly h5: {
-                    readonly fontSize: "1.5rem";
-                    readonly fontWeight: "600";
-                    readonly lineHeight: "1.4";
-                    readonly letterSpacing: "0";
-                };
-                readonly h6: {
-                    readonly fontSize: "1.25rem";
-                    readonly fontWeight: "600";
-                    readonly lineHeight: "1.5";
-                    readonly letterSpacing: "0";
-                };
-                readonly body1: {
-                    readonly fontSize: "1rem";
-                    readonly fontWeight: "400";
-                    readonly lineHeight: "1.5";
-                    readonly letterSpacing: "0";
-                };
-                readonly body2: {
-                    readonly fontSize: "0.875rem";
-                    readonly fontWeight: "400";
-                    readonly lineHeight: "1.5";
-                    readonly letterSpacing: "0";
-                };
-                readonly subtitle1: {
-                    readonly fontSize: "1.125rem";
-                    readonly fontWeight: "500";
-                    readonly lineHeight: "1.5";
-                    readonly letterSpacing: "0";
-                };
-                readonly subtitle2: {
-                    readonly fontSize: "1rem";
-                    readonly fontWeight: "500";
-                    readonly lineHeight: "1.5";
-                    readonly letterSpacing: "0";
-                };
-                readonly caption: {
-                    readonly fontSize: "0.75rem";
-                    readonly fontWeight: "400";
-                    readonly lineHeight: "1.5";
-                    readonly letterSpacing: "0.025em";
-                };
-                readonly overline: {
-                    readonly fontSize: "0.75rem";
-                    readonly fontWeight: "600";
-                    readonly lineHeight: "1.5";
-                    readonly letterSpacing: "0.1em";
-                    readonly textTransform: "uppercase";
-                };
-                readonly button: {
-                    readonly fontSize: "0.875rem";
-                    readonly fontWeight: "600";
-                    readonly lineHeight: "1.5";
-                    readonly letterSpacing: "0.025em";
-                };
-                readonly label: {
-                    readonly fontSize: "0.875rem";
-                    readonly fontWeight: "500";
-                    readonly lineHeight: "1.5";
-                    readonly letterSpacing: "0";
-                };
-            };
-        };
-        readonly borderRadius: {
-            readonly none: "0";
-            readonly sm: "0.125rem";
-            readonly base: "0.25rem";
-            readonly md: "0.375rem";
-            readonly lg: "0.5rem";
-            readonly xl: "0.75rem";
-            readonly '2xl': "1rem";
-            readonly full: "9999px";
-        };
-        readonly shadows: {
-            readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-            readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-            readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-            readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-            readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
-            readonly none: "none";
-        };
-        readonly transitions: {
-            readonly fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)";
-            readonly base: "200ms cubic-bezier(0.4, 0, 0.2, 1)";
-            readonly slow: "300ms cubic-bezier(0.4, 0, 0.2, 1)";
-        };
-        readonly zIndex: {
-            readonly dropdown: 1000;
-            readonly sticky: 1100;
-            readonly modal: 1200;
-            readonly tooltip: 1300;
-            readonly notification: 1400;
-        };
-    };
-    mode: "light" | "dark";
-    setMode: (mode: "light" | "dark") => void;
-};

package/dist/index.d.ts

@@ -1,55 +0,0 @@
-export { Button } from './components/Button';
-export type { ButtonProps } from './components/Button';
-export { Checkbox } from './components/Checkbox';
-export type { CheckboxProps } from './components/Checkbox';
-export { CheckboxGroup } from './components/CheckboxGroup';
-export type { CheckboxGroupProps } from './components/CheckboxGroup';
-export { Input } from './components/Input';
-export type { InputProps } from './components/Input';
-export { MultiSelect } from './components/MultiSelect';
-export type { MultiSelectOption, MultiSelectProps } from './components/MultiSelect';
-export { Radio } from './components/Radio';
-export type { RadioProps } from './components/Radio';
-export { RadioGroup } from './components/RadioGroup';
-export type { RadioGroupProps } from './components/RadioGroup';
-export { Select } from './components/Select';
-export type { SelectOption, SelectProps } from './components/Select';
-export { Accordion, AccordionItem } from './components/Accordion';
-export type { AccordionItemProps, AccordionProps } from './components/Accordion/types';
-export { Alert } from './components/Alert';
-export type { AlertProps } from './components/Alert';
-export { Chip } from './components/Chip';
-export type { ChipProps } from './components/Chip';
-export { Menu, MenuItem } from './components/Menu';
-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 { Tooltip } from './components/Tooltip';
-export type { TooltipProps } from './components/Tooltip';
-export { Avatar } from './components/Avatar';
-export type { AvatarProps } from './components/Avatar';
-export { Badge } from './components/Badge';
-export type { BadgeProps } from './components/Badge';
-export { Card } from './components/Card';
-export type { CardProps } from './components/Card';
-export { Divider } from './components/Divider';
-export type { DividerProps } from './components/Divider';
-export { Header } from './components/Header';
-export type { HeaderProps, NotificationItem } from './components/Header';
-export { SideMenu, SideMenuItem } from './components/SideMenu';
-export type { SideMenuItemProps, SideMenuProps } from './components/SideMenu';
-export { Table } from './components/Table';
-export type { TableColumn, TableProps } from './components/Table';
-export { Text } from './components/Text';
-export type { TextProps } from './components/Text';
-export { Flex } from './components/Flex';
-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 { useBodyScrollLock, useClickOutside, useDebounce, useEscapeKey, useFocusTrap, useId, } from './hooks';

package/dist/theme/ThemeProvider.d.ts

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Tokens } from './tokens';
-export type Size = 'sm' | 'md' | 'lg';
-export interface Theme {
-    tokens: Tokens;
-    mode: 'light' | 'dark';
-    defaultSize: Size;
-}
-export interface ThemeContextValue {
-    theme: Theme;
-    setMode: (mode: 'light' | 'dark') => void;
-    setDefaultSize: (size: Size) => void;
-}
-export interface ThemeProviderProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Child components that will have access to the theme */
-    children?: React.ReactNode;
-    /** Initial theme mode, defaults to 'light' */
-    initialMode?: 'light' | 'dark';
-    /** Custom theme tokens to override defaults */
-    customTokens?: Partial<Tokens>;
-    /** Global default size for components (e.g., 'md', 'sm', 'lg') */
-    defaultSize?: Size;
-}
-declare const ThemeProvider: React.ForwardRefExoticComponent<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
-export { ThemeProvider };
-declare const _default: React.FC<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
-/**
- * Hook to access the current theme and theme utilities
- *
- * @throws {Error} If used outside of ThemeProvider
- *
- * @example
- * function MyComponent() {
- *   const { theme, setMode } = useThemeContext();
- *   return <div style={{ color: theme.tokens.colors.primary[500] }}>Hello</div>;
- * }
- */
-export declare const useThemeContext: () => ThemeContextValue;

package/dist/theme/cssVariables.d.ts

@@ -1,9 +0,0 @@
-/**
- * Generates CSS variables from design tokens
- * @returns CSS variable declarations as a string
- */
-export declare function generateCSSVariables(): string;
-/**
- * Injects CSS variables into the document
- */
-export declare function injectCSSVariables(): void;

package/dist/theme/index.d.ts

@@ -1,6 +0,0 @@
-export { ThemeProvider, useThemeContext } from './ThemeProvider';
-export { tokens } from './tokens';
-export { generateCSSVariables, injectCSSVariables } from './cssVariables';
-export type { Theme, ThemeProviderProps } from './ThemeProvider';
-export type { Tokens, ColorScale, ColorShade } from './tokens';
-import './base.css';