tona-ui 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 guangzan
+
+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,81 @@
+# tona-ui
+
+Tona UI 组件库，提供可复用的 Preact 组件。
+
+## 安装
+
+```bash
+pnpm add tona-ui
+```
+
+## 组件
+
+### Button
+
+按钮组件，支持多种变体和尺寸。
+
+```tsx
+import { Button } from 'tona-ui'
+
+// 基础用法
+<Button>点击我</Button>
+
+// 不同变体
+<Button variant="destructive">删除</Button>
+<Button variant="outline">轮廓</Button>
+<Button variant="ghost">幽灵</Button>
+
+// 不同尺寸
+<Button size="sm">小按钮</Button>
+<Button size="lg">大按钮</Button>
+<Button size="icon">图标按钮</Button>
+
+// 作为子组件渲染
+<Button asChild>
+  <a href="/link">链接按钮</a>
+</Button>
+```
+
+### Slot
+
+Slot 组件用于将 props 传递给子组件，类似于 Radix UI 的 Slot 组件。
+
+```tsx
+import { Slot } from 'tona-ui'
+
+// 基础用法
+<Slot className="custom-class">
+  <button>按钮</button>
+</Slot>
+
+// 事件处理
+<Slot onClick={() => console.log('clicked')}>
+  <div>可点击的 div</div>
+</Slot>
+```
+
+### cn
+
+工具函数，用于合并 CSS 类名。
+
+```tsx
+import { cn } from 'tona-ui'
+
+const className = cn('base-class', 'conditional-class', {
+  'active-class': isActive
+})
+```
+
+## 开发
+
+```bash
+# 开发模式
+pnpm dev
+
+# 构建
+pnpm build
+```
+
+## 许可证
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import * as preact_compat0 from "preact/compat";
+import * as preact0 from "preact";
+import { ComponentChildren, Ref } from "preact";
+
+//#region src/components/slot.d.ts
+/**
+ * Slot 组件用于将 props 传递给子组件，类似于 Radix UI 的 Slot 组件
+ * 它允许父组件将 props 传递给子组件，而子组件可以决定如何处理这些 props
+ */
+interface SlotProps {
+  children?: ComponentChildren;
+  className?: string;
+  style?: any;
+  onClick?: (event: Event) => void;
+  [key: string]: any;
+}
+/**
+ * Slot 组件实现
+ * 当作为子组件时，会将父组件的 props 合并到子组件上
+ * 当作为普通元素时，会渲染为 div 元素
+ */
+declare const Slot: preact0.FunctionalComponent<preact_compat0.PropsWithoutRef<SlotProps> & {
+  ref?: Ref<HTMLElement> | undefined;
+}>;
+//#endregion
+export { Slot, type SlotProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +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"}

package/dist/index.mjs

@@ -0,0 +1,61 @@
+import { cloneElement, forwardRef, isValidElement } from "preact/compat";
+import { jsx } from "preact/jsx-runtime";
+
+//#region src/components/slot.tsx
+/**
+* Slot 组件实现
+* 当作为子组件时，会将父组件的 props 合并到子组件上
+* 当作为普通元素时，会渲染为 div 元素
+*/
+const Slot = forwardRef(({ children, ...props }, forwardedRef) => {
+	if (isValidElement(children)) return cloneElement(children, {
+		...mergeProps(props, children.props),
+		ref: forwardedRef ? composeRefs(forwardedRef, children.ref) : children.ref
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: forwardedRef,
+		children
+	});
+});
+Slot.displayName = "Slot";
+/**
+* 合并 props，子组件的 props 优先级更高
+*/
+function mergeProps(parentProps, childProps) {
+	const overrideProps = { ...childProps };
+	for (const propName in childProps) {
+		const parentPropValue = parentProps[propName];
+		const childPropValue = childProps[propName];
+		if (/^on[A-Z]/.test(propName)) {
+			if (childPropValue && parentPropValue) overrideProps[propName] = (...args) => {
+				childPropValue(...args);
+				parentPropValue(...args);
+			};
+			else if (parentPropValue) overrideProps[propName] = parentPropValue;
+		} else if (propName === "style") overrideProps[propName] = {
+			...parentPropValue,
+			...childPropValue
+		};
+		else if (propName === "className") overrideProps[propName] = [parentPropValue, childPropValue].filter(Boolean).join(" ");
+	}
+	return {
+		...parentProps,
+		...overrideProps
+	};
+}
+/**
+* 组合多个 ref
+*/
+function composeRefs(...refs) {
+	return (node) => {
+		refs.forEach((ref) => {
+			if (typeof ref === "function") ref(node);
+			else if (ref != null) ref.current = node;
+		});
+	};
+}
+
+//#endregion
+export { Slot };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "tona-ui",
+  "version": "1.0.1",
+  "description": "UI components for Tona",
+  "author": {
+    "name": "guangzan",
+    "url": "https://www.cnblogs.com/guangzan",
+    "email": "guangzan1999@outlook.com"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/guangzan",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/guangzan/tona.git"
+  },
+  "bugs": {
+    "url": "https://github.com/guangzan/tona/issues"
+  },
+  "keywords": [
+    "ui",
+    "components",
+    "react",
+    "博客园"
+  ],
+  "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",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "tsdown": "latest",
+    "vitest": "^4.0.16"
+  },
+  "peerDependencies": {
+    "preact": ">=10.0.0"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown"
+  }
+}