ui-ingredients 0.7.0 → 0.9.0

package/dist/accordion/accordion-item-content.svelte

@@ -14,7 +14,7 @@
   import {
     getAccordionContext,
     getAccordionItemPropsContext,
-  } from './avatar-context.svelte.js';
+  } from './accordion-context.svelte.js';
 
   let {
     ref = $bindable(null),

package/dist/accordion/accordion-item-indicator.svelte

@@ -10,7 +10,7 @@
   import {
     getAccordionContext,
     getAccordionItemPropsContext,
-  } from './avatar-context.svelte.js';
+  } from './accordion-context.svelte.js';
 
   let {
     ref = $bindable(null),

package/dist/accordion/accordion-item-trigger.svelte

@@ -10,7 +10,7 @@
   import {
     getAccordionContext,
     getAccordionItemPropsContext,
-  } from './avatar-context.svelte.js';
+  } from './accordion-context.svelte.js';
 
   let {
     ref = $bindable(null),

package/dist/accordion/accordion-item.svelte

@@ -15,7 +15,7 @@
   import {
     getAccordionContext,
     setAccordionItemPropsContext,
-  } from './avatar-context.svelte.js';
+  } from './accordion-context.svelte.js';
 
   let {
     ref = $bindable(null),

package/dist/accordion/accordion-root.svelte

@@ -19,7 +19,7 @@
   import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {setAccordionContext} from './avatar-context.svelte.js';
+  import {setAccordionContext} from './accordion-context.svelte.js';
   import {createAccordion} from './create-accordion.svelte.js';
 
   let {

package/dist/accordion/create-accordion.svelte.js

@@ -7,12 +7,14 @@ export function createAccordion(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
-        dir: locale?.dir,
-        getRootNode: environment?.getRootNode,
-        ...props,
-    }));
+    const context = reflect(() => {
+        return {
+            id,
+            dir: locale?.dir,
+            getRootNode: environment?.getRootNode,
+            ...props,
+        };
+    });
     const [state, send] = useMachine(accordion.machine(context), { context });
     return reflect(() => accordion.connect(state, send, normalizeProps));
 }

package/dist/accordion/index.d.ts

@@ -5,4 +5,4 @@ export type { AccordionItemTriggerProps } from './accordion-item-trigger.svelte'
 export type { AccordionItemProps } from './accordion-item.svelte';
 export type { AccordionProps } from './accordion-root.svelte';
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
-export { getAccordionContext } from './avatar-context.svelte.js';
+export { getAccordionContext } from './accordion-context.svelte.js';

package/dist/accordion/index.js

@@ -1,3 +1,3 @@
 export * as Accordion from './accordion.js';
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
-export { getAccordionContext } from './avatar-context.svelte.js';
+export { getAccordionContext } from './accordion-context.svelte.js';

package/dist/combobox/create-combobox.svelte.js

@@ -33,8 +33,10 @@ export function createCombobox(props) {
         'open.controlled': props.openControlled,
         collection,
     }));
