tona-ui 1.0.21 → 1.0.22

package/README.md

@@ -1,81 +1,118 @@
 # tona-ui
 
-Tona UI 组件库，提供可复用的 Preact 组件。
+<p align="center">
+  <img src="../../assets/tona.png" alt="Tona" width="100" />
+</p>
 
-## 安装
+<p align="center">
+  UI component library for Tona themes, built with Preact.
+</p>
 
-```bash
-pnpm add tona-ui
-```
+<p align="center">
+  <a href="https://www.npmjs.com/package/tona-ui"><img src="https://img.shields.io/npm/v/tona-ui?style=flat-square" alt="npm version"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/npm/l/tona-ui?style=flat-square" alt="license"></a>
+  <a href="https://preactjs.com"><img src="https://img.shields.io/badge/Preact->=10.0.0-673AB8?style=flat-square&logo=preact" alt="Preact"></a>
+</p>
 
-## 组件
+**English** | [中文](./README.zh-CN.md)
 
-### Button
+## Features
 
-按钮组件，支持多种变体和尺寸。
+- **Preact Based** - Lightweight components for Preact
+- **Slot Component** - Radix UI-inspired Slot for prop forwarding
+- **Utility Functions** - `cn()` for class name merging
+- **TypeScript Support** - Full type definitions
+- **Tree-shakeable** - Import only what you need
 
-```tsx
-import { Button } from 'tona-ui'
+## Installation
+
+```bash
+npm install tona-ui
+```
 
-// 基础用法
-<Button>点击我</Button>
+```bash
+pnpm add tona-ui
+```
 
-// 不同变体
-<Button variant="destructive">删除</Button>
-<Button variant="outline">轮廓</Button>
-<Button variant="ghost">幽灵</Button>
+```bash
+yarn add tona-ui
+```
 
-// 不同尺寸
-<Button size="sm">小按钮</Button>
-<Button size="lg">大按钮</Button>
-<Button size="icon">图标按钮</Button>
+## Usage
 
-// 作为子组件渲染
-<Button asChild>
-  <a href="/link">链接按钮</a>
-</Button>
+```typescript
+import { Slot, cn } from 'tona-ui'
 ```
 
+## Components
+
 ### Slot
 
-Slot 组件用于将 props 传递给子组件，类似于 Radix UI 的 Slot 组件。
+The Slot component forwards props to its child element, similar to Radix UI's Slot.
 
 ```tsx
 import { Slot } from 'tona-ui'
 
-// 基础用法
+// Basic usage
 <Slot className="custom-class">
-  <button>按钮</button>
+  <button>Click me</button>
 </Slot>
+// Renders: <button class="custom-class">Click me</button>
 
-// 事件处理
+// Event handling
 <Slot onClick={() => console.log('clicked')}>
-  <div>可点击的 div</div>
+  <div>Clickable div</div>
+</Slot>
+
+// Multiple children - props forwarded to all
+<Slot className="item">
+  <span>Item 1</span>
+  <span>Item 2</span>
 </Slot>
 ```
 
 ### cn
 
-工具函数，用于合并 CSS 类名。
+Utility function for merging CSS class names.
 
 ```tsx
 import { cn } from 'tona-ui'
 
