ui-ingredients 0.0.30 → 0.0.32

package/README.md

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

package/dist/accordion/accordion.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/accordion';
 export { default as ItemContent } from './item-content.svelte';
 export { default as ItemIndicator } from './item-indicator.svelte';
 export { default as ItemTrigger } from './item-trigger.svelte';

package/dist/accordion/accordion.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/accordion';
 export { default as ItemContent } from './item-content.svelte';
 export { default as ItemIndicator } from './item-indicator.svelte';
 export { default as ItemTrigger } from './item-trigger.svelte';

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

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as accordion from '@zag-js/accordion';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createAccordion(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(accordion.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));

package/dist/accordion/index.d.ts

@@ -4,3 +4,4 @@ export type { AccordionIndicatorProps } from './item-indicator.svelte';
 export type { AccordionItemTriggerProps } from './item-trigger.svelte';
 export type { AccordionItemProps } from './item.svelte';
 export type { AccordionProps } from './root.svelte';
+export { anatomy as accordionAnatomy } from '@zag-js/accordion';

package/dist/accordion/index.js

@@ -1 +1,2 @@
 export * as Accordion from './accordion.js';
+export { anatomy as accordionAnatomy } from '@zag-js/accordion';

package/dist/avatar/avatar.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/avatar';
 export { default as Fallback } from './fallback.svelte';
 export { default as Image } from './image.svelte';
 export { default as Root } from './root.svelte';

package/dist/avatar/avatar.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/avatar';
 export { default as Fallback } from './fallback.svelte';
 export { default as Image } from './image.svelte';
 export { default as Root } from './root.svelte';

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

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as avatar from '@zag-js/avatar';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createAvatar(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(avatar.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));

package/dist/avatar/index.d.ts

@@ -2,3 +2,4 @@ export * as Avatar from './avatar.js';
 export type { AvatarFallbackProps } from './fallback.svelte';
 export type { AvatarImageProps } from './image.svelte';
 export type { AvatarProps } from './root.svelte';
+export { anatomy as AvatarAnatomy } from '@zag-js/avatar';

package/dist/avatar/index.js

@@ -1 +1,2 @@
 export * as Avatar from './avatar.js';
+export { anatomy as AvatarAnatomy } from '@zag-js/avatar';

package/dist/carousel/carousel.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/carousel';
 export { default as IndicatorGroup } from './indicator-group.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as ItemGroup } from './item-group.svelte';

package/dist/carousel/carousel.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/carousel';
 export { default as IndicatorGroup } from './indicator-group.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as ItemGroup } from './item-group.svelte';

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

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as carousel from '@zag-js/carousel';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createCarousel(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(carousel.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));

package/dist/carousel/index.d.ts

@@ -7,3 +7,4 @@ export type { CarouselNextTriggerProps } from './next-trigger.svelte';
 export type { CarouselPrevTriggerProps } from './prev-trigger.svelte';
 export type { CarouselProps } from './root.svelte';
 export type { CarouselViewportProps } from './viewport.svelte';
+export { anatomy as carouselAnatomy } from '@zag-js/carousel';

package/dist/carousel/index.js

@@ -1 +1,2 @@
 export * as Carousel from './carousel.js';
+export { anatomy as carouselAnatomy } from '@zag-js/carousel';

package/dist/checkbox/checkbox.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/checkbox';
 export { default as Control } from './control.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Indicator } from './indicator.svelte';

package/dist/checkbox/checkbox.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/checkbox';
 export { default as Control } from './control.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Indicator } from './indicator.svelte';

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

@@ -1,14 +1,24 @@
-import { createUniqueId } from '../create-unique-id.js';
 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 ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));

package/dist/checkbox/index.d.ts

@@ -4,3 +4,4 @@ export type { CheckboxHiddenInputProps } from './hidden-input.svelte';
 export type { CheckboxIndicatorProps } from './indicator.svelte';
 export type { CheckboxLabelProps } from './label.svelte';
 export type { CheckboxProps } from './root.svelte';
+export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';

package/dist/checkbox/index.js

@@ -1 +1,2 @@
 export * as Checkbox from './checkbox.js';
+export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';

package/dist/clipboard/clipboard.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/clipboard';
 export { default as Control } from './control.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as Input } from './input.svelte';

package/dist/clipboard/clipboard.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/clipboard';
 export { default as Control } from './control.svelte';
 export { default as Indicator } from './indicator.svelte';
 export { default as Input } from './input.svelte';

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

@@ -1,12 +1,12 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import * as clipboard from '@zag-js/clipboard';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createClipboard(props) {
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(clipboard.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         getRootNode: environment?.getRootNode,
     }));
     const api = $derived(reflect(() => clipboard.connect(state, send, normalizeProps)));