-    /* FIXME: pass controlled context */
-    const [state, send] = useMachine(combobox.machine(context));
+    const [state, send, service] = useMachine(combobox.machine(context));
+    $effect(() => {
+        service.setContext(context);
+    });
     return reflect(() => {
         const o = combobox.connect(state, send, normalizeProps);
         return {

package/dist/date-picker/create-date-picker.svelte.js

@@ -8,7 +8,6 @@ export function createDatePicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = createUniqueId();
-    /* FIXME: use reflect */
     const context = $derived.by(() => ({
         id,
         dir: locale?.dir,
@@ -23,7 +22,10 @@ export function createDatePicker(props) {
         getRootNode: environment?.getRootNode,
         'open.controlled': props.openControlled,
     }));
-    const [state, send] = useMachine(datePicker.machine(context), { context });
+    const [state, send, service] = useMachine(datePicker.machine(context));
+    $effect(() => {
+        service.setContext(context);
+    });
     return reflect(() => {
         const o = datePicker.connect(state, send, normalizeProps);
         return {

package/dist/floating-panel/create-floating-panel.svelte.d.ts

@@ -2,6 +2,6 @@ import * as floatingPanel from '@zag-js/floating-panel';
 export interface CreateFloatingPanelProps extends Omit<floatingPanel.Context, 'id' | 'dir' | 'getRootNode'> {
     id?: string;
 }
-export interface CreateFloatingPanelReturn extends floatingPanel.Api<any> {
+export interface CreateFloatingPanelReturn extends floatingPanel.Api {
 }
 export declare function createFloatingPanel(props: CreateFloatingPanelProps): CreateFloatingPanelReturn;

package/dist/pin-input/create-pin-input.svelte.js

@@ -4,6 +4,7 @@ import { getFieldContext } from '../field/field-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
 import * as pinInput from '@zag-js/pin-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { parts } from './pin-input-anatomy.js';
 export function createPinInputContext(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
@@ -33,6 +34,7 @@ export function createPinInputContext(props) {
                     onclick() {
                         o.clearValue();
                     },
+                    ...parts.clearTrigger.attrs,
                 };
             },
             getHiddenInputProps() {

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

@@ -7,7 +7,6 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {parts} from './pin-input-anatomy.js';
   import {getPinInputContext} from './pin-input-context.svelte.js';
 
   let {
@@ -20,11 +19,7 @@
   let pinInput = getPinInputContext();
 
   let mergedProps = $derived(
-    mergeProps(
-      parts.clearTrigger.attrs as any,
-      pinInput.getClearTriggerProps(),
-      props,
-    ),
+    mergeProps(pinInput.getClearTriggerProps(), props),
   );
 </script>
 

package/dist/presence/presence.svelte

@@ -14,6 +14,7 @@
   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';
 
   let {asChild, children, ...props}: PresenceProps = $props();
@@ -29,7 +30,10 @@
   let presence = createPresence(reflect(() => createPresenceProps));
 
   let mergedProps = $derived(
-    mergeProps(presence.getPresenceProps() as any, localProps),
+    mergeProps<HTMLAttributes<HTMLDivElement>>(
+      presence.getPresenceProps(),
+      localProps,
+    ),
   );
 </script>
 

package/dist/slider/index.d.ts

@@ -1,5 +1,6 @@
 export * as Slider from './slider.js';
 export type { SliderControlProps } from './slider-control.svelte';
+export type { SliderDraggingIndicatorProps } from './slider-dragging-indicator.svelte';
 export type { SliderHiddenInputProps } from './slider-hidden-input.svelte';
 export type { SliderLabelProps } from './slider-label.svelte';
 export type { SliderMarkerGroupProps } from './slider-marker-group.svelte';

package/dist/slider/slider-dragging-indicator.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SliderDraggingIndicatorProps
+    extends HtmlIngredientProps<'label', HTMLLabelElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getSliderContext,
+    getSliderThumbPropsContext,
+  } from './slider-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderDraggingIndicatorProps = $props();
+
+  let slider = getSliderContext();
+  let thumbProps = getSliderThumbPropsContext();
+
+  let mergedProps = $derived(
+    mergeProps(slider.getDraggingIndicatorProps(thumbProps), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <label bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/slider/slider-dragging-indicator.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderDraggingIndicatorProps extends HtmlIngredientProps<'label', HTMLLabelElement> {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SliderDraggingIndicator: $$__sveltets_2_IsomorphicComponent<SliderDraggingIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type SliderDraggingIndicator = InstanceType<typeof SliderDraggingIndicator>;
+export default SliderDraggingIndicator;

package/dist/slider/slider.d.ts

@@ -1,4 +1,5 @@
 export { default as Control } from './slider-control.svelte';
+export { default as DraggingIndicator } from './slider-dragging-indicator.svelte';
 export { default as HiddenInput } from './slider-hidden-input.svelte';
 export { default as Label } from './slider-label.svelte';
 export { default as MarkerGroup } from './slider-marker-group.svelte';

package/dist/slider/slider.js

@@ -1,4 +1,5 @@
 export { default as Control } from './slider-control.svelte';
+export { default as DraggingIndicator } from './slider-dragging-indicator.svelte';
 export { default as HiddenInput } from './slider-hidden-input.svelte';
 export { default as Label } from './slider-label.svelte';
 export { default as MarkerGroup } from './slider-marker-group.svelte';

package/dist/toast/create-toaster.svelte.d.ts

@@ -12,9 +12,10 @@ export interface CreateToasterProps {
     removeDelay?: toast.GroupMachineContext['removeDelay'];
     pauseOnPageIdle?: toast.GroupMachineContext['pauseOnPageIdle'];
 }
-type ToasterMachine = Machine<toast.GroupMachineContext<any>, {
+type ToasterMachineState = {
     value: 'stack' | 'overlap';
-}, StateMachine.AnyEventObject>;
+};
+type ToasterMachine = Machine<toast.GroupMachineContext, ToasterMachineState, StateMachine.AnyEventObject>;
 export interface CreateToasterReturn extends toast.GroupApi {
     machine: ToasterMachine;
 }

package/dist/toast/toaster.svelte

@@ -16,6 +16,7 @@
   import {Portal} from '../portal/index.js';
   import {normalizeProps, useMachine} from '@zag-js/svelte';
   import * as toast from '@zag-js/toast';
+  import type {HTMLAttributes} from 'svelte/elements';
   import ToastActor from './toast-actor.svelte';
 
   let {
@@ -39,7 +40,10 @@
   let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
   let toasts = $derived(api.getToastsByPlacement(placement));
   let mergedProps = $derived(
-    mergeProps(api.getGroupProps({placement}) as any, props),
+    mergeProps<HTMLAttributes<HTMLDivElement>>(
+      api.getGroupProps({placement}),
+      props,
+    ),
   );
 </script>
 

package/package.json

@@ -2,8 +2,8 @@
   "name": "ui-ingredients",
   "type": "module",
   "license": "MIT",
-  "version": "0.7.0",
-  "packageManager": "pnpm@9.7.0",
+  "version": "0.9.0",
+  "packageManager": "pnpm@9.12.2",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -210,18 +210,6 @@
     "./tree-view": {
       "types": "./dist/tree-view/index.d.ts",
       "svelte": "./dist/tree-view/index.js"
-    },
-    "./merge-props": {
-      "types": "./dist/merge-props.d.ts",
-      "import": "./dist/merge-props.js"
-    },
-    "./create-context": {
-      "types": "./dist/create-context.svelte.d.ts",
-      "import": "./dist/create-context.svelte.js"
-    },
-    "./create-unique-id": {
-      "types": "./dist/create-unique-id.d.ts",
-      "import": "./dist/create-unique-id.js"
     }
   },
   "files": [
@@ -311,82 +299,82 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@zag-js/accordion": "^0.74.2",
-    "@zag-js/anatomy": "^0.74.2",
-    "@zag-js/avatar": "^0.74.2",
-    "@zag-js/carousel": "^0.74.2",
-    "@zag-js/checkbox": "^0.74.2",
-    "@zag-js/clipboard": "^0.74.2",
-    "@zag-js/collapsible": "^0.74.2",
-    "@zag-js/color-picker": "^0.74.2",
-    "@zag-js/combobox": "^0.74.2",
-    "@zag-js/core": "^0.74.2",
-    "@zag-js/date-picker": "^0.74.2",
-    "@zag-js/dialog": "^0.74.2",
-    "@zag-js/dom-query": "^0.74.2",
-    "@zag-js/editable": "^0.74.2",
-    "@zag-js/file-upload": "^0.74.2",
-    "@zag-js/floating-panel": "^0.74.2",
-    "@zag-js/highlight-word": "^0.74.2",
-    "@zag-js/hover-card": "^0.74.2",
-    "@zag-js/i18n-utils": "^0.74.2",
-    "@zag-js/menu": "^0.74.2",
-    "@zag-js/number-input": "^0.74.2",
-    "@zag-js/pagination": "^0.74.2",
-    "@zag-js/pin-input": "^0.74.2",
-    "@zag-js/popover": "^0.74.2",
-    "@zag-js/presence": "^0.74.2",
-    "@zag-js/progress": "^0.74.2",
-    "@zag-js/qr-code": "^0.74.2",
-    "@zag-js/radio-group": "^0.74.2",
-    "@zag-js/rating-group": "^0.74.2",
-    "@zag-js/select": "^0.74.2",
-    "@zag-js/signature-pad": "^0.74.2",
-    "@zag-js/slider": "^0.74.2",
-    "@zag-js/splitter": "^0.74.2",
-    "@zag-js/steps": "^0.74.2",
-    "@zag-js/svelte": "^0.74.2",
-    "@zag-js/switch": "^0.74.2",
-    "@zag-js/tabs": "^0.74.2",
-    "@zag-js/tags-input": "^0.74.2",
-    "@zag-js/time-picker": "^0.74.2",
-    "@zag-js/timer": "^0.74.2",
-    "@zag-js/toast": "^0.74.2",
-    "@zag-js/toggle-group": "^0.74.2",
-    "@zag-js/tooltip": "^0.74.2",
-    "@zag-js/tour": "^0.74.2",
-    "@zag-js/tree-view": "^0.74.2",
-    "@zag-js/utils": "^0.74.2",
+    "@zag-js/accordion": "^0.76.0",
+    "@zag-js/anatomy": "^0.76.0",
+    "@zag-js/avatar": "^0.76.0",
+    "@zag-js/carousel": "^0.76.0",
+    "@zag-js/checkbox": "^0.76.0",
+    "@zag-js/clipboard": "^0.76.0",
+    "@zag-js/collapsible": "^0.76.0",
+    "@zag-js/color-picker": "^0.76.0",
+    "@zag-js/combobox": "^0.76.0",
+    "@zag-js/core": "^0.76.0",
+    "@zag-js/date-picker": "^0.76.0",
+    "@zag-js/dialog": "^0.76.0",
+    "@zag-js/dom-query": "^0.76.0",
+    "@zag-js/editable": "^0.76.0",
+    "@zag-js/file-upload": "^0.76.0",
+    "@zag-js/floating-panel": "^0.76.0",
+    "@zag-js/highlight-word": "^0.76.0",
+    "@zag-js/hover-card": "^0.76.0",
+    "@zag-js/i18n-utils": "^0.76.0",
+    "@zag-js/menu": "^0.76.0",
+    "@zag-js/number-input": "^0.76.0",
+    "@zag-js/pagination": "^0.76.0",
+    "@zag-js/pin-input": "^0.76.0",
+    "@zag-js/popover": "^0.76.0",
+    "@zag-js/presence": "^0.76.0",
+    "@zag-js/progress": "^0.76.0",
+    "@zag-js/qr-code": "^0.76.0",
+    "@zag-js/radio-group": "^0.76.0",
+    "@zag-js/rating-group": "^0.76.0",
+    "@zag-js/select": "^0.76.0",
+    "@zag-js/signature-pad": "^0.76.0",
+    "@zag-js/slider": "^0.76.0",
+    "@zag-js/splitter": "^0.76.0",
+    "@zag-js/steps": "^0.76.0",
+    "@zag-js/svelte": "^0.76.0",
+    "@zag-js/switch": "^0.76.0",
+    "@zag-js/tabs": "^0.76.0",
+    "@zag-js/tags-input": "^0.76.0",
+    "@zag-js/time-picker": "^0.76.0",
+    "@zag-js/timer": "^0.76.0",
+    "@zag-js/toast": "^0.76.0",
+    "@zag-js/toggle-group": "^0.76.0",
+    "@zag-js/tooltip": "^0.76.0",
+    "@zag-js/tour": "^0.76.0",
+    "@zag-js/tree-view": "^0.76.0",
+    "@zag-js/utils": "^0.76.0",
     "uid": "^2.0.2"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0-next.1"
+    "svelte": ">=5.0.0"
   },
   "devDependencies": {
-    "@faker-js/faker": "^9.0.3",
-    "@sveltejs/adapter-vercel": "^5.4.5",
-    "@sveltejs/kit": "^2.7.1",
-    "@sveltejs/package": "^2.3.5",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/svelte": "^5.2.3",
+    "@faker-js/faker": "^9.1.0",
+    "@sveltejs/adapter-vercel": "^5.4.6",
+    "@sveltejs/kit": "^2.7.3",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/svelte": "^5.2.4",
     "@testing-library/user-event": "^14.5.2",
     "@types/jsdom": "^21.1.7",
-    "@untitled-theme/icons-svelte": "^0.10.11",
+    "@untitled-theme/icons-svelte": "^0.11.0",
     "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
     "jsdom": "^25.0.1",
     "postcss": "^8.4.47",
-    "publint": "^0.2.11",
-    "release-it": "^17.9.0",
+    "publint": "^0.2.12",
+    "release-it": "^17.10.0",
     "resize-observer-polyfill": "^1.5.1",
-    "svelte": "^5.0.0-next.265",
+    "svelte": "^5.1.3",
     "svelte-check": "^4.0.5",
     "tailwind-merge": "^2.5.4",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3",
-    "vite": "^5.4.9",
+    "vite": "^5.4.10",
     "vitest": "^2.1.3",
     "vitest-axe": "^1.0.0-pre.3",
     "vitest-canvas-mock": "^0.3.3"
@@ -401,8 +389,7 @@
     },
     "hooks": {
       "before:init": [
-        "pnpm check",
-        "pnpm test"
+        "pnpm check"
       ],
       "after:bump": [
         "pnpm package"