@moduix/react 2.1.0 → 2.2.4

package/README.md

@@ -1,4 +1,4 @@
-![moduix banner](https://raw.githubusercontent.com/Blinks44/moduix/main/apps/docs/public/banner.png)
+![moduix banner](https://raw.githubusercontent.com/Blinks44/moduix/main/apps/docs/docs/public/banner.png)
 
 [![npm](https://img.shields.io/npm/v/@moduix/react?logo=npm&label=npm)](https://www.npmjs.com/package/@moduix/react)
 [![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE.md)
@@ -39,6 +39,18 @@ npm install @moduix/react @ark-ui/react
 `react`, `react-dom`, and `@ark-ui/react` are peer dependencies, so the package does not ship
 duplicate framework or primitive runtimes.
 
+## Compatibility
+
+| Environment | Supported versions                                                        |
+| ----------- | ------------------------------------------------------------------------- |
+| React       | 18 and 19                                                                 |
+| Browsers    | The latest two stable releases of Chrome, Edge, and Firefox; Safari 16.4+ |
+| SSR         | Node.js 20+ with native ESM imports                                       |
+
+Published JavaScript uses ES2023 syntax. `@moduix/react` is ESM-only: use `import` (or dynamic
+`import()` from CommonJS); `require()` is not supported. Transpile the package in your application
+build if you support an older environment.
+
 ## Add Styles
 
 Import the required foundation stylesheet once in your application entry point:
@@ -59,10 +71,11 @@ import '@moduix/react/style.css';
 
 ## Use Components
 
-Import public components from the package barrel and compose their named parts:
+Import the component subpaths you use and compose their named parts:
 
 ```tsx
-import { Button, Dialog } from '@moduix/react';
+import { Button } from '@moduix/react/button';
+import { Dialog } from '@moduix/react/dialog';
 
 export function Example() {
   return (
@@ -100,28 +113,28 @@ aliases for deliberate exceptions:
 
 ```css
 :root {
-  --primary: oklch(0.52 0.18 145);
-  --radius: 0.75rem;
-  --size-md: 36px;
-  --size-sm: 32px;
+  --moduix-primary: oklch(0.52 0.18 145);
+  --moduix-radius: 0.75rem;
+  --moduix-size-md: 36px;
+  --moduix-size-sm: 32px;
 }
 
 .compact-toolbar {
-  --button-size-md: 32px;
+  --moduix-button-size-md: 32px;
 }
 ```
 
 The token hierarchy is:
 
-1. theme primitives such as `--primary`, `--spacing-2`, `--size-md`, and `--radius`;
-2. semantic aliases such as `--color-primary`, `--spacing-md`, and `--radius-md`;
-3. shared family defaults such as `--popup-item-min-height` and `--focus-ring-width`;
-4. component aliases such as `--input-height` and `--select-item-min-height`.
+1. theme primitives such as `--moduix-primary`, `--moduix-spacing-2`, `--moduix-size-md`, and `--moduix-radius`;
+2. semantic aliases such as `--moduix-color-primary`, `--moduix-spacing-md`, and `--moduix-radius-md`;
+3. shared family defaults such as `--moduix-popup-item-min-height` and `--moduix-focus-ring-width`;
+4. component aliases such as `--moduix-input-height` and `--moduix-select-item-min-height`.
 
 Library styles use predictable cascade layers:
 
 ```css
-@layer ui.reset, ui.tokens, ui.base, ui.components;
+@layer moduix.reset, moduix.tokens, moduix.base, moduix.components;
 ```
 
 Components also expose `className`, `data-slot`, and the Ark `data-scope`, `data-part`, and
@@ -147,11 +160,10 @@ theme.
 ## Prefer to Own the Source?
 
 The moduix registry uses the shadcn distribution format while preserving the same Ark-aligned
-component contracts:
+component contracts. Create the ready-to-use `components.json` from the
+[complete Quick Start](https://moduix.dev/docs/quick-start), then add the components you need:
 
 ```bash
-npx shadcn@latest init
-npx shadcn@latest registry add '@moduix-react=https://moduix.dev/r/react/{name}.json'
 npx shadcn@latest add @moduix-react/button @moduix-react/dialog
 ```
 

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

@@ -1,14 +1,13 @@
-import { Accordion, useAccordion } from "@ark-ui/react/accordion";
-
-//#region src/components/accordion/Accordion.d.ts
-declare const Accordion$1: import("react").ForwardRefExoticComponent<Omit<Accordion.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Accordion.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<Accordion.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Item: import("react").ForwardRefExoticComponent<Omit<Accordion.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemTrigger: import("react").ForwardRefExoticComponent<Omit<Accordion.ItemTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Accordion.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemContent: import("react").ForwardRefExoticComponent<Omit<Accordion.ItemContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+import { Accordion as AccordionPrimitive, useAccordion, useAccordionContext, useAccordionItemContext } from '@ark-ui/react/accordion';
+declare const Accordion: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: AccordionPrimitive.ContextProps) => import("react").ReactNode;
+    ItemContext: (props: AccordionPrimitive.ItemContextProps) => import("react").ReactNode;
+    Item: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemTrigger: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.ItemTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemContent: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.ItemContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
 };
-//#endregion
-export { Accordion$1 as Accordion, useAccordion };
+export { Accordion, useAccordion, useAccordionContext, useAccordionItemContext };

package/dist/components/accordion/Accordion.js

@@ -1,79 +1,80 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
-import Accordion_module_default from "./Accordion.module.js";
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Accordion, useAccordion, useAccordionContext, useAccordionItemContext } from "@ark-ui/react/accordion";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { Accordion, useAccordion } from "@ark-ui/react/accordion";
-//#region src/components/accordion/Accordion.tsx
-const AccordionRoot = forwardRef(function AccordionRoot({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Accordion.Root, {
-		ref,
-		"data-slot": "accordion-root",
-		className: clsx(Accordion_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { PlusIcon } from "../../internal/icons/ui/index.js";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Accordion_module from "./Accordion.module.js";
+const Accordion_AccordionRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Accordion.Root, {
+        ref: ref,
+        "data-slot": "accordion-root",
+        className: clsx(Accordion_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const AccordionRootProvider = forwardRef(function AccordionRootProvider({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Accordion.RootProvider, {
-		ref,
-		"data-slot": "accordion-root-provider",
-		className: clsx(Accordion_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Accordion_AccordionRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Accordion.RootProvider, {
+        ref: ref,
+        "data-slot": "accordion-root-provider",
+        className: clsx(Accordion_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const AccordionItem = forwardRef(function AccordionItem({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Accordion.Item, {
-		ref,
-		"data-slot": "accordion-item",
-		className: clsx(Accordion_module_default.item, normalizeClassName(className)),
-		...props
-	});
+const Accordion_AccordionItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Accordion.Item, {
+        ref: ref,
+        "data-slot": "accordion-item",
+        className: clsx(Accordion_module.item, normalizeClassName(className)),
+        ...props
+    });
 });
-const AccordionItemTrigger = forwardRef(function AccordionItemTrigger({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Accordion.ItemTrigger, {
-		ref,
-		"data-slot": "accordion-item-trigger",
-		className: clsx(Accordion_module_default.itemTrigger, normalizeClassName(className)),
-		...props
-	});
+const Accordion_AccordionItemTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Accordion.ItemTrigger, {
+        ref: ref,
+        "data-slot": "accordion-item-trigger",
+        className: clsx(Accordion_module.itemTrigger, normalizeClassName(className)),
+        ...props
+    });
 });
-const AccordionItemIndicator = forwardRef(function AccordionItemIndicator({ className, children, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Accordion.ItemIndicator, {
-		ref,
-		"data-slot": "accordion-item-indicator",
-		className: clsx(Accordion_module_default.itemIndicator, normalizeClassName(className)),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
-	});
+const Accordion_AccordionItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Accordion.ItemIndicator, {
+        ref: ref,
+        "data-slot": "accordion-item-indicator",
+        className: clsx(Accordion_module.itemIndicator, normalizeClassName(className)),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(PlusIcon, {})
+    });
 });
-const AccordionItemContent = forwardRef(function AccordionItemContent({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Accordion.ItemContent, {
-		ref,
-		"data-slot": "accordion-item-content",
-		className: clsx(Accordion_module_default.itemContent, normalizeClassName(className)),
-		...props
-	});
+const Accordion_AccordionItemContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Accordion.ItemContent, {
+        ref: ref,
+        "data-slot": "accordion-item-content",
+        className: clsx(Accordion_module.itemContent, normalizeClassName(className)),
+        ...props
+    });
 });
-const AccordionItemBody = forwardRef(function AccordionItemBody({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.div, {
-		ref,
-		"data-scope": "accordion",
-		"data-part": "item-body",
-		"data-slot": "accordion-item-body",
-		className: clsx(Accordion_module_default.itemBody, normalizeClassName(className)),
-		...props
-	});
+const Accordion_AccordionItemBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "accordion",
+        "data-part": "item-body",
+        "data-slot": "accordion-item-body",
+        className: clsx(Accordion_module.itemBody, normalizeClassName(className)),
+        ...props
+    });
 });
-const Accordion$1 = Object.assign(AccordionRoot, {
-	Root: AccordionRoot,
-	RootProvider: AccordionRootProvider,
-	Item: AccordionItem,
-	ItemTrigger: AccordionItemTrigger,
-	ItemIndicator: AccordionItemIndicator,
-	ItemContent: AccordionItemContent,
-	ItemBody: AccordionItemBody
+const Accordion_Accordion = Object.assign(Accordion_AccordionRoot, {
+    Root: Accordion_AccordionRoot,
+    RootProvider: Accordion_AccordionRootProvider,
+    Context: Accordion.Context,
+    ItemContext: Accordion.ItemContext,
+    Item: Accordion_AccordionItem,
+    ItemTrigger: Accordion_AccordionItemTrigger,
+    ItemIndicator: Accordion_AccordionItemIndicator,
+    ItemContent: Accordion_AccordionItemContent,
+    ItemBody: Accordion_AccordionItemBody
 });
-//#endregion
-export { Accordion$1 as Accordion, useAccordion };
+export { Accordion_Accordion as Accordion, useAccordion, useAccordionContext, useAccordionItemContext };

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

@@ -1,16 +1,18 @@
-import './Accordion.css';
-//#region src/components/accordion/Accordion.module.css
-var Accordion_module_default = {
-	"accordion-item-content-closed": "tIMeYW_accordion-item-content-closed",
-	"accordion-item-content-closed-horizontal": "tIMeYW_accordion-item-content-closed-horizontal",
-	"accordion-item-content-open": "tIMeYW_accordion-item-content-open",
-	"accordion-item-content-open-horizontal": "tIMeYW_accordion-item-content-open-horizontal",
-	"item": "tIMeYW_item",
-	"itemBody": "tIMeYW_itemBody",
-	"itemContent": "tIMeYW_itemContent",
-	"itemIndicator": "tIMeYW_itemIndicator",
-	"itemTrigger": "tIMeYW_itemTrigger",
-	"root": "tIMeYW_root"
+import "./Accordion_module.css";
+const Accordion_module = {
+    root: "root-OWAac5",
+    item: "item-XPWA9H",
+    itemTrigger: "itemTrigger-g0LwOA",
+    itemIndicator: "itemIndicator-oa6fbh",
+    itemContent: "itemContent-Qc_5wf",
+    "accordion-item-content-open": "accordion-item-content-open-M7P9ZU",
+    accordionItemContentOpen: "accordion-item-content-open-M7P9ZU",
+    "accordion-item-content-closed": "accordion-item-content-closed-vpqa4a",
+    accordionItemContentClosed: "accordion-item-content-closed-vpqa4a",
+    "accordion-item-content-open-horizontal": "accordion-item-content-open-horizontal-bwnweK",
+    accordionItemContentOpenHorizontal: "accordion-item-content-open-horizontal-bwnweK",
+    "accordion-item-content-closed-horizontal": "accordion-item-content-closed-horizontal-arPObm",
+    accordionItemContentClosedHorizontal: "accordion-item-content-closed-horizontal-arPObm",
+    itemBody: "itemBody-mhLny_"
 };
-//#endregion
-export { Accordion_module_default as default };
+export default Accordion_module;

package/dist/components/accordion/Accordion_module.css

@@ -0,0 +1,203 @@
+@layer moduix.components {
+  @keyframes accordion-item-content-open-M7P9ZU {
+    from {
+      height: 0;
+      opacity: var(--moduix-accordion-item-content-closed-opacity, .01);
+    }
+
+    to {
+      height: var(--height);
+      opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    }
+  }
+
+  @keyframes accordion-item-content-closed-vpqa4a {
+    from {
+      height: var(--height);
+      opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    }
+
+    to {
+      height: 0;
+      opacity: var(--moduix-accordion-item-content-closed-opacity, .01);
+    }
+  }
+
+  @keyframes accordion-item-content-open-horizontal-bwnweK {
+    from {
+      width: 0;
+      opacity: var(--moduix-accordion-item-content-closed-opacity, .01);
+    }
+
+    to {
+      width: var(--width);
+      opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    }
+  }
+
+  @keyframes accordion-item-content-closed-horizontal-arPObm {
+    from {
+      width: var(--width);
+      opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    }
+
+    to {
+      width: 0;
+      opacity: var(--moduix-accordion-item-content-closed-opacity, .01);
+    }
+  }
+
+  .root-OWAac5 {
+    box-sizing: border-box;
+    width: var(--moduix-accordion-width, 100%);
+    max-width: var(--moduix-accordion-max-width, 100%);
+    min-width: 0;
+    color: var(--moduix-accordion-color, var(--moduix-color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .root-OWAac5[data-orientation="horizontal"] {
+    width: var(--moduix-accordion-horizontal-width, auto);
+    height: var(--moduix-accordion-horizontal-height, 20rem);
+    max-height: var(--moduix-accordion-horizontal-max-height, 100%);
+    flex-direction: row;
+  }
+
+  .item-XPWA9H {
+    overflow-anchor: none;
+  }
+
+  .item-XPWA9H[data-orientation="vertical"]:not(:last-child) {
+    border-bottom: var(--moduix-accordion-item-border-width, var(--moduix-border-width-sm)) solid
+        var(--moduix-accordion-item-border-color, var(--moduix-color-border));
+  }
+
+  .item-XPWA9H[data-orientation="horizontal"] {
+    display: flex;
+  }
+
+  .item-XPWA9H[data-orientation="horizontal"]:not(:last-child) {
+    border-inline-end: var(--moduix-accordion-item-border-width, var(--moduix-border-width-sm))
+          solid var(--moduix-accordion-item-border-color, var(--moduix-color-border));
+  }
+
+  .itemTrigger-g0LwOA {
+    box-sizing: border-box;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--moduix-accordion-trigger-gap, var(--moduix-spacing-4));
+    width: 100%;
+    padding-block: var(--moduix-accordion-trigger-padding-y, var(--moduix-spacing-2));
+    padding-inline: var(--moduix-accordion-trigger-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-accordion-trigger-bg, var(--moduix-color-muted));
+    color: inherit;
+    font: inherit;
+    font-size: var(--moduix-accordion-trigger-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-accordion-trigger-line-height, var(--moduix-line-height-text-md));
+    text-align: left;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--moduix-transition-default),
+      color var(--moduix-transition-default);
+    border: 0;
+    outline: 0;
+    margin: 0;
+    display: flex;
+  }
+
+  @media (hover: hover) {
+    .itemTrigger-g0LwOA:not(:is([disabled], [data-disabled])):hover {
+      background-color: var(--moduix-accordion-trigger-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .itemTrigger-g0LwOA:not(:is([disabled], [data-disabled])):active {
+    background-color: var(--moduix-accordion-trigger-bg-active, var(--moduix-accordion-trigger-bg-hover, var(--moduix-color-accent)));
+  }
+
+  .itemTrigger-g0LwOA:focus-visible {
+    z-index: 1;
+    outline: var(--moduix-accordion-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-accordion-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: calc(var(--moduix-accordion-focus-ring-offset, var(--moduix-border-width-sm)) * -1);
+    position: relative;
+  }
+
+  .itemTrigger-g0LwOA:is([disabled], [data-disabled]) {
+    cursor: default;
+    opacity: var(--moduix-accordion-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .itemTrigger-g0LwOA[data-orientation="horizontal"] {
+    width: var(--moduix-accordion-horizontal-trigger-width, 2.5rem);
+    writing-mode: sideways-lr;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .itemIndicator-oa6fbh {
+    box-sizing: border-box;
+    width: var(--moduix-accordion-icon-size, var(--moduix-spacing-3));
+    height: var(--moduix-accordion-icon-size, var(--moduix-spacing-3));
+    transition: transform var(--moduix-accordion-icon-transition, var(--moduix-transition-default));
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .itemIndicator-oa6fbh svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .itemIndicator-oa6fbh[data-state="open"] {
+    transform: var(--moduix-accordion-icon-open-transform, rotate(45deg) scale(1.1));
+  }
+
+  .itemContent-Qc_5wf {
+    box-sizing: border-box;
+    color: var(--moduix-accordion-item-content-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-accordion-item-content-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-accordion-item-content-line-height, var(--moduix-line-height-text-md));
+    overflow: hidden;
+  }
+
+  .itemContent-Qc_5wf[hidden]:not([hidden="until-found"]) {
+    display: none;
+  }
+
+  .itemContent-Qc_5wf[data-state="open"][data-orientation="vertical"] {
+    animation: accordion-item-content-open-M7P9ZU
+        var(--moduix-accordion-item-content-transition, var(--moduix-transition-default));
+  }
+
+  .itemContent-Qc_5wf[data-state="closed"][data-orientation="vertical"] {
+    animation: accordion-item-content-closed-vpqa4a
+        var(--moduix-accordion-item-content-transition, var(--moduix-transition-default));
+  }
+
+  .itemContent-Qc_5wf[data-state="open"][data-orientation="horizontal"] {
+    animation: accordion-item-content-open-horizontal-bwnweK
+        var(--moduix-accordion-item-content-transition, var(--moduix-transition-default));
+  }
+
+  .itemContent-Qc_5wf[data-state="closed"][data-orientation="horizontal"] {
+    animation: accordion-item-content-closed-horizontal-arPObm
+        var(--moduix-accordion-item-content-transition, var(--moduix-transition-default));
+  }
+
+  .itemContent-Qc_5wf[data-orientation="horizontal"] > * {
+    width: var(--moduix-accordion-horizontal-content-width, 16rem);
+  }
+
+  .itemBody-mhLny_ {
+    gap: var(--moduix-accordion-item-body-gap, var(--moduix-spacing-3));
+    min-width: 0;
+    padding: var(--moduix-accordion-item-body-padding, var(--moduix-spacing-3));
+    display: grid;
+  }
+}
+

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

@@ -1,2 +1 @@
-import { Accordion, useAccordion } from "./Accordion.js";
-export { Accordion, useAccordion };
+export { Accordion, useAccordion, useAccordionContext, useAccordionItemContext, } from './Accordion.js';

package/dist/components/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion, useAccordion, useAccordionContext, useAccordionItemContext } from "./Accordion.js";

package/dist/components/alert/Alert.d.ts

@@ -1,16 +1,14 @@
-//#region src/components/alert/Alert.d.ts
 type AlertStatus = 'neutral' | 'info' | 'success' | 'warning' | 'error';
 declare const Alert: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-  status?: AlertStatus;
-} & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
     status?: AlertStatus;
-  } & import("react").RefAttributes<HTMLDivElement>>;
-  Indicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
-  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
-  Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLParagraphElement>>;
-  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
-  Actions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+        status?: AlertStatus;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Actions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
 };
-//#endregion
-export { Alert };
+export { Alert };