@moduix/react 2.5.0 → 2.6.0

package/README.md

@@ -6,72 +6,55 @@
 
 # @moduix/react
 
-Polished React components for product interfaces, built on
-[Ark UI](https://ark-ui.com/) and styled with native CSS.
+React components built on [Ark UI](https://ark-ui.com/), with accessible behavior, explicit
+composition, and CSS Modules styling.
 
-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.
+moduix gives Ark UI primitives a coherent visual system without adding a styling runtime. Components
+are composed from named parts, styled with regular CSS, and customizable through CSS custom
+properties, `className`, stable `data-slot` hooks, and Ark state attributes.
 
 [Documentation](https://moduix.dev/) ·
 [Quick start](https://moduix.dev/docs/quick-start) ·
 [Components](https://moduix.dev/docs/components) ·
 [Tokens](https://moduix.dev/docs/tokens)
 
-## Highlights
-
-- 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.
-
 ## Install
 
 Install the package and its Ark UI peer dependency:
 
 ```bash
-npm install @moduix/react @ark-ui/react
+pnpm add @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
+`react`, `react-dom`, and `@ark-ui/react` are peer dependencies. moduix supports React 18 and 19.
 
-| 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                                       |
+The optional `Chart` component also requires its TanStack peer dependency:
 
-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.
+```bash
+pnpm add @tanstack/charts
+```
 
-## Add Styles
+## Add styles
 
-Import the required foundation stylesheet once in your application entry point:
+Import the shared foundation stylesheet once in your application entry point:
 
 ```tsx
 import '@moduix/react/style.css';
 ```
 
-This entrypoint provides shared design tokens and base styles. Component imports bring along their
-own CSS.
+It provides the shared tokens and base layer styles. Component imports carry their own CSS Modules,
+so their styles follow the components that use them.
 
-The reset is optional and intentionally separate:
+The reset is optional. Import it first when you choose to use it:
 
 ```tsx
 import '@moduix/react/reset.css';
 import '@moduix/react/style.css';
 ```
 
-## Use Components
+## Use components
 
-Import the component subpaths you use and compose their named parts:
+Import component subpaths and compose their named parts:
 
 ```tsx
 import { Button } from '@moduix/react/button';
@@ -79,7 +62,7 @@ import { Dialog } from '@moduix/react/dialog';
 
 export function Example() {
   return (
-    <Dialog.Root>
+    <Dialog>
       <Dialog.Trigger asChild>
         <Button>Open settings</Button>
       </Dialog.Trigger>
@@ -97,52 +80,39 @@ export function Example() {
           </Dialog.Footer>
         </Dialog.Content>
       </Dialog.Positioner>
-    </Dialog.Root>
+    </Dialog>
   );
 }
 ```
 
-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.
-
-## Theme the System
-
-Theme values are CSS custom properties. Change broad semantic decisions first and use component
-aliases for deliberate exceptions:
-
-```css
-:root {
-  --moduix-primary: oklch(0.52 0.18 145);
-  --moduix-radius: 0.75rem;
-  --moduix-size-md: 36px;
-  --moduix-size-sm: 32px;
-}
+Use the short root alias, such as `Dialog`, in application code. The matching `Dialog.Root` export is
+available when an explicit namespace improves a local abstraction, but it is not required.
 
-.compact-toolbar {
-  --moduix-button-size-md: 32px;
-}
-```
+## Customize deliberately
 
-The token hierarchy is:
+CSS Modules keep the package defaults locally scoped while leaving clear extension points for your
+application:
 
-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`.
+- use `className` on a root or named part for local CSS;
+- use stable moduix `data-slot` hooks and Ark state attributes for structural or state-specific
+  selectors;
+- override public CSS custom properties at the theme, semantic, or component layer.
 
-Library styles use predictable cascade layers:
+For example, set product-level theme primitives in your own stylesheet:
 
 ```css
-@layer moduix.reset, moduix.tokens, moduix.base, moduix.components;
+:root {
+  --moduix-primary: oklch(0.5 0.17 285);
+  --moduix-radius: 0.875rem;
+}
 ```
 
-Components also expose `className`, `data-slot`, and the Ark `data-scope`, `data-part`, and
-state attributes supported by their primitives.
+See [Tokens](https://moduix.dev/docs/tokens) and [Themes](https://moduix.dev/docs/themes) for the
+token hierarchy and component-specific variables.
 
-## Optional Presets
+## Optional presets
 
-Import one preset after `style.css` and activate it on the document root:
+Import one preset after `style.css` and enable it on the document root:
 
 ```tsx
 import '@moduix/react/style.css';
@@ -153,32 +123,25 @@ import '@moduix/react/presets/soft.css';
 <html data-moduix-theme="soft"></html>
 ```
 
-Available presets are `dense`, `soft`, and `contrast`. See
-[Themes](https://moduix.dev/docs/themes) before combining presets or creating a reusable custom
-theme.
+The available presets are `dense`, `soft`, and `contrast`.
 
-## Prefer to Own the Source?
+## Prefer to own the source?
 
-The moduix registry uses the shadcn distribution format while preserving the same Ark-aligned
-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:
+The hosted shadcn-compatible registry provides the same Ark-aligned component contracts in source
+form. Set up `components.json` with the [Quick start](https://moduix.dev/docs/quick-start), then add
+the components you need:
 
 ```bash
-npx shadcn@latest add @moduix-react/button @moduix-react/dialog
+pnpm dlx shadcn@latest add @moduix-react/button @moduix-react/dialog
 ```
 
-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.
+Generated files include the component source, CSS Modules, and required supporting files. Their
+destination paths are controlled by your `components.json` aliases.
 
-## Acknowledgements
+## Compatibility
 
-- [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.
+The package is ESM-only and ships modern JavaScript targeting ES2023. Consume it through a modern
+application bundler configured for the browsers your application supports.
 
 ## Links
 
@@ -187,6 +150,22 @@ dry runs, and generated stylesheet imports.
 - [Source repository](https://github.com/Blinks44/moduix)
 - [Issues](https://github.com/Blinks44/moduix/issues)
 
+## Acknowledgements
+
+moduix is possible because of the work and ideas of these projects:
+
+- [Ark UI](https://ark-ui.com/) for the accessible, state-machine-backed primitives that define the
+  behavioral foundation.
+- [Chakra UI](https://chakra-ui.com/) for Ark-aligned composition ergonomics and design-system
+  craft.
+- [shadcn/ui](https://ui.shadcn.com/) for open-code distribution, beautiful defaults, and a
+  documentation style centered on practical ownership.
+- [UnoCSS](https://unocss.dev/) and [Tailwind CSS](https://tailwindcss.com/) for the foundations
+  adapted by the optional reset.
+- [Rstack](https://rstack.rs/) for its Rust-based ecosystem: Rspress for documentation, Rslib for
+  library builds, and Rstest for tests.
+- [VoidZero](https://voidzero.dev/) for the JavaScript tooling used throughout the workspace.
+
 ## License
 
 [MIT](./LICENSE.md)

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,49 @@
+# Third-Party Notices
+
+moduix uses and includes portions of Lucide Icons.
+
+## Lucide
+
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/accordion/Accordion.js

@@ -5,13 +5,12 @@ import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 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)),
+        className: clsx(Accordion_module.root, className),
         ...props
     });
 });
@@ -19,7 +18,7 @@ const Accordion_AccordionRootProvider = /*#__PURE__*/ forwardRef(function({ clas
     return /*#__PURE__*/ jsx(Accordion.RootProvider, {
         ref: ref,
         "data-slot": "accordion-root-provider",
-        className: clsx(Accordion_module.root, normalizeClassName(className)),
+        className: clsx(Accordion_module.root, className),
         ...props
     });
 });
@@ -27,7 +26,7 @@ const Accordion_AccordionItem = /*#__PURE__*/ forwardRef(function({ className, .
     return /*#__PURE__*/ jsx(Accordion.Item, {
         ref: ref,
         "data-slot": "accordion-item",
-        className: clsx(Accordion_module.item, normalizeClassName(className)),
+        className: clsx(Accordion_module.item, className),
         ...props
     });
 });
@@ -35,7 +34,7 @@ const Accordion_AccordionItemTrigger = /*#__PURE__*/ forwardRef(function({ class
     return /*#__PURE__*/ jsx(Accordion.ItemTrigger, {
         ref: ref,
         "data-slot": "accordion-item-trigger",
-        className: clsx(Accordion_module.itemTrigger, normalizeClassName(className)),
+        className: clsx(Accordion_module.itemTrigger, className),
         ...props
     });
 });
@@ -43,7 +42,7 @@ const Accordion_AccordionItemIndicator = /*#__PURE__*/ forwardRef(function({ cla
     return /*#__PURE__*/ jsx(Accordion.ItemIndicator, {
         ref: ref,
         "data-slot": "accordion-item-indicator",
-        className: clsx(Accordion_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(Accordion_module.itemIndicator, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(PlusIcon, {})
     });
@@ -52,7 +51,7 @@ const Accordion_AccordionItemContent = /*#__PURE__*/ forwardRef(function({ class
     return /*#__PURE__*/ jsx(Accordion.ItemContent, {
         ref: ref,
         "data-slot": "accordion-item-content",
-        className: clsx(Accordion_module.itemContent, normalizeClassName(className)),
+        className: clsx(Accordion_module.itemContent, className),
         ...props
     });
 });
@@ -62,7 +61,7 @@ const Accordion_AccordionItemBody = /*#__PURE__*/ forwardRef(function({ classNam
         "data-scope": "accordion",
         "data-part": "item-body",
         "data-slot": "accordion-item-body",
-        className: clsx(Accordion_module.itemBody, normalizeClassName(className)),
+        className: clsx(Accordion_module.itemBody, className),
         ...props
     });
 });

package/dist/components/alert/Alert.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Alert_module from "./Alert.module.js";
 const Alert_AlertRoot = /*#__PURE__*/ forwardRef(function({ children, className, role, status = 'info', ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
@@ -12,7 +11,7 @@ const Alert_AlertRoot = /*#__PURE__*/ forwardRef(function({ children, className,
         "data-part": "root",
         "data-slot": "alert-root",
         "data-status": status,
-        className: clsx(Alert_module.root, normalizeClassName(className)),
+        className: clsx(Alert_module.root, className),
         ...props,
         children: children
     });
@@ -24,7 +23,7 @@ const Alert_AlertIndicator = /*#__PURE__*/ forwardRef(function({ className, ...p
         "data-part": "indicator",
         "data-slot": "alert-indicator",
         "aria-hidden": "true",
-        className: clsx(Alert_module.indicator, normalizeClassName(className)),
+        className: clsx(Alert_module.indicator, className),
         ...props
     });
 });
@@ -34,7 +33,7 @@ const Alert_AlertContent = /*#__PURE__*/ forwardRef(function({ className, ...pro
         "data-scope": "alert",
         "data-part": "content",
         "data-slot": "alert-content",
-        className: clsx(Alert_module.content, normalizeClassName(className)),
+        className: clsx(Alert_module.content, className),
         ...props
     });
 });
@@ -44,7 +43,7 @@ const Alert_AlertTitle = /*#__PURE__*/ forwardRef(function({ className, ...props
         "data-scope": "alert",
         "data-part": "title",
         "data-slot": "alert-title",
-        className: clsx(Alert_module.title, normalizeClassName(className)),
+        className: clsx(Alert_module.title, className),
         ...props
     });
 });
@@ -54,7 +53,7 @@ const Alert_AlertDescription = /*#__PURE__*/ forwardRef(function({ className, ..
         "data-scope": "alert",
         "data-part": "description",
         "data-slot": "alert-description",
-        className: clsx(Alert_module.description, normalizeClassName(className)),
+        className: clsx(Alert_module.description, className),
         ...props
     });
 });
@@ -64,7 +63,7 @@ const Alert_AlertActions = /*#__PURE__*/ forwardRef(function({ className, ...pro
         "data-scope": "alert",
         "data-part": "actions",
         "data-slot": "alert-actions",
-        className: clsx(Alert_module.actions, normalizeClassName(className)),
+        className: clsx(Alert_module.actions, className),
         ...props
     });
 });

package/dist/components/alert/Alert_module.css

@@ -2,8 +2,7 @@
   .root-QHB4Xj {
     box-sizing: border-box;
     align-items: start;
-    row-gap: var(--moduix-alert-content-gap, var(--moduix-spacing-1));
-    column-gap: var(--moduix-alert-gap, var(--moduix-spacing-3));
+    gap: var(--moduix-alert-gap, var(--moduix-spacing-3));
     border: var(--moduix-alert-border-width, var(--moduix-border-width-sm)) solid
       var(--moduix-alert-border-color, var(--_alert-border-color-default, var(--moduix-color-border)));
     border-radius: var(--moduix-alert-radius, var(--moduix-radius-lg));
@@ -17,12 +16,7 @@
     --_alert-border-color-default: var(--moduix-alert-info-border-color, var(--moduix-color-border));
     --_alert-color-default: var(--moduix-alert-info-color, var(--moduix-color-card-foreground));
     --_alert-indicator-color-default: var(--moduix-alert-info-indicator-color, var(--moduix-color-muted-foreground));
-    grid-template-columns: auto minmax(0, 1fr);
-    display: grid;
-  }
-
-  .root-QHB4Xj > [data-part="title"], .root-QHB4Xj > [data-part="description"] {
-    grid-column: 2;
+    display: flex;
   }
 
   .root-QHB4Xj[data-status="success"] {
@@ -46,14 +40,6 @@
     --_alert-indicator-color-default: var(--moduix-alert-error-indicator-color, var(--moduix-color-destructive));
   }
 
-  .root-QHB4Xj:not(:has( > [data-part="indicator"])) {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .root-QHB4Xj:not(:has( > [data-part="indicator"])) > [data-part="content"], .root-QHB4Xj:not(:has( > [data-part="indicator"])) > [data-part="title"], .root-QHB4Xj:not(:has( > [data-part="indicator"])) > [data-part="description"] {
-    grid-column: 1;
-  }
-
   .indicator-FFj13M {
     width: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
     height: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
@@ -73,6 +59,7 @@
 
   .content-wQ3ew3 {
     gap: var(--moduix-alert-content-gap, var(--moduix-spacing-1));
+    flex: 1;
     min-width: 0;
     display: grid;
   }

package/dist/components/angle-slider/AngleSlider.d.ts

@@ -6,19 +6,13 @@ type AngleSliderMarksProps = Omit<ComponentProps<typeof AngleSliderPrimitive.Mar
 declare function AngleSliderMarks({ values, ...props }: AngleSliderMarksProps): import("react").JSX.Element;
 type AngleSliderDialProps = Omit<ComponentProps<typeof AngleSliderPrimitive.Control>, 'asChild' | 'children'> & {
     children?: ReactNode;
-    thumbClassName?: string;
 };
-declare function AngleSliderDial({ children, thumbClassName, ...props }: AngleSliderDialProps): import("react").JSX.Element;
-declare const AngleSlider: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & {
-    form?: string;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    Root: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & {
-        form?: string;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    RootProvider: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement> & {
-        form?: string;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function AngleSliderDial({ children, ...props }: AngleSliderDialProps): import("react").JSX.Element;
+declare const AngleSlider: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Context: (props: AngleSliderPrimitive.ContextProps) => ReactNode;
+    HiddenInput: import("react").ForwardRefExoticComponent<AngleSliderPrimitive.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Dial: typeof AngleSliderDial;

package/dist/components/angle-slider/AngleSlider.js

@@ -1,80 +1,39 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AngleSlider, useAngleSlider, useAngleSliderContext } from "@ark-ui/react/angle-slider";
 import { clsx } from "clsx";
-import { Children, cloneElement, forwardRef, useEffect, useRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { forwardRef } from "react";
 import AngleSlider_module from "./AngleSlider.module.js";
-const AngleSlider_AngleSliderRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, defaultValue, form, value, ...props }, ref) {
+const AngleSlider_AngleSliderRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Root, {
         ref: ref,
         "data-slot": "angle-slider-root",
-        className: clsx(AngleSlider_module.root, normalizeClassName(className)),
-        asChild: asChild,
-        defaultValue: defaultValue,
-        value: value,
-        ...props,
-        children: withHiddenInput(children, asChild, form, void 0 === value ? defaultValue ?? 0 : void 0)
+        className: clsx(AngleSlider_module.root, className),
+        ...props
     });
 });
 const AngleSlider_AngleSliderLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Label, {
         ref: ref,
         "data-slot": "angle-slider-label",
-        className: clsx(AngleSlider_module.label, normalizeClassName(className)),
+        className: clsx(AngleSlider_module.label, className),
         ...props
     });
 });
-const AngleSlider_AngleSliderRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, form, value, ...props }, ref) {
-    const initialValue = useRef(value.value);
+const AngleSlider_AngleSliderRootProvider = /*#__PURE__*/ forwardRef(function({ className, value, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.RootProvider, {
         ref: ref,
         "data-slot": "angle-slider-root-provider",
-        className: clsx(AngleSlider_module.root, normalizeClassName(className)),
-        asChild: asChild,
+        className: clsx(AngleSlider_module.root, className),
         value: value,
-        ...props,
-        children: withHiddenInput(children, asChild, form, initialValue.current)
+        ...props
     });
 });
-function AngleSliderHiddenInput({ form, resetValue }) {
-    const angleSlider = useAngleSliderContext();
-    const inputRef = useRef(null);
-    useEffect(()=>{
-        const formElement = inputRef.current?.form;
-        if (!formElement || void 0 === resetValue) return;
-        const handleReset = ()=>angleSlider.setValue(resetValue);
-        formElement.addEventListener('reset', handleReset);
-        return ()=>formElement.removeEventListener('reset', handleReset);
-    }, [
-        angleSlider,
-        resetValue
-    ]);
-    return /*#__PURE__*/ jsx(AngleSlider.HiddenInput, {
-        ref: inputRef,
-        "data-slot": "angle-slider-hidden-input",
-        form: form
-    });
-}
-function withHiddenInput(children, asChild, form, resetValue) {
-    const hiddenInput = /*#__PURE__*/ jsx(AngleSliderHiddenInput, {
-        form: form,
-        resetValue: resetValue
-    });
-    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            children,
-            hiddenInput
-        ]
-    });
-    const child = Children.only(children);
-    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
-}
 const AngleSlider_AngleSliderControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Control, {
         ref: ref,
         "data-slot": "angle-slider-control",
-        className: clsx(AngleSlider_module.control, normalizeClassName(className)),
+        className: clsx(AngleSlider_module.control, className),
         ...props
     });
 });
@@ -82,7 +41,7 @@ const AngleSlider_AngleSliderThumb = /*#__PURE__*/ forwardRef(function({ classNa
     return /*#__PURE__*/ jsx(AngleSlider.Thumb, {
         ref: ref,
         "data-slot": "angle-slider-thumb",
-        className: clsx(AngleSlider_module.thumb, normalizeClassName(className)),
+        className: clsx(AngleSlider_module.thumb, className),
         ...props
     });
 });
@@ -90,7 +49,7 @@ const AngleSlider_AngleSliderMarkerGroup = /*#__PURE__*/ forwardRef(function({ c
     return /*#__PURE__*/ jsx(AngleSlider.MarkerGroup, {
         ref: ref,
         "data-slot": "angle-slider-marker-group",
-        className: clsx(AngleSlider_module.markerGroup, normalizeClassName(className)),
+        className: clsx(AngleSlider_module.markerGroup, className),
         ...props
     });
 });
@@ -98,7 +57,7 @@ const AngleSlider_AngleSliderMarker = /*#__PURE__*/ forwardRef(function({ classN
     return /*#__PURE__*/ jsx(AngleSlider.Marker, {
         ref: ref,
         "data-slot": "angle-slider-marker",
-        className: clsx(AngleSlider_module.marker, normalizeClassName(className)),
+        className: clsx(AngleSlider_module.marker, className),
         ...props
     });
 });
@@ -110,14 +69,12 @@ function AngleSliderMarks({ values, ...props }) {
             }, `${value}-${index}`))
     });
 }
-function AngleSliderDial({ children, thumbClassName, ...props }) {
+function AngleSliderDial({ children, ...props }) {
     return /*#__PURE__*/ jsxs(AngleSlider_AngleSliderControl, {
         ...props,
         children: [
             children,
-            /*#__PURE__*/ jsx(AngleSlider_AngleSliderThumb, {
-                className: thumbClassName
-            })
+            /*#__PURE__*/ jsx(AngleSlider_AngleSliderThumb, {})
         ]
     });
 }
@@ -125,7 +82,7 @@ const AngleSlider_AngleSliderValueText = /*#__PURE__*/ forwardRef(function({ cla
     return /*#__PURE__*/ jsx(AngleSlider.ValueText, {
         ref: ref,
         "data-slot": "angle-slider-value-text",
-        className: clsx(AngleSlider_module.valueText, normalizeClassName(className)),
+        className: clsx(AngleSlider_module.valueText, className),
         ...props
     });
 });
@@ -133,6 +90,7 @@ const AngleSlider_AngleSlider = Object.assign(AngleSlider_AngleSliderRoot, {
     Root: AngleSlider_AngleSliderRoot,
     RootProvider: AngleSlider_AngleSliderRootProvider,
     Context: AngleSlider.Context,
+    HiddenInput: AngleSlider.HiddenInput,
     Label: AngleSlider_AngleSliderLabel,
     Control: AngleSlider_AngleSliderControl,
     Dial: AngleSliderDial,