ui-ingredients 0.0.31 → 0.0.32

package/README.md

@@ -46,6 +46,7 @@ npm install ui-ingredients
 - 🟢 DatePicker
 - 🟢 Dialog
 - 🟢 Editable
+- 🟢 Field
 - 🟢 FileUpload
 - ⚪ FloatingPanel
 - 🟢 HoverCard

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.32",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",