ui-ingredients 0.8.0 → 0.10.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/editable/editable-root.svelte

@@ -54,6 +54,7 @@
       'onFocusOutside',
       'onInteractOutside',
       'onPointerDownOutside',
+      'autoResize',
     ])(props),
   );
 

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/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.8.0",
-  "packageManager": "pnpm@9.7.0",
+  "version": "0.10.0",
+  "packageManager": "pnpm@9.12.2",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -299,82 +299,82 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@zag-js/accordion": "^0.75.0",
-    "@zag-js/anatomy": "^0.75.0",
-    "@zag-js/avatar": "^0.75.0",
-    "@zag-js/carousel": "^0.75.0",
-    "@zag-js/checkbox": "^0.75.0",
-    "@zag-js/clipboard": "^0.75.0",
-    "@zag-js/collapsible": "^0.75.0",
-    "@zag-js/color-picker": "^0.75.0",
-    "@zag-js/combobox": "^0.75.0",
-    "@zag-js/core": "^0.75.0",
-    "@zag-js/date-picker": "^0.75.0",
-    "@zag-js/dialog": "^0.75.0",
-    "@zag-js/dom-query": "^0.75.0",
-    "@zag-js/editable": "^0.75.0",
-    "@zag-js/file-upload": "^0.75.0",
-    "@zag-js/floating-panel": "^0.75.0",
-    "@zag-js/highlight-word": "^0.75.0",
-    "@zag-js/hover-card": "^0.75.0",
-    "@zag-js/i18n-utils": "^0.75.0",
-    "@zag-js/menu": "^0.75.0",
-    "@zag-js/number-input": "^0.75.0",
-    "@zag-js/pagination": "^0.75.0",
-    "@zag-js/pin-input": "^0.75.0",
-    "@zag-js/popover": "^0.75.0",
-    "@zag-js/presence": "^0.75.0",
-    "@zag-js/progress": "^0.75.0",
-    "@zag-js/qr-code": "^0.75.0",
-    "@zag-js/radio-group": "^0.75.0",
-    "@zag-js/rating-group": "^0.75.0",
-    "@zag-js/select": "^0.75.0",
-    "@zag-js/signature-pad": "^0.75.0",
-    "@zag-js/slider": "^0.75.0",
-    "@zag-js/splitter": "^0.75.0",
-    "@zag-js/steps": "^0.75.0",
-    "@zag-js/svelte": "^0.75.0",
-    "@zag-js/switch": "^0.75.0",
-    "@zag-js/tabs": "^0.75.0",
-    "@zag-js/tags-input": "^0.75.0",
-    "@zag-js/time-picker": "^0.75.0",
-    "@zag-js/timer": "^0.75.0",
-    "@zag-js/toast": "^0.75.0",
-    "@zag-js/toggle-group": "^0.75.0",
-    "@zag-js/tooltip": "^0.75.0",
-    "@zag-js/tour": "^0.75.0",
-    "@zag-js/tree-view": "^0.75.0",
-    "@zag-js/utils": "^0.75.0",
+    "@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.2",
-    "@sveltejs/package": "^2.3.5",
+    "@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",
+    "publint": "^0.2.12",
     "release-it": "^17.10.0",
     "resize-observer-polyfill": "^1.5.1",
-    "svelte": "^5.0.2",
+    "svelte": "^5.1.3",
     "svelte-check": "^4.0.5",
     "tailwind-merge": "^2.5.4",
     "tailwind-variants": "^0.2.1",
     "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"
@@ -389,8 +389,7 @@
     },
     "hooks": {
       "before:init": [
-        "pnpm check",
-        "pnpm test"
+        "pnpm check"
       ],
       "after:bump": [
         "pnpm package"