@ark-ui/svelte 5.14.1 → 5.16.0

package/dist/components/accordion/accordion-root.svelte

@@ -3,10 +3,7 @@
   import type { UseAccordionProps } from './use-accordion.svelte'
 
   export interface AccordionRootBaseProps
-    extends UseAccordionProps,
-      RenderStrategyProps,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends UseAccordionProps, RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface AccordionRootProps extends Assign<HTMLProps<'div'>, AccordionRootBaseProps> {}
 </script>
 

package/dist/components/anatomy.d.ts

@@ -21,6 +21,7 @@ export { imageCropperAnatomy } from './image-cropper/image-cropper.anatomy';
 export { listboxAnatomy } from './listbox/listbox.anatomy';
 export { marqueeAnatomy } from './marquee/marquee.anatomy';
 export { menuAnatomy } from './menu/menu.anatomy';
+export { navigationMenuAnatomy } from './navigation-menu/navigation-menu.anatomy';
 export { numberInputAnatomy } from './number-input/number-input.anatomy';
 export { paginationAnatomy } from './pagination/pagination.anatomy';
 export { passwordInputAnatomy } from './password-input/password-input.anatomy';

package/dist/components/anatomy.js

@@ -21,6 +21,7 @@ export { imageCropperAnatomy } from './image-cropper/image-cropper.anatomy';
 export { listboxAnatomy } from './listbox/listbox.anatomy';
 export { marqueeAnatomy } from './marquee/marquee.anatomy';
 export { menuAnatomy } from './menu/menu.anatomy';
+export { navigationMenuAnatomy } from './navigation-menu/navigation-menu.anatomy';
 export { numberInputAnatomy } from './number-input/number-input.anatomy';
 export { paginationAnatomy } from './pagination/pagination.anatomy';
 export { passwordInputAnatomy } from './password-input/password-input.anatomy';

package/dist/components/angle-slider/angle-slider-root.svelte

@@ -3,9 +3,7 @@
   import type { UseAngleSliderProps } from './use-angle-slider.svelte'
 
   export interface AngleSliderRootBaseProps
-    extends Optional<UseAngleSliderProps, 'id'>,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends Optional<UseAngleSliderProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {}
   export interface AngleSliderRootProps extends Assign<HTMLProps<'div'>, AngleSliderRootBaseProps> {}
 </script>
 

package/dist/components/bottom-sheet/bottom-sheet-content.svelte

@@ -5,8 +5,10 @@
   export interface BottomSheetContentBaseProps extends PolymorphicProps<'div'>, ContentProps, RefAttribute {
     ref?: Element | null
   }
-  export interface BottomSheetContentProps
-    extends Assign<Omit<HTMLProps<'div'>, 'draggable'>, BottomSheetContentBaseProps> {}
+  export interface BottomSheetContentProps extends Assign<
+    Omit<HTMLProps<'div'>, 'draggable'>,
+    BottomSheetContentBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/bottom-sheet/bottom-sheet-grabber-indicator.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface BottomSheetGrabberIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
-  export interface BottomSheetGrabberIndicatorProps
-    extends Assign<HTMLProps<'div'>, BottomSheetGrabberIndicatorBaseProps> {}
+  export interface BottomSheetGrabberIndicatorProps extends Assign<
+    HTMLProps<'div'>,
+    BottomSheetGrabberIndicatorBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/carousel/carousel-autoplay-indicator.svelte

@@ -8,8 +8,10 @@
      */
     fallback?: Snippet
   }
