@moduix/react 1.1.1 → 2.1.0

package/dist/components/dialog/Dialog.css

@@ -1,8 +1,9 @@
 @layer ui.components {
   ._9AixhG_trigger, ._9AixhG_closeTrigger {
     box-sizing: border-box;
-    min-height: var(--dialog-control-height, var(--size-lg));
-    padding: var(--dialog-control-padding-y, .5rem) var(--dialog-control-padding-x, .875rem);
+    min-height: var(--dialog-control-height, var(--size-md));
+    padding: var(--dialog-control-padding-y, var(--spacing-1))
+      var(--dialog-control-padding-x, var(--spacing-3-5));
     border: var(--dialog-control-border-width, var(--border-width-sm)) solid
       var(--dialog-control-border-color, var(--color-border));
     border-radius: var(--dialog-control-radius, var(--radius-md));
@@ -115,11 +116,15 @@
     }
 
     &[data-state="open"] {
-      animation: _9AixhG_dialog-content-in var(--dialog-transition, var(--transition-default));
+      animation: _9AixhG_dialog-content-in
+        var(--dialog-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: _9AixhG_dialog-content-out var(--dialog-transition, var(--transition-default));
+      animation: _9AixhG_dialog-content-out
+        var(--dialog-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
   }
 
@@ -173,14 +178,14 @@
   }
 
   ._9AixhG_closeIcon {
-    --close-button-size: var(--dialog-close-icon-size, 1.75rem);
+    --close-button-size: var(--dialog-close-icon-size, var(--spacing-7));
     --close-button-radius: var(--dialog-close-icon-radius, var(--radius-md));
     --close-button-color: var(--dialog-close-icon-color, var(--dialog-muted-color, var(--color-muted-foreground)));
     --close-button-color-hover: var(--dialog-close-icon-color-hover, var(--dialog-close-icon-color, var(--dialog-color, var(--color-popover-foreground))));
     --close-button-bg: var(--dialog-close-icon-bg, transparent);
     --close-button-bg-hover: var(--dialog-close-icon-bg-hover, var(--color-accent));
     --close-button-focus-ring-color: var(--dialog-close-icon-focus-ring-color, var(--dialog-focus-ring-color, var(--color-ring)));
-    --close-button-icon-size: var(--dialog-close-icon-glyph-size, .75rem);
+    --close-button-icon-size: var(--dialog-close-icon-glyph-size, var(--spacing-3));
     z-index: 2;
     position: absolute;
     inset-block-start: var(--dialog-close-icon-inset-block-start, var(--spacing-4));
@@ -203,19 +208,19 @@
 
   @keyframes _9AixhG_dialog-content-in {
     from {
-      opacity: var(--dialog-content-starting-opacity, 0);
-      translate: var(--dialog-content-starting-translate-x, 0)
-        var(--dialog-content-starting-translate-y, 0);
-      scale: var(--dialog-content-starting-scale, var(--scale-popup));
+      opacity: var(--dialog-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--dialog-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--dialog-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      scale: var(--dialog-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
     }
   }
 
   @keyframes _9AixhG_dialog-content-out {
     to {
-      opacity: var(--dialog-content-ending-opacity, 0);
-      translate: var(--dialog-content-ending-translate-x, 0)
-        var(--dialog-content-ending-translate-y, 0);
-      scale: var(--dialog-content-ending-scale, var(--scale-popup));
+      opacity: var(--dialog-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--dialog-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--dialog-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      scale: var(--dialog-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
     }
   }
 }

package/dist/components/dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { Dialog } from "@ark-ui/react/dialog";
+import { Dialog, useDialog as useDialog$1, useDialogContext as useDialogContext$1 } from "@ark-ui/react/dialog";
 
 //#region src/components/dialog/Dialog.d.ts
 type DialogRootProps = ComponentProps<typeof Dialog.Root> & OverlayPortalProps;
@@ -43,4 +43,4 @@ declare const Dialog$1: typeof DialogRoot & {
   Footer: typeof DialogFooter;
 };
 //#endregion
-export { Dialog$1 as Dialog, type DialogRootProps, type DialogRootProviderProps };
+export { Dialog$1 as Dialog, type DialogRootProps, type DialogRootProviderProps, useDialog$1 as useDialog, useDialogContext$1 as useDialogContext };

package/dist/components/dialog/Dialog.js

@@ -2,10 +2,10 @@ import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Dialog_module_default from "./Dialog.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Dialog } from "@ark-ui/react/dialog";
+import { jsx } from "react/jsx-runtime";
+import { Dialog, useDialog as useDialog$1, useDialogContext as useDialogContext$1 } from "@ark-ui/react/dialog";
 //#region src/components/dialog/Dialog.tsx
 const DEFAULT_CLOSE_BUTTON_LABEL = "Close dialog";
 function DialogRoot({ portalled, portalRef, ...props }) {
@@ -130,4 +130,4 @@ const Dialog$1 = Object.assign(DialogRoot, {
 	Footer: DialogFooter
 });
 //#endregion
-export { Dialog$1 as Dialog };
+export { Dialog$1 as Dialog, useDialog$1 as useDialog, useDialogContext$1 as useDialogContext };

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

@@ -1,2 +1,2 @@
-import { Dialog, DialogRootProps, DialogRootProviderProps } from "./Dialog.js";
-export { Dialog, type DialogRootProps, type DialogRootProviderProps };
+import { Dialog, DialogRootProps, DialogRootProviderProps, useDialog, useDialogContext } from "./Dialog.js";
+export { Dialog, type DialogRootProps, type DialogRootProviderProps, useDialog, useDialogContext };

package/dist/components/drawer/Drawer.css

@@ -1,8 +1,9 @@
 @layer ui.components {
   ._uVP9W_trigger, ._uVP9W_closeTrigger {
     box-sizing: border-box;
-    min-height: var(--drawer-control-height, var(--size-lg));
-    padding: var(--drawer-control-padding-y, .5rem) var(--drawer-control-padding-x, .875rem);
+    min-height: var(--drawer-control-height, var(--size-md));
+    padding: var(--drawer-control-padding-y, var(--spacing-1))
+      var(--drawer-control-padding-x, var(--spacing-3-5));
     border: var(--drawer-control-border-width, var(--border-width-sm)) solid
       var(--drawer-control-border-color, var(--color-border));
     border-radius: var(--drawer-control-radius, var(--radius-md));
@@ -103,7 +104,7 @@
   }
 
   ._uVP9W_content {
-    --drawer-bleed: var(--drawer-bleed-size, 3rem);
+    --drawer-bleed: var(--drawer-bleed-size, var(--size-xl));
     box-sizing: border-box;
     width: min(var(--drawer-width, 100%), 100vw);
     height: var(--drawer-size, 100%);
@@ -340,14 +341,14 @@
   }
 
   ._uVP9W_closeIcon {
-    --close-button-size: var(--drawer-close-icon-size, 1.75rem);
+    --close-button-size: var(--drawer-close-icon-size, var(--spacing-7));
     --close-button-radius: var(--drawer-close-icon-radius, var(--radius-md));
     --close-button-color: var(--drawer-close-icon-color, var(--drawer-description-color, var(--color-muted-foreground)));
     --close-button-color-hover: var(--drawer-close-icon-color-hover, var(--drawer-color, var(--color-popover-foreground)));
     --close-button-bg: var(--drawer-close-icon-bg, transparent);
     --close-button-bg-hover: var(--drawer-close-icon-bg-hover, var(--color-accent));
     --close-button-focus-ring-color: var(--drawer-close-icon-focus-ring-color, var(--drawer-focus-ring-color, var(--color-ring)));
-    --close-button-icon-size: var(--drawer-close-icon-glyph-size, .75rem);
+    --close-button-icon-size: var(--drawer-close-icon-glyph-size, var(--spacing-3));
   }
 
   ._uVP9W_swipeArea {

package/dist/components/drawer/Drawer.d.ts

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { Drawer } from "@ark-ui/react/drawer";
+import { Drawer, useDrawer } from "@ark-ui/react/drawer";
 
 //#region src/components/drawer/Drawer.d.ts
 type DrawerRootProps = ComponentProps<typeof Drawer.Root> & OverlayPortalProps;
@@ -53,4 +53,4 @@ declare const Drawer$1: typeof DrawerRoot & {
   Footer: typeof DrawerFooter;
 };
 //#endregion
-export { Drawer$1 as Drawer };
+export { Drawer$1 as Drawer, useDrawer };

package/dist/components/drawer/Drawer.js

@@ -2,10 +2,10 @@ import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Drawer_module_default from "./Drawer.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Drawer } from "@ark-ui/react/drawer";
+import { jsx } from "react/jsx-runtime";
+import { Drawer, useDrawer } from "@ark-ui/react/drawer";
 //#region src/components/drawer/Drawer.tsx
 const DEFAULT_CLOSE_BUTTON_LABEL = "Close drawer";
 function DrawerRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
@@ -185,4 +185,4 @@ const Drawer$1 = Object.assign(DrawerRoot, {
 	Footer: DrawerFooter
 });
 //#endregion
-export { Drawer$1 as Drawer };
+export { Drawer$1 as Drawer, useDrawer };

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

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

package/dist/components/editable/Editable.css

@@ -31,15 +31,16 @@
   }
 
   ._4ZG42W_area {
-    --_editable-focus-ring-width: var(--editable-focus-ring-width, var(--editable-border-width, var(--border-width-sm)));
+    --_editable-focus-ring-width: var(--editable-focus-ring-width, var(--editable-border-width, var(--focus-ring-inset-width, var(--border-width-sm))));
     box-sizing: border-box;
     width: var(--editable-area-width, 100%);
     min-width: 0;
-    min-height: var(--editable-area-height, var(--size-lg));
+    min-height: var(--editable-area-height, var(--size-md));
     border: var(--editable-border-width, var(--border-width-sm)) var(--editable-border-style, solid)
       var(--editable-border-color, var(--color-border));
     border-radius: var(--editable-radius, var(--radius-md));
-    padding: var(--editable-padding-y, .5rem) var(--editable-padding-x, .875rem);
+    padding: var(--editable-padding-y, var(--spacing-1))
+      var(--editable-padding-x, var(--spacing-3-5));
     background-color: var(--editable-bg, var(--color-background));
     color: var(--editable-color, var(--color-foreground));
     outline: var(--_editable-focus-ring-width) solid transparent;
@@ -120,17 +121,18 @@
 
   ._4ZG42W_trigger {
     box-sizing: border-box;
-    width: var(--editable-trigger-size, var(--editable-area-height, var(--size-lg)));
-    min-width: var(--editable-trigger-size, var(--editable-area-height, var(--size-lg)));
-    height: var(--editable-trigger-size, var(--editable-area-height, var(--size-lg)));
+    width: var(--editable-trigger-size, var(--editable-area-height, var(--size-md)));
+    min-width: var(--editable-trigger-size, var(--editable-area-height, var(--size-md)));
+    height: var(--editable-trigger-size, var(--editable-area-height, var(--size-md)));
     border: var(--editable-trigger-border-width, var(--border-width-sm))
       var(--editable-trigger-border-style, solid)
       var(--editable-trigger-border-color, var(--color-border));
     border-radius: var(--editable-trigger-radius, var(--radius-sm));
     background-color: var(--editable-trigger-bg, var(--color-background));
     color: var(--editable-trigger-color, var(--color-foreground));
-    outline: var(--editable-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(0px - var(--editable-focus-ring-width, var(--border-width-sm)));
+    outline: var(--editable-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(0px - var(--editable-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))));
     cursor: pointer;
     transition: background-color var(--editable-transition, var(--transition-default)),
       border-color var(--editable-transition, var(--transition-default)),
@@ -163,8 +165,8 @@
     }
 
     & > svg {
-      width: var(--editable-trigger-icon-size, .875rem);
-      height: var(--editable-trigger-icon-size, .875rem);
+      width: var(--editable-trigger-icon-size, var(--spacing-3-5));
+      height: var(--editable-trigger-icon-size, var(--spacing-3-5));
       flex-shrink: 0;
     }
   }

package/dist/components/editable/Editable.d.ts

@@ -1,6 +1,11 @@
-import { Editable } from "@ark-ui/react/editable";
+import { ComponentProps } from "react";
+import { Editable, useEditable, useEditableContext } from "@ark-ui/react/editable";
 
 //#region src/components/editable/Editable.d.ts
+declare function EditableControls({
+  className,
+  ...props
+}: Omit<ComponentProps<typeof Editable.Control>, 'asChild' | 'children'>): import("react").JSX.Element;
 declare const Editable$1: import("react").ForwardRefExoticComponent<Omit<Editable.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<Editable.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<Editable.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -12,6 +17,8 @@ declare const Editable$1: import("react").ForwardRefExoticComponent<Omit<Editabl
   EditTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.EditTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   SubmitTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.SubmitTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   CancelTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.CancelTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Controls: typeof EditableControls;
+  Context: (props: Editable.ContextProps) => import("react").ReactNode;
 };
 //#endregion
-export { Editable$1 as Editable };
+export { Editable$1 as Editable, useEditable, useEditableContext };

package/dist/components/editable/Editable.js

@@ -1,10 +1,10 @@
-import { CheckIcon, CloseIcon, PencilIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, CloseIcon, PencilIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import Editable_module_default from "./Editable.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Editable } from "@ark-ui/react/editable";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Editable, useEditable, useEditableContext } from "@ark-ui/react/editable";
 //#region src/components/editable/Editable.tsx
 const EditableRoot = forwardRef(function EditableRoot({ activationMode = "dblclick", className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Editable.Root, {
@@ -90,6 +90,13 @@ const EditableCancelTrigger = forwardRef(function EditableCancelTrigger({ classN
 		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
 	});
 });
+function EditableControls({ className, ...props }) {
+	return /* @__PURE__ */ jsx(EditableControl, {
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(Editable.Context, { children: (editable) => editable.editing ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(EditableSubmitTrigger, {}), /* @__PURE__ */ jsx(EditableCancelTrigger, {})] }) : /* @__PURE__ */ jsx(EditableEditTrigger, {}) })
+	});
+}
 const Editable$1 = Object.assign(EditableRoot, {
 	Root: EditableRoot,
 	RootProvider: EditableRootProvider,
@@ -100,7 +107,9 @@ const Editable$1 = Object.assign(EditableRoot, {
 	Control: EditableControl,
 	EditTrigger: EditableEditTrigger,
 	SubmitTrigger: EditableSubmitTrigger,
-	CancelTrigger: EditableCancelTrigger
+	CancelTrigger: EditableCancelTrigger,
+	Controls: EditableControls,
+	Context: Editable.Context
 });
 //#endregion
-export { Editable$1 as Editable };
+export { Editable$1 as Editable, useEditable, useEditableContext };

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

@@ -1,2 +1,2 @@
-import { Editable } from "./Editable.js";
-export { Editable };
+import { Editable, useEditable, useEditableContext } from "./Editable.js";
+export { Editable, useEditable, useEditableContext };

package/dist/components/empty/Empty.css

@@ -27,8 +27,8 @@
     display: inline-flex;
 
     &:where(svg), & :where(svg) {
-      width: var(--empty-icon-size, 1.5rem);
-      height: var(--empty-icon-size, 1.5rem);
+      width: var(--empty-icon-size, var(--spacing-6));
+      height: var(--empty-icon-size, var(--spacing-6));
       pointer-events: none;
       flex-shrink: 0;
     }

package/dist/components/empty/Empty.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Empty_module_default from "./Empty.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/empty/Empty.tsx
 const EmptyRoot = forwardRef(function EmptyRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {

package/dist/components/field/Field.css

@@ -47,19 +47,21 @@
   .SVzJ0G_control {
     box-sizing: border-box;
     width: var(--field-control-width, 100%);
-    min-height: var(--field-control-height, var(--size-lg));
+    min-height: var(--field-control-height, var(--size-md));
     border: var(--field-control-border-width, var(--border-width-sm))
       var(--field-control-border-style, solid)
       var(--field-control-border-color, var(--color-border));
     border-radius: var(--field-control-radius, var(--radius-md));
-    padding: var(--field-control-padding-y, .5rem) var(--field-control-padding-x, .875rem);
+    padding: var(--field-control-padding-y, var(--spacing-1))
+      var(--field-control-padding-x, var(--spacing-3-5));
     background-color: var(--field-control-bg, var(--color-background));
     color: var(--field-control-color, var(--color-foreground));
     font: inherit;
     font-size: var(--field-control-font-size, var(--text-md));
     line-height: var(--field-control-line-height, var(--line-height-text-md));
-    outline: var(--field-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: var(--field-focus-ring-offset, -1px);
+    outline: var(--field-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: var(--field-focus-ring-offset, var(--focus-ring-inset-offset));
     transition: border-color var(--field-control-transition, var(--transition-default)),
       outline-color var(--field-control-transition, var(--transition-default)),
       opacity var(--field-control-transition, var(--transition-default));
@@ -92,10 +94,6 @@
     resize: vertical;
   }
 
-  .SVzJ0G_select {
-    appearance: none;
-  }
-
   .SVzJ0G_errorText {
     color: var(--field-error-color, var(--color-destructive));
     font-size: var(--field-error-font-size, var(--text-sm));

package/dist/components/field/Field.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import { Field } from "@ark-ui/react/field";
+import { Field, useField, useFieldContext } from "@ark-ui/react/field";
 
 //#region src/components/field/Field.d.ts
 type FieldItemProps = ComponentProps<'div'> & ComponentProps<typeof Field.Item>;
@@ -20,6 +20,7 @@ declare const Field$1: import("react").ForwardRefExoticComponent<Omit<Field.Root
   HelperText: import("react").ForwardRefExoticComponent<Omit<Field.HelperTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   ErrorText: import("react").ForwardRefExoticComponent<Omit<Field.ErrorTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   RequiredIndicator: import("react").ForwardRefExoticComponent<Omit<Field.RequiredIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Context: (props: Field.ContextProps) => import("react").ReactNode;
 };
 //#endregion
-export { Field$1 as Field };
+export { Field$1 as Field, useField, useFieldContext };

package/dist/components/field/Field.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Field_module_default from "./Field.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Field } from "@ark-ui/react/field";
+import { jsx } from "react/jsx-runtime";
+import { Field, useField, useFieldContext } from "@ark-ui/react/field";
 //#region src/components/field/Field.tsx
 const FieldRoot = forwardRef(function FieldRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Field.Root, {
@@ -60,7 +60,7 @@ const FieldSelect = forwardRef(function FieldSelect({ className, ...props }, ref
 	return /* @__PURE__ */ jsx(Field.Select, {
 		ref,
 		"data-slot": "field-select",
-		className: clsx(Field_module_default.control, Field_module_default.select, normalizeClassName(className)),
+		className: clsx(Field_module_default.control, normalizeClassName(className)),
 		...props
 	});
 });
@@ -98,7 +98,8 @@ const Field$1 = Object.assign(FieldRoot, {
 	Select: FieldSelect,
 	HelperText: FieldHelperText,
 	ErrorText: FieldErrorText,
-	RequiredIndicator: FieldRequiredIndicator
+	RequiredIndicator: FieldRequiredIndicator,
+	Context: Field.Context
 });
 //#endregion
-export { Field$1 as Field };
+export { Field$1 as Field, useField, useFieldContext };

package/dist/components/field/Field.module.js

@@ -8,7 +8,6 @@ var Field_module_default = {
 	"label": "SVzJ0G_label",
 	"requiredIndicator": "SVzJ0G_requiredIndicator",
 	"root": "SVzJ0G_root",
-	"select": "SVzJ0G_select",
 	"textarea": "SVzJ0G_textarea"
 };
 //#endregion

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

@@ -1,2 +1,2 @@
-import { Field } from "./Field.js";
-export { Field };
+import { Field, useField, useFieldContext } from "./Field.js";
+export { Field, useField, useFieldContext };

package/dist/components/fieldset/Fieldset.d.ts

@@ -1,4 +1,4 @@
-import { Fieldset } from "@ark-ui/react/fieldset";
+import { Fieldset, useFieldset } from "@ark-ui/react/fieldset";
 
 //#region src/components/fieldset/Fieldset.d.ts
 declare const Fieldset$1: import("react").ForwardRefExoticComponent<Omit<Fieldset.RootProps & import("react").RefAttributes<HTMLFieldSetElement>, "ref"> & import("react").RefAttributes<HTMLFieldSetElement>> & {
@@ -9,4 +9,4 @@ declare const Fieldset$1: import("react").ForwardRefExoticComponent<Omit<Fieldse
   ErrorText: import("react").ForwardRefExoticComponent<Omit<Fieldset.ErrorTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { Fieldset$1 as Fieldset };
+export { Fieldset$1 as Fieldset, useFieldset };

package/dist/components/fieldset/Fieldset.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Fieldset_module_default from "./Fieldset.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Fieldset } from "@ark-ui/react/fieldset";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset, useFieldset } from "@ark-ui/react/fieldset";
 //#region src/components/fieldset/Fieldset.tsx
 const FieldsetRoot = forwardRef(function FieldsetRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Fieldset.Root, {
@@ -53,4 +53,4 @@ const Fieldset$1 = Object.assign(FieldsetRoot, {
 	ErrorText: FieldsetErrorText
 });
 //#endregion
-export { Fieldset$1 as Fieldset };
+export { Fieldset$1 as Fieldset, useFieldset };

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

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