@aozi6666/bee-design 0.1.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/build/App.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import './styles/index.scss';
+declare const App: FC;
+export default App;

package/build/App.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './styles/index.scss';
+import Button from './components/Button/button';
+import { ButtonType } from './components/Button/button.types';
+import Upload from './components/Upload';
+import Icon from './components/Icon';
+import Progress from './components/Progress';
+import AutoComplete from './components/AutoComplete';
+const App = () => {
+    const defaultUploadList = [
+        {
+            uid: '1',
+            size: 1024,
+            name: '已上传文件.png',
+            status: 'success',
+            percent: 100,
+        },
+        {
+            uid: '2',
+            size: 2048,
+            name: '上传中文件.jpg',
+            status: 'uploading',
+            percent: 40,
+        },
+    ];
+    const lakersWithNumber = [
+        { value: 'bradley', number: 11 },
+        { value: 'pope', number: 1 },
+        { value: 'caruso', number: 4 },
+        { value: 'cook', number: 2 },
+        { value: 'cousins', number: 15 },
+        { value: 'james', number: 23 },
+        { value: 'AD', number: 3 },
+        { value: 'green', number: 14 },
+        { value: 'howard', number: 39 },
+        { value: 'kuzma', number: 0 },
+    ];
+    const handleAutoCompleteFetch = (query) => {
+        return lakersWithNumber.filter((player) => player.value.toLowerCase().includes(query.toLowerCase()));
+    };
+    return (_jsx("div", { style: {
+            minHeight: '100vh',
+            padding: '40px 24px 80px',
+            background: 'radial-gradient(circle at top left, #f0f5ff 0, transparent 50%), radial-gradient(circle at bottom right, #fff1f0 0, transparent 55%)',
+            fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif',
+        }, children: _jsxs("div", { style: {
+                maxWidth: 960,
+                margin: '0 auto',
+            }, children: [_jsxs("header", { style: {
+                        marginBottom: 32,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 16,
+                    }, children: [_jsxs("div", { children: [_jsx("h1", { style: { margin: 0, fontSize: 28 }, children: "Cream Design \u7EC4\u4EF6\u5E93" }), _jsx("p", { style: { margin: '8px 0 0', color: '#595959', fontSize: 14 }, children: "\u4E00\u5957\u7528\u6765\u7EC3\u4E60 React + TypeScript \u7684\u8F7B\u91CF\u7EC4\u4EF6\u793A\u4F8B\u3002" })] }), _jsxs("div", { style: { display: 'flex', gap: 12 }, children: [_jsx(Button, { btnType: ButtonType.Primary, children: "\u67E5\u770B\u6587\u6863" }), _jsx(Button, { btnType: ButtonType.Default, children: "Git \u4ED3\u5E93" })] })] }), _jsxs("main", { style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)',
+                        gap: 24,
+                        alignItems: 'flex-start',
+                    }, children: [_jsxs("section", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 24,
+                            }, children: [_jsxs("div", { style: {
+                                        padding: 24,
+                                        borderRadius: 12,
+                                        background: '#ffffff',
+                                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
+                                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "Button \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: "\u4E0D\u540C\u7C7B\u578B\u6309\u94AE\u548C\u94FE\u63A5\u6309\u94AE\uFF0C\u9002\u5408\u4F5C\u4E3A\u9875\u9762\u4E3B\u64CD\u4F5C\u3001\u6B21\u8981\u64CD\u4F5C\u548C\u6587\u672C\u94FE\u63A5\u3002" }), _jsxs("div", { style: {
+                                                display: 'flex',
+                                                flexWrap: 'wrap',
+                                                gap: 12,
+                                            }, children: [_jsx(Button, { btnType: ButtonType.Primary, children: "Primary Button" }), _jsx(Button, { btnType: ButtonType.Default, children: "Default Button" }), _jsx(Button, { btnType: ButtonType.Danger, children: "Danger Button" }), _jsx(Button, { btnType: ButtonType.Link, href: "https://www.baidu.com/", children: "Link \u767E\u5EA6" }), _jsx(Button, { btnType: ButtonType.Link, href: "https://www.baidu.com/", target: "_blank", children: "Link \u767E\u5EA6(\"\u65B0\u7A97\u53E3\u6253\u5F00\")" })] })] }), _jsxs("div", { style: {
+                                        padding: 24,
+                                        borderRadius: 12,
+                                        background: '#ffffff',
+                                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
+                                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "Upload \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: "\u652F\u6301\u70B9\u51FB\u9009\u62E9\u3001\u62D6\u62FD\u4E0A\u4F20\u3001\u4E0A\u4F20\u8FDB\u5EA6\u663E\u793A\u548C\u6587\u4EF6\u5217\u8868\u7BA1\u7406\u3002" }), _jsxs("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                gap: 16,
+                                                alignItems: 'stretch',
+                                            }, children: [_jsx(Upload, { action: "https://jsonplaceholder.typicode.com/posts", defaultFileList: defaultUploadList, children: _jsx(Button, { btnType: ButtonType.Primary, children: "\u70B9\u51FB\u4E0A\u4F20" }) }), _jsx(Upload, { action: "https://jsonplaceholder.typicode.com/posts", drag: true, children: _jsx("div", { style: {
+                                                            padding: '20px 40px',
+                                                            border: '1px dashed #d9d9d9',
+                                                            borderRadius: 4,
+                                                            textAlign: 'center',
+                                                            color: '#595959',
+                                                            background: '#fafafa',
+                                                        }, children: "\u62D6\u62FD\u6587\u4EF6\u5230\u6B64\u5904\uFF0C\u6216\u70B9\u51FB\u4E0A\u4F20" }) })] })] })] }), _jsxs("section", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 24,
+                            }, children: [_jsxs("div", { style: {
+                                        padding: 24,
+                                        borderRadius: 12,
+                                        background: '#ffffff',
+                                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
+                                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "Icon \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: "\u57FA\u4E8E Font Awesome \u7684\u56FE\u6807\u7EC4\u4EF6\uFF0C\u652F\u6301\u4E3B\u9898\u8272\u548C\u6240\u6709\u539F\u751F\u5C5E\u6027\u3002" }), _jsxs("div", { style: {
+                                                display: 'flex',
+                                                flexWrap: 'wrap',
+                                                gap: 20,
+                                                alignItems: 'center',
+                                            }, children: [_jsx(Icon, { icon: "coffee", size: "2x" }), _jsx(Icon, { icon: "check-circle", size: "2x", theme: "success" }), _jsx(Icon, { icon: "times", size: "2x", theme: "danger" }), _jsx(Icon, { icon: "spinner", size: "2x", spin: true, theme: "primary" })] })] }), _jsxs("div", { style: {
+                                        padding: 24,
+                                        borderRadius: 12,
+                                        background: '#ffffff',
+                                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
+                                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "Progress \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: "\u5C55\u793A\u4EFB\u52A1\u5B8C\u6210\u8FDB\u5EA6\uFF0C\u652F\u6301\u4E0D\u540C\u4E3B\u9898\u989C\u8272\u548C\u9AD8\u5EA6\u3002" }), _jsxs("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                gap: 12,
+                                            }, children: [_jsx(Progress, { percent: 30 }), _jsx(Progress, { percent: 65, theme: "success" }), _jsx(Progress, { percent: 90, theme: "danger", strokeHeight: 10 })] })] }), _jsxs("div", { style: {
+                                        padding: 24,
+                                        borderRadius: 12,
+                                        background: '#ffffff',
+                                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
+                                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "AutoComplete \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: "\u8F93\u5165\u5185\u5BB9\u81EA\u52A8\u7ED9\u51FA\u5019\u9009\u9879\uFF0C\u652F\u6301\u952E\u76D8\u9009\u62E9\u4E0E\u81EA\u5B9A\u4E49\u4E0B\u62C9\u6E32\u67D3\u3002" }), _jsx(AutoComplete, { fetchSuggestions: handleAutoCompleteFetch, placeholder: "\u8F93\u5165\u6E56\u4EBA\u961F\u7403\u5458\u82F1\u6587\u540D\u8BD5\u8BD5\uFF08\u5982\uFF1Aja / co\uFF09", renderOption: (item) => {
+                                                const player = item;
+                                                return (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', gap: 12 }, children: [_jsx("b", { children: player.value }), _jsxs("span", { style: { color: '#8c8c8c' }, children: ["#", player.number] })] }));
+                                            } })] })] })] }), _jsxs("div", { style: {
+                        marginTop: 40,
+                        padding: 24,
+                        borderRadius: 12,
+                        background: '#ffffff',
+                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
+                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "\u539F\u751F\u8868\u5355\u4E0A\u4F20\u793A\u4F8B" }), _jsxs("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: ["\u4F7F\u7528\u539F\u751F ", _jsx("code", { children: "<form>" }), " \u63D0\u4EA4\u5230\u540E\u7AEF\u63A5\u53E3\u7684\u6587\u4EF6\u4E0A\u4F20\u65B9\u5F0F\u3002"] }), _jsxs("form", { method: "post", encType: "multipart/form-data", action: "https://jsonplaceholder.typicode.com/posts", style: { marginTop: 8 }, children: [_jsx("input", { type: "file", name: "myFile" }), _jsx("button", { type: "submit", style: {
+                                        marginLeft: 12,
+                                        padding: '4px 12px',
+                                        borderRadius: 4,
+                                        border: '1px solid #1677ff',
+                                        background: '#1677ff',
+                                        color: '#fff',
+                                        cursor: 'pointer',
+                                    }, children: "Submit" })] })] })] }) }));
+};
+export default App;

