pingk-react-component-lib 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Pingk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,131 @@
+# Pingk React Component Lib
+
+一个基于 React + TypeScript + Vite 构建的轻量级组件库。
+
+## ✨ 特性
+
+* 📦 开箱即用，支持 NPM 安装和 CDN 引入
+* 🦕 完全使用 TypeScript 编写，提供完整的类型定义
+* ⚡️ 基于 Vite 构建，支持 ESM 和 UMD 格式
+* 🎨 内置 BEM 规范的 Sass 样式
+
+## 📦 安装
+
+### 使用包管理器
+
+```bash
+# npm
+npm install pingk-react-component-lib
+
+# pnpm
+pnpm add pingk-react-component-lib
+
+# yarn
+yarn add pingk-react-component-lib
+```
+
+### 浏览器直接引入 (CDN)
+
+你也可以直接通过 CDN 引入 UMD 格式的文件：
+
+```html
+<!-- 引入样式 -->
+<link rel="stylesheet" href="https://unpkg.com/pingk-react-component-lib/dist/index.css">
+
+<!-- 引入依赖 -->
+<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+<!-- 引入组件库 -->
+<script src="https://unpkg.com/pingk-react-component-lib/dist/index.umd.cjs"></script>
+```
+
+## 🔨 快速上手
+
+### 在 React 项目中使用
+
+```tsx
+import { useState } from 'react';
+import { MyButton, MyRadio } from 'pingk-react-component-lib';
+// 如果构建工具没有自动处理 CSS注入，可能需要手动引入（视具体配置而定）
+// import 'pingk-react-component-lib/dist/index.css';
+
+function App() {
+  const [radioValue, setRadioValue] = useState('1');
+
+  return (
+    <div>
+      <h2>Button 示例</h2>
+      <MyButton
+        label="点击我"
+        variant="primary"
+        onClick={() => alert('Clicked!')}
+      />
+
+      <h2>Radio 示例</h2>
+      <MyRadio
+        label="选项 A"
+        name="group1"
+        value="1"
+        checked={radioValue === '1'}
+        onChange={(e) => setRadioValue(e.target.value)}
+      />
+      <MyRadio
+        label="选项 B"
+        name="group1"
+        value="2"
+        checked={radioValue === '2'}
+        onChange={(e) => setRadioValue(e.target.value)}
+      />
+    </div>
+  );
+}
+```
+
+## 📚 组件文档
+
+### MyButton
+
+基础按钮组件。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | **必填** | 按钮显示的文本内容 |
+| `variant` | `'primary' \| 'default'` | `'default'` | 按钮样式变体 |
+| `disabled` | `boolean` | `false` | 是否禁用按钮 |
+| `onClick` | `(event: React.MouseEvent) => void` | `-` | 点击事件回调 |
+| `...props` | `React.ButtonHTMLAttributes` | `-` | 其他原生 button 属性 |
+
+### MyRadio
+
+单选框组件。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | 单选框右侧的标签文本 |
+| `checked` | `boolean` | `-` | 是否选中 |
+| `disabled` | `boolean` | `false` | 是否禁用 |
+| `onChange` | `(event: React.ChangeEvent) => void` | `-` | 状态改变回调 |
+| `...props` | `React.InputHTMLAttributes` | `-` | 其他原生 input[type="radio"] 属性 |
+
+## 💻 本地开发
+
+如果你想参与本项目开发，请参考 [开发指南](./REACT_TS_COMPONENT_DEV_GUIDE.md)。
+
+```bash
+# 克隆项目
+git clone https://github.com/your-repo/pingk-react-component-lib.git
+
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+
+# 运行测试
+pnpm test
+```
+
+## 📄 License
+
+MIT

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;
+//# sourceMappingURL=App.d.ts.map

package/dist/App.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAGA,iBAAS,GAAG,4CAyEX;AAED,eAAe,GAAG,CAAA"}

