@ark-ui/react 5.34.1 → 5.35.0

package/dist/components/clipboard/clipboard-root.cjs

@@ -20,6 +20,7 @@ const ClipboardRoot = react.forwardRef((props, ref) => {
     "onStatusChange",
     "onValueChange",
     "timeout",
+    "translations",
     "value"
   ]);
   const clipboard = useClipboard.useClipboard(useClipboardProps);

package/dist/components/clipboard/clipboard-root.js

@@ -16,6 +16,7 @@ const ClipboardRoot = forwardRef((props, ref) => {
     "onStatusChange",
     "onValueChange",
     "timeout",
+    "translations",
     "value"
   ]);
   const clipboard = useClipboard(useClipboardProps);

package/dist/components/drawer/drawer-description.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useDrawerContext = require('./use-drawer-context.cjs');
+
+const DrawerDescription = react.forwardRef((props, ref) => {
+  const drawer = useDrawerContext.useDrawerContext();
+  const mergedProps = react$1.mergeProps(drawer.getDescriptionProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+DrawerDescription.displayName = "DrawerDescription";
+
+exports.DrawerDescription = DrawerDescription;

package/dist/components/drawer/drawer-description.d.cts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface DrawerDescriptionBaseProps extends PolymorphicProps {
+}
+export interface DrawerDescriptionProps extends HTMLProps<'div'>, DrawerDescriptionBaseProps {
+}
+export declare const DrawerDescription: ForwardRefExoticComponent<DrawerDescriptionProps & RefAttributes<HTMLDivElement>>;

package/dist/components/drawer/drawer-description.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface DrawerDescriptionBaseProps extends PolymorphicProps {
+}
+export interface DrawerDescriptionProps extends HTMLProps<'div'>, DrawerDescriptionBaseProps {
+}
+export declare const DrawerDescription: ForwardRefExoticComponent<DrawerDescriptionProps & RefAttributes<HTMLDivElement>>;

package/dist/components/drawer/drawer-description.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useDrawerContext } from './use-drawer-context.js';
+
+const DrawerDescription = forwardRef((props, ref) => {
+  const drawer = useDrawerContext();
+  const mergedProps = mergeProps(drawer.getDescriptionProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+DrawerDescription.displayName = "DrawerDescription";
+
+export { DrawerDescription };

package/dist/components/drawer/drawer-swipe-area.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useDrawerContext = require('./use-drawer-context.cjs');
+
+const DrawerSwipeArea = react.forwardRef((props, ref) => {
+  const drawer = useDrawerContext.useDrawerContext();
+  const mergedProps = react$1.mergeProps(drawer.getSwipeAreaProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+DrawerSwipeArea.displayName = "DrawerSwipeArea";
+
+exports.DrawerSwipeArea = DrawerSwipeArea;

package/dist/components/drawer/drawer-swipe-area.d.cts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface DrawerSwipeAreaBaseProps extends PolymorphicProps {
+}
+export interface DrawerSwipeAreaProps extends HTMLProps<'div'>, DrawerSwipeAreaBaseProps {
+}
+export declare const DrawerSwipeArea: ForwardRefExoticComponent<DrawerSwipeAreaProps & RefAttributes<HTMLDivElement>>;

package/dist/components/drawer/drawer-swipe-area.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface DrawerSwipeAreaBaseProps extends PolymorphicProps {
+}
+export interface DrawerSwipeAreaProps extends HTMLProps<'div'>, DrawerSwipeAreaBaseProps {
+}
+export declare const DrawerSwipeArea: ForwardRefExoticComponent<DrawerSwipeAreaProps & RefAttributes<HTMLDivElement>>;

package/dist/components/drawer/drawer-swipe-area.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useDrawerContext } from './use-drawer-context.js';
+
+const DrawerSwipeArea = forwardRef((props, ref) => {
+  const drawer = useDrawerContext();
+  const mergedProps = mergeProps(drawer.getSwipeAreaProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+DrawerSwipeArea.displayName = "DrawerSwipeArea";
+
+export { DrawerSwipeArea };

package/dist/components/drawer/drawer.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const drawerBackdrop = require('./drawer-backdrop.cjs');
 const drawerCloseTrigger = require('./drawer-close-trigger.cjs');
 const drawerContent = require('./drawer-content.cjs');
+const drawerDescription = require('./drawer-description.cjs');
 const drawerContext = require('./drawer-context.cjs');
 const drawerIndent = require('./drawer-indent.cjs');
 const drawerIndentBackground = require('./drawer-indent-background.cjs');
@@ -14,6 +15,7 @@ const drawerGrabberIndicator = require('./drawer-grabber-indicator.cjs');
 const drawerRoot = require('./drawer-root.cjs');
 const drawerRootProvider = require('./drawer-root-provider.cjs');
 const drawerStack = require('./drawer-stack.cjs');
+const drawerSwipeArea = require('./drawer-swipe-area.cjs');
 const drawerTitle = require('./drawer-title.cjs');
 const drawerTrigger = require('./drawer-trigger.cjs');
 
@@ -22,6 +24,7 @@ const drawerTrigger = require('./drawer-trigger.cjs');
 exports.Backdrop = drawerBackdrop.DrawerBackdrop;
 exports.CloseTrigger = drawerCloseTrigger.DrawerCloseTrigger;
 exports.Content = drawerContent.DrawerContent;
+exports.Description = drawerDescription.DrawerDescription;
 exports.Context = drawerContext.DrawerContext;
 exports.Indent = drawerIndent.DrawerIndent;
 exports.IndentBackground = drawerIndentBackground.DrawerIndentBackground;
@@ -31,5 +34,6 @@ exports.GrabberIndicator = drawerGrabberIndicator.DrawerGrabberIndicator;
 exports.Root = drawerRoot.DrawerRoot;
 exports.RootProvider = drawerRootProvider.DrawerRootProvider;
 exports.Stack = drawerStack.DrawerStack;
+exports.SwipeArea = drawerSwipeArea.DrawerSwipeArea;
 exports.Title = drawerTitle.DrawerTitle;
 exports.Trigger = drawerTrigger.DrawerTrigger;

package/dist/components/drawer/drawer.d.cts

@@ -2,6 +2,7 @@ export type { OpenChangeDetails, SnapPointChangeDetails } from '@zag-js/drawer';
 export { DrawerBackdrop as Backdrop, type DrawerBackdropBaseProps as BackdropBaseProps, type DrawerBackdropProps as BackdropProps, } from './drawer-backdrop';
 export { DrawerCloseTrigger as CloseTrigger, type DrawerCloseTriggerBaseProps as CloseTriggerBaseProps, type DrawerCloseTriggerProps as CloseTriggerProps, } from './drawer-close-trigger';
 export { DrawerContent as Content, type DrawerContentBaseProps as ContentBaseProps, type DrawerContentProps as ContentProps, } from './drawer-content';
+export { DrawerDescription as Description, type DrawerDescriptionBaseProps as DescriptionBaseProps, type DrawerDescriptionProps as DescriptionProps, } from './drawer-description';
 export { DrawerContext as Context, type DrawerContextProps as ContextProps } from './drawer-context';
 export { DrawerIndent as Indent, type DrawerIndentBaseProps as IndentBaseProps, type DrawerIndentProps as IndentProps, } from './drawer-indent';
 export { DrawerIndentBackground as IndentBackground, type DrawerIndentBackgroundBaseProps as IndentBackgroundBaseProps, type DrawerIndentBackgroundProps as IndentBackgroundProps, } from './drawer-indent-background';
@@ -11,5 +12,6 @@ export { DrawerGrabberIndicator as GrabberIndicator, type DrawerGrabberIndicator
 export { DrawerRoot as Root, type DrawerRootBaseProps as RootBaseProps, type DrawerRootProps as RootProps, } from './drawer-root';
 export { DrawerRootProvider as RootProvider, type DrawerRootProviderBaseProps as RootProviderBaseProps, type DrawerRootProviderProps as RootProviderProps, } from './drawer-root-provider';
 export { DrawerStack as Stack, type DrawerStackProps as StackProps } from './drawer-stack';
+export { DrawerSwipeArea as SwipeArea, type DrawerSwipeAreaBaseProps as SwipeAreaBaseProps, type DrawerSwipeAreaProps as SwipeAreaProps, } from './drawer-swipe-area';
 export { DrawerTitle as Title, type DrawerTitleBaseProps as TitleBaseProps, type DrawerTitleProps as TitleProps, } from './drawer-title';
 export { DrawerTrigger as Trigger, type DrawerTriggerBaseProps as TriggerBaseProps, type DrawerTriggerProps as TriggerProps, } from './drawer-trigger';

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

@@ -2,6 +2,7 @@ export type { OpenChangeDetails, SnapPointChangeDetails } from '@zag-js/drawer';
 export { DrawerBackdrop as Backdrop, type DrawerBackdropBaseProps as BackdropBaseProps, type DrawerBackdropProps as BackdropProps, } from './drawer-backdrop';
 export { DrawerCloseTrigger as CloseTrigger, type DrawerCloseTriggerBaseProps as CloseTriggerBaseProps, type DrawerCloseTriggerProps as CloseTriggerProps, } from './drawer-close-trigger';
 export { DrawerContent as Content, type DrawerContentBaseProps as ContentBaseProps, type DrawerContentProps as ContentProps, } from './drawer-content';
+export { DrawerDescription as Description, type DrawerDescriptionBaseProps as DescriptionBaseProps, type DrawerDescriptionProps as DescriptionProps, } from './drawer-description';
 export { DrawerContext as Context, type DrawerContextProps as ContextProps } from './drawer-context';
 export { DrawerIndent as Indent, type DrawerIndentBaseProps as IndentBaseProps, type DrawerIndentProps as IndentProps, } from './drawer-indent';
 export { DrawerIndentBackground as IndentBackground, type DrawerIndentBackgroundBaseProps as IndentBackgroundBaseProps, type DrawerIndentBackgroundProps as IndentBackgroundProps, } from './drawer-indent-background';
@@ -11,5 +12,6 @@ export { DrawerGrabberIndicator as GrabberIndicator, type DrawerGrabberIndicator
 export { DrawerRoot as Root, type DrawerRootBaseProps as RootBaseProps, type DrawerRootProps as RootProps, } from './drawer-root';
 export { DrawerRootProvider as RootProvider, type DrawerRootProviderBaseProps as RootProviderBaseProps, type DrawerRootProviderProps as RootProviderProps, } from './drawer-root-provider';
 export { DrawerStack as Stack, type DrawerStackProps as StackProps } from './drawer-stack';
+export { DrawerSwipeArea as SwipeArea, type DrawerSwipeAreaBaseProps as SwipeAreaBaseProps, type DrawerSwipeAreaProps as SwipeAreaProps, } from './drawer-swipe-area';
 export { DrawerTitle as Title, type DrawerTitleBaseProps as TitleBaseProps, type DrawerTitleProps as TitleProps, } from './drawer-title';
 export { DrawerTrigger as Trigger, type DrawerTriggerBaseProps as TriggerBaseProps, type DrawerTriggerProps as TriggerProps, } from './drawer-trigger';

package/dist/components/drawer/drawer.js

@@ -1,6 +1,7 @@
 export { DrawerBackdrop as Backdrop } from './drawer-backdrop.js';
 export { DrawerCloseTrigger as CloseTrigger } from './drawer-close-trigger.js';
 export { DrawerContent as Content } from './drawer-content.js';
+export { DrawerDescription as Description } from './drawer-description.js';
 export { DrawerContext as Context } from './drawer-context.js';
 export { DrawerIndent as Indent } from './drawer-indent.js';
 export { DrawerIndentBackground as IndentBackground } from './drawer-indent-background.js';
@@ -10,5 +11,6 @@ export { DrawerGrabberIndicator as GrabberIndicator } from './drawer-grabber-ind
 export { DrawerRoot as Root } from './drawer-root.js';
 export { DrawerRootProvider as RootProvider } from './drawer-root-provider.js';
 export { DrawerStack as Stack } from './drawer-stack.js';
+export { DrawerSwipeArea as SwipeArea } from './drawer-swipe-area.js';
 export { DrawerTitle as Title } from './drawer-title.js';
 export { DrawerTrigger as Trigger } from './drawer-trigger.js';

package/dist/components/drawer/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const drawerBackdrop = require('./drawer-backdrop.cjs');
 const drawerCloseTrigger = require('./drawer-close-trigger.cjs');
 const drawerContent = require('./drawer-content.cjs');
+const drawerDescription = require('./drawer-description.cjs');
 const drawerContext = require('./drawer-context.cjs');
 const drawerPositioner = require('./drawer-positioner.cjs');
 const drawerGrabber = require('./drawer-grabber.cjs');
@@ -16,6 +17,7 @@ const drawerTrigger = require('./drawer-trigger.cjs');
 const drawerIndent = require('./drawer-indent.cjs');
 const drawerIndentBackground = require('./drawer-indent-background.cjs');
 const drawerStack = require('./drawer-stack.cjs');
+const drawerSwipeArea = require('./drawer-swipe-area.cjs');
 const useDrawer = require('./use-drawer.cjs');
 const useDrawerContext = require('./use-drawer-context.cjs');
 const useDrawerStackContext = require('./use-drawer-stack-context.cjs');
@@ -27,6 +29,7 @@ const drawer$1 = require('@zag-js/drawer');
 exports.DrawerBackdrop = drawerBackdrop.DrawerBackdrop;
 exports.DrawerCloseTrigger = drawerCloseTrigger.DrawerCloseTrigger;
 exports.DrawerContent = drawerContent.DrawerContent;
+exports.DrawerDescription = drawerDescription.DrawerDescription;
 exports.DrawerContext = drawerContext.DrawerContext;
 exports.DrawerPositioner = drawerPositioner.DrawerPositioner;
 exports.DrawerGrabber = drawerGrabber.DrawerGrabber;
@@ -38,6 +41,7 @@ exports.DrawerTrigger = drawerTrigger.DrawerTrigger;
 exports.DrawerIndent = drawerIndent.DrawerIndent;
 exports.DrawerIndentBackground = drawerIndentBackground.DrawerIndentBackground;
 exports.DrawerStack = drawerStack.DrawerStack;
+exports.DrawerSwipeArea = drawerSwipeArea.DrawerSwipeArea;
 exports.useDrawer = useDrawer.useDrawer;
 exports.useDrawerContext = useDrawerContext.useDrawerContext;
 exports.useDrawerStackContext = useDrawerStackContext.useDrawerStackContext;

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

@@ -2,6 +2,7 @@ export type { OpenChangeDetails as DrawerOpenChangeDetails, SnapPointChangeDetai
 export { DrawerBackdrop, type DrawerBackdropBaseProps, type DrawerBackdropProps } from './drawer-backdrop';
 export { DrawerCloseTrigger, type DrawerCloseTriggerBaseProps, type DrawerCloseTriggerProps, } from './drawer-close-trigger';
 export { DrawerContent, type DrawerContentBaseProps, type DrawerContentProps } from './drawer-content';
+export { DrawerDescription, type DrawerDescriptionBaseProps, type DrawerDescriptionProps } from './drawer-description';
 export { DrawerContext, type DrawerContextProps } from './drawer-context';
 export { DrawerPositioner, type DrawerPositionerBaseProps, type DrawerPositionerProps } from './drawer-positioner';
 export { DrawerGrabber, type DrawerGrabberBaseProps, type DrawerGrabberProps } from './drawer-grabber';
@@ -13,6 +14,7 @@ export { DrawerTrigger, type DrawerTriggerBaseProps, type DrawerTriggerProps } f
 export { DrawerIndent, type DrawerIndentBaseProps, type DrawerIndentProps } from './drawer-indent';
 export { DrawerIndentBackground, type DrawerIndentBackgroundBaseProps, type DrawerIndentBackgroundProps, } from './drawer-indent-background';
 export { DrawerStack, type DrawerStackProps } from './drawer-stack';
+export { DrawerSwipeArea, type DrawerSwipeAreaBaseProps, type DrawerSwipeAreaProps } from './drawer-swipe-area';
 export { drawerAnatomy } from './drawer.anatomy';
 export { useDrawer, type UseDrawerProps, type UseDrawerReturn } from './use-drawer';
 export { useDrawerContext, type UseDrawerContext } from './use-drawer-context';

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

@@ -2,6 +2,7 @@ export type { OpenChangeDetails as DrawerOpenChangeDetails, SnapPointChangeDetai
 export { DrawerBackdrop, type DrawerBackdropBaseProps, type DrawerBackdropProps } from './drawer-backdrop';
 export { DrawerCloseTrigger, type DrawerCloseTriggerBaseProps, type DrawerCloseTriggerProps, } from './drawer-close-trigger';
 export { DrawerContent, type DrawerContentBaseProps, type DrawerContentProps } from './drawer-content';
+export { DrawerDescription, type DrawerDescriptionBaseProps, type DrawerDescriptionProps } from './drawer-description';
 export { DrawerContext, type DrawerContextProps } from './drawer-context';
 export { DrawerPositioner, type DrawerPositionerBaseProps, type DrawerPositionerProps } from './drawer-positioner';
 export { DrawerGrabber, type DrawerGrabberBaseProps, type DrawerGrabberProps } from './drawer-grabber';
@@ -13,6 +14,7 @@ export { DrawerTrigger, type DrawerTriggerBaseProps, type DrawerTriggerProps } f
 export { DrawerIndent, type DrawerIndentBaseProps, type DrawerIndentProps } from './drawer-indent';
 export { DrawerIndentBackground, type DrawerIndentBackgroundBaseProps, type DrawerIndentBackgroundProps, } from './drawer-indent-background';
 export { DrawerStack, type DrawerStackProps } from './drawer-stack';
+export { DrawerSwipeArea, type DrawerSwipeAreaBaseProps, type DrawerSwipeAreaProps } from './drawer-swipe-area';
 export { drawerAnatomy } from './drawer.anatomy';
 export { useDrawer, type UseDrawerProps, type UseDrawerReturn } from './use-drawer';
 export { useDrawerContext, type UseDrawerContext } from './use-drawer-context';

package/dist/components/drawer/index.js

@@ -1,6 +1,7 @@
 export { DrawerBackdrop } from './drawer-backdrop.js';
 export { DrawerCloseTrigger } from './drawer-close-trigger.js';
 export { DrawerContent } from './drawer-content.js';
+export { DrawerDescription } from './drawer-description.js';
 export { DrawerContext } from './drawer-context.js';
 export { DrawerPositioner } from './drawer-positioner.js';
 export { DrawerGrabber } from './drawer-grabber.js';
@@ -12,6 +13,7 @@ export { DrawerTrigger } from './drawer-trigger.js';
 export { DrawerIndent } from './drawer-indent.js';
 export { DrawerIndentBackground } from './drawer-indent-background.js';
 export { DrawerStack } from './drawer-stack.js';
+export { DrawerSwipeArea } from './drawer-swipe-area.js';
 export { useDrawer } from './use-drawer.js';
 export { useDrawerContext } from './use-drawer-context.js';
 export { useDrawerStackContext } from './use-drawer-stack-context.js';

package/dist/components/field/field-item.cjs

@@ -0,0 +1,54 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const field_anatomy = require('./field.anatomy.cjs');
+const useFieldContext = require('./use-field-context.cjs');
+
+const FieldItem = (props) => {
+  const { value, children } = props;
+  const parentField = useFieldContext.useFieldContext();
+  const itemField = react.useMemo(() => {
+    if (!parentField) {
+      throw new Error("Field.Item must be used within Field.Root");
+    }
+    const controlId = `field::${parentField.ids.control}::item::${value}`;
+    const labelId = `${controlId}::label`;
+    const getControlProps = () => ({
+      ...parentField.getInputProps(),
+      id: controlId
+    });
+    return {
+      ...parentField,
+      ids: {
+        ...parentField.ids,
+        control: controlId,
+        label: labelId
+      },
+      getLabelProps: () => ({
+        ...parentField.getLabelProps(),
+        id: labelId,
+        htmlFor: controlId
+      }),
+      getInputProps: () => ({
+        ...getControlProps(),
+        ...field_anatomy.parts.input.attrs
+      }),
+      getSelectProps: () => ({
+        ...getControlProps(),
+        ...field_anatomy.parts.select.attrs
+      }),
+      getTextareaProps: () => ({
+        ...getControlProps(),
+        ...field_anatomy.parts.textarea.attrs
+      })
+    };
+  }, [parentField, value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(useFieldContext.FieldProvider, { value: itemField, children });
+};
+FieldItem.displayName = "FieldItem";
+
+exports.FieldItem = FieldItem;

package/dist/components/field/field-item.d.cts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+export interface FieldItemBaseProps {
+    value: string;
+}
+export interface FieldItemProps extends PropsWithChildren<FieldItemBaseProps> {
+}
+export declare const FieldItem: {
+    (props: FieldItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/field/field-item.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+export interface FieldItemBaseProps {
+    value: string;
+}
+export interface FieldItemProps extends PropsWithChildren<FieldItemBaseProps> {
+}
+export declare const FieldItem: {
+    (props: FieldItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/field/field-item.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { parts } from './field.anatomy.js';
+import { useFieldContext, FieldProvider } from './use-field-context.js';
+
+const FieldItem = (props) => {
+  const { value, children } = props;
+  const parentField = useFieldContext();
+  const itemField = useMemo(() => {
+    if (!parentField) {
+      throw new Error("Field.Item must be used within Field.Root");
+    }
+    const controlId = `field::${parentField.ids.control}::item::${value}`;
+    const labelId = `${controlId}::label`;
+    const getControlProps = () => ({
+      ...parentField.getInputProps(),
+      id: controlId
+    });
+    return {
+      ...parentField,
+      ids: {
+        ...parentField.ids,
+        control: controlId,
+        label: labelId
+      },
+      getLabelProps: () => ({
+        ...parentField.getLabelProps(),
+        id: labelId,
+        htmlFor: controlId
+      }),
+      getInputProps: () => ({
+        ...getControlProps(),
+        ...parts.input.attrs
+      }),
+      getSelectProps: () => ({
+        ...getControlProps(),
+        ...parts.select.attrs
+      }),
+      getTextareaProps: () => ({
+        ...getControlProps(),
+        ...parts.textarea.attrs
+      })
+    };
+  }, [parentField, value]);
+  return /* @__PURE__ */ jsx(FieldProvider, { value: itemField, children });
+};
+FieldItem.displayName = "FieldItem";
+
+export { FieldItem };

package/dist/components/field/field-root.cjs

@@ -20,7 +20,8 @@ const FieldRoot = react.forwardRef((props, ref) => {
     "disabled",
     "invalid",
     "readOnly",
-    "required"
+    "required",
+    "target"
   ]);
   const field = useField.useField(useFieldProps);
   const mergedProps = react$1.mergeProps(field.getRootProps(), localProps);

package/dist/components/field/field-root.js

@@ -16,7 +16,8 @@ const FieldRoot = forwardRef((props, ref) => {
     "disabled",
     "invalid",
     "readOnly",
-    "required"
+    "required",
+    "target"
   ]);
   const field = useField(useFieldProps);
   const mergedProps = mergeProps(field.getRootProps(), localProps);

package/dist/components/field/field.cjs

@@ -6,6 +6,7 @@ const fieldContext = require('./field-context.cjs');
 const fieldErrorText = require('./field-error-text.cjs');
 const fieldHelperText = require('./field-helper-text.cjs');
 const fieldInput = require('./field-input.cjs');
+const fieldItem = require('./field-item.cjs');
 const fieldLabel = require('./field-label.cjs');
 const fieldRequiredIndicator = require('./field-required-indicator.cjs');
 const fieldRoot = require('./field-root.cjs');
@@ -19,6 +20,7 @@ exports.Context = fieldContext.FieldContext;
 exports.ErrorText = fieldErrorText.FieldErrorText;
 exports.HelperText = fieldHelperText.FieldHelperText;
 exports.Input = fieldInput.FieldInput;
+exports.Item = fieldItem.FieldItem;
 exports.Label = fieldLabel.FieldLabel;
 exports.RequiredIndicator = fieldRequiredIndicator.FieldRequiredIndicator;
 exports.Root = fieldRoot.FieldRoot;

package/dist/components/field/field.d.cts

@@ -2,6 +2,7 @@ export { FieldContext as Context, type FieldContextProps as ContextProps } from
 export { FieldErrorText as ErrorText, type FieldErrorTextBaseProps as ErrorTextBaseProps, type FieldErrorTextProps as ErrorTextProps, } from './field-error-text';
 export { FieldHelperText as HelperText, type FieldHelperTextBaseProps as HelperTextBaseProps, type FieldHelperTextProps as HelperTextProps, } from './field-helper-text';
 export { FieldInput as Input, type FieldInputBaseProps as InputBaseProps, type FieldInputProps as InputProps, } from './field-input';
+export { FieldItem as Item, type FieldItemBaseProps as ItemBaseProps, type FieldItemProps as ItemProps, } from './field-item';
 export { FieldLabel as Label, type FieldLabelBaseProps as LabelBaseProps, type FieldLabelProps as LabelProps, } from './field-label';
 export { FieldRequiredIndicator as RequiredIndicator, type FieldRequiredIndicatorBaseProps as RequiredIndicatorBaseProps, type FieldRequiredIndicatorProps as RequiredIndicatorProps, } from './field-required-indicator';
 export { FieldRoot as Root, type FieldRootBaseProps as RootBaseProps, type FieldRootProps as RootProps, } from './field-root';

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

@@ -2,6 +2,7 @@ export { FieldContext as Context, type FieldContextProps as ContextProps } from
 export { FieldErrorText as ErrorText, type FieldErrorTextBaseProps as ErrorTextBaseProps, type FieldErrorTextProps as ErrorTextProps, } from './field-error-text';
 export { FieldHelperText as HelperText, type FieldHelperTextBaseProps as HelperTextBaseProps, type FieldHelperTextProps as HelperTextProps, } from './field-helper-text';
 export { FieldInput as Input, type FieldInputBaseProps as InputBaseProps, type FieldInputProps as InputProps, } from './field-input';
+export { FieldItem as Item, type FieldItemBaseProps as ItemBaseProps, type FieldItemProps as ItemProps, } from './field-item';
 export { FieldLabel as Label, type FieldLabelBaseProps as LabelBaseProps, type FieldLabelProps as LabelProps, } from './field-label';
 export { FieldRequiredIndicator as RequiredIndicator, type FieldRequiredIndicatorBaseProps as RequiredIndicatorBaseProps, type FieldRequiredIndicatorProps as RequiredIndicatorProps, } from './field-required-indicator';
 export { FieldRoot as Root, type FieldRootBaseProps as RootBaseProps, type FieldRootProps as RootProps, } from './field-root';

package/dist/components/field/field.js

@@ -2,6 +2,7 @@ export { FieldContext as Context } from './field-context.js';
 export { FieldErrorText as ErrorText } from './field-error-text.js';
 export { FieldHelperText as HelperText } from './field-helper-text.js';
 export { FieldInput as Input } from './field-input.js';
+export { FieldItem as Item } from './field-item.js';
 export { FieldLabel as Label } from './field-label.js';
 export { FieldRequiredIndicator as RequiredIndicator } from './field-required-indicator.js';
 export { FieldRoot as Root } from './field-root.js';

package/dist/components/field/use-field.cjs

@@ -13,7 +13,14 @@ const field_anatomy = require('./field.anatomy.cjs');
 const useField = (props = {}) => {
   const fieldset = useFieldsetContext.useFieldsetContext();
   const env = useEnvironmentContext.useEnvironmentContext();
-  const { ids, disabled = Boolean(fieldset?.disabled), invalid = false, readOnly = false, required = false } = props;
+  const {
+    ids,
+    target,
+    disabled = Boolean(fieldset?.disabled),
+    invalid = false,
+    readOnly = false,
+    required = false
+  } = props;
   const [hasErrorText, setHasErrorText] = react.useState(false);
   const [hasHelperText, setHasHelperText] = react.useState(false);
   const uid = react.useId();
@@ -55,6 +62,7 @@ const useField = (props = {}) => {
     }),
     [disabled, invalid, readOnly, rootId]
   );
+  const targetControlId = target ? `field::${id}::item::${target}` : void 0;
   const getLabelProps = react.useMemo(
     () => () => ({
       ...field_anatomy.parts.label.attrs,
@@ -63,9 +71,9 @@ const useField = (props = {}) => {
       "data-invalid": domQuery.dataAttr(invalid),
       "data-readonly": domQuery.dataAttr(readOnly),
       "data-required": domQuery.dataAttr(required),
-      htmlFor: id
+      htmlFor: targetControlId ?? id
     }),
-    [disabled, invalid, readOnly, required, id, labelId]
+    [disabled, invalid, readOnly, required, id, labelId, targetControlId]
   );
   const getControlProps = react.useMemo(
     () => () => ({

package/dist/components/field/use-field.d.cts

@@ -32,6 +32,10 @@ export interface UseFieldProps {
      * Indicates whether the field is read-only.
      */
     readOnly?: boolean | undefined;
+    /**
+     * The target field item value the label should point to.
+     */
+    target?: string | undefined;
 }
 export type UseFieldReturn = ReturnType<typeof useField>;
 export declare const useField: (props?: UseFieldProps) => {

package/dist/components/field/use-field.d.ts

@@ -32,6 +32,10 @@ export interface UseFieldProps {
      * Indicates whether the field is read-only.
      */
     readOnly?: boolean | undefined;
+    /**
+     * The target field item value the label should point to.
+     */
+    target?: string | undefined;
 }
 export type UseFieldReturn = ReturnType<typeof useField>;
 export declare const useField: (props?: UseFieldProps) => {

package/dist/components/field/use-field.js

@@ -9,7 +9,14 @@ import { parts } from './field.anatomy.js';
 const useField = (props = {}) => {
   const fieldset = useFieldsetContext();
   const env = useEnvironmentContext();
-  const { ids, disabled = Boolean(fieldset?.disabled), invalid = false, readOnly = false, required = false } = props;
+  const {
+    ids,
+    target,
+    disabled = Boolean(fieldset?.disabled),
+    invalid = false,
+    readOnly = false,
+    required = false
+  } = props;
   const [hasErrorText, setHasErrorText] = useState(false);
   const [hasHelperText, setHasHelperText] = useState(false);
   const uid = useId();
@@ -51,6 +58,7 @@ const useField = (props = {}) => {
     }),
     [disabled, invalid, readOnly, rootId]
   );
+  const targetControlId = target ? `field::${id}::item::${target}` : void 0;
   const getLabelProps = useMemo(
     () => () => ({
       ...parts.label.attrs,
@@ -59,9 +67,9 @@ const useField = (props = {}) => {
       "data-invalid": dataAttr(invalid),
       "data-readonly": dataAttr(readOnly),
       "data-required": dataAttr(required),
-      htmlFor: id
+      htmlFor: targetControlId ?? id
     }),
-    [disabled, invalid, readOnly, required, id, labelId]
+    [disabled, invalid, readOnly, required, id, labelId, targetControlId]
   );
   const getControlProps = useMemo(
     () => () => ({

package/dist/components/frame/frame.cjs

@@ -33,7 +33,7 @@ const Frame = react.forwardRef((props, ref) => {
     setMountNode(getMountNode(frameRef));
   }, [frameRef, srcDoc]);
   react.useEffect(() => {
-    if (!frameRef || !frameRef.contentDocument) return;
+    if (!frameRef?.contentDocument) return;
     const win = frameRef.contentWindow;
     if (!win) return;
     const mountNode2 = getMountNode(frameRef);

package/dist/components/frame/frame.js

@@ -29,7 +29,7 @@ const Frame = forwardRef((props, ref) => {
     setMountNode(getMountNode(frameRef));
   }, [frameRef, srcDoc]);
   useEffect(() => {
-    if (!frameRef || !frameRef.contentDocument) return;
+    if (!frameRef?.contentDocument) return;
     const win = frameRef.contentWindow;
     if (!win) return;
     const mountNode2 = getMountNode(frameRef);

package/dist/components/index.cjs

@@ -38,6 +38,7 @@ const avatar = require('./avatar/avatar.cjs');
 const drawerBackdrop = require('./drawer/drawer-backdrop.cjs');
 const drawerCloseTrigger = require('./drawer/drawer-close-trigger.cjs');
 const drawerContent = require('./drawer/drawer-content.cjs');
+const drawerDescription = require('./drawer/drawer-description.cjs');
 const drawerContext = require('./drawer/drawer-context.cjs');
 const drawerPositioner = require('./drawer/drawer-positioner.cjs');
 const drawerGrabber = require('./drawer/drawer-grabber.cjs');
@@ -49,6 +50,7 @@ const drawerTrigger = require('./drawer/drawer-trigger.cjs');
 const drawerIndent = require('./drawer/drawer-indent.cjs');
 const drawerIndentBackground = require('./drawer/drawer-indent-background.cjs');
 const drawerStack = require('./drawer/drawer-stack.cjs');
+const drawerSwipeArea = require('./drawer/drawer-swipe-area.cjs');
 const useDrawer = require('./drawer/use-drawer.cjs');
 const useDrawerContext = require('./drawer/use-drawer-context.cjs');
 const useDrawerStackContext = require('./drawer/use-drawer-stack-context.cjs');
@@ -829,6 +831,7 @@ exports.Avatar = avatar;
 exports.DrawerBackdrop = drawerBackdrop.DrawerBackdrop;
 exports.DrawerCloseTrigger = drawerCloseTrigger.DrawerCloseTrigger;
 exports.DrawerContent = drawerContent.DrawerContent;
+exports.DrawerDescription = drawerDescription.DrawerDescription;
 exports.DrawerContext = drawerContext.DrawerContext;
 exports.DrawerPositioner = drawerPositioner.DrawerPositioner;
 exports.DrawerGrabber = drawerGrabber.DrawerGrabber;
@@ -840,6 +843,7 @@ exports.DrawerTrigger = drawerTrigger.DrawerTrigger;
 exports.DrawerIndent = drawerIndent.DrawerIndent;
 exports.DrawerIndentBackground = drawerIndentBackground.DrawerIndentBackground;
 exports.DrawerStack = drawerStack.DrawerStack;
+exports.DrawerSwipeArea = drawerSwipeArea.DrawerSwipeArea;
 exports.useDrawer = useDrawer.useDrawer;
 exports.useDrawerContext = useDrawerContext.useDrawerContext;
 exports.useDrawerStackContext = useDrawerStackContext.useDrawerStackContext;