package/build/components/AutoComplete/autoComplete.d.ts

@@ -0,0 +1,13 @@
+import type { AutoCompleteProps } from './autoComplete.types';
+export type { AutoCompleteProps, DataSourceType } from './autoComplete.types';
+/**
+ * 输入框自动完成功能。当输入值需要自动完成时使用，支持同步和异步两种方式
+ * 支持 Input 组件的所有属性 支持键盘事件选择
+ * ### 引用方法
+ *
+ * ~~~js
+ * import { AutoComplete } from 'vikingship'
+ * ~~~
+ */
+export declare const AutoComplete: (props: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
+export default AutoComplete;

package/build/components/AutoComplete/autoComplete.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// AutoComplete 组件： 带搜索建议的 Input
+import { useState, useEffect, useRef } from 'react';
+import Input from '../Input/input';
+import useDebounce from '../../hooks/useDebounce';
+import useClickOutside from '../../hooks/useClickOutside';
+import AutoCompleteDropdown from './autoCompleteDropdown';
+/**
+ * 输入框自动完成功能。当输入值需要自动完成时使用，支持同步和异步两种方式
+ * 支持 Input 组件的所有属性 支持键盘事件选择
+ * ### 引用方法
+ *
+ * ~~~js
+ * import { AutoComplete } from 'vikingship'
+ * ~~~
+ */
+export const AutoComplete = (props) => {
+    const { fetchSuggestions, onSelect, onChange, value, renderOption, ...restProps } = props;
+    // 输入框当前显示的文本
+    const [inputValue, setInputValue] = useState(value || '');
+    // 下拉建议列表的数据源（渲染 `<li>` 就靠它）
+    const [suggestions, setSugestions] = useState([]);
+    // 异步请求进行中就显示 loading
+    const [loading, setLoading] = useState(false);
+    // 是否展示下拉（配合 `Transition` 动画）
+    const [showDropdown, setShowDropdown] = useState(false);
+    // 键盘上下选择时，哪一项高亮（对应 class `is-active`）
+    const [highlightIndex, setHighlightIndex] = useState(-1);
+    // 两个关键 ref：
+    // 用来区分“用户打字触发搜索” vs “用户选中后把值塞回去（不应该再搜一次）”
+    const triggerSearch = useRef(false);
+    // 挂到最外层 div 上，给 `useClickOutside` 判断“点击是否发生在组件外”
+    const componentRef = useRef(null);
+    // 防抖Hook：把“频繁输入”变成“停顿后再触发一次”
+    const debouncedValue = useDebounce(inputValue, 300);
+    // 自定义Hook：点击组件外部时关闭下拉
+    /* 在 `document` 上挂一个 `click` 监听
+     * @param componentRef 组件的 ref
+     * @param callback 点击外部时执行的回调
+     */
+    useClickOutside(componentRef, () => {
+        setSugestions([]);
+        setShowDropdown(false);
+    });
+    // 监听 `debouncedValue` 变化
+    useEffect(() => {
+        if (debouncedValue && triggerSearch.current) {
+            setSugestions([]);
+            const results = fetchSuggestions(debouncedValue);
+            if (results instanceof Promise) {
+                setLoading(true);
+                results.then(data => {
+                    setLoading(false);
+                    setSugestions(data);
+                    setShowDropdown(data.length > 0);
+                });
+            }
+            else {
+                setSugestions(results);
+                setShowDropdown(results.length > 0);
+            }
+        }
+        else {
+            setShowDropdown(false);
+        }
+        setHighlightIndex(-1);
+    }, [debouncedValue, fetchSuggestions]);
+    const highlight = (index) => {
+        if (index < 0)
+            index = 0;
+        if (index >= suggestions.length) {
+            index = suggestions.length - 1;
+        }
+        setHighlightIndex(index);
+    };
+    const handleKeyDown = (e) => {
+        switch (e.keyCode) {
+            case 13:
+                if (suggestions[highlightIndex]) {
+                    handleSelect(suggestions[highlightIndex]);
+                }
+                break;
+            case 38:
+                highlight(highlightIndex - 1);
+                break;
+            case 40:
+                highlight(highlightIndex + 1);
+                break;
+            case 27:
+                setShowDropdown(false);
+                break;
+            default:
+                break;
+        }
+    };
+    // 回调：消息框内容发生变化
+    const handleChange = (e) => {
+        // 获取 输入框内容 （去掉首尾空格）
+        const value = e.target.value.trim();
+        // 更新 输入框内容
+        // `inputValue` 变化 → 经过 `useDebounce` 得到 `debouncedValue`
+        setInputValue(value);
+        // 组件使用者传来的回调：消息框内容发生变化
+        if (onChange) {
+            onChange(value);
+        }
+        // 告诉后面“这次是用户输入，应当触发搜索”
+        triggerSearch.current = true;
+    };
+    // 回调：用户选中某一项
+    const handleSelect = (item) => {
+        setInputValue(item.value);
+        setShowDropdown(false);
+        if (onSelect) {
+            onSelect(item);
+        }
+        triggerSearch.current = false;
+    };
+    return (_jsxs("div", { className: "viking-auto-complete", ref: componentRef, children: [_jsx(Input, { ...restProps, value: inputValue, onChange: handleChange, onKeyDown: handleKeyDown }), _jsx(AutoCompleteDropdown, { loading: loading, showDropdown: showDropdown, suggestions: suggestions, highlightIndex: highlightIndex, onSelect: handleSelect, renderOption: renderOption, onExited: () => {
+                    setSugestions([]);
+                } })] }));
+};
+export default AutoComplete;

package/build/components/AutoComplete/autoComplete.types.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement } from 'react';
+import type { InputProps } from '../Input/input.types';
+interface DataSourceObject {
+    value: string;
+}
+export type DataSourceType<T = {}> = T & DataSourceObject;
+export interface AutoCompleteProps extends Omit<InputProps, 'onSelect' | 'onChange'> {
+    /**
+     * 返回输入建议的方法，可以拿到当前的输入，然后返回同步的数组或者是异步的 Promise
+     */
+    fetchSuggestions: (str: string) => DataSourceType[] | Promise<DataSourceType[]>;
+    /** 点击 选中建议项(点中/回车) 时触发的回调 */
+    onSelect?: (item: DataSourceType) => void;
+    /** 文本框发生改变 的时候触发的事件 */
+    onChange?: (value: string) => void;
+    /** 支持自定义 渲染 下拉项 的 UI，返回 ReactElement类型 */
+    renderOption?: (item: DataSourceType) => ReactElement;
+}
+export {};

