@react-component-library-nlxx/components 1.0.1

package/dist/index.d.mts

@@ -0,0 +1,220 @@
+import React$1, { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Observable } from "rxjs";
+
+//#region src/Button/interface.d.ts
+type ButtonSize = 'small' | 'medium' | 'large';
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+type ButtonShape = 'default' | 'round' | 'circle';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** 按钮内容 */
+  children?: ReactNode;
+  /** 按钮尺寸 */
+  size?: ButtonSize;
+  /** 按钮变体 */
+  variant?: ButtonVariant;
+  /** 按钮形状 */
+  shape?: ButtonShape;
+  /** 是否加载中 */
+  loading?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 是否块级按钮 */
+  block?: boolean;
+  /** 图标 */
+  icon?: ReactNode;
+  /** 图标位置 */
+  iconPosition?: 'left' | 'right';
+}
+//#endregion
+//#region src/Button/index.d.ts
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/Input/interface.d.ts
+/**
+ * 暴露给父组件的方法接口
+ */
+interface InputRef {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  getValue: () => string | undefined;
+}
+interface InputProps {
+  name?: string;
+  placeholder?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  clearable?: boolean;
+  onClear?: () => void;
+}
+//#endregion
+//#region src/Input/index.d.ts
+/**
+ * 非受控组件将状态交给 DOM 自己管理
+ *  - 子组件：通过 forwardRef 接收 ref，并将其附加到内部的 input 元素，通过 ref 调用 clear()、直接操作 DOM（不推荐）。
+ *
+ * 受控组件将状态
+ *  - 动态更新值，应采用受控模式（即使用 value 和 onChange）
+ */
+declare const Input: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<InputRef>>>;
+//#endregion
+//#region src/SearchInput/interface.d.ts
+interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /** 防抖延迟(ms) */
+  debounceTime?: number;
+  /** 最小搜索长度 */
+  minSearchLength?: number;
+  /** 搜索回调 */
+  onSearch?: (value: string) => void;
+  /** 搜索结果流 */
+  searchResults$?: Observable<string[]>;
+  /** 是否显示下拉建议 */
+  showSuggestions?: boolean;
+}
+//#endregion
+//#region src/SearchInput/index.d.ts
+declare const SearchInput: React$1.FC<SearchInputProps>;
+//#endregion
+//#region src/Card/interface.d.ts
+interface CardProps {
+  /** 卡片标题 */
+  title?: ReactNode;
+  /** 卡片额外内容（右上角） */
+  extra?: ReactNode;
+  /** 卡片内容 */
+  children?: ReactNode;
+  /** 是否显示边框 */
+  bordered?: boolean;
+  /** 是否显示阴影 */
+  shadow?: boolean | 'hover' | 'always';
+  /** 卡片尺寸 */
+  size?: 'small' | 'default' | 'large';
+  /** 是否可悬停 */
+  hoverable?: boolean;
+  /** 卡片封面 */
+  cover?: ReactNode;
+  /** 卡片操作组 */
+  actions?: ReactNode[];
+  /** 加载状态 */
+  loading?: boolean;
+  /** 点击回调 */
+  onClick?: () => void;
+  /** 自定义样式 */
+  className?: string;
+}
+//#endregion
+//#region src/Card/index.d.ts
+declare const Card: React$1.FC<CardProps>;
+//#endregion
+//#region src/VirtualList/interface.d.ts
+/**
+ * 虚拟列表组件的属性接口
+ * @template T 列表项的数据类型
+ */
+interface VirtualListProps<T = any> {
+  /** 数据源数组 */
+  data: T[];
+  /** 渲染每个列表项的函数，接收当前项和索引，返回 React 节点 */
+  renderItem: (item: T, index: number) => ReactNode;
+  /** 每个列表项的固定高度（像素） */
+  itemHeight: number;
+  /** 容器可视区域高度（像素） */
+  height: number;
+  /** 可视区域上下额外渲染的项数，用于缓冲，默认为 3 */
+  overscan?: number;
+  /** 获取列表项唯一键的函数，默认使用索引 */
+  keyExtractor?: (item: T, index: number) => string;
+}
+//#endregion
+//#region src/VirtualList/index.d.ts
+declare function VirtualList<T>({
+  data,
+  renderItem,
+  itemHeight,
+  height,
+  overscan,
+  keyExtractor
+}: VirtualListProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/hooks/useDebounce.d.ts
+/**
+ * 对传入的值进行防抖处理
+ * @param value 需要防抖的值
+ * @param delay 延迟时间（毫秒），默认 300ms
+ * @returns 防抖后的值
+ */
+declare function useDebounce<T>(value: T, delay?: number): T;
+//#endregion
+//#region src/hooks/useObservable.d.ts
+declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
+//#endregion
+//#region ../theme/src/tokens.d.ts
+interface ThemeTokens {
+  colors: {
+    primary: string;
+    secondary: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    background: string;
+    text: {
+      primary: string;
+      secondary: string;
+      disabled: string;
+    };
+    border: string;
+  };
+  spacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+  };
+  typography: {
+    fontSize: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+    };
+    fontWeight: {
+      normal: number;
+      medium: number;
+      bold: number;
+    };
+  };
+  borderRadius: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    round: string;
+  };
+  shadows: {
+    sm: string;
+    md: string;
+    lg: string;
+  };
+  transitions: {
+    fast: string;
+    normal: string;
+    slow: string;
+  };
+}
+//#endregion
+//#region ../theme/src/index.d.ts
+declare const useTheme: () => ThemeTokens;
+interface ThemeProviderProps {
+  theme?: Partial<ThemeTokens>;
+  children: React$1.ReactNode;
+}
+declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
+//#endregion
+export { Button, Card, Input, SearchInput, ThemeProvider, VirtualList, useDebounce, useObservable, useTheme };

