@memelabui/ui 0.1.1 → 0.3.0

package/dist/index.d.ts

@@ -1,5 +1,6 @@
+export { MemelabColors, colors } from './tokens/index.js';
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement, ComponentType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ClassValue = string | number | null | undefined | boolean | Record<string, boolean | null | undefined> | ClassValue[];
@@ -12,8 +13,36 @@ declare function cn(...values: ClassValue[]): string;
 declare function getFocusableElements(container: HTMLElement): HTMLElement[];
 declare function focusSafely(el: HTMLElement | null | undefined): void;
 
+type UseClipboardReturn = {
+    copy: (text: string) => Promise<void>;
+    copied: boolean;
+};
+declare function useClipboard(timeout?: number): UseClipboardReturn;
+
+type UseDisclosureReturn = {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+declare function useDisclosure(defaultOpen?: boolean): UseDisclosureReturn;
+
+declare function useMediaQuery(query: string): boolean;
+
+declare function useDebounce<T>(value: T, delayMs?: number): T;
+
 type Size = 'sm' | 'md' | 'lg';
 
+type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+type AvatarProps = {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    className?: string;
+};
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
+
 type ButtonVariant = 'primary' | 'success' | 'warning' | 'danger' | 'secondary' | 'ghost';
 type ButtonSize = 'sm' | 'md' | 'lg';
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -37,7 +66,7 @@ type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'
     size?: 'sm' | 'md' | 'lg';
     'aria-label': string;
 };
-declare const IconButton: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "children"> & {
+declare const IconButton: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "aria-label"> & {
     icon: ReactNode;
     variant?: "primary" | "success" | "warning" | "danger" | "secondary" | "ghost";
     size?: "sm" | "md" | "lg";
@@ -57,28 +86,54 @@ declare const Input: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInp
     helperText?: string;
 } & react.RefAttributes<HTMLInputElement>>;
 
+type SearchInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    onClear?: () => void;
+    label?: string;
+};
+declare const SearchInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    onClear?: () => void;
+    label?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
 type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     hasError?: boolean;
     label?: string;
     error?: string;
+    helperText?: string;
 };
 declare const Select: react.ForwardRefExoticComponent<SelectHTMLAttributes<HTMLSelectElement> & {
     hasError?: boolean;
     label?: string;
     error?: string;
+    helperText?: string;
 } & react.RefAttributes<HTMLSelectElement>>;
 
 type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
     hasError?: boolean;
     label?: string;
     error?: string;
+    helperText?: string;
 };
 declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
     hasError?: boolean;
     label?: string;
     error?: string;
+    helperText?: string;
 } & react.RefAttributes<HTMLTextAreaElement>>;
 