package/build/components/AutoComplete/autoComplete.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/AutoComplete/autoCompleteDropdown.d.ts

@@ -0,0 +1,13 @@
+import type { FC, ReactElement } from 'react';
+import type { DataSourceType } from './autoComplete.types';
+export interface AutoCompleteDropdownProps {
+    loading: boolean;
+    showDropdown: boolean;
+    suggestions: DataSourceType[];
+    highlightIndex: number;
+    onSelect: (item: DataSourceType) => void;
+    renderOption?: (item: DataSourceType) => ReactElement;
+    onExited?: () => void;
+}
+export declare const AutoCompleteDropdown: FC<AutoCompleteDropdownProps>;
+export default AutoCompleteDropdown;

package/build/components/AutoComplete/autoCompleteDropdown.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import Icon from '../Icon/icon';
+import Transition from '../Transition/transition';
+export const AutoCompleteDropdown = (props) => {
+    const { loading, showDropdown, suggestions, highlightIndex, onSelect, renderOption, onExited, } = props;
+    const renderTemplate = (item) => {
+        return renderOption ? renderOption(item) : item.value;
+    };
+    return (_jsx(Transition, { in: showDropdown || loading, animation: "zoom-in-top", timeout: 300, onExited: onExited, children: _jsxs("ul", { className: "viking-suggestion-list", children: [loading && (_jsx("div", { className: "suggestions-loading-icon", children: _jsx(Icon, { icon: "spinner", spin: true }) })), suggestions.map((item, index) => {
+                    const cnames = classNames('suggestion-item', {
+                        'is-active': index === highlightIndex,
+                    });
+                    return (_jsx("li", { className: cnames, onClick: () => onSelect(item), children: renderTemplate(item) }, index));
+                })] }) }));
+};
+export default AutoCompleteDropdown;