-  export interface CarouselAutoplayIndicatorProps
-    extends Assign<HTMLProps<'span'>, CarouselAutoplayIndicatorBaseProps> {
+  export interface CarouselAutoplayIndicatorProps extends Assign<
+    HTMLProps<'span'>,
+    CarouselAutoplayIndicatorBaseProps
+  > {
     children?: Snippet
   }
 </script>

package/dist/components/checkbox/use-checkbox-group.svelte.js

@@ -1,10 +1,14 @@
 import { runIfFn } from '@zag-js/utils';
 import { untrack } from 'svelte';
+import { useFieldsetContext } from '../fieldset';
 export const useCheckboxGroup = (props = {}) => {
+    const fieldset = useFieldsetContext();
     const resolvedProps = $derived(runIfFn(props) || {});
     let valueState = $state(untrack(() => resolvedProps.defaultValue) ?? []);
     const value = $derived(resolvedProps.value !== undefined ? resolvedProps.value : valueState);
-    const interactive = $derived(!(resolvedProps.disabled || resolvedProps.readOnly));
+    const disabled = $derived(resolvedProps.disabled ?? fieldset?.()?.disabled);
+    const invalid = $derived(resolvedProps.invalid ?? fieldset?.()?.invalid);
+    const interactive = $derived(!(disabled || resolvedProps.readOnly));
     const setValue = (newValue) => {
         if (resolvedProps.value === undefined) {
             valueState = newValue;
@@ -38,18 +42,18 @@ export const useCheckboxGroup = (props = {}) => {
                 }
             },
             name: resolvedProps.name,
-            disabled: !!resolvedProps.disabled,
+            disabled: !!disabled,
             readOnly: !!resolvedProps.readOnly,
-            invalid: !!resolvedProps.invalid,
+            invalid: !!invalid,
         };
     };
     const api = $derived({
         isChecked,
         value,
         name: resolvedProps.name,
-        disabled: !!resolvedProps.disabled,
+        disabled: !!disabled,
         readOnly: !!resolvedProps.readOnly,
-        invalid: !!resolvedProps.invalid,
+        invalid: !!invalid,
         setValue,
         addValue,
         toggleValue,

package/dist/components/checkbox/use-checkbox.svelte.js

@@ -12,7 +12,7 @@ export const useCheckbox = (props = {}) => {
     const field = useFieldContext();
     const machineProps = $derived.by(() => {
         const resolvedProps = runIfFn(props);
-        const localProps = mergeProps(resolvedProps, checkboxGroup?.()?.getItemProps({ value: resolvedProps.value }) ?? {});
+        const localProps = mergeProps(checkboxGroup?.()?.getItemProps({ value: resolvedProps.value }) ?? {}, resolvedProps);
         return {
             ids: {
                 label: field?.()?.ids.label,

package/dist/components/color-picker/color-picker-area-background.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface ColorPickerAreaBackgroundBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
-  export interface ColorPickerAreaBackgroundProps
-    extends Assign<HTMLProps<'div'>, ColorPickerAreaBackgroundBaseProps> {}
+  export interface ColorPickerAreaBackgroundProps extends Assign<
+    HTMLProps<'div'>,
+    ColorPickerAreaBackgroundBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/color-picker/color-picker-channel-input.svelte

@@ -3,9 +3,7 @@
   import type { ChannelInputProps } from '@zag-js/color-picker'
 
   export interface ColorPickerChannelInputBaseProps
-    extends ChannelInputProps,
-      PolymorphicProps<'input'>,
-      RefAttribute {}
+    extends ChannelInputProps, PolymorphicProps<'input'>, RefAttribute {}
   export interface ColorPickerChannelInputProps extends Assign<HTMLProps<'input'>, ColorPickerChannelInputBaseProps> {}
 </script>
 

package/dist/components/color-picker/color-picker-channel-slider-label.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface ColorPickerChannelSliderLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
-  export interface ColorPickerChannelSliderLabelProps
-    extends Assign<HTMLProps<'label'>, ColorPickerChannelSliderLabelBaseProps> {}
+  export interface ColorPickerChannelSliderLabelProps extends Assign<
+    HTMLProps<'label'>,
+    ColorPickerChannelSliderLabelBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/color-picker/color-picker-channel-slider-thumb.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface ColorPickerChannelSliderThumbBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
-  export interface ColorPickerChannelSliderThumbProps
-    extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderThumbBaseProps> {}
+  export interface ColorPickerChannelSliderThumbProps extends Assign<
+    HTMLProps<'div'>,
+    ColorPickerChannelSliderThumbBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/color-picker/color-picker-channel-slider-track.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface ColorPickerChannelSliderTrackBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
-  export interface ColorPickerChannelSliderTrackProps
-    extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderTrackBaseProps> {}
+  export interface ColorPickerChannelSliderTrackProps extends Assign<
+    HTMLProps<'div'>,
+    ColorPickerChannelSliderTrackBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/color-picker/color-picker-channel-slider-value-text.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface ColorPickerChannelSliderValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
-  export interface ColorPickerChannelSliderValueTextProps
-    extends Assign<HTMLProps<'span'>, ColorPickerChannelSliderValueTextBaseProps> {}
+  export interface ColorPickerChannelSliderValueTextProps extends Assign<
+    HTMLProps<'span'>,
+    ColorPickerChannelSliderValueTextBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/color-picker/color-picker-eye-dropper-trigger.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface ColorPickerEyeDropperTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
-  export interface ColorPickerEyeDropperTriggerProps
-    extends Assign<HTMLProps<'button'>, ColorPickerEyeDropperTriggerBaseProps> {}
+  export interface ColorPickerEyeDropperTriggerProps extends Assign<
+    HTMLProps<'button'>,
+    ColorPickerEyeDropperTriggerBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/color-picker/color-picker-format-trigger.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface ColorPickerFormatTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
-  export interface ColorPickerFormatTriggerProps
-    extends Assign<HTMLProps<'button'>, ColorPickerFormatTriggerBaseProps> {}
+  export interface ColorPickerFormatTriggerProps extends Assign<
+    HTMLProps<'button'>,
+    ColorPickerFormatTriggerBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/color-picker/color-picker-root.svelte

@@ -4,10 +4,7 @@
   import type { UseColorPickerProps } from './use-color-picker.svelte'
 
   export interface ColorPickerRootBaseProps
-    extends UseColorPickerProps,
-      UsePresenceProps,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends UseColorPickerProps, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface ColorPickerRootProps extends Assign<HTMLProps<'div'>, ColorPickerRootBaseProps> {}
 </script>
 

package/dist/components/color-picker/color-picker-swatch-indicator.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface ColorPickerSwatchIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
-  export interface ColorPickerSwatchIndicatorProps
-    extends Assign<HTMLProps<'div'>, ColorPickerSwatchIndicatorBaseProps> {}
+  export interface ColorPickerSwatchIndicatorProps extends Assign<
+    HTMLProps<'div'>,
+    ColorPickerSwatchIndicatorBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/color-picker/color-picker-swatch-trigger.svelte

@@ -3,11 +3,11 @@
   import type { SwatchTriggerProps } from '@zag-js/color-picker'
 
   export interface ColorPickerSwatchTriggerBaseProps
-    extends SwatchTriggerProps,
-      PolymorphicProps<'button'>,
-      RefAttribute {}
-  export interface ColorPickerSwatchTriggerProps
-    extends Assign<HTMLProps<'button'>, ColorPickerSwatchTriggerBaseProps> {}
+    extends SwatchTriggerProps, PolymorphicProps<'button'>, RefAttribute {}
+  export interface ColorPickerSwatchTriggerProps extends Assign<
+    HTMLProps<'button'>,
+    ColorPickerSwatchTriggerBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/color-picker/color-picker-transparency-grid.svelte

@@ -2,11 +2,11 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface ColorPickerTransparencyGridBaseProps
-    extends TransparencyGridProps,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
-  export interface ColorPickerTransparencyGridProps
-    extends Assign<HTMLProps<'div'>, ColorPickerTransparencyGridBaseProps> {}
+    extends TransparencyGridProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface ColorPickerTransparencyGridProps extends Assign<
+    HTMLProps<'div'>,
+    ColorPickerTransparencyGridBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/combobox/combobox-root-provider.svelte

@@ -10,14 +10,13 @@
   }
 
   export interface ComboboxRootProviderBaseProps<T extends CollectionItem>
-    extends RootProviderProps<T>,
-      UsePresenceProps,
-      PolymorphicProps<'div'>,
-      RefAttribute {
+    extends RootProviderProps<T>, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {
     children?: Snippet
   }
-  export interface ComboboxRootProviderProps<T extends CollectionItem>
-    extends Assign<HTMLProps<'div'>, ComboboxRootProviderBaseProps<T>> {}
+  export interface ComboboxRootProviderProps<T extends CollectionItem> extends Assign<
+    HTMLProps<'div'>,
+    ComboboxRootProviderBaseProps<T>
+  > {}
 
   export type ComboboxRootProviderComponent<P = {}> = <T extends CollectionItem>(
     props: Assign<ComboboxRootProviderProps<T>, P>,

package/dist/components/combobox/combobox-root.svelte

@@ -6,13 +6,12 @@
   import type { UseComboboxProps } from './use-combobox.svelte'
 
   export interface ComboboxRootBaseProps<T extends CollectionItem>
-    extends UseComboboxProps<T>,
-      UsePresenceProps,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends UseComboboxProps<T>, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {}
 
-  export interface ComboboxRootProps<T extends CollectionItem>
-    extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {}
+  export interface ComboboxRootProps<T extends CollectionItem> extends Assign<
+    HTMLProps<'div'>,
+    ComboboxRootBaseProps<T>
+  > {}
 
   export type ComboboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<
     ComboboxRootProps<T>,

package/dist/components/date-picker/date-picker-preset-trigger.svelte

@@ -3,9 +3,7 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
   export interface DatePickerPresetTriggerBaseProps
-    extends PresetTriggerProps,
-      PolymorphicProps<'button'>,
-      RefAttribute {}
+    extends PresetTriggerProps, PolymorphicProps<'button'>, RefAttribute {}
   export interface DatePickerPresetTriggerProps extends Assign<HTMLProps<'button'>, DatePickerPresetTriggerBaseProps> {}
 </script>
 

package/dist/components/date-picker/date-picker-root-provider.svelte

@@ -8,9 +8,7 @@
   }
 
   export interface DatePickerRootProviderBaseProps
-    extends RootProviderProps,
-      UsePresenceProps,
-      PolymorphicProps<'div'> {}
+    extends RootProviderProps, UsePresenceProps, PolymorphicProps<'div'> {}
   export interface DatePickerRootProviderProps extends Assign<HTMLProps<'div'>, DatePickerRootProviderBaseProps> {}
 </script>
 

package/dist/components/date-picker/date-picker-root.svelte

@@ -4,10 +4,7 @@
   import type { UsePresenceProps } from '../presence/index.js'
 
   export interface DatePickerRootBaseProps
-    extends UseDatePickerProps,
-      UsePresenceProps,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends UseDatePickerProps, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface DatePickerRootProps extends Assign<HTMLProps<'div'>, DatePickerRootBaseProps> {}
 </script>
 
@@ -43,6 +40,8 @@
       'format',
       'id',
       'ids',
+      'inline',
+      'invalid',
       'isDateUnavailable',
       'locale',
       'max',
@@ -55,19 +54,20 @@
       'onOpenChange',
       'onValueChange',
       'onViewChange',
+      'onVisibleRangeChange',
       'open',
       'outsideDaySelectable',
       'parse',
       'placeholder',
       'positioning',
       'readOnly',
+      'required',
       'selectionMode',
       'startOfWeek',
       'timeZone',
       'translations',
       'value',
       'view',
-      'inline',
     ]),
   )
 

package/dist/components/date-picker/date-picker-table-cell-trigger.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
   export interface DatePickerTableCellTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
-  export interface DatePickerTableCellTriggerProps
-    extends Assign<HTMLProps<'button'>, DatePickerTableCellTriggerBaseProps> {}
+  export interface DatePickerTableCellTriggerProps extends Assign<
+    HTMLProps<'button'>,
+    DatePickerTableCellTriggerBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/date-picker/date-picker-table-cell.svelte

@@ -3,9 +3,7 @@
   import type { UseDatePickerTableCellPropsContext } from './use-date-picker-table-cell-props-context.js'
 
   export interface DatePickerTableCellBaseProps
-    extends ReturnType<UseDatePickerTableCellPropsContext>,
-      PolymorphicProps<'td'>,
-      RefAttribute {}
+    extends ReturnType<UseDatePickerTableCellPropsContext>, PolymorphicProps<'td'>, RefAttribute {}
   export interface DatePickerTableCellProps extends Assign<HTMLProps<'td'>, DatePickerTableCellBaseProps> {}
 </script>
 

package/dist/components/date-picker/date-picker-value-text.svelte

@@ -0,0 +1,69 @@
+<script module lang="ts">
+  import type { DateValue } from '@zag-js/date-picker'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
+
+  export interface DatePickerValueTextRenderProps {
+    value: DateValue
+    index: number
+    valueAsString: string
+    remove: () => void
+  }
+
+  export interface DatePickerValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
+    /**
+     * Text to display when no date is selected.
+     */
+    placeholder?: string | undefined
+    /**
+     * The separator to use between multiple date values when using default rendering.
+     * @default ", "
+     */
+    separator?: string | undefined
+  }
+
+  export interface DatePickerValueTextProps extends Assign<HTMLProps<'span'>, DatePickerValueTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import { Ark } from '../factory/index.js'
+  import { datePickerAnatomy } from './date-picker.anatomy.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+
+  let {
+    ref = $bindable(null),
+    placeholder,
+    separator = ', ',
+    children,
+    ...props
+  }: DatePickerValueTextProps & { children?: Snippet<[DatePickerValueTextRenderProps]> } = $props()
+
+  const datePicker = useDatePickerContext()
+
+  const hasValue = $derived(datePicker().value.length > 0)
+
+  const displayValue = $derived(hasValue ? datePicker().valueAsString.join(separator) : placeholder)
+
+  const getRenderProps = (value: DateValue, index: number): DatePickerValueTextRenderProps => ({
+    value,
+    index,
+    valueAsString: datePicker().valueAsString[index],
+    remove: () => {
+      datePicker().setValue(datePicker().value.filter((_, i) => i !== index))
+    },
+  })
+</script>
+
+{#if children}
+  {#if hasValue}
+    {#each datePicker().value as value, index (index)}
+      {@render children(getRenderProps(value, index))}
+    {/each}
+  {:else}
+    {placeholder}
+  {/if}
+{:else}
+  <Ark as="span" bind:ref {...datePickerAnatomy.build().valueText.attrs} {...props}>
+    {displayValue}
+  </Ark>
+{/if}

package/dist/components/date-picker/date-picker-value-text.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { DateValue } from '@zag-js/date-picker';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js';
+export interface DatePickerValueTextRenderProps {
+    value: DateValue;
+    index: number;
+    valueAsString: string;
+    remove: () => void;
+}
+export interface DatePickerValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
+    /**
+     * Text to display when no date is selected.
+     */
+    placeholder?: string | undefined;
+    /**
+     * The separator to use between multiple date values when using default rendering.
+     * @default ", "
+     */
+    separator?: string | undefined;
+}
+export interface DatePickerValueTextProps extends Assign<HTMLProps<'span'>, DatePickerValueTextBaseProps> {
+}
+import type { Snippet } from 'svelte';
+type $$ComponentProps = DatePickerValueTextProps & {
+    children?: Snippet<[DatePickerValueTextRenderProps]>;
+};
+declare const DatePickerValueText: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DatePickerValueText = ReturnType<typeof DatePickerValueText>;
+export default DatePickerValueText;

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

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

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

@@ -1,2 +1,2 @@
 import { anatomy } from '@zag-js/date-picker';
-export const datePickerAnatomy = anatomy.extendWith('view');
+export const datePickerAnatomy = anatomy.extendWith('view', 'valueText');

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

@@ -10,6 +10,7 @@ export { default as Positioner, type DatePickerPositionerBaseProps as Positioner
 export { default as PresetTrigger, type DatePickerPresetTriggerBaseProps as PresetTriggerBaseProps, type DatePickerPresetTriggerProps as PresetTriggerProps, } from './date-picker-preset-trigger.svelte';
 export { default as PrevTrigger, type DatePickerPrevTriggerBaseProps as PrevTriggerBaseProps, type DatePickerPrevTriggerProps as PrevTriggerProps, } from './date-picker-prev-trigger.svelte';
 export { default as RangeText, type DatePickerRangeTextBaseProps as RangeTextBaseProps, type DatePickerRangeTextProps as RangeTextProps, } from './date-picker-range-text.svelte';
+export { default as ValueText, type DatePickerValueTextBaseProps as ValueTextBaseProps, type DatePickerValueTextProps as ValueTextProps, type DatePickerValueTextRenderProps as ValueTextRenderProps, } from './date-picker-value-text.svelte';
 export { default as Root, type DatePickerRootBaseProps as RootBaseProps, type DatePickerRootProps as RootProps, } from './date-picker-root.svelte';
 export { default as RootProvider, type DatePickerRootProviderBaseProps as RootProviderBaseProps, type DatePickerRootProviderProps as RootProviderProps, } from './date-picker-root-provider.svelte';
 export { default as Table, type DatePickerTableBaseProps as TableBaseProps, type DatePickerTableProps as TableProps, } from './date-picker-table.svelte';

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

@@ -10,6 +10,7 @@ export { default as Positioner, } from './date-picker-positioner.svelte';
 export { default as PresetTrigger, } from './date-picker-preset-trigger.svelte';
 export { default as PrevTrigger, } from './date-picker-prev-trigger.svelte';
 export { default as RangeText, } from './date-picker-range-text.svelte';
+export { default as ValueText, } from './date-picker-value-text.svelte';
 export { default as Root, } from './date-picker-root.svelte';
 export { default as RootProvider, } from './date-picker-root-provider.svelte';
 export { default as Table, } from './date-picker-table.svelte';

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

@@ -12,6 +12,7 @@ export { default as DatePickerPositioner, type DatePickerPositionerBaseProps, ty
 export { default as DatePickerPresetTrigger, type DatePickerPresetTriggerBaseProps, type DatePickerPresetTriggerProps, } from './date-picker-preset-trigger.svelte';
 export { default as DatePickerPrevTrigger, type DatePickerPrevTriggerBaseProps, type DatePickerPrevTriggerProps, } from './date-picker-prev-trigger.svelte';
 export { default as DatePickerRangeText, type DatePickerRangeTextBaseProps, type DatePickerRangeTextProps, } from './date-picker-range-text.svelte';
+export { default as DatePickerValueText, type DatePickerValueTextBaseProps, type DatePickerValueTextProps, type DatePickerValueTextRenderProps, } from './date-picker-value-text.svelte';
 export { default as DatePickerRoot, type DatePickerRootBaseProps, type DatePickerRootProps, } from './date-picker-root.svelte';
 export { default as DatePickerRootProvider, type DatePickerRootProviderBaseProps, type DatePickerRootProviderProps, } from './date-picker-root-provider.svelte';
 export { default as DatePickerTable, type DatePickerTableBaseProps, type DatePickerTableProps, } from './date-picker-table.svelte';

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

@@ -11,6 +11,7 @@ export { default as DatePickerPositioner, } from './date-picker-positioner.svelt
 export { default as DatePickerPresetTrigger, } from './date-picker-preset-trigger.svelte';
 export { default as DatePickerPrevTrigger, } from './date-picker-prev-trigger.svelte';
 export { default as DatePickerRangeText, } from './date-picker-range-text.svelte';
+export { default as DatePickerValueText, } from './date-picker-value-text.svelte';
 export { default as DatePickerRoot, } from './date-picker-root.svelte';
 export { default as DatePickerRootProvider, } from './date-picker-root-provider.svelte';
 export { default as DatePickerTable, } from './date-picker-table.svelte';

package/dist/components/factory/factory.svelte

@@ -28,6 +28,8 @@
   <Svg {as} {...rest} bind:ref />
 {:else if isVoidHTMLTag(as)}
   <svelte:element this={as} {...rest} bind:this={ref} />
+{:else if as === 'textarea'}
+  <textarea {...rest} bind:this={ref}></textarea>
 {:else}
   <svelte:element this={as} {...rest} bind:this={ref}>
     {@render children?.()}

package/dist/components/fieldset/fieldset-error-text.svelte

@@ -15,4 +15,6 @@
   const mergedProps = $derived(mergeProps(fieldset?.().getErrorTextProps(), props))
 </script>
 
-<Ark as="span" bind:ref {...mergedProps} />
+{#if fieldset?.().invalid}
+  <Ark as="span" bind:ref {...mergedProps} />
+{/if}

package/dist/components/fieldset/use-fieldset.svelte.d.ts

@@ -17,6 +17,11 @@ export interface UseFieldsetProps {
 export type UseFieldsetReturn = ReturnType<typeof useFieldset>;
 export declare const useFieldset: (inProps?: MaybeFunction<UseFieldsetProps>) => () => {
     setRootRef: (el: Element | null) => void;
+    ids: {
+        legend: string;
+        errorText: string;
+        helperText: string;
+    };
     disabled: boolean;
     invalid: boolean;
     getRootProps: () => HTMLProps<"fieldset">;