-const className = cn('base-class', 'conditional-class', {
-  'active-class': isActive
+// Basic usage
+const className = cn('base-class', 'conditional-class')
+// Result: "base-class conditional-class"
+
+// With conditions
+const className = cn('base-class', {
+  'active-class': isActive,
+  'disabled-class': isDisabled,
 })
+// Result when isActive=true, isDisabled=false: "base-class active-class"
+
+// Multiple arguments
+const className = cn('flex', 'items-center', isLarge && 'p-4', isSmall && 'p-2')
+```
+
+## Peer Dependencies
+
+```json
+{
+  "preact": ">=10.0.0"
+}
 ```
 
-## 开发
+## Development
 
 ```bash
-# 开发模式
+# Development mode
 pnpm dev
 
-# 构建
+# Build
 pnpm build
 ```
 
-## 许可证
+## Related
 
-MIT
+- [tona](https://github.com/guangzan/tona/tree/main/packages/core) - Core framework
+- [tona-hooks](https://github.com/guangzan/tona/tree/main/packages/hooks) - React hooks
+- [tona-sonner](https://github.com/guangzan/tona/tree/main/packages/sonner) - Toast notifications

package/README.zh-CN.md

@@ -0,0 +1,118 @@
+# tona-ui
+
+<p align="center">
+  <img src="../../assets/tona.png" alt="Tona" width="100" />
+</p>
+
+<p align="center">
+  用于 Tona 主题的 UI 组件库，基于 Preact 构建。
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/tona-ui"><img src="https://img.shields.io/npm/v/tona-ui?style=flat-square" alt="npm version"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/npm/l/tona-ui?style=flat-square" alt="license"></a>
+  <a href="https://preactjs.com"><img src="https://img.shields.io/badge/Preact->=10.0.0-673AB8?style=flat-square&logo=preact" alt="Preact"></a>
+</p>
+
+[English](./README.md) | **中文**
+
+## 特性
+
+- **基于 Preact** - 为 Preact 设计的轻量级组件
+- **Slot 组件** - 受 Radix UI 启发的 Slot，用于属性转发
+- **工具函数** - 用于合并类名的 `cn()`
+- **TypeScript 支持** - 完整的类型定义
+- **可摇树优化** - 只导入你需要的
+
+## 安装
+
+```bash
+npm install tona-ui
+```
+
+```bash
+pnpm add tona-ui
+```
+
+```bash
+yarn add tona-ui
+```
+
+## 使用
+
+```typescript
+import { Slot, cn } from 'tona-ui'
+```
+
+## 组件
+
+### Slot
+
+Slot 组件将属性转发给其子元素，类似于 Radix UI 的 Slot。
+
+```tsx
+import { Slot } from 'tona-ui'
+
+// 基础用法
+<Slot className="custom-class">
+  <button>点击我</button>
+</Slot>
+// 渲染: <button class="custom-class">点击我</button>
+
+// 事件处理
+<Slot onClick={() => console.log('clicked')}>
+  <div>可点击的 div</div>
+</Slot>
+
+// 多个子元素 - 属性转发给所有子元素
+<Slot className="item">
+  <span>Item 1</span>
+  <span>Item 2</span>
+</Slot>
+```
+
+### cn
+
+用于合并 CSS 类名的工具函数。
+
+```tsx
+import { cn } from 'tona-ui'
+
+// 基础用法
+const className = cn('base-class', 'conditional-class')
+// 结果: "base-class conditional-class"
+
+// 带条件
+const className = cn('base-class', {
+  'active-class': isActive,
+  'disabled-class': isDisabled,
+})
+// 当 isActive=true, isDisabled=false 时的结果: "base-class active-class"
+
+// 多个参数
+const className = cn('flex', 'items-center', isLarge && 'p-4', isSmall && 'p-2')
+```
+
+## 对等依赖
+
+```json
+{
+  "preact": ">=10.0.0"
+}
+```
+
+## 开发
+
+```bash
+# 开发模式
+pnpm dev
+
+# 构建
+pnpm build
+```
+
+## 相关
+
+- [tona](https://github.com/guangzan/tona/tree/main/packages/core) - 核心框架
+- [tona-hooks](https://github.com/guangzan/tona/tree/main/packages/hooks) - React hooks
+- [tona-sonner](https://github.com/guangzan/tona/tree/main/packages/sonner) - Toast 通知

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as preact_compat0 from "preact/compat";
-import * as preact0 from "preact";
+import * as preact from "preact";
 import { ComponentChildren, Ref } from "preact";
 
 //#region src/components/slot.d.ts
@@ -19,7 +19,7 @@ interface SlotProps {
  * 当作为子组件时，会将父组件的 props 合并到子组件上
  * 当作为普通元素时，会渲染为 div 元素
  */
-declare const Slot: preact0.FunctionalComponent<preact_compat0.PropsWithoutRef<SlotProps> & {
+declare const Slot: preact.FunctionalComponent<preact_compat0.PropsWithoutRef<SlotProps> & {
   ref?: Ref<HTMLElement> | undefined;
 }>;
 //#endregion

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/components/slot.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAOiB,UAAA,SAAA,CACJ;EAYA,QAoBZ,CAAA,EAhCY,iBAgCZ;EApBgB,SAAA,CAAA,EAAA,MAAA;EAAA,KAAA,CAAA,EAAA,GAAA;oBATG;;;;;;;;cASP,cAAI,oBAAA,cAAA,CAAA,gBAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/components/slot.tsx"],"mappings":";;;;;;;;;UAOiB,SAAA;EACf,QAAA,GAAW,iBAAA;EACX,SAAA;EACA,KAAA;EACA,OAAA,IAAW,KAAA,EAAO,KAAA;EAAA,CACjB,GAAA;AAAA;;;;;;cAQU,IAAA,SAAI,mBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,SAAA"}

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/components/slot.tsx"],"sourcesContent":["import type { ComponentChildren, Ref } from 'preact'\nimport { cloneElement, forwardRef, isValidElement } from 'preact/compat'\n\n/**\n * Slot 组件用于将 props 传递给子组件，类似于 Radix UI 的 Slot 组件\n * 它允许父组件将 props 传递给子组件，而子组件可以决定如何处理这些 props\n */\nexport interface SlotProps {\n  children?: ComponentChildren\n  className?: string\n  style?: any\n  onClick?: (event: Event) => void\n  [key: string]: any\n}\n\n/**\n * Slot 组件实现\n * 当作为子组件时，会将父组件的 props 合并到子组件上\n * 当作为普通元素时，会渲染为 div 元素\n */\nexport const Slot = forwardRef<HTMLElement, SlotProps>(\n  ({ children, ...props }, forwardedRef) => {\n    if (isValidElement(children)) {\n      return cloneElement(\n        children as any,\n        {\n          ...mergeProps(props, (children as any).props),\n          ref: forwardedRef\n            ? composeRefs(forwardedRef, (children as any).ref)\n            : (children as any).ref,\n        } as any,\n      )\n    }\n\n    return (\n      <div {...props} ref={forwardedRef as Ref<HTMLDivElement>}>\n        {children}\n      </div>\n    )\n  },\n)\n\nSlot.displayName = 'Slot'\n\n/**\n * 合并 props，子组件的 props 优先级更高\n */\nfunction mergeProps(parentProps: any, childProps: any) {\n  const overrideProps = { ...childProps }\n\n  for (const propName in childProps) {\n    const parentPropValue = parentProps[propName]\n    const childPropValue = childProps[propName]\n\n    const isHandler = /^on[A-Z]/.test(propName)\n    if (isHandler) {\n      // 对于事件处理器，需要同时调用父组件和子组件的处理器\n      if (childPropValue && parentPropValue) {\n        overrideProps[propName] = (...args: any[]) => {\n          childPropValue(...args)\n          parentPropValue(...args)\n        }\n      } else if (parentPropValue) {\n        overrideProps[propName] = parentPropValue\n      }\n    } else if (propName === 'style') {\n      // 对于 style，需要合并对象\n      overrideProps[propName] = { ...parentPropValue, ...childPropValue }\n    } else if (propName === 'className') {\n      // 对于 className，需要合并字符串\n      overrideProps[propName] = [parentPropValue, childPropValue]\n        .filter(Boolean)\n        .join(' ')\n    }\n  }\n\n  return { ...parentProps, ...overrideProps }\n}\n\n/**\n * 组合多个 ref\n */\nfunction composeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T> {\n  return (node: T | null) => {\n    refs.forEach((ref) => {\n      if (typeof ref === 'function') {\n        ref(node)\n      } else if (ref != null) {\n        ; (ref as any).current = node\n      }\n    })\n  }\n}\n"],"mappings":";;;;;;;;;AAoBA,MAAa,OAAO,YACjB,EAAE,UAAU,GAAG,SAAS,iBAAiB;AACxC,KAAI,eAAe,SAAS,CAC1B,QAAO,aACL,UACA;EACE,GAAG,WAAW,OAAQ,SAAiB,MAAM;EAC7C,KAAK,eACD,YAAY,cAAe,SAAiB,IAAI,GAC/C,SAAiB;EACvB,CACF;AAGH,QACE,oBAAC;EAAI,GAAI;EAAO,KAAK;EAClB;GACG;EAGX;AAED,KAAK,cAAc;;;;AAKnB,SAAS,WAAW,aAAkB,YAAiB;CACrD,MAAM,gBAAgB,EAAE,GAAG,YAAY;AAEvC,MAAK,MAAM,YAAY,YAAY;EACjC,MAAM,kBAAkB,YAAY;EACpC,MAAM,iBAAiB,WAAW;AAGlC,MADkB,WAAW,KAAK,SAAS,EAGzC;OAAI,kBAAkB,gBACpB,eAAc,aAAa,GAAG,SAAgB;AAC5C,mBAAe,GAAG,KAAK;AACvB,oBAAgB,GAAG,KAAK;;YAEjB,gBACT,eAAc,YAAY;aAEnB,aAAa,QAEtB,eAAc,YAAY;GAAE,GAAG;GAAiB,GAAG;GAAgB;WAC1D,aAAa,YAEtB,eAAc,YAAY,CAAC,iBAAiB,eAAe,CACxD,OAAO,QAAQ,CACf,KAAK,IAAI;;AAIhB,QAAO;EAAE,GAAG;EAAa,GAAG;EAAe;;;;;AAM7C,SAAS,YAAe,GAAG,MAAsC;AAC/D,SAAQ,SAAmB;AACzB,OAAK,SAAS,QAAQ;AACpB,OAAI,OAAO,QAAQ,WACjB,KAAI,KAAK;YACA,OAAO,KACd,CAAC,IAAY,UAAU;IAE3B"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/components/slot.tsx"],"sourcesContent":["import type { ComponentChildren, Ref } from 'preact'\nimport { cloneElement, forwardRef, isValidElement } from 'preact/compat'\n\n/**\n * Slot 组件用于将 props 传递给子组件，类似于 Radix UI 的 Slot 组件\n * 它允许父组件将 props 传递给子组件，而子组件可以决定如何处理这些 props\n */\nexport interface SlotProps {\n  children?: ComponentChildren\n  className?: string\n  style?: any\n  onClick?: (event: Event) => void\n  [key: string]: any\n}\n\n/**\n * Slot 组件实现\n * 当作为子组件时，会将父组件的 props 合并到子组件上\n * 当作为普通元素时，会渲染为 div 元素\n */\nexport const Slot = forwardRef<HTMLElement, SlotProps>(\n  ({ children, ...props }, forwardedRef) => {\n    if (isValidElement(children)) {\n      return cloneElement(\n        children as any,\n        {\n          ...mergeProps(props, (children as any).props),\n          ref: forwardedRef\n            ? composeRefs(forwardedRef, (children as any).ref)\n            : (children as any).ref,\n        } as any,\n      )\n    }\n\n    return (\n      <div {...props} ref={forwardedRef as Ref<HTMLDivElement>}>\n        {children}\n      </div>\n    )\n  },\n)\n\nSlot.displayName = 'Slot'\n\n/**\n * 合并 props，子组件的 props 优先级更高\n */\nfunction mergeProps(parentProps: any, childProps: any) {\n  const overrideProps = { ...childProps }\n\n  for (const propName in childProps) {\n    const parentPropValue = parentProps[propName]\n    const childPropValue = childProps[propName]\n\n    const isHandler = /^on[A-Z]/.test(propName)\n    if (isHandler) {\n      // 对于事件处理器，需要同时调用父组件和子组件的处理器\n      if (childPropValue && parentPropValue) {\n        overrideProps[propName] = (...args: any[]) => {\n          childPropValue(...args)\n          parentPropValue(...args)\n        }\n      } else if (parentPropValue) {\n        overrideProps[propName] = parentPropValue\n      }\n    } else if (propName === 'style') {\n      // 对于 style，需要合并对象\n      overrideProps[propName] = { ...parentPropValue, ...childPropValue }\n    } else if (propName === 'className') {\n      // 对于 className，需要合并字符串\n      overrideProps[propName] = [parentPropValue, childPropValue]\n        .filter(Boolean)\n        .join(' ')\n    }\n  }\n\n  return { ...parentProps, ...overrideProps }\n}\n\n/**\n * 组合多个 ref\n */\nfunction composeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T> {\n  return (node: T | null) => {\n    refs.forEach((ref) => {\n      if (typeof ref === 'function') {\n        ref(node)\n      } else if (ref != null) {\n        ;(ref as any).current = node\n      }\n    })\n  }\n}\n"],"mappings":";;;;;;;;;AAoBA,MAAa,OAAO,YACjB,EAAE,UAAU,GAAG,SAAS,iBAAiB;AACxC,KAAI,eAAe,SAAS,CAC1B,QAAO,aACL,UACA;EACE,GAAG,WAAW,OAAQ,SAAiB,MAAM;EAC7C,KAAK,eACD,YAAY,cAAe,SAAiB,IAAI,GAC/C,SAAiB;EACvB,CACF;AAGH,QACE,oBAAC,OAAD;EAAK,GAAI;EAAO,KAAK;EAClB;EACG;EAGX;AAED,KAAK,cAAc;;;;AAKnB,SAAS,WAAW,aAAkB,YAAiB;CACrD,MAAM,gBAAgB,EAAE,GAAG,YAAY;AAEvC,MAAK,MAAM,YAAY,YAAY;EACjC,MAAM,kBAAkB,YAAY;EACpC,MAAM,iBAAiB,WAAW;AAGlC,MADkB,WAAW,KAAK,SAAS,EAGzC;OAAI,kBAAkB,gBACpB,eAAc,aAAa,GAAG,SAAgB;AAC5C,mBAAe,GAAG,KAAK;AACvB,oBAAgB,GAAG,KAAK;;YAEjB,gBACT,eAAc,YAAY;aAEnB,aAAa,QAEtB,eAAc,YAAY;GAAE,GAAG;GAAiB,GAAG;GAAgB;WAC1D,aAAa,YAEtB,eAAc,YAAY,CAAC,iBAAiB,eAAe,CACxD,OAAO,QAAQ,CACf,KAAK,IAAI;;AAIhB,QAAO;EAAE,GAAG;EAAa,GAAG;EAAe;;;;;AAM7C,SAAS,YAAe,GAAG,MAAsC;AAC/D,SAAQ,SAAmB;AACzB,OAAK,SAAS,QAAQ;AACpB,OAAI,OAAO,QAAQ,WACjB,KAAI,KAAK;YACA,OAAO,KACf,CAAC,IAAY,UAAU;IAE1B"}

package/package.json

@@ -1,35 +1,32 @@
 {
   "name": "tona-ui",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "UI components for Tona",
+  "keywords": [
+    "components",
+    "react",
+    "ui",
+    "博客园"
+  ],
+  "homepage": "https://github.com/guangzan/tona/tree/main/packages/ui#readme",
+  "bugs": {
+    "url": "https://github.com/guangzan/tona/issues"
+  },
+  "license": "MIT",
   "author": {
     "name": "guangzan",
-    "url": "https://www.cnblogs.com/guangzan",
-    "email": "guangzan1999@outlook.com"
+    "email": "guangzan1999@outlook.com",
+    "url": "https://www.cnblogs.com/guangzan"
   },
-  "license": "MIT",
-  "homepage": "https://github.com/guangzan/tona/tree/main/packages/ui#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/guangzan/tona.git",
     "directory": "packages/ui"
   },
-  "bugs": {
-    "url": "https://github.com/guangzan/tona/issues"
-  },
-  "keywords": [
-    "ui",
-    "components",
-    "react",
-    "博客园"
+  "files": [
+    "dist"
   ],
   "sideEffects": false,
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs"
-    }
-  },
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -41,19 +38,22 @@
       ]
     }
   },
-  "files": [
-    "dist"
-  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
   "devDependencies": {
-    "@types/node": "^25.0.3",
-    "tsdown": "latest",
-    "vitest": "^4.0.16"
+    "@types/node": "^25.5.0",
+    "vite-plus": "latest",
+    "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
   },
   "peerDependencies": {
     "preact": ">=10.0.0"
   },
   "scripts": {
-    "dev": "tsdown --watch",
-    "build": "tsdown"
+    "dev": "vp pack --watch",
+    "build": "vp pack"
   }
 }