@zdyumath/react-ui 0.1.0

package/README.md

@@ -0,0 +1,132 @@
+# @your-scope/react-ui
+
+生产级 React 组件库模板，基于 Vite + TypeScript + CSS Modules。
+
+[![CI](https://github.com/your-username/react-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/your-username/react-ui/actions)
+[![npm version](https://img.shields.io/npm/v/@your-scope/react-ui)](https://www.npmjs.com/package/@your-scope/react-ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+## 安装
+
+```bash
+npm install @your-scope/react-ui
+# 或
+pnpm add @your-scope/react-ui
+# 或
+yarn add @your-scope/react-ui
+```
+
+**前置依赖（peerDependencies）：** React ≥ 17
+
+## 使用
+
+```tsx
+import { Button, Input } from '@your-scope/react-ui'
+import '@your-scope/react-ui/styles'  // 引入全局样式
+
+function App() {
+  return (
+    <>
+      <Button variant="primary" onClick={() => alert('clicked')}>
+        点击我
+      </Button>
+
+      <Input
+        label="邮箱"
+        required
+        placeholder="user@example.com"
+        helperText="我们不会分享你的邮箱"
+      />
+    </>
+  )
+}
+```
+
+## 组件文档
+
+### Button
+
+| Prop       | 类型                                              | 默认值      | 说明                     |
+| ---------- | ------------------------------------------------- | ----------- | ------------------------ |
+| variant    | `primary \| secondary \| outline \| ghost \| danger` | `primary`   | 按钮风格变体             |
+| size       | `sm \| md \| lg`                                  | `md`        | 按钮尺寸                 |
+| loading    | `boolean`                                         | `false`     | 加载状态（自动禁用）     |
+| fullWidth  | `boolean`                                         | `false`     | 是否撑满父容器           |
+| leftIcon   | `ReactNode`                                       | —           | 左侧图标                 |
+| rightIcon  | `ReactNode`                                       | —           | 右侧图标                 |
+| ...rest    | `ButtonHTMLAttributes`                            | —           | 透传给 `<button>` 的属性 |
+
+### Input
+
+| Prop         | 类型                | 默认值  | 说明                                 |
+| ------------ | ------------------- | ------- | ------------------------------------ |
+| size         | `sm \| md \| lg`    | `md`    | 输入框尺寸                           |
+| label        | `string`            | —       | 标签文字                             |
+| required     | `boolean`           | `false` | 是否必填                             |
+| errorMessage | `string`            | —       | 错误提示（传入后变为错误状态）       |
+| helperText   | `string`            | —       | 帮助提示（与 errorMessage 互斥）     |
+| prefixIcon   | `ReactNode`         | —       | 前置图标                             |
+| suffixIcon   | `ReactNode`         | —       | 后置图标                             |
+| ...rest      | `InputHTMLAttributes` | —     | 透传给 `<input>` 的属性              |
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动 Storybook 开发环境
+npm run storybook
+
+# 运行单元测试（watch 模式）
+npm run test:watch
+
+# 构建产物
+npm run build
+
+# 代码检查
+npm run lint
+```
+
+## 发布到 npm
+
+```bash
+# 1. 更新 package.json 中的 version
+npm version patch   # 0.1.0 → 0.1.1
+npm version minor   # 0.1.0 → 0.2.0
+npm version major   # 0.1.0 → 1.0.0
+
+# 2. 推送 tag，GitHub Actions 自动发布
+git push --follow-tags
+
+# 3. 或手动发布
+npm publish --access public
+```
+
+## 项目结构
+
+```
+.
+├── src/
+│   ├── components/
+│   │   ├── Button/         # 按钮组件
+│   │   │   ├── Button.tsx
+│   │   │   ├── Button.module.css
+│   │   │   ├── Button.test.tsx
+│   │   │   ├── Button.stories.tsx
+│   │   │   └── index.ts
+│   │   ├── Input/          # 输入框组件（结构同上）
+│   │   └── index.ts        # 统一导出入口
+│   ├── index.ts            # 库入口
+│   └── test-setup.ts       # 测试环境初始化
+├── .storybook/             # Storybook 配置
+├── .github/workflows/      # CI/CD 流水线
+├── dist/                   # 构建产物（不提交 Git）
+├── vite.config.ts
+├── tsconfig.json
+└── package.json
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),x=require("react"),b="_btn_1wxjz_2",k="_loading_1wxjz_97",N="_fullWidth_1wxjz_104",y="_spinner_1wxjz_109",I="_spin_1wxjz_109",n={btn:b,"size-sm":"_size-sm_1wxjz_27","size-md":"_size-md_1wxjz_34","size-lg":"_size-lg_1wxjz_38","variant-primary":"_variant-primary_1wxjz_46","variant-secondary":"_variant-secondary_1wxjz_59","variant-outline":"_variant-outline_1wxjz_68","variant-ghost":"_variant-ghost_1wxjz_77","variant-danger":"_variant-danger_1wxjz_86",loading:k,fullWidth:N,spinner:y,spin:I},j=x.forwardRef(({variant:c="primary",size:l="md",loading:a=!1,fullWidth:e=!1,leftIcon:r,rightIcon:t,children:_,className:d,disabled:p,...u},m)=>{const h=p||a,o=[n.btn,n[`size-${l}`],n[`variant-${c}`],a?n.loading:"",e?n.fullWidth:"",d??""].filter(Boolean).join(" ");return s.jsxs("button",{ref:m,className:o,disabled:h,"aria-busy":a,...u,children:[a?s.jsx("span",{className:n.spinner,"aria-hidden":"true"}):r,_,!a&&t]})});j.displayName="Button";const W="_wrapper_1mihk_2",g="_label_1mihk_10",B="_required_1mihk_17",q="_inputWrapper_1mihk_23",S="_input_1mihk_23",P="_error_1mihk_66",$="_prefixIcon_1mihk_81",R="_suffixIcon_1mihk_90",T="_hasPrefix_1mihk_100",C="_hasSuffix_1mihk_104",D="_helperText_1mihk_109",F="_errorMessage_1mihk_115",i={wrapper:W,label:g,required:B,inputWrapper:q,input:S,"size-sm":"_size-sm_1mihk_53","size-md":"_size-md_1mihk_57","size-lg":"_size-lg_1mihk_60",error:P,prefixIcon:$,suffixIcon:R,hasPrefix:T,hasSuffix:C,helperText:D,errorMessage:F},z=x.forwardRef(({size:c="md",label:l,required:a,errorMessage:e,helperText:r,prefixIcon:t,suffixIcon:_,className:d,id:p,...u},m)=>{const h=x.useId(),o=p??h,f=`${o}-desc`,w=[i.wrapper,i[`size-${c}`],e?i.error:""].filter(Boolean).join(" "),v=[i.inputWrapper,t?i.hasPrefix:"",_?i.hasSuffix:""].filter(Boolean).join(" ");return s.jsxs("div",{className:w,children:[l&&s.jsxs("label",{className:i.label,htmlFor:o,children:[l,a&&s.jsx("span",{className:i.required,"aria-hidden":"true",children:"*"})]}),s.jsxs("div",{className:v,children:[t&&s.jsx("span",{className:i.prefixIcon,"aria-hidden":"true",children:t}),s.jsx("input",{ref:m,id:o,className:[i.input,d??""].filter(Boolean).join(" "),"aria-required":a,"aria-invalid":!!e,"aria-describedby":e||r?f:void 0,...u}),_&&s.jsx("span",{className:i.suffixIcon,"aria-hidden":"true",children:_})]}),(e||r)&&s.jsx("span",{id:f,className:e?i.errorMessage:i.helperText,role:e?"alert":void 0,children:e??r})]})});z.displayName="Input";exports.Button=j;exports.Input=z;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/components/Button/Button.tsx","../src/components/Input/Input.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react'\nimport styles from './Button.module.css'\n\n// 组件支持的尺寸：sm(小) / md(中，默认) / lg(大)\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\n// 组件支持的风格变体\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** 按钮风格变体，默认 primary */\n  variant?: ButtonVariant\n  /** 按钮尺寸，默认 md */\n  size?: ButtonSize\n  /** 是否处于加载状态 */\n  loading?: boolean\n  /** 是否撑满父容器宽度 */\n  fullWidth?: boolean\n  /** 左侧图标（任意 ReactNode，建议使用 SVG 图标） */\n  leftIcon?: ReactNode\n  /** 右侧图标 */\n  rightIcon?: ReactNode\n}\n\n/**\n * Button 组件\n *\n * 支持 5 种视觉风格 × 3 种尺寸 × loading/disabled 状态。\n * 使用 forwardRef 以便父组件可以获取底层 <button> DOM 引用。\n *\n * @example\n * <Button variant=\"primary\" size=\"md\" onClick={handleClick}>\n *   提交\n * </Button>\n *\n * @example 加载状态\n * <Button loading leftIcon={<SaveIcon />}>保存</Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'md',\n      loading = false,\n      fullWidth = false,\n      leftIcon,\n      rightIcon,\n      children,\n      className,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isDisabled = disabled || loading\n\n    // 拼接 CSS Modules 类名\n    const classNames = [\n      styles.btn,\n      styles[`size-${size}`],\n      styles[`variant-${variant}`],\n      loading ? styles.loading : '',\n      fullWidth ? styles.fullWidth : '',\n      className ?? '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <button ref={ref} className={classNames} disabled={isDisabled} aria-busy={loading} {...rest}>\n        {/* 加载中时用 spinner 替换左侧图标 */}\n        {loading ? <span className={styles.spinner} aria-hidden=\"true\" /> : leftIcon}\n        {children}\n        {!loading && rightIcon}\n      </button>\n    )\n  },\n)\n\nButton.displayName = 'Button'\n","import { InputHTMLAttributes, ReactNode, forwardRef, useId } from 'react'\nimport styles from './Input.module.css'\n\nexport type InputSize = 'sm' | 'md' | 'lg'\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /** 输入框尺寸，默认 md */\n  size?: InputSize\n  /** 显示在上方的标签文字 */\n  label?: string\n  /** 是否必填（在 label 后显示红色 *） */\n  required?: boolean\n  /** 错误提示信息（传入后输入框变为错误状态） */\n  errorMessage?: string\n  /** 帮助提示文字（与 errorMessage 互斥，优先展示 errorMessage） */\n  helperText?: string\n  /** 前置图标（建议 16×16 SVG） */\n  prefixIcon?: ReactNode\n  /** 后置图标（建议 16×16 SVG） */\n  suffixIcon?: ReactNode\n}\n\n/**\n * Input 组件\n *\n * 包含 label、帮助文本、错误状态、前后置图标，并与 htmlFor/aria-describedby 无障碍关联。\n * 使用 forwardRef 以便父组件可以访问底层 <input> DOM。\n *\n * @example\n * <Input\n *   label=\"用户名\"\n *   required\n *   placeholder=\"请输入用户名\"\n *   errorMessage={errors.username?.message}\n * />\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      size = 'md',\n      label,\n      required,\n      errorMessage,\n      helperText,\n      prefixIcon,\n      suffixIcon,\n      className,\n      id: propId,\n      ...rest\n    },\n    ref,\n  ) => {\n    // 自动生成唯一 id，保证 label 与 input 的无障碍关联\n    const autoId = useId()\n    const id = propId ?? autoId\n    const descId = `${id}-desc`\n\n    const wrapperClassName = [\n      styles.wrapper,\n      styles[`size-${size}`],\n      errorMessage ? styles.error : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    const inputWrapperClassName = [\n      styles.inputWrapper,\n      prefixIcon ? styles.hasPrefix : '',\n      suffixIcon ? styles.hasSuffix : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <div className={wrapperClassName}>\n        {/* 标签区域 */}\n        {label && (\n          <label className={styles.label} htmlFor={id}>\n            {label}\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        {/* 输入框 + 图标 */}\n        <div className={inputWrapperClassName}>\n          {prefixIcon && (\n            <span className={styles.prefixIcon} aria-hidden=\"true\">\n              {prefixIcon}\n            </span>\n          )}\n\n          <input\n            ref={ref}\n            id={id}\n            className={[styles.input, className ?? ''].filter(Boolean).join(' ')}\n            aria-required={required}\n            aria-invalid={!!errorMessage}\n            aria-describedby={errorMessage || helperText ? descId : undefined}\n            {...rest}\n          />\n\n          {suffixIcon && (\n            <span className={styles.suffixIcon} aria-hidden=\"true\">\n              {suffixIcon}\n            </span>\n          )}\n        </div>\n\n        {/* 错误/帮助文字，优先展示错误信息 */}\n        {(errorMessage || helperText) && (\n          <span\n            id={descId}\n            className={errorMessage ? styles.errorMessage : styles.helperText}\n            role={errorMessage ? 'alert' : undefined}\n          >\n            {errorMessage ?? helperText}\n          </span>\n        )}\n      </div>\n    )\n  },\n)\n\nInput.displayName = 'Input'\n"],"names":["Button","forwardRef","variant","size","loading","fullWidth","leftIcon","rightIcon","children","className","disabled","rest","ref","isDisabled","classNames","styles","jsxs","Input","label","required","errorMessage","helperText","prefixIcon","suffixIcon","propId","autoId","useId","id","descId","wrapperClassName","inputWrapperClassName","jsx"],"mappings":"kmBAsCaA,EAASC,EAAAA,WACpB,CACE,CACE,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAaH,GAAYN,EAGzBU,EAAa,CACjBC,EAAO,IACPA,EAAO,QAAQZ,CAAI,EAAE,EACrBY,EAAO,WAAWb,CAAO,EAAE,EAC3BE,EAAUW,EAAO,QAAU,GAC3BV,EAAYU,EAAO,UAAY,GAC/BN,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,KAAC,SAAA,CAAO,IAAAJ,EAAU,UAAWE,EAAY,SAAUD,EAAY,YAAWT,EAAU,GAAGO,EAEpF,SAAA,CAAAP,QAAW,OAAA,CAAK,UAAWW,EAAO,QAAS,cAAY,OAAO,EAAKT,EACnEE,EACA,CAACJ,GAAWG,CAAA,EACf,CAEJ,CACF,EAEAP,EAAO,YAAc,ohBC3CRiB,EAAQhB,EAAAA,WACnB,CACE,CACE,KAAAE,EAAO,KACP,MAAAe,EACA,SAAAC,EACA,aAAAC,EACA,WAAAC,EACA,WAAAC,EACA,WAAAC,EACA,UAAAd,EACA,GAAIe,EACJ,GAAGb,CAAA,EAELC,IACG,CAEH,MAAMa,EAASC,EAAAA,MAAA,EACTC,EAAKH,GAAUC,EACfG,EAAS,GAAGD,CAAE,QAEdE,EAAmB,CACvBd,EAAO,QACPA,EAAO,QAAQZ,CAAI,EAAE,EACrBiB,EAAeL,EAAO,MAAQ,EAAA,EAE7B,OAAO,OAAO,EACd,KAAK,GAAG,EAELe,EAAwB,CAC5Bf,EAAO,aACPO,EAAaP,EAAO,UAAY,GAChCQ,EAAaR,EAAO,UAAY,EAAA,EAE/B,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEC,EAAAA,KAAC,MAAA,CAAI,UAAWa,EAEb,SAAA,CAAAX,UACE,QAAA,CAAM,UAAWH,EAAO,MAAO,QAASY,EACtC,SAAA,CAAAT,EACAC,SACE,OAAA,CAAK,UAAWJ,EAAO,SAAU,cAAY,OAAO,SAAA,GAAA,CAErD,CAAA,EAEJ,EAIFC,EAAAA,KAAC,MAAA,CAAI,UAAWc,EACb,SAAA,CAAAR,SACE,OAAA,CAAK,UAAWP,EAAO,WAAY,cAAY,OAC7C,SAAAO,CAAA,CACH,EAGFS,EAAAA,IAAC,QAAA,CACC,IAAAnB,EACA,GAAAe,EACA,UAAW,CAACZ,EAAO,MAAON,GAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACnE,gBAAeU,EACf,eAAc,CAAC,CAACC,EAChB,mBAAkBA,GAAgBC,EAAaO,EAAS,OACvD,GAAGjB,CAAA,CAAA,EAGLY,SACE,OAAA,CAAK,UAAWR,EAAO,WAAY,cAAY,OAC7C,SAAAQ,CAAA,CACH,CAAA,EAEJ,GAGEH,GAAgBC,IAChBU,EAAAA,IAAC,OAAA,CACC,GAAIH,EACJ,UAAWR,EAAeL,EAAO,aAAeA,EAAO,WACvD,KAAMK,EAAe,QAAU,OAE9B,SAAAA,GAAgBC,CAAA,CAAA,CACnB,EAEJ,CAEJ,CACF,EAEAJ,EAAM,YAAc"}

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+/**
+ * Button 组件
+ *
+ * 支持 5 种视觉风格 × 3 种尺寸 × loading/disabled 状态。
+ * 使用 forwardRef 以便父组件可以获取底层 <button> DOM 引用。
+ *
+ * @example
+ * <Button variant="primary" size="md" onClick={handleClick}>
+ *   提交
+ * </Button>
+ *
+ * @example 加载状态
+ * <Button loading leftIcon={<SaveIcon />}>保存</Button>
+ */
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 按钮风格变体，默认 primary */
+    variant?: ButtonVariant;
+    /** 按钮尺寸，默认 md */
+    size?: ButtonSize;
+    /** 是否处于加载状态 */
+    loading?: boolean;
+    /** 是否撑满父容器宽度 */
+    fullWidth?: boolean;
+    /** 左侧图标（任意 ReactNode，建议使用 SVG 图标） */
+    leftIcon?: ReactNode;
+    /** 右侧图标 */
+    rightIcon?: ReactNode;
+}
+
+export declare type ButtonSize = 'sm' | 'md' | 'lg';
+
+export declare type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+
+/**
+ * Input 组件
+ *
+ * 包含 label、帮助文本、错误状态、前后置图标，并与 htmlFor/aria-describedby 无障碍关联。
+ * 使用 forwardRef 以便父组件可以访问底层 <input> DOM。
+ *
+ * @example
+ * <Input
+ *   label="用户名"
+ *   required
+ *   placeholder="请输入用户名"
+ *   errorMessage={errors.username?.message}
+ * />
+ */
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** 输入框尺寸，默认 md */
+    size?: InputSize;
+    /** 显示在上方的标签文字 */
+    label?: string;
+    /** 是否必填（在 label 后显示红色 *） */
+    required?: boolean;
+    /** 错误提示信息（传入后输入框变为错误状态） */
+    errorMessage?: string;
+    /** 帮助提示文字（与 errorMessage 互斥，优先展示 errorMessage） */
+    helperText?: string;
+    /** 前置图标（建议 16×16 SVG） */
+    prefixIcon?: ReactNode;
+    /** 后置图标（建议 16×16 SVG） */
+    suffixIcon?: ReactNode;
+}
+
+export declare type InputSize = 'sm' | 'md' | 'lg';
+
+export { }

