@vtx-ui/react 0.0.1-beta.1

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ToastProps } from './types';
+import './Toast.css';
+/**
+ * Toast component - Displays brief notifications to users
+ *
+ * A comprehensive toast notification component with auto-dismiss, progress bar,
+ * pause on hover, and various visual variants for different message types.
+ *
+ * @example
+ * Basic success toast
+ * ```tsx
+ * <Toast variant="success">
+ *   Your changes have been saved successfully!
+ * </Toast>
+ * ```
+ *
+ * @example
+ * Toast with action button
+ * ```tsx
+ * <Toast
+ *   variant="warning"
+ *   action={<Button size="sm">Undo</Button>}
+ *   autoClose={false}
+ * >
+ *   Item moved to trash
+ * </Toast>
+ * ```
+ *
+ * @example
+ * Custom toast with icon
+ * ```tsx
+ * <Toast
+ *   variant="info"
+ *   icon={<CustomIcon />}
+ *   progressBar={false}
+ * >
+ *   Update available for download
+ * </Toast>
+ * ```
+ *
+ * @example
+ * Toast with custom auto-close duration
+ * ```tsx
+ * <Toast
+ *   variant="error"
+ *   autoClose={10000}
+ *   pauseOnHover={false}
+ * >
+ *   Failed to connect to server
+ * </Toast>
+ * ```
+ */
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.FC<ToastProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ToastContainerProps } from './types';
+import './ToastContainer.css';
+export declare const ToastContainer: React.FC<ToastContainerProps>;
+declare const _default: React.FC<ToastContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,5 @@
+export { default as Toast } from './Toast';
+export { Toast as ToastComponent } from './Toast';
+export { ToastContainer } from './ToastContainer';
+export { useToast, toast } from './useToast';
+export type { ToastProps, ToastVariant, ToastPosition, ToastOptions, ToastInstance } from './types';

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