package/build/components/AutoComplete/index.d.ts

@@ -0,0 +1,4 @@
+import AutoComplete from './autoComplete';
+export default AutoComplete;
+export * from './autoComplete';
+export type * from './autoComplete.types';

package/build/components/AutoComplete/index.js

@@ -0,0 +1,3 @@
+import AutoComplete from './autoComplete';
+export default AutoComplete;
+export * from './autoComplete';

package/build/components/Button/button.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import { ButtonSize, ButtonType, type AnchorButtonProps, type ButtonProps, type NativeButtonProps } from './button.types';
+declare const Button: FC<ButtonProps>;
+export default Button;
+export { ButtonSize, ButtonType };
+export type { ButtonProps, AnchorButtonProps, NativeButtonProps };

package/build/components/Button/button.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 第三方工具库： 自动智能拼接 class 字符串
+import classNames from 'classnames';
+import { ButtonSize, ButtonType, } from './button.types';
+const Button = ({ className, disabled = false, size, btnType = ButtonType.Default, children, href, ...restProps }) => {
+    // btn, btn-lg, btn-primary
+    // ① classNames 生成 class
+    /*
+    用户写：<Button btnType="primary" size="lg">
+    组件算出 class：btn btn-primary btn-lg
+    */
+    // 返回 字符串
+    const classes = classNames('btn', className, {
+        /*
+           外部传来 <Button btnType={ButtonType.Primary}>
+             -> 变成 { "btn-primary": true }
+             -> classNames 会加上: btn-primary
+             -> 最终变为 ： btn btn-primary
+        */
+        [`btn-${btnType}`]: btnType,
+        [`btn-${size}`]: size,
+        // 是 link 按钮 &&  disabled === true
+        // classNames 会加上: disabled
+        disabled: btnType === ButtonType.Link && disabled,
+    });
+    // ② 根据类型决定渲染：
+    /*
+    用户写：<Button btnType="link" href="https://xxx">
+    组件算出: <a class="btn btn-link">...</a>
+    */
+    if (btnType === ButtonType.Link && href) {
+        return (_jsx("a", { className: classes, href: href, ...restProps, children: children }));
+    }
+    /*
+    用户写：<Button btnType="primary">
+    组件算出: <button class="btn btn-primary">
+    */
+    return (_jsx("button", { className: classes, disabled: disabled, ...restProps, children: children }));
+};
+// 导出一个 React 组件函数
+export default Button;
+// 重新导出类型和枚举，方便测试等地方从 `./button` 统一导入
+export { ButtonSize, ButtonType };

