@vtx-ui/react 0.0.1-beta.1

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

@@ -0,0 +1,148 @@
+import { ReactNode } from 'react';
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info' | 'default' | 'primary';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastOptions {
+    /**
+     * Auto close duration in milliseconds
+     * Set to false to disable auto close
+     * @default 5000
+     */
+    autoClose?: number | false;
+    /**
+     * Show close button
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * Show progress bar
+     * @default true
+     */
+    progressBar?: boolean;
+    /**
+     * Pause on hover
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Pause on focus loss
+     * @default true
+     */
+    pauseOnFocusLoss?: boolean;
+    /**
+     * Toast variant/type
+     * @default 'default'
+     */
+    variant?: ToastVariant;
+    /**
+     * Custom icon or false to hide icon
+     */
+    icon?: ReactNode | false;
+    /**
+     * Custom action button
+     */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Toast ID for updates/dismissal
+     */
+    toastId?: string | number;
+    /**
+     * Callback when toast is closed
+     */
+    onClose?: () => void;
+    /**
+     * Callback when toast is opened
+     */
+    onOpen?: () => void;
+    /**
+     * Rich content with title and description
+     */
+    title?: string;
+    description?: string;
+    /**
+     * Animation duration in milliseconds
+     * @default 300
+     */
+    animationDuration?: number;
+}
+export interface ToastProps extends ToastOptions {
+    /**
+     * Toast content
+     */
+    children: ReactNode;
+    /**
+     * Whether toast is visible
+     */
+    isVisible: boolean;
+    /**
+     * Function to close the toast
+     */
+    onDismiss: () => void;
+    /**
+     * Unique toast ID
+     */
+    id: string | number;
+    /**
+     * Creation timestamp
+     */
+    createdAt: number;
+}
+export interface ToastContainerProps {
+    /**
+     * Children components to render alongside the toast container
+     */
+    children?: ReactNode;
+    /**
+     * Container position
+     * @default 'top-right'
+     */
+    position?: ToastPosition;
+    /**
+     * Maximum number of toasts to show
+     * @default 5
+     */
+    limit?: number;
+    /**
+     * Gap between toasts in pixels
+     * @default 12
+     */
+    gap?: number;
+    /**
+     * Container margin from viewport edge
+     * @default 16
+     */
+    margin?: number;
+    /**
+     * Custom className for container
+     */
+    className?: string;
+    /**
+     * Custom styles for container
+     */
+    style?: React.CSSProperties;
+    /**
+     * Enable stacked layout for mobile
+     * @default true
+     */
+    stacked?: boolean;
+    /**
+     * Custom theme
+     */
+    theme?: 'light' | 'dark' | 'auto';
+}
+export interface ToastInstance extends ToastOptions {
+    id: string | number;
+    content: ReactNode;
+    createdAt: number;
+    isVisible: boolean;
+}

package/dist/types/components/Toast/useToast.d.ts

@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import { ToastInstance, ToastOptions } from './types';
+interface ToastContextValue {
+    toasts: ToastInstance[];
+    addToast: (content: ReactNode, options?: ToastOptions) => string | number;
+    removeToast: (id: string | number) => void;
+    clearAllToasts: () => void;
+    updateToast: (id: string | number, options: Partial<ToastOptions>) => void;
+}
+export declare const useToast: () => ToastContextValue;
+interface ToastProviderProps {
+    children: ReactNode;
+}
+export declare const ToastProvider: React.FC<ToastProviderProps>;
+declare class ToastManager {
+    private static instance;
+    private addToastFn;
+    private removeToastFn;
+    private clearAllToastsFn;
+    private updateToastFn;
+    static getInstance(): ToastManager;
+    setMethods(addToast: (content: ReactNode, options?: ToastOptions) => string | number, removeToast: (id: string | number) => void, clearAllToasts: () => void, updateToast: (id: string | number, options: Partial<ToastOptions>) => void): void;
+    show(content: ReactNode, options?: ToastOptions): string | number;
+    success(content: ReactNode, options?: Omit<ToastOptions, 'variant'>): string | number;
+    error(content: ReactNode, options?: Omit<ToastOptions, 'variant'>): string | number;
+    warning(content: ReactNode, options?: Omit<ToastOptions, 'variant'>): string | number;
+    info(content: ReactNode, options?: Omit<ToastOptions, 'variant'>): string | number;
+    primary(content: ReactNode, options?: Omit<ToastOptions, 'variant'>): string | number;
+    dismiss(id: string | number): void;
+    dismissAll(): void;
+    update(id: string | number, options: Partial<ToastOptions>): void;
+}
+export declare const toast: ToastManager;
+export {};

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

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

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

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

@@ -0,0 +1,85 @@
+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/types/hooks/useTheme.d.ts

@@ -0,0 +1,268 @@
+/**
+ * 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;
+};