@larose-ui/react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,462 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
+import { Variant, Size, UIState, ThemeMode, Density } from '@larose-ui/core';
+export { ApiError, AsyncState, Density, Environment, LAROSE_VERSION, Permission, Size, ThemeMode, UIState, Variant } from '@larose-ui/core';
+import { ColorTokens } from '@larose-ui/tokens';
+export { ColorTokens, TokenSet, applyTokensToElement, getTokens, tokensToCSSVariables } from '@larose-ui/tokens';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: Variant;
+    size?: Size;
+    state?: UIState;
+    loading?: boolean;
+    error?: string | null;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface AsyncButtonProps extends Omit<ButtonProps, 'onClick' | 'loading' | 'error'> {
+    action: () => Promise<void>;
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+    variant?: Variant;
+    size?: Size;
+    children: ReactNode;
+}
+declare function AsyncButton({ action, onSuccess, onError, children, variant, size, disabled, ...props }: AsyncButtonProps): react.JSX.Element;
+
+interface LaRoseConfig {
+    theme?: ThemeMode;
+    density?: Density;
+    tenantId?: string;
+    brandColors?: Partial<ColorTokens>;
+}
+declare function useLaRose(): LaRoseConfig;
+interface LaRoseProviderProps extends LaRoseConfig {
+    children: ReactNode;
+}
+declare function LaRoseProvider({ children, theme, density, tenantId, brandColors, }: LaRoseProviderProps): react.JSX.Element;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    hint?: string;
+    state?: UIState;
+    loading?: boolean;
+    error?: string | null;
+    inputSize?: Size;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    hint?: string;
+    state?: UIState;
+    loading?: boolean;
+    error?: string | null;
+    inputSize?: Size;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface SelectOption {
+    label: string;
+    value: string;
+}
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    hint?: string;
+    options: SelectOption[];
+    placeholder?: string;
+    state?: UIState;
+    loading?: boolean;
+    error?: string | null;
+    inputSize?: Size;
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label: string;
+    hint?: string;
+    error?: string | null;
+    boxSize?: Size;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label: string;
+    hint?: string;
+    error?: string | null;
+    boxSize?: Size;
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    label: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    hint?: string;
+    switchSize?: Size;
+}
+declare function Switch({ label, checked, defaultChecked, onCheckedChange, hint, disabled, switchSize, className, id, ...props }: SwitchProps): react.JSX.Element;
+
+type ProgressVariant = 'default' | 'success' | 'error';
+interface ProgressProps {
+    value: number;
+    max?: number;
+    label?: string;
+    variant?: ProgressVariant;
+    state?: UIState;
+    showValue?: boolean;
+}
+declare function Progress({ value, max, label, variant, state, showValue, }: ProgressProps): react.JSX.Element;
+
+interface SpinnerProps {
+    size?: Size;
+    label?: string;
+}
+declare function Spinner({ size, label }: SpinnerProps): react.JSX.Element;
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+interface AlertProps {
+    variant?: AlertVariant;
+    title?: string;
+    children: ReactNode;
+    onDismiss?: () => void;
+}
+declare function Alert({ variant, title, children, onDismiss, }: AlertProps): react.JSX.Element;
+
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    title?: string;
+    description?: string;
+    closeOnOverlay?: boolean;
+}
+declare function Modal({ open, onClose, children, title, description, closeOnOverlay, }: ModalProps): react.ReactPortal | null;
+
+interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    description?: string;
+    children?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm?: () => void;
+    loading?: boolean;
+    variant?: 'default' | 'destructive';
+}
+declare function Dialog({ open, onClose, title, description, children, confirmLabel, cancelLabel, onConfirm, loading, variant, }: DialogProps): react.JSX.Element;
+
+interface CardProps {
+    title?: string;
+    description?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+declare function Card({ title, description, children, footer, padding, }: CardProps): react.JSX.Element;
+
+type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+interface BadgeProps {
+    variant?: BadgeVariant;
+    children: ReactNode;
+}
+declare function Badge({ variant, children }: BadgeProps): react.JSX.Element;
+
+interface SkeletonProps {
+    width?: string | number;
+    height?: string | number;
+    variant?: 'text' | 'circular' | 'rectangular';
+    lines?: number;
+}
+declare function Skeleton({ width, height, variant, lines, }: SkeletonProps): react.JSX.Element;
+
+interface EmptyStateProps {
+    title: string;
+    description?: string;
+    icon?: ReactNode;
+    actionLabel?: string;
+    onAction?: () => void;
+    state?: UIState;
+}
+declare function EmptyState({ title, description, icon, actionLabel, onAction, state, }: EmptyStateProps): react.JSX.Element;
+
+type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    side?: TooltipSide;
+}
+declare function Tooltip({ content, children, side }: TooltipProps): react.JSX.Element;
+
+type ToastVariant = AlertVariant;
+interface ToastInput {
+    title?: string;
+    message: string;
+    variant?: ToastVariant;
+    duration?: number;
+}
+interface ToastItem extends ToastInput {
+    id: string;
+}
+interface ToastContextValue {
+    toast: (input: ToastInput) => string;
+    dismiss: (id: string) => void;
+}
+interface ToastProviderProps {
+    children: ReactNode;
+    placement?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}
+declare function ToastProvider({ children, placement, }: ToastProviderProps): react.JSX.Element;
+declare function useToast(): ToastContextValue;
+
+interface TabsProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+}
+declare function Tabs({ value, defaultValue, onValueChange, children, className, }: TabsProps): react.JSX.Element;
+interface TabsListProps {
+    children: ReactNode;
+    'aria-label'?: string;
+}
+declare function TabsList({ children, 'aria-label': ariaLabel }: TabsListProps): react.JSX.Element;
+interface TabsTriggerProps {
+    value: string;
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function TabsTrigger({ value, children, disabled }: TabsTriggerProps): react.JSX.Element;
+interface TabsPanelProps {
+    value: string;
+    children: ReactNode;
+}
+declare function TabsPanel({ value, children }: TabsPanelProps): react.JSX.Element | null;
+
+type DrawerSide = 'left' | 'right';
+interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    title?: string;
+    description?: string;
+    side?: DrawerSide;
+    closeOnOverlay?: boolean;
+}
+declare function Drawer({ open, onClose, children, title, description, side, closeOnOverlay, }: DrawerProps): react.ReactPortal | null;
+
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+interface PopoverProps {
+    trigger: ReactNode;
+    content: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: PopoverSide;
+    'aria-label'?: string;
+}
+declare function Popover({ trigger, content, open, defaultOpen, onOpenChange, side, 'aria-label': ariaLabel, }: PopoverProps): react.JSX.Element;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    current?: boolean;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    'aria-label'?: string;
+}
+declare function Breadcrumb({ items, 'aria-label': ariaLabel }: BreadcrumbProps): react.JSX.Element;
+
+interface AccordionProps {
+    type?: 'single' | 'multiple';
+    collapsible?: boolean;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    children: ReactNode;
+    className?: string;
+}
+declare function Accordion({ type, collapsible, value, defaultValue, onValueChange, children, className, }: AccordionProps): react.JSX.Element;
+interface AccordionItemProps {
+    value: string;
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function AccordionItem({ value, children, disabled }: AccordionItemProps): react.JSX.Element;
+interface AccordionTriggerProps {
+    children: ReactNode;
+}
+declare function AccordionTrigger({ children }: AccordionTriggerProps): react.JSX.Element;
+interface AccordionContentProps {
+    children: ReactNode;
+}
+declare function AccordionContent({ children }: AccordionContentProps): react.JSX.Element;
+
+interface PaginationProps {
+    page: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+    previousLabel?: string;
+    nextLabel?: string;
+    'aria-label'?: string;
+    className?: string;
+}
+declare function Pagination({ page, totalPages, onPageChange, siblingCount, previousLabel, nextLabel, 'aria-label': ariaLabel, className, }: PaginationProps): react.JSX.Element | null;
+
+interface DataTableColumn<T> {
+    key: string;
+    header: string;
+    accessor?: (row: T) => ReactNode;
+    render?: (row: T) => ReactNode;
+}
+interface DataTableProps<T> {
+    data: T[];
+    columns: DataTableColumn<T>[];
+    keyExtractor: (row: T) => string;
+    caption?: string;
+    'aria-label'?: string;
+    loading?: boolean;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    emptyMessage?: string;
+    striped?: boolean;
+    skeletonRows?: number;
+    className?: string;
+}
+declare function DataTable<T>({ data, columns, keyExtractor, caption, 'aria-label': ariaLabel, loading, emptyTitle, emptyDescription, emptyMessage, striped, skeletonRows, className, }: DataTableProps<T>): react.JSX.Element;
+
+interface FileUploadProps {
+    label?: string;
+    hint?: string;
+    error?: string | null;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    buttonLabel?: string;
+    onFilesChange?: (files: File[]) => void;
+    className?: string;
+}
+declare function FileUpload({ label, hint, error, accept, multiple, disabled, buttonLabel, onFilesChange, className, }: FileUploadProps): react.JSX.Element;
+
+interface SidebarProps {
+    children: ReactNode;
+    'aria-label'?: string;
+    className?: string;
+}
+declare function Sidebar({ children, 'aria-label': ariaLabel, className, }: SidebarProps): react.JSX.Element;
+interface SidebarHeaderProps {
+    children: ReactNode;
+}
+declare function SidebarHeader({ children }: SidebarHeaderProps): react.JSX.Element;
+interface SidebarNavProps {
+    children: ReactNode;
+    'aria-label'?: string;
+}
+declare function SidebarNav({ children, 'aria-label': ariaLabel }: SidebarNavProps): react.JSX.Element;
+interface SidebarGroupProps {
+    label: string;
+    children: ReactNode;
+}
+declare function SidebarGroup({ label, children }: SidebarGroupProps): react.JSX.Element;
+interface SidebarItemProps {
+    children: ReactNode;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+declare function SidebarItem({ children, href, active, disabled, onClick, }: SidebarItemProps): react.JSX.Element;
+
+interface HeaderProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function Header({ children, className }: HeaderProps): react.JSX.Element;
+interface HeaderTitleProps {
+    children: ReactNode;
+}
+declare function HeaderTitle({ children }: HeaderTitleProps): react.JSX.Element;
+interface HeaderBrandProps {
+    children: ReactNode;
+}
+declare function HeaderBrand({ children }: HeaderBrandProps): react.JSX.Element;
+interface HeaderActionsProps {
+    children: ReactNode;
+}
+declare function HeaderActions({ children }: HeaderActionsProps): react.JSX.Element;
+
+interface CommandPaletteItem {
+    id: string;
+    label: string;
+    group?: string;
+    keywords?: string[];
+    onSelect: () => void;
+}
+interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    items: CommandPaletteItem[];
+    placeholder?: string;
+    emptyMessage?: string;
+    'aria-label'?: string;
+}
+declare function CommandPalette({ open, onOpenChange, items, placeholder, emptyMessage, 'aria-label': ariaLabel, }: CommandPaletteProps): react.JSX.Element | null;
+declare function useCommandPaletteShortcut(onOpen: () => void, enabled?: boolean): void;
+
+interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {
+    label?: string;
+    hint?: string;
+    state?: UIState;
+    loading?: boolean;
+    error?: string | null;
+    inputSize?: Size;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TimePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {
+    label?: string;
+    hint?: string;
+    state?: UIState;
+    loading?: boolean;
+    error?: string | null;
+    inputSize?: Size;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface DateRange {
+    startDate: string;
+    endDate: string;
+}
+interface DateRangePickerProps {
+    label?: string;
+    startLabel?: string;
+    endLabel?: string;
+    hint?: string;
+    state?: UIState;
+    loading?: boolean;
+    error?: string | null;
+    inputSize?: Size;
+    value?: DateRange;
+    onChange?: (value: DateRange) => void;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    id?: string;
+}
+declare function DateRangePicker({ label, startLabel, endLabel, hint, state, loading, error, inputSize, value, onChange, min, max, disabled, readOnly, className, id, }: DateRangePickerProps): react.JSX.Element;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertVariant, AsyncButton, type AsyncButtonProps, Badge, type BadgeProps, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Drawer, type DrawerProps, type DrawerSide, EmptyState, type EmptyStateProps, FileUpload, type FileUploadProps, Header, HeaderActions, type HeaderActionsProps, HeaderBrand, type HeaderBrandProps, type HeaderProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type LaRoseConfig, LaRoseProvider, type LaRoseProviderProps, Modal, type ModalProps, Pagination, type PaginationProps, Popover, type PopoverProps, type PopoverSide, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Sidebar, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, type SidebarProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, type ToastInput, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, type TooltipSide, useCommandPaletteShortcut, useLaRose, useToast };