ui-ingredients 0.0.29 → 0.0.31

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/accordion/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {accordionContext} from './context.svelte.js';
   import {createAccordion} from './create-accordion.svelte.js';
@@ -35,7 +36,8 @@
     ])(props),
   );
 
-  let accordion = createAccordion(accordionProps);
+  let accordion = createAccordion(reflect(() => accordionProps));
+
   let mergedProps = $derived(mergeProps(otherProps, accordion.getRootProps()));
 
   accordionContext.set(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/avatar/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {avatarContext} from './context.svelte.js';
   import {createAvatar} from './create-avatar.svelte.js';
@@ -25,7 +26,7 @@
     createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
   );
 
-  let avatar = createAvatar(avatarProps);
+  let avatar = createAvatar(reflect(() => avatarProps));
 
   let mergedProps = $derived(mergeProps(otherProps, avatar.getRootProps()));
 

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/carousel/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {carouselContext} from './context.svelte.js';
   import {createCarousel} from './create-carousel.svelte.js';
@@ -35,7 +36,7 @@
     ])(props),
   );
 
-  let carousel = createCarousel(carouselProps);
+  let carousel = createCarousel(reflect(() => carouselProps));
 
   let mergedProps = $derived(mergeProps(otherProps, carousel.getRootProps()));
 

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,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 checkbox from '@zag-js/checkbox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createCheckbox(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(checkbox.machine({
         ...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/checkbox/root.svelte

@@ -19,6 +19,8 @@
   import {checkboxContext} from './context.svelte.js';
   import {createCheckbox} from './create-checkbox.svelte.js';
 
+  import {reflect} from '@zag-js/svelte';
+
   let {asChild, children, ...props}: CheckboxProps = $props();
 
   let [checkboxProps, otherProps] = $derived(
@@ -37,7 +39,7 @@
     ])(props),
   );
 
-  let checkbox = createCheckbox(checkboxProps);
+  let checkbox = createCheckbox(reflect(() => checkboxProps));
 
   let mergedProps = $derived(mergeProps(otherProps, checkbox.getRootProps()));
 

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/clipboard/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {clipboardContext} from './context.svelte.js';
   import {createClipboard} from './create-clipboard.svelte.js';
@@ -31,7 +32,7 @@
     ])(props),
   );
 
-  let clipboard = createClipboard(clipboardProps);
+  let clipboard = createClipboard(reflect(() => clipboardProps));
 
   let mergedProps = $derived(mergeProps(otherProps, clipboard.getRootProps()));
 

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/collapsible/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {collapsibleContext} from './context.svelte.js';
   import {createCollapsible} from './create-collapsible.svelte.js';
@@ -33,7 +34,7 @@
     ])(props),
   );
 
-  let collapsible = createCollapsible(collapsibleProps);
+  let collapsible = createCollapsible(reflect(() => collapsibleProps));
 
   let mergedProps = $derived(
     mergeProps(otherProps, collapsible.getRootProps()),

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,8 @@
-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 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,
@@ -14,7 +14,7 @@ export function createCombobox(props) {
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(combobox.machine({
         ...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/combobox/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts" generics="T">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {comboboxContext} from './context.svelte.js';
   import {createCombobox} from './create-combobox.svelte.js';
@@ -67,7 +68,7 @@
     ])(props),
   );
 
-  let combobox = createCombobox(comboboxProps);
+  let combobox = createCombobox(reflect(() => comboboxProps));
 
   let mergedProps = $derived(mergeProps(otherProps, combobox.getRootProps()));
 

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" | "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>;

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/input.svelte

@@ -12,7 +12,7 @@
   import {mergeProps} from '../merge-props.js';
   import {datePickerContext} from './context.svelte.js';
 
-  let {index, asChild, children, ...props}: DatePickerInputProps = $props();
+  let {index, asChild, ...props}: DatePickerInputProps = $props();
 
   let datePicker = datePickerContext.get();
 

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/date-picker/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {datePickerContext} from './context.svelte.js';
   import {createDatePicker} from './create-date-picker.svelte.js';
@@ -54,7 +55,7 @@
     ])(props),
   );
 
-  let datePicker = createDatePicker(datePickerProps);
+  let datePicker = createDatePicker(reflect(() => datePickerProps));
 
   let mergedProps = $derived(mergeProps(otherProps, datePicker.getRootProps()));
 

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';