ui-ingredients 0.0.31 → 0.0.33

package/README.md

@@ -35,46 +35,47 @@ npm install ui-ingredients
 
 ## Components
 
-- 🟢 Accordion
-- 🟢 Avatar
-- 🟢 Carousel
-- 🟢 Checkbox
-- 🟢 Clipboard
-- 🟢 Collapsible
-- ⚪ ColorPicker
-- 🟢 Combobox
-- 🟢 DatePicker
-- 🟢 Dialog
-- 🟢 Editable
-- 🟢 FileUpload
-- ⚪ FloatingPanel
-- 🟢 HoverCard
-- 🟢 Menu
-- 🟢 NumberInput
-- 🟢 Pagination
-- 🟢 PinInput
-- 🟢 Popover
-- 🟢 Portal
-- ⚪ Presence
-- 🟢 Progress
-- 🟢 QRCode
-- 🟢 RadioGroup
-- 🟢 RatingGroup
-- 🟢 Select
-- 🟢 SegmentGroup
-- 🟢 SignaturePad
-- 🟢 Slider
-- 🟢 Splitter
-- 🟢 Steps
-- 🟢 Switch
-- 🟢 Tabs
-- 🟢 TagsInput
-- 🟢 TimePicker
-- 🟢 Timer
-- 🟢 Toast
-- 🟢 ToggleGroup
-- 🟢 Tooltip
-- ⚪ Tour
-- 🟢 TreeView
+- 🟢 [Accordion](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/accordion.md)
+- 🟢 [Avatar](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/avatar.md)
+- 🟢 [Carousel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/carousel.md)
+- 🟢 [Checkbox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/checkbox.md)
+- 🟢 [Clipboard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/clipboard.md)
+- 🟢 [Collapsible](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/collapsible.md)
+- ⚪ [ColorPicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/colorPicker.md)
+- 🟢 [Combobox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/combobox.md)
+- 🟢 [DatePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/datePicker.md)
+- 🟢 [Dialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/dialog.md)
+- 🟢 [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
+- 🟢 [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
+- 🟢 [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
+- ⚪ [FloatingPanel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/floating-panel.md)
+- 🟢 [HoverCard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/hover-card.md)
+- 🟢 [Menu](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/menu.md)
+- 🟢 [NumberInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/number-input.md)
+- 🟢 [Pagination](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pagination.md)
+- 🟢 [PinInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pin-input.md)
+- 🟢 [Popover](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/popover.md)
+- 🟢 [Portal](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/portal.md)
+- ⚪ [Presence](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/presence.md)
+- 🟢 [Progress](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/progress.md)
+- 🟢 [QRCode](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/qr-code.md)
+- 🟢 [RadioGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/radio-group.md)
+- 🟢 [RatingGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/rating-group.md)
+- 🟢 [Select](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/select.md)
+- 🟢 [SegmentGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/segment-group.md)
+- 🟢 [SignaturePad](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/signature-pad.md)
+- 🟢 [Slider](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/slider.md)
+- 🟢 [Splitter](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/splitter.md)
+- 🟢 [Steps](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/steps.md)
+- 🟢 [Switch](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/switch.md)
+- 🟢 [Tabs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tabs.md)
+- 🟢 [TagsInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tags-input.md)
+- 🟢 [TimePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/time-picker.md)
+- 🟢 [Timer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/timer.md)
+- 🟢 [Toast](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toast.md)
+- 🟢 [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
+- 🟢 [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
+- ⚪ [Tour](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tour.md)
+- 🟢 [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)
 
 View components demo [here](https://ui-ingredients.vercel.app/)

package/dist/checkbox/create-checkbox.svelte.js

@@ -1,12 +1,22 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as checkbox from '@zag-js/checkbox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { uid } from 'uid';
 export function createCheckbox(props) {
+    const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(checkbox.machine({
+        ids: {
+            label: field?.ids.label,
+            hiddenInput: field?.ids.control,
+        },
+        invalid: field?.invalid,
+        disabled: field?.disabled,
+        readOnly: field?.readOnly,
+        required: field?.required,
         ...props,
         id: props.id ?? uid(),
         dir: locale?.dir,

package/dist/combobox/create-combobox.svelte.js

@@ -1,4 +1,5 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as combobox from '@zag-js/combobox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
@@ -10,9 +11,18 @@ export function createCombobox(props) {
         itemToString: (item) => props.itemToString ? props.itemToString(item) : String(item),
         isItemDisabled: (item) => props.isItemDisabled ? props.isItemDisabled(item) : false,
     }));
+    const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(combobox.machine({
+        ids: {
+            label: field?.ids.label,
+            input: field?.ids.control,
+        },
+        invalid: field?.invalid,
+        required: field?.required,
+        disabled: field?.disabled,
+        readOnly: field?.readOnly,
         ...props,
         id: props.id ?? uid(),
         dir: locale?.dir,

package/dist/date-picker/anatomy.d.ts

@@ -1,2 +1,2 @@
-export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "table" | "view" | "root" | "content" | "clearTrigger" | "control" | "monthSelect" | "nextTrigger" | "positioner" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "trigger" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;
-export declare const parts: Record<"input" | "label" | "table" | "view" | "root" | "content" | "clearTrigger" | "control" | "monthSelect" | "nextTrigger" | "positioner" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "trigger" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger", import("@zag-js/anatomy").AnatomyPart>;
+export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "table" | "view" | "root" | "control" | "content" | "trigger" | "clearTrigger" | "positioner" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;
+export declare const parts: Record<"input" | "label" | "table" | "view" | "root" | "control" | "content" | "trigger" | "clearTrigger" | "positioner" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger", import("@zag-js/anatomy").AnatomyPart>;

package/dist/editable/create-editable.svelte.js

@@ -1,12 +1,22 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as editable from '@zag-js/editable';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { uid } from 'uid';
 export function createEditable(props) {
+    const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(editable.machine({
+        ids: {
+            label: field?.ids.label,
+            input: field?.ids.control,
+        },
+        invalid: field?.invalid,
+        disabled: field?.disabled,
+        readOnly: field?.readOnly,
+        required: field?.required,
         ...props,
         id: props.id ?? uid(),
         dir: locale?.dir,

package/dist/field/context.svelte.d.ts

@@ -1,3 +1,4 @@
 import { Context } from '../context.svelte.js';
 import type { CreateFieldReturn } from './create-field.svelte.js';
 export declare const fieldContext: Context<CreateFieldReturn>;
+export declare const getFieldContext: () => CreateFieldReturn | null;

package/dist/field/context.svelte.js

@@ -1,2 +1,3 @@
 import { Context } from '../context.svelte.js';
-export const fieldContext = new Context('Field');
+export const fieldContext = new Context('Field', false);
+export const getFieldContext = () => fieldContext.get();

package/dist/field/create-field.svelte.d.ts

@@ -17,6 +17,17 @@ export interface CreateFieldProps {
 export interface CreateFieldReturn extends ReturnType<typeof createField> {
 }
 export declare function createField(props: CreateFieldProps): {
+    readonly ids: {
+        root: string;
+        label: string;
+        control: string;
+        errorText: string;
+        helperText: string;
+    };
+    readonly disabled: boolean;
+    readonly required: boolean;
+    readonly readOnly: boolean;
+    readonly invalid: boolean;
     getRootProps: () => HTMLProps<"div">;
     getLabelProps: () => HTMLProps<"label">;
     getErrorTextProps: () => HTMLProps<"div">;

package/dist/field/create-field.svelte.js

@@ -1,11 +1,13 @@
-import { ariaAttr, dataAttr } from '@zag-js/dom-query';
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { ariaAttr, dataAttr, getDocument, getWindow } from '@zag-js/dom-query';
 import { uid } from 'uid';
 import { parts } from './anatomy.js';
 export function createField(props) {
+    const environment = getEnvironmentContext();
     const id_ = uid();
     const { 
     /**/
-    ids, invalid, disabled, required, readonly, } = $derived.by(() => {
+    ids, invalid, disabled, required, readOnly, } = $derived.by(() => {
         const id = props.id ?? id_;
         const ids = {
             root: props.ids?.root ?? `field:${id}`,
@@ -19,7 +21,7 @@ export function createField(props) {
             invalid: props.invalid ?? false,
             required: props.required ?? false,
             disabled: props.disabled ?? false,
-            readonly: props.readOnly ?? false,
+            readOnly: props.readOnly ?? false,
         };
     });
     let hasErrorText = $state(false);
@@ -35,14 +37,17 @@ export function createField(props) {
         return l.join(' ');
     });
     $effect(() => {
-        if (invalid && document.getElementById(ids.errorText)) {
-            hasErrorText = true;
-        }
-    });
-    $effect(() => {
-        if (document.getElementById(ids.helperText)) {
-            hasHelperText = true;
+        const rootNode = environment?.getRootNode() ?? document;
+        const doc = getDocument(rootNode);
+        const win = getWindow(rootNode);
+        function handler() {
+            hasErrorText = invalid && doc.getElementById(ids.errorText) !== null;
+            hasHelperText = doc.getElementById(ids.helperText) !== null;
         }
+        handler();
+        const observer = new win.MutationObserver(handler);
+        observer.observe(rootNode, { childList: true, subtree: true });
+        return () => observer.disconnect();
     });
     function getRootProps() {
         return {
@@ -52,7 +57,7 @@ export function createField(props) {
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
-            'data-readonly': dataAttr(readonly),
+            'data-readonly': dataAttr(readOnly),
         };
     }
     function getLabelProps() {
@@ -63,7 +68,7 @@ export function createField(props) {
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
-            'data-readonly': dataAttr(readonly),
+            'data-readonly': dataAttr(readOnly),
         };
     }
     function getErrorTextProps() {
@@ -74,7 +79,7 @@ export function createField(props) {
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
-            'data-readonly': dataAttr(readonly),
+            'data-readonly': dataAttr(readOnly),
         };
     }
     function getHelperTextProps() {
@@ -83,7 +88,7 @@ export function createField(props) {
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
-            'data-readonly': dataAttr(readonly),
+            'data-readonly': dataAttr(readOnly),
         };
     }
     function getInputProps() {
@@ -92,13 +97,13 @@ export function createField(props) {
             id: ids.control,
             disabled,
             required,
-            readonly,
+            readonly: readOnly,
             'aria-invalid': ariaAttr(invalid),
             'aria-describedby': ariaDescribedby,
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
-            'data-readonly': dataAttr(readonly),
+            'data-readonly': dataAttr(readOnly),
         };
     }
     function getSelectProps() {
@@ -108,12 +113,12 @@ export function createField(props) {
             disabled,
             required,
             'aria-invalid': ariaAttr(invalid),
-            'aria-readonly': ariaAttr(readonly),
+            'aria-readonly': ariaAttr(readOnly),
             'aria-describedby': ariaDescribedby,
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
-            'data-readonly': dataAttr(readonly),
+            'data-readonly': dataAttr(readOnly),
         };
     }
     function getTextareaProps() {
@@ -122,15 +127,30 @@ export function createField(props) {
             id: ids.control,
             disabled,
             required,
-            readonly,
+            readonly: readOnly,
             'aria-describedby': ariaDescribedby,
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),
-            'data-readonly': dataAttr(readonly),
+            'data-readonly': dataAttr(readOnly),
         };
     }
     return {
+        get ids() {
+            return ids;
+        },
+        get disabled() {
+            return disabled;
+        },
+        get required() {
+            return required;
+        },
+        get readOnly() {
+            return readOnly;
+        },
+        get invalid() {
+            return invalid;
+        },
         getRootProps,
         getLabelProps,
         getErrorTextProps,

package/dist/file-upload/create-file-upload.svelte.js

@@ -1,12 +1,20 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as fileUpload from '@zag-js/file-upload';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { uid } from 'uid';
 export function createFileUpload(props) {
+    const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(fileUpload.machine({
+        ids: {
+            label: field?.ids.label,
+            hiddenInput: field?.ids.control,
+        },
+        disabled: field?.disabled,
+        required: field?.required,
         ...props,
         id: props.id ?? uid(),
         dir: locale?.dir,

package/dist/number-input/create-number-input.svelte.js

@@ -1,12 +1,22 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as numberInput from '@zag-js/number-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { uid } from 'uid';
 export function createNumberInput(props) {
+    const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(numberInput.machine({
+        ids: {
+            label: field?.ids.label,
+            input: field?.ids.control,
+        },
+        invalid: field?.invalid,
+        disabled: field?.disabled,
+        readOnly: field?.readOnly,
+        required: field?.required,
         ...props,
         id: props.id ?? uid(),
         dir: locale?.dir,

package/dist/pin-input/anatomy.d.ts

@@ -1,2 +1,2 @@
-export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "root" | "clearTrigger" | "control">;
-export declare const parts: Record<"input" | "label" | "root" | "clearTrigger" | "control", import("@zag-js/anatomy").AnatomyPart>;
+export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "root" | "control" | "clearTrigger">;
+export declare const parts: Record<"input" | "label" | "root" | "control" | "clearTrigger", import("@zag-js/anatomy").AnatomyPart>;

package/dist/pin-input/create-pin-input.svelte.js

@@ -1,12 +1,22 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as pinInput from '@zag-js/pin-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { uid } from 'uid';
 export function createPinInputContext(props) {
+    const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(pinInput.machine({
+        ids: {
+            label: field?.ids.label,
+            hiddenInput: field?.ids.control,
+        },
+        invalid: field?.invalid,
+        required: field?.required,
+        disabled: field?.disabled,
+        readOnly: field?.readOnly,
         ...props,
         id: props.id ?? uid(),
         dir: locale?.dir,

package/dist/rating-group/create-rating-group.svelte.js

@@ -1,12 +1,21 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as ratingGroup from '@zag-js/rating-group';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { uid } from 'uid';
 export function createRatingGroup(props) {
+    const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(ratingGroup.machine({
+        ids: {
+            label: field?.ids.label,
+            hiddenInput: field?.ids.control,
+        },
+        required: field?.required,
+        disabled: field?.disabled,
+        readOnly: field?.readOnly,
         ...props,
         id: props.id ?? uid(),
         dir: locale?.dir,

package/dist/segment-group/anatomy.d.ts

@@ -1,2 +1,2 @@
-export declare const anatomy: import("@zag-js/anatomy").Anatomy<"label" | "item" | "root" | "itemText" | "itemControl" | "indicator">;
-export declare const parts: Record<"label" | "item" | "root" | "itemText" | "itemControl" | "indicator", import("@zag-js/anatomy").AnatomyPart>;
+export declare const anatomy: import("@zag-js/anatomy").Anatomy<"label" | "root" | "item" | "itemText" | "itemControl" | "indicator">;
+export declare const parts: Record<"label" | "root" | "item" | "itemText" | "itemControl" | "indicator", import("@zag-js/anatomy").AnatomyPart>;

package/dist/select/create-select.svelte.js

@@ -1,4 +1,5 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as select from '@zag-js/select';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
@@ -10,9 +11,18 @@ export function createSelect(props) {
         itemToString: (item) => props.itemToString ? props.itemToString(item) : String(item),
         isItemDisabled: (item) => props.isItemDisabled ? props.isItemDisabled(item) : false,
     }));
+    const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(select.machine({
+        ids: {
+            label: field?.ids.label,
+            hiddenSelect: field?.ids.control,
+        },
+        invalid: field?.invalid,
+        disabled: field?.disabled,
+        readOnly: field?.readOnly,
+        required: field?.required,
         ...props,
         id: props.id ?? uid(),
         dir: locale?.dir,

package/dist/switch/create-switch.svelte.js

@@ -1,12 +1,22 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as switch$ from '@zag-js/switch';
 import { uid } from 'uid';
 export function createSwitch(props) {
+    const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(switch$.machine({
+        ids: {
+            label: field?.ids.label,
+            hiddenInput: field?.ids.control,
+        },
+        disabled: field?.disabled,
+        readOnly: field?.readOnly,
+        invalid: field?.invalid,
+        required: field?.required,
         ...props,
         id: props.id ?? uid(),
         dir: locale?.dir,

package/dist/tags-input/create-tags-input.svelte.js

@@ -1,12 +1,22 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tagsInput from '@zag-js/tags-input';
 import { uid } from 'uid';
 export function createTagsInput(props) {
+    const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(tagsInput.machine({
+        ids: {
+            label: field?.ids.label,
+            hiddenInput: field?.ids.control,
+        },
+        invalid: field?.invalid,
+        disabled: field?.disabled,
+        readOnly: field?.readOnly,
+        required: field?.required,
         ...props,
         id: props.id ?? uid(),
         dir: locale?.dir,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",