ui-ingredients 0.22.0 → 0.22.1

package/dist/accordion/accordion-item.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getAccordionContext,
     setAccordionItemPropsContext,

package/dist/accordion/accordion-root.svelte

@@ -15,10 +15,10 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {setAccordionContext} from './accordion-context.svelte.js';
   import {createAccordion} from './create-accordion.svelte.js';
 

package/dist/alert-dialog/alert-dialog-root.svelte

@@ -14,13 +14,13 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {
     setPresenceContext,
     setPresenceStrategyPropsContext,
   } from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {setAlertDialogContext} from './alert-dialog-context.svelte.js';
   import {createAlertDialog} from './create-alert-dialog.svelte.js';
 

package/dist/angle-slider/angle-slider-marker.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getAngleSliderContext} from './angle-slider-context.svelte.js';
 
   let {

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

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {setAngleSliderContext} from './angle-slider-context.svelte.js';
   import {createAngleSlider} from './create-angle-slider.svelte.js';
 

package/dist/avatar/avatar-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {setAvatarContext} from './avatar-context.svelte.js';
   import {createAvatar} from './create-avatar.svelte.js';
 

package/dist/breadcrumbs/breadcrumbs-link.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getBreadcrumbsContext} from './breadcrumbs-context.svelte.js';
 
   let {ref, asChild, children, ...props}: BreadcrumbsLinkProps = $props();

package/dist/carousel/carousel-indicator.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getCarouselContext} from './carousel-context.svelte.js';
 
   let {

package/dist/carousel/carousel-item.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getCarouselContext} from './carousel-context.svelte.js';
 
   let {

package/dist/carousel/carousel-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {setCarouselContext} from './carousel-context.svelte.js';
   import {createCarousel} from './create-carousel.svelte.js';
 

package/dist/checkbox/checkbox-root.svelte

@@ -13,8 +13,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {setCheckboxContext} from './checkbox-context.svelte.js';
   import {createCheckbox} from './create-checkbox.svelte.js';
 

package/dist/clipboard/clipboard-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {setClipboardContext} from './clipboard-context.svelte.js';
   import {createClipboard} from './create-clipboard.svelte.js';
 

package/dist/collapsible/collapsible-root.svelte

@@ -18,10 +18,10 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {setCollapsibleContext} from './collapsible-context.svelte.js';
   import {createCollapsible} from './create-collapsible.svelte.js';
 

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

@@ -15,11 +15,11 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {setColorPickerContext} from './color-picker-context.svelte.js';
   import {createColorPicker} from './create-color-picker.svelte.js';
 

package/dist/combobox/combobox-item.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getComboboxContext,
     setComboboxItemPropsContext,

package/dist/combobox/combobox-root.svelte

@@ -15,11 +15,11 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {setComboboxContext} from './combobox-context.svelte.js';
   import {createCombobox} from './create-combobox.svelte.js';
 

package/dist/combobox/combobox-trigger.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import type {TriggerProps} from '@zag-js/combobox';
-  import {createSplitProps} from '@zag-js/utils';
   import {getComboboxContext} from './combobox-context.svelte.js';
 
   let {

package/dist/create-split-props.d.ts

@@ -0,0 +1,19 @@
+import type { GenericObject } from './types.js';
+/**
+ * @example
+ * ```ts
+ * const props = {
+ *  a: 1,
+ *  b: 2,
+ *  c: 3,
+ *  d: 4,
+ *  e: 5
+ * };
+ *
+ * const [i, j] = splitProps(['a', 'b'])(props);
+ *
+ * console.log(i); // {a: 1, b: 2}
+ * console.log(j); // {c: 3, d: 4, e: 5}
+ * ```
+ */
+export declare function createSplitProps<T extends GenericObject>(keys: (keyof T)[]): <Props extends T>(props: Props) => [T, Omit<Props, keyof T>];

package/dist/create-split-props.js

@@ -0,0 +1,37 @@
+/* Credits to https://github.com/chakra-ui/zag/blob/main/packages/utilities/core/src/split-props.ts */
+function splitProps(props, keys) {
+    const rest = {};
+    const result = {};
+    const keySet = new Set(keys);
+    for (const key in props) {
+        if (keySet.has(key)) {
+            result[key] = props[key];
+        }
+        else {
+            rest[key] = props[key];
+        }
+    }
+    return [result, rest];
+}
+/**
+ * @example
+ * ```ts
+ * const props = {
+ *  a: 1,
+ *  b: 2,
+ *  c: 3,
+ *  d: 4,
+ *  e: 5
+ * };
+ *
+ * const [i, j] = splitProps(['a', 'b'])(props);
+ *
+ * console.log(i); // {a: 1, b: 2}
+ * console.log(j); // {c: 3, d: 4, e: 5}
+ * ```
+ */
+export function createSplitProps(keys) {
+    return function split(props) {
+        return splitProps(props, keys);
+    };
+}

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

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getDatePickerContext,
     setDatePickerDayTableCellPropsContext,

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

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getDatePickerContext,
     setDatePickerTableCellPropsContext,

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

@@ -15,11 +15,11 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createDatePicker} from './create-date-picker.svelte.js';
   import {setDatePickerContext} from './date-picker-context.svelte.js';
 

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

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getDatePickerContext,
     setDatePickerTableCellPropsContext,

package/dist/dialog/dialog-root.svelte

@@ -14,13 +14,13 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {
     setPresenceContext,
     setPresenceStrategyPropsContext,
   } from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createDialog} from './create-dialog.svelte.js';
   import {setDialogContext} from './dialog-context.svelte.js';
 

