@moduix/react 1.1.0 → 2.0.0

package/README.md

@@ -58,8 +58,8 @@ 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`.
+`shadcn` can install selected moduix components from the hosted 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.
@@ -88,13 +88,15 @@ Create `components.json` in the project root when your app does not already have
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "registries": {}
+  "registries": {
+    "@moduix-react": "https://moduix.dev/r/react/{name}.json"
+  }
 }
 ```
 
 ```bash
-npx shadcn@latest add Blinks44/moduix/react-button
-npx shadcn@latest add Blinks44/moduix/react-accordion
+npx shadcn@latest add @moduix-react/button
+npx shadcn@latest add @moduix-react/accordion
 ```
 
 The registry install also pulls in the shared moduix foundation files those components need, such as
@@ -137,7 +139,7 @@ import '@moduix/react/style.css';
 Then import and compose the components you need:
 
 ```tsx
-import { Button, Dialog, Portal } from '@moduix/react';
+import { Button, Dialog } from '@moduix/react';
 
 export function Example() {
   return (
@@ -145,14 +147,12 @@ export function Example() {
       <Dialog.Trigger asChild>
         <Button>Open dialog</Button>
       </Dialog.Trigger>
-      <Portal>
-        <Dialog.Backdrop />
-        <Dialog.Positioner>
-          <Dialog.Content>
-            <Dialog.Title>Project settings</Dialog.Title>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content>
+          <Dialog.Title>Project settings</Dialog.Title>
+        </Dialog.Content>
+      </Dialog.Positioner>
     </Dialog.Root>
   );
 }
@@ -176,7 +176,7 @@ attributes for targeted styling. Theme values are regular CSS custom properties:
 Library CSS is organized with cascade layers:
 
 ```css
