@lillian10231023/o2-design-system-1 0.1.0

package/README.md

@@ -0,0 +1,262 @@
+# O2 Design System
+
+> React component library & design tokens for O2 products.
+
+[![npm version](https://img.shields.io/npm/v/o2-design-system)](https://www.npmjs.com/package/o2-design-system)
+[![license](https://img.shields.io/npm/l/o2-design-system)](LICENSE)
+
+---
+
+## Installation
+
+```bash
+npm install o2-design-system
+# or
+yarn add o2-design-system
+# or
+pnpm add o2-design-system
+```
+
+> **Peer dependencies:** `react >= 17` and `react-dom >= 17` must be installed in your project.
+
+---
+
+## Quick Start
+
+Import the CSS once at your app entry (e.g. `main.tsx`):
+
+```tsx
+import 'o2-design-system/dist/index.css'
+```
+
+Then use components directly:
+
+```tsx
+import { Button, Input } from 'o2-design-system'
+
+export default function App() {
+  return (
+    <>
+      <Button variant="solid" theme="default">Submit</Button>
+      <Button variant="outline" theme="danger" prefixIcon={<TrashIcon />}>Delete</Button>
+      <Input label="Email" placeholder="you@example.com" clearable />
+    </>
+  )
+}
+```
+
+---
+
+## Components
+
+### Button
+
+Trigger actions with clear visual hierarchy.
+
+```tsx
+import { Button, ButtonGroup } from 'o2-design-system'
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'solid' \| 'outline' \| 'ghost'` | `'solid'` | Visual style — filled / bordered / text-only |
+| `theme` | `'default' \| 'danger'` | `'default'` | Color theme |
+| `size` | `'lg' \| 'md' \| 'sm' \| 'mini'` | `'md'` | Button height: 40 / 32 / 24 / 20 px |
+| `shape` | `'rounded' \| 'pill'` | `'rounded'` | Corner radius: 4px / fully rounded |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `loading` | `boolean` | `false` | Loading state — shows spinner, blocks interaction |
+| `block` | `boolean` | `false` | Full-width, stretches to container |
+| `iconOnly` | `boolean` | `false` | Square icon-only button (no text) |
+| `prefixIcon` | `ReactNode` | — | Icon before label |
+| `suffixIcon` | `ReactNode` | — | Icon after label |
+
+#### Variants
+
+```tsx
+// Solid — primary action
+<Button variant="solid">Submit</Button>
+
+// Outline — secondary action
+<Button variant="outline">Cancel</Button>
+
+// Ghost — lightweight / text action
+<Button variant="ghost">View more</Button>
+```
+
+#### Colors
+
+```tsx
+// Brand blue (default)
+<Button theme="default">Create</Button>
+
+// Danger red — destructive actions
+<Button theme="danger">Delete</Button>
+```
+
+#### Sizes
+
+```tsx
+<Button size="lg">Large · 40px</Button>
+<Button size="md">Medium · 32px</Button>
+<Button size="sm">Small · 24px</Button>
+<Button size="mini">Mini · 20px</Button>
+```
+
+#### Icons
+
+```tsx
+<Button prefixIcon={<PlusIcon />}>New</Button>
+<Button suffixIcon={<ChevronDownIcon />}>More</Button>
+<Button iconOnly prefixIcon={<SearchIcon />} aria-label="Search" />
+```
+
+#### Loading
+
+```tsx
+<Button loading>Submitting…</Button>
+```
+
+#### Block
+
+```tsx
+<Button block>Full width</Button>
+```
+
+#### ButtonGroup
+
+Merge multiple buttons into a single unit.
+
+```tsx
+<ButtonGroup>
+  <Button variant="outline">Option A</Button>
+  <Button variant="outline">Option B</Button>
+  <Button variant="outline">Option C</Button>
+</ButtonGroup>
+
+// Pill shape
+<ButtonGroup shape="pill">
+  <Button>Create</Button>
+  <Button iconOnly variant="outline" prefixIcon={<ChevronDownIcon />} aria-label="More" />
+</ButtonGroup>
+```
+
+---
+
+### Input
+
+Text input with label, hint, error state, prefix/suffix slots.
+
+```tsx
+import { Input } from 'o2-design-system'
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Input height |
+| `status` | `'default' \| 'error'` | `'default'` | Validation state |
+| `label` | `string` | — | Label above input |
+| `hint` | `string` | — | Helper text below input |
+| `errorMsg` | `string` | — | Error text (overrides hint, turns border red) |
+| `prefix` | `ReactNode` | — | Left slot (icon or text) |
+| `suffix` | `ReactNode` | — | Right slot |
+| `clearable` | `boolean` | `false` | Show clear button when value is non-empty |
+| `block` | `boolean` | `false` | Full-width |
+| `disabled` | `boolean` | `false` | Disabled state |
+
+#### Examples
+
+```tsx
+// Basic
+<Input placeholder="Enter text…" />
+
+// With label & hint
+<Input label="Username" hint="Letters and numbers only" />
+
+// Error state
+<Input label="Email" status="error" errorMsg="Invalid email address" />
+
+// With icons
+<Input prefix={<SearchIcon />} placeholder="Search…" clearable />
+
+// Sizes
+<Input size="lg" placeholder="Large" />
+<Input size="sm" placeholder="Small" />
+```
+
+---
+
+## Design Tokens
+
+O2 Design Tokens are exported as typed JS constants:
+
+```tsx
+import { colors, spacing, radius, typography } from 'o2-design-system'
+
+// e.g.
+console.log(colors['品牌_blue_06-常规'])  // "#474BFF"
+console.log(spacing.spacing_8)           // 8
+console.log(radius.m)                    // 4
+console.log(typography.body_body_02)     // { fontSize: 14, fontWeight: 'regular', lineHeight: 22 }
+```
+
+CSS custom properties are also bundled in `dist/index.css` and can be used directly:
+
+```css
+.my-button {
+  background: var(--color-品牌-blue-06-常规);
+  border-radius: var(--radius-m);
+}
+```
+
+---
+
+## Dark Mode
+
+Add `data-theme="dark"` to any ancestor element (e.g. `<html>`) to activate dark mode:
+
+```html
+<html data-theme="dark">
+```
+
+All CSS variables will automatically switch to dark values.
+
+---
+
+## Local Development
+
+```bash
+git clone https://github.com/your-org/o2-design-system.git
+cd o2-design-system
+npm install
+
+# Start the component preview app
+npm run dev
+
+# Build the library for publishing
+npm run build:lib
+```
+
+---
+
+## Publishing to npm
+
+```bash
+# 1. Login to npm
+npm login
+
+# 2. Bump version (patch / minor / major)
+npm version patch
+
+# 3. Build & publish (prepublishOnly runs build:lib automatically)
+npm publish --access public
+```
+
+---
+
+## License
+
+MIT © O2 Design Team

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+/** 按钮类型：实心(主要) | 描边(次要) | 文字(Ghost) */
+export type ButtonVariant = 'solid' | 'outline' | 'ghost';
+/**
+ * 按钮颜色主题
+ * - default：常规蓝（品牌色）
+ * - primary：主要蓝（同 default，语义更明确）
+ * - danger：危险红
+ * - warning：警告橙
+ * - success：成功绿
+ */
+export type ButtonTheme = 'default' | 'primary' | 'danger' | 'warning' | 'success';
+/** 尺寸：大(40px) | 中(32px) | 小(24px) | 迷你(20px) */
+export type ButtonSize = 'lg' | 'md' | 'sm' | 'mini';
+/** 按钮形状：半圆角(4px) | 全圆角胶囊 */
+export type ButtonShape = 'rounded' | 'pill';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 按钮类型，默认 solid */
+    variant?: ButtonVariant;
+    /** 颜色主题，默认 default */
+    theme?: ButtonTheme;
+    /** 尺寸，默认 md */
+    size?: ButtonSize;
+    /** 按钮形状，默认 rounded */
+    shape?: ButtonShape;
+    /**
+     * 加载状态：spinner 显示在文字左侧，按钮进入不可点击态
+     * 文字保持可见（不隐藏），视觉上表达"处理中"
+     */
+    loading?: boolean;
+    /** 前置图标 */
+    prefixIcon?: React.ReactNode;
+    /** 后置图标 */
+    suffixIcon?: React.ReactNode;
+    /** 仅图标模式（正方形/圆形按钮，无文字） */
+    iconOnly?: boolean;
+    /** 撑满父容器宽度 */
+    block?: boolean;
+    children?: React.ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;
+export interface ButtonGroupProps {
+    children: React.ReactNode;
+    /** 组内按钮尺寸统一 */
+    size?: ButtonSize;
+    /** 是否全圆角 */
+    shape?: ButtonShape;
+}
+/**
+ * ButtonGroup 组合按钮
+ * 多个按钮合并为一体，共享边框，中间分隔线自动处理
+ * 用法：<ButtonGroup><Button>选项A</Button><Button>选项B</Button></ButtonGroup>
+ */
+export declare const ButtonGroup: React.FC<ButtonGroupProps>;

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

@@ -0,0 +1,2 @@
+export { default as Button, ButtonGroup } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonTheme, ButtonSize, ButtonShape, ButtonGroupProps } from './Button';

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputStatus = 'default' | 'error';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    size?: InputSize;
+    status?: InputStatus;
+    label?: string;
+    hint?: string;
+    errorMsg?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    clearable?: boolean;
+    block?: boolean;
+}
+declare const Input: React.FC<InputProps>;
+export default Input;

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

@@ -0,0 +1,2 @@
+export { default as Input } from './Input';
+export type { InputProps, InputSize, InputStatus } from './Input';

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),B=({size:i=14})=>e.jsx("svg",{className:"o2-btn__spinner",width:i,height:i,viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeDasharray:"30",strokeDashoffset:"10"})}),E=({variant:i="solid",theme:r="default",size:n="md",shape:l="rounded",loading:t=!1,prefixIcon:_,suffixIcon:a,iconOnly:c=!1,block:u=!1,disabled:s,children:g,className:p="",...o})=>{const f=r==="primary"?"default":r,b=n==="lg"?16:n==="mini"?12:14,m=s||t,F=["o2-btn",`o2-btn--${i}`,`o2-btn--theme-${f}`,`o2-btn--${n}`,l==="pill"?"o2-btn--pill":"",c?"o2-btn--icon-only":"",u?"o2-btn--block":"",t?"o2-btn--loading":"",p].filter(Boolean).join(" ");return e.jsxs("button",{className:F,disabled:m,"aria-busy":t,...o,children:[t&&e.jsx(B,{size:b}),!t&&_&&e.jsx("span",{className:"o2-btn__icon o2-btn__icon--prefix","aria-hidden":"true",children:_}),g&&e.jsx("span",{className:"o2-btn__label",children:g}),!t&&a&&e.jsx("span",{className:"o2-btn__icon o2-btn__icon--suffix","aria-hidden":"true",children:a})]})},W=({children:i,size:r,shape:n})=>{const l=h.Children.map(i,t=>h.isValidElement(t)?h.cloneElement(t,{size:r??t.props.size,shape:n??t.props.shape}):t);return e.jsx("div",{className:`o2-btn-group ${n==="pill"?"o2-btn-group--pill":""}`,children:l})},H=({size:i="md",status:r="default",label:n,hint:l,errorMsg:t,prefix:_,suffix:a,clearable:c=!1,block:u=!1,disabled:s,value:g,defaultValue:p,onChange:o,className:f="",...b})=>{const[m,F]=h.useState(p??""),y=g!==void 0,x=y?g:m,S=d=>{y||F(d.target.value),o==null||o(d)},z=()=>{y||F("");const d={target:{value:""}};o==null||o(d)},j=r==="error"||!!t,A=["o2-input-wrapper",`o2-input-wrapper--${i}`,j?"o2-input-wrapper--error":"",s?"o2-input-wrapper--disabled":"",u?"o2-input-wrapper--block":"",f].filter(Boolean).join(" ");return e.jsxs("div",{className:`o2-input-field ${u?"o2-input-field--block":""}`,children:[n&&e.jsx("label",{className:"o2-input-label",children:n}),e.jsxs("div",{className:A,children:[_&&e.jsx("span",{className:"o2-input-affix o2-input-prefix",children:_}),e.jsx("input",{className:"o2-input",disabled:s,value:x,onChange:S,...b}),c&&x&&!s&&e.jsx("button",{type:"button",className:"o2-input-clear",onClick:z,"aria-label":"清除",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",width:"14",height:"14",children:e.jsx("path",{d:"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm2.95 9.24-.71.71L8 8.71l-2.24 2.24-.71-.71L7.29 8 5.05 5.76l.71-.71L8 7.29l2.24-2.24.71.71L8.71 8l2.24 2.24z"})})}),a&&e.jsx("span",{className:"o2-input-affix o2-input-suffix",children:a})]}),(l||t)&&e.jsx("p",{className:`o2-input-hint ${j?"o2-input-hint--error":""}`,children:t||l})]})},C={"文字_gray_13-t1":"#121212","文字_gray_09-t2":"#666666","文字_gray_06-t3and禁用":"#A3A3AF",文字_白色:"#FFFFFF",文字_品牌:"#000000",文字_警告:"#000000",文字_危险:"#000000",文字_成功:"#000000",图标_常规:"#121212","描边_l1-gray_03":"#F1F1F1",图标_辅助:"#888996","中性_gray_01-light":"#FFFFFF","中性_gray_02-悬浮and禁用":"#F5F5F7",中性_gray_03:"#F1F1F1",中性_gray_04:"#E4E4E4","中性_gray_05-点击":"#C9C9C9","描边_l2-gray_04":"#E4E4E4","描边_l3-gray_06":"#AFAFAF",描边_悬浮and点击:"#474BFF",图标_禁用:"#A3A3AF",图标_白色:"#FFFFFF",图标_品牌:"#000000",图标_危险:"#000000",图标_警告:"#000000",图标_成功:"#000000","品牌_blue_01-light":"#E8ECFF","品牌_blue_02-浅色and点击":"#C8D0FF","品牌_blue_04-置灰":"#8791FF","品牌_blue_05-悬浮":"#676FFF","品牌_blue_06-常规":"#474BFF","品牌_blue_07-点击":"#2F2CD2","警告_golden_01-light":"#FFFAE3","警告_golden_04-置灰":"#FAD05B","警告_golden_05-悬浮":"#F9BC2D","警告_golden_06-常规":"#F7A600","警告_golden_07-点击":"#CC8100","成功_green_01-light":"#EBFFE7","成功_green_03-置灰":"#88E57D","成功_green_05-悬浮":"#2BCC25","成功_green_06-常规":"#00BF00","成功_green_07-点击":"#00A205","危险_red_01-light":"#FFEBE8","危险_red_04-置灰":"#F66D68","危险_red_05-悬浮":"#F34040","危险_red_06-常规":"#F0181F","危险_red_07-点击":"#C70F1B",背景_界面背景:"#F1F1F1",背景_侧导航背景:"#FAFAFC",背景_主题色背景:"#000000",背景_侧导航二级背景:"#F5F5F7","表格_gray_01-light":"#FFFFFF",表格_斑马线:"#FAFAFC",表格_悬浮:"#000000",表格_标题背景填充使用:"#000000",表格_描边:"#000000",描边_错误:"#F0181F"},N={spacing_0:0,spacing_min:2,spacing_4:4,spacing_8:8,spacing_12:12,spacing_16:16,spacing_20:20},v={s:0,m:4,l:8,xl:12},k={body_body_01:{fontSize:12,fontWeight:"regular",lineHeight:20},body_body_02:{fontSize:14,fontWeight:"regular",lineHeight:22},body_body_03:{fontSize:16,fontWeight:"regular",lineHeight:24},body_body_04:{fontSize:18,fontWeight:"regular",lineHeight:26},body_body_05:{fontSize:20,fontWeight:"regular",lineHeight:28},heading_h0:{fontSize:12,fontWeight:"medium",lineHeight:20},heading_h1:{fontSize:14,fontWeight:"medium",lineHeight:22},heading_h2:{fontSize:16,fontWeight:"medium",lineHeight:24},heading_h3:{fontSize:18,fontWeight:"medium",lineHeight:26},heading_h4:{fontSize:20,fontWeight:"medium",lineHeight:28},heading_h5:{fontSize:24,fontWeight:"medium",lineHeight:32},heading_h6:{fontSize:32,fontWeight:"medium",lineHeight:40},heading_h7:{fontSize:48,fontWeight:"medium",lineHeight:56},link_小:{fontSize:12,fontWeight:"regular",lineHeight:20},link_中:{fontSize:14,fontWeight:"regular",lineHeight:22},link_大:{fontSize:16,fontWeight:"regular",lineHeight:24}};exports.Button=E;exports.ButtonGroup=W;exports.Input=H;exports.colors=C;exports.radius=v;exports.spacing=N;exports.typography=k;
+//# 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","../src/tokens/index.ts"],"sourcesContent":["import React from 'react';\nimport './Button.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\n/** 按钮类型：实心(主要) | 描边(次要) | 文字(Ghost) */\nexport type ButtonVariant = 'solid' | 'outline' | 'ghost';\n\n/**\n * 按钮颜色主题\n * - default：常规蓝（品牌色）\n * - primary：主要蓝（同 default，语义更明确）\n * - danger：危险红\n * - warning：警告橙\n * - success：成功绿\n */\nexport type ButtonTheme = 'default' | 'primary' | 'danger' | 'warning' | 'success';\n\n/** 尺寸：大(40px) | 中(32px) | 小(24px) | 迷你(20px) */\nexport type ButtonSize = 'lg' | 'md' | 'sm' | 'mini';\n\n/** 按钮形状：半圆角(4px) | 全圆角胶囊 */\nexport type ButtonShape = 'rounded' | 'pill';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** 按钮类型，默认 solid */\n  variant?: ButtonVariant;\n  /** 颜色主题，默认 default */\n  theme?: ButtonTheme;\n  /** 尺寸，默认 md */\n  size?: ButtonSize;\n  /** 按钮形状，默认 rounded */\n  shape?: ButtonShape;\n  /**\n   * 加载状态：spinner 显示在文字左侧，按钮进入不可点击态\n   * 文字保持可见（不隐藏），视觉上表达\"处理中\"\n   */\n  loading?: boolean;\n  /** 前置图标 */\n  prefixIcon?: React.ReactNode;\n  /** 后置图标 */\n  suffixIcon?: React.ReactNode;\n  /** 仅图标模式（正方形/圆形按钮，无文字） */\n  iconOnly?: boolean;\n  /** 撑满父容器宽度 */\n  block?: boolean;\n  children?: React.ReactNode;\n}\n\n// ─── Loading Spinner ──────────────────────────────────────────────────────────\n\nconst Spinner: React.FC<{ size?: number }> = ({ size = 14 }) => (\n  <svg\n    className=\"o2-btn__spinner\"\n    width={size}\n    height={size}\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <circle\n      cx=\"8\" cy=\"8\" r=\"6\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeDasharray=\"30\"\n      strokeDashoffset=\"10\"\n    />\n  </svg>\n);\n\n// ─── Button ───────────────────────────────────────────────────────────────────\n\nconst Button: React.FC<ButtonProps> = ({\n  variant = 'solid',\n  theme = 'default',\n  size = 'md',\n  shape = 'rounded',\n  loading = false,\n  prefixIcon,\n  suffixIcon,\n  iconOnly = false,\n  block = false,\n  disabled,\n  children,\n  className = '',\n  ...rest\n}) => {\n  // primary 是 default 的语义别名\n  const resolvedTheme = theme === 'primary' ? 'default' : theme;\n  const spinnerSize = size === 'lg' ? 16 : size === 'mini' ? 12 : 14;\n  const isDisabled = disabled || loading;\n\n  const cls = [\n    'o2-btn',\n    `o2-btn--${variant}`,\n    `o2-btn--theme-${resolvedTheme}`,\n    `o2-btn--${size}`,\n    shape === 'pill' ? 'o2-btn--pill' : '',\n    iconOnly ? 'o2-btn--icon-only' : '',\n    block ? 'o2-btn--block' : '',\n    loading ? 'o2-btn--loading' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={cls} disabled={isDisabled} aria-busy={loading} {...rest}>\n      {/* loading 时：spinner 在左侧，文字保留 */}\n      {loading && <Spinner size={spinnerSize} />}\n\n      {/* 非 loading 时：前置图标 */}\n      {!loading && prefixIcon && (\n        <span className=\"o2-btn__icon o2-btn__icon--prefix\" aria-hidden=\"true\">\n          {prefixIcon}\n        </span>\n      )}\n\n      {/* 文字内容 */}\n      {children && <span className=\"o2-btn__label\">{children}</span>}\n\n      {/* 后置图标（loading 时隐藏） */}\n      {!loading && suffixIcon && (\n        <span className=\"o2-btn__icon o2-btn__icon--suffix\" aria-hidden=\"true\">\n          {suffixIcon}\n        </span>\n      )}\n    </button>\n  );\n};\n\nexport default Button;\n\n// ─── ButtonGroup ──────────────────────────────────────────────────────────────\n\nexport interface ButtonGroupProps {\n  children: React.ReactNode;\n  /** 组内按钮尺寸统一 */\n  size?: ButtonSize;\n  /** 是否全圆角 */\n  shape?: ButtonShape;\n}\n\n/**\n * ButtonGroup 组合按钮\n * 多个按钮合并为一体，共享边框，中间分隔线自动处理\n * 用法：<ButtonGroup><Button>选项A</Button><Button>选项B</Button></ButtonGroup>\n */\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({ children, size, shape }) => {\n  // 将 size/shape 注入子按钮\n  const items = React.Children.map(children, (child) => {\n    if (!React.isValidElement(child)) return child;\n    return React.cloneElement(child as React.ReactElement<ButtonProps>, {\n      size: size ?? (child.props as ButtonProps).size,\n      shape: shape ?? (child.props as ButtonProps).shape,\n    });\n  });\n\n  return (\n    <div className={`o2-btn-group ${shape === 'pill' ? 'o2-btn-group--pill' : ''}`}>\n      {items}\n    </div>\n  );\n};\n","import React, { useState } from 'react';\nimport './Input.css';\n\nexport type InputSize = 'sm' | 'md' | 'lg';\nexport type InputStatus = 'default' | 'error';\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {\n  size?: InputSize;\n  status?: InputStatus;\n  label?: string;\n  hint?: string;\n  errorMsg?: string;\n  prefix?: React.ReactNode;\n  suffix?: React.ReactNode;\n  clearable?: boolean;\n  block?: boolean;\n}\n\nconst Input: React.FC<InputProps> = ({\n  size = 'md',\n  status = 'default',\n  label,\n  hint,\n  errorMsg,\n  prefix,\n  suffix,\n  clearable = false,\n  block = false,\n  disabled,\n  value,\n  defaultValue,\n  onChange,\n  className = '',\n  ...rest\n}) => {\n  const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : innerValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setInnerValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    if (!isControlled) setInnerValue('');\n    const event = { target: { value: '' } } as React.ChangeEvent<HTMLInputElement>;\n    onChange?.(event);\n  };\n\n  const hasError = status === 'error' || !!errorMsg;\n  const wrapCls = [\n    'o2-input-wrapper',\n    `o2-input-wrapper--${size}`,\n    hasError ? 'o2-input-wrapper--error' : '',\n    disabled ? 'o2-input-wrapper--disabled' : '',\n    block ? 'o2-input-wrapper--block' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={`o2-input-field ${block ? 'o2-input-field--block' : ''}`}>\n      {label && <label className=\"o2-input-label\">{label}</label>}\n      <div className={wrapCls}>\n        {prefix && <span className=\"o2-input-affix o2-input-prefix\">{prefix}</span>}\n        <input\n          className=\"o2-input\"\n          disabled={disabled}\n          value={currentValue}\n          onChange={handleChange}\n          {...rest}\n        />\n        {clearable && currentValue && !disabled && (\n          <button\n            type=\"button\"\n            className=\"o2-input-clear\"\n            onClick={handleClear}\n            aria-label=\"清除\"\n          >\n            <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" width=\"14\" height=\"14\">\n              <path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm2.95 9.24-.71.71L8 8.71l-2.24 2.24-.71-.71L7.29 8 5.05 5.76l.71-.71L8 7.29l2.24-2.24.71.71L8.71 8l2.24 2.24z\"/>\n            </svg>\n          </button>\n        )}\n        {suffix && <span className=\"o2-input-affix o2-input-suffix\">{suffix}</span>}\n      </div>\n      {(hint || errorMsg) && (\n        <p className={`o2-input-hint ${hasError ? 'o2-input-hint--error' : ''}`}>\n          {errorMsg || hint}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default Input;\n","// ─── Design Tokens (JS/TS) ───────────────────────────────────────────────────\n// Auto-generated from variables.json\n\nexport const colors = {\n  '文字_gray_13-t1': '#121212',\n  '文字_gray_09-t2': '#666666',\n  '文字_gray_06-t3and禁用': '#A3A3AF',\n  '文字_白色': '#FFFFFF',\n  '文字_品牌': '#000000',\n  '文字_警告': '#000000',\n  '文字_危险': '#000000',\n  '文字_成功': '#000000',\n  '图标_常规': '#121212',\n  '描边_l1-gray_03': '#F1F1F1',\n  '图标_辅助': '#888996',\n  '中性_gray_01-light': '#FFFFFF',\n  '中性_gray_02-悬浮and禁用': '#F5F5F7',\n  '中性_gray_03': '#F1F1F1',\n  '中性_gray_04': '#E4E4E4',\n  '中性_gray_05-点击': '#C9C9C9',\n  '描边_l2-gray_04': '#E4E4E4',\n  '描边_l3-gray_06': '#AFAFAF',\n  '描边_悬浮and点击': '#474BFF',\n  '图标_禁用': '#A3A3AF',\n  '图标_白色': '#FFFFFF',\n  '图标_品牌': '#000000',\n  '图标_危险': '#000000',\n  '图标_警告': '#000000',\n  '图标_成功': '#000000',\n  '品牌_blue_01-light': '#E8ECFF',\n  '品牌_blue_02-浅色and点击': '#C8D0FF',\n  '品牌_blue_04-置灰': '#8791FF',\n  '品牌_blue_05-悬浮': '#676FFF',\n  '品牌_blue_06-常规': '#474BFF',\n  '品牌_blue_07-点击': '#2F2CD2',\n  '警告_golden_01-light': '#FFFAE3',\n  '警告_golden_04-置灰': '#FAD05B',\n  '警告_golden_05-悬浮': '#F9BC2D',\n  '警告_golden_06-常规': '#F7A600',\n  '警告_golden_07-点击': '#CC8100',\n  '成功_green_01-light': '#EBFFE7',\n  '成功_green_03-置灰': '#88E57D',\n  '成功_green_05-悬浮': '#2BCC25',\n  '成功_green_06-常规': '#00BF00',\n  '成功_green_07-点击': '#00A205',\n  '危险_red_01-light': '#FFEBE8',\n  '危险_red_04-置灰': '#F66D68',\n  '危险_red_05-悬浮': '#F34040',\n  '危险_red_06-常规': '#F0181F',\n  '危险_red_07-点击': '#C70F1B',\n  '背景_界面背景': '#F1F1F1',\n  '背景_侧导航背景': '#FAFAFC',\n  '背景_主题色背景': '#000000',\n  '背景_侧导航二级背景': '#F5F5F7',\n  '表格_gray_01-light': '#FFFFFF',\n  '表格_斑马线': '#FAFAFC',\n  '表格_悬浮': '#000000',\n  '表格_标题背景填充使用': '#000000',\n  '表格_描边': '#000000',\n  '描边_错误': '#F0181F',\n} as const\n\nexport const spacing = {\n  spacing_0: 0,\n  spacing_min: 2,\n  spacing_4: 4,\n  spacing_8: 8,\n  spacing_12: 12,\n  spacing_16: 16,\n  spacing_20: 20,\n} as const\n\nexport const radius = {\n  s: 0,\n  m: 4,\n  l: 8,\n  xl: 12,\n} as const\n\nexport const typography = {\n  body_body_01: { fontSize: 12, fontWeight: 'regular', lineHeight: 20 },\n  body_body_02: { fontSize: 14, fontWeight: 'regular', lineHeight: 22 },\n  body_body_03: { fontSize: 16, fontWeight: 'regular', lineHeight: 24 },\n  body_body_04: { fontSize: 18, fontWeight: 'regular', lineHeight: 26 },\n  body_body_05: { fontSize: 20, fontWeight: 'regular', lineHeight: 28 },\n  heading_h0: { fontSize: 12, fontWeight: 'medium', lineHeight: 20 },\n  heading_h1: { fontSize: 14, fontWeight: 'medium', lineHeight: 22 },\n  heading_h2: { fontSize: 16, fontWeight: 'medium', lineHeight: 24 },\n  heading_h3: { fontSize: 18, fontWeight: 'medium', lineHeight: 26 },\n  heading_h4: { fontSize: 20, fontWeight: 'medium', lineHeight: 28 },\n  heading_h5: { fontSize: 24, fontWeight: 'medium', lineHeight: 32 },\n  heading_h6: { fontSize: 32, fontWeight: 'medium', lineHeight: 40 },\n  heading_h7: { fontSize: 48, fontWeight: 'medium', lineHeight: 56 },\n  link_小: { fontSize: 12, fontWeight: 'regular', lineHeight: 20 },\n  link_中: { fontSize: 14, fontWeight: 'regular', lineHeight: 22 },\n  link_大: { fontSize: 16, fontWeight: 'regular', lineHeight: 24 },\n} as const\n"],"names":["Spinner","size","jsx","Button","variant","theme","shape","loading","prefixIcon","suffixIcon","iconOnly","block","disabled","children","className","rest","resolvedTheme","spinnerSize","isDisabled","cls","jsxs","ButtonGroup","items","React","child","Input","status","label","hint","errorMsg","prefix","suffix","clearable","value","defaultValue","onChange","innerValue","setInnerValue","useState","isControlled","currentValue","handleChange","e","handleClear","event","hasError","wrapCls","colors","spacing","radius","typography"],"mappings":"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"}

package/dist/index.css

@@ -0,0 +1 @@
+.o2-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-4);border:1px solid transparent;border-radius:var(--radius-m);font-family:var(--font-family-base);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;position:relative}.o2-btn:focus-visible{outline:2px solid var(--color-品牌-blue-06-常规);outline-offset:2px}.o2-btn--block{width:100%}.o2-btn--lg{height:40px;padding:0 var(--spacing-16);font-size:var(--font-size-body-body-03)}.o2-btn--md{height:32px;padding:0 var(--spacing-12);font-size:var(--font-size-body-body-02)}.o2-btn--sm{height:24px;padding:0 var(--spacing-8);font-size:var(--font-size-body-body-01)}.o2-btn--mini{height:20px;padding:0 var(--spacing-8);font-size:var(--font-size-body-body-01)}.o2-btn--pill{border-radius:999px}.o2-btn--icon-only.o2-btn--lg{width:40px;padding:0}.o2-btn--icon-only.o2-btn--md{width:32px;padding:0}.o2-btn--icon-only.o2-btn--sm{width:24px;padding:0}.o2-btn--icon-only.o2-btn--mini{width:20px;padding:0}.o2-btn__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1em;height:1em}.o2-btn__spinner{animation:o2-spin .7s linear infinite;flex-shrink:0}@keyframes o2-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.o2-btn--loading{cursor:not-allowed}.o2-btn--solid.o2-btn--theme-default{background-color:var(--color-品牌-blue-06-常规);border-color:var(--color-品牌-blue-06-常规);color:#fff;box-shadow:var(--shadow-elevation-品牌色)}.o2-btn--solid.o2-btn--theme-default:hover:not(:disabled){background-color:var(--color-品牌-blue-05-悬浮);border-color:var(--color-品牌-blue-05-悬浮)}.o2-btn--solid.o2-btn--theme-default:active:not(:disabled){background-color:var(--color-品牌-blue-07-点击);border-color:var(--color-品牌-blue-07-点击);box-shadow:none}.o2-btn--solid.o2-btn--theme-default:disabled{background-color:var(--color-品牌-blue-04-置灰);border-color:var(--color-品牌-blue-04-置灰);box-shadow:none;cursor:not-allowed}.o2-btn--solid.o2-btn--theme-danger{background-color:var(--color-危险-red-06-常规);border-color:var(--color-危险-red-06-常规);color:#fff}.o2-btn--solid.o2-btn--theme-danger:hover:not(:disabled){background-color:var(--color-危险-red-05-悬浮);border-color:var(--color-危险-red-05-悬浮)}.o2-btn--solid.o2-btn--theme-danger:active:not(:disabled){background-color:var(--color-危险-red-07-点击);border-color:var(--color-危险-red-07-点击)}.o2-btn--solid.o2-btn--theme-danger:disabled{background-color:var(--color-危险-red-04-置灰);border-color:var(--color-危险-red-04-置灰);cursor:not-allowed}.o2-btn--solid.o2-btn--theme-warning{background-color:var(--color-警告-golden-06-常规);border-color:var(--color-警告-golden-06-常规);color:#fff}.o2-btn--solid.o2-btn--theme-warning:hover:not(:disabled){background-color:var(--color-警告-golden-05-悬浮);border-color:var(--color-警告-golden-05-悬浮)}.o2-btn--solid.o2-btn--theme-warning:active:not(:disabled){background-color:var(--color-警告-golden-07-点击);border-color:var(--color-警告-golden-07-点击)}.o2-btn--solid.o2-btn--theme-warning:disabled{background-color:var(--color-警告-golden-04-置灰);border-color:var(--color-警告-golden-04-置灰);cursor:not-allowed}.o2-btn--solid.o2-btn--theme-success{background-color:var(--color-成功-green-06-常规);border-color:var(--color-成功-green-06-常规);color:#fff}.o2-btn--solid.o2-btn--theme-success:hover:not(:disabled){background-color:var(--color-成功-green-05-悬浮);border-color:var(--color-成功-green-05-悬浮)}.o2-btn--solid.o2-btn--theme-success:active:not(:disabled){background-color:var(--color-成功-green-07-点击);border-color:var(--color-成功-green-07-点击)}.o2-btn--solid.o2-btn--theme-success:disabled{background-color:var(--color-成功-green-03-置灰);border-color:var(--color-成功-green-03-置灰);cursor:not-allowed}.o2-btn--outline.o2-btn--theme-default{background-color:transparent;border-color:var(--color-描边-l2-gray-04);color:var(--color-文字-gray-13-t1)}.o2-btn--outline.o2-btn--theme-default:hover:not(:disabled){border-color:var(--color-描边-悬浮and点击);color:var(--color-品牌-blue-06-常规);background-color:var(--color-品牌-blue-01-light)}.o2-btn--outline.o2-btn--theme-default:active:not(:disabled){border-color:var(--color-品牌-blue-07-点击);color:var(--color-品牌-blue-07-点击);background-color:var(--color-品牌-blue-02-浅色and点击)}.o2-btn--outline.o2-btn--theme-default:disabled{border-color:var(--color-描边-l1-gray-03);color:var(--color-文字-gray-06-t3and禁用);cursor:not-allowed}.o2-btn--outline.o2-btn--theme-danger{background-color:transparent;border-color:var(--color-危险-red-06-常规);color:var(--color-危险-red-06-常规)}.o2-btn--outline.o2-btn--theme-danger:hover:not(:disabled){background-color:var(--color-危险-red-01-light);border-color:var(--color-危险-red-05-悬浮);color:var(--color-危险-red-05-悬浮)}.o2-btn--outline.o2-btn--theme-danger:active:not(:disabled){background-color:var(--color-危险-red-01-light);border-color:var(--color-危险-red-07-点击);color:var(--color-危险-red-07-点击)}.o2-btn--outline.o2-btn--theme-danger:disabled{border-color:var(--color-危险-red-04-置灰);color:var(--color-危险-red-04-置灰);cursor:not-allowed}.o2-btn--outline.o2-btn--theme-warning{background-color:transparent;border-color:var(--color-警告-golden-06-常规);color:var(--color-警告-golden-06-常规)}.o2-btn--outline.o2-btn--theme-warning:hover:not(:disabled){background-color:var(--color-警告-golden-01-light);border-color:var(--color-警告-golden-05-悬浮);color:var(--color-警告-golden-05-悬浮)}.o2-btn--outline.o2-btn--theme-warning:active:not(:disabled){background-color:var(--color-警告-golden-01-light);border-color:var(--color-警告-golden-07-点击);color:var(--color-警告-golden-07-点击)}.o2-btn--outline.o2-btn--theme-warning:disabled{border-color:var(--color-警告-golden-04-置灰);color:var(--color-警告-golden-04-置灰);cursor:not-allowed}.o2-btn--outline.o2-btn--theme-success{background-color:transparent;border-color:var(--color-成功-green-06-常规);color:var(--color-成功-green-06-常规)}.o2-btn--outline.o2-btn--theme-success:hover:not(:disabled){background-color:var(--color-成功-green-01-light);border-color:var(--color-成功-green-05-悬浮);color:var(--color-成功-green-05-悬浮)}.o2-btn--outline.o2-btn--theme-success:active:not(:disabled){background-color:var(--color-成功-green-01-light);border-color:var(--color-成功-green-07-点击);color:var(--color-成功-green-07-点击)}.o2-btn--outline.o2-btn--theme-success:disabled{border-color:var(--color-成功-green-03-置灰);color:var(--color-成功-green-03-置灰);cursor:not-allowed}.o2-btn--ghost.o2-btn--theme-default{background-color:transparent;border-color:transparent;color:var(--color-文字-gray-13-t1)}.o2-btn--ghost.o2-btn--theme-default:hover:not(:disabled){background-color:var(--color-中性-gray-02-悬浮and禁用)}.o2-btn--ghost.o2-btn--theme-default:active:not(:disabled){background-color:var(--color-中性-gray-03)}.o2-btn--ghost.o2-btn--theme-default:disabled{color:var(--color-文字-gray-06-t3and禁用);cursor:not-allowed}.o2-btn--ghost.o2-btn--theme-danger{background-color:transparent;border-color:transparent;color:var(--color-危险-red-06-常规)}.o2-btn--ghost.o2-btn--theme-danger:hover:not(:disabled){background-color:var(--color-危险-red-01-light);color:var(--color-危险-red-05-悬浮)}.o2-btn--ghost.o2-btn--theme-danger:active:not(:disabled){background-color:var(--color-危险-red-01-light);color:var(--color-危险-red-07-点击)}.o2-btn--ghost.o2-btn--theme-danger:disabled{color:var(--color-危险-red-04-置灰);cursor:not-allowed}.o2-btn--ghost.o2-btn--theme-warning{background-color:transparent;border-color:transparent;color:var(--color-警告-golden-06-常规)}.o2-btn--ghost.o2-btn--theme-warning:hover:not(:disabled){background-color:var(--color-警告-golden-01-light);color:var(--color-警告-golden-05-悬浮)}.o2-btn--ghost.o2-btn--theme-warning:active:not(:disabled){background-color:var(--color-警告-golden-01-light);color:var(--color-警告-golden-07-点击)}.o2-btn--ghost.o2-btn--theme-warning:disabled{color:var(--color-警告-golden-04-置灰);cursor:not-allowed}.o2-btn--ghost.o2-btn--theme-success{background-color:transparent;border-color:transparent;color:var(--color-成功-green-06-常规)}.o2-btn--ghost.o2-btn--theme-success:hover:not(:disabled){background-color:var(--color-成功-green-01-light);color:var(--color-成功-green-05-悬浮)}.o2-btn--ghost.o2-btn--theme-success:active:not(:disabled){background-color:var(--color-成功-green-01-light);color:var(--color-成功-green-07-点击)}.o2-btn--ghost.o2-btn--theme-success:disabled{color:var(--color-成功-green-03-置灰);cursor:not-allowed}.o2-btn-group{display:inline-flex;align-items:stretch}.o2-btn-group .o2-btn{border-radius:0;margin-right:-1px;position:relative;z-index:0}.o2-btn-group .o2-btn:hover,.o2-btn-group .o2-btn:focus-visible{z-index:1}.o2-btn-group .o2-btn:first-child{border-radius:var(--radius-m) 0 0 var(--radius-m)}.o2-btn-group .o2-btn:last-child{border-radius:0 var(--radius-m) var(--radius-m) 0;margin-right:0}.o2-btn-group .o2-btn:only-child{border-radius:var(--radius-m)}.o2-btn-group--pill .o2-btn:first-child{border-radius:999px 0 0 999px}.o2-btn-group--pill .o2-btn:last-child{border-radius:0 999px 999px 0}.o2-input-field{display:inline-flex;flex-direction:column;gap:4px;min-width:0}.o2-input-field--block{display:flex;width:100%}.o2-input-label{font-size:13px;font-weight:500;color:var(--color-文字-gray-13-t1, #121212);line-height:20px}.o2-input-wrapper{position:relative;display:inline-flex;align-items:center;background:var(--color-中性-gray-01-light, #FFFFFF);border:1px solid var(--color-描边-l2-gray-04, #E4E4E4);border-radius:var(--radius-m, 4px);transition:border-color .2s,box-shadow .2s;cursor:text;box-sizing:border-box}.o2-input-wrapper--block{width:100%}.o2-input-wrapper:hover:not(.o2-input-wrapper--disabled){border-color:var(--color-描边-l3-gray-06, #AFAFAF)}.o2-input-wrapper:focus-within:not(.o2-input-wrapper--disabled){border-color:var(--color-描边-悬浮and点击, #474BFF);box-shadow:0 0 0 2px #474bff1f;outline:none}.o2-input-wrapper--error{border-color:var(--color-描边-错误, #F0181F)!important}.o2-input-wrapper--error:focus-within{box-shadow:0 0 0 2px #f0181f1f!important}.o2-input-wrapper--disabled{background:var(--color-中性-gray-02-悬浮and禁用, #F5F5F7);border-color:var(--color-描边-l2-gray-04, #E4E4E4);cursor:not-allowed}.o2-input-wrapper--lg{height:40px;padding:0 12px;gap:6px}.o2-input-wrapper--md{height:32px;padding:0 10px;gap:6px}.o2-input-wrapper--sm{height:24px;padding:0 8px;gap:4px}.o2-input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--color-文字-gray-13-t1, #121212);caret-color:var(--color-品牌-blue-06-常规, #474BFF);font-family:var(--font-family-base, "PingFang SC", sans-serif);padding:0}.o2-input-wrapper--lg .o2-input,.o2-input-wrapper--md .o2-input{font-size:14px}.o2-input-wrapper--sm .o2-input{font-size:12px}.o2-input::placeholder{color:var(--color-文字-gray-06-t3and禁用, #A3A3AF)}.o2-input:disabled{cursor:not-allowed;color:var(--color-文字-gray-06-t3and禁用, #A3A3AF)}.o2-input-affix{display:flex;align-items:center;flex-shrink:0;color:var(--color-图标-辅助, #888996);font-size:16px;line-height:1}.o2-input-wrapper--sm .o2-input-affix{font-size:14px}.o2-input-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;background:transparent;color:var(--color-图标-辅助, #888996);cursor:pointer;border-radius:50%;transition:color .15s,background-color .15s;width:18px;height:18px}.o2-input-clear:hover{color:var(--color-文字-gray-13-t1, #121212);background:var(--color-中性-gray-03, #F1F1F1)}.o2-input-hint{font-size:12px;color:var(--color-文字-gray-09-t2, #666666);margin:0;line-height:20px}.o2-input-hint--error{color:var(--color-文字-危险, #F0181F)}[data-theme=dark] .o2-input-wrapper{background:var(--color-中性-gray-02-悬浮and禁用, #252525);border-color:var(--color-描边-l2-gray-04, #3A3A3A)}[data-theme=dark] .o2-input-wrapper--disabled{background:var(--color-中性-gray-03, #2E2E2E)}[data-theme=dark] .o2-input-clear:hover{background:var(--color-中性-gray-04, #3A3A3A)}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Button, ButtonGroup } from './components/Button/Button';
+export type { ButtonProps, ButtonVariant, ButtonTheme, ButtonSize, ButtonShape, ButtonGroupProps, } from './components/Button/Button';
+export { default as Input } from './components/Input/Input';
+export type { InputProps, InputSize, InputStatus } from './components/Input/Input';
+export { colors, spacing, radius, typography } from './tokens/index';

package/dist/index.mjs

@@ -0,0 +1,220 @@
+import { jsxs as z, jsx as n } from "react/jsx-runtime";
+import y, { useState as B } from "react";
+const C = ({ size: i = 14 }) => /* @__PURE__ */ n(
+  "svg",
+  {
+    className: "o2-btn__spinner",
+    width: i,
+    height: i,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ n(
+      "circle",
+      {
+        cx: "8",
+        cy: "8",
+        r: "6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeDasharray: "30",
+        strokeDashoffset: "10"
+      }
+    )
+  }
+), k = ({
+  variant: i = "solid",
+  theme: l = "default",
+  size: t = "md",
+  shape: r = "rounded",
+  loading: e = !1,
+  prefixIcon: _,
+  suffixIcon: a,
+  iconOnly: u = !1,
+  block: g = !1,
+  disabled: s,
+  children: F,
+  className: c = "",
+  ...o
+}) => {
+  const p = l === "primary" ? "default" : l, f = t === "lg" ? 16 : t === "mini" ? 12 : 14, m = s || e, d = [
+    "o2-btn",
+    `o2-btn--${i}`,
+    `o2-btn--theme-${p}`,
+    `o2-btn--${t}`,
+    r === "pill" ? "o2-btn--pill" : "",
+    u ? "o2-btn--icon-only" : "",
+    g ? "o2-btn--block" : "",
+    e ? "o2-btn--loading" : "",
+    c
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ z("button", { className: d, disabled: m, "aria-busy": e, ...o, children: [
+    e && /* @__PURE__ */ n(C, { size: f }),
+    !e && _ && /* @__PURE__ */ n("span", { className: "o2-btn__icon o2-btn__icon--prefix", "aria-hidden": "true", children: _ }),
+    F && /* @__PURE__ */ n("span", { className: "o2-btn__label", children: F }),
+    !e && a && /* @__PURE__ */ n("span", { className: "o2-btn__icon o2-btn__icon--suffix", "aria-hidden": "true", children: a })
+  ] });
+}, w = ({ children: i, size: l, shape: t }) => {
+  const r = y.Children.map(i, (e) => y.isValidElement(e) ? y.cloneElement(e, {
+    size: l ?? e.props.size,
+    shape: t ?? e.props.shape
+  }) : e);
+  return /* @__PURE__ */ n("div", { className: `o2-btn-group ${t === "pill" ? "o2-btn-group--pill" : ""}`, children: r });
+}, x = ({
+  size: i = "md",
+  status: l = "default",
+  label: t,
+  hint: r,
+  errorMsg: e,
+  prefix: _,
+  suffix: a,
+  clearable: u = !1,
+  block: g = !1,
+  disabled: s,
+  value: F,
+  defaultValue: c,
+  onChange: o,
+  className: p = "",
+  ...f
+}) => {
+  const [m, d] = B(c ?? ""), b = F !== void 0, S = b ? F : m, E = (h) => {
+    b || d(h.target.value), o == null || o(h);
+  }, W = () => {
+    b || d("");
+    const h = { target: { value: "" } };
+    o == null || o(h);
+  }, A = l === "error" || !!e, H = [
+    "o2-input-wrapper",
+    `o2-input-wrapper--${i}`,
+    A ? "o2-input-wrapper--error" : "",
+    s ? "o2-input-wrapper--disabled" : "",
+    g ? "o2-input-wrapper--block" : "",
+    p
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ z("div", { className: `o2-input-field ${g ? "o2-input-field--block" : ""}`, children: [
+    t && /* @__PURE__ */ n("label", { className: "o2-input-label", children: t }),
+    /* @__PURE__ */ z("div", { className: H, children: [
+      _ && /* @__PURE__ */ n("span", { className: "o2-input-affix o2-input-prefix", children: _ }),
+      /* @__PURE__ */ n(
+        "input",
+        {
+          className: "o2-input",
+          disabled: s,
+          value: S,
+          onChange: E,
+          ...f
+        }
+      ),
+      u && S && !s && /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: "o2-input-clear",
+          onClick: W,
+          "aria-label": "清除",
+          children: /* @__PURE__ */ n("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "14", height: "14", children: /* @__PURE__ */ n("path", { d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm2.95 9.24-.71.71L8 8.71l-2.24 2.24-.71-.71L7.29 8 5.05 5.76l.71-.71L8 7.29l2.24-2.24.71.71L8.71 8l2.24 2.24z" }) })
+        }
+      ),
+      a && /* @__PURE__ */ n("span", { className: "o2-input-affix o2-input-suffix", children: a })
+    ] }),
+    (r || e) && /* @__PURE__ */ n("p", { className: `o2-input-hint ${A ? "o2-input-hint--error" : ""}`, children: e || r })
+  ] });
+}, D = {
+  "文字_gray_13-t1": "#121212",
+  "文字_gray_09-t2": "#666666",
+  "文字_gray_06-t3and禁用": "#A3A3AF",
+  文字_白色: "#FFFFFF",
+  文字_品牌: "#000000",
+  文字_警告: "#000000",
+  文字_危险: "#000000",
+  文字_成功: "#000000",
+  图标_常规: "#121212",
+  "描边_l1-gray_03": "#F1F1F1",
+  图标_辅助: "#888996",
+  "中性_gray_01-light": "#FFFFFF",
+  "中性_gray_02-悬浮and禁用": "#F5F5F7",
+  中性_gray_03: "#F1F1F1",
+  中性_gray_04: "#E4E4E4",
+  "中性_gray_05-点击": "#C9C9C9",
+  "描边_l2-gray_04": "#E4E4E4",
+  "描边_l3-gray_06": "#AFAFAF",
+  描边_悬浮and点击: "#474BFF",
+  图标_禁用: "#A3A3AF",
+  图标_白色: "#FFFFFF",
+  图标_品牌: "#000000",
+  图标_危险: "#000000",
+  图标_警告: "#000000",
+  图标_成功: "#000000",
+  "品牌_blue_01-light": "#E8ECFF",
+  "品牌_blue_02-浅色and点击": "#C8D0FF",
+  "品牌_blue_04-置灰": "#8791FF",
+  "品牌_blue_05-悬浮": "#676FFF",
+  "品牌_blue_06-常规": "#474BFF",
+  "品牌_blue_07-点击": "#2F2CD2",
+  "警告_golden_01-light": "#FFFAE3",
+  "警告_golden_04-置灰": "#FAD05B",
+  "警告_golden_05-悬浮": "#F9BC2D",
+  "警告_golden_06-常规": "#F7A600",
+  "警告_golden_07-点击": "#CC8100",
+  "成功_green_01-light": "#EBFFE7",
+  "成功_green_03-置灰": "#88E57D",
+  "成功_green_05-悬浮": "#2BCC25",
+  "成功_green_06-常规": "#00BF00",
+  "成功_green_07-点击": "#00A205",
+  "危险_red_01-light": "#FFEBE8",
+  "危险_red_04-置灰": "#F66D68",
+  "危险_red_05-悬浮": "#F34040",
+  "危险_red_06-常规": "#F0181F",
+  "危险_red_07-点击": "#C70F1B",
+  背景_界面背景: "#F1F1F1",
+  背景_侧导航背景: "#FAFAFC",
+  背景_主题色背景: "#000000",
+  背景_侧导航二级背景: "#F5F5F7",
+  "表格_gray_01-light": "#FFFFFF",
+  表格_斑马线: "#FAFAFC",
+  表格_悬浮: "#000000",
+  表格_标题背景填充使用: "#000000",
+  表格_描边: "#000000",
+  描边_错误: "#F0181F"
+}, $ = {
+  spacing_0: 0,
+  spacing_min: 2,
+  spacing_4: 4,
+  spacing_8: 8,
+  spacing_12: 12,
+  spacing_16: 16,
+  spacing_20: 20
+}, L = {
+  s: 0,
+  m: 4,
+  l: 8,
+  xl: 12
+}, j = {
+  body_body_01: { fontSize: 12, fontWeight: "regular", lineHeight: 20 },
+  body_body_02: { fontSize: 14, fontWeight: "regular", lineHeight: 22 },
+  body_body_03: { fontSize: 16, fontWeight: "regular", lineHeight: 24 },
+  body_body_04: { fontSize: 18, fontWeight: "regular", lineHeight: 26 },
+  body_body_05: { fontSize: 20, fontWeight: "regular", lineHeight: 28 },
+  heading_h0: { fontSize: 12, fontWeight: "medium", lineHeight: 20 },
+  heading_h1: { fontSize: 14, fontWeight: "medium", lineHeight: 22 },
+  heading_h2: { fontSize: 16, fontWeight: "medium", lineHeight: 24 },
+  heading_h3: { fontSize: 18, fontWeight: "medium", lineHeight: 26 },
+  heading_h4: { fontSize: 20, fontWeight: "medium", lineHeight: 28 },
+  heading_h5: { fontSize: 24, fontWeight: "medium", lineHeight: 32 },
+  heading_h6: { fontSize: 32, fontWeight: "medium", lineHeight: 40 },
+  heading_h7: { fontSize: 48, fontWeight: "medium", lineHeight: 56 },
+  link_小: { fontSize: 12, fontWeight: "regular", lineHeight: 20 },
+  link_中: { fontSize: 14, fontWeight: "regular", lineHeight: 22 },
+  link_大: { fontSize: 16, fontWeight: "regular", lineHeight: 24 }
+};
+export {
+  k as Button,
+  w as ButtonGroup,
+  x as Input,
+  D as colors,
+  L as radius,
+  $ as spacing,
+  j as typography
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/components/Button/Button.tsx","../src/components/Input/Input.tsx","../src/tokens/index.ts"],"sourcesContent":["import React from 'react';\nimport './Button.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\n/** 按钮类型：实心(主要) | 描边(次要) | 文字(Ghost) */\nexport type ButtonVariant = 'solid' | 'outline' | 'ghost';\n\n/**\n * 按钮颜色主题\n * - default：常规蓝（品牌色）\n * - primary：主要蓝（同 default，语义更明确）\n * - danger：危险红\n * - warning：警告橙\n * - success：成功绿\n */\nexport type ButtonTheme = 'default' | 'primary' | 'danger' | 'warning' | 'success';\n\n/** 尺寸：大(40px) | 中(32px) | 小(24px) | 迷你(20px) */\nexport type ButtonSize = 'lg' | 'md' | 'sm' | 'mini';\n\n/** 按钮形状：半圆角(4px) | 全圆角胶囊 */\nexport type ButtonShape = 'rounded' | 'pill';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** 按钮类型，默认 solid */\n  variant?: ButtonVariant;\n  /** 颜色主题，默认 default */\n  theme?: ButtonTheme;\n  /** 尺寸，默认 md */\n  size?: ButtonSize;\n  /** 按钮形状，默认 rounded */\n  shape?: ButtonShape;\n  /**\n   * 加载状态：spinner 显示在文字左侧，按钮进入不可点击态\n   * 文字保持可见（不隐藏），视觉上表达\"处理中\"\n   */\n  loading?: boolean;\n  /** 前置图标 */\n  prefixIcon?: React.ReactNode;\n  /** 后置图标 */\n  suffixIcon?: React.ReactNode;\n  /** 仅图标模式（正方形/圆形按钮，无文字） */\n  iconOnly?: boolean;\n  /** 撑满父容器宽度 */\n  block?: boolean;\n  children?: React.ReactNode;\n}\n\n// ─── Loading Spinner ──────────────────────────────────────────────────────────\n\nconst Spinner: React.FC<{ size?: number }> = ({ size = 14 }) => (\n  <svg\n    className=\"o2-btn__spinner\"\n    width={size}\n    height={size}\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <circle\n      cx=\"8\" cy=\"8\" r=\"6\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeDasharray=\"30\"\n      strokeDashoffset=\"10\"\n    />\n  </svg>\n);\n\n// ─── Button ───────────────────────────────────────────────────────────────────\n\nconst Button: React.FC<ButtonProps> = ({\n  variant = 'solid',\n  theme = 'default',\n  size = 'md',\n  shape = 'rounded',\n  loading = false,\n  prefixIcon,\n  suffixIcon,\n  iconOnly = false,\n  block = false,\n  disabled,\n  children,\n  className = '',\n  ...rest\n}) => {\n  // primary 是 default 的语义别名\n  const resolvedTheme = theme === 'primary' ? 'default' : theme;\n  const spinnerSize = size === 'lg' ? 16 : size === 'mini' ? 12 : 14;\n  const isDisabled = disabled || loading;\n\n  const cls = [\n    'o2-btn',\n    `o2-btn--${variant}`,\n    `o2-btn--theme-${resolvedTheme}`,\n    `o2-btn--${size}`,\n    shape === 'pill' ? 'o2-btn--pill' : '',\n    iconOnly ? 'o2-btn--icon-only' : '',\n    block ? 'o2-btn--block' : '',\n    loading ? 'o2-btn--loading' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={cls} disabled={isDisabled} aria-busy={loading} {...rest}>\n      {/* loading 时：spinner 在左侧，文字保留 */}\n      {loading && <Spinner size={spinnerSize} />}\n\n      {/* 非 loading 时：前置图标 */}\n      {!loading && prefixIcon && (\n        <span className=\"o2-btn__icon o2-btn__icon--prefix\" aria-hidden=\"true\">\n          {prefixIcon}\n        </span>\n      )}\n\n      {/* 文字内容 */}\n      {children && <span className=\"o2-btn__label\">{children}</span>}\n\n      {/* 后置图标（loading 时隐藏） */}\n      {!loading && suffixIcon && (\n        <span className=\"o2-btn__icon o2-btn__icon--suffix\" aria-hidden=\"true\">\n          {suffixIcon}\n        </span>\n      )}\n    </button>\n  );\n};\n\nexport default Button;\n\n// ─── ButtonGroup ──────────────────────────────────────────────────────────────\n\nexport interface ButtonGroupProps {\n  children: React.ReactNode;\n  /** 组内按钮尺寸统一 */\n  size?: ButtonSize;\n  /** 是否全圆角 */\n  shape?: ButtonShape;\n}\n\n/**\n * ButtonGroup 组合按钮\n * 多个按钮合并为一体，共享边框，中间分隔线自动处理\n * 用法：<ButtonGroup><Button>选项A</Button><Button>选项B</Button></ButtonGroup>\n */\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({ children, size, shape }) => {\n  // 将 size/shape 注入子按钮\n  const items = React.Children.map(children, (child) => {\n    if (!React.isValidElement(child)) return child;\n    return React.cloneElement(child as React.ReactElement<ButtonProps>, {\n      size: size ?? (child.props as ButtonProps).size,\n      shape: shape ?? (child.props as ButtonProps).shape,\n    });\n  });\n\n  return (\n    <div className={`o2-btn-group ${shape === 'pill' ? 'o2-btn-group--pill' : ''}`}>\n      {items}\n    </div>\n  );\n};\n","import React, { useState } from 'react';\nimport './Input.css';\n\nexport type InputSize = 'sm' | 'md' | 'lg';\nexport type InputStatus = 'default' | 'error';\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {\n  size?: InputSize;\n  status?: InputStatus;\n  label?: string;\n  hint?: string;\n  errorMsg?: string;\n  prefix?: React.ReactNode;\n  suffix?: React.ReactNode;\n  clearable?: boolean;\n  block?: boolean;\n}\n\nconst Input: React.FC<InputProps> = ({\n  size = 'md',\n  status = 'default',\n  label,\n  hint,\n  errorMsg,\n  prefix,\n  suffix,\n  clearable = false,\n  block = false,\n  disabled,\n  value,\n  defaultValue,\n  onChange,\n  className = '',\n  ...rest\n}) => {\n  const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : innerValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setInnerValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    if (!isControlled) setInnerValue('');\n    const event = { target: { value: '' } } as React.ChangeEvent<HTMLInputElement>;\n    onChange?.(event);\n  };\n\n  const hasError = status === 'error' || !!errorMsg;\n  const wrapCls = [\n    'o2-input-wrapper',\n    `o2-input-wrapper--${size}`,\n    hasError ? 'o2-input-wrapper--error' : '',\n    disabled ? 'o2-input-wrapper--disabled' : '',\n    block ? 'o2-input-wrapper--block' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={`o2-input-field ${block ? 'o2-input-field--block' : ''}`}>\n      {label && <label className=\"o2-input-label\">{label}</label>}\n      <div className={wrapCls}>\n        {prefix && <span className=\"o2-input-affix o2-input-prefix\">{prefix}</span>}\n        <input\n          className=\"o2-input\"\n          disabled={disabled}\n          value={currentValue}\n          onChange={handleChange}\n          {...rest}\n        />\n        {clearable && currentValue && !disabled && (\n          <button\n            type=\"button\"\n            className=\"o2-input-clear\"\n            onClick={handleClear}\n            aria-label=\"清除\"\n          >\n            <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" width=\"14\" height=\"14\">\n              <path d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm2.95 9.24-.71.71L8 8.71l-2.24 2.24-.71-.71L7.29 8 5.05 5.76l.71-.71L8 7.29l2.24-2.24.71.71L8.71 8l2.24 2.24z\"/>\n            </svg>\n          </button>\n        )}\n        {suffix && <span className=\"o2-input-affix o2-input-suffix\">{suffix}</span>}\n      </div>\n      {(hint || errorMsg) && (\n        <p className={`o2-input-hint ${hasError ? 'o2-input-hint--error' : ''}`}>\n          {errorMsg || hint}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default Input;\n","// ─── Design Tokens (JS/TS) ───────────────────────────────────────────────────\n// Auto-generated from variables.json\n\nexport const colors = {\n  '文字_gray_13-t1': '#121212',\n  '文字_gray_09-t2': '#666666',\n  '文字_gray_06-t3and禁用': '#A3A3AF',\n  '文字_白色': '#FFFFFF',\n  '文字_品牌': '#000000',\n  '文字_警告': '#000000',\n  '文字_危险': '#000000',\n  '文字_成功': '#000000',\n  '图标_常规': '#121212',\n  '描边_l1-gray_03': '#F1F1F1',\n  '图标_辅助': '#888996',\n  '中性_gray_01-light': '#FFFFFF',\n  '中性_gray_02-悬浮and禁用': '#F5F5F7',\n  '中性_gray_03': '#F1F1F1',\n  '中性_gray_04': '#E4E4E4',\n  '中性_gray_05-点击': '#C9C9C9',\n  '描边_l2-gray_04': '#E4E4E4',\n  '描边_l3-gray_06': '#AFAFAF',\n  '描边_悬浮and点击': '#474BFF',\n  '图标_禁用': '#A3A3AF',\n  '图标_白色': '#FFFFFF',\n  '图标_品牌': '#000000',\n  '图标_危险': '#000000',\n  '图标_警告': '#000000',\n  '图标_成功': '#000000',\n  '品牌_blue_01-light': '#E8ECFF',\n  '品牌_blue_02-浅色and点击': '#C8D0FF',\n  '品牌_blue_04-置灰': '#8791FF',\n  '品牌_blue_05-悬浮': '#676FFF',\n  '品牌_blue_06-常规': '#474BFF',\n  '品牌_blue_07-点击': '#2F2CD2',\n  '警告_golden_01-light': '#FFFAE3',\n  '警告_golden_04-置灰': '#FAD05B',\n  '警告_golden_05-悬浮': '#F9BC2D',\n  '警告_golden_06-常规': '#F7A600',\n  '警告_golden_07-点击': '#CC8100',\n  '成功_green_01-light': '#EBFFE7',\n  '成功_green_03-置灰': '#88E57D',\n  '成功_green_05-悬浮': '#2BCC25',\n  '成功_green_06-常规': '#00BF00',\n  '成功_green_07-点击': '#00A205',\n  '危险_red_01-light': '#FFEBE8',\n  '危险_red_04-置灰': '#F66D68',\n  '危险_red_05-悬浮': '#F34040',\n  '危险_red_06-常规': '#F0181F',\n  '危险_red_07-点击': '#C70F1B',\n  '背景_界面背景': '#F1F1F1',\n  '背景_侧导航背景': '#FAFAFC',\n  '背景_主题色背景': '#000000',\n  '背景_侧导航二级背景': '#F5F5F7',\n  '表格_gray_01-light': '#FFFFFF',\n  '表格_斑马线': '#FAFAFC',\n  '表格_悬浮': '#000000',\n  '表格_标题背景填充使用': '#000000',\n  '表格_描边': '#000000',\n  '描边_错误': '#F0181F',\n} as const\n\nexport const spacing = {\n  spacing_0: 0,\n  spacing_min: 2,\n  spacing_4: 4,\n  spacing_8: 8,\n  spacing_12: 12,\n  spacing_16: 16,\n  spacing_20: 20,\n} as const\n\nexport const radius = {\n  s: 0,\n  m: 4,\n  l: 8,\n  xl: 12,\n} as const\n\nexport const typography = {\n  body_body_01: { fontSize: 12, fontWeight: 'regular', lineHeight: 20 },\n  body_body_02: { fontSize: 14, fontWeight: 'regular', lineHeight: 22 },\n  body_body_03: { fontSize: 16, fontWeight: 'regular', lineHeight: 24 },\n  body_body_04: { fontSize: 18, fontWeight: 'regular', lineHeight: 26 },\n  body_body_05: { fontSize: 20, fontWeight: 'regular', lineHeight: 28 },\n  heading_h0: { fontSize: 12, fontWeight: 'medium', lineHeight: 20 },\n  heading_h1: { fontSize: 14, fontWeight: 'medium', lineHeight: 22 },\n  heading_h2: { fontSize: 16, fontWeight: 'medium', lineHeight: 24 },\n  heading_h3: { fontSize: 18, fontWeight: 'medium', lineHeight: 26 },\n  heading_h4: { fontSize: 20, fontWeight: 'medium', lineHeight: 28 },\n  heading_h5: { fontSize: 24, fontWeight: 'medium', lineHeight: 32 },\n  heading_h6: { fontSize: 32, fontWeight: 'medium', lineHeight: 40 },\n  heading_h7: { fontSize: 48, fontWeight: 'medium', lineHeight: 56 },\n  link_小: { fontSize: 12, fontWeight: 'regular', lineHeight: 20 },\n  link_中: { fontSize: 14, fontWeight: 'regular', lineHeight: 22 },\n  link_大: { fontSize: 16, fontWeight: 'regular', lineHeight: 24 },\n} as const\n"],"names":["Spinner","size","jsx","Button","variant","theme","shape","loading","prefixIcon","suffixIcon","iconOnly","block","disabled","children","className","rest","resolvedTheme","spinnerSize","isDisabled","cls","jsxs","ButtonGroup","items","React","child","Input","status","label","hint","errorMsg","prefix","suffix","clearable","value","defaultValue","onChange","innerValue","setInnerValue","useState","isControlled","currentValue","handleChange","e","handleClear","event","hasError","wrapCls","colors","spacing","radius","typography"],"mappings":"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"}

package/dist/tokens/index.d.ts

@@ -0,0 +1,155 @@
+export declare const colors: {
+    readonly '\u6587\u5B57_gray_13-t1': "#121212";
+    readonly '\u6587\u5B57_gray_09-t2': "#666666";
+    readonly '\u6587\u5B57_gray_06-t3and\u7981\u7528': "#A3A3AF";
+    readonly 文字_白色: "#FFFFFF";
+    readonly 文字_品牌: "#000000";
+    readonly 文字_警告: "#000000";
+    readonly 文字_危险: "#000000";
+    readonly 文字_成功: "#000000";
+    readonly 图标_常规: "#121212";
+    readonly '\u63CF\u8FB9_l1-gray_03': "#F1F1F1";
+    readonly 图标_辅助: "#888996";
+    readonly '\u4E2D\u6027_gray_01-light': "#FFFFFF";
+    readonly '\u4E2D\u6027_gray_02-\u60AC\u6D6Eand\u7981\u7528': "#F5F5F7";
+    readonly 中性_gray_03: "#F1F1F1";
+    readonly 中性_gray_04: "#E4E4E4";
+    readonly '\u4E2D\u6027_gray_05-\u70B9\u51FB': "#C9C9C9";
+    readonly '\u63CF\u8FB9_l2-gray_04': "#E4E4E4";
+    readonly '\u63CF\u8FB9_l3-gray_06': "#AFAFAF";
+    readonly 描边_悬浮and点击: "#474BFF";
+    readonly 图标_禁用: "#A3A3AF";
+    readonly 图标_白色: "#FFFFFF";
+    readonly 图标_品牌: "#000000";
+    readonly 图标_危险: "#000000";
+    readonly 图标_警告: "#000000";
+    readonly 图标_成功: "#000000";
+    readonly '\u54C1\u724C_blue_01-light': "#E8ECFF";
+    readonly '\u54C1\u724C_blue_02-\u6D45\u8272and\u70B9\u51FB': "#C8D0FF";
+    readonly '\u54C1\u724C_blue_04-\u7F6E\u7070': "#8791FF";
+    readonly '\u54C1\u724C_blue_05-\u60AC\u6D6E': "#676FFF";
+    readonly '\u54C1\u724C_blue_06-\u5E38\u89C4': "#474BFF";
+    readonly '\u54C1\u724C_blue_07-\u70B9\u51FB': "#2F2CD2";
+    readonly '\u8B66\u544A_golden_01-light': "#FFFAE3";
+    readonly '\u8B66\u544A_golden_04-\u7F6E\u7070': "#FAD05B";
+    readonly '\u8B66\u544A_golden_05-\u60AC\u6D6E': "#F9BC2D";
+    readonly '\u8B66\u544A_golden_06-\u5E38\u89C4': "#F7A600";
+    readonly '\u8B66\u544A_golden_07-\u70B9\u51FB': "#CC8100";
+    readonly '\u6210\u529F_green_01-light': "#EBFFE7";
+    readonly '\u6210\u529F_green_03-\u7F6E\u7070': "#88E57D";
+    readonly '\u6210\u529F_green_05-\u60AC\u6D6E': "#2BCC25";
+    readonly '\u6210\u529F_green_06-\u5E38\u89C4': "#00BF00";
+    readonly '\u6210\u529F_green_07-\u70B9\u51FB': "#00A205";
+    readonly '\u5371\u9669_red_01-light': "#FFEBE8";
+    readonly '\u5371\u9669_red_04-\u7F6E\u7070': "#F66D68";
+    readonly '\u5371\u9669_red_05-\u60AC\u6D6E': "#F34040";
+    readonly '\u5371\u9669_red_06-\u5E38\u89C4': "#F0181F";
+    readonly '\u5371\u9669_red_07-\u70B9\u51FB': "#C70F1B";
+    readonly 背景_界面背景: "#F1F1F1";
+    readonly 背景_侧导航背景: "#FAFAFC";
+    readonly 背景_主题色背景: "#000000";
+    readonly 背景_侧导航二级背景: "#F5F5F7";
+    readonly '\u8868\u683C_gray_01-light': "#FFFFFF";
+    readonly 表格_斑马线: "#FAFAFC";
+    readonly 表格_悬浮: "#000000";
+    readonly 表格_标题背景填充使用: "#000000";
+    readonly 表格_描边: "#000000";
+    readonly 描边_错误: "#F0181F";
+};
+export declare const spacing: {
+    readonly spacing_0: 0;
+    readonly spacing_min: 2;
+    readonly spacing_4: 4;
+    readonly spacing_8: 8;
+    readonly spacing_12: 12;
+    readonly spacing_16: 16;
+    readonly spacing_20: 20;
+};
+export declare const radius: {
+    readonly s: 0;
+    readonly m: 4;
+    readonly l: 8;
+    readonly xl: 12;
+};
+export declare const typography: {
+    readonly body_body_01: {
+        readonly fontSize: 12;
+        readonly fontWeight: "regular";
+        readonly lineHeight: 20;
+    };
+    readonly body_body_02: {
+        readonly fontSize: 14;
+        readonly fontWeight: "regular";
+        readonly lineHeight: 22;
+    };
+    readonly body_body_03: {
+        readonly fontSize: 16;
+        readonly fontWeight: "regular";
+        readonly lineHeight: 24;
+    };
+    readonly body_body_04: {
+        readonly fontSize: 18;
+        readonly fontWeight: "regular";
+        readonly lineHeight: 26;
+    };
+    readonly body_body_05: {
+        readonly fontSize: 20;
+        readonly fontWeight: "regular";
+        readonly lineHeight: 28;
+    };
+    readonly heading_h0: {
+        readonly fontSize: 12;
+        readonly fontWeight: "medium";
+        readonly lineHeight: 20;
+    };
+    readonly heading_h1: {
+        readonly fontSize: 14;
+        readonly fontWeight: "medium";
+        readonly lineHeight: 22;
+    };
+    readonly heading_h2: {
+        readonly fontSize: 16;
+        readonly fontWeight: "medium";
+        readonly lineHeight: 24;
+    };
+    readonly heading_h3: {
+        readonly fontSize: 18;
+        readonly fontWeight: "medium";
+        readonly lineHeight: 26;
+    };
+    readonly heading_h4: {
+        readonly fontSize: 20;
+        readonly fontWeight: "medium";
+        readonly lineHeight: 28;
+    };
+    readonly heading_h5: {
+        readonly fontSize: 24;
+        readonly fontWeight: "medium";
+        readonly lineHeight: 32;
+    };
+    readonly heading_h6: {
+        readonly fontSize: 32;
+        readonly fontWeight: "medium";
+        readonly lineHeight: 40;
+    };
+    readonly heading_h7: {
+        readonly fontSize: 48;
+        readonly fontWeight: "medium";
+        readonly lineHeight: 56;
+    };
+    readonly link_小: {
+        readonly fontSize: 12;
+        readonly fontWeight: "regular";
+        readonly lineHeight: 20;
+    };
+    readonly link_中: {
+        readonly fontSize: 14;
+        readonly fontWeight: "regular";
+        readonly lineHeight: 22;
+    };
+    readonly link_大: {
+        readonly fontSize: 16;
+        readonly fontWeight: "regular";
+        readonly lineHeight: 24;
+    };
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@lillian10231023/o2-design-system-1",
+  "version": "0.1.0",
+  "description": "O2 Design System — React component library with design tokens",
+  "keywords": ["react", "component-library", "design-system", "ui", "o2"],
+  "author": "O2 Design Team",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build:lib": "tsc --project tsconfig.lib.json --noEmit && vite build",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "~5.6.2",
+    "vite": "^6.4.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/o2-design-system.git"
+  },
+  "homepage": "https://github.com/your-org/o2-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/your-org/o2-design-system/issues"
+  }
+}