package/dist/index.d.ts

@@ -0,0 +1,220 @@
+import React$1, { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+import { Observable } from "rxjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/Button/interface.d.ts
+type ButtonSize = 'small' | 'medium' | 'large';
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+type ButtonShape = 'default' | 'round' | 'circle';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** 按钮内容 */
+  children?: ReactNode;
+  /** 按钮尺寸 */
+  size?: ButtonSize;
+  /** 按钮变体 */
+  variant?: ButtonVariant;
+  /** 按钮形状 */
+  shape?: ButtonShape;
+  /** 是否加载中 */
+  loading?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 是否块级按钮 */
+  block?: boolean;
+  /** 图标 */
+  icon?: ReactNode;
+  /** 图标位置 */
+  iconPosition?: 'left' | 'right';
+}
+//#endregion
+//#region src/Button/index.d.ts
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/Input/interface.d.ts
+/**
+ * 暴露给父组件的方法接口
+ */
+interface InputRef {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  getValue: () => string | undefined;
+}
+interface InputProps {
+  name?: string;
+  placeholder?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  clearable?: boolean;
+  onClear?: () => void;
+}
+//#endregion
+//#region src/Input/index.d.ts
+/**
+ * 非受控组件将状态交给 DOM 自己管理
+ *  - 子组件：通过 forwardRef 接收 ref，并将其附加到内部的 input 元素，通过 ref 调用 clear()、直接操作 DOM（不推荐）。
+ *
+ * 受控组件将状态
+ *  - 动态更新值，应采用受控模式（即使用 value 和 onChange）
+ */
+declare const Input: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<InputRef>>>;
+//#endregion
+//#region src/SearchInput/interface.d.ts
+interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /** 防抖延迟(ms) */
+  debounceTime?: number;
+  /** 最小搜索长度 */
+  minSearchLength?: number;
+  /** 搜索回调 */
+  onSearch?: (value: string) => void;
+  /** 搜索结果流 */
+  searchResults$?: Observable<string[]>;
+  /** 是否显示下拉建议 */
+  showSuggestions?: boolean;
+}
+//#endregion
+//#region src/SearchInput/index.d.ts
+declare const SearchInput: React$1.FC<SearchInputProps>;
+//#endregion
+//#region src/Card/interface.d.ts
+interface CardProps {
+  /** 卡片标题 */
+  title?: ReactNode;
+  /** 卡片额外内容（右上角） */
+  extra?: ReactNode;
+  /** 卡片内容 */
+  children?: ReactNode;
+  /** 是否显示边框 */
+  bordered?: boolean;
+  /** 是否显示阴影 */
+  shadow?: boolean | 'hover' | 'always';
+  /** 卡片尺寸 */
+  size?: 'small' | 'default' | 'large';
+  /** 是否可悬停 */
+  hoverable?: boolean;
+  /** 卡片封面 */
+  cover?: ReactNode;
+  /** 卡片操作组 */
+  actions?: ReactNode[];
+  /** 加载状态 */
+  loading?: boolean;
+  /** 点击回调 */
+  onClick?: () => void;
+  /** 自定义样式 */
+  className?: string;
+}
+//#endregion
+//#region src/Card/index.d.ts
+declare const Card: React$1.FC<CardProps>;
+//#endregion
+//#region src/VirtualList/interface.d.ts
+/**
+ * 虚拟列表组件的属性接口
+ * @template T 列表项的数据类型
+ */
+interface VirtualListProps<T = any> {
+  /** 数据源数组 */
+  data: T[];
+  /** 渲染每个列表项的函数，接收当前项和索引，返回 React 节点 */
+  renderItem: (item: T, index: number) => ReactNode;
+  /** 每个列表项的固定高度（像素） */
+  itemHeight: number;
+  /** 容器可视区域高度（像素） */
+  height: number;
+  /** 可视区域上下额外渲染的项数，用于缓冲，默认为 3 */
+  overscan?: number;
+  /** 获取列表项唯一键的函数，默认使用索引 */
+  keyExtractor?: (item: T, index: number) => string;
+}
+//#endregion
+//#region src/VirtualList/index.d.ts
+declare function VirtualList<T>({
+  data,
+  renderItem,
+  itemHeight,
+  height,
+  overscan,
+  keyExtractor
+}: VirtualListProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/hooks/useDebounce.d.ts
+/**
+ * 对传入的值进行防抖处理
+ * @param value 需要防抖的值
+ * @param delay 延迟时间（毫秒），默认 300ms
+ * @returns 防抖后的值
+ */
+declare function useDebounce<T>(value: T, delay?: number): T;
+//#endregion
+//#region src/hooks/useObservable.d.ts
+declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
+//#endregion
+//#region ../theme/src/tokens.d.ts
+interface ThemeTokens {
+  colors: {
+    primary: string;
+    secondary: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    background: string;
+    text: {
+      primary: string;
+      secondary: string;
+      disabled: string;
+    };
+    border: string;
+  };
+  spacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+  };
+  typography: {
+    fontSize: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+    };
+    fontWeight: {
+      normal: number;
+      medium: number;
+      bold: number;
+    };
+  };
+  borderRadius: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    round: string;
+  };
+  shadows: {
+    sm: string;
+    md: string;
+    lg: string;
+  };
+  transitions: {
+    fast: string;
+    normal: string;
+    slow: string;
+  };
+}
+//#endregion
+//#region ../theme/src/index.d.ts
+declare const useTheme: () => ThemeTokens;
+interface ThemeProviderProps {
+  theme?: Partial<ThemeTokens>;
+  children: React$1.ReactNode;
+}
+declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
+//#endregion
+export { Button, Card, Input, SearchInput, ThemeProvider, VirtualList, useDebounce, useObservable, useTheme };