@moduix/react 1.1.1 → 2.1.0

package/dist/components/tree-view/TreeView.css

@@ -40,7 +40,7 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: var(--tree-view-item-min-height, 2rem);
+    min-height: var(--tree-view-item-min-height, var(--size-sm));
     align-items: center;
     gap: var(--tree-view-item-gap, var(--spacing-2));
     border: var(--tree-view-item-border-width, 0) solid
@@ -51,8 +51,9 @@
     color: var(--tree-view-item-color, var(--tree-view-color, var(--color-foreground)));
     cursor: pointer;
     font: inherit;
-    outline: var(--tree-view-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--tree-view-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     text-align: start;
     transition: background-color var(--tree-view-transition, var(--transition-default)),
       color var(--tree-view-transition, var(--transition-default)),
@@ -87,17 +88,17 @@
   }
 
   .-ZBX5W_branchTrigger, .-ZBX5W_branchIndicator, .-ZBX5W_itemIndicator {
-    width: var(--tree-view-indicator-size, 1rem);
-    height: var(--tree-view-indicator-size, 1rem);
-    flex: 0 0 var(--tree-view-indicator-size, 1rem);
+    width: var(--tree-view-indicator-size, var(--spacing-4));
+    height: var(--tree-view-indicator-size, var(--spacing-4));
+    flex: 0 0 var(--tree-view-indicator-size, var(--spacing-4));
     color: var(--tree-view-indicator-color, currentColor);
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     & svg {
-      width: var(--tree-view-indicator-icon-size, .875rem);
-      height: var(--tree-view-indicator-icon-size, .875rem);
+      width: var(--tree-view-indicator-icon-size, var(--spacing-3-5));
+      height: var(--tree-view-indicator-icon-size, var(--spacing-3-5));
     }
   }
 
@@ -120,9 +121,9 @@
     overflow: hidden;
 
     & svg {
-      width: var(--tree-view-node-icon-size, 1rem);
-      height: var(--tree-view-node-icon-size, 1rem);
-      flex: 0 0 var(--tree-view-node-icon-size, 1rem);
+      width: var(--tree-view-node-icon-size, var(--spacing-4));
+      height: var(--tree-view-node-icon-size, var(--spacing-4));
+      flex: 0 0 var(--tree-view-node-icon-size, var(--spacing-4));
     }
   }
 
@@ -150,21 +151,22 @@
     bottom: 0;
     position: absolute;
     inset-inline-start: calc(var(--tree-view-item-padding-x, var(--spacing-2)) +
-        (((var(--depth, 1) - 1) * var(--tree-view-indent, 1rem))) +
-        (var(--tree-view-indicator-size, 1rem) / 2));
+        ((var(--depth, 1) - 1) * var(--tree-view-indent, 1rem)) +
+        (var(--tree-view-indicator-size, var(--spacing-4)) / 2));
   }
 
   .-ZBX5W_nodeCheckbox {
     box-sizing: border-box;
-    width: var(--tree-view-checkbox-size, 1rem);
-    height: var(--tree-view-checkbox-size, 1rem);
-    flex: 0 0 var(--tree-view-checkbox-size, 1rem);
+    width: var(--tree-view-checkbox-size, var(--spacing-4));
+    height: var(--tree-view-checkbox-size, var(--spacing-4));
+    flex: 0 0 var(--tree-view-checkbox-size, var(--spacing-4));
     border: var(--tree-view-checkbox-border-width, var(--border-width-sm)) solid
       var(--tree-view-checkbox-border-color, var(--color-border));
     border-radius: var(--tree-view-checkbox-radius, var(--radius-xs));
     background-color: var(--tree-view-checkbox-bg, var(--color-background));
     color: var(--tree-view-checkbox-color, var(--color-primary-foreground));
-    outline: var(--tree-view-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline: var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
     outline-offset: var(--tree-view-checkbox-focus-ring-offset, var(--border-width-sm));
     transition: background-color var(--tree-view-transition, var(--transition-default)),
       border-color var(--tree-view-transition, var(--transition-default)),
@@ -188,8 +190,8 @@
     }
 
     & svg {
-      width: var(--tree-view-checkbox-icon-size, .75rem);
-      height: var(--tree-view-checkbox-icon-size, .75rem);
+      width: var(--tree-view-checkbox-icon-size, var(--spacing-3));
+      height: var(--tree-view-checkbox-icon-size, var(--spacing-3));
     }
   }
 
