@neut/ui 0.0.8 → 0.0.10

package/README.md

@@ -1,110 +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:**
 
-> [!NOTE]
-> 为了尽最大可能实现组件的复制即可用，非基础组件之间虽然存在功能重叠但并没有引为依赖，比如`AlertDialog`和`Dialog`二者代码存在高度重叠，但相互独立，并未复用。
+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样式库，因此你需要安装tailwindcss作为开发依赖，具体安装方式请参考tailwindcss文档。
+> [!WARNING]
+>
+> **Under active development — use with caution**
+>
+> The project is still evolving rapidly, APIs may change. **Do not use in production yet.**
 
-除了tailwindcss外，本组件库还内置了两个样式文件：
+---
 
-- animate.css
-- toast.css
+## 🚀 Quick Start
 
-在使用时需要在你项目的主样式文件中导入animate.css，如果你要复制或使用toast组件，也需要导入toast.css。
+Neut follows a **"copy-paste, then use"** pattern (similar to shadcn), though you can also install it as a regular dependency.
 
-需要注意的是，toast.css本身是临时性的样式文件，因为toast组件移植自sonner，尚未针对性地对toast的组件样式进行相应修改，但在未来的版本中一定会删除这个样式文件。
+### 1. Prerequisites (Peer Dependencies)
 
-最终的项目结构类似于：
+Before using any components, make sure these dependencies are installed in your project:
 
