@neut/ui 0.0.7 → 0.0.9

package/README.md

@@ -1,107 +1,137 @@
-## Dome
+# Neut
 
-这是一个类似shadcn的solidjs组件库，与shadcn不同的是，本组件库不依赖于任何第三方组件库，相比shadcn的优势是能够避免上游组件库的bug，也更容易及时修复bug。
+> **SolidJS Native Component Library, Zero External Dependencies**
 
-> [!warning]
-> 本项目仍在开发中，不推荐用于生产项目。
-> 本项目中部分组件代码并未完全参考shadcn。
+Neut is inspired by [shadcn/ui](https://ui.shadcn.com), but reimplemented entirely from scratch with SolidJS. Unlike shadcn, Neut **does not depend on any upstream component library** (like `@radix-ui` or `@base-ui`).
 
-## 使用
+**Advantages:**
 
-与shadcn类似，不需要安装本组件库，而是直接复制某个组件的代码，但也可安装本组件库作为依赖。
+- **Fully Controllable**: All component source code lives in your project — modify them however you want.
+- **No Upstream Limitations**: You won't get blocked by third-party component bugs (styling or logic). Fix issues without waiting for a release.
+- **SolidJS Native**: Leverages SolidJS's fine-grained reactivity for better performance.
 
-### 复制组件代码
+**Let's be clear about the downsides:**
 
-本组件的代码基于tailwindcss样式库，因此你需要安装tailwindcss作为开发依赖，具体安装方式请参考tailwindcss文档。
+To be honest, because Neut doesn't rely on more mature upstream component libraries, it may not cover all edge cases. There will be fixable but still unresolved issues — such as bugs, accessibility gaps, etc. Therefore, **it is not recommended for large projects or scenarios with strict quality requirements**.
 
-除了tailwindcss外，本组件库还内置了两个样式文件：
+> [!WARNING]
+>
+> **Under active development — use with caution**
+>
+> The project is still evolving rapidly, APIs may change. **Do not use in production yet.**
 
-- animate.css
-- toast.css
+---
 
-在使用时需要在你项目的主样式文件中导入animate.css，如果你要复制或使用toast组件，也需要导入toast.css。
+## 🚀 Quick Start
 
-需要注意的是，toast.css本身是临时性的样式文件，因为toast组件移植自sonner，尚未针对性地对toast的组件样式进行相应修改，但在未来的版本中一定会删除这个样式文件。
+Neut follows a **"copy-paste, then use"** pattern (similar to shadcn), though you can also install it as a regular dependency.
 
-最终的项目结构类似于：
+### 1. Prerequisites (Peer Dependencies)
 
-```
-- styles
-  - animate.css
-  - toast.css
-- index.css
-```
+Before using any components, make sure these dependencies are installed in your project:
+
+| Dependency                   | Purpose                  | Install Command                  |
+| :--------------------------- | :----------------------- | :------------------------------- |
+| **Tailwind CSS**             | Styling engine           | `bun i -D tailwindcss`           |
+| **Lucide Solid**             | Icon library             | `bun i lucide-solid`             |
+| **Tailwind Merge**           | Style merging tool       | `bun i tailwind-merge`           |
+| **Class Variance Authority** | Style variant definition | `bun i class-variance-authority` |
 
-`index.css`文件头：
+**Configure your stylesheet**
+
+In your main stylesheet (e.g., `index.css` or `globals.css`), import in this order:
 
 ```css
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Neut built-in styles (from animate.css and toast.css) */
 @import "./styles/animate.css";
 @import "./styles/toast.css";
 ```
 
-除了样式文件外，还需要安装样式合并依赖`tailwind-merge`及样式定义依赖`class-variance-authority`：
+**Create a utility function**
 
-```bash
-bun i tailwind-merge class-variance-authority
-```
-
-然后在`lib/utils`中创建一个`clsx.ts`文件，内容如下：
+Write a style merging function in `src/lib/utils/clsx.ts`:
 
 ```ts
 import { twMerge } from "tailwind-merge";
 
 export const clsx = (...classes: (string | undefined | false)[]): string => {
-  return twMerge(classes.filter(Boolean));
+    return twMerge(classes.filter(Boolean));
 };
 ```
 
-此外，本项目中的许多组件中使用了lucide-solid图标：
+> [!NOTE]
+> **About the stylesheet files**
+> `toast.css` is currently a temporary solution (ported from Sonner). We will rewrite the styles later to remove this external dependency.
 
-```bash
-bun i lucide-solid
-```
+### 2. Method A: Copy the source code (recommended)
 
-当然，并非所有组件都需要使用这两个样式依赖，具体可查看shacn文档。我正在考虑将这两个工具独立实现以减少对第三方库的依赖。
+This is the most flexible approach. Non-primitive components may have overlapping functionality (e.g., `AlertDialog` and `Dialog`), but they are standalone and independent.
 
-现在假如你需要使用`Button`组件，则可以直接复制`button`目录中的代码，在复制时你可以看到，本组件库出于可维护性和单一职责原则的考虑，所有组件的实现都并非放在单文件中，因此建议你直接克隆本项目到本地，然后复制组件目录到你的项目中，否则请按`button`的目录结构创建相对应的文件后复制每个文件中的相应代码：
+1.  Check the component source code in the [GitHub repo - Components](https://github.com/thep0y/neut).
+2.  Copy the directory of the component you need (e.g., `button`) into your project.
 
+**Example directory structure:**
+
+```bash
+src/
+└── components/
+    └── button/
+        ├── Button.styles.ts   # Styling logic
+        ├── Button.tsx         # Component implementation
+        ├── Button.types.ts    # Type definitions
+        └── index.ts           # Export entry
 ```
-./src/components/button/
-└── Button.styles.ts
-└── Button.tsx
-└── Button.types.ts
-└── index.ts
-```
 
-### 安装
+### 3. Method B: Install as a dependency
+
+If you prefer version management, you can also install via a package manager.
 
-本组件库也支持作为依赖安装：
+**Install:**
 
 ```bash
 bun i @neut/ui
 ```
 
-安装后需要在根样式文件中导入样式及注册样式资源：
+**Import styles:**
+
+Add this to your root stylesheet:
 
 ```css
-@import "tailwindcss";
 @import "../node_modules/@neut/ui/dist/ui.css";
 ```
 
-然后即可如同其他组件库一样导入并使用组件：
+**Use components:**
 
 ```tsx
 import { Button } from "@neut/ui";
 
-const App = () => {
-  return <Button>Click me</Button>;
-};
+function App() {
+    return <Button>Neut Button</Button>;
+}
 ```
 
-组件库的安装可以参考示例：https://github.com/thep0y/neut/tree/main/example
+**Full example:** [Neut Example Project](https://github.com/thep0y/neut/tree/main/example)
+
+---
+
+## 📚 References & Acknowledgements
+
+The project's design and inspiration come from these great projects:
+
+- **shadcn/ui**: [Installation Guide](https://ui.shadcn.com/docs/installation)
+- **Sonner**: [Getting Started](https://sonner.emilkowal.ski/getting-started)
+- **SolidJS**: [Official Website](https://www.solidjs.com/)
+
+---
+
+## 💡 Why this pattern?
 
-## 参考项目
+Neut follows the philosophy of **"headless components"** and **"building your own blocks"**. That means:
 
-- shadcn: https://ui.shadcn.com/docs/installation
-- sonner: https://sonner.emilkowal.ski/getting-started
+1.  **No overhead**: Only the code you actually include is used.
+2.  **Freely customizable styles**: Tailwind classes are right in front of you — tweak them anytime.
+3.  **Leverage SolidJS strengths**: Compared to React, SolidJS's fine-grained reactivity gives you high-performance components with less code and cleaner logic.

package/README.zh-CN.md

@@ -0,0 +1,137 @@
+# Neut
+
+> **SolidJS 原生组件库，零外部依赖**
+
+Neut 的灵感来自 [shadcn/ui](https://ui.shadcn.com)，但完全用 SolidJS 从头实现。和 shadcn 不一样的是，Neut **不依赖任何上游组件库**（比如 `@radix-ui` 或 `@base-ui`）。
+
+**优点：**
+
+- **完全可控**：所有组件源码都在你的项目里，想怎么改就怎么改。
+- **不受上游限制**：不会因为第三方组件的样式或逻辑 Bug 而卡住，修问题不用等发版。
+- **SolidJS 原生**：充分利用 SolidJS 的细粒度响应式，性能更好。
+
+**缺点也要说清楚：**
+
+坦白讲，因为没有依赖那些更成熟的上游组件库，Neut 在一些边缘场景上可能覆盖不够，会有一些能修但还没修的缺陷，比如 Bug、无障碍支持等。所以**不建议用在大型项目或对质量要求严格的场景**。
+
+> [!WARNING]
+>
+> **开发中，慎用**
+>
+> 项目还在活跃开发，API 可能会变，**生产环境先别用**。
+
+---
+
+## 🚀 快速上手
+
+Neut 采用的是 **“复制即用”** 的模式（类似 shadcn），当然你也可以把它当成普通依赖来安装。
+
+### 1. 准备工作 (Peer Dependencies)
+
+用组件之前，先确保项目里装好了下面这些依赖：
+
+| 依赖库                       | 用途         | 安装命令                         |
+| :--------------------------- | :----------- | :------------------------------- |
+| **Tailwind CSS**             | 样式引擎     | `bun i -D tailwindcss`           |
+| **Lucide Solid**             | 图标库       | `bun i lucide-solid`             |
+| **Tailwind Merge**           | 样式合并工具 | `bun i tailwind-merge`           |
+| **Class Variance Authority** | 样式变体定义 | `bun i class-variance-authority` |
+
+**配置样式文件**
+
+在主样式文件（比如 `index.css` 或 `globals.css`）里按顺序引入：
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Neut 内置样式（来自 animate.css 和 toast.css） */
+@import "./styles/animate.css";
+@import "./styles/toast.css";
+```
+
+**创建工具函数**
+
+在 `src/lib/utils/clsx.ts` 里写一个样式合并函数：
+
+```ts
+import { twMerge } from "tailwind-merge";
+
+export const clsx = (...classes: (string | undefined | false)[]): string => {
+    return twMerge(classes.filter(Boolean));
+};
+```
+
+> [!NOTE]
+> **关于样式文件**
+> `toast.css` 目前是临时方案（从 Sonner 移植过来的）。后面我们会重写样式，把这个外部依赖去掉。
+
+### 2. 方式 A：复制源码（推荐）
+
+这种方式最灵活。非基础组件之间可能存在功能重叠（比如 `AlertDialog` 和 `Dialog`），但各自独立，互不依赖。
+
+1.  去 [GitHub 仓库 - Components](https://github.com/thep0y/neut) 看组件源码。
+2.  把你需要的组件目录（比如 `button`）复制到项目里。
+
+**目录结构示例：**
+
+```bash
+src/
+└── components/
+    └── button/
+        ├── Button.styles.ts   # 样式逻辑
+        ├── Button.tsx         # 组件实现
+        ├── Button.types.ts    # 类型定义
+        └── index.ts           # 导出入口
+```
+
+### 3. 方式 B：作为依赖安装
+
+如果想直接管理版本，也可以走包管理器安装。
+
+**安装：**
+
+```bash
+bun i @neut/ui
+```
+
+**引入样式：**
+
+在根样式文件里加上：
+
+```css
+@import "../node_modules/@neut/ui/dist/ui.css";
+```
+
+**使用组件：**
+
+```tsx
+import { Button } from "@neut/ui";
+
+function App() {
+    return <Button>Neut Button</Button>;
+}
+```
+
+**完整示例参考：** [Neut Example Project](https://github.com/thep0y/neut/tree/main/example)
+
+---
+
+## 📚 参考与致谢
+
+项目设计和灵感来自下面这些优秀项目：
+
+- **shadcn/ui**: [Installation Guide](https://ui.shadcn.com/docs/installation)
+- **Sonner**: [Getting Started](https://sonner.emilkowal.ski/getting-started)
+- **SolidJS**: [Official Website](https://www.solidjs.com/)
+
+---
+
+## 💡 为什么选这种模式？
+
+Neut 遵循 **“无头组件”**和 **“自己搭积木”** 的理念。也就是说：
+
+1.  **没有多余开销**：只用你实际引入的代码。
+2.  **样式随便改**：Tailwind 的 class 就在你眼皮底下，想调就调。
+3.  **发挥 SolidJS 优势**：相比 React，SolidJS 的细粒度响应式让组件在高性能的同时，代码量更少、逻辑更清爽。

package/dist/components/alert-dialog/AlertDialogCancel/AlertDialogCancel.js

@@ -5,10 +5,13 @@ import { mergeProps as i } from "solid-js";
 //#region src/components/alert-dialog/AlertDialogCancel/AlertDialogCancel.tsx
 var a = (a) => {
 	let { setOpen: o } = e();
-	return n(t, r({ "data-slot": "alert-dialog-cancel" }, i({
+	return n(t, r(i({
 		variant: "outline",
 		size: "md"
-	}, a), { onClick: () => o(!1) }));
+	}, a), {
+		"data-slot": "alert-dialog-cancel",
+		onClick: () => o(!1)
+	}));
 };
 //#endregion
 export { a as AlertDialogCancel };

package/dist/components/alert-dialog/AlertDialogCancel/AlertDialogCancel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogCancel.js","names":["mergeProps","AlertDialogCancelProps","Button","useAlertDialogContext","AlertDialogCancel","props","setOpen","merged","variant","size","const","_$createComponent","_$mergeProps","onClick"],"sources":["../../../../src/components/alert-dialog/AlertDialogCancel/AlertDialogCancel.tsx"],"sourcesContent":["import { mergeProps } from \"solid-js\";\nimport type { AlertDialogCancelProps } from \"./AlertDialogCancel.types\";\nimport { Button } from \"~/components/button\";\nimport { useAlertDialogContext } from \"../AlertDialog\";\n\nexport const AlertDialogCancel = (props: AlertDialogCancelProps) => {\n  const { setOpen } = useAlertDialogContext();\n\n  const merged = mergeProps({ variant: \"outline\", size: \"md\" } as const, props);\n\n  return (\n    <Button\n      data-slot=\"alert-dialog-cancel\"\n      {...merged}\n      onClick={() => setOpen(false)}\n    />\n  );\n};\n"],"mappings":";;;;;AAKA,IAAaI,KAAqBC,MAAkC;CAClE,IAAM,EAAEC,eAAYH,GAAuB;AAI3C,QAAAQ,EACGT,GAAMU,EAAA,EAAA,aAAA,uBAAA,EAHMZ,EAAW;EAAEQ,SAAS;EAAWC,MAAM;EAAM,EAAWJ,EAAM,EAK/D,EACVQ,eAAeP,EAAQ,GAAK,EAAC,CAAA,CAAA"}
+{"version":3,"file":"AlertDialogCancel.js","names":["mergeProps","AlertDialogCancelProps","Button","useAlertDialogContext","AlertDialogCancel","props","setOpen","merged","variant","size","const","_$createComponent","_$mergeProps","onClick"],"sources":["../../../../src/components/alert-dialog/AlertDialogCancel/AlertDialogCancel.tsx"],"sourcesContent":["import { mergeProps } from \"solid-js\";\nimport type { AlertDialogCancelProps } from \"./AlertDialogCancel.types\";\nimport { Button } from \"~/components/button\";\nimport { useAlertDialogContext } from \"../AlertDialog\";\n\nexport const AlertDialogCancel = (props: AlertDialogCancelProps) => {\n  const { setOpen } = useAlertDialogContext();\n\n  const merged = mergeProps({ variant: \"outline\", size: \"md\" } as const, props);\n\n  return (\n    <Button\n      {...merged}\n      data-slot=\"alert-dialog-cancel\"\n      onClick={() => setOpen(false)}\n    />\n  );\n};\n"],"mappings":";;;;;AAKA,IAAaI,KAAqBC,MAAkC;CAClE,IAAM,EAAEC,eAAYH,GAAuB;AAI3C,QAAAQ,EACGT,GAAMU,EAHMZ,EAAW;EAAEQ,SAAS;EAAWC,MAAM;EAAM,EAAWJ,EAAM,EAI/D;EAAA,aAAA;EAEVQ,eAAeP,EAAQ,GAAK;EAAC,CAAA,CAAA"}

package/dist/components/alert-dialog/AlertDialogCancel/AlertDialogCancel.types.d.ts

@@ -1,2 +1,2 @@
 import { ButtonProps } from '../../button';
-export type AlertDialogCancelProps = Pick<ButtonProps<"button">, "variant" | "size" | "class" | "children">;
+export type AlertDialogCancelProps = ButtonProps<"button">;

package/dist/components/button/Button.js

@@ -1,14 +1,13 @@
 import { clsx as e } from "../../utils/clsx.js";
 import t from "./Button.styles.js";
 import { Dynamic as n, createComponent as r, insert as i, memo as a, mergeProps as o, setAttribute as s, template as c } from "solid-js/web";
-import { Show as l, createMemo as u, createUniqueId as d, mergeProps as f, splitProps as p } from "solid-js";
+import { children as l, createMemo as u, createUniqueId as d, mergeProps as f, splitProps as p } from "solid-js";
 //#region src/components/button/Button.tsx
-var m = /* @__PURE__ */ c("<span>"), h = (c) => {
-	let [h, g] = p(f({
+var m = /* @__PURE__ */ c("<span>"), h = /* @__PURE__ */ c("<span class=sr-only>"), g = (c) => {
+	let [g, _] = p(f({
 		variant: "primary",
 		size: "md",
 		as: "button",
-		iconPosition: "left",
 		id: d()
 	}, c), [
 		"as",
@@ -20,68 +19,40 @@ var m = /* @__PURE__ */ c("<span>"), h = (c) => {
 		"classList",
 		"children",
 		"onClick"
-	]), _ = u(() => !!h.icon && !h.children), v = (e) => (() => {
-		var t = m();
-		return s(t, "data-icon", e), i(t, () => h.icon), t;
-	})();
+	]), v = u(() => g.icon && typeof g.icon == "object" && "ariaLabel" in g.icon && "icon" in g.icon || !!g.icon && !g.children), y = (e, t) => (() => {
+		var n = m();
+		return s(n, "data-icon", t), i(n, e), n;
+	})(), b = l(() => g.icon ? typeof g.icon == "object" && "ariaLabel" in g.icon && "icon" in g.icon ? [a(() => g.icon.icon), (() => {
+		var e = h();
+		return i(e, () => g.icon.ariaLabel), e;
+	})()] : [
+		a(() => a(() => !g.iconPosition || g.iconPosition === "left")() && y(g.icon, "inline-start")),
+		a(() => g.children),
+		a(() => a(() => g.iconPosition === "right")() && y(g.icon, "inline-end"))
+	] : g.children);
 	return r(n, o({
 		"data-slot": "button",
 		get component() {
-			return h.as;
+			return g.as;
+		},
+		get type() {
+			return a(() => g.as === "button")() ? _.type ?? "button" : void 0;
 		},
 		get onClick() {
-			return h.onClick;
+			return g.onClick;
 		},
 		get class() {
 			return e(t({
-				variant: h.variant,
-				size: _() ? void 0 : h.size,
-				iconSize: _() ? h.size : void 0
-			}), h.class);
+				variant: g.variant,
+				size: v() ? void 0 : g.size,
+				iconSize: v() ? g.size : void 0
+			}), g.class);
 		}
-	}, g, { get children() {
-		return [
-			r(l, {
-				get when() {
-					return a(() => !!h.icon)() && h.iconPosition === "left";
-				},
-				get children() {
-					return r(l, {
-						get when() {
-							return !_();
-						},
-						get fallback() {
-							return h.icon;
-						},
-						get children() {
-							return v("inline-start");
-						}
-					});
-				}
-			}),
-			a(() => h.children),
-			r(l, {
-				get when() {
-					return a(() => !!h.icon)() && h.iconPosition === "right";
-				},
-				get children() {
-					return r(l, {
-						get when() {
-							return !_();
-						},
-						get fallback() {
-							return h.icon;
-						},
-						get children() {
-							return v("inline-end");
-						}
-					});
-				}
-			})
-		];
+	}, _, { get children() {
+		return b();
 	} }));
 };
 //#endregion
-export { h as Button };
+export { g as Button };
 
 //# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["createMemo","createUniqueId","mergeProps","Show","splitProps","Dynamic","clsx","s","ButtonProps","ButtonValidElement","DefaultStyleProps","Button","props","T","merged","variant","size","as","iconPosition","id","Partial","local","others","iconOnly","icon","children","iconWithAttr","position","_el$","_tmpl$","_$setAttribute","_$insert","_$createComponent","_$mergeProps","component","onClick","class","undefined","iconSize","when","_$memo","fallback"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n  createMemo,\n  createUniqueId,\n  mergeProps,\n  Show,\n  splitProps,\n} from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { clsx } from \"~/utils\";\nimport s from \"./Button.styles\";\nimport type {\n  ButtonProps,\n  ButtonValidElement,\n  DefaultStyleProps,\n} from \"./Button.types\";\n\nexport const Button = <T extends ButtonValidElement = \"button\">(\n  props: ButtonProps<T>,\n) => {\n  const merged = mergeProps(\n    {\n      variant: \"primary\",\n      size: \"md\",\n      as: \"button\",\n      iconPosition: \"left\",\n      id: createUniqueId(),\n    } satisfies Partial<DefaultStyleProps>,\n    props,\n  );\n\n  const [local, others] = splitProps(merged, [\n    \"as\",\n    \"variant\",\n    \"size\",\n    \"icon\",\n    \"iconPosition\",\n    \"class\",\n    \"classList\",\n    \"children\",\n    \"onClick\",\n  ]);\n\n  const iconOnly = createMemo(() => !!local.icon && !local.children);\n\n  const iconWithAttr = (position: \"inline-start\" | \"inline-end\") => (\n    <span data-icon={position}>{local.icon}</span>\n  );\n\n  return (\n    // @ts-expect-error\n    <Dynamic\n      data-slot=\"button\"\n      component={local.as}\n      onClick={local.onClick}\n      class={clsx(\n        s({\n          variant: local.variant,\n          size: iconOnly() ? undefined : local.size,\n          iconSize: iconOnly() ? local.size : undefined,\n        }),\n        local.class,\n      )}\n      {...others}\n    >\n      <Show when={local.icon && local.iconPosition === \"left\"}>\n        <Show when={!iconOnly()} fallback={local.icon}>\n          {iconWithAttr(\"inline-start\")}\n        </Show>\n      </Show>\n      {local.children}\n      <Show when={local.icon && local.iconPosition === \"right\"}>\n        <Show when={!iconOnly()} fallback={local.icon}>\n          {iconWithAttr(\"inline-end\")}\n        </Show>\n      </Show>\n    </Dynamic>\n  );\n};\n"],"mappings":";;;;;qCAgBaW,KACXC,MACG;CAYH,IAAM,CAACS,GAAOC,KAAUlB,EAXTF,EACb;EACEa,SAAS;EACTC,MAAM;EACNC,IAAI;EACJC,cAAc;EACdC,IAAIlB,GAAe;EACpB,EACDW,EACD,EAE0C;EACzC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EAEIW,IAAWvB,QAAiB,CAAC,CAACqB,EAAMG,QAAQ,CAACH,EAAMI,SAAS,EAE5DC,KAAgBC,aAAuC;EAAA,IAAAC,IAAAC,GAAA;AACrB,SADqBC,EAAAF,GAAA,aAC1CD,EAAQ,EAAAI,EAAAH,SAAGP,EAAMG,KAAI,EAAAI;KACvC;AAED,QACEI,EACC3B,GAAO4B,EAAA;EAAA,aAAA;EAAA,IAENC,YAAS;AAAA,UAAEb,EAAMJ;;EAAE,IACnBkB,UAAO;AAAA,UAAEd,EAAMc;;EAAO,IAAA,QAAA;AAAA,UACf7B,EACLC,EAAE;IACAQ,SAASM,EAAMN;IACfC,MAAMO,GAAU,GAAGc,KAAAA,IAAYhB,EAAML;IACrCsB,UAAUf,GAAU,GAAGF,EAAML,OAAOqB,KAAAA;IACrC,CAAC,EACFhB,EAAMe,MACP;;EAAA,EACGd,GAAM,EAAA,IAAAG,WAAA;AAAA,SAAA;GAAAO,EAET7B,GAAI;IAAA,IAACoC,OAAI;AAAA,YAAEC,QAAA,CAAA,CAAAnB,EAAMG,KAAI,EAAA,IAAIH,EAAMH,iBAAiB;;IAAM,IAAAO,WAAA;AAAA,YAAAO,EACpD7B,GAAI;MAAA,IAACoC,OAAI;AAAA,cAAE,CAAChB,GAAU;;MAAA,IAAEkB,WAAQ;AAAA,cAAEpB,EAAMG;;MAAI,IAAAC,WAAA;AAAA,cAC1CC,EAAa,eAAe;;MAAA,CAAA;;IAAA,CAAA;GAAAc,QAGhCnB,EAAMI,SAAQ;GAAAO,EACd7B,GAAI;IAAA,IAACoC,OAAI;AAAA,YAAEC,QAAA,CAAA,CAAAnB,EAAMG,KAAI,EAAA,IAAIH,EAAMH,iBAAiB;;IAAO,IAAAO,WAAA;AAAA,YAAAO,EACrD7B,GAAI;MAAA,IAACoC,OAAI;AAAA,cAAE,CAAChB,GAAU;;MAAA,IAAEkB,WAAQ;AAAA,cAAEpB,EAAMG;;MAAI,IAAAC,WAAA;AAAA,cAC1CC,EAAa,aAAa;;MAAA,CAAA;;IAAA,CAAA;GAAA;IAAA,CAAA,CAAA"}
+{"version":3,"file":"Button.js","names":["children","createMemo","createUniqueId","JSXElement","mergeProps","splitProps","Dynamic","clsx","s","ButtonProps","ButtonValidElement","DefaultStyleProps","ResolvedButtonProps","Button","props","T","merged","variant","size","as","id","Partial","local","others","iconOnly","icon","iconWithAttr","position","_el$","_tmpl$","_$setAttribute","_$insert","resolved","_$memo","_el$2","_tmpl$2","ariaLabel","iconPosition","_$createComponent","_$mergeProps","component","type","undefined","onClick","class","iconSize"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n  children,\n  createMemo,\n  createUniqueId,\n  type JSXElement,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { clsx } from \"~/utils\";\nimport s from \"./Button.styles\";\nimport type {\n  ButtonProps,\n  ButtonValidElement,\n  DefaultStyleProps,\n  ResolvedButtonProps,\n} from \"./Button.types\";\n\nexport const Button = <T extends ButtonValidElement = \"button\">(\n  props: ButtonProps<T>,\n) => {\n  const merged = mergeProps(\n    {\n      variant: \"primary\",\n      size: \"md\",\n      as: \"button\",\n      id: createUniqueId(),\n    } satisfies Partial<DefaultStyleProps>,\n    props as ResolvedButtonProps<T>,\n  );\n\n  const [local, others] = splitProps(merged, [\n    \"as\",\n    \"variant\",\n    \"size\",\n    \"icon\",\n    \"iconPosition\",\n    \"class\",\n    \"classList\",\n    \"children\",\n    \"onClick\",\n  ]);\n\n  const iconOnly = createMemo(\n    () =>\n      (local.icon &&\n        typeof local.icon === \"object\" &&\n        \"ariaLabel\" in local.icon &&\n        \"icon\" in local.icon) ||\n      (!!local.icon && !local.children),\n  );\n\n  const iconWithAttr = (\n    icon: JSXElement,\n    position: \"inline-start\" | \"inline-end\",\n  ) => <span data-icon={position}>{icon}</span>;\n\n  const resolved = children(() =>\n    local.icon ? (\n      typeof local.icon === \"object\" &&\n      \"ariaLabel\" in local.icon &&\n      \"icon\" in local.icon ? (\n        <>\n          {local.icon.icon}\n          <span class=\"sr-only\">{local.icon.ariaLabel}</span>\n        </>\n      ) : (\n        <>\n          {(!local.iconPosition || local.iconPosition === \"left\") &&\n            iconWithAttr(local.icon, \"inline-start\")}\n          {local.children}\n          {local.iconPosition === \"right\" &&\n            iconWithAttr(local.icon, \"inline-end\")}\n        </>\n      )\n    ) : (\n      local.children\n    ),\n  );\n\n  return (\n    // @ts-expect-error\n    <Dynamic\n      data-slot=\"button\"\n      component={local.as}\n      type={local.as === \"button\" ? (others.type ?? \"button\") : undefined}\n      onClick={local.onClick}\n      class={clsx(\n        s({\n          variant: local.variant,\n          size: iconOnly() ? undefined : local.size,\n          iconSize: iconOnly() ? local.size : undefined,\n        }),\n        local.class,\n      )}\n      {...others}\n    >\n      {resolved()}\n    </Dynamic>\n  );\n};\n"],"mappings":";;;;;oFAkBaa,KACXC,MACG;CAWH,IAAM,CAACQ,GAAOC,KAAUlB,EAVTD,EACb;EACEa,SAAS;EACTC,MAAM;EACNC,IAAI;EACJC,IAAIlB,GAAe;EACpB,EACDY,EACD,EAE0C;EACzC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EAEIU,IAAWvB,QAEZqB,EAAMG,QACL,OAAOH,EAAMG,QAAS,YACtB,eAAeH,EAAMG,QACrB,UAAUH,EAAMG,QACjB,CAAC,CAACH,EAAMG,QAAQ,CAACH,EAAMtB,SAC3B,EAEK0B,KACJD,GACAE,aAAuC;EAAA,IAAAC,IAAAC,GAAA;AACJ,SADIC,EAAAF,GAAA,aACnBD,EAAQ,EAAAI,EAAAH,GAAGH,EAAI,EAAAG;KAAQ,EAEvCI,IAAWhC,QACfsB,EAAMG,OACJ,OAAOH,EAAMG,QAAS,YACtB,eAAeH,EAAMG,QACrB,UAAUH,EAAMG,OAAI,CAAAQ,QAEfX,EAAMG,KAAKA,KAAI,SAAA;EAAA,IAAAS,IAAAC,GAAA;AAC2B,SAD3BJ,EAAAG,SACOZ,EAAMG,KAAKW,UAAS,EAAAF;KAAA,CAAA,GAAA;EAAAD,QAI1CA,QAAC,CAACX,EAAMe,gBAAgBf,EAAMe,iBAAiB,OAAM,EAAA,IACpDX,EAAaJ,EAAMG,MAAM,eAAe,CAAA;EAAAQ,QACzCX,EAAMtB,SAAQ;EAAAiC,QACdA,QAAAX,EAAMe,iBAAiB,QAAO,EAAA,IAC7BX,EAAaJ,EAAMG,MAAM,aAAa,CAAA;EAE3C,GAEDH,EAAMtB,SAET;AAED,QACEsC,EACChC,GAAOiC,EAAA;EAAA,aAAA;EAAA,IAENC,YAAS;AAAA,UAAElB,EAAMH;;EAAE,IACnBsB,OAAI;AAAA,UAAER,QAAAX,EAAMH,OAAO,SAAQ,EAAA,GAAII,EAAOkB,QAAQ,WAAYC,KAAAA;;EAAS,IACnEC,UAAO;AAAA,UAAErB,EAAMqB;;EAAO,IAAA,QAAA;AAAA,UACfpC,EACLC,EAAE;IACAS,SAASK,EAAML;IACfC,MAAMM,GAAU,GAAGkB,KAAAA,IAAYpB,EAAMJ;IACrC2B,UAAUrB,GAAU,GAAGF,EAAMJ,OAAOwB,KAAAA;IACrC,CAAC,EACFpB,EAAMsB,MACP;;EAAA,EACGrB,GAAM,EAAA,IAAAvB,WAAA;AAAA,SAETgC,GAAU;IAAA,CAAA,CAAA"}

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

@@ -2,23 +2,41 @@ import { JSXElement } from 'solid-js';
 import { BaseProps, MakeRequired, MouseEventHandler, PolymorphicProps } from '../../types';
 export type ButtonVariant = "primary" | "outline" | "secondary" | "ghost" | "destructive" | "link";
 export type ButtonSize = "md" | "xs" | "sm" | "lg";
-interface BaseButtonProps extends BaseProps {
+export interface BaseButtonProps extends BaseProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    id?: string;
+}
+export type ButtonIconProps = {
     /** Button content */
-    children?: JSXElement;
+    children: JSXElement;
     icon?: JSXElement;
     iconPosition?: "left" | "right";
-    id?: string;
-}
+} | {
+    icon: {
+        icon: JSXElement;
+        ariaLabel: string;
+    };
+};
 export type ButtonValidElement = "button" | "a";
-export type ButtonProps<T extends ButtonValidElement> = PolymorphicProps<T, BaseButtonProps & {
+export type ButtonProps<T extends ButtonValidElement> = Omit<PolymorphicProps<T, BaseButtonProps & {
     onClick?: MouseEventHandler<T>;
-}>;
+}>, "children"> & ButtonIconProps;
+export type ResolvedBaseButtonProps = {
+    /** Button content */
+    children?: JSXElement;
+    icon?: JSXElement | {
+        icon: JSXElement;
+        ariaLabel: string;
+    };
+    iconPosition?: "left" | "right";
+};
+export type ResolvedButtonProps<T extends ButtonValidElement> = PolymorphicProps<T, BaseButtonProps & {
+    onClick?: MouseEventHandler<T>;
+}> & ResolvedBaseButtonProps;
 export type DefaultStyleProps = MakeRequired<BaseButtonProps, "size" | "variant"> & {
     as: ButtonValidElement;
 };
 export type ButtonPropsWithDefault<T extends ButtonValidElement> = PolymorphicProps<T, BaseButtonProps & {
     onClick?: MouseEventHandler<T>;
 }>;
-export {};

package/dist/components/collapsible/CollapsibleContent/CollapsibleContent.js

@@ -3,14 +3,14 @@ import { createComponent as t, insert as n, spread as r, template as i } from "s
 import { Show as a, splitProps as o } from "solid-js";
 //#region src/components/collapsible/CollapsibleContent/CollapsibleContent.tsx
 var s = /* @__PURE__ */ i("<div data-slot=collapsible-content>"), c = (i) => {
-	let { onOpenChange: c, open: l, setInternalOpen: u } = e(), [d, f] = o(i, ["children"]);
+	let { open: c } = e(), [l, u] = o(i, ["children"]);
 	return t(a, {
 		get when() {
-			return l();
+			return c();
 		},
 		get children() {
 			var e = s();
-			return r(e, f, !1, !0), n(e, () => d.children), e;
+			return r(e, u, !1, !0), n(e, () => l.children), e;
 		}
 	});
 };

package/dist/components/collapsible/CollapsibleContent/CollapsibleContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContent.js","names":["Show","splitProps","CollapsibleContentProps","useCollapsibleContext","CollapsibleContent","props","onOpenChange","open","setInternalOpen","local","others","_$createComponent","when","children","_el$","_tmpl$","_$spread","_$insert"],"sources":["../../../../src/components/collapsible/CollapsibleContent/CollapsibleContent.tsx"],"sourcesContent":["import { Show, splitProps } from \"solid-js\";\nimport type { CollapsibleContentProps } from \"./CollapsibleContent.types\";\nimport { useCollapsibleContext } from \"../Collapsible\";\n\nexport const CollapsibleContent = (props: CollapsibleContentProps) => {\n  const { onOpenChange, open, setInternalOpen } = useCollapsibleContext();\n\n  const [local, others] = splitProps(props, [\"children\"]);\n\n  return (\n    <Show when={open()}>\n      <div data-slot=\"collapsible-content\" {...others}>\n        {local.children}\n      </div>\n    </Show>\n  );\n};\n"],"mappings":";;;;kEAIaI,KAAsBC,MAAmC;CACpE,IAAM,EAAEC,iBAAcC,SAAMC,uBAAoBL,GAAuB,EAEjE,CAACM,GAAOC,KAAUT,EAAWI,GAAO,CAAC,WAAW,CAAC;AAEvD,QAAAM,EACGX,GAAI;EAAA,IAACY,OAAI;AAAA,UAAEL,GAAM;;EAAA,IAAAM,WAAA;GAAA,IAAAC,IAAAC,GAAA;AAEC,UAFDC,EAAAF,GACyBJ,GAAM,IAAA,GAAA,EAAAO,EAAAH,SAC5CL,EAAMI,SAAQ,EAAAC;;EAAA,CAAA"}
+{"version":3,"file":"CollapsibleContent.js","names":["Show","splitProps","CollapsibleContentProps","useCollapsibleContext","CollapsibleContent","props","open","local","others","_$createComponent","when","children","_el$","_tmpl$","_$spread","_$insert"],"sources":["../../../../src/components/collapsible/CollapsibleContent/CollapsibleContent.tsx"],"sourcesContent":["import { Show, splitProps } from \"solid-js\";\nimport type { CollapsibleContentProps } from \"./CollapsibleContent.types\";\nimport { useCollapsibleContext } from \"../Collapsible\";\n\nexport const CollapsibleContent = (props: CollapsibleContentProps) => {\n  const { open } = useCollapsibleContext();\n\n  const [local, others] = splitProps(props, [\"children\"]);\n\n  return (\n    <Show when={open()}>\n      <div data-slot=\"collapsible-content\" {...others}>\n        {local.children}\n      </div>\n    </Show>\n  );\n};\n"],"mappings":";;;;kEAIaI,KAAsBC,MAAmC;CACpE,IAAM,EAAEC,YAASH,GAAuB,EAElC,CAACI,GAAOC,KAAUP,EAAWI,GAAO,CAAC,WAAW,CAAC;AAEvD,QAAAI,EACGT,GAAI;EAAA,IAACU,OAAI;AAAA,UAAEJ,GAAM;;EAAA,IAAAK,WAAA;GAAA,IAAAC,IAAAC,GAAA;AAEC,UAFDC,EAAAF,GACyBJ,GAAM,IAAA,GAAA,EAAAO,EAAAH,SAC5CL,EAAMI,SAAQ,EAAAC;;EAAA,CAAA"}

package/dist/components/collapsible/CollapsibleTrigger/CollapsibleTrigger.js

@@ -4,7 +4,7 @@ import { createComponent as n, mergeProps as r } from "solid-js/web";
 //#region src/components/collapsible/CollapsibleTrigger/CollapsibleTrigger.tsx
 var i = (i) => {
 	let { onOpenChange: a, open: o, setInternalOpen: s } = t();
-	return n(e, r({
+	return n(e, r(i, {
 		"data-slot": "collapsible-trigger",
 		get "data-panel-open"() {
 			return o();
@@ -16,7 +16,7 @@ var i = (i) => {
 			let e = !o();
 			s(e), a?.(e);
 		}
-	}, i));
+	}));
 };
 //#endregion
 export { i as CollapsibleTrigger };

package/dist/components/collapsible/CollapsibleTrigger/CollapsibleTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleTrigger.js","names":["useCollapsibleContext","CollapsibleTriggerProps","Button","CollapsibleTrigger","props","onOpenChange","open","setInternalOpen","handleClick","next","_$createComponent","_$mergeProps","data-panel-open","aria-expanded","onClick"],"sources":["../../../../src/components/collapsible/CollapsibleTrigger/CollapsibleTrigger.tsx"],"sourcesContent":["import { useCollapsibleContext } from \"../Collapsible\";\nimport type { CollapsibleTriggerProps } from \"./CollapsibleTrigger.types\";\nimport { Button } from \"~/components/button\";\n\nexport const CollapsibleTrigger = (props: CollapsibleTriggerProps) => {\n  const { onOpenChange, open, setInternalOpen } = useCollapsibleContext();\n\n  const handleClick = () => {\n    const next = !open();\n    setInternalOpen(next);\n    onOpenChange?.(next);\n  };\n\n  return (\n    <Button\n      data-slot=\"collapsible-trigger\"\n      data-panel-open={open()}\n      aria-expanded={open()}\n      onClick={handleClick}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;AAIA,IAAaG,KAAsBC,MAAmC;CACpE,IAAM,EAAEC,iBAAcC,SAAMC,uBAAoBP,GAAuB;AAQvE,QAAAU,EACGR,GAAMS,EAAA;EAAA,aAAA;EAAA,IAAA,oBAAA;AAAA,UAEYL,GAAM;;EAAA,IAAA,kBAAA;AAAA,UACRA,GAAM;;EACrBQ,eAXsB;GACxB,IAAML,IAAO,CAACH,GAAM;AAEpBD,GADAE,EAAgBE,EAAK,EACrBJ,IAAeI,EAAK;;EAQE,EAChBL,EAAK,CAAA"}
+{"version":3,"file":"CollapsibleTrigger.js","names":["useCollapsibleContext","CollapsibleTriggerProps","Button","CollapsibleTrigger","props","onOpenChange","open","setInternalOpen","handleClick","next","_$createComponent","_$mergeProps","data-panel-open","aria-expanded","onClick"],"sources":["../../../../src/components/collapsible/CollapsibleTrigger/CollapsibleTrigger.tsx"],"sourcesContent":["import { useCollapsibleContext } from \"../Collapsible\";\nimport type { CollapsibleTriggerProps } from \"./CollapsibleTrigger.types\";\nimport { Button } from \"~/components/button\";\n\nexport const CollapsibleTrigger = (props: CollapsibleTriggerProps) => {\n  const { onOpenChange, open, setInternalOpen } = useCollapsibleContext();\n\n  const handleClick = () => {\n    const next = !open();\n    setInternalOpen(next);\n    onOpenChange?.(next);\n  };\n\n  return (\n    // @ts-expect-error\n    <Button\n      {...props}\n      data-slot=\"collapsible-trigger\"\n      data-panel-open={open()}\n      aria-expanded={open()}\n      onClick={handleClick}\n    />\n  );\n};\n"],"mappings":";;;;AAIA,IAAaG,KAAsBC,MAAmC;CACpE,IAAM,EAAEC,iBAAcC,SAAMC,uBAAoBP,GAAuB;AAQvE,QACEU,EACCR,GAAMS,EACDP,GAAK;EAAA,aAAA;EAAA,IAAA,oBAAA;AAAA,UAEQE,GAAM;;EAAA,IAAA,kBAAA;AAAA,UACRA,GAAM;;EACrBQ,eAbsB;GACxB,IAAML,IAAO,CAACH,GAAM;AAEpBD,GADAE,EAAgBE,EAAK,EACrBJ,IAAeI,EAAK;;EAUE,CAAA,CAAA"}

package/dist/components/dialog/Dialog/Dialog.context.d.ts

@@ -0,0 +1,10 @@
+import { Accessor, Setter } from 'solid-js';
+interface DialogContextValue {
+    show: Accessor<boolean>;
+    setShow: Setter<boolean>;
+    open: Accessor<boolean>;
+    setOpen: Setter<boolean>;
+}
+export declare const DialogContext: import('solid-js').Context<DialogContextValue | undefined>;
+export declare const useDialogContext: () => DialogContextValue;
+export {};

package/dist/components/dialog/Dialog/Dialog.context.js

@@ -0,0 +1,11 @@
+import { createContext as e, useContext as t } from "solid-js";
+//#region src/components/dialog/Dialog/Dialog.context.ts
+var n = e(), r = () => {
+	let e = t(n);
+	if (!e) throw Error("useDialogContext must be used within a DialogProvider");
+	return e;
+};
+//#endregion
+export { n as DialogContext, r as useDialogContext };
+
+//# sourceMappingURL=Dialog.context.js.map

package/dist/components/dialog/Dialog/Dialog.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.context.js","names":[],"sources":["../../../../src/components/dialog/Dialog/Dialog.context.ts"],"sourcesContent":["import {\n  type Accessor,\n  createContext,\n  type Setter,\n  useContext,\n} from \"solid-js\";\n\ninterface DialogContextValue {\n  show: Accessor<boolean>;\n  setShow: Setter<boolean>;\n  open: Accessor<boolean>;\n  setOpen: Setter<boolean>;\n}\n\nexport const DialogContext = createContext<DialogContextValue>();\n\nexport const useDialogContext = () => {\n  const context = useContext(DialogContext);\n  if (!context) {\n    throw new Error(\"useDialogContext must be used within a DialogProvider\");\n  }\n  return context;\n};\n"],"mappings":";;AAcA,IAAa,IAAgB,GAAmC,EAEnD,UAAyB;CACpC,IAAM,IAAU,EAAW,EAAc;AACzC,KAAI,CAAC,EACH,OAAU,MAAM,wDAAwD;AAE1E,QAAO"}

package/dist/components/dialog/Dialog/Dialog.d.ts

@@ -0,0 +1,2 @@
+import { DialogProps } from './Dialog.types';
+export declare const Dialog: (props: DialogProps) => import("solid-js").JSX.Element;