@@ -210,8 +212,9 @@
     background-color: var(--tree-view-rename-input-bg, var(--color-background));
     color: var(--tree-view-rename-input-color, var(--color-foreground));
     font: inherit;
-    outline: var(--tree-view-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--tree-view-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     flex: 1;
 
     &:focus-visible {

package/dist/components/tree-view/TreeView.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import { TreeView, createFileTreeCollection, createTreeCollection } from "@ark-ui/react/tree-view";
+import { TreeView, TreeViewLoadChildrenDetails, TreeViewNodeProviderProps, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewNodeContext } from "@ark-ui/react/tree-view";
 
 //#region src/components/tree-view/TreeView.d.ts
 declare function TreeViewNodeCheckboxIndicator({
@@ -29,4 +29,4 @@ declare const TreeView$1: TreeView.RootComponent & {
   NodeRenameInput: import("react").ForwardRefExoticComponent<Omit<TreeView.NodeRenameInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 };
 //#endregion
-export { TreeView$1 as TreeView, createFileTreeCollection, createTreeCollection };
+export { TreeView$1 as TreeView, type TreeViewLoadChildrenDetails, type TreeViewNodeProviderProps, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewNodeContext };

package/dist/components/tree-view/TreeView.js

@@ -1,10 +1,10 @@
-import { CheckIcon, ChevronRightIcon, IndeterminateIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, ChevronRightIcon, IndeterminateIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import TreeView_module_default from "./TreeView.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { TreeView, createFileTreeCollection, createTreeCollection } from "@ark-ui/react/tree-view";
+import { jsx } from "react/jsx-runtime";
+import { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewNodeContext } from "@ark-ui/react/tree-view";
 //#region src/components/tree-view/TreeView.tsx
 const TreeViewRoot = forwardRef(function TreeViewRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(TreeView.Root, {
@@ -168,4 +168,4 @@ const TreeView$1 = Object.assign(TreeViewRoot, {
 	NodeRenameInput: TreeViewNodeRenameInput
 });
 //#endregion
-export { TreeView$1 as TreeView, createFileTreeCollection, createTreeCollection };
+export { TreeView$1 as TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewNodeContext };

package/dist/components/tree-view/index.d.ts

@@ -1,2 +1,2 @@
-import { TreeView, createFileTreeCollection, createTreeCollection } from "./TreeView.js";
-export { TreeView, createFileTreeCollection, createTreeCollection };
+import { TreeView, TreeViewLoadChildrenDetails, TreeViewNodeProviderProps, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewNodeContext } from "./TreeView.js";
+export { TreeView, type TreeViewLoadChildrenDetails, type TreeViewNodeProviderProps, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewNodeContext };

package/dist/components/typeset/Typeset.css

@@ -0,0 +1,317 @@
+@layer ui.components {
+  ._3-ErqG_root {
+    box-sizing: border-box;
+    color: var(--color-foreground);
+    font-family: var(--typeset-font-body, inherit);
+    font-size: calc(var(--typeset-size, 1em) * 1.125);
+    line-height: var(--typeset-leading, 1.75);
+    overflow-wrap: break-word;
+  }
+
+  @media (width >= 48rem), print {
+    ._3-ErqG_root {
+      font-size: var(--typeset-size, 1em);
+    }
+  }
+
+  ._3-ErqG_root {
+    & :not(:where(.not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] *)) {
+      &:where(p) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+      }
+
+      &:where(h1, h2, h3, h4, h5, h6) {
+        color: var(--color-foreground);
+        font-family: var(--typeset-font-heading, var(--font-sans));
+        font-weight: var(--weight-semibold);
+        letter-spacing: -.02em;
+        margin-block-end: 0;
+      }
+
+      &:where(h1) {
+        margin-block-start: var(--typeset-flow, 1.25em);
+        font-size: 1.75em;
+        line-height: 1.3;
+      }
+
+      &:where(h2) {
+        margin-block-start: calc(var(--typeset-flow, 1.25em) * 1.4);
+        font-size: 1.25em;
+        line-height: 1.4;
+      }
+
+      &:where(h3) {
+        margin-block-start: var(--typeset-flow, 1.25em);
+        font-size: 1.125em;
+        line-height: 1.45;
+      }
+
+      &:where(h4) {
+        margin-block-start: var(--typeset-flow, 1.25em);
+        font-size: 1em;
+        line-height: 1.5;
+      }
+
+      &:where(h5) {
+        color: var(--color-muted-foreground);
+        font-size: .875em;
+        font-weight: var(--weight-medium);
+        margin-block-start: calc(var(--typeset-flow, 1.25em) / .875);
+        line-height: 1.5;
+      }
+
+      &:where(h6) {
+        color: var(--color-muted-foreground);
+        font-size: .8125em;
+        font-weight: var(--weight-medium);
+        letter-spacing: .08em;
+        text-transform: uppercase;
+        margin-block-start: calc(var(--typeset-flow, 1.25em) / .8125);
+        line-height: 1.5;
+      }
+
+      &:where([id]) {
+        scroll-margin-block-start: var(--typeset-flow, 1.25em);
+      }
+
+      &:where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+        margin-block-start: 1em;
+      }
+
+      &:where(a) {
+        color: var(--color-primary);
+        text-underline-offset: .15em;
+        text-decoration: underline .08em;
+      }
+
+      &:where(ul, ol) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+        padding-inline-start: 1.5em;
+      }
+
+      &:where(ul) {
+        list-style: outside;
+      }
+
+      &:where(ol) {
+        list-style: decimal;
+      }
+
+      &:where(ul ul) {
+        list-style: circle;
+      }
+
+      &:where(ul ul ul) {
+        list-style: square;
+      }
+
+      &:where(ol ol) {
+        list-style: lower-alpha;
+      }
+
+      &:where(ol ol ol) {
+        list-style: lower-roman;
+      }
+
+      &:where(li)::marker {
+        color: var(--color-muted-foreground);
+        font-weight: var(--weight-semibold);
+      }
+
+      &:where(li + li) {
+        margin-block-start: .25em;
+      }
+
+      &:where(li > ul, li > ol) {
+        margin-block-start: .5em;
+      }
+
+      &:where(ul.contains-task-list) {
+        padding-inline-start: .25em;
+        list-style: none;
+      }
+
+      &:where(li.task-list-item > input[type="checkbox"]) {
+        vertical-align: -.1em;
+        accent-color: var(--color-primary);
+        margin-inline-end: .5em;
+      }
+
+      &:where(blockquote) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+        border-inline-start: var(--border-width-md) solid var(--color-border);
+        color: var(--color-muted-foreground);
+        margin-inline: 0;
+        padding-inline-start: 1em;
+      }
+
+      &:where(:not(pre) > code) {
+        border-radius: var(--radius-sm);
+        background: var(--color-muted);
+        color: var(--color-foreground);
+        font-family: var(--typeset-font-mono, var(--font-mono));
+        padding: .1em .3em;
+        font-size: .875em;
+      }
+
+      &:where(pre) {
+        max-width: 100%;
+        margin-block: var(--typeset-flow, 1.25em) 0;
+        border: var(--border-width-sm) solid var(--color-border);
+        border-radius: var(--radius-md);
+        background: var(--color-muted);
+        color: var(--color-foreground);
+        font-family: var(--typeset-font-mono, var(--font-mono));
+        padding: 1em;
+        font-size: .875em;
+        line-height: 1.6;
+        overflow-x: auto;
+      }
+
+      &:where(pre > code) {
+        color: inherit;
+        font: inherit;
+        background: none;
+        border-radius: 0;
+        padding: 0;
+      }
+
+      &:where(hr) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+        border: 0;
+        border-block-start: var(--border-width-sm) solid var(--color-border);
+      }
+
+      &:where(table) {
+        width: 100%;
+        max-width: 100%;
+        margin-block: var(--typeset-flow, 1.25em) 0;
+        border-collapse: separate;
+        border-spacing: 0;
+        border-block-end: var(--border-width-sm) solid var(--color-border);
+        font-variant-numeric: tabular-nums;
+        font-size: 1em;
+        line-height: 1.5;
+      }
+
+      &:where(thead th) {
+        font-weight: var(--weight-medium);
+        text-align: start;
+        white-space: nowrap;
+        padding: .65em 1em;
+      }
+
+      &:where(:is(tbody, tfoot) :is(td, th)) {
+        border-block-start: var(--border-width-sm) solid var(--color-border);
+        text-align: start;
+        vertical-align: top;
+        padding: .75em 1em;
+      }
+
+      &:where(tbody th, tfoot th) {
+        font-weight: var(--weight-medium);
+      }
+
+      &:where(th:first-child, td:first-child) {
+        padding-inline-start: 0;
+      }
+
+      &:where(th[align="center"], td[align="center"]) {
+        text-align: center;
+      }
+
+      &:where(th[align="right"], td[align="right"]) {
+        text-align: end;
+      }
+
+      &:where(img, video) {
+        max-width: 100%;
+        height: auto;
+        margin-block: var(--typeset-flow, 1.25em) 0;
+        border-radius: var(--radius-md);
+        display: block;
+      }
+
+      &:where(p img) {
+        margin-block-start: 0;
+      }
+
+      &:where(figure) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+        margin-inline: 0;
+      }
+
+      &:where(figcaption, caption) {
+        color: var(--color-muted-foreground);
+        text-align: center;
+        margin-block-start: .75em;
+        font-size: .875em;
+      }
+
+      &:where(caption) {
+        caption-side: bottom;
+      }
+
+      &:where(details) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+      }
+
+      &:where(summary) {
+        cursor: pointer;
+        font-weight: var(--weight-medium);
+      }
+
+      &:where(summary)::marker {
+        color: var(--color-muted-foreground);
+      }
+
+      &:where(dl) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+      }
+
+      &:where(dt) {
+        font-weight: var(--weight-medium);
+        margin-block-start: 1em;
+      }
+
+      &:where(dt + dt) {
+        margin-block-start: .25em;
+      }
+
+      &:where(dd) {
+        color: var(--color-muted-foreground);
+        margin-block-start: .25em;
+        margin-inline-start: 0;
+        padding-inline-start: 1em;
+      }
+
+      &:where(.footnotes, [data-footnotes]) {
+        margin-block: calc(var(--typeset-flow, 1.25em) * 2) 0;
+        border-block-start: var(--border-width-sm) solid var(--color-border);
+        color: var(--color-muted-foreground);
+        padding-block-start: var(--typeset-flow, 1.25em);
+        font-size: .875em;
+      }
+    }
+  }
+
+  ._3-ErqG_root > :where(:first-child):not(:where(.not-typeset, [data-not-typeset])), ._3-ErqG_root :where(li > :first-child, blockquote > :first-child, td > :first-child, th > :first-child, dd > :first-child, figure > :first-child, figure > picture > img):not(:where(.not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] *)) {
+    margin-block-start: 0;
+  }
+
+  ._3-ErqG_scroll {
+    max-width: 100%;
+    overscroll-behavior-inline: contain;
+    margin-block-start: var(--typeset-flow, 1.25em);
+    overflow-x: auto;
+  }
+
+  ._3-ErqG_root > ._3-ErqG_scroll:first-child, ._3-ErqG_root ._3-ErqG_scroll > * {
+    margin-block-start: 0;
+  }
+
+  ._3-ErqG_root ._3-ErqG_scroll table {
+    width: max-content;
+    max-width: none;
+  }
+}