package/dist/index.js

@@ -0,0 +1,122 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { forwardRef as z, useId as v } from "react";
+const k = "_btn_1wxjz_2", N = "_loading_1wxjz_97", b = "_fullWidth_1wxjz_104", y = "_spinner_1wxjz_109", I = "_spin_1wxjz_109", e = {
+  btn: k,
+  "size-sm": "_size-sm_1wxjz_27",
+  "size-md": "_size-md_1wxjz_34",
+  "size-lg": "_size-lg_1wxjz_38",
+  "variant-primary": "_variant-primary_1wxjz_46",
+  "variant-secondary": "_variant-secondary_1wxjz_59",
+  "variant-outline": "_variant-outline_1wxjz_68",
+  "variant-ghost": "_variant-ghost_1wxjz_77",
+  "variant-danger": "_variant-danger_1wxjz_86",
+  loading: N,
+  fullWidth: b,
+  spinner: y,
+  spin: I
+}, W = z(
+  ({
+    variant: p = "primary",
+    size: l = "md",
+    loading: a = !1,
+    fullWidth: s = !1,
+    leftIcon: r,
+    rightIcon: t,
+    children: _,
+    className: d,
+    disabled: m,
+    ...h
+  }, u) => {
+    const f = m || a, o = [
+      e.btn,
+      e[`size-${l}`],
+      e[`variant-${p}`],
+      a ? e.loading : "",
+      s ? e.fullWidth : "",
+      d ?? ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c("button", { ref: u, className: o, disabled: f, "aria-busy": a, ...h, children: [
+      a ? /* @__PURE__ */ n("span", { className: e.spinner, "aria-hidden": "true" }) : r,
+      _,
+      !a && t
+    ] });
+  }
+);
+W.displayName = "Button";
+const g = "_wrapper_1mihk_2", B = "_label_1mihk_10", $ = "_required_1mihk_17", q = "_inputWrapper_1mihk_23", P = "_input_1mihk_23", S = "_error_1mihk_66", C = "_prefixIcon_1mihk_81", T = "_suffixIcon_1mihk_90", D = "_hasPrefix_1mihk_100", F = "_hasSuffix_1mihk_104", R = "_helperText_1mihk_109", A = "_errorMessage_1mihk_115", i = {
+  wrapper: g,
+  label: B,
+  required: $,
+  inputWrapper: q,
+  input: P,
+  "size-sm": "_size-sm_1mihk_53",
+  "size-md": "_size-md_1mihk_57",
+  "size-lg": "_size-lg_1mihk_60",
+  error: S,
+  prefixIcon: C,
+  suffixIcon: T,
+  hasPrefix: D,
+  hasSuffix: F,
+  helperText: R,
+  errorMessage: A
+}, E = z(
+  ({
+    size: p = "md",
+    label: l,
+    required: a,
+    errorMessage: s,
+    helperText: r,
+    prefixIcon: t,
+    suffixIcon: _,
+    className: d,
+    id: m,
+    ...h
+  }, u) => {
+    const f = v(), o = m ?? f, x = `${o}-desc`, j = [
+      i.wrapper,
+      i[`size-${p}`],
+      s ? i.error : ""
+    ].filter(Boolean).join(" "), w = [
+      i.inputWrapper,
+      t ? i.hasPrefix : "",
+      _ ? i.hasSuffix : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c("div", { className: j, children: [
+      l && /* @__PURE__ */ c("label", { className: i.label, htmlFor: o, children: [
+        l,
+        a && /* @__PURE__ */ n("span", { className: i.required, "aria-hidden": "true", children: "*" })
+      ] }),
+      /* @__PURE__ */ c("div", { className: w, children: [
+        t && /* @__PURE__ */ n("span", { className: i.prefixIcon, "aria-hidden": "true", children: t }),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: u,
+            id: o,
+            className: [i.input, d ?? ""].filter(Boolean).join(" "),
+            "aria-required": a,
+            "aria-invalid": !!s,
+            "aria-describedby": s || r ? x : void 0,
+            ...h
+          }
+        ),
+        _ && /* @__PURE__ */ n("span", { className: i.suffixIcon, "aria-hidden": "true", children: _ })
+      ] }),
+      (s || r) && /* @__PURE__ */ n(
+        "span",
+        {
+          id: x,
+          className: s ? i.errorMessage : i.helperText,
+          role: s ? "alert" : void 0,
+          children: s ?? r
+        }
+      )
+    ] });
+  }
+);
+E.displayName = "Input";
+export {
+  W as Button,
+  E as Input
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/components/Button/Button.tsx","../src/components/Input/Input.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react'\nimport styles from './Button.module.css'\n\n// 组件支持的尺寸：sm(小) / md(中，默认) / lg(大)\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\n// 组件支持的风格变体\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** 按钮风格变体，默认 primary */\n  variant?: ButtonVariant\n  /** 按钮尺寸，默认 md */\n  size?: ButtonSize\n  /** 是否处于加载状态 */\n  loading?: boolean\n  /** 是否撑满父容器宽度 */\n  fullWidth?: boolean\n  /** 左侧图标（任意 ReactNode，建议使用 SVG 图标） */\n  leftIcon?: ReactNode\n  /** 右侧图标 */\n  rightIcon?: ReactNode\n}\n\n/**\n * Button 组件\n *\n * 支持 5 种视觉风格 × 3 种尺寸 × loading/disabled 状态。\n * 使用 forwardRef 以便父组件可以获取底层 <button> DOM 引用。\n *\n * @example\n * <Button variant=\"primary\" size=\"md\" onClick={handleClick}>\n *   提交\n * </Button>\n *\n * @example 加载状态\n * <Button loading leftIcon={<SaveIcon />}>保存</Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'md',\n      loading = false,\n      fullWidth = false,\n      leftIcon,\n      rightIcon,\n      children,\n      className,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isDisabled = disabled || loading\n\n    // 拼接 CSS Modules 类名\n    const classNames = [\n      styles.btn,\n      styles[`size-${size}`],\n      styles[`variant-${variant}`],\n      loading ? styles.loading : '',\n      fullWidth ? styles.fullWidth : '',\n      className ?? '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <button ref={ref} className={classNames} disabled={isDisabled} aria-busy={loading} {...rest}>\n        {/* 加载中时用 spinner 替换左侧图标 */}\n        {loading ? <span className={styles.spinner} aria-hidden=\"true\" /> : leftIcon}\n        {children}\n        {!loading && rightIcon}\n      </button>\n    )\n  },\n)\n\nButton.displayName = 'Button'\n","import { InputHTMLAttributes, ReactNode, forwardRef, useId } from 'react'\nimport styles from './Input.module.css'\n\nexport type InputSize = 'sm' | 'md' | 'lg'\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /** 输入框尺寸，默认 md */\n  size?: InputSize\n  /** 显示在上方的标签文字 */\n  label?: string\n  /** 是否必填（在 label 后显示红色 *） */\n  required?: boolean\n  /** 错误提示信息（传入后输入框变为错误状态） */\n  errorMessage?: string\n  /** 帮助提示文字（与 errorMessage 互斥，优先展示 errorMessage） */\n  helperText?: string\n  /** 前置图标（建议 16×16 SVG） */\n  prefixIcon?: ReactNode\n  /** 后置图标（建议 16×16 SVG） */\n  suffixIcon?: ReactNode\n}\n\n/**\n * Input 组件\n *\n * 包含 label、帮助文本、错误状态、前后置图标，并与 htmlFor/aria-describedby 无障碍关联。\n * 使用 forwardRef 以便父组件可以访问底层 <input> DOM。\n *\n * @example\n * <Input\n *   label=\"用户名\"\n *   required\n *   placeholder=\"请输入用户名\"\n *   errorMessage={errors.username?.message}\n * />\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      size = 'md',\n      label,\n      required,\n      errorMessage,\n      helperText,\n      prefixIcon,\n      suffixIcon,\n      className,\n      id: propId,\n      ...rest\n    },\n    ref,\n  ) => {\n    // 自动生成唯一 id，保证 label 与 input 的无障碍关联\n    const autoId = useId()\n    const id = propId ?? autoId\n    const descId = `${id}-desc`\n\n    const wrapperClassName = [\n      styles.wrapper,\n      styles[`size-${size}`],\n      errorMessage ? styles.error : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    const inputWrapperClassName = [\n      styles.inputWrapper,\n      prefixIcon ? styles.hasPrefix : '',\n      suffixIcon ? styles.hasSuffix : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <div className={wrapperClassName}>\n        {/* 标签区域 */}\n        {label && (\n          <label className={styles.label} htmlFor={id}>\n            {label}\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        {/* 输入框 + 图标 */}\n        <div className={inputWrapperClassName}>\n          {prefixIcon && (\n            <span className={styles.prefixIcon} aria-hidden=\"true\">\n              {prefixIcon}\n            </span>\n          )}\n\n          <input\n            ref={ref}\n            id={id}\n            className={[styles.input, className ?? ''].filter(Boolean).join(' ')}\n            aria-required={required}\n            aria-invalid={!!errorMessage}\n            aria-describedby={errorMessage || helperText ? descId : undefined}\n            {...rest}\n          />\n\n          {suffixIcon && (\n            <span className={styles.suffixIcon} aria-hidden=\"true\">\n              {suffixIcon}\n            </span>\n          )}\n        </div>\n\n        {/* 错误/帮助文字，优先展示错误信息 */}\n        {(errorMessage || helperText) && (\n          <span\n            id={descId}\n            className={errorMessage ? styles.errorMessage : styles.helperText}\n            role={errorMessage ? 'alert' : undefined}\n          >\n            {errorMessage ?? helperText}\n          </span>\n        )}\n      </div>\n    )\n  },\n)\n\nInput.displayName = 'Input'\n"],"names":["Button","forwardRef","variant","size","loading","fullWidth","leftIcon","rightIcon","children","className","disabled","rest","ref","isDisabled","classNames","styles","jsxs","Input","label","required","errorMessage","helperText","prefixIcon","suffixIcon","propId","autoId","useId","id","descId","wrapperClassName","inputWrapperClassName","jsx"],"mappings":"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"}

