ui-ingredients 0.21.1 → 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/angle-slider/create-angle-slider.svelte.js

@@ -13,8 +13,6 @@ export function createAngleSlider(props) {
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    // @ts-expect-error "Incompatible version of @zag-js/svelte"
     const [state, send] = useMachine(angleSlider.machine(context), { context });
-    // @ts-expect-error "Incompatible version of @zag-js/svelte"
     return reflect(() => angleSlider.connect(state, send, normalizeProps));
 }

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