package/dist/clipboard/index.d.ts

@@ -5,3 +5,4 @@ export type { ClipboardInputProps } from './input.svelte';
 export type { ClipboardLabelProps } from './label.svelte';
 export type { ClipboardProps } from './root.svelte';
 export type { ClipboardTriggerProps } from './trigger.svelte';
+export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';

package/dist/clipboard/index.js

@@ -1 +1,2 @@
 export * as Clipboard from './clipboard.js';
+export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';

package/dist/collapsible/collapsible.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/collapsible';
 export { default as Content } from './content.svelte';
 export { default as Root } from './root.svelte';
 export { default as Trigger } from './trigger.svelte';

package/dist/collapsible/collapsible.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/collapsible';
 export { default as Content } from './content.svelte';
 export { default as Root } from './root.svelte';
 export { default as Trigger } from './trigger.svelte';

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

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as collapsible from '@zag-js/collapsible';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createCollapsible(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(collapsible.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,

package/dist/collapsible/index.d.ts

@@ -2,3 +2,4 @@ export * as Collapsible from './collapsible.js';
 export type { CollapsibleContentProps } from './content.svelte';
 export type { CollapsibleProps } from './root.svelte';
 export type { CollapsibleTriggerProps } from './trigger.svelte';
+export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';

package/dist/collapsible/index.js

@@ -1 +1,2 @@
 export * as Collapsible from './collapsible.js';
+export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';

package/dist/color-picker/color-picker.d.ts

@@ -1,4 +1,4 @@
-export { anatomy, parse } from '@zag-js/color-picker';
+export { parse } from '@zag-js/color-picker';
 export { default as AreaBackground } from './area-background.svelte';
 export { default as AreaThumb } from './area-thumb.svelte';
 export { default as Area } from './area.svelte';

package/dist/color-picker/color-picker.js

@@ -1,4 +1,4 @@
-export { anatomy, parse } from '@zag-js/color-picker';
+export { parse } from '@zag-js/color-picker';
 export { default as AreaBackground } from './area-background.svelte';
 export { default as AreaThumb } from './area-thumb.svelte';
 export { default as Area } from './area.svelte';

package/dist/color-picker/create-color-picker.svelte.js

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as colorPicker from '@zag-js/color-picker';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createColorPicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(colorPicker.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         value: props.value ? colorPicker.parse(props.value) : undefined,

package/dist/color-picker/index.d.ts

@@ -24,3 +24,4 @@ export type { ColorPickerSwatchProps } from './swatch.svelte';
 export type { ColorPickerTransparencyGridProps } from './transparency-grid.svelte';
 export type { ColorPickerTriggerProps } from './trigger.svelte';
 export type { ColorPickerValueTextProps } from './value-text.svelte';
+export { anatomy as colorPickerAnatomy } from '@zag-js/color-picker';

package/dist/color-picker/index.js

@@ -1 +1,2 @@
 export * as ColorPicker from './color-picker.js';
+export { anatomy as colorPickerAnatomy } from '@zag-js/color-picker';

package/dist/combobox/combobox.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/combobox';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';

package/dist/combobox/combobox.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/combobox';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';

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

@@ -1,8 +1,9 @@
-import { createUniqueId } from '../create-unique-id.js';
 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';
+import { uid } from 'uid';
 export function createCombobox(props) {
     const collection = $derived(combobox.collection({
         items: props.items,
@@ -10,11 +11,20 @@ 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 ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,

package/dist/combobox/index.d.ts

@@ -13,3 +13,4 @@ export type { ComboboxListProps } from './list.svelte';
 export type { ComboboxPositionerProps } from './positioner.svelte';
 export type { ComboboxProps } from './root.svelte';
 export type { ComboboxTriggerProps } from './trigger.svelte';
+export { anatomy as comboboxAnatomy } from '@zag-js/combobox';

package/dist/combobox/index.js

@@ -1 +1,2 @@
 export * as Combobox from './combobox.js';
+export { anatomy as comboboxAnatomy } from '@zag-js/combobox';

package/dist/combobox/item-group.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <script lang="ts">
-  import {createUniqueId} from '../create-unique-id.js';
   import {mergeProps} from '../merge-props.js';
+  import {uid} from 'uid';
   import {
     comboboxContext,
     comboboxItemGroupPropsContext,
@@ -18,10 +18,10 @@
 
   let combobox = comboboxContext.get();
 
-  let uid = createUniqueId();
+  let id_ = uid();
 
   let comboboxItemGroupProps = $derived({
-    id: id ?? uid,
+    id: id ?? id_,
   });
 
   let mergedProps = $derived(

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

@@ -0,0 +1,2 @@
+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/date-picker/create-date-picker.svelte.js

@@ -1,15 +1,15 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as datePicker from '@zag-js/date-picker';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 import { parts } from './anatomy.js';
 export function createDatePicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(datePicker.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         min: props.min ? datePicker.parse(props.min) : undefined,
         max: props.max ? datePicker.parse(props.max) : undefined,

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

@@ -1,5 +1,4 @@
 export { parse } from '@zag-js/date-picker';
-export { anatomy } from './anatomy.js';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';

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

@@ -1,5 +1,4 @@
 export { parse } from '@zag-js/date-picker';
-export { anatomy } from './anatomy.js';
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';

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

@@ -27,3 +27,4 @@ export type { DatePickerViewProps } from './view.svelte';
 export type { DatePickerYearSelectProps } from './year-select.svelte';
 export type { DatePickerYearTableCellTriggerProps } from './year-table-cell-trigger.svelte';
 export type { DatePickerYearTableCellProps } from './year-table-cell.svelte';
+export { anatomy as datePickerAnatomy } from './anatomy.js';

package/dist/date-picker/index.js

@@ -1 +1,2 @@
 export * as DatePicker from './date-picker.js';
+export { anatomy as datePickerAnatomy } from './anatomy.js';

package/dist/date-picker/range-text.svelte

@@ -24,7 +24,7 @@
     {#if children}
       {@render children()}
     {:else}
-      {datePicker.visibleRangeText.formatted}
+      {datePicker.visibleRangeText.start}
     {/if}
   </span>
 {/if}

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

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as dialog from '@zag-js/dialog';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createDialog(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(dialog.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,

package/dist/dialog/dialog.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/dialog';
 export { default as Backdrop } from './backdrop.svelte';
 export { default as CloseTrigger } from './close-trigger.svelte';
 export { default as Content } from './content.svelte';

package/dist/dialog/dialog.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/dialog';
 export { default as Backdrop } from './backdrop.svelte';
 export { default as CloseTrigger } from './close-trigger.svelte';
 export { default as Content } from './content.svelte';

package/dist/dialog/index.d.ts

@@ -7,3 +7,4 @@ export type { DialogPositionerProps } from './positioner.svelte';
 export type { DialogProps } from './root.svelte';
 export type { DialogTitleProps } from './title.svelte';
 export type { DialogTriggerProps } from './trigger.svelte';
+export { anatomy as dialogAnatomy } from '@zag-js/dialog';

package/dist/dialog/index.js

@@ -1 +1,2 @@
 export * as Dialog from './dialog.js';
+export { anatomy as dialogAnatomy } from '@zag-js/dialog';

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

@@ -1,14 +1,24 @@
-import { createUniqueId } from '../create-unique-id.js';
 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 ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         edit: props.defaultEdit ?? props.edit,
         getRootNode: environment?.getRootNode,

package/dist/editable/editable.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/editable';
 export { default as Area } from './area.svelte';
 export { default as CancelTrigger } from './cancel-trigger.svelte';
 export { default as Control } from './control.svelte';

package/dist/editable/editable.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/editable';
 export { default as Area } from './area.svelte';
 export { default as CancelTrigger } from './cancel-trigger.svelte';
 export { default as Control } from './control.svelte';

package/dist/editable/index.d.ts

@@ -8,3 +8,4 @@ export type { EditableLabelProps } from './label.svelte';
 export type { EditablePreviewProps } from './preview.svelte';
 export type { EditableProps } from './root.svelte';
 export type { EditableSubmitTriggerProps } from './submit-trigger.svelte';
+export { anatomy as editableAnatomy } from '@zag-js/editable';

package/dist/editable/index.js

@@ -1 +1,2 @@
 export * as Editable from './editable.js';
+export { anatomy as editableAnatomy } from '@zag-js/editable';

package/dist/field/anatomy.d.ts

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

package/dist/field/anatomy.js

@@ -0,0 +1,3 @@
+import { createAnatomy } from '@zag-js/anatomy';
+export const anatomy = createAnatomy('field').parts('root', 'label', 'input', 'select', 'textarea', 'errorText', 'helperText');
+export const parts = anatomy.build();

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

@@ -0,0 +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

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

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

@@ -0,0 +1,39 @@
+import type { HTMLProps } from '../types.js';
+interface ElementIds {
+    root?: string;
+    label?: string;
+    control?: string;
+    errorText?: string;
+    helperText?: string;
+}
+export interface CreateFieldProps {
+    id?: string | null;
+    ids?: ElementIds;
+    invalid?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+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">;
+    getHelperTextProps: () => HTMLProps<"div">;
+    getInputProps: () => HTMLProps<"input">;
+    getSelectProps: () => HTMLProps<"select">;
+    getTextareaProps: () => HTMLProps<"textarea">;
+};
+export {};