package/build/components/Button/button.types.d.ts

@@ -0,0 +1,24 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+export declare const ButtonSize: {
+    readonly Large: "lg";
+    readonly Small: "sm";
+};
+export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
+export declare const ButtonType: {
+    readonly Primary: "primary";
+    readonly Default: "default";
+    readonly Danger: "danger";
+    readonly Link: "link";
+};
+export type ButtonType = (typeof ButtonType)[keyof typeof ButtonType];
+export interface BaseButtonProps {
+    className?: string;
+    disabled?: boolean;
+    size?: ButtonSize;
+    btnType?: ButtonType;
+    children?: ReactNode;
+    href?: string;
+}
+export type NativeButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
+export type AnchorButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

package/build/components/Button/button.types.js

@@ -0,0 +1,19 @@
+/* 定义 Button 组件可以接收哪些 props（组件 API） */
+// TS 导出 两个固定值 'lg' / 'sm'
+/*
+as const: 把 ButtonSize对象的值 变成不可修改的 字面量类型
+  - 如果没有 as const: Large: string
+  - 如果有 as const: Large: "lg"
+
+不写 as const: Large: 'lg' 会被 TS 自动推导为 string 类型
+*/
+export const ButtonSize = {
+    Large: 'lg',
+    Small: 'sm',
+};
+export const ButtonType = {
+    Primary: 'primary',
+    Default: 'default',
+    Danger: 'danger',
+    Link: 'link',
+};