package/dist/drawer/drawer-root.svelte

@@ -14,13 +14,13 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {
     setPresenceContext,
     setPresenceStrategyPropsContext,
   } from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createDrawer} from './create-drawer.svelte.js';
   import {setDrawerContext} from './drawer-context.svelte.js';
 

package/dist/editable/editable-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createEditable} from './create-editable.svelte.js';
   import {setEditableContext} from './editable-context.svelte.js';
 

package/dist/field/field-root.svelte

@@ -14,11 +14,11 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createField} from './create-field.svelte.js';
   import {setFieldContext} from './field-context.svelte.js';
 

package/dist/file-upload/file-upload-item.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getFileUploadContext,
     setFileUploadItemPropsContext,

package/dist/file-upload/file-upload-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createFileUpload} from './create-file-upload.svelte.js';
   import {setFileUploadContext} from './file-upload-context.svelte.js';
 

package/dist/floating-panel/floating-panel-resize-trigger.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getFloatingPanelContext} from './floating-panel-context.svelte.js';
 
   let {

package/dist/floating-panel/floating-panel-root.svelte

@@ -14,10 +14,10 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createFloatingPanel} from './create-floating-panel.svelte.js';
   import {setFloatingPanelContext} from './floating-panel-context.svelte.js';
 

package/dist/highlight/highlight.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {highlightWord} from '@zag-js/highlight-word';
-  import {createSplitProps} from '@zag-js/utils';
 
   let {ref = $bindable(null), asChild, ...props}: HighlightProps = $props();
 

package/dist/hover-card/hover-card-root.svelte

@@ -14,10 +14,10 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createHoverCard} from './create-hover-card.svelte.js';
   import {setHoverCardContext} from './hover-card-context.svelte.js';
 

package/dist/index.d.ts

@@ -50,6 +50,7 @@ export * from './tooltip/index.js';
 export * from './tour/index.js';
 export * from './tree-view/index.js';
 export * from './create-context.svelte.js';
+export * from './create-split-props.js';
 export * from './create-unique-id.js';
 export * from './merge-props.js';
 export * from '@zag-js/anatomy';

package/dist/index.js