package/dist/components/typeset/Typeset.d.ts

@@ -0,0 +1,7 @@
+//#region src/components/typeset/Typeset.d.ts
+declare const Typeset: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Scroll: 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 { Typeset };

package/dist/components/typeset/Typeset.js

@@ -0,0 +1,33 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Typeset_module_default from "./Typeset.module.js";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/typeset/Typeset.tsx
+const TypesetRoot = forwardRef(function TypesetRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "typeset",
+		"data-part": "root",
+		"data-slot": "typeset",
+		className: clsx(Typeset_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const TypesetScroll = forwardRef(function TypesetScroll({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "typeset",
+		"data-part": "scroll",
+		"data-slot": "typeset-scroll",
+		className: clsx(Typeset_module_default.scroll, normalizeClassName(className)),
+		...props
+	});
+});
+const Typeset = Object.assign(TypesetRoot, {
+	Root: TypesetRoot,
+	Scroll: TypesetScroll
+});
+//#endregion
+export { Typeset };

package/dist/components/typeset/Typeset.module.js

@@ -0,0 +1,8 @@
+import './Typeset.css';
+//#region src/components/typeset/Typeset.module.css
+var Typeset_module_default = {
+	"root": "_3-ErqG_root",
+	"scroll": "_3-ErqG_scroll"
+};
+//#endregion
+export { Typeset_module_default as default };

package/dist/index.d.ts

@@ -1,63 +1,64 @@
-import { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon, ChevronUpIcon, CloseIcon, CopyIcon, EyeClosedIcon, EyeIcon, FileIcon, FlipHorizontalIcon, FolderIcon, FolderOpenIcon, GripIcon, IndeterminateIcon, MaximizeIcon, MinusIcon, PauseIcon, PencilIcon, PipetteIcon, PlayIcon, PlusIcon, PopupArrowIcon, RatingStarIcon, RestartIcon, RotateCcwIcon, RotateCwIcon, ScrubCursorIcon, SeparatorMarkIcon, TrashIcon, UploadIcon, ZoomInIcon, ZoomOutIcon } from "./lib/moduix/icons/ui/Icons.js";
 import { AspectRatio } from "./components/aspect-ratio/AspectRatio.js";
-import { Accordion } from "./components/accordion/Accordion.js";
-import { AngleSlider } from "./components/angle-slider/AngleSlider.js";
+import { Accordion, useAccordion } from "./components/accordion/Accordion.js";
+import { AngleSlider, useAngleSlider } from "./components/angle-slider/AngleSlider.js";
 import { Alert } from "./components/alert/Alert.js";
-import { Avatar } from "./components/avatar/Avatar.js";
+import { Avatar, useAvatar, useAvatarContext } from "./components/avatar/Avatar.js";
 import { Badge } from "./components/badge/Badge.js";
 import { Bleed } from "./components/bleed/Bleed.js";
 import { Breadcrumbs } from "./components/breadcrumbs/Breadcrumbs.js";
 import { Button } from "./components/button/Button.js";
 import { Card } from "./components/card/Card.js";
-import { Checkbox } from "./components/checkbox/Checkbox.js";
+import { Checkbox, useCheckbox, useCheckboxGroup } from "./components/checkbox/Checkbox.js";
 import { Clipboard } from "./components/clipboard/Clipboard.js";
 import { CloseButton } from "./components/close-button/CloseButton.js";
-import { Collapsible } from "./components/collapsible/Collapsible.js";
-import { ColorPicker, parseColor } from "./components/color-picker/ColorPicker.js";
-import { Combobox } from "./components/combobox/Combobox.js";
+import { Collapsible, useCollapsible } from "./components/collapsible/Collapsible.js";
+import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "./components/color-picker/ColorPicker.js";
+import { Combobox, useCombobox, useComboboxContext } from "./components/combobox/Combobox.js";
 import { Kbd } from "./components/kbd/Kbd.js";
 import { CommandPalette } from "./components/command-palette/CommandPalette.js";
 import { Container } from "./components/container/Container.js";
-import { DateInput } from "./components/date-input/DateInput.js";
-import { DatePicker, DatePickerRootProps, DatePickerRootProviderProps } from "./components/date-picker/DatePicker.js";
-import { Dialog, DialogRootProps, DialogRootProviderProps } from "./components/dialog/Dialog.js";
-import { Drawer } from "./components/drawer/Drawer.js";
-import { Editable } from "./components/editable/Editable.js";
+import { DateInput, DateInputDateValue, useDateInput, useDateInputContext } from "./components/date-input/DateInput.js";
+import { DatePicker, DatePickerDayTableProps, DatePickerFieldProps, DatePickerRangeFieldProps, DatePickerRootProps, DatePickerRootProviderProps, useDatePicker, useDatePickerContext } from "./components/date-picker/DatePicker.js";
+import { Dialog, DialogRootProps, DialogRootProviderProps, useDialog, useDialogContext } from "./components/dialog/Dialog.js";
+import { Drawer, useDrawer } from "./components/drawer/Drawer.js";
+import { Editable, useEditable, useEditableContext } from "./components/editable/Editable.js";
 import { Empty } from "./components/empty/Empty.js";
-import { Field } from "./components/field/Field.js";
-import { FileUpload } from "./components/file-upload/FileUpload.js";
-import { Fieldset } from "./components/fieldset/Fieldset.js";
+import { Field, useField, useFieldContext } from "./components/field/Field.js";
+import { FileUpload, useFileUpload, useFileUploadContext } from "./components/file-upload/FileUpload.js";
+import { Fieldset, useFieldset } from "./components/fieldset/Fieldset.js";
 import { FloatingPanel, resizeTriggerAxes } from "./components/floating-panel/FloatingPanel.js";
 import { Heading } from "./components/heading/Heading.js";
 import { Highlight } from "./components/highlight/Highlight.js";
-import { ImageCropper } from "./components/image-cropper/ImageCropper.js";
+import { Image } from "./components/image/Image.js";
+import { ImageCropper, useImageCropper } from "./components/image-cropper/ImageCropper.js";
 import { Input } from "./components/input/Input.js";
 import { InputGroup } from "./components/input-group/InputGroup.js";
-import { Lightbox, LightboxBind, LightboxBindProps, LightboxGallery, LightboxImage, LightboxImageSelectDetails } from "./components/lightbox/Lightbox.js";
+import { Lightbox, LightboxBind, LightboxBindProps, LightboxGallery, LightboxImage, LightboxImageSelectDetails, useLightbox as useDialog$1, useLightboxContext as useDialogContext$1 } from "./components/lightbox/Lightbox.js";
 import { List } from "./components/list/List.js";
-import { Listbox } from "./components/listbox/Listbox.js";
-import { Marquee } from "./components/marquee/Marquee.js";
-import { Menu } from "./components/menu/Menu.js";
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "./components/listbox/Listbox.js";
+import { Marquee, useMarquee } from "./components/marquee/Marquee.js";
+import { Menu, useMenu } from "./components/menu/Menu.js";
 import { NativeSelect } from "./components/native-select/NativeSelect.js";
-import { NumberInput } from "./components/number-input/NumberInput.js";
+import { NumberInput, useNumberInput, useNumberInputContext } from "./components/number-input/NumberInput.js";
 import { PinInput, usePinInput } from "./components/pin-input/PinInput.js";
 import { Pagination } from "./components/pagination/Pagination.js";
 import { PasswordInput, usePasswordInput } from "./components/password-input/PasswordInput.js";
 import { Popover, usePopover } from "./components/popover/Popover.js";
-import { HoverCard } from "./components/hover-card/HoverCard.js";
+import { HoverCard, useHoverCard, useHoverCardContext } from "./components/hover-card/HoverCard.js";
 import { ProgressCircular } from "./components/progress-circular/ProgressCircular.js";
 import { ProgressLinear } from "./components/progress-linear/ProgressLinear.js";
-import { QrCode } from "./components/qr-code/QrCode.js";
-import { RadioGroup, RadioGroupItemControlProps, RadioGroupItemControlSize } from "./components/radio-group/RadioGroup.js";
-import { RatingGroup, RatingGroupItemIndicatorProps, RatingGroupRootProps, RatingGroupRootProviderProps, RatingGroupSize } from "./components/rating-group/RatingGroup.js";
+import { QrCode, useQrCode } from "./components/qr-code/QrCode.js";
+import { RadioGroup, RadioGroupItemControlProps, RadioGroupItemControlSize, RadioGroupOptionProps, useRadioGroup } from "./components/radio-group/RadioGroup.js";
+import { RatingGroup, RatingGroupItemIndicatorProps, RatingGroupRootProps, RatingGroupRootProviderProps, RatingGroupSize, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "./components/rating-group/RatingGroup.js";
 import { ModuixScrollAreaRootProps, ModuixScrollAreaRootProviderProps, ScrollArea } from "./components/scroll-area/ScrollArea.js";
 import { Separator } from "./components/separator/Separator.js";
-import { SegmentGroup } from "./components/segment-group/SegmentGroup.js";
+import { SegmentGroup, useSegmentGroup } from "./components/segment-group/SegmentGroup.js";
 import { Select } from "./components/select/Select.js";
-import { SignaturePad, useSignaturePad } from "./components/signature-pad/SignaturePad.js";
+import { SignaturePad, useSignaturePad, useSignaturePadContext } from "./components/signature-pad/SignaturePad.js";
 import { SimpleGrid } from "./components/simple-grid/SimpleGrid.js";
-import { Slider } from "./components/slider/Slider.js";
-import { Splitter } from "./components/splitter/Splitter.js";
+import { Slider, useSlider, useSliderContext } from "./components/slider/Slider.js";
+import { Splitter, SplitterPanelData, createSplitterRegistry, useSplitter, useSplitterContext } from "./components/splitter/Splitter.js";
+import { Tooltip, useTooltip, useTooltipContext } from "./components/tooltip/Tooltip.js";
 import { Sidebar, useSidebar } from "./components/sidebar/Sidebar.js";
 import { Carousel } from "./components/carousel/Carousel.js";
 import { Skeleton } from "./components/skeleton/Skeleton.js";
@@ -65,19 +66,21 @@ import { Spinner } from "./components/spinner/Spinner.js";
 import { SplitButton } from "./components/split-button/SplitButton.js";
 import { Stack } from "./components/stack/Stack.js";
 import { Steps } from "./components/steps/Steps.js";
-import { Switch, SwitchRootProps, SwitchRootProviderProps, SwitchSize } from "./components/switch/Switch.js";
+import { Swap, useSwapContext } from "./components/swap/Swap.js";
+import { Switch, SwitchRootProps, SwitchRootProviderProps, SwitchSize, useSwitch, useSwitchContext } from "./components/switch/Switch.js";
 import { Tag } from "./components/tag/Tag.js";
-import { TagsInput } from "./components/tags-input/TagsInput.js";
+import { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext } from "./components/tags-input/TagsInput.js";
 import { Table } from "./components/table/Table.js";
-import { Tabs } from "./components/tabs/Tabs.js";
+import { Tabs, useTabs } from "./components/tabs/Tabs.js";
 import { Text } from "./components/text/Text.js";
 import { Textarea } from "./components/textarea/Textarea.js";
-import { Timer } from "./components/timer/Timer.js";
+import { Timer, useTimer, useTimerContext } from "./components/timer/Timer.js";
+import { Typeset } from "./components/typeset/Typeset.js";
 import { Toast, Toaster, createToaster } from "./components/toast/Toast.js";
-import { Tooltip } from "./components/tooltip/Tooltip.js";
 import { Tour, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "./components/tour/Tour.js";
-import { TreeView, createFileTreeCollection, createTreeCollection } from "./components/tree-view/TreeView.js";
-import { Toggle } from "./components/toggle/Toggle.js";
-import { ToggleGroup } from "./components/toggle-group/ToggleGroup.js";
+import { TreeView, TreeViewLoadChildrenDetails, TreeViewNodeProviderProps, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewNodeContext } from "./components/tree-view/TreeView.js";
+import { Toggle, useToggleContext } from "./components/toggle/Toggle.js";
+import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "./components/toggle-group/ToggleGroup.js";
 import { Portal } from "@ark-ui/react/portal";
-export { Accordion, Alert, AngleSlider, AspectRatio, Avatar, Badge, Bleed, Breadcrumbs, Button, CalendarIcon, Card, Carousel, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon, ChevronUpIcon, Clipboard, CloseButton, CloseIcon, Collapsible, ColorPicker, Combobox, CommandPalette, Container, CopyIcon, DateInput, DatePicker, type DatePickerRootProps, type DatePickerRootProviderProps, Dialog, type DialogRootProps, type DialogRootProviderProps, Drawer, Editable, Empty, EyeClosedIcon, EyeIcon, Field, Fieldset, FileIcon, FileUpload, FlipHorizontalIcon, FloatingPanel, FolderIcon, FolderOpenIcon, GripIcon, Heading, Highlight, HoverCard, ImageCropper, IndeterminateIcon, Input, InputGroup, Kbd, Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, List, Listbox, Marquee, MaximizeIcon, Menu, MinusIcon, type ModuixScrollAreaRootProps, type ModuixScrollAreaRootProviderProps, NativeSelect, NumberInput, Pagination, PasswordInput, PauseIcon, PencilIcon, PinInput, PipetteIcon, PlayIcon, PlusIcon, Popover, PopupArrowIcon, Portal, ProgressCircular, ProgressLinear, QrCode, RadioGroup, type RadioGroupItemControlProps, type RadioGroupItemControlSize, RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize, RatingStarIcon, RestartIcon, RotateCcwIcon, RotateCwIcon, ScrollArea, ScrubCursorIcon, SegmentGroup, Select, Separator, SeparatorMarkIcon, Sidebar, SignaturePad, SimpleGrid, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Steps, Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize, Table, Tabs, Tag, TagsInput, Text, Textarea, Timer, Toast, Toaster, Toggle, ToggleGroup, Tooltip, Tour, TrashIcon, TreeView, UploadIcon, ZoomInIcon, ZoomOutIcon, createFileTreeCollection, createToaster, createTreeCollection, parseColor, resizeTriggerAxes, usePasswordInput, usePinInput, usePopover, useSidebar, useSignaturePad, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise };
+import { LocaleProvider, useLocaleContext } from "@ark-ui/react/locale";
+export { Accordion, Alert, AngleSlider, AspectRatio, Avatar, Badge, Bleed, Breadcrumbs, Button, Card, Carousel, Checkbox, Clipboard, CloseButton, Collapsible, ColorPicker, Combobox, CommandPalette, Container, DateInput, type DateInputDateValue, DatePicker, type DatePickerDayTableProps, type DatePickerFieldProps, type DatePickerRangeFieldProps, type DatePickerRootProps, type DatePickerRootProviderProps, Dialog, type DialogRootProps, type DialogRootProviderProps, Drawer, Editable, Empty, Field, Fieldset, FileUpload, FloatingPanel, Heading, Highlight, HoverCard, Image, ImageCropper, Input, InputGroup, Kbd, Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, List, Listbox, LocaleProvider, Marquee, Menu, type ModuixScrollAreaRootProps, type ModuixScrollAreaRootProviderProps, NativeSelect, NumberInput, Pagination, PasswordInput, PinInput, Popover, Portal, ProgressCircular, ProgressLinear, QrCode, RadioGroup, type RadioGroupItemControlProps, type RadioGroupItemControlSize, type RadioGroupOptionProps, RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize, ScrollArea, SegmentGroup, Select, Separator, Sidebar, SignaturePad, SimpleGrid, Skeleton, Slider, Spinner, SplitButton, Splitter, type SplitterPanelData, Stack, Steps, Swap, Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize, Table, Tabs, Tag, TagsInput, Text, Textarea, Timer, Toast, Toaster, Toggle, ToggleGroup, Tooltip, Tour, TreeView, type TreeViewLoadChildrenDetails, type TreeViewNodeProviderProps, Typeset, createFileTreeCollection, createSplitterRegistry, createToaster, createTreeCollection, parseColor, resizeTriggerAxes, useAccordion, useAngleSlider, useAvatar, useAvatarContext, useCheckbox, useCheckboxGroup, useCollapsible, useColorPicker, useColorPickerContext, useCombobox, useComboboxContext, useDateInput, useDateInputContext, useDatePicker, useDatePickerContext, useDialog, useDialogContext, useDrawer, useEditable, useEditableContext, useField, useFieldContext, useFieldset, useFileUpload, useFileUploadContext, useHoverCard, useHoverCardContext, useImageCropper, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext, useListbox, useListboxContext, useListboxItemContext, useLocaleContext, useMarquee, useMenu, useNumberInput, useNumberInputContext, usePasswordInput, usePinInput, usePopover, useQrCode, useRadioGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroup, useSidebar, useSignaturePad, useSignaturePadContext, useSlider, useSliderContext, useSplitter, useSplitterContext, useSwapContext, useSwitch, useSwitchContext, useTabs, useTagsInput, useTagsInputContext, useTagsInputItemContext, useTimer, useTimerContext, useToggleContext, useToggleGroup, useToggleGroupContext, useTooltip, useTooltipContext, useTour, useTreeView, useTreeViewNodeContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise };