@youwen/ai-design-system/dist/components/radix/types.d.ts

Enterprise AI-driven design system with comprehensive design tokens

/**
 * Radix 组件类型定义
 * 企业级组件的TypeScript类型系统
 *
 * @version 2.0.0
 * @description 基于增强类型系统的Radix组件类型定义
 */
import * as React from 'react';
import { VariantProps } from 'class-variance-authority';
import { buttonVariants, tooltipVariants, dialogVariants, dropdownMenuVariants, selectVariants, separatorVariants, labelVariants, tabsVariants } from './variants';
import type { ComponentSize, ComponentVariant, ThemeVariant, BrandColor, AccessibilitySpec, StylingSpec } from '../../types';
export interface BaseComponentProps {
    className?: string;
    children?: React.ReactNode;
    /** 组件唯一标识 */
    id?: string;
    /** 测试标识符 */
    'data-testid'?: string;
    /** 主题变体 */
    theme?: ThemeVariant;
    /** 品牌色 */
    brandColor?: BrandColor;
}
export interface EnterpriseComponentProps extends BaseComponentProps {
    /** 响应式配置 */
    responsive?: boolean;
    /** 可访问性配置 */
    accessibility?: Partial<AccessibilitySpec>;
    /** 自定义样式配置 */
    customStyling?: Partial<StylingSpec>;
}
export interface EnterpriseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants>, EnterpriseComponentProps {
    /** 使用子组件渲染 */
    asChild?: boolean;
    /** 加载状态 */
    loading?: boolean;
    /** 图标元素 */
    icon?: React.ReactNode;
    /** 图标位置 */
    iconPosition?: 'left' | 'right';
    /** 组件尺寸 */
    size?: ComponentSize;
    /** 组件变体 */
    variant?: ComponentVariant;
}
export interface EnterpriseTooltipProps extends VariantProps<typeof tooltipVariants>, BaseComponentProps {
    content: React.ReactNode;
    side?: 'top' | 'right' | 'bottom' | 'left';
    align?: 'start' | 'center' | 'end';
    delayDuration?: number;
    skipDelayDuration?: number;
    disableHoverableContent?: boolean;
}
export interface EnterpriseDialogProps extends VariantProps<typeof dialogVariants>, BaseComponentProps {
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    modal?: boolean;
    title?: string;
    description?: string;
    showOverlay?: boolean;
    closable?: boolean;
}
export interface EnterpriseDropdownMenuProps extends VariantProps<typeof dropdownMenuVariants>, BaseComponentProps {
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    modal?: boolean;
    side?: 'top' | 'right' | 'bottom' | 'left';
    align?: 'start' | 'center' | 'end';
    trigger: React.ReactNode;
    items: DropdownMenuItem[];
}
export interface DropdownMenuItem {
    type: 'item' | 'separator' | 'label' | 'submenu';
    label?: string;
    value?: string;
    icon?: React.ReactNode;
    disabled?: boolean;
    onSelect?: () => void;
    items?: DropdownMenuItem[];
    destructive?: boolean;
}
export interface EnterpriseSelectProps extends VariantProps<typeof selectVariants>, BaseComponentProps {
    value?: string;
    onValueChange?: (value: string) => void;
    defaultValue?: string;
    placeholder?: string;
    disabled?: boolean;
    required?: boolean;
    name?: string;
    options: SelectOption[];
}
export interface SelectOption {
    value: string;
    label: string;
    disabled?: boolean;
    group?: string;
}
export interface EnterpriseSeparatorProps extends VariantProps<typeof separatorVariants>, BaseComponentProps {
    orientation?: 'horizontal' | 'vertical';
    decorative?: boolean;
}
export interface EnterpriseLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants>, BaseComponentProps {
    asChild?: boolean;
    required?: boolean;
}
export interface EnterpriseTabsProps extends VariantProps<typeof tabsVariants>, BaseComponentProps {
    value?: string;
    onValueChange?: (value: string) => void;
    defaultValue?: string;
    orientation?: 'horizontal' | 'vertical';
    activationMode?: 'automatic' | 'manual';
    tabs: TabItem[];
    dir?: 'ltr' | 'rtl';
}
export interface TabItem {
    value: string;
    label: string;
    content: React.ReactNode;
    disabled?: boolean;
    icon?: React.ReactNode;
}
export interface ComponentEventHandlers {
    onFocus?: (event: React.FocusEvent) => void;
    onBlur?: (event: React.FocusEvent) => void;
    onKeyDown?: (event: React.KeyboardEvent) => void;
    onMouseEnter?: (event: React.MouseEvent) => void;
    onMouseLeave?: (event: React.MouseEvent) => void;
}
export type ThemeVariant = 'light' | 'dark';
export type BrandColor = 'primary' | 'secondary' | 'accent' | 'warning';
export type ComponentSize = 'sm' | 'md' | 'lg';
export type ComponentVariant = 'default' | 'outline' | 'ghost' | 'link' | 'destructive';
export interface AccessibilityProps {
    'aria-label'?: string;
    'aria-labelledby'?: string;
    'aria-describedby'?: string;
    'aria-expanded'?: boolean;
    'aria-hidden'?: boolean;
    'aria-disabled'?: boolean;
    role?: string;
    tabIndex?: number;
}
export type ResponsiveValue<T> = T | {
    mobile?: T;
    tablet?: T;
    desktop?: T;
};
export interface ComponentState {
    loading?: boolean;
    disabled?: boolean;
    error?: boolean;
    success?: boolean;
    warning?: boolean;
}
export interface LayoutProps {
    width?: string | number;
    height?: string | number;
    margin?: string | number;
    padding?: string | number;
    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
    zIndex?: number;
}
export interface EnterpriseComponentProps extends BaseComponentProps, ComponentEventHandlers, AccessibilityProps, ComponentState {
    id?: string;
    'data-testid'?: string;
    theme?: ThemeVariant;
    brandColor?: BrandColor;
    responsive?: boolean;
}
export interface FormComponentProps extends EnterpriseComponentProps {
    name?: string;
    required?: boolean;
    disabled?: boolean;
    readOnly?: boolean;
    error?: string | boolean;
    helperText?: string;
    label?: string;
}
export interface AnimationProps {
    animate?: boolean;
    duration?: number;
    easing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | string;
    delay?: number;
}
export type Merge<T, U> = Omit<T, keyof U> & U;
export type PartialBy<T, K extends keyof T> = Merge<T, Partial<Pick<T, K>>>;
export type RequiredBy<T, K extends keyof T> = Merge<T, Required<Pick<T, K>>>;
export type ButtonRef = React.ElementRef<'button'>;
export type DialogRef = React.ElementRef<'div'>;
export type SelectRef = React.ElementRef<'button'>;
export type LabelRef = React.ElementRef<'label'>;
export type TabsRef = React.ElementRef<'div'>;