ui-ingredients 0.0.29 → 0.0.30

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/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/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/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/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/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/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/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/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/editable/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 {editableContext} from './context.svelte.js';
   import {createEditable} from './create-editable.svelte.js';
@@ -52,7 +53,7 @@
     ])(props),
   );
 
-  let editable = createEditable(editableProps);
+  let editable = createEditable(reflect(() => editableProps));
 
   let mergedProps = $derived(mergeProps(otherProps, editable.getRootProps()));
 

package/dist/file-upload/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 {fileUploadContext} from './context.svelte.js';
   import {createFileUpload} from './create-file-upload.svelte.js';
@@ -44,7 +45,7 @@
     ])(props),
   );
 
-  let fileUpload = createFileUpload(fileUploadProps);
+  let fileUpload = createFileUpload(reflect(() => fileUploadProps));
 
   let mergedProps = $derived(mergeProps(otherProps, fileUpload.getRootProps()));
 

package/dist/number-input/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 {numberInputContext} from './context.svelte.js';
   import {createNumberInput} from './create-number-input.svelte.js';
@@ -51,7 +52,7 @@
     ])(props),
   );
 
-  let numberInput = createNumberInput(numberInputProps);
+  let numberInput = createNumberInput(reflect(() => numberInputProps));
 
   let mergedProps = $derived(
     mergeProps(otherProps, numberInput.getRootProps()),

package/dist/pagination/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 {paginationContext} from './context.svelte.js';
   import {createPagination} from './create-pagination.svelte.js';
@@ -36,7 +37,7 @@
     ])(props),
   );
 
-  let pagination = createPagination(paginationProps);
+  let pagination = createPagination(reflect(() => paginationProps));
 
   let mergedProps = $derived(mergeProps(otherProps, pagination.getRootProps()));
 

package/dist/pin-input/clear-trigger.svelte

@@ -11,8 +11,7 @@
   import {parts} from './anatomy.js';
   import {pinInputContext} from './context.svelte.js';
 
-  let {asChild, children, onclick, ...props}: PinInputClearTriggerProps =
-    $props();
+  let {asChild, children, ...props}: PinInputClearTriggerProps = $props();
 
   let pinInput = pinInputContext.get();
 

package/dist/pin-input/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 {pinInputContext} from './context.svelte.js';
   import {createPinInputContext} from './create-pin-input.svelte.js';
@@ -47,7 +48,7 @@
     ])(props),
   );
 
-  let pinInput = createPinInputContext(pinInputProps);
+  let pinInput = createPinInputContext(reflect(() => pinInputProps));
 
   let mergedProps = $derived(mergeProps(otherProps, pinInput.getRootProps()));
 

package/dist/presence/root.svelte

@@ -8,6 +8,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {createPresence} from './create-presence.svelte.js';
 
@@ -17,7 +18,7 @@
     createSplitProps<CreatePresenceProps>(['present', 'keepMounted'])(props),
   );
 
-  let presence = createPresence(presenceProps);
+  let presence = createPresence(reflect(() => presenceProps));
 
   let mergedProps = $derived(mergeProps(otherProps, presence.getRootProps()));
 </script>

package/dist/progress/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 {progressContext} from './context.svelte.js';
   import {createProgress} from './create-progress.svelte.js';
@@ -33,7 +34,7 @@
     ])(props),
   );
 
-  let progress = createProgress(progressProps);
+  let progress = createProgress(reflect(() => progressProps));
 
   let mergedProps = $derived(mergeProps(otherProps, progress.getRootProps()));
 

package/dist/qr-code/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 {qrCodeContext} from './context.svelte.js';
   import {createQRCode} from './create-qr-code.svelte.js';
@@ -27,7 +28,7 @@
     ),
   );
 
-  let qrCode = createQRCode(qrCodeProps);
+  let qrCode = createQRCode(reflect(() => qrCodeProps));
 
   let mergedProps = $derived(mergeProps(otherProps, qrCode.getRootProps()));
 

