@ark-ui/solid 3.3.0 → 3.4.1

package/dist/source/components/combobox/use-combobox.js

@@ -3,6 +3,7 @@ import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
 import { createSplitProps } from '../../utils/create-split-props';
+import { useFieldContext } from '../field';
 export const useCombobox = (props) => {
     const [collectionOptions, comboboxProps] = createSplitProps()(props, [
         'isItemDisabled',
@@ -10,12 +11,21 @@ export const useCombobox = (props) => {
         'itemToString',
         'items',
     ]);
-    const collection = () => combobox.collection(collectionOptions);
+    const collection = () => combobox.collection({ ...collectionOptions });
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
     const id = createUniqueId();
+    const field = useFieldContext();
     const context = createMemo(() => ({
         id,
+        ids: {
+            label: field?.().ids.label,
+            input: field?.().ids.control,
+        },
+        disabled: field?.().disabled,
+        readOnly: field?.().readOnly,
+        required: field?.().required,
+        invalid: field?.().invalid,
         collection: collection(),
         dir: locale().dir,
         getRootNode: environment().getRootNode,

package/dist/source/components/date-picker/date-picker-month-select.jsx

@@ -1,12 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
+import { For } from 'solid-js';
 import { ark } from '../factory';
 import { useDatePickerContext } from './use-date-picker-context';
 export const DatePickerMonthSelect = (props) => {
     const api = useDatePickerContext();
     const mergedProps = mergeProps(() => api().getMonthSelectProps(), props);
     return (<ark.select {...mergedProps}>
-      {api()
-            .getMonths()
-            .map((month) => (<option value={month.value}>{month.label}</option>))}
+      <For each={api().getMonths()}>
+        {(month) => <option value={month.value}>{month.label}</option>}
+      </For>
     </ark.select>);
 };

package/dist/source/components/date-picker/date-picker-year-select.jsx

@@ -1,11 +1,14 @@
 import { mergeProps } from '@zag-js/solid';
+import { For } from 'solid-js';
 import { ark } from '../factory';
 import { useDatePickerContext } from './use-date-picker-context';
 export const DatePickerYearSelect = (props) => {
     const api = useDatePickerContext();
     const mergedProps = mergeProps(() => api().getYearSelectProps(), props);
     return (<ark.select {...mergedProps}>
-      {getYearsRange({ from: 1_000, to: 4_000 }).map((year) => (<option value={year}>{year}</option>))}
+      <For each={getYearsRange({ from: 1_000, to: 4_000 })}>
+        {(year) => <option value={year}>{year}</option>}
+      </For>
     </ark.select>);
 };
 function getYearsRange(range) {

package/dist/source/components/date-picker/date-picker.js

@@ -10,7 +10,7 @@ export { DatePickerPositioner as Positioner, } from './date-picker-positioner';
 export { DatePickerPresetTrigger as PresetTrigger, } from './date-picker-preset-trigger';
 export { DatePickerPrevTrigger as PrevTrigger, } from './date-picker-prev-trigger';
 export { DatePickerRangeText as RangeText, } from './date-picker-range-text';
-export { DatePickerRoot as Root } from './date-picker-root';
+export { DatePickerRoot as Root, } from './date-picker-root';
 export { DatePickerRootProvider as RootProvider, } from './date-picker-root-provider';
 export { DatePickerTable as Table, } from './date-picker-table';
 export { DatePickerTableBody as TableBody, } from './date-picker-table-body';
@@ -20,7 +20,7 @@ export { DatePickerTableHead as TableHead, } from './date-picker-table-head';
 export { DatePickerTableHeader as TableHeader, } from './date-picker-table-header';
 export { DatePickerTableRow as TableRow, } from './date-picker-table-row';
 export { DatePickerTrigger as Trigger, } from './date-picker-trigger';
-export { DatePickerView as View } from './date-picker-view';
+export { DatePickerView as View, } from './date-picker-view';
 export { DatePickerViewControl as ViewControl, } from './date-picker-view-control';
 export { DatePickerViewTrigger as ViewTrigger, } from './date-picker-view-trigger';
 export { DatePickerYearSelect as YearSelect, } from './date-picker-year-select';

package/dist/source/components/date-picker/index.js

@@ -1,29 +1,29 @@
 export { DatePickerClearTrigger, } from './date-picker-clear-trigger';
-export { DatePickerContent } from './date-picker-content';
-export { DatePickerContext } from './date-picker-context';
-export { DatePickerControl } from './date-picker-control';
-export { DatePickerInput } from './date-picker-input';
-export { DatePickerLabel } from './date-picker-label';
-export { DatePickerMonthSelect } from './date-picker-month-select';
-export { DatePickerNextTrigger } from './date-picker-next-trigger';
-export { DatePickerPositioner } from './date-picker-positioner';
+export { DatePickerContent, } from './date-picker-content';
+export { DatePickerContext, } from './date-picker-context';
+export { DatePickerControl, } from './date-picker-control';
+export { DatePickerInput, } from './date-picker-input';
+export { DatePickerLabel, } from './date-picker-label';
+export { DatePickerMonthSelect, } from './date-picker-month-select';
+export { DatePickerNextTrigger, } from './date-picker-next-trigger';
+export { DatePickerPositioner, } from './date-picker-positioner';
 export { DatePickerPresetTrigger, } from './date-picker-preset-trigger';
-export { DatePickerPrevTrigger } from './date-picker-prev-trigger';
-export { DatePickerRangeText } from './date-picker-range-text';
-export { DatePickerRoot } from './date-picker-root';
+export { DatePickerPrevTrigger, } from './date-picker-prev-trigger';
+export { DatePickerRangeText, } from './date-picker-range-text';
+export { DatePickerRoot, } from './date-picker-root';
 export { DatePickerRootProvider, } from './date-picker-root-provider';
-export { DatePickerTable } from './date-picker-table';
-export { DatePickerTableBody } from './date-picker-table-body';
-export { DatePickerTableCell } from './date-picker-table-cell';
+export { DatePickerTable, } from './date-picker-table';
+export { DatePickerTableBody, } from './date-picker-table-body';
+export { DatePickerTableCell, } from './date-picker-table-cell';
 export { DatePickerTableCellTrigger, } from './date-picker-table-cell-trigger';
-export { DatePickerTableHead } from './date-picker-table-head';
-export { DatePickerTableHeader } from './date-picker-table-header';
-export { DatePickerTableRow } from './date-picker-table-row';
-export { DatePickerTrigger } from './date-picker-trigger';
-export { DatePickerView } from './date-picker-view';
-export { DatePickerViewControl } from './date-picker-view-control';
-export { DatePickerViewTrigger } from './date-picker-view-trigger';
-export { DatePickerYearSelect } from './date-picker-year-select';
+export { DatePickerTableHead, } from './date-picker-table-head';
+export { DatePickerTableHeader, } from './date-picker-table-header';
+export { DatePickerTableRow, } from './date-picker-table-row';
+export { DatePickerTrigger, } from './date-picker-trigger';
+export { DatePickerView, } from './date-picker-view';
+export { DatePickerViewControl, } from './date-picker-view-control';
+export { DatePickerViewTrigger, } from './date-picker-view-trigger';
+export { DatePickerYearSelect, } from './date-picker-year-select';
 export { useDatePicker } from './use-date-picker';
 export { useDatePickerContext } from './use-date-picker-context';
 export * as DatePicker from './date-picker';

package/dist/source/components/dialog/dialog.js

@@ -1,10 +1,10 @@
 export { DialogBackdrop as Backdrop, } from './dialog-backdrop';
 export { DialogCloseTrigger as CloseTrigger, } from './dialog-close-trigger';
-export { DialogContent as Content } from './dialog-content';
+export { DialogContent as Content, } from './dialog-content';
 export { DialogContext as Context } from './dialog-context';
 export { DialogDescription as Description, } from './dialog-description';
 export { DialogPositioner as Positioner, } from './dialog-positioner';
-export { DialogRoot as Root } from './dialog-root';
+export { DialogRoot as Root, } from './dialog-root';
 export { DialogRootProvider as RootProvider, } from './dialog-root-provider';
-export { DialogTitle as Title } from './dialog-title';
-export { DialogTrigger as Trigger } from './dialog-trigger';
+export { DialogTitle as Title, } from './dialog-title';
+export { DialogTrigger as Trigger, } from './dialog-trigger';

package/dist/source/components/dialog/index.js

@@ -1,13 +1,13 @@
-export { DialogBackdrop } from './dialog-backdrop';
-export { DialogCloseTrigger } from './dialog-close-trigger';
-export { DialogContent } from './dialog-content';
-export { DialogContext } from './dialog-context';
-export { DialogDescription } from './dialog-description';
-export { DialogPositioner } from './dialog-positioner';
-export { DialogRoot } from './dialog-root';
-export { DialogRootProvider } from './dialog-root-provider';
-export { DialogTitle } from './dialog-title';
-export { DialogTrigger } from './dialog-trigger';
+export { DialogBackdrop, } from './dialog-backdrop';
+export { DialogCloseTrigger, } from './dialog-close-trigger';
+export { DialogContent, } from './dialog-content';
+export { DialogContext, } from './dialog-context';
+export { DialogDescription, } from './dialog-description';
+export { DialogPositioner, } from './dialog-positioner';
+export { DialogRoot, } from './dialog-root';
+export { DialogRootProvider, } from './dialog-root-provider';
+export { DialogTitle, } from './dialog-title';
+export { DialogTrigger, } from './dialog-trigger';
 export { useDialog } from './use-dialog';
 export { useDialogContext } from './use-dialog-context';
 export * as Dialog from './dialog';

package/dist/source/components/editable/editable-input.jsx

@@ -1,8 +1,10 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { useFieldContext } from '../field';
 import { useEditableContext } from './use-editable-context';
 export const EditableInput = (props) => {
     const api = useEditableContext();
     const mergedProps = mergeProps(() => api().getInputProps(), props);
-    return <ark.input {...mergedProps}/>;
+    const field = useFieldContext();
+    return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps}/>;
 };

package/dist/source/components/editable/editable-root.jsx

@@ -25,6 +25,7 @@ export const EditableRoot = (props) => {
         'onValueRevert',
         'placeholder',
         'readOnly',
+        'required',
         'selectOnFocus',
         'startWithEditView',
         'submitMode',

package/dist/source/components/editable/editable.js

@@ -1,11 +1,11 @@
-export { EditableArea as Area } from './editable-area';
+export { EditableArea as Area, } from './editable-area';
 export { EditableCancelTrigger as CancelTrigger, } from './editable-cancel-trigger';
 export { EditableContext as Context, } from './editable-context';
 export { EditableControl as Control, } from './editable-control';
 export { EditableEditTrigger as EditTrigger, } from './editable-edit-trigger';
-export { EditableInput as Input } from './editable-input';
-export { EditableLabel as Label } from './editable-label';
+export { EditableInput as Input, } from './editable-input';
+export { EditableLabel as Label, } from './editable-label';
 export { EditablePreview as Preview, } from './editable-preview';
-export { EditableRoot as Root } from './editable-root';
+export { EditableRoot as Root, } from './editable-root';
 export { EditableRootProvider as RootProvider, } from './editable-root-provider';
 export { EditableSubmitTrigger as SubmitTrigger, } from './editable-submit-trigger';

package/dist/source/components/editable/index.js

@@ -1,14 +1,14 @@
-export { EditableArea } from './editable-area';
-export { EditableCancelTrigger } from './editable-cancel-trigger';
-export { EditableContext } from './editable-context';
-export { EditableControl } from './editable-control';
-export { EditableEditTrigger } from './editable-edit-trigger';
-export { EditableInput } from './editable-input';
-export { EditableLabel } from './editable-label';
-export { EditablePreview } from './editable-preview';
-export { EditableRoot } from './editable-root';
-export { EditableRootProvider } from './editable-root-provider';
-export { EditableSubmitTrigger } from './editable-submit-trigger';
+export { EditableArea, } from './editable-area';
+export { EditableCancelTrigger, } from './editable-cancel-trigger';
+export { EditableContext, } from './editable-context';
+export { EditableControl, } from './editable-control';
+export { EditableEditTrigger, } from './editable-edit-trigger';
+export { EditableInput, } from './editable-input';
+export { EditableLabel, } from './editable-label';
+export { EditablePreview, } from './editable-preview';
+export { EditableRoot, } from './editable-root';
+export { EditableRootProvider, } from './editable-root-provider';
+export { EditableSubmitTrigger, } from './editable-submit-trigger';
 export { useEditable } from './use-editable';
 export { useEditableContext } from './use-editable-context';
 export * as Editable from './editable';

package/dist/source/components/editable/use-editable.js

@@ -2,13 +2,23 @@ import * as editable from '@zag-js/editable';
 import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
+import { useFieldContext } from '../field';
 export const useEditable = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
     const id = createUniqueId();
+    const field = useFieldContext();
     const context = createMemo(() => ({
         id,
+        ids: {
+            label: field?.().ids.label,
+            input: field?.().ids.control,
+        },
         dir: locale().dir,
+        disabled: field?.().disabled,
+        invalid: field?.().invalid,
+        readOnly: field?.().readOnly,
+        required: field?.().required,
         getRootNode: environment().getRootNode,
         value: props.defaultValue,
         ...props,

package/dist/source/components/field/field-context.jsx

@@ -0,0 +1,2 @@
+import { useFieldContext } from './use-field-context';
+export const FieldContext = (props) => props.children(useFieldContext());

package/dist/source/components/field/field-error-text.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { useFieldContext } from './use-field-context';
+export const FieldErrorText = (props) => {
+    const field = useFieldContext();
+    const mergedProps = mergeProps(() => field().getErrorTextProps(), props);
+    return (<Show when={field?.().invalid}>
+      <ark.span {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/field/field-helper-text.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFieldContext } from './use-field-context';
+export const FieldHelperText = (props) => {
+    const field = useFieldContext();
+    const mergedProps = mergeProps(() => field().getHelperTextProps(), props);
+    return <ark.span {...mergedProps}/>;
+};

package/dist/source/components/field/field-input.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFieldContext } from './use-field-context';
+export const FieldInput = (props) => {
+    const field = useFieldContext();
+    const mergedProps = mergeProps(() => field?.().getInputProps(), props);
+    return <ark.input {...mergedProps}/>;
+};

package/dist/source/components/field/field-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFieldContext } from './use-field-context';
+export const FieldLabel = (props) => {
+    const field = useFieldContext();
+    const mergedProps = mergeProps(() => field?.().getLabelProps(), props);
+    return <ark.label {...mergedProps}/>;
+};

package/dist/source/components/field/field-root-provider.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { FieldProvider } from './use-field-context';
+export const FieldRootProvider = (props) => {
+    const [{ value: field }, localProps] = createSplitProps()(props, ['value']);
+    const mergedProps = mergeProps(() => field().getRootProps(), localProps);
+    return (<FieldProvider value={field}>
+      <ark.div {...mergedProps}/>
+    </FieldProvider>);
+};

package/dist/source/components/field/field-root.jsx

@@ -0,0 +1,19 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useField } from './use-field';
+import { FieldProvider } from './use-field-context';
+export const FieldRoot = (props) => {
+    const [useFieldProps, localProps] = createSplitProps()(props, [
+        'id',
+        'disabled',
+        'invalid',
+        'readOnly',
+        'required',
+    ]);
+    const field = useField(useFieldProps);
+    const mergedProps = mergeProps(() => field().getRootProps(), localProps);
+    return (<FieldProvider value={field}>
+      <ark.div {...mergedProps}/>
+    </FieldProvider>);
+};

package/dist/source/components/field/field-select.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFieldContext } from './use-field-context';
+export const FieldSelect = (props) => {
+    const field = useFieldContext();
+    const mergedProps = mergeProps(() => field?.().getSelectProps(), props);
+    return <ark.select {...mergedProps}/>;
+};

package/dist/source/components/field/field-textarea.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFieldContext } from './use-field-context';
+export const FieldTextarea = (props) => {
+    const field = useFieldContext();
+    const mergedProps = mergeProps(() => field?.().getTextareaProps(), props);
+    return <ark.textarea {...mergedProps}/>;
+};

package/dist/source/components/field/field.js

@@ -0,0 +1,9 @@
+export { FieldRoot as Root, } from './field-root';
+export { FieldRootProvider as RootProvider, } from './field-root-provider';
+export { FieldLabel as Label, } from './field-label';
+export { FieldInput as Input, } from './field-input';
+export { FieldTextarea as Textarea, } from './field-textarea';
+export { FieldSelect as Select, } from './field-select';
+export { FieldHelperText as HelperText, } from './field-helper-text';
+export { FieldErrorText as ErrorText, } from './field-error-text';
+export { FieldContext as Context } from './field-context';

package/dist/source/components/field/index.js

@@ -0,0 +1,11 @@
+export { FieldContext } from './field-context';
+export { FieldErrorText, } from './field-error-text';
+export { FieldHelperText, } from './field-helper-text';
+export { FieldInput } from './field-input';
+export { FieldLabel } from './field-label';
+export { FieldSelect } from './field-select';
+export { FieldRoot } from './field-root';
+export { FieldRootProvider, } from './field-root-provider';
+export { FieldTextarea, } from './field-textarea';
+export { useFieldContext } from './use-field-context';
+export * as Field from './field';

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

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [FieldProvider, useFieldContext] = createContext({
+    hookName: 'useFieldContext',
+    providerName: '<FieldProvider />',
+    strict: false,
+});

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

@@ -0,0 +1,105 @@
+import { fieldAnatomy } from '@ark-ui/anatomy';
+import { getWindow } from '@zag-js/dom-query';
+import { createEffect, createMemo, createSignal, onCleanup } from 'solid-js';
+const parts = fieldAnatomy.build();
+export const useField = (props) => {
+    const { required = false, disabled = false, invalid = false, readOnly = false } = props;
+    const [hasErrorText, setHasErrorText] = createSignal(false);
+    const [hasHelperText, setHasHelperText] = createSignal(false);
+    const id = props.id ?? `field-${Math.random().toString(36).substr(2, 9)}`;
+    let rootRef;
+    const errorTextId = `field::${id}::error-text`;
+    const helperTextId = `field::${id}::helper-text`;
+    const labelId = `field::${id}::label`;
+    createEffect(() => {
+        const rootNode = rootRef;
+        if (!rootNode)
+            return;
+        const win = getWindow(rootNode);
+        const doc = win.document;
+        const checkTextElements = () => {
+            setHasErrorText(!!doc.getElementById(errorTextId));
+            setHasHelperText(!!doc.getElementById(helperTextId));
+        };
+        checkTextElements();
+        const observer = new win.MutationObserver(checkTextElements);
+        observer.observe(rootNode, { childList: true, subtree: true });
+        onCleanup(() => observer.disconnect());
+    });
+    const getRootProps = () => ({
+        ...parts.root.attrs,
+        role: 'group',
+        'data-disabled': dataAttr(disabled),
+        'data-invalid': dataAttr(invalid),
+        'data-readonly': dataAttr(readOnly),
+    });
+    const getLabelProps = () => ({
+        ...parts.label.attrs,
+        id: labelId,
+        'data-disabled': dataAttr(disabled),
+        'data-invalid': dataAttr(invalid),
+        'data-readonly': dataAttr(readOnly),
+        htmlFor: id,
+    });
+    const labelIds = [];
+    if (hasErrorText() && invalid)
+        labelIds.push(errorTextId);
+    if (hasHelperText())
+        labelIds.push(helperTextId);
+    const getControlProps = () => ({
+        'aria-describedby': labelIds.join(' ') || undefined,
+        'aria-invalid': ariaAttr(invalid),
+        'aria-required': ariaAttr(required),
+        'aria-readonly': ariaAttr(readOnly),
+        id,
+        required,
+        disabled,
+        readOnly,
+    });
+    const getInputProps = () => ({
+        ...getControlProps(),
+        ...parts.input.attrs,
+    });
+    const getTextareaProps = () => ({
+        ...getControlProps(),
+        ...parts.textarea.attrs,
+    });
+    const getSelectProps = () => ({
+        ...getControlProps(),
+        ...parts.select.attrs,
+    });
+    const getHelperTextProps = () => ({
+        id: helperTextId,
+        ...parts.helperText.attrs,
+    });
+    const getErrorTextProps = () => ({
+        id: errorTextId,
+        ...parts.errorText.attrs,
+        'aria-live': 'polite',
+    });
+    return createMemo(() => ({
+        ariaDescribedby: labelIds.join(' '),
+        ids: {
+            control: id,
+            label: labelId,
+            errorText: errorTextId,
+            helperText: helperTextId,
+        },
+        refs: {
+            rootRef,
+        },
+        disabled,
+        invalid,
+        readOnly,
+        required,
+        getLabelProps,
+        getRootProps,
+        getInputProps,
+        getTextareaProps,
+        getSelectProps,
+        getHelperTextProps,
+        getErrorTextProps,
+    }));
+};
+const dataAttr = (condition) => (condition ? '' : undefined);
+const ariaAttr = (condition) => (condition ? true : undefined);

package/dist/source/components/file-upload/file-upload-hidden-input.jsx

@@ -1,8 +1,10 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { useFieldContext } from '../field';
 import { useFileUploadContext } from './use-file-upload-context';
 export const FileUploadHiddenInput = (props) => {
     const fileUpload = useFileUploadContext();
     const mergedProps = mergeProps(() => fileUpload().getHiddenInputProps(), props);
-    return <ark.input {...mergedProps}/>;
+    const field = useFieldContext();
+    return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps}/>;
 };

package/dist/source/components/file-upload/file-upload-root.jsx

@@ -20,6 +20,7 @@ export const FileUploadRoot = (props) => {
         'onFileAccept',
         'onFileChange',
         'onFileReject',
+        'required',
         'translations',
         'validate',
     ]);

package/dist/source/components/file-upload/file-upload.js

@@ -1,6 +1,6 @@
 export { FileUploadContext as Context, } from './file-upload-context';
 export { FileUploadDropzone as Dropzone, } from './file-upload-dropzone';
-export { FileUploadItem as Item } from './file-upload-item';
+export { FileUploadItem as Item, } from './file-upload-item';
 export { FileUploadItemDeleteTrigger as ItemDeleteTrigger, } from './file-upload-item-delete-trigger';
 export { FileUploadItemGroup as ItemGroup, } from './file-upload-item-group';
 export { FileUploadItemName as ItemName, } from './file-upload-item-name';
@@ -8,7 +8,7 @@ export { FileUploadItemPreview as ItemPreview, } from './file-upload-item-previe
 export { FileUploadItemPreviewImage as ItemPreviewImage, } from './file-upload-item-preview-image';
 export { FileUploadItemSizeText as ItemSizeText, } from './file-upload-item-size-text';
 export { FileUploadLabel as Label, } from './file-upload-label';
-export { FileUploadRoot as Root } from './file-upload-root';
+export { FileUploadRoot as Root, } from './file-upload-root';
 export { FileUploadRootProvider as RootProvider, } from './file-upload-root-provider';
 export { FileUploadTrigger as Trigger, } from './file-upload-trigger';
 export { FileUploadHiddenInput as HiddenInput, } from './file-upload-hidden-input';

package/dist/source/components/file-upload/index.js

@@ -1,17 +1,17 @@
-export { FileUploadContext } from './file-upload-context';
-export { FileUploadDropzone } from './file-upload-dropzone';
-export { FileUploadHiddenInput } from './file-upload-hidden-input';
-export { FileUploadItem } from './file-upload-item';
+export { FileUploadContext, } from './file-upload-context';
+export { FileUploadDropzone, } from './file-upload-dropzone';
+export { FileUploadHiddenInput, } from './file-upload-hidden-input';
+export { FileUploadItem, } from './file-upload-item';
 export { FileUploadItemDeleteTrigger, } from './file-upload-item-delete-trigger';
-export { FileUploadItemGroup } from './file-upload-item-group';
-export { FileUploadItemName } from './file-upload-item-name';
-export { FileUploadItemPreview } from './file-upload-item-preview';
+export { FileUploadItemGroup, } from './file-upload-item-group';
+export { FileUploadItemName, } from './file-upload-item-name';
+export { FileUploadItemPreview, } from './file-upload-item-preview';
 export { FileUploadItemPreviewImage, } from './file-upload-item-preview-image';
 export { FileUploadItemSizeText, } from './file-upload-item-size-text';
-export { FileUploadLabel } from './file-upload-label';
-export { FileUploadRoot } from './file-upload-root';
+export { FileUploadLabel, } from './file-upload-label';
+export { FileUploadRoot, } from './file-upload-root';
 export { FileUploadRootProvider, } from './file-upload-root-provider';
-export { FileUploadTrigger } from './file-upload-trigger';
+export { FileUploadTrigger, } from './file-upload-trigger';
 export { useFileUpload } from './use-file-upload';
 export { useFileUploadContext } from './use-file-upload-context';
 export * as FileUpload from './file-upload';

package/dist/source/components/file-upload/use-file-upload.js

@@ -2,13 +2,21 @@ import * as fileUpload from '@zag-js/file-upload';
 import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
+import { useFieldContext } from '../field';
 export const useFileUpload = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
     const id = createUniqueId();
+    const field = useFieldContext();
     const context = createMemo(() => ({
         id,
+        ids: {
+            label: field?.().ids.label,
+            hiddenInput: field?.().ids.control,
+        },
         dir: locale().dir,
+        disabled: field?.().disabled,
+        required: field?.().required,
         getRootNode: environment().getRootNode,
         ...props,
     }));

package/dist/source/components/format/format.js

@@ -1,2 +1,2 @@
-export { FormatByte as Byte } from './format-byte';
-export { FormatNumber as Number } from './format-number';
+export { FormatByte as Byte, } from './format-byte';
+export { FormatNumber as Number, } from './format-number';

package/dist/source/components/format/index.js

@@ -1,3 +1,3 @@
-export { FormatByte } from './format-byte';
-export { FormatNumber } from './format-number';
+export { FormatByte, } from './format-byte';
+export { FormatNumber, } from './format-number';
 export * as Format from './format';

package/dist/source/components/hover-card/hover-card.js

@@ -1,8 +1,8 @@
-export { HoverCardArrow as Arrow } from './hover-card-arrow';
+export { HoverCardArrow as Arrow, } from './hover-card-arrow';
 export { HoverCardArrowTip as ArrowTip, } from './hover-card-arrow-tip';
 export { HoverCardContent as Content, } from './hover-card-content';
 export { HoverCardContext as Context, } from './hover-card-context';
 export { HoverCardPositioner as Positioner, } from './hover-card-positioner';
-export { HoverCardRoot as Root } from './hover-card-root';
+export { HoverCardRoot as Root, } from './hover-card-root';
 export { HoverCardRootProvider as RootProvider, } from './hover-card-root-provider';
 export { HoverCardTrigger as Trigger, } from './hover-card-trigger';