-```
-- styles
-  - animate.css
-  - toast.css
-- index.css
-```
+| 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`：
-
-```bash
-bun i tailwind-merge class-variance-authority
-```
+**Create a utility function**
 
-然后在`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/accordion/Accordion/Accordion.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.context.js","names":["createContext","ParentProps","useContext","AccordionValue","createStore","produce","AccordionContextValue","orientation","isOpen","value","toggle","AccordionContext","AccordionProvider","props","defaultValue","multiple","onValueChange","openMap","setOpenMap","Record","reduce","acc","val","String","includes","undefined","current","next","filter","v","key","draft","isCurrentlyOpen","k","prev","Object","values","contextValue","_$createComponent","Provider","children","useAccordionContext","context","Error"],"sources":["../../../../src/components/accordion/Accordion/Accordion.context.tsx"],"sourcesContent":["import { createContext, type ParentProps, useContext } from \"solid-js\";\nimport type { AccordionValue } from \"./Accordion.types\";\nimport { createStore, produce } from \"solid-js/store\";\n\ninterface AccordionContextValue {\n  orientation: \"horizontal\" | \"vertical\";\n  isOpen: (value: string | number) => boolean;\n  toggle: (value: string | number) => void;\n}\n\nconst AccordionContext = createContext<AccordionContextValue>();\n\nexport function AccordionProvider(\n  props: ParentProps & {\n    orientation: \"horizontal\" | \"vertical\";\n    defaultValue?: AccordionValue[];\n    value?: AccordionValue[];\n    multiple?: boolean;\n    onValueChange?: (value: (string | number)[]) => void;\n  },\n) {\n  const [openMap, setOpenMap] = createStore<\n    Record<string, AccordionValue | undefined>\n  >(\n    (props.defaultValue ?? []).reduce(\n      (acc, val) => {\n        acc[String(val)] = val;\n        return acc;\n      },\n      {} as Record<string, AccordionValue | undefined>,\n    ),\n  );\n\n  const isOpen = (value: AccordionValue) => {\n    if (props.value) {\n      // 受控模式：依赖外部传入的数据\n      return props.value.includes(value);\n    }\n    // 非受控模式：O(1) 的细粒度追踪，只订阅该 value 对应的 key\n    return openMap[String(value)] !== undefined;\n  };\n\n  const toggle = (value: string | number) => {\n    // 【受控模式】只通知外部，不改本地状态\n    if (props.value) {\n      const current = props.value;\n      const next = current.includes(value)\n        ? current.filter((v) => v !== value)\n        : props.multiple\n          ? [...current, value]\n          : [value];\n      props.onValueChange?.(next);\n      return;\n    }\n\n    // 非受控模式：细粒度更新，只改动涉及的 key\n    const key = String(value);\n\n    if (!props.multiple) {\n      // 单选：关闭其他，切换自己\n      setOpenMap(\n        produce((draft) => {\n          const isCurrentlyOpen = draft[key] !== undefined;\n\n          for (const k in draft) {\n            draft[k] = undefined;\n          }\n\n          if (!isCurrentlyOpen) {\n            draft[key] = value;\n          }\n        }),\n      );\n    } else {\n      // 多选：切换自己\n      setOpenMap(key, (prev) => (prev !== undefined ? undefined : value));\n    }\n\n    // 通知外部\n    const next = Object.values(openMap).filter(\n      (v): v is AccordionValue => v !== undefined,\n    );\n    props.onValueChange?.(next);\n  };\n\n  const contextValue: AccordionContextValue = {\n    // 使用 getter 确保 props.orientation 改变时能响应\n    get orientation() {\n      return props.orientation;\n    },\n    isOpen,\n    toggle,\n  };\n\n  return (\n    <AccordionContext.Provider value={contextValue}>\n      {props.children}\n    </AccordionContext.Provider>\n  );\n}\n\nexport const useAccordionContext = () => {\n  const context = useContext(AccordionContext);\n  if (!context)\n    throw new Error(\"useAccordionContext must be used in AccordionProvider\");\n\n  return context;\n};\n"],"mappings":";;;;AAUA,IAAMW,IAAmBX,GAAsC;AAE/D,SAAgBY,EACdC,GAOA;CACA,IAAM,CAACI,GAASC,KAAcd,GAG3BS,EAAMC,gBAAgB,EAAE,EAAEM,QACxBC,GAAKC,OACJD,EAAIE,OAAOD,EAAI,IAAIA,GACZD,IAET,EAAE,CAEN,CAAC;AA+DD,QAAAiB,EACG3B,EAAiB4B,UAAQ;EAAC9B,OAVe;GAE1C,IAAIF,cAAc;AAChB,WAAOM,EAAMN;;GAEfC,SAzDcC,MACVI,EAAMJ,QAEDI,EAAMJ,MAAMe,SAASf,EAAM,GAG7BQ,EAAQM,OAAOd,EAAM,MAAMgB,KAAAA;GAoDlCf,SAjDcD,MAA2B;AAEzC,QAAII,EAAMJ,OAAO;KACf,IAAMiB,IAAUb,EAAMJ,OAChBkB,IAAOD,EAAQF,SAASf,EAAM,GAChCiB,EAAQE,QAAQC,MAAMA,MAAMpB,EAAM,GAClCI,EAAME,WACJ,CAAC,GAAGW,GAASjB,EAAM,GACnB,CAACA,EAAM;AACbI,OAAMG,gBAAgBW,EAAK;AAC3B;;IAIF,IAAMG,IAAMP,OAAOd,EAAM;AAEzB,IAAKI,EAAME,WAiBTG,EAAWY,IAAMI,MAAUA,MAAST,KAAAA,IAAwBhB,IAAZgB,KAAAA,EAAmB,GAfnEP,EACEb,GAAS0B,MAAU;KACjB,IAAMC,IAAkBD,EAAMD,OAASL,KAAAA;AAEvC,UAAK,IAAMQ,KAAKF,EACdA,GAAME,KAAKR,KAAAA;AAGb,KAAKO,MACHD,EAAMD,KAAOrB;MAGnB,CAAC;IAOH,IAAMkB,IAAOQ,OAAOC,OAAOnB,EAAQ,CAACW,QACjCC,MAA2BA,MAAMJ,KAAAA,EACnC;AACDZ,MAAMG,gBAAgBW,EAAK;;GAU5B;EAG+C,IAAAa,WAAA;AAAA,UAC3C3B,EAAM2B;;EAAQ,CAAA;;AAKrB,IAAaC,UAA4B;CACvC,IAAMC,IAAUxC,EAAWS,EAAiB;AAC5C,KAAI,CAAC+B,EACH,OAAUC,MAAM,wDAAwD;AAE1E,QAAOD"}
+{"version":3,"file":"Accordion.context.js","names":["createContext","ParentProps","useContext","AccordionValue","createStore","produce","AccordionContextValue","orientation","isOpen","value","toggle","AccordionContext","AccordionProvider","props","defaultValue","multiple","onValueChange","openMap","setOpenMap","Record","reduce","acc","val","String","includes","undefined","current","next","filter","v","key","draft","isCurrentlyOpen","k","prev","Object","values","contextValue","_$createComponent","Provider","children","useAccordionContext","context","Error"],"sources":["../../../../src/components/accordion/Accordion/Accordion.context.tsx"],"sourcesContent":["import { createContext, type ParentProps, useContext } from \"solid-js\";\nimport type { AccordionValue } from \"./Accordion.types\";\nimport { createStore, produce } from \"solid-js/store\";\n\ninterface AccordionContextValue {\n  orientation: \"horizontal\" | \"vertical\";\n  isOpen: (value: string | number) => boolean;\n  toggle: (value: string | number) => void;\n}\n\nconst AccordionContext = createContext<AccordionContextValue>();\n\nexport function AccordionProvider(\n  props: ParentProps & {\n    orientation: \"horizontal\" | \"vertical\";\n    defaultValue?: AccordionValue[];\n    value?: AccordionValue[];\n    multiple?: boolean;\n    onValueChange?: (value: (string | number)[]) => void;\n  },\n) {\n  const [openMap, setOpenMap] = createStore<\n    Record<string, AccordionValue | undefined>\n  >(\n    (props.defaultValue ?? []).reduce(\n      (acc, val) => {\n        acc[String(val)] = val;\n        return acc;\n      },\n      {} as Record<string, AccordionValue | undefined>,\n    ),\n  );\n\n  const isOpen = (value: AccordionValue) => {\n    if (props.value) {\n      // 受控模式：依赖外部传入的数据\n      return props.value.includes(value);\n    }\n    // 非受控模式：O(1) 的细粒度追踪，只订阅该 value 对应的 key\n    return openMap[String(value)] !== undefined;\n  };\n\n  const toggle = (value: string | number) => {\n    // 【受控模式】只通知外部，不改本地状态\n    if (props.value) {\n      const current = props.value;\n      const next = current.includes(value)\n        ? current.filter((v) => v !== value)\n        : props.multiple\n          ? [...current, value]\n          : [value];\n      props.onValueChange?.(next);\n      return;\n    }\n\n    // 非受控模式：细粒度更新，只改动涉及的 key\n    const key = String(value);\n\n    if (!props.multiple) {\n      // 单选：关闭其他，切换自己\n      setOpenMap(\n        produce((draft) => {\n          const isCurrentlyOpen = draft[key] !== undefined;\n\n          for (const k in draft) {\n            draft[k] = undefined;\n          }\n\n          if (!isCurrentlyOpen) {\n            draft[key] = value;\n          }\n        }),\n      );\n    } else {\n      // 多选：切换自己\n      setOpenMap(key, (prev) => (prev !== undefined ? undefined : value));\n    }\n\n    // 通知外部\n    const next = Object.values(openMap).filter(\n      (v): v is AccordionValue => v !== undefined,\n    );\n    props.onValueChange?.(next);\n  };\n\n  const contextValue: AccordionContextValue = {\n    // 使用 getter 确保 props.orientation 改变时能响应\n    get orientation() {\n      return props.orientation;\n    },\n    isOpen,\n    toggle,\n  };\n\n  return (\n    <AccordionContext.Provider value={contextValue}>\n      {props.children}\n    </AccordionContext.Provider>\n  );\n}\n\nexport const useAccordionContext = () => {\n  const context = useContext(AccordionContext);\n  if (!context)\n    throw new Error(\"useAccordionContext must be used in AccordionProvider\");\n\n  return context;\n};\n"],"mappings":";;;;AAUA,IAAMW,IAAmBX,EAAqC;AAE9D,SAAgBY,EACdC,GAOA;CACA,IAAM,CAACI,GAASC,KAAcd,GAG3BS,EAAMC,gBAAgB,CAAA,EAAA,CAAIM,QACxBC,GAAKC,OACJD,EAAIE,OAAOD,CAAG,KAAKA,GACZD,IAET,CAAC,CACH,CACF;CA+DA,OAAAiB,EACG3B,EAAiB4B,UAAQ;EAAC9B,OAAO4B;GARlC,IAAI9B,cAAc;IAChB,OAAOM,EAAMN;GACf;GACAC,SAzDcC,MACVI,EAAMJ,QAEDI,EAAMJ,MAAMe,SAASf,CAAK,IAG5BQ,EAAQM,OAAOd,CAAK,OAAOgB,KAAAA;GAoDlCf,SAjDcD,MAA2B;IAEzC,IAAII,EAAMJ,OAAO;KACf,IAAMiB,IAAUb,EAAMJ,OAChBkB,IAAOD,EAAQF,SAASf,CAAK,IAC/BiB,EAAQE,QAAQC,MAAMA,MAAMpB,CAAK,IACjCI,EAAME,WACJ,CAAC,GAAGW,GAASjB,CAAK,IAClB,CAACA,CAAK;KACZI,EAAMG,gBAAgBW,CAAI;KAC1B;IACF;IAGA,IAAMG,IAAMP,OAAOd,CAAK;IAExB,AAAKI,EAAME,WAiBTG,EAAWY,IAAMI,MAAUA,MAAST,KAAAA,IAAwBhB,IAAZgB,KAAAA,CAAkB,IAflEP,EACEb,GAAS0B,MAAU;KACjB,IAAMC,IAAkBD,EAAMD,OAASL,KAAAA;KAEvC,KAAK,IAAMQ,KAAKF,GACdA,EAAME,KAAKR,KAAAA;KAGb,AAAKO,MACHD,EAAMD,KAAOrB;IAEjB,CAAC,CACH;IAOF,IAAMkB,IAAOQ,OAAOC,OAAOnB,CAAO,CAAC,CAACW,QACjCC,MAA2BA,MAAMJ,KAAAA,CACpC;IACAZ,EAAMG,gBAAgBW,CAAI;GAC5B;EAYoCU;EAAY,IAAAG,WAAA;GAAA,OAC3C3B,EAAM2B;EAAQ;CAAA,CAAA;AAGrB;AAEA,IAAaC,UAA4B;CACvC,IAAMC,IAAUxC,EAAWS,CAAgB;CAC3C,IAAI,CAAC+B,GACH,MAAUC,MAAM,uDAAuD;CAEzE,OAAOD;AACT"}