@@ -50,6 +50,7 @@ export * from './tooltip/index.js';
 export * from './tour/index.js';
 export * from './tree-view/index.js';
 export * from './create-context.svelte.js';
+export * from './create-split-props.js';
 export * from './create-unique-id.js';
 export * from './merge-props.js';
 export * from '@zag-js/anatomy';

package/dist/menu/menu-item.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getMenuContext} from './menu-context.svelte.js';
 
   let {

package/dist/menu/menu-option-item.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getMenuContext,
     setMenuOptionItemPropsContext,

package/dist/menu/menu-root.svelte

@@ -14,10 +14,10 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createMenu} from './create-menu.svelte.js';
   import {
     getMenuContext,

package/dist/number-input/number-input-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createNumberInput} from './create-number-input.svelte.js';
   import {setNumberInputContext} from './number-input-context.svelte.js';
 

package/dist/pagination/pagination-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createPagination} from './create-pagination.svelte.js';
   import {setPaginationContext} from './pagination-context.svelte.js';
 

package/dist/pin-input/pin-input-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createPinInputContext} from './create-pin-input.svelte.js';
   import {setPinInputContext} from './pin-input-context.svelte.js';
 

package/dist/popover/popover-root.svelte

@@ -14,10 +14,10 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createPopover} from './create-popover.svelte.js';
   import {setPopoverContext} from './popover-context.svelte.js';
 

package/dist/portal/portal.svelte

@@ -12,9 +12,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {getEnvironmentContext} from '../environment-provider/index.js';
   import {portal} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {getPortalProviderPropsContext} from './portal-context.svelte.js';
 
   let {children, ...props}: PortalProps = $props();

package/dist/presence/presence.svelte

@@ -10,9 +10,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import type {Action} from 'svelte/action';
   import type {HTMLAttributes} from 'svelte/elements';
   import {createPresence} from './create-presence.svelte.js';

package/dist/progress/progress-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createProgress} from './create-progress.svelte.js';
   import {setProgressContext} from './progress-context.svelte.js';
 

package/dist/qr-code/qr-code-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createQRCode} from './create-qr-code.svelte.js';
   import {setQrCodeContext} from './qr-code-context.svelte.js';
 

package/dist/radio-group/radio-group-item.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getRadioGroupContext,
     setRadioGroupItemPropsContext,

package/dist/radio-group/radio-group-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createRadioGroup} from './create-radio-group.svelte.js';
   import {setRadioGroupContext} from './radio-group-context.svelte.js';
 

package/dist/rating-group/rating-group-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createRatingGroup} from './create-rating-group.svelte.js';
   import {setRatingGroupContext} from './rating-group-context.svelte.js';
 

package/dist/segment-group/segment-group-item.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getSegmentGroupContext,
     setSegmentGroupItemPropsContext,

package/dist/segment-group/segment-group-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createSegmentGroup} from './create-segment-group.svelte.js';
   import {setSegmentGroupContext} from './segment-group-context.svelte.js';
 

package/dist/select/select-item.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getSelectContext,
     setSelectItemPropsContext,

package/dist/select/select-root.svelte

@@ -15,11 +15,11 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createSelect} from './create-select.svelte.js';
   import {setSelectContext} from './select-context.svelte.js';
 

package/dist/signature-pad/signature-pad-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createSignaturePad} from './create-signature-pad.svelte.js';
   import {setSignaturePadContext} from './signature-pad-context.svelte.js';
 

package/dist/slider/slider-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createSlider} from './create-slider.svelte.js';
   import {setSliderContext} from './slider-context.svelte.js';
 

package/dist/slider/slider-thumb.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getSliderContext,
     setSliderThumbPropsContext,

package/dist/splitter/splitter-panel.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getSplitterContext} from './splitter-context.svelte.js';
 
   let {

package/dist/splitter/splitter-resize-trigger.svelte

@@ -19,8 +19,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getSplitterContext} from './splitter-context.svelte.js';
 
   let {

package/dist/splitter/splitter-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createSplitter} from './create-splitter.svelte.js';
   import {setSplitterContext} from './splitter-context.svelte.js';
 