package/dist/radio-group/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 {radioGroupContext} from './context.svelte.js';
   import {createRadioGroup} from './create-radio-group.svelte.js';
@@ -35,7 +36,7 @@
     ])(props),
   );
 
-  let radioGroup = createRadioGroup(radioGroupProps);
+  let radioGroup = createRadioGroup(reflect(() => radioGroupProps));
 
   let mergedProps = $derived(mergeProps(otherProps, radioGroup.getRootProps()));
 

package/dist/rating-group/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 {ratingGroupContext} from './context.svelte.js';
   import {createRatingGroup} from './create-rating-group.svelte.js';
@@ -40,7 +41,7 @@
     ])(props),
   );
 
-  let ratingGroup = createRatingGroup(ratingGroupProps);
+  let ratingGroup = createRatingGroup(reflect(() => ratingGroupProps));
 
   let mergedProps = $derived(
     mergeProps(otherProps, ratingGroup.getRootProps()),

package/dist/segment-group/root.svelte

@@ -18,6 +18,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {parts} from './anatomy.js';
   import {segmentGroupContext} from './context.svelte.js';
@@ -39,7 +40,7 @@
     ])(props),
   );
 
-  let segmentGroup = createSegmentGroup(segmentGroupProps);
+  let segmentGroup = createSegmentGroup(reflect(() => segmentGroupProps));
 
   let mergedProps = $derived(
     mergeProps(otherProps, segmentGroup.getRootProps(), parts.root.attrs),

package/dist/select/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 {selectContext} from './context.svelte.js';
   import {createSelect} from './create-select.svelte.js';
@@ -54,7 +55,7 @@
     ])(props),
   );
 
-  let select = createSelect(selectProps);
+  let select = createSelect(reflect(() => selectProps));
 
   let mergedProps = $derived(mergeProps(otherProps, select.getRootProps()));
 

package/dist/signature-pad/current-segment-path.svelte

@@ -11,7 +11,7 @@
   import {mergeProps} from '../merge-props.js';
   import {signaturePadContext} from './context.svelte.js';
 
-  let {path, asChild, children, ...props}: SignaturePadCurrentSegmentPathProps =
+  let {asChild, children, ...props}: SignaturePadCurrentSegmentPathProps =
     $props();
 
   let signaturePad = signaturePadContext.get();

package/dist/signature-pad/root.svelte

@@ -18,6 +18,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {signaturePadContext} from './context.svelte.js';
   import {createSignaturePad} from './create-signature-pad.svelte.js';
@@ -39,7 +40,7 @@
     ])(props),
   );
 
-  let signaturePad = createSignaturePad(signaturePadProps);
+  let signaturePad = createSignaturePad(reflect(() => signaturePadProps));
 
   let mergedProps = $derived(
     mergeProps(otherProps, signaturePad.getRootProps()),

package/dist/slider/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 {sliderContext} from './context.svelte.js';
   import {createSlider} from './create-slider.svelte.js';
@@ -48,7 +49,7 @@
     ])(props),
   );
 
-  let slider = createSlider(sliderProps);
+  let slider = createSlider(reflect(() => sliderProps));
 
   let mergedProps = $derived(mergeProps(otherProps, slider.getRootProps()));
 

package/dist/splitter/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 {splitterContext} from './context.svelte.js';
   import {createSplitter} from './create-splitter.svelte.js';
@@ -32,7 +33,7 @@
     ])(props),
   );
 
-  let splitter = createSplitter(splitterProps);
+  let splitter = createSplitter(reflect(() => splitterProps));
 
   let mergedProps = $derived(mergeProps(otherProps, splitter.getRootProps()));
 

package/dist/steps/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 {stepsContext} from './context.svelte.js';
   import {createSteps} from './create-steps.svelte.js';
@@ -34,7 +35,7 @@
     ])(props),
   );
 
