@react-devtools-plus/ui 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,664 @@
+import { ButtonHTMLAttributes } from 'react';
+import { CSSProperties } from 'react';
+import { FC } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SelectHTMLAttributes } from 'react';
+
+/**
+ * Apply theme to DOM
+ * 将主题应用到DOM
+ */
+export declare function applyTheme(theme: Theme): void;
+
+export declare const Badge: FC<BadgeProps>;
+
+export declare interface BadgeProps {
+    /**
+     * Badge content
+     */
+    children?: ReactNode;
+    /**
+     * Badge count or text
+     */
+    count?: number | string;
+    /**
+     * Show dot instead of count
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Max count to display
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Badge color
+     * @default 'primary'
+     */
+    color?: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    /**
+     * Badge size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Show zero count
+     * @default false
+     */
+    showZero?: boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: CSSProperties;
+}
+
+/**
+ * Design tokens for border radius
+ * 圆角设计令牌
+ */
+export declare const borderRadius: {
+    none: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    full: string;
+};
+
+export declare const Button: FC<ButtonProps>;
+
+export declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * Button content
+     */
+    children?: ReactNode;
+    /**
+     * Button type
+     * @default 'button'
+     */
+    htmlType?: 'button' | 'submit' | 'reset';
+    /**
+     * Button variant
+     * @default 'default'
+     */
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'ghost' | 'text';
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Block level button
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Icon before content
+     */
+    icon?: ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: CSSProperties;
+}
+
+export declare const Card: FC<CardProps>;
+
+export declare interface CardProps {
+    /**
+     * Card title
+     */
+    title?: string;
+    /**
+     * Card content
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Show border
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Hoverable effect
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * Card padding size
+     * @default 'md'
+     */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Custom styles
+     */
+    style?: CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+}
+
+/**
+ * Color palette with shades from 50 to 950
+ */
+export declare interface ColorPalette {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+}
+
+/**
+ * Create theme from configuration
+ * 根据配置创建完整主题
+ */
+export declare function createTheme(config?: ThemeConfig): Theme;
+
+/**
+ * Detect system dark mode preference
+ * 检测系统暗黑模式偏好
+ */
+export declare function detectSystemDarkMode(): boolean;
+
+/**
+ * Generate a color palette from a base color
+ * 基于基础色生成完整的色板（50-950）
+ */
+export declare function generateColorPalette(baseColor: string): {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+};
+
+/**
+ * Generate CSS variables from color palette
+ * 从色板生成CSS变量
+ */
+export declare function generateCSSVariables(colors: Record<string, ColorPalette>, neutral: ColorPalette, mode: 'light' | 'dark'): Record<string, string>;
+
+/**
+ * Generate neutral colors (gray scale)
+ * 生成中性色（灰阶）
+ */
+export declare function generateNeutralColors(isDark?: boolean): {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+};
+
+/**
+ * Generate semantic colors from primary color
+ * 基于主题色生成语义化颜色
+ */
+export declare function generateSemanticColors(primaryColor: string): {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    success: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    warning: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    error: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    info: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+};
+
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    /**
+     * Input size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Input status
+     */
+    status?: 'error' | 'warning' | 'success';
+    /**
+     * Prefix icon or text
+     */
+    prefix?: ReactNode;
+    /**
+     * Suffix icon or text
+     */
+    suffix?: ReactNode;
+    /**
+     * Allow clear
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * Clear callback
+     */
+    onClear?: () => void;
+    /**
+     * Full width
+     * @default false
+     */
+    block?: boolean;
+}
+
+/**
+ * Preset color themes
+ * 预设的主题色
+ */
+export declare const PRESET_COLORS: {
+    react: string;
+    blue: string;
+    green: string;
+    purple: string;
+    pink: string;
+    orange: string;
+    red: string;
+    yellow: string;
+    teal: string;
+    indigo: string;
+};
+
+/**
+ * Get preset color or custom color
+ * 获取预设颜色或自定义颜色
+ */
+export declare function resolveThemeColor(color: string): string;
+
+/**
+ * Resolve theme mode (auto -> light/dark)
+ * 解析主题模式
+ */
+export declare function resolveThemeMode(mode: ThemeMode): 'light' | 'dark';
+
+export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>;
+
+export declare interface SelectOption {
+    label: string;
+    value: string | number;
+}
+
+export declare interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange' | 'size'> {
+    options?: SelectOption[];
+    onChange?: (value: string) => void;
+    value?: string | number;
+    size?: SelectSize;
+}
+
+export declare type SelectSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Design tokens for shadows
+ * 阴影设计令牌
+ */
+export declare const shadows: {
+    none: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    inner: string;
+};
+
+/**
+ * Design tokens for spacing
+ * 间距设计令牌
+ */
+export declare const spacing: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    10: string;
+    12: string;
+    16: string;
+    20: string;
+    24: string;
+};
+
+export declare const Switch: FC<SwitchProps>;
+
+export declare interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    size?: SwitchSize;
+}
+
+export declare type SwitchSize = 'sm' | 'md' | 'lg';
+
+export declare const Tag: FC<TagProps>;
+
+export declare type TagColor = 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+
+export declare interface TagProps {
+    children?: ReactNode;
+    color?: TagColor;
+    variant?: TagVariant;
+    size?: TagSize;
+    closable?: boolean;
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLSpanElement | HTMLButtonElement>) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+
+export declare type TagSize = 'sm' | 'md';
+
+export declare type TagVariant = 'solid' | 'outline';
+
+/**
+ * Complete theme object
+ */
+export declare interface Theme {
+    mode: 'light' | 'dark';
+    colors: {
+        primary: ColorPalette;
+        success: ColorPalette;
+        warning: ColorPalette;
+        error: ColorPalette;
+        info: ColorPalette;
+        neutral: ColorPalette;
+    };
+    spacing: Record<string, string>;
+    borderRadius: Record<string, string>;
+    shadows: Record<string, string>;
+    typography: {
+        fontFamily: Record<string, string>;
+        fontSize: Record<string, string>;
+        fontWeight: Record<string, string>;
+        lineHeight: Record<string, string>;
+    };
+    transitions: {
+        duration: Record<string, string>;
+        timing: Record<string, string>;
+    };
+    zIndex: Record<string, number>;
+    cssVars: Record<string, string>;
+}
+
+/**
+ * Theme configuration
+ */
+export declare interface ThemeConfig {
+    /**
+     * Theme mode
+     * @default 'auto'
+     */
+    mode?: ThemeMode;
+    /**
+     * Primary color (preset name or hex color)
+     * @default 'react' (#61dafb)
+     */
+    primaryColor?: string;
+    /**
+     * Custom color palettes
+     */
+    colors?: {
+        primary?: Partial<ColorPalette>;
+        success?: Partial<ColorPalette>;
+        warning?: Partial<ColorPalette>;
+        error?: Partial<ColorPalette>;
+        info?: Partial<ColorPalette>;
+    };
+}
+
+/**
+ * Theme context
+ */
+declare interface ThemeContextValue {
+    theme: Theme;
+    config: ThemeConfig;
+    setMode: (mode: ThemeMode) => void;
+    setPrimaryColor: (color: string) => void;
+    toggleMode: (event?: React.MouseEvent) => void;
+}
+
+/**
+ * Theme mode
+ */
+export declare type ThemeMode = 'light' | 'dark' | 'auto';
+
+/**
+ * Theme Provider Component
+ */
+export declare const ThemeProvider: FC<ThemeProviderProps>;
+
+/**
+ * Theme Provider Props
+ */
+export declare interface ThemeProviderProps {
+    children: ReactNode;
+    config?: ThemeConfig;
+    /**
+     * Storage key for persisting theme config
+     * @default 'react-devtools-theme'
+     */
+    storageKey?: string;
+}
+
+/**
+ * Design tokens for transitions
+ * 过渡动画设计令牌
+ */
+export declare const transitions: {
+    duration: {
+        fast: string;
+        base: string;
+        slow: string;
+        slower: string;
+    };
+    timing: {
+        linear: string;
+        ease: string;
+        easeIn: string;
+        easeOut: string;
+        easeInOut: string;
+        smoothSpring: string;
+        softExit: string;
+    };
+};
+
+/**
+ * Design tokens for typography
+ * 字体设计令牌
+ */
+export declare const typography: {
+    fontFamily: {
+        sans: string;
+        mono: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    fontWeight: {
+        thin: string;
+        light: string;
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+        extrabold: string;
+    };
+    lineHeight: {
+        tight: string;
+        snug: string;
+        normal: string;
+        relaxed: string;
+        loose: string;
+    };
+};
+
+/**
+ * Use theme hook
+ */
+export declare function useTheme(): ThemeContextValue;
+
+/**
+ * Use theme colors hook
+ */
+export declare function useThemeColors(): {
+    primary: ColorPalette;
+    success: ColorPalette;
+    warning: ColorPalette;
+    error: ColorPalette;
+    info: ColorPalette;
+    neutral: ColorPalette;
+};
+
+/**
+ * Use theme mode hook
+ */
+export declare function useThemeMode(): {
+    mode: "light" | "dark";
+    setMode: (mode: ThemeMode) => void;
+    toggleMode: (event?: React.MouseEvent) => void;
+};
+
+/**
+ * Watch system dark mode changes
+ * 监听系统暗黑模式变化
+ */
+export declare function watchSystemDarkMode(callback: (isDark: boolean) => void): () => void;
+
+/**
+ * Design tokens for z-index
+ * 层级设计令牌
+ */
+export declare const zIndex: {
+    base: number;
+    dropdown: number;
+    sticky: number;
+    fixed: number;
+    modalBackdrop: number;
+    modal: number;
+    popover: number;
+    tooltip: number;
+};
+
+export { }