package/dist/components/accordion/Accordion/Accordion.js

@@ -1,11 +1,12 @@
 import { clsx as e } from "../../../utils/clsx.js";
 import { AccordionProvider as t } from "./Accordion.context.js";
 import { useAccordion as n } from "./useAccordion.js";
-import { addEventListener as r, createComponent as i, delegateEvents as a, insert as o, mergeProps as s, spread as c, template as l } from "solid-js/web";
-import { mergeProps as u, splitProps as d } from "solid-js";
+import r from "./Accordion.styles.js";
+import { addEventListener as i, createComponent as a, delegateEvents as o, insert as s, mergeProps as c, spread as l, template as u } from "solid-js/web";
+import { mergeProps as d, splitProps as f } from "solid-js";
 //#region src/components/accordion/Accordion/Accordion.tsx
-var f = /* @__PURE__ */ l("<section data-slot=accordion>"), p = (a) => {
-	let [l, p] = d(u({
+var p = /*#__PURE__*/ u("<section data-slot=accordion>"), m = (o) => {
+	let u = d({
 		hiddenUntilFound: !1,
 		loopFocus: !0,
 		multiple: !1,
@@ -13,7 +14,7 @@ var f = /* @__PURE__ */ l("<section data-slot=accordion>"), p = (a) => {
 		orientation: "vertical",
 		keepMounted: !1,
 		dir: "ltr"
-	}, a), [
+	}, o), [m, h] = f(u, [
 		"defaultValue",
 		"value",
 		"onValueChange",
@@ -27,43 +28,43 @@ var f = /* @__PURE__ */ l("<section data-slot=accordion>"), p = (a) => {
 		"keepMounted",
 		"dir",
 		"children"
-	]), { handleKeyDown: m } = n();
+	]), { handleKeyDown: g } = n();
 	return (() => {
-		var n = f();
-		return r(n, "keydown", m, !0), c(n, s({
+		var n = p();
+		return i(n, "keydown", g, !0), l(n, c({
 			get class() {
-				return e("flex", "w-full", "flex-col", "max-w-lg", l.class);
+				return e(r, m.class);
 			},
 			get "data-orientation"() {
-				return l.orientation;
+				return m.orientation;
 			},
 			get dir() {
-				return l.dir;
+				return m.dir;
 			}
-		}, p), !1, !0), o(n, i(t, {
+		}, h), !1, !0), s(n, a(t, {
 			get orientation() {
-				return l.orientation;
+				return m.orientation;
 			},
 			get defaultValue() {
-				return a.defaultValue;
+				return o.defaultValue;
 			},
 			get value() {
-				return a.value;
+				return o.value;
 			},
 			get multiple() {
-				return a.multiple;
+				return o.multiple;
 			},
 			get onValueChange() {
-				return a.onValueChange;
+				return o.onValueChange;
 			},
 			get children() {
-				return l.children;
+				return m.children;
 			}
 		})), n;
 	})();
 };
-a(["keydown"]);
+o(["keydown"]);
 //#endregion
-export { p as Accordion };
+export { m as Accordion };
 
 //# sourceMappingURL=Accordion.js.map

package/dist/components/accordion/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["mergeProps","splitProps","clsx","AccordionProvider","AccordionProps","useAccordion","Accordion","props","merged","hiddenUntilFound","loopFocus","multiple","disabled","orientation","keepMounted","dir","const","local","others","handleKeyDown","_el$","_tmpl$","_$addEventListener","_$spread","_$mergeProps","class","data-orientation","_$insert","_$createComponent","defaultValue","value","onValueChange","children","_$delegateEvents"],"sources":["../../../../src/components/accordion/Accordion/Accordion.tsx"],"sourcesContent":["import { mergeProps, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { AccordionProvider } from \"./Accordion.context\";\nimport type { AccordionProps } from \"./Accordion.types\";\nimport { useAccordion } from \"./useAccordion\";\n\nexport const Accordion = (props: AccordionProps) => {\n  const merged = mergeProps(\n    {\n      hiddenUntilFound: false,\n      loopFocus: true,\n      multiple: false,\n      disabled: false,\n      orientation: \"vertical\",\n      keepMounted: false,\n      dir: \"ltr\",\n    } as const,\n    props,\n  );\n\n  const [local, others] = splitProps(merged, [\n    \"defaultValue\",\n    \"value\",\n    \"onValueChange\",\n    \"hiddenUntilFound\",\n    \"loopFocus\",\n    \"multiple\",\n    \"disabled\",\n    \"orientation\",\n    \"class\",\n    \"classList\",\n    \"keepMounted\",\n    \"dir\",\n    \"children\",\n  ]);\n\n  const { handleKeyDown } = useAccordion();\n\n  return (\n    <section\n      class={clsx(\"flex\", \"w-full\", \"flex-col\", \"max-w-lg\", local.class)}\n      data-orientation={local.orientation}\n      data-slot=\"accordion\"\n      dir={local.dir}\n      onKeyDown={handleKeyDown}\n      {...others}\n    >\n      <AccordionProvider\n        orientation={local.orientation}\n        defaultValue={props.defaultValue}\n        value={props.value}\n        multiple={props.multiple}\n        onValueChange={props.onValueChange}\n      >\n        {/* children 是1个以上 AccordionItem */}\n        {local.children}\n      </AccordionProvider>\n    </section>\n  );\n};\n"],"mappings":";;;;;;4DAMaM,KAAaC,MAA0B;CAclD,IAAM,CAACU,GAAOC,KAAUjB,EAbTD,EACb;EACES,kBAAkB;EAClBC,WAAW;EACXC,UAAU;EACVC,UAAU;EACVC,aAAa;EACbC,aAAa;EACbC,KAAK;EACN,EACDR,EACD,EAE0C;EACzC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EAEI,EAAEY,qBAAkBd,GAAc;AAExC,eAAA;EAAA,IAAAe,IAAAC,GAAA;AAiBqB,SAjBrBC,EAAAF,GAAA,WAMeD,GAAa,GAAA,EAAAI,EAAAH,GAAAI,EAAA;GAAA,IAAA,QAAA;AAAA,WAJjBtB,EAAK,QAAQ,UAAU,YAAY,YAAYe,EAAMQ,MAAM;;GAAA,IAAA,qBAAA;AAAA,WAChDR,EAAMJ;;GAAW,IAEnCE,MAAG;AAAA,WAAEE,EAAMF;;GAAG,EAEVG,EAAM,EAAA,IAAA,GAAA,EAAAS,EAAAP,GAAAQ,EAETzB,GAAiB;GAAA,IAChBU,cAAW;AAAA,WAAEI,EAAMJ;;GAAW,IAC9BgB,eAAY;AAAA,WAAEtB,EAAMsB;;GAAY,IAChCC,QAAK;AAAA,WAAEvB,EAAMuB;;GAAK,IAClBnB,WAAQ;AAAA,WAAEJ,EAAMI;;GAAQ,IACxBoB,gBAAa;AAAA,WAAExB,EAAMwB;;GAAa,IAAAC,WAAA;AAAA,WAGjCf,EAAMe;;GAAQ,CAAA,CAAA,EAAAZ;KAAA;;AAIrBa,EAAA,CAAA,UAAA,CAAA"}
+{"version":3,"file":"Accordion.js","names":["mergeProps","splitProps","clsx","AccordionProvider","AccordionProps","useAccordion","s","Accordion","props","merged","hiddenUntilFound","loopFocus","multiple","disabled","orientation","keepMounted","dir","const","local","others","handleKeyDown","_el$","_tmpl$","_$addEventListener","_$spread","_$mergeProps","class","data-orientation","_$insert","_$createComponent","defaultValue","value","onValueChange","children","_$delegateEvents"],"sources":["../../../../src/components/accordion/Accordion/Accordion.tsx"],"sourcesContent":["import { mergeProps, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { AccordionProvider } from \"./Accordion.context\";\nimport type { AccordionProps } from \"./Accordion.types\";\nimport { useAccordion } from \"./useAccordion\";\nimport s from \"./Accordion.styles\";\n\nexport const Accordion = (props: AccordionProps) => {\n  const merged = mergeProps(\n    {\n      hiddenUntilFound: false,\n      loopFocus: true,\n      multiple: false,\n      disabled: false,\n      orientation: \"vertical\",\n      keepMounted: false,\n      dir: \"ltr\",\n    } as const,\n    props,\n  );\n\n  const [local, others] = splitProps(merged, [\n    \"defaultValue\",\n    \"value\",\n    \"onValueChange\",\n    \"hiddenUntilFound\",\n    \"loopFocus\",\n    \"multiple\",\n    \"disabled\",\n    \"orientation\",\n    \"class\",\n    \"classList\",\n    \"keepMounted\",\n    \"dir\",\n    \"children\",\n  ]);\n\n  const { handleKeyDown } = useAccordion();\n\n  return (\n    <section\n      class={clsx(s, local.class)}\n      data-orientation={local.orientation}\n      data-slot=\"accordion\"\n      dir={local.dir}\n      onKeyDown={handleKeyDown}\n      {...others}\n    >\n      <AccordionProvider\n        orientation={local.orientation}\n        defaultValue={props.defaultValue}\n        value={props.value}\n        multiple={props.multiple}\n        onValueChange={props.onValueChange}\n      >\n        {/* children 是1个以上 AccordionItem */}\n        {local.children}\n      </AccordionProvider>\n    </section>\n  );\n};\n"],"mappings":";;;;;;;0DAOaO,KAAaC,MAA0B;CAClD,IAAMC,IAAST,EACb;EACEU,kBAAkB;EAClBC,WAAW;EACXC,UAAU;EACVC,UAAU;EACVC,aAAa;EACbC,aAAa;EACbC,KAAK;CACP,GACAR,CACF,GAEM,CAACU,GAAOC,KAAUlB,EAAWQ,GAAQ;EACzC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEK,EAAEW,qBAAkBf,EAAa;CAEvC,cAAA;EAAA,IAAAgB,IAAAC,EAAA;EAiBqB,OAjBrBC,EAAAF,GAAA,WAMeD,GAAa,EAAA,GAAAI,EAAAH,GAAAI,EAAA;GAAA,IAAA,QAAA;IAAA,OAJjBvB,EAAKI,GAAGY,EAAMQ,KAAK;GAAC;GAAA,IAAA,qBAAA;IAAA,OACTR,EAAMJ;GAAW;GAAA,IAEnCE,MAAG;IAAA,OAAEE,EAAMF;GAAG;EAAA,GAEVG,CAAM,GAAA,IAAA,EAAA,GAAAS,EAAAP,GAAAQ,EAET1B,GAAiB;GAAA,IAChBW,cAAW;IAAA,OAAEI,EAAMJ;GAAW;GAAA,IAC9BgB,eAAY;IAAA,OAAEtB,EAAMsB;GAAY;GAAA,IAChCC,QAAK;IAAA,OAAEvB,EAAMuB;GAAK;GAAA,IAClBnB,WAAQ;IAAA,OAAEJ,EAAMI;GAAQ;GAAA,IACxBoB,gBAAa;IAAA,OAAExB,EAAMwB;GAAa;GAAA,IAAAC,WAAA;IAAA,OAGjCf,EAAMe;GAAQ;EAAA,CAAA,CAAA,GAAAZ;CAAA,EAAA,CAAA;AAIvB;AAAEa,EAAA,CAAA,SAAA,CAAA"}

package/dist/components/accordion/Accordion/Accordion.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/dist/components/accordion/Accordion/Accordion.styles.js

@@ -0,0 +1,7 @@
+import { clsx as e } from "../../../utils/clsx.js";
+//#region src/components/accordion/Accordion/Accordion.styles.ts
+var t = e("flex", "w-full", "flex-col", "max-w-lg");
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=Accordion.styles.js.map

package/dist/components/accordion/Accordion/Accordion.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.styles.js","names":[],"sources":["../../../../src/components/accordion/Accordion/Accordion.styles.ts"],"sourcesContent":["import { clsx } from \"~/utils\";\n\nexport default clsx(\"flex\", \"w-full\", \"flex-col\", \"max-w-lg\");\n"],"mappings":";;AAEA,IAAA,IAAe,EAAK,QAAQ,UAAU,YAAY,UAAU"}

package/dist/components/accordion/Accordion/useAccordion.js

@@ -22,9 +22,7 @@ var e = () => ({ handleKeyDown: (e) => {
 		case "Home":
 			a = 0;
 			break;
-		case "End":
-			a = r.length - 1;
-			break;
+		case "End": a = r.length - 1;
 	}
 	r[a]?.focus();
 } });

package/dist/components/accordion/Accordion/useAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAccordion.js","names":[],"sources":["../../../../src/components/accordion/Accordion/useAccordion.ts"],"sourcesContent":["export const useAccordion = () => {\n  // 键盘无障碍导航\n  const handleKeyDown = (e: KeyboardEvent) => {\n    // 只有这四个键需要处理\n    if (![\"ArrowDown\", \"ArrowUp\", \"Home\", \"End\"].includes(e.key)) return;\n\n    // 确保当前焦点是在一个 Accordion Trigger 上\n    const activeEl = document.activeElement as HTMLElement;\n    if (!activeEl || activeEl.getAttribute(\"data-accordion-trigger\") === null)\n      return;\n\n    e.preventDefault(); // 阻止页面的默认滚动\n\n    const container = e.currentTarget as HTMLElement;\n    // 获取当前 Accordion 下所有未被禁用的 Trigger\n    const triggers = Array.from(\n      container.querySelectorAll(\"[data-accordion-trigger]:not([disabled])\"),\n    ) as HTMLElement[];\n\n    const currentIndex = triggers.indexOf(activeEl);\n    if (currentIndex === -1) return;\n\n    let nextIndex = currentIndex;\n\n    switch (e.key) {\n      case \"ArrowDown\":\n        nextIndex = (currentIndex + 1) % triggers.length; // 循环向下\n        break;\n      case \"ArrowUp\":\n        nextIndex = (currentIndex - 1 + triggers.length) % triggers.length; // 循环向上\n        break;\n      case \"Home\":\n        nextIndex = 0; // 跳到第一个\n        break;\n      case \"End\":\n        nextIndex = triggers.length - 1; // 跳到最后一个\n        break;\n    }\n\n    // 聚焦到下一个元素\n    triggers[nextIndex]?.focus();\n  };\n\n  return { handleKeyDown };\n};\n"],"mappings":";AAAA,IAAa,WA2CJ,EAAE,gBAzCc,MAAqB;AAE1C,KAAI,CAAC;EAAC;EAAa;EAAW;EAAQ;EAAM,CAAC,SAAS,EAAE,IAAI,CAAE;CAG9D,IAAM,IAAW,SAAS;AAC1B,KAAI,CAAC,KAAY,EAAS,aAAa,yBAAyB,KAAK,KACnE;AAEF,GAAE,gBAAgB;CAElB,IAAM,IAAY,EAAE,eAEd,IAAW,MAAM,KACrB,EAAU,iBAAiB,2CAA2C,CACvE,EAEK,IAAe,EAAS,QAAQ,EAAS;AAC/C,KAAI,MAAiB,GAAI;CAEzB,IAAI,IAAY;AAEhB,SAAQ,EAAE,KAAV;EACE,KAAK;AACH,QAAa,IAAe,KAAK,EAAS;AAC1C;EACF,KAAK;AACH,QAAa,IAAe,IAAI,EAAS,UAAU,EAAS;AAC5D;EACF,KAAK;AACH,OAAY;AACZ;EACF,KAAK;AACH,OAAY,EAAS,SAAS;AAC9B;;AAIJ,GAAS,IAAY,OAAO;GAGN"}
+{"version":3,"file":"useAccordion.js","names":[],"sources":["../../../../src/components/accordion/Accordion/useAccordion.ts"],"sourcesContent":["export const useAccordion = () => {\n  // 键盘无障碍导航\n  const handleKeyDown = (e: KeyboardEvent) => {\n    // 只有这四个键需要处理\n    if (![\"ArrowDown\", \"ArrowUp\", \"Home\", \"End\"].includes(e.key)) return;\n\n    // 确保当前焦点是在一个 Accordion Trigger 上\n    const activeEl = document.activeElement as HTMLElement;\n    if (!activeEl || activeEl.getAttribute(\"data-accordion-trigger\") === null)\n      return;\n\n    e.preventDefault(); // 阻止页面的默认滚动\n\n    const container = e.currentTarget as HTMLElement;\n    // 获取当前 Accordion 下所有未被禁用的 Trigger\n    const triggers = Array.from(\n      container.querySelectorAll(\"[data-accordion-trigger]:not([disabled])\"),\n    ) as HTMLElement[];\n\n    const currentIndex = triggers.indexOf(activeEl);\n    if (currentIndex === -1) return;\n\n    let nextIndex = currentIndex;\n\n    switch (e.key) {\n      case \"ArrowDown\":\n        nextIndex = (currentIndex + 1) % triggers.length; // 循环向下\n        break;\n      case \"ArrowUp\":\n        nextIndex = (currentIndex - 1 + triggers.length) % triggers.length; // 循环向上\n        break;\n      case \"Home\":\n        nextIndex = 0; // 跳到第一个\n        break;\n      case \"End\":\n        nextIndex = triggers.length - 1; // 跳到最后一个\n        break;\n    }\n\n    // 聚焦到下一个元素\n    triggers[nextIndex]?.focus();\n  };\n\n  return { handleKeyDown };\n};\n"],"mappings":";AAAA,IAAa,WA2CJ,EAAE,gBAzCc,MAAqB;CAE1C,IAAI,CAAC;EAAC;EAAa;EAAW;EAAQ;CAAK,CAAC,CAAC,SAAS,EAAE,GAAG,GAAG;CAG9D,IAAM,IAAW,SAAS;CAC1B,IAAI,CAAC,KAAY,EAAS,aAAa,wBAAwB,MAAM,MACnE;CAEF,EAAE,eAAe;CAEjB,IAAM,IAAY,EAAE,eAEd,IAAW,MAAM,KACrB,EAAU,iBAAiB,0CAA0C,CACvE,GAEM,IAAe,EAAS,QAAQ,CAAQ;CAC9C,IAAI,MAAiB,IAAI;CAEzB,IAAI,IAAY;CAEhB,QAAQ,EAAE,KAAV;EACE,KAAK;GACH,KAAa,IAAe,KAAK,EAAS;GAC1C;EACF,KAAK;GACH,KAAa,IAAe,IAAI,EAAS,UAAU,EAAS;GAC5D;EACF,KAAK;GACH,IAAY;GACZ;EACF,KAAK,OACH,IAAY,EAAS,SAAS;CAElC;CAGA,EAAS,EAAU,EAAE,MAAM;AAC7B,EAEuB"}

package/dist/components/accordion/AccordionContent/AccordionContent.js

@@ -1,46 +1,50 @@
 import { clsx as e } from "../../../utils/clsx.js";
 import { useAccordionContext as t } from "../Accordion/Accordion.context.js";
 import { useAccordionItemContext as n } from "../AccordionItem/AccordionItem.context.js";
-import { className as r, createComponent as i, effect as a, insert as o, mergeProps as s, setAttribute as c, spread as l, template as u, use as d } from "solid-js/web";
-import { Show as f, createEffect as p, createSignal as m, on as h, splitProps as g, untrack as _ } from "solid-js";
+import r from "./AccordionContent.styles.js";
+import { className as i, createComponent as a, effect as o, insert as s, mergeProps as c, setAttribute as l, spread as u, template as d, use as f } from "solid-js/web";
+import { Show as p, createEffect as m, createSignal as h, on as g, splitProps as _, untrack as v } from "solid-js";
 //#region src/components/accordion/AccordionContent/AccordionContent.tsx
-var v = /* @__PURE__ */ u("<div role=region class=\"overflow-hidden text-sm data-[open=true]:animate-accordion-down data-[open=false]:animate-accordion-up\"data-slot=accordion-content><div>"), y = (u) => {
-	let { orientation: y } = t(), { triggerId: b, open: x, contentId: S } = n(), [C, w] = g(u, [
+var y = /*#__PURE__*/ d("<div role=region data-slot=accordion-content><div>"), b = (d) => {
+	let { orientation: b } = t(), { triggerId: x, open: S, contentId: C } = n(), [w, T] = _(d, [
 		"hiddenUntilFound",
 		"keepMounted",
 		"class",
 		"classList",
 		"children",
 		"style"
-	]), [T, E] = m(_(x)), [D, O] = m(null), k;
-	p(h(x, (e) => {
-		e && E(!0);
-	})), p(() => {
-		T() && k && O(k.scrollHeight);
+	]), [E, D] = h(v(S)), [O, k] = h(null), A;
+	m(g(S, (e) => {
+		e && D(!0);
+	})), m(() => {
+		E() && A && k(A.scrollHeight);
 	});
-	let A = (e) => {
-		!x() && e.animationName === "accordion-up" && (E(!1), O(null));
+	let j = (e) => {
+		!S() && e.animationName === "accordion-up" && (D(!1), k(null));
 	};
-	return i(f, {
+	return a(p, {
 		get when() {
-			return T();
+			return E();
 		},
 		get children() {
-			var t = v(), n = t.firstChild;
-			t.addEventListener("animationend", A), c(t, "id", S), c(t, "aria-labelledby", b), c(t, "data-orientation", y), l(t, s({
+			var t = y(), n = t.firstChild;
+			t.addEventListener("animationend", j), l(t, "id", C), l(t, "aria-labelledby", x), l(t, "data-orientation", b), u(t, c({
+				get class() {
+					return r.content;
+				},
 				get "data-open"() {
-					return x() ? "true" : "false";
+					return S() ? "true" : "false";
 				},
 				get style() {
-					return { "--accordion-panel-height": D() === null ? "auto" : `${D()}px` };
+					return { "--accordion-panel-height": O() === null ? "auto" : `${O()}px` };
 				}
-			}, w), !1, !0);
-			var i = k;
-			return typeof i == "function" ? d(i, n) : k = n, o(n, () => C.children), a(() => r(n, e("pb-2.5 pt-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", C.class))), t;
+			}, T), !1, !0);
+			var a = A;
+			return typeof a == "function" ? f(a, n) : A = n, s(n, () => w.children), o(() => i(n, e(r.wrapper, w.class))), t;
 		}
 	});
 };
 //#endregion
-export { y as AccordionContent };
+export { b as AccordionContent };
 
 //# sourceMappingURL=AccordionContent.js.map

package/dist/components/accordion/AccordionContent/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","names":["createEffect","createSignal","on","Show","splitProps","untrack","clsx","useAccordionContext","useAccordionItemContext","AccordionContentProps","AccordionContent","props","orientation","triggerId","open","contentId","local","others","mounted","setMounted","panelHeight","setPanelHeight","contentRef","HTMLDivElement","isOpen","scrollHeight","handleAnimationEnd","e","AnimationEvent","animationName","_$createComponent","when","children","_el$","_tmpl$","_el$2","firstChild","addEventListener","_$setAttribute","_$spread","_$mergeProps","data-open","style","_ref$","_$use","_$insert","_$effect","_$className","class"],"sources":["../../../../src/components/accordion/AccordionContent/AccordionContent.tsx"],"sourcesContent":["import {\n  createEffect,\n  createSignal,\n  on,\n  Show,\n  splitProps,\n  untrack,\n} from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { useAccordionContext } from \"../Accordion/Accordion.context\";\nimport { useAccordionItemContext } from \"../AccordionItem/AccordionItem.context\";\nimport type { AccordionContentProps } from \"./AccordionContent.types\";\n\nexport const AccordionContent = (props: AccordionContentProps) => {\n  const { orientation } = useAccordionContext();\n  const { triggerId, open, contentId } = useAccordionItemContext();\n\n  const [local, others] = splitProps(props, [\n    \"hiddenUntilFound\",\n    \"keepMounted\",\n    \"class\",\n    \"classList\",\n    \"children\",\n    \"style\",\n  ]);\n\n  // 控制 DOM 是否存在，用untrack避免追踪open变化\n  const [mounted, setMounted] = createSignal(untrack(open));\n  // 记录测量到的真实高度\n  const [panelHeight, setPanelHeight] = createSignal<number | null>(null);\n\n  let contentRef: HTMLDivElement | undefined;\n\n  createEffect(\n    on(open, (isOpen) => {\n      if (isOpen) {\n        setMounted(true);\n      }\n    }),\n  );\n\n  // 挂载后测量高度\n  createEffect(() => {\n    if (mounted() && contentRef) {\n      // 临时让内容可见以测量真实高度\n      setPanelHeight(contentRef.scrollHeight);\n    }\n  });\n\n  const handleAnimationEnd = (e: AnimationEvent) => {\n    if (!open() && e.animationName === \"accordion-up\") {\n      setMounted(false);\n      setPanelHeight(null);\n    }\n  };\n\n  return (\n    <Show when={mounted()}>\n      <div\n        id={contentId}\n        role=\"region\"\n        aria-labelledby={triggerId}\n        class=\"overflow-hidden text-sm data-[open=true]:animate-accordion-down data-[open=false]:animate-accordion-up\"\n        data-slot=\"accordion-content\"\n        data-orientation={orientation}\n        data-open={open() ? \"true\" : \"false\"}\n        style={{\n          \"--accordion-panel-height\":\n            panelHeight() !== null ? `${panelHeight()}px` : \"auto\",\n        }}\n        onAnimationEnd={handleAnimationEnd}\n        {...others}\n      >\n        <div\n          ref={contentRef}\n          class={clsx(\n            \"pb-2.5 pt-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n            local.class,\n          )}\n        >\n          {local.children}\n        </div>\n      </div>\n    </Show>\n  );\n};\n"],"mappings":";;;;;;iMAaaU,KAAoBC,MAAiC;CAChE,IAAM,EAAEC,mBAAgBL,GAAqB,EACvC,EAAEM,cAAWC,SAAMC,iBAAcP,GAAyB,EAE1D,CAACQ,GAAOC,KAAUb,EAAWO,GAAO;EACxC;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EAGI,CAACO,GAASC,KAAclB,EAAaI,EAAQS,EAAK,CAAC,EAEnD,CAACM,GAAaC,KAAkBpB,EAA4B,KAAK,EAEnEqB;AAWJtB,CATAA,EACEE,EAAGY,IAAOU,MAAW;AACnB,EAAIA,KACFL,EAAW,GAAK;GAGtB,CAAC,EAGDnB,QAAmB;AACjB,EAAIkB,GAAS,IAAII,KAEfD,EAAeC,EAAWG,aAAa;GAEzC;CAEF,IAAMC,KAAsBC,MAAsB;AAChD,EAAI,CAACb,GAAM,IAAIa,EAAEE,kBAAkB,mBACjCV,EAAW,GAAM,EACjBE,EAAe,KAAK;;AAIxB,QAAAS,EACG3B,GAAI;EAAA,IAAC4B,OAAI;AAAA,UAAEb,GAAS;;EAAA,IAAAc,WAAA;GAAA,IAAAC,IAAAC,GAAA,EAAAC,IAAAF,EAAAG;AAOYG,GAPZN,EAAAI,iBAAA,gBAaDX,EAAkB,EAAAY,EAAAL,GAAA,MAX9BlB,EAAS,EAAAuB,EAAAL,GAAA,mBAEIpB,EAAS,EAAAyB,EAAAL,GAAA,oBAGRrB,EAAW,EAAA2B,EAAAN,GAAAO,EAAA;IAAA,IAAA,cAAA;AAAA,YAClB1B,GAAM,GAAG,SAAS;;IAAO,IACpC4B,QAAK;AAAA,YAAE,EACL,4BACEtB,GAAa,KAAK,OAA8B,SAAvB,GAAGA,GAAa,CAAA,KAC5C;;IAAA,EAEGH,EAAM,EAAA,IAAA,GAAA;GAAA,IAAA0B,IAGHrB;AAIJ,UAJc,OAAAqB,KAAA,aAAAC,EAAAD,GAAAR,EAAA,GAAVb,IAAUa,GAAAU,EAAAV,SAMdnB,EAAMgB,SAAQ,EAAAc,QAAAC,EAAAZ,GALR7B,EACL,gHACAU,EAAMgC,MACP,CAAA,CAAA,EAAAf;;EAAA,CAAA"}
+{"version":3,"file":"AccordionContent.js","names":["createEffect","createSignal","on","Show","splitProps","untrack","clsx","useAccordionContext","useAccordionItemContext","AccordionContentProps","s","AccordionContent","props","orientation","triggerId","open","contentId","local","others","mounted","setMounted","panelHeight","setPanelHeight","contentRef","HTMLDivElement","isOpen","scrollHeight","handleAnimationEnd","e","AnimationEvent","animationName","_$createComponent","when","children","_el$","_tmpl$","_el$2","firstChild","addEventListener","_$setAttribute","_$spread","_$mergeProps","class","content","data-open","style","_ref$","_$use","_$insert","_$effect","_$className","wrapper"],"sources":["../../../../src/components/accordion/AccordionContent/AccordionContent.tsx"],"sourcesContent":["import {\n  createEffect,\n  createSignal,\n  on,\n  Show,\n  splitProps,\n  untrack,\n} from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { useAccordionContext } from \"../Accordion/Accordion.context\";\nimport { useAccordionItemContext } from \"../AccordionItem/AccordionItem.context\";\nimport type { AccordionContentProps } from \"./AccordionContent.types\";\nimport s from \"./AccordionContent.styles\";\n\nexport const AccordionContent = (props: AccordionContentProps) => {\n  const { orientation } = useAccordionContext();\n  const { triggerId, open, contentId } = useAccordionItemContext();\n\n  const [local, others] = splitProps(props, [\n    \"hiddenUntilFound\",\n    \"keepMounted\",\n    \"class\",\n    \"classList\",\n    \"children\",\n    \"style\",\n  ]);\n\n  // 控制 DOM 是否存在，用untrack避免追踪open变化\n  const [mounted, setMounted] = createSignal(untrack(open));\n  // 记录测量到的真实高度\n  const [panelHeight, setPanelHeight] = createSignal<number | null>(null);\n\n  let contentRef: HTMLDivElement | undefined;\n\n  createEffect(\n    on(open, (isOpen) => {\n      if (isOpen) {\n        setMounted(true);\n      }\n    }),\n  );\n\n  // 挂载后测量高度\n  createEffect(() => {\n    if (mounted() && contentRef) {\n      // 临时让内容可见以测量真实高度\n      setPanelHeight(contentRef.scrollHeight);\n    }\n  });\n\n  const handleAnimationEnd = (e: AnimationEvent) => {\n    if (!open() && e.animationName === \"accordion-up\") {\n      setMounted(false);\n      setPanelHeight(null);\n    }\n  };\n\n  return (\n    <Show when={mounted()}>\n      <div\n        id={contentId}\n        role=\"region\"\n        aria-labelledby={triggerId}\n        class={s.content}\n        data-slot=\"accordion-content\"\n        data-orientation={orientation}\n        data-open={open() ? \"true\" : \"false\"}\n        style={{\n          \"--accordion-panel-height\":\n            panelHeight() !== null ? `${panelHeight()}px` : \"auto\",\n        }}\n        onAnimationEnd={handleAnimationEnd}\n        {...others}\n      >\n        <div ref={contentRef} class={clsx(s.wrapper, local.class)}>\n          {local.children}\n        </div>\n      </div>\n    </Show>\n  );\n};\n"],"mappings":";;;;;;;+EAcaW,KAAoBC,MAAiC;CAChE,IAAM,EAAEC,mBAAgBN,EAAoB,GACtC,EAAEO,cAAWC,SAAMC,iBAAcR,EAAwB,GAEzD,CAACS,GAAOC,KAAUd,EAAWQ,GAAO;EACxC;EACA;EACA;EACA;EACA;EACA;CAAO,CACR,GAGK,CAACO,GAASC,KAAcnB,EAAaI,EAAQU,CAAI,CAAC,GAElD,CAACM,GAAaC,KAAkBrB,EAA4B,IAAI,GAElEsB;CAWJvB,AATAA,EACEE,EAAGa,IAAOU,MAAW;EACnB,AAAIA,KACFL,EAAW,EAAI;CAEnB,CAAC,CACH,GAGApB,QAAmB;EACjB,AAAImB,EAAQ,KAAKI,KAEfD,EAAeC,EAAWG,YAAY;CAE1C,CAAC;CAED,IAAMC,KAAsBC,MAAsB;EAChD,AAAI,CAACb,EAAK,KAAKa,EAAEE,kBAAkB,mBACjCV,EAAW,EAAK,GAChBE,EAAe,IAAI;CAEvB;CAEA,OAAAS,EACG5B,GAAI;EAAA,IAAC6B,OAAI;GAAA,OAAEb,EAAQ;EAAC;EAAA,IAAAc,WAAA;GAAA,IAAAC,IAAAC,EAAA,GAAAC,IAAAF,EAAAG;GAOYG,AAPZN,EAAAI,iBAAA,gBAaDX,CAAkB,GAAAY,EAAAL,GAAA,MAX9BlB,CAAS,GAAAuB,EAAAL,GAAA,mBAEIpB,CAAS,GAAAyB,EAAAL,GAAA,oBAGRrB,CAAW,GAAA2B,EAAAN,GAAAO,EAAA;IAAA,IAAA,QAAA;KAAA,OAFtB/B,EAAEiC;IAAO;IAAA,IAAA,cAAA;KAAA,OAGL5B,EAAK,IAAI,SAAS;IAAO;IAAA,IACpC8B,QAAK;KAAA,OAAE,EACL,4BACExB,EAAY,MAAM,OAA8B,SAAvB,GAAGA,EAAY,EAAC,IAC7C;IAAC;GAAA,GAEGH,CAAM,GAAA,IAAA,EAAA;GAAA,IAAA4B,IAEAvB;GAA+C,OAArC,OAAAuB,KAAA,aAAAC,EAAAD,GAAAV,CAAA,IAAVb,IAAUa,GAAAY,EAAAZ,SACjBnB,EAAMgB,QAAQ,GAAAgB,QAAAC,EAAAd,GADY9B,EAAKI,EAAEyC,SAASlC,EAAMyB,KAAK,CAAC,CAAA,GAAAR;EAAA;CAAA,CAAA;AAMjE"}

package/dist/components/accordion/AccordionContent/AccordionContent.styles.d.ts

@@ -0,0 +1,5 @@
+declare const classes: {
+    readonly content: "overflow-hidden text-sm data-[open=true]:animate-accordion-down data-[open=false]:animate-accordion-up";
+    readonly wrapper: "pb-2.5 pt-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4";
+};
+export default classes;

package/dist/components/accordion/AccordionContent/AccordionContent.styles.js

@@ -0,0 +1,9 @@
+//#region src/components/accordion/AccordionContent/AccordionContent.styles.ts
+var e = {
+	content: "overflow-hidden text-sm data-[open=true]:animate-accordion-down data-[open=false]:animate-accordion-up",
+	wrapper: "pb-2.5 pt-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=AccordionContent.styles.js.map