-  let steps = createSteps(stepsProps);
+  let steps = createSteps(reflect(() => stepsProps));
 
   let mergedProps = $derived(mergeProps(otherProps, steps.getRootProps()));
 

package/dist/switch/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 {switchContext} from './context.svelte.js';
   import {createSwitch} from './create-switch.svelte.js';
@@ -38,7 +39,7 @@
     ])(props),
   );
 
-  let switch$ = createSwitch(switchProps);
+  let switch$ = createSwitch(reflect(() => switchProps));
 
   let mergedProps = $derived(mergeProps(otherProps, switch$.getRootProps()));
 

package/dist/tabs/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 {tabsContext} from './context.svelte.js';
   import {createTabs} from './create-tabs.svelte.js';
@@ -36,7 +37,7 @@
     ])(props),
   );
 
-  let tabs = createTabs(tabsProps);
+  let tabs = createTabs(reflect(() => tabsProps));
 
   let mergedProps = $derived(mergeProps(otherProps, tabs.getRootProps()));
 

package/dist/tags-input/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 {tagsInputContext} from './context.svelte.js';
   import {createTagsInput} from './create-tags-input.svelte.js';
@@ -53,7 +54,7 @@
     ])(props),
   );
 
-  let tagsInput = createTagsInput(tagsInputProps);
+  let tagsInput = createTagsInput(reflect(() => tagsInputProps));
 
   let mergedProps = $derived(mergeProps(otherProps, tagsInput.getRootProps()));
 

package/dist/time-picker/input.svelte

@@ -10,7 +10,7 @@
   import {mergeProps} from '../merge-props.js';
   import {timePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerInputProps = $props();
+  let {asChild, ...props}: TimePickerInputProps = $props();
 
   let timePicker = timePickerContext.get();
 

package/dist/time-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 {timePickerContext} from './context.svelte.js';
   import {createTimePicker} from './create-time-picker.svelte.js';
@@ -45,7 +46,7 @@
     ])(props),
   );
 
-  let timePicker = createTimePicker(timePickerProps);
+  let timePicker = createTimePicker(reflect(() => timePickerProps));
 
   let mergedProps = $derived(mergeProps(otherProps, timePicker.getRootProps()));
 

package/dist/timer/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 {timerContext} from './context.svelte.js';
   import {createTimer} from './create-timer.svelte.js';
@@ -34,7 +35,7 @@
     ])(props),
   );
 
-  let timer = createTimer(timerProps);
+  let timer = createTimer(reflect(() => timerProps));
 
   let mergedProps = $derived(mergeProps(otherProps, timer.getRootProps()));
 

package/dist/toggle-group/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 {toggleGroupContext} from './context.svelte.js';
   import {createToggleGroup} from './create-toggle-group.svelte.js';
@@ -35,7 +36,7 @@
     ])(props),
   );
 
-  let toggleGroup = createToggleGroup(toggleGroupProps);
+  let toggleGroup = createToggleGroup(reflect(() => toggleGroupProps));
 
   let mergedProps = $derived(
     mergeProps(otherProps, toggleGroup.getRootProps()),

package/dist/tree-view/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 {treeViewContext} from './context.svelte.js';
   import {createTreeView} from './create-tree-view.svelte.js';
@@ -37,7 +38,7 @@
     ])(props),
   );
 
-  let treeView = createTreeView(treeViewProps);
+  let treeView = createTreeView(reflect(() => treeViewProps));
 
   let mergedProps = $derived(mergeProps(otherProps, treeView.getRootProps()));
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -145,7 +145,7 @@
     "postcss": "8.4.41",
     "publint": "0.2.10",
     "release-it": "17.6.0",
-    "svelte": "5.0.0-next.239",
+    "svelte": "5.0.0-next.241",
     "svelte-check": "3.8.6",
     "tailwindcss": "3.4.10",
     "typescript": "5.5.4",