@terminal-blueprint/react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,509 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ElementType, ComponentPropsWithoutRef, ReactNode, Ref, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, RefCallback } from 'react';
+import { ClassValue } from 'clsx';
+
+type PolymorphicProps<E extends ElementType, P = {}> = P & Omit<ComponentPropsWithoutRef<E>, keyof P> & {
+    as?: E;
+};
+
+type ButtonOwnProps = {
+    variant?: 'default' | 'primary' | 'secondary' | 'danger' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    isLoading?: boolean;
+    loadingText?: string;
+    icon?: ReactNode;
+    iconPosition?: 'left' | 'right';
+};
+type ButtonProps<E extends ElementType = 'button'> = PolymorphicProps<E, ButtonOwnProps>;
+declare function Button({ as, variant, size, isLoading, loadingText, icon, iconPosition, className, disabled, children, ref, ...props }: ButtonOwnProps & {
+    as?: ElementType;
+    ref?: Ref<any>;
+    className?: string;
+    disabled?: boolean;
+    children?: ReactNode;
+    [key: string]: any;
+}): react_jsx_runtime.JSX.Element;
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    error?: string;
+    hint?: string;
+    size?: 'sm' | 'md' | 'lg';
+    icon?: ReactNode;
+    iconPosition?: 'left' | 'right';
+    ref?: Ref<HTMLInputElement>;
+}
+declare function Input({ label, error, hint, size, icon, iconPosition, className, id: idProp, ref, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    hint?: string;
+    ref?: Ref<HTMLTextAreaElement>;
+}
+declare function Textarea({ label, error, hint, className, id: idProp, ref, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
+
+interface CardProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    brackets?: boolean;
+    pulse?: boolean;
+    hoverable?: boolean;
+    ref?: Ref<HTMLElement>;
+}
+declare function CardRoot({ as, brackets, pulse, hoverable, className, children, ref, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+interface CardSectionProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Header({ className, ref, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare function Title$1({ className, ref, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare function Body$1({ className, ref, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare function Tags({ className, ref, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare function Footer$1({ className, ref, ...props }: CardSectionProps): react_jsx_runtime.JSX.Element;
+declare const Card: typeof CardRoot & {
+    Header: typeof Header;
+    Title: typeof Title$1;
+    Body: typeof Body$1;
+    Tags: typeof Tags;
+    Footer: typeof Footer$1;
+};
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    dot?: boolean;
+    pulse?: boolean;
+    children: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+}
+declare function Badge({ variant, dot, pulse, className, children, ref, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+}
+declare function Tag({ className, children, ref, ...props }: TagProps): react_jsx_runtime.JSX.Element;
+
+interface TitleLineProps {
+    label: string;
+    className?: string;
+}
+declare function TitleLine({ label, className }: TitleLineProps): react_jsx_runtime.JSX.Element;
+
+interface CornerBracketsProps extends HTMLAttributes<HTMLDivElement> {
+    pulse?: boolean;
+    children: ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+}
+declare function CornerBrackets({ pulse, children, className, ref, ...props }: CornerBracketsProps): react_jsx_runtime.JSX.Element;
+
+interface SelectProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    label?: string;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Select({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, error, label, children, className, ref, }: SelectProps): react_jsx_runtime.JSX.Element;
+
+interface SelectTriggerProps {
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+declare function SelectTrigger({ className, ref }: SelectTriggerProps): react_jsx_runtime.JSX.Element;
+
+interface SelectContentProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function SelectContent({ children, className, ref }: SelectContentProps): react_jsx_runtime.JSX.Element;
+
+interface SelectItemProps {
+    value: string;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function SelectItem({ value: itemValue, disabled, children, className, ref, }: SelectItemProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    closeOnEscape?: boolean;
+    closeOnBackdrop?: boolean;
+    hideCloseButton?: boolean;
+    portalTarget?: Element | null;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function ModalRoot({ open, onOpenChange, closeOnEscape, closeOnBackdrop, hideCloseButton, portalTarget, children, className, ref, }: ModalProps): react_jsx_runtime.JSX.Element;
+interface ModalSectionProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Title({ className, ref, ...props }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare function Body({ className, ref, ...props }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare function Footer({ className, ref, ...props }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare function Close({ className, children, ref, ...props }: HTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+}): react_jsx_runtime.JSX.Element;
+declare const Modal: typeof ModalRoot & {
+    Title: typeof Title;
+    Body: typeof Body;
+    Footer: typeof Footer;
+    Close: typeof Close;
+};
+
+interface TabsProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Tabs({ value: controlledValue, defaultValue, onValueChange: onValueChangeProp, children, className, ref, }: TabsProps): react_jsx_runtime.JSX.Element;
+interface TabsListProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function TabsList({ children, className, ref }: TabsListProps): react_jsx_runtime.JSX.Element;
+interface TabsTriggerProps {
+    value: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+declare function TabsTrigger({ value: triggerValue, icon, disabled, children, className, ref, }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+interface TabsContentProps {
+    value: string;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function TabsContent({ value: contentValue, children, className, ref }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface ToastOptions {
+    title: string;
+    description?: string;
+    type?: 'success' | 'error' | 'warning' | 'info';
+    duration?: number | null;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+interface ToastEntry extends ToastOptions {
+    id: string;
+    type: 'success' | 'error' | 'warning' | 'info';
+}
+declare function dismissToast(id: string): void;
+declare function createToast(options: ToastOptions): string;
+declare namespace createToast {
+    var success: (title: string, options?: Omit<ToastOptions, "title" | "type">) => string;
+    var error: (title: string, options?: Omit<ToastOptions, "title" | "type">) => string;
+    var warning: (title: string, options?: Omit<ToastOptions, "title" | "type">) => string;
+    var info: (title: string, options?: Omit<ToastOptions, "title" | "type">) => string;
+    var dismiss: typeof dismissToast;
+    var dismissAll: () => void;
+}
+
+interface ToasterProps {
+    position?: 'top-right' | 'top-center' | 'bottom-right' | 'bottom-center';
+}
+declare function Toaster({ position }: ToasterProps): react_jsx_runtime.JSX.Element | null;
+
+interface TooltipProps {
+    content: ReactNode;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Tooltip({ content, side, align, children, className, ref, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+interface NavDropdownItem {
+    label: string;
+    href?: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+}
+interface NavDropdownProps {
+    trigger: string | ReactNode;
+    items: NavDropdownItem[];
+    align?: 'left' | 'center' | 'right';
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function NavDropdown({ trigger, items, align, className, ref }: NavDropdownProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string | ReactNode;
+    error?: string;
+    ref?: Ref<HTMLInputElement>;
+    className?: string;
+}
+declare function Checkbox({ checked: controlledChecked, defaultChecked, onCheckedChange, disabled, label, error, ref, className, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    ref?: Ref<HTMLInputElement>;
+    className?: string;
+}
+declare function Toggle({ checked: controlledChecked, defaultChecked, onCheckedChange, disabled, label, ref, className, }: ToggleProps): react_jsx_runtime.JSX.Element;
+
+interface RadioGroupProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    label?: string;
+    orientation?: 'horizontal' | 'vertical';
+    children: ReactNode;
+    className?: string;
+}
+interface RadioItemProps {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare function RadioGroup({ value: controlledValue, defaultValue, onValueChange, disabled, label, orientation, children, className, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioItem({ value, label, disabled: itemDisabled, className, }: RadioItemProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressProps {
+    value: number;
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    animated?: boolean;
+    indeterminate?: boolean;
+    label?: string;
+    showValue?: boolean;
+    className?: string;
+}
+declare function Progress({ value, variant, animated, indeterminate, label, showValue, className, }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+interface BatteryProps {
+    value: number;
+    total?: number;
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    animated?: boolean;
+    label?: string;
+    className?: string;
+}
+declare function Battery({ value, total, variant, animated, label, className, }: BatteryProps): react_jsx_runtime.JSX.Element;
+
+interface BatteryInlineProps {
+    value: number;
+    total?: number;
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    animated?: boolean;
+    label?: string;
+    showValue?: boolean;
+    className?: string;
+}
+declare function BatteryInline({ value, total, variant, animated, label, showValue, className, }: BatteryInlineProps): react_jsx_runtime.JSX.Element;
+
+interface Column<T> {
+    id: string;
+    header: string;
+    accessor: keyof T | ((row: T) => ReactNode);
+    cell?: (value: any, row: T) => ReactNode;
+}
+interface TableProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    onRowClick?: (row: T) => void;
+    className?: string;
+}
+declare function Table<T>({ columns, data, onRowClick, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SkeletonProps {
+    variant?: 'text' | 'heading' | 'avatar' | 'card';
+    width?: string | number;
+    height?: string | number;
+    lines?: number;
+    className?: string;
+}
+declare function Skeleton({ variant, width, height, lines, className, }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface SpinnerProps {
+    variant?: 'bracket' | 'multi-square';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare function Spinner({ variant, size, className, }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+interface 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;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+    linkComponent?: ElementType;
+    className?: string;
+}
+declare function Breadcrumbs({ items, separator, linkComponent, className, }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+
+interface ToolbarSelectOption {
+    label: string;
+    value: string;
+    meta?: string;
+}
+interface ToolbarSelectProps {
+    options: ToolbarSelectOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Dropdown opens downward instead of upward */
+    dropDown?: boolean;
+    /** Minimum width of the trigger */
+    minWidth?: number;
+    className?: string;
+}
+interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Fixed position on the viewport */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** If true, uses position: fixed */
+    fixed?: boolean;
+    children?: ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+}
+declare function ToolbarSelect({ options, value: controlledValue, defaultValue, onChange, dropDown, minWidth, className, }: ToolbarSelectProps): react_jsx_runtime.JSX.Element;
+declare function ToolbarLabel({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+declare function ToolbarDivider({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function ToolbarRoot({ position, fixed, children, className, ref, ...props }: ToolbarProps): react_jsx_runtime.JSX.Element;
+declare const Toolbar: typeof ToolbarRoot & {
+    Label: typeof ToolbarLabel;
+    Select: typeof ToolbarSelect;
+    Divider: typeof ToolbarDivider;
+};
+
+interface SidenavProps extends HTMLAttributes<HTMLElement> {
+    iconPosition?: 'left' | 'right';
+    borderSide?: 'left' | 'right';
+    ref?: Ref<HTMLElement>;
+}
+declare function SidenavRoot({ iconPosition, borderSide, className, children, ref, ...props }: SidenavProps): react_jsx_runtime.JSX.Element;
+type SidenavItemOwnProps = {
+    active?: boolean;
+};
+type SidenavItemProps<E extends ElementType = 'a'> = PolymorphicProps<E, SidenavItemOwnProps>;
+declare function Item({ as, active, className, children, ref, ...props }: SidenavItemProps<ElementType> & {
+    ref?: Ref<any>;
+}): react_jsx_runtime.JSX.Element;
+interface SidenavIconProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+}
+declare function Icon({ className, ref, ...props }: SidenavIconProps): react_jsx_runtime.JSX.Element;
+interface SidenavGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    label: string;
+    icon?: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Group({ label, icon, defaultOpen, open: controlledOpen, onOpenChange, className, children, ref, ...props }: SidenavGroupProps): react_jsx_runtime.JSX.Element;
+declare const Sidenav: typeof SidenavRoot & {
+    Item: typeof Item;
+    Icon: typeof Icon;
+    Group: typeof Group;
+};
+
+interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    copyText?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function CodeBlock({ children, copyText, className, ref, ...props }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+type Theme = 'dark' | 'light';
+type Contrast = 'enhanced' | 'high';
+interface ThemeContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    contrast: Contrast;
+    setContrast: (contrast: Contrast) => void;
+    toggleTheme: () => void;
+}
+interface ThemeProviderProps {
+    theme?: Theme;
+    contrast?: Contrast;
+    defaultTheme?: Theme;
+    defaultContrast?: Contrast;
+    onThemeChange?: (theme: Theme) => void;
+    onContrastChange?: (contrast: Contrast) => void;
+    children: ReactNode;
+}
+declare function useTheme(): ThemeContextValue;
+declare function ThemeProvider({ theme: controlledTheme, contrast: controlledContrast, defaultTheme, defaultContrast, onThemeChange, onContrastChange, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+interface UseDisclosureOptions {
+    defaultOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+interface UseDisclosureReturn {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onToggle: () => void;
+}
+declare function useDisclosure(options?: UseDisclosureOptions): UseDisclosureReturn;
+
+declare function useFocusTrap(ref: React.RefObject<HTMLElement | null>, active: boolean): void;
+
+interface UseKeyboardNavOptions {
+    orientation?: 'horizontal' | 'vertical';
+    loop?: boolean;
+    onSelect?: (index: number) => void;
+}
+interface UseKeyboardNavReturn {
+    activeIndex: number;
+    setActiveIndex: (index: number) => void;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+}
+declare function useKeyboardNav(items: React.RefObject<(HTMLElement | null)[]>, options?: UseKeyboardNavOptions): UseKeyboardNavReturn;
+
+declare function useReducedMotion(): boolean;
+
+declare function useMergedRef<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T>;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+interface SafePortalProps {
+    children: ReactNode;
+    target?: Element | null;
+}
+declare function SafePortal({ children, target }: SafePortalProps): react.ReactPortal | null;
+
+export { Badge, type BadgeProps, Battery, BatteryInline, type BatteryInlineProps, type BatteryProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Card, type CardProps, type CardSectionProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, type Column, type Contrast, CornerBrackets, type CornerBracketsProps, Input, type InputProps, Modal, type ModalProps, NavDropdown, type NavDropdownItem, type NavDropdownProps, Pagination, type PaginationProps, type PolymorphicProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, SafePortal, Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, Sidenav, type SidenavGroupProps, type SidenavIconProps, type SidenavItemProps, type SidenavProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Table, type TableProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Tag, type TagProps, Textarea, type TextareaProps, type Theme, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, TitleLine, type TitleLineProps, type ToastEntry, type ToastOptions, Toaster, type ToasterProps, Toggle, type ToggleProps, Toolbar, type ToolbarProps, type ToolbarSelectOption, type ToolbarSelectProps, Tooltip, type TooltipProps, cn, createToast as toast, useDisclosure, useFocusTrap, useKeyboardNav, useMergedRef, useReducedMotion, useTheme };