-@layer ui.reset, ui.tokens, ui.components;
+@layer ui.reset, ui.tokens, ui.base, ui.components;
 ```
 
 This keeps defaults predictable while still letting application styles override tokens,
@@ -190,7 +190,7 @@ QrCode, Select, Tabs, Toast, Tooltip, TreeView, and supporting layout and displa
 
 ## Documentation
 
-- Documentation: https://moduix.blinks44.workers.dev/
+- Documentation: https://moduix.dev/
 - npm package: https://www.npmjs.com/package/@moduix/react
 - React package README: `packages/react/README.md`
 - Docs app README: `apps/docs/README.md`

package/dist/components/accordion/Accordion.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  @keyframes YlosVa_accordion-item-content-open {
+  @keyframes tIMeYW_accordion-item-content-open {
     from {
       height: 0;
       opacity: var(--accordion-item-content-closed-opacity, .01);
@@ -11,7 +11,7 @@
     }
   }
 
-  @keyframes YlosVa_accordion-item-content-closed {
+  @keyframes tIMeYW_accordion-item-content-closed {
     from {
       height: var(--height);
       opacity: var(--accordion-item-content-open-opacity, 1);
@@ -23,7 +23,7 @@
     }
   }
 
-  @keyframes YlosVa_accordion-item-content-open-horizontal {
+  @keyframes tIMeYW_accordion-item-content-open-horizontal {
     from {
       width: 0;
       opacity: var(--accordion-item-content-closed-opacity, .01);
@@ -35,7 +35,7 @@
     }
   }
 
-  @keyframes YlosVa_accordion-item-content-closed-horizontal {
+  @keyframes tIMeYW_accordion-item-content-closed-horizontal {
     from {
       width: var(--width);
       opacity: var(--accordion-item-content-open-opacity, 1);
@@ -47,9 +47,9 @@
     }
   }
 
-  .YlosVa_root {
+  .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));
@@ -64,7 +64,7 @@
     }
   }
 
-  .YlosVa_item {
+  .tIMeYW_item {
     overflow-anchor: none;
 
     &[data-orientation="vertical"]:not(:last-child) {
@@ -82,7 +82,7 @@
     }
   }
 
-  .YlosVa_itemTrigger {
+  .tIMeYW_itemTrigger {
     box-sizing: border-box;
     justify-content: space-between;
     align-items: center;
@@ -132,7 +132,7 @@
     }
   }
 
-  .YlosVa_itemIndicator {
+  .tIMeYW_itemIndicator {
     box-sizing: border-box;
     width: var(--accordion-icon-size, .75rem);
     height: var(--accordion-icon-size, .75rem);
@@ -152,7 +152,7 @@
     }
   }
 
-  .YlosVa_itemContent {
+  .tIMeYW_itemContent {
     box-sizing: border-box;
     color: var(--accordion-item-content-color, var(--color-muted-foreground));
     font-size: var(--accordion-item-content-font-size, var(--text-md));
@@ -164,22 +164,22 @@
     }
 
     &[data-state="open"][data-orientation="vertical"] {
-      animation: YlosVa_accordion-item-content-open
+      animation: tIMeYW_accordion-item-content-open
         var(--accordion-item-content-transition, var(--transition-default));
     }
 
     &[data-state="closed"][data-orientation="vertical"] {
-      animation: YlosVa_accordion-item-content-closed
+      animation: tIMeYW_accordion-item-content-closed
         var(--accordion-item-content-transition, var(--transition-default));
     }
 
     &[data-state="open"][data-orientation="horizontal"] {
-      animation: YlosVa_accordion-item-content-open-horizontal
+      animation: tIMeYW_accordion-item-content-open-horizontal
         var(--accordion-item-content-transition, var(--transition-default));
     }
 
     &[data-state="closed"][data-orientation="horizontal"] {
-      animation: YlosVa_accordion-item-content-closed-horizontal
+      animation: tIMeYW_accordion-item-content-closed-horizontal
         var(--accordion-item-content-transition, var(--transition-default));
     }
 
@@ -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

@@ -1,15 +1,16 @@
 import './Accordion.css';
 //#region src/components/accordion/Accordion.module.css
 var Accordion_module_default = {
-	"accordion-item-content-closed": "YlosVa_accordion-item-content-closed",
-	"accordion-item-content-closed-horizontal": "YlosVa_accordion-item-content-closed-horizontal",
-	"accordion-item-content-open": "YlosVa_accordion-item-content-open",
-	"accordion-item-content-open-horizontal": "YlosVa_accordion-item-content-open-horizontal",
-	"item": "YlosVa_item",
-	"itemContent": "YlosVa_itemContent",
-	"itemIndicator": "YlosVa_itemIndicator",
-	"itemTrigger": "YlosVa_itemTrigger",
-	"root": "YlosVa_root"
+	"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"
 };
 //#endregion
 export { Accordion_module_default as default };

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

@@ -1,20 +1,25 @@
 @layer ui.components {
-  .EnZEzW_root {
+  .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,14 +55,16 @@
       --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;
       }
     }
   }
 
-  .EnZEzW_indicator {
+  .ZXk2dW_indicator {
     width: var(--alert-indicator-size, 1rem);
     height: var(--alert-indicator-size, 1rem);
     color: var(--alert-indicator-color, var(--alert-indicator-color-default, currentColor));
@@ -74,13 +81,13 @@
     }
   }
 
-  .EnZEzW_content {
+  .ZXk2dW_content {
     gap: var(--alert-content-gap, var(--spacing-1));
     min-width: 0;
     display: grid;
   }
 
-  .EnZEzW_title {
+  .ZXk2dW_title {
     min-width: 0;
     color: var(--alert-title-color, var(--alert-color, var(--alert-color-default)));
     font-size: var(--alert-title-font-size, var(--text-sm));
@@ -90,7 +97,7 @@
     margin: 0;
   }
 
-  .EnZEzW_description {
+  .ZXk2dW_description {
     min-width: 0;
     color: var(--alert-description-color, var(--color-muted-foreground));
     font-size: var(--alert-description-font-size, var(--text-sm));
@@ -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,11 +1,12 @@
 import './Alert.css';
 //#region src/components/alert/Alert.module.css
 var Alert_module_default = {
-	"content": "EnZEzW_content",
-	"description": "EnZEzW_description",
-	"indicator": "EnZEzW_indicator",
-	"root": "EnZEzW_root",
-	"title": "EnZEzW_title"
+	"actions": "ZXk2dW_actions",
+	"content": "ZXk2dW_content",
+	"description": "ZXk2dW_description",
+	"indicator": "ZXk2dW_indicator",
+	"root": "ZXk2dW_root",
+	"title": "ZXk2dW_title"
 };
 //#endregion
 export { Alert_module_default as default };

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .yUv4bW_root {
+  .vn7zXa_root {
     box-sizing: border-box;
     align-items: center;
     gap: var(--angle-slider-gap, .75rem);
@@ -13,7 +13,7 @@
     }
   }
 
-  .yUv4bW_label {
+  .vn7zXa_label {
     color: var(--angle-slider-label-color, var(--angle-slider-color, var(--color-foreground)));
     font-size: var(--angle-slider-label-font-size, var(--text-sm));
     font-weight: var(--angle-slider-label-font-weight, var(--weight-medium));
@@ -21,7 +21,7 @@
     text-align: center;
   }
 
-  .yUv4bW_control {
+  .vn7zXa_control {
     --_angle-slider-control-border-color: var(--angle-slider-control-border-color, var(--color-border));
     --_angle-slider-track-border-color: var(--angle-slider-track-border-color, var(--color-border));
     box-sizing: border-box;
@@ -62,7 +62,7 @@
       position: absolute;
     }
 
-    &:has(.yUv4bW_thumb:focus-visible) {
+    &:has(.vn7zXa_thumb:focus-visible) {
       box-shadow: inset 0 0 0 var(--angle-slider-track-border-width, var(--border-width-sm))
           var(--_angle-slider-track-border-color),
         0 0 0 var(--angle-slider-focus-ring-width, .1875rem)
@@ -80,7 +80,7 @@
     }
   }
 
-  .yUv4bW_thumb {
+  .vn7zXa_thumb {
     top: 0;
     bottom: 0;
     left: calc(50% - var(--angle-slider-thumb-line-width, .1875rem) / 2);
@@ -150,14 +150,14 @@
     }
   }
 
-  .yUv4bW_markerGroup {
+  .vn7zXa_markerGroup {
     z-index: 1;
     pointer-events: none;
     position: absolute;
     inset: 0;
   }
 
-  .yUv4bW_marker {
+  .vn7zXa_marker {
     position: absolute;
     inset: 0;
 
@@ -182,7 +182,7 @@
     }
   }
 
-  .yUv4bW_valueText {
+  .vn7zXa_valueText {
     color: var(--angle-slider-value-text-color, var(--angle-slider-color, var(--color-foreground)));
     font-size: var(--angle-slider-value-text-font-size, var(--text-sm));
     font-weight: var(--angle-slider-value-text-font-weight, var(--weight-medium));

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

@@ -1,16 +1,32 @@
+import { ComponentProps } from "react";
 import { AngleSlider } from "@ark-ui/react/angle-slider";
 
 //#region src/components/angle-slider/AngleSlider.d.ts
+declare function AngleSliderMarks({
+  values,
+  ...props
+}: ComponentProps<typeof AngleSlider.MarkerGroup> & {
+  values: readonly number[];
+}): import("react").JSX.Element;
+declare function AngleSliderDial({
+  children,
+  thumbClassName,
+  ...props
+}: ComponentProps<typeof AngleSlider.Control> & {
+  thumbClassName?: string;
+}): import("react").JSX.Element;
 declare const AngleSlider$1: import("react").ForwardRefExoticComponent<Omit<AngleSlider.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<AngleSlider.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<AngleSlider.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Label: import("react").ForwardRefExoticComponent<Omit<AngleSlider.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<AngleSlider.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Dial: typeof AngleSliderDial;
   Thumb: import("react").ForwardRefExoticComponent<Omit<AngleSlider.ThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   MarkerGroup: import("react").ForwardRefExoticComponent<Omit<AngleSlider.MarkerGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Marker: import("react").ForwardRefExoticComponent<Omit<AngleSlider.MarkerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Marks: typeof AngleSliderMarks;
   ValueText: import("react").ForwardRefExoticComponent<Omit<AngleSlider.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<AngleSlider.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 };
+declare const useAngleSlider$1: (props?: import("@ark-ui/react/angle-slider").UseAngleSliderProps) => import("@ark-ui/react/angle-slider").UseAngleSliderReturn;
 //#endregion
-export { AngleSlider$1 as AngleSlider };
+export { AngleSlider$1 as AngleSlider, useAngleSlider$1 as useAngleSlider };