package/build/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from './button';
+export default Button;

package/build/components/Button/index.js

@@ -0,0 +1,2 @@
+import Button from './button';
+export default Button;

package/build/components/Icon/icon.d.ts

@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+import type { IconProps } from './icon.types';
+/**
+ * 提供了一套常用的图标集合 基于 react-fontawesome。
+ *
+ * 支持 react-fontawesome的所有属性 可以在这里查询 https://github.com/FortAwesome/react-fontawesome#basic
+ *
+ * 支持 fontawesome 所有 free-solid-icons，可以在这里查看所有图标 https://fontawesome.com/icons?d=gallery&s=solid&m=free
+ * ### 引用方法
+ *
+ * ~~~js
+ * import { Icon } from 'vikingship'
+ * ~~~
+ */
+export declare const Icon: FC<IconProps>;
+export default Icon;

package/build/components/Icon/icon.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+/**
+ * 提供了一套常用的图标集合 基于 react-fontawesome。
+ *
+ * 支持 react-fontawesome的所有属性 可以在这里查询 https://github.com/FortAwesome/react-fontawesome#basic
+ *
+ * 支持 fontawesome 所有 free-solid-icons，可以在这里查看所有图标 https://fontawesome.com/icons?d=gallery&s=solid&m=free
+ * ### 引用方法
+ *
+ * ~~~js
+ * import { Icon } from 'vikingship'
+ * ~~~
+ */
+export const Icon = (props) => {
+    // icon-primary
+    const { className, theme, ...restProps } = props;
+    const classes = classNames('viking-icon', className, {
+        [`icon-${theme}`]: theme
+    });
+    return (_jsx(FontAwesomeIcon, { className: classes, ...restProps }));
+};
+export default Icon;

package/build/components/Icon/icon.types.d.ts

@@ -0,0 +1,6 @@
+import type { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+export type ThemeProps = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark';
+export interface IconProps extends FontAwesomeIconProps {
+    /** 支持框架主题，根据主题显示不同的颜色 */
+    theme?: ThemeProps;
+}

package/build/components/Icon/icon.types.js

@@ -0,0 +1,2 @@
+// Icon 组件的类型定义拆分到单独文件
+export {};

package/build/components/Icon/index.d.ts

@@ -0,0 +1,2 @@
+import Icon from './icon';
+export default Icon;

package/build/components/Icon/index.js

@@ -0,0 +1,2 @@
+import Icon from './icon';
+export default Icon;

package/build/components/Input/index.d.ts

@@ -0,0 +1,4 @@
+import Input from './input';
+export default Input;
+export { Input } from './input';
+export type * from './input.types';

package/build/components/Input/index.js

@@ -0,0 +1,3 @@
+import Input from './input';
+export default Input;
+export { Input } from './input';

package/build/components/Input/input.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { InputProps } from './input.types';
+export type { InputProps, InputSize } from './input.types';
+export declare const Input: FC<InputProps>;
+export default Input;

package/build/components/Input/input.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import classNames from 'classnames';
+import Icon from '../Icon/icon';
+export const Input = (props) => {
+    const { disabled, size, icon, prepend, append, style, onChange, ...restProps } = props;
+    const classes = useMemo(() => classNames('viking-input-wrapper', {
+        [`input-size-${size}`]: size,
+        'input-group': prepend || append,
+        'input-group-prepend': !!prepend,
+        'input-group-append': !!append,
+    }), [append, prepend, size]);
+    const inputClasses = classNames('viking-input-inner', {
+        'is-disabled': disabled,
+    });
+    const handleChange = (e) => {
+        if (onChange)
+            onChange(e);
+    };
+    const renderPrepend = () => {
+        if (!prepend)
+            return null;
+        return _jsx("div", { className: "viking-input-group-prepend", children: prepend });
+    };
+    const renderAppend = () => {
+        if (!append && !icon)
+            return null;
+        return (_jsxs("div", { className: "viking-input-group-append", children: [append, icon ? (_jsx("div", { className: "icon-wrapper", children: _jsx(Icon, { icon: icon }) })) : null] }));
+    };
+    return (_jsxs("div", { className: classes, style: style, children: [renderPrepend(), _jsx("input", { className: inputClasses, disabled: disabled, onChange: handleChange, ...restProps }), renderAppend()] }));
+};
+export default Input;