ui-ingredients 0.0.47 → 0.0.49

package/README.md

@@ -2,7 +2,7 @@
 
 Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
 
-> ⚠️ This project is in early development. Feel free to use it, and contributions are welcome. Use with caution!
+> ⚠️ This project is currently in the early stages of development. You're welcome to use it and we encourage contributions. Please use with caution as it is still evolving!
 
 ## Installation
 

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

@@ -86,6 +86,7 @@ export function createField(props) {
     }
     function getHelperTextProps() {
         return {
+            ...parts.helperText.attrs,
             id: ids.helperText,
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),

package/dist/presence/create-presence.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Action } from 'svelte/action';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface PresenceStrategyProps {
     /** @default false */
@@ -11,7 +12,7 @@ export interface CreatePresenceProps extends PresenceStrategyProps {
 export interface CreatePresenceReturn extends ReturnType<typeof createPresence> {
 }
 export declare function createPresence(props: CreatePresenceProps): {
-    ref: (node: HTMLElement) => void;
+    ref: Action<HTMLElement, undefined, Record<never, any>>;
     getPresenceProps: () => HTMLAttributes<HTMLElement>;
     readonly mounted: boolean;
 };

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

@@ -34,9 +34,9 @@ export function createPresence(props) {
             return true;
         return false;
     });
-    function ref(node) {
+    const ref = (node) => {
         api.setNode(node);
-    }
+    };
     return {
         ref,
         getPresenceProps,

package/dist/toast/create-toaster.svelte.js

@@ -1,18 +1,10 @@
-import { getEnvironmentContext } from '../environment-provider/index.js';
-import { getLocaleContext } from '../locale-provider/index.js';
 import { normalizeProps, reflect } from '@zag-js/svelte';
 import * as toast from '@zag-js/toast';
 import { uid } from 'uid';
 export function createToaster(props) {
-    const locale = getLocaleContext();
-    const environment = getEnvironmentContext();
-    const id = uid();
-    const machine = $derived(toast.group.machine({
-        ...props,
-        id: props?.id ?? id,
-        dir: locale?.dir,
-        getRootNode: environment?.getRootNode,
-    }));
+    const id_ = uid();
+    const id = $derived(props?.id ?? id_);
+    const machine = $derived(toast.group.machine({ ...props, id }));
     return reflect(() => ({
         machine,
         ...toast.group.connect(machine, machine.send, normalizeProps),

package/dist/toast/toaster.svelte

@@ -10,6 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {getEnvironmentContext} from '../environment-provider/context.svelte.js';
+  import {getLocaleContext} from '../locale-provider/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {Portal} from '../portal/index.js';
   import {normalizeProps, useMachine} from '@zag-js/svelte';
@@ -18,7 +20,15 @@
 
   let {this: e, toaster, children, ...props}: ToasterProps = $props();
 
-  let [snapshot, send] = useMachine(toaster.machine);
+  const locale = getLocaleContext();
+  const environment = getEnvironmentContext();
+
+  let [snapshot, send] = useMachine(toaster.machine, {
+    context: {
+      dir: locale?.dir,
+      getRootNode: environment?.getRootNode,
+    },
+  });
 
   let placement = $derived(snapshot.context.placement);
   let api = $derived(toast.group.connect(snapshot, send, normalizeProps));

package/dist/types.d.ts

@@ -3,20 +3,22 @@ import type { Action } from 'svelte/action';
 import type { SvelteHTMLElements } from 'svelte/elements';
 export type GenericObject = Record<string, any>;
 export type Assign<Target extends GenericObject, Source extends GenericObject> = Source & Omit<Target, keyof Source>;
-export type IntrinsicElement = keyof {
+export type SvelteHTMLElement = keyof {
     [K in keyof SvelteHTMLElements as string extends K ? never : number extends K ? never : K]: string;
 };
-export type HtmlProps<T extends IntrinsicElement> = SvelteHTMLElements[T];
-type AsChildWithRef<Ref extends Action, Context = never> = [Context] extends [
-    never
-] ? Snippet<[ref: Ref, attrs: GenericObject]> : Snippet<[ref: Ref, attrs: GenericObject, context: Context]>;
-type AsChildWithoutRef<Context = never> = [Context] extends [never] ? Snippet<[attrs: GenericObject]> : Snippet<[attrs: GenericObject, context: Context]>;
-export type AsChild<Ref extends Action, Context = never> = [Ref] extends [never] ? AsChildWithoutRef<Context> : AsChildWithRef<Ref, Context>;
-type Children<T = never> = [T] extends [never] ? Snippet : Snippet<[context: T]>;
+export type HtmlProps<TElement extends SvelteHTMLElement> = SvelteHTMLElements[TElement];
+type AsChildWithAction<TAction extends Action, TContext = never> = [
+    TContext
+] extends [never] ? Snippet<[action: TAction, attrs: GenericObject]> : Snippet<[action: TAction, attrs: GenericObject, context: TContext]>;
+type AsChildWithoutRef<TContext = never> = [TContext] extends [never] ? Snippet<[attrs: GenericObject]> : Snippet<[attrs: GenericObject, context: TContext]>;
+export type AsChild<TAction extends Action, Context = never> = [
+    TAction
+] extends [never] ? AsChildWithoutRef<Context> : AsChildWithAction<TAction, Context>;
+type Children<TContext = never> = [TContext] extends [never] ? Snippet : Snippet<[context: TContext]>;
 type PropsWithoutChildren<T> = Omit<T, 'children'>;
-export type HtmlIngredientProps<Element extends IntrinsicElement, Context = never, Ref extends Action = never> = PropsWithoutChildren<HtmlProps<Element>> & {
+export type HtmlIngredientProps<TElement extends SvelteHTMLElement, TContext = never, TAction extends Action = never> = PropsWithoutChildren<HtmlProps<TElement>> & {
     this?: any;
-    asChild?: AsChild<Ref, Context>;
-    children?: Children<Context>;
+    asChild?: AsChild<TAction, TContext>;
+    children?: Children<TContext>;
 };
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -141,7 +141,7 @@
     "@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.0-next.3",
+    "@testing-library/svelte": "5.2.1",
     "@untitled-theme/icons-svelte": "0.10.7",
     "autoprefixer": "10.4.20",
     "globals": "15.9.0",