package/dist/steps/steps-item.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getStepsContext,
     setStepsItemPropsContext,

package/dist/steps/steps-root.svelte

@@ -15,10 +15,10 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createSteps} from './create-steps.svelte.js';
   import {setStepsContext} from './steps-context.svelte.js';
 

package/dist/switch/switch-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createSwitch} from './create-switch.svelte.js';
   import {setSwitchContext} from './switch-context.svelte.js';
 

package/dist/tabs/tabs-content.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getTabsContext} from './tabs-context.svelte.js';
 
   let {

package/dist/tabs/tabs-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createTabs} from './create-tabs.svelte.js';
   import {setTabsContext} from './tabs-context.svelte.js';
 

package/dist/tabs/tabs-trigger.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getTabsContext} from './tabs-context.svelte.js';
 
   let {

package/dist/tags-input/tags-input-item.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getTagsInputContext,
     setTagsInputItemPropsContext,

package/dist/tags-input/tags-input-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createTagsInput} from './create-tags-input.svelte.js';
   import {setTagsInputContext} from './tags-input-context.svelte.js';
 

package/dist/time-picker/time-picker-root.svelte

@@ -15,11 +15,11 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createTimePicker} from './create-time-picker.svelte.js';
   import {setTimePickerContext} from './time-picker-context.svelte.js';
 

package/dist/timer/timer-item.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getTimerContext,
     setTimerItemPropsContext,

package/dist/timer/timer-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createTimer} from './create-timer.svelte.js';
   import {setTimerContext} from './timer-context.svelte.js';
 

package/dist/toggle/toggle-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createToggle} from './create-toggle.svelte.js';
   import {setToggleContext} from './toggle-context.svelte.js';
 

package/dist/toggle-group/toggle-group-item.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getToggleGroupContext} from './toggle-group-context.svelte.js';
 
   let {

package/dist/toggle-group/toggle-group-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createToggleGroup} from './create-toggle-group.svelte.js';
   import {setToggleGroupContext} from './toggle-group-context.svelte.js';
 

package/dist/tooltip/tooltip-root.svelte

@@ -14,10 +14,10 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createTooltip} from './create-tooltip.svelte.js';
   import {setTooltipContext} from './tooltip-context.svelte.js';
 

package/dist/tour/tour-root.svelte

@@ -12,13 +12,13 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {
     setPresenceContext,
     setPresenceStrategyPropsContext,
   } from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createTour} from './create-tour.svelte.js';
   import {setTourContext} from './tour-context.svelte.js';
 

package/dist/tree-view/tree-view-branch.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getTreeViewContext,
     setTreeViewNodePropsContext,

package/dist/tree-view/tree-view-item.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getTreeViewContext,
     setTreeViewNodePropsContext,

package/dist/tree-view/tree-view-root.svelte

@@ -15,10 +15,10 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createTreeView} from './create-tree-view.svelte.js';
   import {setTreeViewContext} from './tree-view-context.svelte.js';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "ui-ingredients",
   "type": "module",
   "license": "MIT",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "packageManager": "pnpm@9.15.1",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -218,7 +218,8 @@
     "./anatomy": {
       "types": "./dist/anatomy.d.ts",
       "import": "./dist/anatomy.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -354,12 +355,11 @@
     "@zag-js/tooltip": "^0.78.3",
     "@zag-js/tour": "^0.78.3",
     "@zag-js/tree-view": "^0.78.3",
-    "@zag-js/utils": "^0.78.3",
     "zagjs-legacy-svelte": "npm:@zag-js/svelte@0.77.1",
     "zagjs-legacy-toast": "npm:@zag-js/toast@0.77.1"
   },
   "peerDependencies": {
-    "svelte": ">=5.0.0"
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.3.0",