+type TagInputProps = {
+    value: string[];
+    onChange: (tags: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    label?: string;
+    error?: string;
+    maxTags?: number;
+    className?: string;
+    id?: string;
+};
+declare function TagInput({ value, onChange, placeholder, disabled, label, error, maxTags, className, id: externalId, }: TagInputProps): react_jsx_runtime.JSX.Element;
+
 type BadgeVariant = 'neutral' | 'primary' | 'success' | 'successSolid' | 'warning' | 'danger' | 'dangerSolid' | 'accent';
 type BadgeSize = 'sm' | 'md';
 type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
@@ -105,16 +160,74 @@ type ToggleProps = {
     disabled?: boolean;
     label?: string;
     size?: ToggleSize;
+    id?: string;
     'aria-label'?: string;
 };
-declare function Toggle({ checked, onChange, disabled, label, size, 'aria-label': ariaLabel }: ToggleProps): react_jsx_runtime.JSX.Element;
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
+
+type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & {
+    label?: string;
+    showValue?: boolean;
+    formatValue?: (value: number) => string;
+    onChange?: (value: number) => void;
+};
+declare const Slider: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
+    label?: string;
+    showValue?: boolean;
+    formatValue?: (value: number) => string;
+    onChange?: (value: number) => void;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type ColorInputProps = {
+    value: string;
+    onChange: (color: string) => void;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+};
+declare const ColorInput: react.ForwardRefExoticComponent<ColorInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    label?: string;
+    error?: string;
+    indeterminate?: boolean;
+};
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    label?: string;
+    error?: string;
+    indeterminate?: boolean;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type RadioGroupProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    label?: string;
+    error?: string;
+    children: ReactNode;
+    className?: string;
+};
+type RadioItemProps = {
+    value: string;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+};
+declare function RadioGroup({ value: controlledValue, defaultValue, onValueChange, name: externalName, disabled, orientation, label, error, children, className, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioItem({ value, disabled: itemDisabled, children, className }: RadioItemProps): react_jsx_runtime.JSX.Element;
 
 type SpinnerSize = 'sm' | 'md' | 'lg';
 type SpinnerProps = {
     className?: string;
     size?: SpinnerSize;
+    /** Accessible label for screen readers. When provided, the spinner gets role="status". */
+    label?: string;
 };
-declare function Spinner({ className, size }: SpinnerProps): react_jsx_runtime.JSX.Element;
+declare function Spinner({ className, size, label }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
 type SkeletonProps = {
     className?: string;
@@ -122,13 +235,46 @@ type SkeletonProps = {
 };
 declare function Skeleton({ className, circle }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
+type TabsVariant = 'underline' | 'pill';
+type TabsProps = {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    variant?: TabsVariant;
+    children: ReactNode;
+    className?: string;
+};
+type TabListProps = {
+    children: ReactNode;
+    className?: string;
+};
+type TabProps = {
+    value: string;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+};
+type TabPanelProps = {
+    value: string;
+    children: ReactNode;
+    className?: string;
+};
+declare function Tabs({ defaultValue, value, onValueChange, variant, children, className, }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabList({ children, className }: TabListProps): react_jsx_runtime.JSX.Element;
+declare function Tab({ value, disabled, children, className }: TabProps): react_jsx_runtime.JSX.Element;
+declare function TabPanel({ value, children, className }: TabPanelProps): react_jsx_runtime.JSX.Element | null;
+
 type CardVariant = 'surface' | 'glass';
 type CardProps = HTMLAttributes<HTMLDivElement> & {
     hoverable?: boolean;
     variant?: CardVariant;
     children: ReactNode;
 };
-declare function Card({ hoverable, variant, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    hoverable?: boolean;
+    variant?: CardVariant;
+    children: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
 
 type ModalProps = {
     isOpen: boolean;
@@ -171,9 +317,9 @@ type TooltipProps = {
 declare function Tooltip({ content, delayMs, placement, className, children }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 type EmptyStateProps = {
-    icon?: (props: {
+    icon?: ComponentType<{
         className?: string;
-    }) => JSX.Element;
+    }>;
     title: string;
     description?: string;
     actionLabel?: string;
@@ -192,6 +338,141 @@ type CollapsibleSectionProps = {
 };
 declare function CollapsibleSection({ title, defaultOpen, children, right, className }: CollapsibleSectionProps): react_jsx_runtime.JSX.Element;
 
+type DropdownProps = {
+    children: ReactNode;
+    className?: string;
+};
+type DropdownTriggerProps = {
+    children: ReactElement;
+    className?: string;
+};
+type DropdownMenuProps = {
+    children: ReactNode;
+    className?: string;
+    align?: 'left' | 'right';
+};
+type DropdownItemProps = {
+    onSelect?: () => void;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+};
+type DropdownSeparatorProps = {
+    className?: string;
+};
+declare function Dropdown({ children, className }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function DropdownTrigger({ children, className }: DropdownTriggerProps): ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function DropdownMenu({ children, className, align }: DropdownMenuProps): react.ReactPortal | null;
+declare function DropdownItem({ onSelect, disabled, children, className }: DropdownItemProps): react_jsx_runtime.JSX.Element;
+declare function DropdownSeparator({ className }: DropdownSeparatorProps): react_jsx_runtime.JSX.Element;
+
+type DropZoneProps = {
+    onFilesDropped: (files: File[]) => void;
+    accept?: string;
+    maxFiles?: number;
+    maxSize?: number;
+    disabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+};
+declare function DropZone({ onFilesDropped, accept, maxFiles, maxSize, disabled, children, className, 'aria-label': ariaLabel, }: DropZoneProps): react_jsx_runtime.JSX.Element;
+
+type FormFieldProps = {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    children: ReactElement;
+    className?: string;
+    id?: string;
+};
+declare function FormField({ label, error, helperText, children, className, id: idProp }: FormFieldProps): react_jsx_runtime.JSX.Element;
+
+type DividerProps = {
+    orientation?: 'horizontal' | 'vertical';
+    label?: string;
+    className?: string;
+};
+declare function Divider({ orientation, label, className }: DividerProps): react_jsx_runtime.JSX.Element;
+
+type TableProps = {
+    children: ReactNode;
+    className?: string;
+};
+type TableHeaderProps = {
+    children: ReactNode;
+    className?: string;
+};
+type TableBodyProps = {
+    children: ReactNode;
+    className?: string;
+};
+type TableRowProps = {
+    children: ReactNode;
+    className?: string;
+    hoverable?: boolean;
+};
+type TableHeadProps = {
+    children: ReactNode;
+    className?: string;
+};
+type TableCellProps = {
+    children: ReactNode;
+    className?: string;
+    align?: 'left' | 'center' | 'right';
+};
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<TableHeaderProps & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
+
+type StatCardTrend = {
+    value: number;
+    label?: string;
+};
+type StatCardProps = {
+    value: string | number;
+    label: string;
+    icon?: ReactNode;
+    trend?: StatCardTrend;
+    className?: string;
+};
+declare function StatCard({ value, label, icon, trend, className }: StatCardProps): react_jsx_runtime.JSX.Element;
+
+type PaginationProps = {
+    page: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+    className?: string;
+};
+declare function Pagination({ page, totalPages, onPageChange, siblingCount, className, }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+
+type Step = {
+    label: string;
+    description?: string;
+};
+type StepperProps = {
+    steps: Step[];
+    activeStep: number;
+    className?: string;
+};
+declare function Stepper({ steps, activeStep, className }: StepperProps): react_jsx_runtime.JSX.Element;
+
+type ProgressBarVariant = 'primary' | 'success' | 'warning' | 'danger';
+type ProgressBarProps = {
+    value: number;
+    max?: number;
+    variant?: ProgressBarVariant;
+    label?: string;
+    showValue?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+};
+declare function ProgressBar({ value, max, variant, label, showValue, size, className, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
 type PageShellVariant = 'plain' | 'glass' | 'minimal';
 type PageShellProps = {
     header?: ReactNode;
@@ -200,6 +481,7 @@ type PageShellProps = {
     children: ReactNode;
     className?: string;
     mainClassName?: string;
+    /** @deprecated Use `mainClassName` instead. Alias kept for backwards compatibility. */
     containerClassName?: string;
     maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 };
@@ -226,7 +508,65 @@ type DashboardLayoutProps = {
     navbar?: ReactNode;
     sidebar?: ReactNode;
     className?: string;
+    mainClassName?: string;
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+};
+declare function DashboardLayout({ children, navbar, sidebar, className, mainClassName, maxWidth }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+type AlertProps = {
+    variant?: AlertVariant;
+    title?: string;
+    children: ReactNode;
+    onDismiss?: () => void;
+    className?: string;
+};
+declare function Alert({ variant, title, children, onDismiss, className }: AlertProps): react_jsx_runtime.JSX.Element;
+
+type CopyFieldProps = {
+    value: string;
+    label?: string;
+    masked?: boolean;
+    className?: string;
+    id?: string;
+};
+declare function CopyField({ value, label, masked, className, id: externalId }: CopyFieldProps): react_jsx_runtime.JSX.Element;
+
+type ProgressButtonProps = Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'loading'> & {
+    isLoading?: boolean;
+    loadingText?: ReactNode;
+};
+declare const ProgressButton: react.ForwardRefExoticComponent<Omit<ButtonProps, "leftIcon" | "rightIcon" | "loading"> & {
+    isLoading?: boolean;
+    loadingText?: ReactNode;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type ToastVariant = 'info' | 'success' | 'warning' | 'error';
+type ToastPosition = 'top-right' | 'top-center' | 'bottom-right' | 'bottom-center';
+type ToastData = {
+    id: string;
+    variant: ToastVariant;
+    title: string;
+    description?: string;
+    duration?: number;
+};
+type ToastProviderProps = {
+    children: ReactNode;
+    position?: ToastPosition;
+    maxToasts?: number;
+};
+type ToastOptions = {
+    variant: ToastVariant;
+    title: string;
+    description?: string;
+    duration?: number;
+};
+type ToastContextValue = {
+    toast: (options: ToastOptions) => string;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
 };
-declare function DashboardLayout({ children, navbar, sidebar, className }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+declare function ToastProvider({ children, position, maxToasts }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+declare function useToast(): ToastContextValue;
 
-export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, DashboardLayout, type DashboardLayoutProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, Navbar, type NavbarProps, PageShell, type PageShellProps, type PageShellVariant, Pill, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Textarea, type TextareaProps, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipProps, cn, focusSafely, getFocusableElements };
+export { Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, Navbar, type NavbarProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, StatCard, type StatCardProps, type StatCardTrend, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, type UseClipboardReturn, type UseDisclosureReturn, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useMediaQuery, useToast };