package/dist/style.css

@@ -0,0 +1 @@
+._btn_1wxjz_2{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border:1px solid transparent;border-radius:6px;font-size:14px;font-weight:500;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s,border-color .2s,box-shadow .2s,opacity .2s;outline:none;text-decoration:none;font-family:inherit}._btn_1wxjz_2:focus-visible{box-shadow:0 0 0 3px #3b82f666}._size-sm_1wxjz_27{height:28px;font-size:12px;padding:0 10px;border-radius:4px}._size-md_1wxjz_34{height:36px}._size-lg_1wxjz_38{height:44px;font-size:16px;padding:0 24px;border-radius:8px}._variant-primary_1wxjz_46{background-color:#3b82f6;border-color:#3b82f6;color:#fff}._variant-primary_1wxjz_46:hover:not(:disabled){background-color:#2563eb;border-color:#2563eb}._variant-primary_1wxjz_46:active:not(:disabled){background-color:#1d4ed8}._variant-secondary_1wxjz_59{background-color:#f3f4f6;border-color:#e5e7eb;color:#374151}._variant-secondary_1wxjz_59:hover:not(:disabled){background-color:#e5e7eb}._variant-outline_1wxjz_68{background-color:transparent;border-color:#3b82f6;color:#3b82f6}._variant-outline_1wxjz_68:hover:not(:disabled){background-color:#eff6ff}._variant-ghost_1wxjz_77{background-color:transparent;border-color:transparent;color:#374151}._variant-ghost_1wxjz_77:hover:not(:disabled){background-color:#f3f4f6}._variant-danger_1wxjz_86{background-color:#ef4444;border-color:#ef4444;color:#fff}._variant-danger_1wxjz_86:hover:not(:disabled){background-color:#dc2626}._btn_1wxjz_2:disabled,._loading_1wxjz_97{opacity:.6;cursor:not-allowed;pointer-events:none}._fullWidth_1wxjz_104{width:100%}._spinner_1wxjz_109{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:_spin_1wxjz_109 .6s linear infinite;flex-shrink:0}@keyframes _spin_1wxjz_109{to{transform:rotate(360deg)}}._wrapper_1mihk_2{display:flex;flex-direction:column;gap:4px;width:100%}._label_1mihk_10{font-size:14px;font-weight:500;color:#374151;line-height:1.4}._required_1mihk_17{color:#ef4444;margin-left:2px}._inputWrapper_1mihk_23{position:relative;display:flex;align-items:center}._input_1mihk_23{width:100%;padding:0 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;color:#111827;background-color:#fff;transition:border-color .2s,box-shadow .2s;outline:none;font-family:inherit}._input_1mihk_23::placeholder{color:#9ca3af}._input_1mihk_23:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}._size-sm_1mihk_53 ._input_1mihk_23{height:28px;font-size:12px}._size-md_1mihk_57 ._input_1mihk_23{height:36px}._size-lg_1mihk_60 ._input_1mihk_23{height:44px;font-size:16px}._error_1mihk_66 ._input_1mihk_23{border-color:#ef4444}._error_1mihk_66 ._input_1mihk_23:focus{box-shadow:0 0 0 3px #ef444426}._input_1mihk_23:disabled{background-color:#f9fafb;color:#9ca3af;cursor:not-allowed}._prefixIcon_1mihk_81{position:absolute;left:10px;display:flex;align-items:center;color:#9ca3af;pointer-events:none}._suffixIcon_1mihk_90{position:absolute;right:10px;display:flex;align-items:center;color:#9ca3af;pointer-events:none}._hasPrefix_1mihk_100 ._input_1mihk_23{padding-left:34px}._hasSuffix_1mihk_104 ._input_1mihk_23{padding-right:34px}._helperText_1mihk_109{font-size:12px;color:#6b7280;line-height:1.4}._errorMessage_1mihk_115{font-size:12px;color:#ef4444;line-height:1.4}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@zdyumath/react-ui",
+  "version": "0.1.0",
+  "description": "生产级 React 组件库模板",
+  "author": "zdyumath <zdyumath@gmail.com>",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zdyumath/react-ui"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "build:watch": "vite build --watch",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css,md}\"",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run lint && npm run test && npm run build",
+    "release": "npm run prepublishOnly && npm publish --access public"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^8.0.0",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^15.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^25.3.2",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^0.34.6",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^8.0.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^0.34.6"
+  }
+}