@moduix/react 1.1.1 → 2.1.0

package/README.md

@@ -1,122 +1,45 @@
 ![moduix banner](https://raw.githubusercontent.com/Blinks44/moduix/main/apps/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)
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
-[![Turborepo](https://img.shields.io/badge/Monorepo-Turborepo-EF4444)](https://turbo.build/)
 
-# moduix
+# @moduix/react
 
-React implementation of the moduix component system for product interfaces, built on top of
-[Ark UI](https://ark-ui.com/) primitives.
+Polished React components for product interfaces, built on
+[Ark UI](https://ark-ui.com/) and styled with native CSS.
 
-moduix gives you ready-made components with accessible behavior, native CSS styles, and a
-composition-first API. It supports two production workflows: install the package for managed
-updates, or copy registry component source when your application needs direct ownership.
+The package combines Ark's accessible interaction model with shadcn-inspired clarity: calm defaults,
+explicit named parts, consistent states, and a token-first theme contract. No styling framework is
+required.
 
-## Why It Exists
+[Documentation](https://moduix.dev/) ·
+[Quick start](https://moduix.dev/docs/quick-start) ·
+[Components](https://moduix.dev/docs/components) ·
+[Tokens](https://moduix.dev/docs/tokens)
 
-moduix is built for real product screens: predictable behavior, readable composition, small
-runtime surface, and CSS that can be owned by the application. The library is public and actively
-developed around Ark UI primitives, shadcn-compatible source delivery, and practical defaults for
-teams that need consistent interfaces.
+## Highlights
 
-## Principles
+- Ark-aligned composition, controlled and uncontrolled state, context, callbacks, and form behavior.
+- Consistent `36px` primary controls and `32px` popup rows through shared size tokens.
+- Native CSS, CSS Modules, cascade layers, semantic tokens, and component-level variables.
+- Stable moduix `data-slot` hooks alongside Ark part and state attributes.
+- Optional reset and curated `dense`, `soft`, and `contrast` presets.
+- React 18 and 19 support.
+- A matching hosted shadcn registry when source ownership is the better workflow.
 
-- **Ark UI underneath.** Components target Ark UI composition and accessibility primitives instead of
-  reimplementing low-level interaction behavior.
-- **Small dependency surface.** Ark UI is the only external UI primitive layer. The package
-  keeps the runtime stack intentionally small and does not bring a styling framework with it.
-- **Two installation paths.** Use moduix as an npm package, or copy component source into your
-  project when direct ownership is more important than package-managed updates.
-- **Composable API.** Components are exposed as named parts, so complex UI can be assembled
-  without hiding important structure.
-- **Native CSS.** Styles are distributed as CSS, use CSS custom properties, and are designed to
-  work with your existing styling approach.
-- **shadcn-compatible source delivery.** shadcn/ui remains a major inspiration for readable
-  component composition. moduix keeps that ownership model available through its registry.
+## Install
 
-## Installation
-
-moduix supports two installation paths:
-
-- Install the library as a regular npm package when you want package-managed updates.
-- Install component source into your own project with `shadcn` when you want direct ownership.
-
-| Choose this path            | When it fits best                                                                                                             |
-| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| npm package                 | You want the fastest setup, package-managed updates, imports from `@moduix/react`, and styles from `@moduix/react/style.css`. |
-| `shadcn` copy-owned install | You want generated source files inside your app, direct local customization, and imports from `@/components/moduix/*`.        |
-
-### npm package
+Install the package and its Ark UI peer dependency:
 
 ```bash
 npm install @moduix/react @ark-ui/react
 ```
 
-`react`, `react-dom`, and `@ark-ui/react` are peer dependencies. They stay in your application
-bundle, so moduix does not ship duplicate React or Ark UI runtimes.
-
-### shadcn copy-owned install
-
-`shadcn` can install selected moduix components from the GitHub registry directly into your project.
-The files become part of your codebase instead of staying in `node_modules`.
-
-Make sure your project resolves the `@/*` alias to `src/*` in both `tsconfig.json` and
-`tsconfig.app.json`, and mirror it in your bundler config.
-
-Create `components.json` in the project root when your app does not already have one:
-
-```json
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/index.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "rtl": false,
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {}
-}
-```
-
-```bash
-npx shadcn@latest add Blinks44/moduix/react-button
-npx shadcn@latest add Blinks44/moduix/react-accordion
-```
-
-The registry install also pulls in the shared moduix foundation files those components need, such as
-styles, icons, and small utilities.
-
-Import the generated foundation stylesheet once in your application entry point:
-
-```tsx
-import '@/lib/moduix/styles/style.css';
-```
-
-If you want the optional reset in the copy-owned path, import it explicitly before the main
-stylesheet:
-
-```tsx
-import '@/lib/moduix/styles/reset.css';
-import '@/lib/moduix/styles/style.css';
-```
-
-With the aliases above, generated files land in `src/components/moduix/*` and `src/lib/moduix/*`.
+`react`, `react-dom`, and `@ark-ui/react` are peer dependencies, so the package does not ship
+duplicate framework or primitive runtimes.
 
-## Usage
+## Add Styles
 
 Import the required foundation stylesheet once in your application entry point:
 
@@ -124,129 +47,134 @@ Import the required foundation stylesheet once in your application entry point:
 import '@moduix/react/style.css';
 ```
 
-This stylesheet is required. It provides the shared design tokens and base styles that component
-CSS depends on.
+This entrypoint provides shared design tokens and base styles. Component imports bring along their
+own CSS.
 
-If you want the optional reset, import it explicitly before the main stylesheet:
+The reset is optional and intentionally separate:
 
 ```tsx
 import '@moduix/react/reset.css';
 import '@moduix/react/style.css';
 ```
 
-Then import and compose the components you need:
+## Use Components
+
+Import public components from the package barrel and compose their named parts:
 
 ```tsx
-import { Button, Dialog, Portal } from '@moduix/react';
+import { Button, Dialog } from '@moduix/react';
 
 export function Example() {
   return (
     <Dialog.Root>
       <Dialog.Trigger asChild>
-        <Button>Open dialog</Button>
+        <Button>Open settings</Button>
       </Dialog.Trigger>
-      <Portal>
-        <Dialog.Backdrop />
-        <Dialog.Positioner>
-          <Dialog.Content>
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content>
+          <Dialog.Header>
             <Dialog.Title>Project settings</Dialog.Title>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
+            <Dialog.Description>Update how this workspace behaves.</Dialog.Description>
+          </Dialog.Header>
+          <Dialog.Footer>
+            <Dialog.CloseTrigger asChild>
+              <Button variant="outline">Done</Button>
+            </Dialog.CloseTrigger>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Positioner>
     </Dialog.Root>
   );
 }
 ```
 
-`style.css` ships the shared design tokens and base styles. Component imports still bring along only
-the component CSS they use.
+moduix keeps important Ark anatomy visible. Higher-level convenience parts are documented as the
+recommended path where they exist, while low-level composition remains available for advanced
+cases.
 
-## Styling
+## Theme the System
 
-Components accept `className` where customization is expected and expose stable `data-slot`
-attributes for targeted styling. Theme values are regular CSS custom properties:
+Theme values are CSS custom properties. Change broad semantic decisions first and use component
+aliases for deliberate exceptions:
 
 ```css
 :root {
-  --color-primary: oklch(0.205 0 0);
-  --button-radius: 0.5rem;
+  --primary: oklch(0.52 0.18 145);
+  --radius: 0.75rem;
+  --size-md: 36px;
+  --size-sm: 32px;
 }
-```
 
-Library CSS is organized with cascade layers:
-
-```css
-@layer ui.reset, ui.tokens, ui.components;
+.compact-toolbar {
+  --button-size-md: 32px;
+}
 ```
 
-This keeps defaults predictable while still letting application styles override tokens,
-classes, or component-level variables.
+The token hierarchy is:
 
-## What Is Included
+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`.
 
-The package exports composed components for common product UI needs, including Accordion, Avatar,
-Button, Checkbox, Combobox, Dialog, Drawer, Field, FileUpload, Menu, NumberInput, Popover,
-QrCode, Select, Tabs, Toast, Tooltip, TreeView, and supporting layout and display primitives.
+Library styles use predictable cascade layers:
 
-## Documentation
+```css
+@layer ui.reset, ui.tokens, ui.base, ui.components;
+```
 
-- Documentation: https://moduix.blinks44.workers.dev/
-- npm package: https://www.npmjs.com/package/@moduix/react
-- React package README: `packages/react/README.md`
-- Docs app README: `apps/docs/README.md`
+Components also expose `className`, `data-slot`, and the Ark `data-scope`, `data-part`, and
+state attributes supported by their primitives.
 
-## Repository Quick Start
+## Optional Presets
 
-From the monorepo root:
+Import one preset after `style.css` and activate it on the document root:
 
-```bash
-npm install
-npm run build:react
-npm run dev
+```tsx
+import '@moduix/react/style.css';
+import '@moduix/react/presets/soft.css';
 ```
 
-## Acknowledgements
-
-This project could not exist without the work of these teams and communities:
-
-- [Ark UI](https://ark-ui.com/) for the composition and accessibility primitives now shaping the library contract.
-- [shadcn/ui](https://ui.shadcn.com/) for the API inspiration and the culture of practical,
-  readable component composition.
-- [Tailwind CSS](https://tailwindcss.com/) for the reset.css implementation.
-- [Fumadocs](https://fumadocs.dev/) for the documentation foundation.
-- [TanStack](https://tanstack.com/) for the application tooling used by the docs.
-- [Voidzero](https://voidzero.dev/) for the JavaScript tooling used by the workspace.
+```html
+<html data-moduix-theme="soft"></html>
+```
 
-## Contributing
+Available presets are `dense`, `soft`, and `contrast`. See
+[Themes](https://moduix.dev/docs/themes) before combining presets or creating a reusable custom
+theme.
 
-Contributions are welcome, especially bug reports, accessibility fixes, documentation
-improvements, and focused component improvements.
+## Prefer to Own the Source?
 
-Before opening a pull request:
+The moduix registry uses the shadcn distribution format while preserving the same Ark-aligned
+component contracts:
 
-1. Install dependencies from the repository root:
+```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
+```
 
-   ```bash
-   npm install
-   ```
+Generated files are installed under `@/components/moduix/*` and `@/lib/moduix/*`. Read the
+[complete Quick Start](https://moduix.dev/docs/quick-start) for alias setup, registry inspection,
+dry runs, and generated stylesheet imports.
 
-2. Build the React package when your change affects `packages/react` or documentation examples:
+## Acknowledgements
 
-   ```bash
-   npm run build:react
-   ```
+- [Ark UI](https://ark-ui.com/) provides the primitive behavior and composition model.
+- [Chakra UI](https://chakra-ui.com/) informs Ark-aligned ergonomics and design-system craft.
+- [shadcn/ui](https://ui.shadcn.com/) inspires open-code delivery, beautiful defaults, and practical
+  documentation.
+- [UnoCSS](https://unocss.dev/) and [Tailwind CSS](https://tailwindcss.com/) provide foundations
+  adapted by the optional reset.
 
-3. Run the required checks:
+## Links
 
-   ```bash
-   npm run fmt:fix
-   npm run lint:check
-   npm run tsc:check
-   ```
+- [Documentation](https://moduix.dev/)
+- [npm package](https://www.npmjs.com/package/@moduix/react)
+- [Source repository](https://github.com/Blinks44/moduix)
+- [Issues](https://github.com/Blinks44/moduix/issues)
 
-Keep pull requests small and specific. For component changes, update the related stories, exports,
-local component notes, public docs, and registry output so the package and docs stay in sync.
+## License
 
-Agent-facing repository guidance lives in `AGENTS.md` and `.agents/skills`. Generated or
-agent-assisted changes should still preserve the library's direct Ark-first component contracts,
-small APIs, and readable implementation style.
+[MIT](./LICENSE.md)

package/dist/components/accordion/Accordion.css

@@ -49,7 +49,7 @@
 
   .tIMeYW_root {
     box-sizing: border-box;
-    width: var(--accordion-width, 22rem);
+    width: var(--accordion-width, 100%);
     max-width: var(--accordion-max-width, 100%);
     min-width: 0;
     color: var(--accordion-color, var(--color-foreground));
@@ -113,8 +113,8 @@
 
     &:focus-visible {
       z-index: 1;
-      outline: var(--accordion-focus-ring-width, var(--border-width-md)) solid
-        var(--accordion-focus-ring-color, var(--color-ring));
+      outline: var(--accordion-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--accordion-focus-ring-color, var(--color-ring));
       outline-offset: calc(var(--accordion-focus-ring-offset, var(--border-width-sm)) * -1);
       position: relative;
     }
@@ -134,8 +134,8 @@
 
   .tIMeYW_itemIndicator {
     box-sizing: border-box;
-    width: var(--accordion-icon-size, .75rem);
-    height: var(--accordion-icon-size, .75rem);
+    width: var(--accordion-icon-size, var(--spacing-3));
+    height: var(--accordion-icon-size, var(--spacing-3));
     transition: transform var(--accordion-icon-transition, var(--transition-default));
     flex-shrink: 0;
     justify-content: center;
@@ -187,4 +187,11 @@
       width: var(--accordion-horizontal-content-width, 16rem);
     }
   }
+
+  .tIMeYW_itemBody {
+    gap: var(--accordion-item-body-gap, var(--spacing-3));
+    min-width: 0;
+    padding: var(--accordion-item-body-padding, var(--spacing-3));
+    display: grid;
+  }
 }

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

@@ -1,4 +1,4 @@
-import { Accordion } from "@ark-ui/react/accordion";
+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>> & {
@@ -8,6 +8,7 @@ declare const Accordion$1: import("react").ForwardRefExoticComponent<Omit<Accord
   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>>;
 };
 //#endregion
-export { Accordion$1 as Accordion };
+export { Accordion$1 as Accordion, useAccordion };

package/dist/components/accordion/Accordion.js

@@ -1,10 +1,11 @@
-import { PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import Accordion_module_default from "./Accordion.module.js";
-import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Accordion } from "@ark-ui/react/accordion";
+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, {
@@ -55,13 +56,24 @@ const AccordionItemContent = forwardRef(function AccordionItemContent({ classNam
 		...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$1 = Object.assign(AccordionRoot, {
 	Root: AccordionRoot,
 	RootProvider: AccordionRootProvider,
 	Item: AccordionItem,
 	ItemTrigger: AccordionItemTrigger,
 	ItemIndicator: AccordionItemIndicator,
-	ItemContent: AccordionItemContent
+	ItemContent: AccordionItemContent,
+	ItemBody: AccordionItemBody
 });
 //#endregion
-export { Accordion$1 as Accordion };
+export { Accordion$1 as Accordion, useAccordion };

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

@@ -6,6 +6,7 @@ var Accordion_module_default = {
 	"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",

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

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

package/dist/components/alert/Alert.css

@@ -2,19 +2,24 @@
   .ZXk2dW_root {
     box-sizing: border-box;
     align-items: start;
-    gap: var(--alert-gap, var(--spacing-3));
+    row-gap: var(--alert-content-gap, var(--spacing-1));
+    column-gap: var(--alert-gap, var(--spacing-3));
     border: var(--alert-border-width, var(--border-width-sm)) solid
       var(--alert-border-color, var(--alert-border-color-default, var(--color-border)));
     border-radius: var(--alert-radius, var(--radius-lg));
     width: 100%;
     min-width: 0;
-    padding: var(--alert-padding, var(--spacing-4));
+    padding: var(--alert-padding, var(--spacing-3));
     background-color: var(--alert-bg, var(--alert-bg-default, var(--color-card)));
     color: var(--alert-color, var(--alert-color-default, var(--color-card-foreground)));
     box-shadow: var(--alert-shadow, none);
     grid-template-columns: auto minmax(0, 1fr);
     display: grid;
 
+    & > [data-part="title"], & > [data-part="description"] {
+      grid-column: 2;
+    }
+
     &[data-status="neutral"] {
       --alert-bg-default: var(--color-card);
       --alert-border-color-default: var(--color-border);
@@ -50,25 +55,27 @@
       --alert-indicator-color-default: var(--color-destructive);
     }
 
-    &:not(:has([data-part="indicator"])) {
-      & [data-part="content"] {
-        grid-column: 1 / -1;
+    &:not(:has( > [data-part="indicator"])) {
+      grid-template-columns: minmax(0, 1fr);
+
+      & > [data-part="content"], & > [data-part="title"], & > [data-part="description"] {
+        grid-column: 1;
       }
     }
   }
 
   .ZXk2dW_indicator {
-    width: var(--alert-indicator-size, 1rem);
-    height: var(--alert-indicator-size, 1rem);
+    width: var(--alert-indicator-size, var(--spacing-4));
+    height: var(--alert-indicator-size, var(--spacing-4));
     color: var(--alert-indicator-color, var(--alert-indicator-color-default, currentColor));
     justify-content: center;
     align-items: center;
-    margin-block-start: var(--alert-indicator-offset, .125rem);
+    margin-block-start: var(--alert-indicator-offset, var(--spacing-0-5));
     display: inline-flex;
 
     & :where(svg) {
-      width: var(--alert-indicator-size, 1rem);
-      height: var(--alert-indicator-size, 1rem);
+      width: var(--alert-indicator-size, var(--spacing-4));
+      height: var(--alert-indicator-size, var(--spacing-4));
       pointer-events: none;
       flex-shrink: 0;
     }
@@ -105,4 +112,11 @@
       margin-bottom: 0;
     }
   }
+
+  .ZXk2dW_actions {
+    gap: var(--alert-actions-gap, var(--spacing-2));
+    flex-wrap: wrap;
+    margin-block-start: var(--alert-actions-margin-top, var(--spacing-2));
+    display: flex;
+  }
 }

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

@@ -1,14 +1,16 @@
 //#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?: "neutral" | "info" | "success" | "warning" | "error";
+  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?: "neutral" | "info" | "success" | "warning" | "error";
+    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<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLHeadingElement>>;
+  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 };

package/dist/components/alert/Alert.js

@@ -1,11 +1,11 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Alert_module_default from "./Alert.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/alert/Alert.tsx
-const AlertRoot = forwardRef(function AlertRoot({ className, role, status = "neutral", ...props }, ref) {
+const AlertRoot = forwardRef(function AlertRoot({ children, className, role, status = "neutral", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {
 		ref,
 		role: role ?? (status === "error" ? "alert" : "status"),
@@ -14,7 +14,8 @@ const AlertRoot = forwardRef(function AlertRoot({ className, role, status = "neu
 		"data-slot": "alert-root",
 		"data-status": status,
 		className: clsx(Alert_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children
 	});
 });
 const AlertIndicator = forwardRef(function AlertIndicator({ className, ...props }, ref) {
@@ -39,7 +40,7 @@ const AlertContent = forwardRef(function AlertContent({ className, ...props }, r
 	});
 });
 const AlertTitle = forwardRef(function AlertTitle({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.h3, {
+	return /* @__PURE__ */ jsx(ark.p, {
 		ref,
 		"data-scope": "alert",
 		"data-part": "title",
@@ -58,12 +59,23 @@ const AlertDescription = forwardRef(function AlertDescription({ className, ...pr
 		...props
 	});
 });
+const AlertActions = forwardRef(function AlertActions({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "alert",
+		"data-part": "actions",
+		"data-slot": "alert-actions",
+		className: clsx(Alert_module_default.actions, normalizeClassName(className)),
+		...props
+	});
+});
 const Alert = Object.assign(AlertRoot, {
 	Root: AlertRoot,
 	Indicator: AlertIndicator,
 	Content: AlertContent,
 	Title: AlertTitle,
-	Description: AlertDescription
+	Description: AlertDescription,
+	Actions: AlertActions
 });
 //#endregion
 export { Alert };

package/dist/components/alert/Alert.module.js

@@ -1,6 +1,7 @@
 import './Alert.css';
 //#region src/components/alert/Alert.module.css
 var Alert_module_default = {
+	"actions": "ZXk2dW_actions",
 	"content": "ZXk2dW_content",
 	"description": "ZXk2dW_description",
 	"indicator": "ZXk2dW_indicator",