@ug666/ui-react 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,1363 @@
+import * as react from 'react';
+import { FormEvent, ReactElement, HTMLAttributes, LabelHTMLAttributes, ImgHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+export { cn } from '@ug666/ui-utils';
+export { SetLocalStorageValue, UseCopyToClipboardReturn, UseFormErrors, UseFormReturn, UseHotkeysOptions, UseLocalStorageReturn, UsePaginationOptions, UsePaginationReturn, UseToggleReturn, useClickOutside, useCopyToClipboard, useDebounce, useEventListener, useForm, useHotkeys, useInterval, useLocalStorage, useMediaQuery, useMounted, usePagination, useTimeout, useToggle } from './hooks/index.cjs';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** 是否处于加载状态，加载时显示旋转图标并禁用点击 */
+    loading?: boolean;
+}
+/**
+ * 通用按钮组件
+ * @example
+ * <Button variant="default" size="lg" onClick={handleClick}>确认</Button>
+ * <Button variant="destructive" loading>删除中...</Button>
+ * <Button variant="outline" size="sm">取消</Button>
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** 输入框标签文本 */
+    label?: string;
+    /** 错误提示文本，有值时边框变红 */
+    error?: string;
+    /** 帮助说明文本 */
+    helperText?: string;
+}
+/**
+ * 通用输入框组件
+ * @example
+ * <Input label="用户名" placeholder="请输入用户名" />
+ * <Input label="邮箱" error="邮箱格式不正确" value={email} onChange={handleChange} />
+ * <Input label="备注" helperText="最多 200 字" />
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /** 是否为必填项，显示红色星号 */
+    required?: boolean;
+}
+/**
+ * 通用标签组件
+ * @example
+ * <Label htmlFor="email">邮箱</Label>
+ * <Label htmlFor="name" required>姓名</Label>
+ */
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
+
+type CardProps = React.HTMLAttributes<HTMLDivElement>;
+type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * 卡片容器
+ * @example
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>标题</CardTitle>
+ *     <CardDescription>描述文字</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>内容区域</CardContent>
+ *   <CardFooter>底部操作</CardFooter>
+ * </Card>
+ */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: react.ForwardRefExoticComponent<CardTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: react.ForwardRefExoticComponent<CardDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: react.ForwardRefExoticComponent<CardContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+/**
+ * 徽标组件
+ * @example
+ * <Badge variant="default">新品</Badge>
+ * <Badge variant="success">已完成</Badge>
+ * <Badge variant="destructive">已删除</Badge>
+ * <Badge variant="warning">待审核</Badge>
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+declare const tagVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof tagVariants> {
+    /** 是否显示关闭按钮 */
+    closable?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义背景色（覆盖 variant 颜色） */
+    color?: string;
+    /** 关闭按钮点击回调 */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * 标签组件（可交互，支持关闭）
+ * @example
+ * <Tag>默认标签</Tag>
+ * <Tag variant="success">已完成</Tag>
+ * <Tag variant="primary" closable onClose={() => console.log('关闭')}>可关闭</Tag>
+ * <Tag variant="warning" disabled>禁用状态</Tag>
+ * <Tag color="#8b5cf6">自定义颜色</Tag>
+ */
+declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface ModalProps {
+    /** 是否显示 */
+    open: boolean;
+    /** 关闭回调 */
+    onClose: () => void;
+    /** 子内容 */
+    children: React.ReactNode;
+    /** 额外类名 */
+    className?: string;
+}
+interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 最大宽度，默认 max-w-lg */
+    maxWidth?: string;
+}
+type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+type ModalTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;
+interface ModalCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * 对话框组件
+ * @example
+ * <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+ *   <ModalContent>
+ *     <ModalHeader>
+ *       <ModalTitle>确认删除</ModalTitle>
+ *     </ModalHeader>
+ *     <p className="px-6 pb-4 text-sm text-slate-600">此操作不可撤销。</p>
+ *     <ModalFooter>
+ *       <Button variant="outline" onClick={() => setIsOpen(false)}>取消</Button>
+ *       <Button variant="destructive">删除</Button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
+ */
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
+declare const ModalContent: react.ForwardRefExoticComponent<ModalContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const ModalHeader: react.ForwardRefExoticComponent<ModalHeaderProps & react.RefAttributes<HTMLDivElement>>;
+declare const ModalTitle: react.ForwardRefExoticComponent<ModalTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const ModalFooter: react.ForwardRefExoticComponent<ModalFooterProps & react.RefAttributes<HTMLDivElement>>;
+/** 独立关闭按钮，可放在 ModalHeader 右侧 */
+declare const ModalCloseButton: react.ForwardRefExoticComponent<ModalCloseButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/** Dialog 变体类型 */
+type DialogVariant = 'default' | 'destructive';
+interface DialogProps {
+    /** 是否显示 */
+    open: boolean;
+    /** 打开/关闭状态变化回调 */
+    onOpenChange: (open: boolean) => void;
+    /** 对话框标题 */
+    title: string;
+    /** 对话框描述文字 */
+    description?: string;
+    /** 变体：default（默认蓝色确认）或 destructive（红色危险确认） */
+    variant?: DialogVariant;
+    /** 取消按钮文案，默认"取消" */
+    cancelText?: string;
+    /** 确认按钮文案，默认"确认" */
+    confirmText?: string;
+    /** 点击确认回调 */
+    onConfirm?: () => void;
+    /** 点击取消回调 */
+    onCancel?: () => void;
+    /** 额外类名 */
+    className?: string;
+}
+/**
+ * 确认对话框组件（AlertDialog 模式）
+ *
+ * 与 Modal 不同：Dialog 固定为"取消 + 确认"双按钮结构，专用于需要用户确认的操作。
+ *
+ * @example
+ * ```tsx
+ * // 普通确认
+ * <Dialog
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="提交订单"
+ *   description="确认提交后无法修改，是否继续？"
+ *   onConfirm={handleSubmit}
+ * />
+ *
+ * // 危险操作（红色确认按钮）
+ * <Dialog
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="删除账号"
+ *   description="此操作不可撤销，所有数据将被永久删除。"
+ *   variant="destructive"
+ *   confirmText="永久删除"
+ *   onConfirm={handleDelete}
+ * />
+ * ```
+ */
+declare const Dialog: react.ForwardRefExoticComponent<DialogProps & react.RefAttributes<HTMLDivElement>>;
+
+/** 抽屉滑出方向 */
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+interface DrawerProps {
+    /** 是否显示 */
+    open: boolean;
+    /** 状态变更回调 */
+    onOpenChange: (open: boolean) => void;
+    /** 滑出方向，默认 right */
+    side?: DrawerSide;
+    /** 子内容 */
+    children?: React.ReactNode;
+}
+interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+type DrawerDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;
+interface DrawerCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * 抽屉容器
+ * @example
+ * <Drawer open={isOpen} onOpenChange={setIsOpen} side="right">
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <DrawerTitle>标题</DrawerTitle>
+ *       <DrawerDescription>描述文字</DrawerDescription>
+ *     </DrawerHeader>
+ *     <p className="px-6 py-4 text-sm text-slate-600">抽屉内容</p>
+ *     <DrawerFooter>
+ *       <DrawerClose onClick={() => setIsOpen(false)}>关闭</DrawerClose>
+ *     </DrawerFooter>
+ *   </DrawerContent>
+ * </Drawer>
+ */
+declare const Drawer: {
+    ({ open, onOpenChange, side, children }: DrawerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/** 抽屉内容面板，通过 createPortal 渲染到 body */
+declare const DrawerContent: react.ForwardRefExoticComponent<DrawerContentProps & react.RefAttributes<HTMLDivElement>>;
+/** 抽屉头部区域 */
+declare const DrawerHeader: react.ForwardRefExoticComponent<DrawerHeaderProps & react.RefAttributes<HTMLDivElement>>;
+/** 抽屉标题 */
+declare const DrawerTitle: react.ForwardRefExoticComponent<DrawerTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+/** 抽屉描述 */
+declare const DrawerDescription: react.ForwardRefExoticComponent<DrawerDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+/** 抽屉底部区域 */
+declare const DrawerFooter: react.ForwardRefExoticComponent<DrawerFooterProps & react.RefAttributes<HTMLDivElement>>;
+/** 关闭按钮 */
+declare const DrawerClose: react.ForwardRefExoticComponent<DrawerCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+type TableProps = React.HTMLAttributes<HTMLTableElement>;
+type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
+type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
+type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>;
+type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement>;
+type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
+/**
+ * 表格组件
+ * @example
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>姓名</TableHead>
+ *       <TableHead>邮箱</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>张三</TableCell>
+ *       <TableCell>zhangsan@example.com</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ */
+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 ToastType = 'success' | 'error' | 'info';
+interface ToastItem {
+    id: string;
+    message: string;
+    type: ToastType;
+}
+/** toast 调用接口 */
+declare const toast: {
+    success: (message: string) => void;
+    error: (message: string) => void;
+    info: (message: string) => void;
+};
+/**
+ * Toaster 组件，放在应用根布局中一次即可
+ * @example
+ * // 在 layout 或 App 中：
+ * <Toaster />
+ *
+ * // 在任意组件中调用：
+ * toast.success('保存成功')
+ * toast.error('网络异常，请重试')
+ * toast.info('请先登录')
+ */
+declare const Toaster: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+interface SidebarItem {
+    label: string;
+    href: string;
+    icon: LucideIcon;
+    active?: boolean;
+}
+type SidebarVariant = 'primary' | 'dark';
+interface SidebarProps {
+    /** 导航菜单项 */
+    items: SidebarItem[];
+    /** 视觉变体：primary 品牌色（默认），dark 深灰色（推荐后台管理） */
+    variant?: SidebarVariant;
+    /** 是否折叠，折叠时只显示图标 */
+    collapsed?: boolean;
+    /** 底部插槽，用于退出登录等操作 */
+    footer?: React.ReactNode;
+    /** 额外类名 */
+    className?: string;
+}
+/**
+ * 侧边栏布局组件
+ * @example
+ * <Sidebar variant="dark" items={navItems} footer={<LogoutButton />} />
+ */
+declare const Sidebar: react.ForwardRefExoticComponent<SidebarProps & react.RefAttributes<HTMLElement>>;
+
+interface PaginationProps {
+    /** 当前页码，从 1 开始 */
+    page: number;
+    /** 总页数 */
+    totalPages: number;
+    /** 页码变化回调 */
+    onPageChange: (page: number) => void;
+    /** 额外类名 */
+    className?: string;
+}
+/**
+ * 分页组件
+ * @example
+ * <Pagination page={currentPage} totalPages={20} onPageChange={setCurrentPage} />
+ */
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SelectOption {
+    label: string;
+    value: string | number;
+}
+interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    /** 标签文本 */
+    label?: string;
+    /** 错误提示，有值时边框变红 */
+    error?: string;
+    /** 帮助说明文本 */
+    helperText?: string;
+    /** 选项列表 */
+    options: SelectOption[];
+    /** 占位提示，渲染为禁用的首选项 */
+    placeholder?: string;
+}
+/**
+ * 下拉选择组件
+ * @example
+ * <Select
+ *   label="状态"
+ *   placeholder="请选择状态"
+ *   options={[
+ *     { label: '启用', value: 'active' },
+ *     { label: '禁用', value: 'inactive' },
+ *   ]}
+ *   value={status}
+ *   onChange={(e) => setStatus(e.target.value)}
+ * />
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SpinnerProps extends React.HTMLAttributes<SVGSVGElement>, VariantProps<typeof spinnerVariants> {
+    /** 无障碍标签 */
+    label?: string;
+}
+/**
+ * 加载旋转动画
+ * @example
+ * <Spinner />
+ * <Spinner size="sm" />
+ * <Spinner size="lg" className="text-blue-500" />
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<SVGSVGElement>>;
+
+declare const checkboxVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    state?: "checked" | "unchecked" | "indeterminate" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'type'>, Pick<VariantProps<typeof checkboxVariants>, 'size'> {
+    /** 是否选中（受控） */
+    checked?: boolean;
+    /** 半选中状态（优先级高于 checked） */
+    indeterminate?: boolean;
+    /** 选中状态变化回调 */
+    onCheckedChange?: (checked: boolean) => void;
+    /** 同行标签文案，有值时整块可点击 */
+    label?: React.ReactNode;
+    /** 标签额外 class */
+    labelClassName?: string;
+}
+/**
+ * 通用复选框组件
+ * @example
+ * <Checkbox checked={isOpen} onCheckedChange={setIsOpen} label="启用通知" />
+ * <Checkbox indeterminate />
+ * <Checkbox size="lg" disabled />
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+declare const radioVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    checked?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'type' | 'checked'>, Pick<VariantProps<typeof radioVariants>, 'size'> {
+    /** 单选框的值（必需） */
+    value: string;
+    /** 是否选中（受控，被 RadioGroup 包裹时由 Group 控制） */
+    checked?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 单选框旁边的标签文案 */
+    label?: React.ReactNode;
+    /** 所属 group 的 name（被 RadioGroup 包裹时由 Group 覆盖） */
+    name?: string;
+    /** 选中回调（被 RadioGroup 包裹时由 Group 覆盖） */
+    onChange?: (value: string) => void;
+}
+/**
+ * 单选框组件，可单独使用或配合 RadioGroup 使用
+ * @example
+ * // 独立使用
+ * <Radio value="option1" checked={selected === 'option1'} onChange={setSelected} label="选项一" />
+ *
+ * // 配合 RadioGroup 使用
+ * <RadioGroup value={val} onValueChange={setVal}>
+ *   <Radio value="a" label="选项 A" />
+ *   <Radio value="b" label="选项 B" />
+ * </RadioGroup>
+ */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 当前选中值（受控） */
+    value?: string;
+    /** 初始选中值（非受控） */
+    defaultValue?: string;
+    /** 选中值变化回调 */
+    onValueChange?: (value: string) => void;
+    /** 是否整组禁用 */
+    disabled?: boolean;
+    /** 表单 name 属性，共享给子 Radio */
+    name?: string;
+    /** 排列方向，默认垂直 */
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * 单选框组，管理一组 Radio 的选中状态
+ * @example
+ * <RadioGroup value={plan} onValueChange={setPlan} orientation="horizontal">
+ *   <Radio value="free" label="免费版" />
+ *   <Radio value="pro" label="专业版" />
+ *   <Radio value="enterprise" label="企业版" />
+ * </RadioGroup>
+ */
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
+    /** 当前值（受控） */
+    value?: number;
+    /** 初始值（非受控） */
+    defaultValue?: number;
+    /** 最小值，默认 0 */
+    min?: number;
+    /** 最大值，默认 100 */
+    max?: number;
+    /** 步进值，默认 1 */
+    step?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否在滑块上方显示当前值，默认 false */
+    showValue?: boolean;
+    /** 值变化回调 */
+    onValueChange?: (value: number) => void;
+}
+/**
+ * 数值滑块组件
+ * @example
+ * // 非受控用法
+ * <Slider defaultValue={30} min={0} max={100} step={5} showValue />
+ *
+ * // 受控用法
+ * const [vol, setVol] = useState(50)
+ * <Slider value={vol} onValueChange={setVol} min={0} max={100} />
+ *
+ * // 禁用状态
+ * <Slider value={60} disabled />
+ */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+
+declare const numberInputVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'onChange' | 'type'>, VariantProps<typeof numberInputVariants> {
+    /** 当前值（受控） */
+    value?: number;
+    /** 初始值（非受控） */
+    defaultValue?: number;
+    /** 最小值 */
+    min?: number;
+    /** 最大值 */
+    max?: number;
+    /** 步进值，默认 1 */
+    step?: number;
+    /** 小数位数，默认 0 */
+    precision?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 占位文本 */
+    placeholder?: string;
+    /** 值变化回调 */
+    onValueChange?: (value: number) => void;
+}
+/**
+ * 数字步进输入框组件
+ * @example
+ * // 基础用法
+ * <NumberInput defaultValue={1} min={1} max={99} step={1} />
+ *
+ * // 受控用法
+ * const [qty, setQty] = useState(10)
+ * <NumberInput value={qty} onValueChange={setQty} min={0} max={100} size="lg" />
+ *
+ * // 带小数精度
+ * <NumberInput defaultValue={1.5} step={0.1} precision={2} min={0} max={10} />
+ */
+declare const NumberInput: react.ForwardRefExoticComponent<NumberInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface OTPInputProps {
+    /** 当前验证码值（受控） */
+    value: string;
+    /** 值变化回调 */
+    onValueChange: (value: string) => void;
+    /** 验证码位数，默认 6 */
+    length?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 输入完整时的回调 */
+    onComplete?: (value: string) => void;
+    /** 额外类名（作用于容器） */
+    className?: string;
+}
+/**
+ * 一次性验证码（OTP）输入组件
+ *
+ * 渲染 N 个独立小方框，支持逐位输入数字、左右方向键切换焦点、
+ * Backspace 清除并返回上一格，以及粘贴完整验证码自动填充。
+ *
+ * @example
+ * ```tsx
+ * const [code, setCode] = useState('')
+ *
+ * <OTPInput
+ *   value={code}
+ *   onValueChange={setCode}
+ *   length={6}
+ *   onComplete={(val) => console.log('验证码：', val)}
+ * />
+ * ```
+ */
+declare const OTPInput: react.ForwardRefExoticComponent<OTPInputProps & react.RefAttributes<HTMLDivElement>>;
+
+interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    /** 表单提交回调，已阻止默认行为 */
+    onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
+}
+/**
+ * 表单根容器，阻止默认提交行为后调用 onSubmit
+ * @example
+ * <Form onSubmit={handleSubmit} className="space-y-4">
+ *   ...
+ * </Form>
+ */
+declare const Form: react.ForwardRefExoticComponent<FormProps & react.RefAttributes<HTMLFormElement>>;
+interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** 字段名称，用于关联 label/message */
+    name: string;
+    /** 字段错误信息，有值时 FormMessage 显示红色提示 */
+    error?: string;
+}
+/**
+ * 字段容器，通过 Context 向子组件提供 { name, error, id }
+ * @example
+ * <FormField name="email" error={errors.email}>
+ *   <FormItem>
+ *     <FormLabel>邮箱</FormLabel>
+ *     <FormControl><Input /></FormControl>
+ *     <FormMessage />
+ *   </FormItem>
+ * </FormField>
+ */
+declare const FormField: react.ForwardRefExoticComponent<FormFieldProps & react.RefAttributes<HTMLDivElement>>;
+interface FormItemProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * 字段垂直布局容器，提供 flex-col gap-1.5 间距
+ * @example
+ * <FormItem>
+ *   <FormLabel>用户名</FormLabel>
+ *   <FormControl><Input /></FormControl>
+ *   <FormMessage />
+ * </FormItem>
+ */
+declare const FormItem: react.ForwardRefExoticComponent<FormItemProps & react.RefAttributes<HTMLDivElement>>;
+interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** 是否为必填项，显示红色星号 */
+    required?: boolean;
+}
+/**
+ * 表单字段标签，自动关联 FormField 生成的控件 id，支持 required 红星
+ * @example
+ * <FormLabel required>邮箱地址</FormLabel>
+ */
+declare const FormLabel: react.ForwardRefExoticComponent<FormLabelProps & react.RefAttributes<HTMLLabelElement>>;
+interface FormControlProps {
+    /** 单个表单控件子元素 */
+    children: ReactElement;
+}
+/**
+ * 向子控件注入 id、aria-describedby 与 aria-invalid，实现无障碍关联
+ * @example
+ * <FormControl>
+ *   <Input placeholder="请输入邮箱" />
+ * </FormControl>
+ */
+declare function FormControl({ children }: FormControlProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace FormControl {
+    var displayName: string;
+}
+interface FormDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+}
+/**
+ * 字段说明文字，灰色小字
+ * @example
+ * <FormDescription>请输入有效的电子邮箱地址</FormDescription>
+ */
+declare const FormDescription: react.ForwardRefExoticComponent<FormDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+interface FormMessageProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** 手动传入错误文本，优先级低于 FormField error prop */
+    children?: React.ReactNode;
+}
+/**
+ * 字段错误提示，当 FormField 存在 error 时显示红色小字，无错误不渲染
+ * @example
+ * <FormMessage />
+ */
+declare const FormMessage: react.ForwardRefExoticComponent<FormMessageProps & react.RefAttributes<HTMLParagraphElement>>;
+
+interface TabsProps {
+    /** 当前激活的标签值 */
+    value: string;
+    /** 切换标签回调 */
+    onValueChange: (value: string) => void;
+    /** 子内容 */
+    children: React.ReactNode;
+    /** 额外类名 */
+    className?: string;
+}
+interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 对应的标签值 */
+    value: string;
+}
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 对应的标签值 */
+    value: string;
+}
+/**
+ * 标签页容器
+ * @example
+ * <Tabs value={tab} onValueChange={setTab}>
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">基本信息</TabsTrigger>
+ *     <TabsTrigger value="tab2">高级设置</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">内容一</TabsContent>
+ *   <TabsContent value="tab2">内容二</TabsContent>
+ * </Tabs>
+ */
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+/** 标签列表容器 */
+declare const TabsList: react.ForwardRefExoticComponent<TabsListProps & react.RefAttributes<HTMLDivElement>>;
+/** 单个标签触发器 */
+declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/** 标签内容面板 */
+declare const TabsContent: react.ForwardRefExoticComponent<TabsContentProps & react.RefAttributes<HTMLDivElement>>;
+
+/** 手风琴展开类型 */
+type AccordionType = 'single' | 'multiple';
+interface AccordionSingleProps {
+    type: 'single';
+    /** 受控：当前展开项 */
+    value?: string;
+    /** 非受控：默认展开项 */
+    defaultValue?: string;
+    /** 状态变更回调 */
+    onValueChange?: (value: string) => void;
+    /** 是否允许折叠已展开项 */
+    collapsible?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+interface AccordionMultipleProps {
+    type: 'multiple';
+    /** 受控：当前展开的多个项 */
+    value?: string[];
+    /** 非受控：默认展开的多个项 */
+    defaultValue?: string[];
+    /** 状态变更回调 */
+    onValueChange?: (value: string[]) => void;
+    children?: React.ReactNode;
+    className?: string;
+}
+type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 唯一标识 */
+    value: string;
+}
+type AccordionTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+type AccordionContentProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * 手风琴容器
+ * @example
+ * // 单选模式
+ * <Accordion type="single" collapsible defaultValue="item-1">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>章节一</AccordionTrigger>
+ *     <AccordionContent>章节一的内容</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger>章节二</AccordionTrigger>
+ *     <AccordionContent>章节二的内容</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+/** 手风琴子项 */
+declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
+/** 手风琴触发器，点击展开/收起 */
+declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/** 手风琴内容区域 */
+declare const AccordionContent: react.ForwardRefExoticComponent<AccordionContentProps & react.RefAttributes<HTMLDivElement>>;
+
+interface StepItem {
+    /** 步骤标题 */
+    title: string;
+    /** 步骤描述（可选） */
+    description?: string;
+    /** 自定义图标（可选，仅在未完成且非当前时生效） */
+    icon?: React.ReactNode;
+}
+interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 当前激活步骤下标（0-based） */
+    current: number;
+    /** 步骤列表 */
+    items: StepItem[];
+    /** 排列方向 */
+    direction?: 'horizontal' | 'vertical';
+    /** 当前步骤状态 */
+    status?: 'process' | 'finish' | 'error';
+}
+/**
+ * 步骤条组件，展示流程进度
+ * @example
+ * <Steps
+ *   current={1}
+ *   items={[
+ *     { title: '填写信息', description: '输入基本资料' },
+ *     { title: '确认订单', description: '核对下单内容' },
+ *     { title: '完成支付' },
+ *   ]}
+ * />
+ */
+declare const Steps: react.ForwardRefExoticComponent<StepsProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DropdownMenuProps {
+    children: React.ReactNode;
+    className?: string;
+}
+interface DropdownTriggerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+interface DropdownContentProps {
+    children: React.ReactNode;
+    className?: string;
+    /** 对齐方向 */
+    align?: 'start' | 'end';
+}
+interface DropdownItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 是否为危险操作样式 */
+    destructive?: boolean;
+}
+type DropdownSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * 下拉菜单容器
+ * @example
+ * <DropdownMenu>
+ *   <DropdownTrigger><Button>操作</Button></DropdownTrigger>
+ *   <DropdownContent align="end">
+ *     <DropdownItem onClick={handleEdit}>编辑</DropdownItem>
+ *     <DropdownSeparator />
+ *     <DropdownItem destructive onClick={handleDelete}>删除</DropdownItem>
+ *   </DropdownContent>
+ * </DropdownMenu>
+ */
+declare const DropdownMenu: react.ForwardRefExoticComponent<DropdownMenuProps & react.RefAttributes<HTMLDivElement>>;
+/** 触发器包装器 */
+declare const DropdownTrigger: react.ForwardRefExoticComponent<DropdownTriggerProps & react.RefAttributes<HTMLDivElement>>;
+/** 下拉内容面板，通过 createPortal 渲染到 body */
+declare const DropdownContent: react.ForwardRefExoticComponent<DropdownContentProps & react.RefAttributes<HTMLDivElement>>;
+/** 菜单项 */
+declare const DropdownItem: react.ForwardRefExoticComponent<DropdownItemProps & react.RefAttributes<HTMLButtonElement>>;
+/** 分隔线 */
+declare const DropdownSeparator: react.ForwardRefExoticComponent<DropdownSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+/** 浮层显示方向 */
+type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
+/** 浮层对齐方式 */
+type PopoverAlign = 'start' | 'center' | 'end';
+interface PopoverProps {
+    /** 受控：是否显示 */
+    open?: boolean;
+    /** 非受控：默认是否显示 */
+    defaultOpen?: boolean;
+    /** 状态变更回调 */
+    onOpenChange?: (open: boolean) => void;
+    /** 子内容 */
+    children?: React.ReactNode;
+}
+interface PopoverTriggerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 浮层方向，默认 bottom */
+    side?: PopoverSide;
+    /** 对齐方式，默认 center */
+    align?: PopoverAlign;
+    /** 与触发器的间距，默认 4 */
+    sideOffset?: number;
+}
+/**
+ * Popover 容器
+ * @example
+ * <Popover>
+ *   <PopoverTrigger><Button>点击打开</Button></PopoverTrigger>
+ *   <PopoverContent side="bottom" align="center">
+ *     <p className="text-sm text-slate-700">浮层内容，可放复杂组件</p>
+ *   </PopoverContent>
+ * </Popover>
+ */
+declare const Popover: {
+    ({ open: controlledOpen, defaultOpen, onOpenChange, children }: PopoverProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/** Popover 触发器 */
+declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverTriggerProps & react.RefAttributes<HTMLDivElement>>;
+/** Popover 内容浮层，通过 createPortal 渲染到 body */
+declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ContextMenuProps {
+    children: React.ReactNode;
+    className?: string;
+}
+interface ContextMenuTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface ContextMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 是否为危险操作样式 */
+    destructive?: boolean;
+}
+type ContextMenuSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * 右键菜单根容器
+ * @example
+ * <ContextMenu>
+ *   <ContextMenuTrigger>
+ *     <div className="border p-8 rounded">在此区域右键</div>
+ *   </ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuItem onClick={handleCopy}>复制</ContextMenuItem>
+ *     <ContextMenuItem onClick={handlePaste}>粘贴</ContextMenuItem>
+ *     <ContextMenuSeparator />
+ *     <ContextMenuItem destructive onClick={handleDelete}>删除</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ */
+declare const ContextMenu: react.ForwardRefExoticComponent<ContextMenuProps & react.RefAttributes<HTMLDivElement>>;
+/** 右键触发区域包裹元素 */
+declare const ContextMenuTrigger: react.ForwardRefExoticComponent<ContextMenuTriggerProps & react.RefAttributes<HTMLDivElement>>;
+/** 右键菜单内容面板，fixed 定位到鼠标位置 */
+declare const ContextMenuContent: react.ForwardRefExoticComponent<ContextMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+/** 右键菜单项 */
+declare const ContextMenuItem: react.ForwardRefExoticComponent<ContextMenuItemProps & react.RefAttributes<HTMLButtonElement>>;
+/** 右键菜单分隔线 */
+declare const ContextMenuSeparator: react.ForwardRefExoticComponent<ContextMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {
+}
+interface NavigationMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** 是否为当前激活页 */
+    active?: boolean;
+}
+interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+interface NavigationMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * 顶部横向导航菜单根容器
+ * @example
+ * <NavigationMenu>
+ *   <NavigationMenuItem>
+ *     <NavigationMenuLink href="/">首页</NavigationMenuLink>
+ *   </NavigationMenuItem>
+ *   <NavigationMenuItem>
+ *     <NavigationMenuTrigger>产品</NavigationMenuTrigger>
+ *     <NavigationMenuContent>
+ *       <NavigationMenuLink href="/products/a">产品 A</NavigationMenuLink>
+ *       <NavigationMenuLink href="/products/b">产品 B</NavigationMenuLink>
+ *     </NavigationMenuContent>
+ *   </NavigationMenuItem>
+ * </NavigationMenu>
+ */
+declare const NavigationMenu: react.ForwardRefExoticComponent<NavigationMenuProps & react.RefAttributes<HTMLElement>>;
+/** 导航菜单项容器，可包含 Link 或 Trigger + Content */
+declare const NavigationMenuItem: react.ForwardRefExoticComponent<NavigationMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+/** 直接跳转的导航链接 */
+declare const NavigationMenuLink: react.ForwardRefExoticComponent<NavigationMenuLinkProps & react.RefAttributes<HTMLAnchorElement>>;
+/** 带下拉面板的触发器按钮 */
+declare const NavigationMenuTrigger: react.ForwardRefExoticComponent<NavigationMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/** 下拉面板内容 */
+declare const NavigationMenuContent: react.ForwardRefExoticComponent<NavigationMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof avatarVariants> {
+}
+interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    /** 图片 URL */
+    src: string;
+    /** alt 文本 */
+    alt?: string;
+}
+type AvatarFallbackProps = HTMLAttributes<HTMLSpanElement>;
+/**
+ * 头像容器，提供图片加载状态 Context
+ * @example
+ * <Avatar size="lg">
+ *   <AvatarImage src="/user.png" alt="用户头像" />
+ *   <AvatarFallback>张</AvatarFallback>
+ * </Avatar>
+ */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+/** 头像图片 — 加载中、失败时不渲染（由 AvatarFallback 接管），加载成功后才显示 */
+declare const AvatarImage: react.ForwardRefExoticComponent<AvatarImageProps & react.RefAttributes<HTMLImageElement>>;
+/** 回退内容 — 仅在图片未加载完成时显示，加载成功后自动隐藏 */
+declare const AvatarFallback: react.ForwardRefExoticComponent<AvatarFallbackProps & react.RefAttributes<HTMLSpanElement>>;
+
+type AvatarGroupSize = 'sm' | 'default' | 'lg';
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 最多显示的头像数量，超出用 +N 展示，默认 5 */
+    max?: number;
+    /** 头像尺寸 */
+    size?: AvatarGroupSize;
+}
+/**
+ * 头像堆叠组，超出 max 时末尾显示 +N 灰底圆
+ * @example
+ * <AvatarGroup max={3} size="default">
+ *   <Avatar><AvatarImage src="/a.png" alt="用户A" /></Avatar>
+ *   <Avatar><AvatarImage src="/b.png" alt="用户B" /><AvatarFallback>B</AvatarFallback></Avatar>
+ *   <Avatar><AvatarFallback>张</AvatarFallback></Avatar>
+ *   <Avatar><AvatarFallback>李</AvatarFallback></Avatar>
+ * </AvatarGroup>
+ */
+declare const AvatarGroup: react.ForwardRefExoticComponent<AvatarGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TooltipProps {
+    children: React.ReactNode;
+    className?: string;
+}
+interface TooltipTriggerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+interface TooltipContentProps {
+    children: React.ReactNode;
+    /** 显示方向 */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+}
+/**
+ * Tooltip 容器
+ * @example
+ * <Tooltip>
+ *   <TooltipTrigger><Button>悬停我</Button></TooltipTrigger>
+ *   <TooltipContent side="top">这是提示文字</TooltipContent>
+ * </Tooltip>
+ */
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLSpanElement>>;
+/** Tooltip 触发器 */
+declare const TooltipTrigger: react.ForwardRefExoticComponent<TooltipTriggerProps & react.RefAttributes<HTMLSpanElement>>;
+/** Tooltip 内容气泡 */
+declare const TooltipContent: react.ForwardRefExoticComponent<TooltipContentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+}
+type AlertTitleProps = React.HTMLAttributes<HTMLParagraphElement>;
+type AlertDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+/**
+ * 提示横幅组件
+ * @example
+ * <Alert variant="success">
+ *   <AlertTitle>操作成功</AlertTitle>
+ *   <AlertDescription>文件已成功上传。</AlertDescription>
+ * </Alert>
+ */
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+/** 提示标题 */
+declare const AlertTitle: react.ForwardRefExoticComponent<AlertTitleProps & react.RefAttributes<HTMLParagraphElement>>;
+/** 提示描述 */
+declare const AlertDescription: react.ForwardRefExoticComponent<AlertDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+
+type BreadcrumbProps = React.HTMLAttributes<HTMLElement>;
+type BreadcrumbItemProps = React.HTMLAttributes<HTMLLIElement>;
+interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** 是否为当前页（当前页无链接，样式不同） */
+    current?: boolean;
+}
+type BreadcrumbSeparatorProps = React.HTMLAttributes<HTMLLIElement>;
+/**
+ * 面包屑导航
+ * @example
+ * <Breadcrumb>
+ *   <BreadcrumbItem>
+ *     <BreadcrumbLink href="/">首页</BreadcrumbLink>
+ *     <BreadcrumbSeparator />
+ *   </BreadcrumbItem>
+ *   <BreadcrumbItem>
+ *     <BreadcrumbLink href="/settings">设置</BreadcrumbLink>
+ *     <BreadcrumbSeparator />
+ *   </BreadcrumbItem>
+ *   <BreadcrumbItem>
+ *     <BreadcrumbLink current>个人资料</BreadcrumbLink>
+ *   </BreadcrumbItem>
+ * </Breadcrumb>
+ */
+declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
+/** 面包屑项，包裹 BreadcrumbLink 和可选的 BreadcrumbSeparator */
+declare const BreadcrumbItem: react.ForwardRefExoticComponent<BreadcrumbItemProps & react.RefAttributes<HTMLLIElement>>;
+/** 面包屑链接，current=true 时渲染为非链接的当前页标识 */
+declare const BreadcrumbLink: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
+/** 分隔符，默认使用 ChevronRight 图标 */
+declare const BreadcrumbSeparator: react.ForwardRefExoticComponent<BreadcrumbSeparatorProps & react.RefAttributes<HTMLLIElement>>;
+
+interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    /** 是否选中 */
+    checked: boolean;
+    /** 切换回调 */
+    onCheckedChange: (checked: boolean) => void;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 标签文本 */
+    label?: string;
+    /** 标签位置 */
+    labelPlacement?: 'left' | 'right';
+}
+/**
+ * 开关组件
+ * @example
+ * <Switch checked={enabled} onCheckedChange={setEnabled} label="启用通知" />
+ * <Switch checked={dark} onCheckedChange={setDark} label="深色模式" labelPlacement="left" disabled />
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** 标签文本 */
+    label?: string;
+    /** 错误提示文本，有值时边框变红 */
+    error?: string;
+    /** 帮助说明文本 */
+    helperText?: string;
+    /** 默认行数 */
+    rows?: number;
+}
+/**
+ * 多行文本输入框
+ * @example
+ * <Textarea label="描述" placeholder="请输入描述..." rows={5} />
+ * <Textarea label="备注" error="内容不能为空" value={text} onChange={handleChange} />
+ * <Textarea label="简介" helperText="最多 500 字" rows={4} />
+ */
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+declare const skeletonVariants: (props?: ({
+    variant?: "text" | "circle" | "rect" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+}
+/**
+ * 骨架屏占位组件
+ * @example
+ * <Skeleton variant="text" className="w-40" />
+ * <Skeleton variant="circle" className="h-10 w-10" />
+ * <Skeleton variant="rect" className="h-32 w-full" />
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 当前进度值 0-100 */
+    value: number;
+    /** 最大值，默认 100 */
+    max?: number;
+    /** 是否显示百分比文本 */
+    showLabel?: boolean;
+    /** 进度条颜色，Tailwind bg-* 类名 */
+    color?: string;
+}
+/**
+ * 进度条组件
+ * @example
+ * <Progress value={60} showLabel />
+ * <Progress value={80} color="bg-green-500" />
+ * <Progress value={30} max={200} showLabel />
+ */
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SheetProps {
+    /** 是否显示 */
+    open: boolean;
+    /** 关闭回调 */
+    onClose: () => void;
+    /** 滑入方向 */
+    side?: 'left' | 'right';
+    /** 抽屉标题 */
+    title?: string;
+    /** 子内容 */
+    children?: React.ReactNode;
+    /** 额外类名 */
+    className?: string;
+}
+/**
+ * 侧边抽屉组件
+ * @example
+ * <Sheet open={isOpen} onClose={() => setIsOpen(false)} title="筛选条件" side="right">
+ *   <p>抽屉内容</p>
+ * </Sheet>
+ */
+declare const Sheet: react.ForwardRefExoticComponent<SheetProps & react.RefAttributes<HTMLDivElement>>;
+
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Lucide 图标组件 */
+    icon?: LucideIcon;
+    /** 标题文字 */
+    title: string;
+    /** 描述文字 */
+    description?: string;
+    /** 操作区域（如按钮） */
+    action?: React.ReactNode;
+}
+/**
+ * 空状态占位组件
+ * @example
+ * <EmptyState
+ *   icon={Inbox}
+ *   title="暂无数据"
+ *   description="当前列表为空，请先添加内容"
+ *   action={<Button onClick={handleAdd}>新增</Button>}
+ * />
+ */
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
+
+/** 分割线方向 */
+type SeparatorOrientation = 'horizontal' | 'vertical';
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 方向，默认 horizontal */
+    orientation?: SeparatorOrientation;
+}
+/**
+ * 分割线
+ * @example
+ * // 水平分割线
+ * <Separator />
+ *
+ * // 垂直分割线（父容器需设定高度）
+ * <div className="flex h-8 items-center gap-4">
+ *   <span>左侧文字</span>
+ *   <Separator orientation="vertical" />
+ *   <span>右侧文字</span>
+ * </div>
+ */
+declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+type DescriptionsSize = 'sm' | 'default' | 'lg';
+interface DescriptionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** 列数，默认 2 */
+    column?: 1 | 2 | 3 | 4;
+    /** 是否显示边框，类似表格样式 */
+    bordered?: boolean;
+    /** 尺寸 */
+    size?: DescriptionsSize;
+    /** 标题 */
+    title?: React.ReactNode;
+}
+interface DescriptionsItemProps {
+    /** 标签（必需） */
+    label: React.ReactNode;
+    /** 占几列，默认 1 */
+    span?: number;
+    /** 子内容 */
+    children?: React.ReactNode;
+    /** 额外类名 */
+    className?: string;
+}
+/**
+ * 详情描述列表条目
+ * @example
+ * <DescriptionsItem label="姓名">张三</DescriptionsItem>
+ * <DescriptionsItem label="地址" span={2}>北京市朝阳区</DescriptionsItem>
+ */
+declare const DescriptionsItem: react.ForwardRefExoticComponent<DescriptionsItemProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * 详情描述列表容器
+ * @example
+ * <Descriptions column={2} bordered title="用户信息">
+ *   <DescriptionsItem label="姓名">张三</DescriptionsItem>
+ *   <DescriptionsItem label="年龄">28</DescriptionsItem>
+ *   <DescriptionsItem label="地址" span={2}>北京市朝阳区</DescriptionsItem>
+ * </Descriptions>
+ */
+declare const Descriptions: react.ForwardRefExoticComponent<DescriptionsProps & react.RefAttributes<HTMLDivElement>>;
+
+type StatisticSize = 'sm' | 'default' | 'lg';
+type StatisticTrend = 'up' | 'down' | 'flat';
+interface StatisticProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'prefix'> {
+    /** 标题文案 */
+    title?: React.ReactNode;
+    /** 统计数值（数字会自动格式化，字符串原样展示） */
+    value: number | string;
+    /** 小数位数，仅 value 为 number 时生效 */
+    precision?: number;
+    /** 数值前缀，如图标 */
+    prefix?: React.ReactNode;
+    /** 数值后缀，如单位文字 */
+    suffix?: React.ReactNode;
+    /** 趋势方向 */
+    trend?: StatisticTrend;
+    /** 趋势说明文案，如 "+12%" */
+    change?: string;
+    /** 尺寸 */
+    size?: StatisticSize;
+}
+/**
+ * 统计数字卡片组件
+ * @example
+ * <Statistic title="今日订单" value={1234} suffix="单" trend="up" change="+12%" />
+ * <Statistic title="总收入" value={98765.5} precision={2} prefix={<DollarSign size={20} />} />
+ * <Statistic title="退单率" value={3.2} precision={1} suffix="%" trend="down" change="-0.5%" size="lg" />
+ */
+declare const Statistic: react.ForwardRefExoticComponent<StatisticProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @description: 主题配置 — 定义颜色、圆角、字体等设计令牌
+ * @author: UG - 一个斗码大陆苦逼的三段码之气的少年，并没有神秘戒指中码老的帮助，但总有一天，我会成为斗码大陆中码帝一样的存在。三十年河东，三十年河西，莫欺少年穷。
+ * @date: 2026-04-15
+ */
+declare const theme: {
+    readonly colors: {
+        readonly primary: {
+            readonly DEFAULT: "#6366f1";
+            readonly hover: "#4f46e5";
+            readonly light: "#eef2ff";
+        };
+        readonly secondary: {
+            readonly DEFAULT: "#64748b";
+            readonly hover: "#475569";
+            readonly light: "#f1f5f9";
+        };
+        readonly destructive: {
+            readonly DEFAULT: "#ef4444";
+            readonly hover: "#dc2626";
+            readonly light: "#fef2f2";
+        };
+        readonly success: {
+            readonly DEFAULT: "#22c55e";
+            readonly hover: "#16a34a";
+            readonly light: "#f0fdf4";
+        };
+        readonly warning: {
+            readonly DEFAULT: "#f59e0b";
+            readonly hover: "#d97706";
+            readonly light: "#fffbeb";
+        };
+        readonly background: "#ffffff";
+        readonly foreground: "#0f172a";
+        readonly muted: "#f1f5f9";
+        readonly border: "#e2e8f0";
+        readonly ring: "#6366f1";
+    };
+    readonly radius: {
+        readonly sm: "0.375rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+        readonly full: "9999px";
+    };
+    readonly fontFamily: {
+        readonly sans: "system-ui, -apple-system, sans-serif";
+        readonly mono: "ui-monospace, monospace";
+    };
+};
+type Theme = typeof theme;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionMultipleProps, type AccordionProps, type AccordionSingleProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, ContextMenu, ContextMenuContent, type ContextMenuContentProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuTrigger, type ContextMenuTriggerProps, Descriptions, DescriptionsItem, type DescriptionsItemProps, type DescriptionsProps, type DescriptionsSize, Dialog, type DialogProps, type DialogVariant, Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, type DrawerSide, DrawerTitle, type DrawerTitleProps, DropdownContent, type DropdownContentProps, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldProps, FormItem, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, ModalCloseButton, type ModalCloseButtonProps, ModalContent, type ModalContentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTitle, type ModalTitleProps, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, NumberInput, type NumberInputProps, OTPInput, type OTPInputProps, Pagination, type PaginationProps, Popover, type PopoverAlign, PopoverContent, type PopoverContentProps, type PopoverProps, type PopoverSide, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectOption, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, Sheet, type SheetProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Statistic, type StatisticProps, type StatisticSize, type StatisticTrend, type StepItem, Steps, type StepsProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Tag, type TagProps, Textarea, type TextareaProps, type Theme, type ToastItem, type ToastType, Toaster, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, badgeVariants, buttonVariants, checkboxVariants, numberInputVariants, tagVariants, theme, toast };