package/dist/components/MyButton/index.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+/**
+ * MyButton 组件属性接口定义
+ */
+export interface MyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 按钮显示文本 */
+    label: string;
+    /** 按钮变体类型 */
+    variant?: 'primary' | 'default';
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 点击事件处理函数 */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+/**
+ * 业务按钮组件
+ *
+ * @example
+ * <MyButton label="点击我" variant="primary" onClick={() => console.log('clicked')} />
+ */
+declare const MyButton: React.FC<MyButtonProps>;
+export default MyButton;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MyButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MyButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAClF,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,aAAa;IACb,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED;;;;;GAKG;AACH,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqCrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/MyRadio/index.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface MyRadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** 标签文本 */
+    label?: string;
+}
+/**
+ * 单选框组件
+ */
+declare const MyRadio: React.FC<MyRadioProps>;
+export default MyRadio;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MyRadio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MyRadio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC/E,WAAW;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkBnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export { default as MyButton } from './MyButton';
+export type { MyButtonProps } from './MyButton';
+export { default as MyRadio } from './MyRadio';
+export type { MyRadioProps } from './MyRadio';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.css

@@ -0,0 +1 @@
+.my-lib-button{padding:8px 16px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:all .2s;font-size:14px}.my-lib-button:disabled{cursor:not-allowed;background-color:#f5f5f5;border-color:#d9d9d9;color:#00000040}.my-lib-button:disabled:hover{background-color:#f5f5f5;border-color:#d9d9d9;color:#00000040}.my-lib-button--default{background-color:#fff;border-color:#d9d9d9;color:#333}.my-lib-button--default:hover:not(:disabled){color:#4995ff;border-color:#4995ff}.my-lib-button--primary{background-color:#1677ff;color:#fff}.my-lib-button--primary:hover:not(:disabled){background-color:#4995ff}.my-lib-radio{display:inline-flex;align-items:center;cursor:pointer;font-size:14px;color:#333;margin-right:8px;-webkit-user-select:none;user-select:none}.my-lib-radio__input{position:absolute;opacity:0;width:0;height:0}.my-lib-radio__input:checked+.my-lib-radio__inner{border-color:#1677ff;background-color:#1677ff}.my-lib-radio__input:checked+.my-lib-radio__inner:after{transform:translate(-50%,-50%) scale(1)}.my-lib-radio__input:disabled+.my-lib-radio__inner{background-color:#f5f5f5;border-color:#d9d9d9;cursor:not-allowed}.my-lib-radio__input:disabled+.my-lib-radio__inner:after{background-color:#00000040}.my-lib-radio__input:disabled~.my-lib-radio__label{color:#00000040;cursor:not-allowed}.my-lib-radio__inner{position:relative;display:inline-block;width:16px;height:16px;border:1px solid #d9d9d9;border-radius:50%;background-color:#fff;margin-right:8px;transition:all .2s;box-sizing:border-box}.my-lib-radio__inner:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%) scale(0);transition:transform .2s}.my-lib-radio__label{transition:color .2s}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as MyButton } from './components/MyButton';
+export type { MyButtonProps } from './components/MyButton';
+export { default as MyRadio } from './components/MyRadio';
+export type { MyRadioProps } from './components/MyRadio';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.es.js

@@ -0,0 +1,45 @@
+import e from "react";
+import './index.css';const s = ({
+  label: t,
+  variant: n = "default",
+  className: l = "",
+  disabled: a = !1,
+  onClick: r,
+  ...m
+}) => {
+  const o = (i) => {
+    if (a) {
+      i.preventDefault();
+      return;
+    }
+    r && r(i);
+  };
+  return /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      className: `my-lib-button my-lib-button--${n} ${l}`,
+      onClick: o,
+      disabled: a,
+      ...m
+    },
+    t
+  );
+}, u = ({
+  label: t,
+  className: n = "",
+  disabled: l,
+  ...a
+}) => /* @__PURE__ */ e.createElement("label", { className: `my-lib-radio ${n}` }, /* @__PURE__ */ e.createElement(
+  "input",
+  {
+    type: "radio",
+    className: "my-lib-radio__input",
+    disabled: l,
+    ...a
+  }
+), /* @__PURE__ */ e.createElement("span", { className: "my-lib-radio__inner" }), t && /* @__PURE__ */ e.createElement("span", { className: "my-lib-radio__label" }, t));
+export {
+  s as MyButton,
+  u as MyRadio
+};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/components/MyButton/index.tsx","../src/components/MyRadio/index.tsx"],"sourcesContent":["import React from 'react';\nimport './index.scss'; // 引入 SCSS 样式\n\n/**\n * MyButton 组件属性接口定义\n */\nexport interface MyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** 按钮显示文本 */\n  label: string;\n  /** 按钮变体类型 */\n  variant?: 'primary' | 'default';\n  /** 是否禁用 */\n  disabled?: boolean;\n  /** 点击事件处理函数 */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * 业务按钮组件\n *\n * @example\n * <MyButton label=\"点击我\" variant=\"primary\" onClick={() => console.log('clicked')} />\n */\nconst MyButton: React.FC<MyButtonProps> = ({\n  label,\n  variant = 'default',\n  className = '',\n  disabled = false,\n  onClick,\n  ...props\n}) => {\n  // 处理点击事件，确保禁用状态下不触发\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    // 1. 禁用状态检查\n    // 虽然 HTML disabled 属性通常会阻止点击事件，\n    // 但在某些特定情况或自定义组件封装中，显式拦截更加安全。\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    // 2. 执行传入的点击回调\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  return (\n    <button\n      className={`my-lib-button my-lib-button--${variant} ${className}`}\n      // 绑定内部处理函数，而非直接透传 onClick\n      onClick={handleClick}\n      // 将 disabled 属性透传给原生 button 元素，\n      // 这会自动触发浏览器的默认禁用行为（如不可聚焦、样式变化等）\n      disabled={disabled}\n      {...props}\n    >\n      {label}\n    </button>\n  );\n};\n\nexport default MyButton;\n","import React from 'react';\nimport './index.scss';\n\nexport interface MyRadioProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /** 标签文本 */\n  label?: string;\n}\n\n/**\n * 单选框组件\n */\nconst MyRadio: React.FC<MyRadioProps> = ({\n  label,\n  className = '',\n  disabled,\n  ...props\n}) => {\n  return (\n    <label className={`my-lib-radio ${className}`}>\n      <input\n        type=\"radio\"\n        className=\"my-lib-radio__input\"\n        disabled={disabled}\n        {...props}\n      />\n      <span className=\"my-lib-radio__inner\" />\n      {label && <span className=\"my-lib-radio__label\">{label}</span>}\n    </label>\n  );\n};\n\nexport default MyRadio;\n"],"names":["MyButton","label","variant","className","disabled","onClick","props","handleClick","e","React","MyRadio"],"mappings":";AAuBA,MAAMA,IAAoC,CAAC;AAAA,EACzC,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AAEJ,QAAMC,IAAc,CAACC,MAA2C;AAI9D,QAAIJ,GAAU;AACZ,MAAAI,EAAE,eAAA;AACF;AAAA,IACF;AAGA,IAAIH,KACFA,EAAQG,CAAC;AAAA,EAEb;AAEA,SACE,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gCAAgCP,CAAO,IAAIC,CAAS;AAAA,MAE/D,SAASI;AAAA,MAGT,UAAAH;AAAA,MACC,GAAGE;AAAA,IAAA;AAAA,IAEHL;AAAA,EAAA;AAGP,GCjDMS,IAAkC,CAAC;AAAA,EACvC,OAAAT;AAAA,EACA,WAAAE,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,GAAGE;AACL,MAEI,gBAAAG,EAAA,cAAC,SAAA,EAAM,WAAW,gBAAgBN,CAAS,MACzC,gBAAAM,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,WAAU;AAAA,IACV,UAAAL;AAAA,IACC,GAAGE;AAAA,EAAA;AAAA,GAEN,gBAAAG,EAAA,cAAC,QAAA,EAAK,WAAU,sBAAA,CAAsB,GACrCR,KAAS,gBAAAQ,EAAA,cAAC,QAAA,EAAK,WAAU,sBAAA,GAAuBR,CAAM,CACzD;"}

package/dist/index.umd.cjs

@@ -0,0 +1,3 @@
+(function(r,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],o):(r=typeof globalThis<"u"?globalThis:r||self,o(r.PingkReactComponentLib={},r.React))})(this,(function(r,o){"use strict";var l=document.createElement("style");l.textContent=`.my-lib-button{padding:8px 16px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:all .2s;font-size:14px}.my-lib-button:disabled{cursor:not-allowed;background-color:#f5f5f5;border-color:#d9d9d9;color:#00000040}.my-lib-button:disabled:hover{background-color:#f5f5f5;border-color:#d9d9d9;color:#00000040}.my-lib-button--default{background-color:#fff;border-color:#d9d9d9;color:#333}.my-lib-button--default:hover:not(:disabled){color:#4995ff;border-color:#4995ff}.my-lib-button--primary{background-color:#1677ff;color:#fff}.my-lib-button--primary:hover:not(:disabled){background-color:#4995ff}.my-lib-radio{display:inline-flex;align-items:center;cursor:pointer;font-size:14px;color:#333;margin-right:8px;-webkit-user-select:none;user-select:none}.my-lib-radio__input{position:absolute;opacity:0;width:0;height:0}.my-lib-radio__input:checked+.my-lib-radio__inner{border-color:#1677ff;background-color:#1677ff}.my-lib-radio__input:checked+.my-lib-radio__inner:after{transform:translate(-50%,-50%) scale(1)}.my-lib-radio__input:disabled+.my-lib-radio__inner{background-color:#f5f5f5;border-color:#d9d9d9;cursor:not-allowed}.my-lib-radio__input:disabled+.my-lib-radio__inner:after{background-color:#00000040}.my-lib-radio__input:disabled~.my-lib-radio__label{color:#00000040;cursor:not-allowed}.my-lib-radio__inner{position:relative;display:inline-block;width:16px;height:16px;border:1px solid #d9d9d9;border-radius:50%;background-color:#fff;margin-right:8px;transition:all .2s;box-sizing:border-box}.my-lib-radio__inner:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%) scale(0);transition:transform .2s}.my-lib-radio__label{transition:color .2s}
+/*$vite$:1*/`,document.head.appendChild(l);const b=({label:e,variant:t="default",className:n="",disabled:i=!1,onClick:d,...s})=>{const f=a=>{if(i){a.preventDefault();return}d&&d(a)};return o.createElement("button",{className:`my-lib-button my-lib-button--${t} ${n}`,onClick:f,disabled:i,...s},e)},c=({label:e,className:t="",disabled:n,...i})=>o.createElement("label",{className:`my-lib-radio ${t}`},o.createElement("input",{type:"radio",className:"my-lib-radio__input",disabled:n,...i}),o.createElement("span",{className:"my-lib-radio__inner"}),e&&o.createElement("span",{className:"my-lib-radio__label"},e));r.MyButton=b,r.MyRadio=c,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
+//# sourceMappingURL=index.umd.cjs.map

package/dist/index.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.cjs","sources":["../src/components/MyButton/index.tsx","../src/components/MyRadio/index.tsx"],"sourcesContent":["import React from 'react';\nimport './index.scss'; // 引入 SCSS 样式\n\n/**\n * MyButton 组件属性接口定义\n */\nexport interface MyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** 按钮显示文本 */\n  label: string;\n  /** 按钮变体类型 */\n  variant?: 'primary' | 'default';\n  /** 是否禁用 */\n  disabled?: boolean;\n  /** 点击事件处理函数 */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * 业务按钮组件\n *\n * @example\n * <MyButton label=\"点击我\" variant=\"primary\" onClick={() => console.log('clicked')} />\n */\nconst MyButton: React.FC<MyButtonProps> = ({\n  label,\n  variant = 'default',\n  className = '',\n  disabled = false,\n  onClick,\n  ...props\n}) => {\n  // 处理点击事件，确保禁用状态下不触发\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    // 1. 禁用状态检查\n    // 虽然 HTML disabled 属性通常会阻止点击事件，\n    // 但在某些特定情况或自定义组件封装中，显式拦截更加安全。\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    // 2. 执行传入的点击回调\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  return (\n    <button\n      className={`my-lib-button my-lib-button--${variant} ${className}`}\n      // 绑定内部处理函数，而非直接透传 onClick\n      onClick={handleClick}\n      // 将 disabled 属性透传给原生 button 元素，\n      // 这会自动触发浏览器的默认禁用行为（如不可聚焦、样式变化等）\n      disabled={disabled}\n      {...props}\n    >\n      {label}\n    </button>\n  );\n};\n\nexport default MyButton;\n","import React from 'react';\nimport './index.scss';\n\nexport interface MyRadioProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /** 标签文本 */\n  label?: string;\n}\n\n/**\n * 单选框组件\n */\nconst MyRadio: React.FC<MyRadioProps> = ({\n  label,\n  className = '',\n  disabled,\n  ...props\n}) => {\n  return (\n    <label className={`my-lib-radio ${className}`}>\n      <input\n        type=\"radio\"\n        className=\"my-lib-radio__input\"\n        disabled={disabled}\n        {...props}\n      />\n      <span className=\"my-lib-radio__inner\" />\n      {label && <span className=\"my-lib-radio__label\">{label}</span>}\n    </label>\n  );\n};\n\nexport default MyRadio;\n"],"names":["MyButton","label","variant","className","disabled","onClick","props","handleClick","e","React","MyRadio"],"mappings":";2CAuBA,MAAMA,EAAoC,CAAC,CACzC,MAAAC,EACA,QAAAC,EAAU,UACV,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,QAAAC,EACA,GAAGC,CACL,IAAM,CAEJ,MAAMC,EAAeC,GAA2C,CAI9D,GAAIJ,EAAU,CACZI,EAAE,eAAA,EACF,MACF,CAGIH,GACFA,EAAQG,CAAC,CAEb,EAEA,OACEC,EAAA,cAAC,SAAA,CACC,UAAW,gCAAgCP,CAAO,IAAIC,CAAS,GAE/D,QAASI,EAGT,SAAAH,EACC,GAAGE,CAAA,EAEHL,CAAA,CAGP,ECjDMS,EAAkC,CAAC,CACvC,MAAAT,EACA,UAAAE,EAAY,GACZ,SAAAC,EACA,GAAGE,CACL,IAEIG,EAAA,cAAC,QAAA,CAAM,UAAW,gBAAgBN,CAAS,IACzCM,EAAA,cAAC,QAAA,CACC,KAAK,QACL,UAAU,sBACV,SAAAL,EACC,GAAGE,CAAA,CAAA,EAENG,EAAA,cAAC,OAAA,CAAK,UAAU,qBAAA,CAAsB,EACrCR,GAASQ,EAAA,cAAC,OAAA,CAAK,UAAU,qBAAA,EAAuBR,CAAM,CACzD"}

package/dist/main.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.tsx"],"names":[],"mappings":""}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "pingk-react-component-lib",
+  "version": "1.0.0",
+  "description": "A simple React + TypeScript component library built with Vite",
+  "author": "Pingk",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "typescript",
+    "component",
+    "library",
+    "vite",
+    "ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/pingk-react-component-lib.git"
+  },
+  "homepage": "https://github.com/your-username/pingk-react-component-lib#readme",
+  "bugs": {
+    "url": "https://github.com/your-username/pingk-react-component-lib/issues"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/index.umd.cjs",
+  "jsdelivr": "./dist/index.umd.cjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test": "vitest",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "jsdom": "^27.4.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "sass": "^1.97.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vitest": "^4.0.16"
+  }
+}