ui-ingredients 0.0.17 → 0.0.19

package/dist/timer/root.svelte

@@ -1,17 +1,14 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateTimerProps, CreateTimerReturn} from './create-timer.svelte.js';
 
-  export interface TimerProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateTimerProps, 'id'>> {
+  export interface TimerProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTimerProps> {
     children?: Snippet<[api: CreateTimerReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {timerContext} from './context.svelte.js';
   import {createTimer} from './create-timer.svelte.js';
@@ -25,17 +22,12 @@
     countdown,
     onTick,
     onComplete,
-    getRootNode,
     children,
     ...props
   }: TimerProps = $props();
 
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createTimer({
-    id: id ?? uid,
+    id,
     startMs,
     targetMs,
     interval,
@@ -43,7 +35,6 @@
     countdown,
     onTick,
     onComplete,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/timer/separator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TimerSeparatorProps extends HtmlIngredientProps<'span'> {}
+  export interface TimerSeparatorProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/toast/action-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ToastActionTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface ToastActionTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/toast/close-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ToastCloseTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface ToastCloseTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,7 +1,6 @@
 import * as toast from '@zag-js/toast';
 export interface CreateToasterProps {
-    id?: string;
-    dir?: toast.GroupMachineContext['dir'];
+    id?: string | null;
     max?: toast.GroupMachineContext['max'];
     gap?: toast.GroupMachineContext['gap'];
     hotkey?: toast.GroupMachineContext['hotkey'];
@@ -11,8 +10,7 @@ export interface CreateToasterProps {
     placement?: toast.GroupMachineContext['placement'];
     removeDelay?: toast.GroupMachineContext['removeDelay'];
     pauseOnPageIdle?: toast.GroupMachineContext['pauseOnPageIdle'];
-    getRootNode?: toast.GroupMachineContext['getRootNode'];
 }
 export interface CreateToasterReturn extends ReturnType<typeof createToaster> {
 }
-export default function createToaster(props?: CreateToasterProps): any;
+export declare function createToaster(props?: CreateToasterProps): any;

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

@@ -3,17 +3,14 @@ import { getLocaleContext } from '../locale-provider/index.js';
 import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect } from '@zag-js/svelte';
 import * as toast from '@zag-js/toast';
-export default function createToaster(props) {
+export function createToaster(props) {
     const localContext = getLocaleContext();
     const environmentContext = getEnvironmentContext();
-    const id = $derived(props?.id ?? createUniqueId());
-    const dir = $derived(props?.dir ?? localContext?.dir);
-    const getRootNode = $derived(props?.getRootNode ?? environmentContext?.getRootNode);
     const machine = $derived(toast.group.machine({
         ...props,
-        id,
-        dir,
-        getRootNode,
+        id: props?.id ?? createUniqueId(),
+        dir: localContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
     }));
     const api = $derived(reflect(() => ({
         machine,

package/dist/toast/description.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ToastDescriptionProps extends HtmlIngredientProps<'div'> {}
+  export interface ToastDescriptionProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/toast/index.d.ts

@@ -1,7 +1,7 @@
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export { type ToastActionTriggerProps } from './action-trigger.svelte';
 export { type ToastCloseTriggerProps } from './close-trigger.svelte';
-export { default as createToaster, type CreateToasterProps, type CreateToasterReturn, } from './create-toaster.svelte.js';
+export { createToaster, type CreateToasterProps, type CreateToasterReturn, } from './create-toaster.svelte.js';
 export { type ToastDescriptionProps } from './description.svelte';
 export { type ToastProps } from './root.svelte';
 export { type ToastTitleProps } from './title.svelte';

package/dist/toast/index.js

@@ -1,7 +1,7 @@
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export {} from './action-trigger.svelte';
 export {} from './close-trigger.svelte';
-export { default as createToaster, } from './create-toaster.svelte.js';
+export { createToaster, } from './create-toaster.svelte.js';
 export {} from './description.svelte';
 export {} from './root.svelte';
 export {} from './title.svelte';

package/dist/toast/root.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateToastReturn} from './create-toast.svelte.js';
 
-  export interface ToastProps extends Omit<HtmlIngredientProps<'div'>, 'children'> {
+  export interface ToastProps extends Omit<HtmlProps<'div'>, 'children'> {
     children?: Snippet<[api: CreateToastReturn]>;
   }
 </script>

package/dist/toast/title.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ToastTitleProps extends HtmlIngredientProps<'div'> {}
+  export interface ToastTitleProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/toast/toaster.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateToastReturn} from './create-toast.svelte.js';
   import type {CreateToasterReturn} from './create-toaster.svelte.js';
 
-  export interface ToasterProps extends Omit<HtmlIngredientProps<'div'>, 'children'> {
+  export interface ToasterProps extends Omit<HtmlProps<'div'>, 'children'> {
     toaster: CreateToasterReturn;
     children: Snippet<[api: CreateToastReturn]>;
   }

package/dist/toggle-group/create-toggle-group.svelte.d.ts

@@ -1,5 +1,6 @@
 import * as toggleGroup from '@zag-js/toggle-group';
-export interface CreateToggleGroupProps extends toggleGroup.Context {
+export interface CreateToggleGroupProps extends Omit<toggleGroup.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreateToggleGroupReturn extends toggleGroup.Api {
 }

package/dist/toggle-group/create-toggle-group.svelte.js

@@ -1,7 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as toggleGroup from '@zag-js/toggle-group';
 export function createToggleGroup(props) {
-    const [state, send] = useMachine(toggleGroup.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(toggleGroup.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => toggleGroup.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/toggle-group/item.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/toggle-group';
   import type {Snippet} from 'svelte';
 
   export interface ToggleGroupItemProps
-    extends Assign<Omit<HtmlIngredientProps<'button'>, 'children'>, ItemProps> {
+    extends Assign<Omit<HtmlProps<'button'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/toggle-group/root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateToggleGroupProps,
@@ -7,18 +7,12 @@
   } from './create-toggle-group.svelte.js';
 
   export interface ToggleGroupProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateToggleGroupProps, 'id'>
-    > {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateToggleGroupProps> {
     children?: Snippet<[api: CreateToggleGroupReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {toggleGroupContext} from './context.svelte.js';
   import {createToggleGroup} from './create-toggle-group.svelte.js';
@@ -26,7 +20,6 @@
   let {
     id,
     ids,
-    dir,
     value,
     disabled,
     multiple,
@@ -34,20 +27,13 @@
     rovingFocus,
     orientation,
     onValueChange,
-    getRootNode,
     children,
     ...props
   }: ToggleGroupProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createToggleGroup({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     value: $state.snapshot(value),
     disabled,
     multiple,
@@ -55,7 +41,6 @@
     rovingFocus,
     orientation,
     onValueChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/tooltip/arrow-tip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TooltipArrowTipProps extends HtmlIngredientProps<'div'> {}
+  export interface TooltipArrowTipProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tooltip/arrow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TooltipArrowProps extends HtmlIngredientProps<'div'> {}
+  export interface TooltipArrowProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tooltip/content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TooltipContentProps extends HtmlIngredientProps<'div'> {}
+  export interface TooltipContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,7 @@
 import * as tooltip from '@zag-js/tooltip';
-export interface CreateTooltipProps extends tooltip.Context {
+export interface CreateTooltipProps extends Omit<tooltip.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
+    id?: string | null;
+    defaultOpen?: boolean;
 }
 export interface CreateTooltipReturn extends tooltip.Api {
 }

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

@@ -1,7 +1,19 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tooltip from '@zag-js/tooltip';
 export function createTooltip(props) {
-    const [state, send] = useMachine(tooltip.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(tooltip.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        open: props.defaultOpen,
+        getRootNode: environmentContext?.getRootNode,
+        'open.controlled': props.open != null,
+    }));
     const api = $derived(reflect(() => tooltip.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/tooltip/positioner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TooltipPositionerProps extends HtmlIngredientProps<'div'> {}
+  export interface TooltipPositionerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/tooltip/root.svelte

@@ -2,32 +2,18 @@
   import type {Snippet} from 'svelte';
   import type {CreateTooltipProps, CreateTooltipReturn} from './create-tooltip.svelte.js';
 
-  export interface TooltipProps extends Omit<CreateTooltipProps, 'id'> {
-    id?: string | null;
+  export interface TooltipProps extends CreateTooltipProps {
     children?: Snippet<[api: CreateTooltipReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {tooltipContext} from './context.svelte.js';
   import {createTooltip} from './create-tooltip.svelte.js';
 
-  let {id, dir, getRootNode, children, ...props}: TooltipProps = $props();
+  let {children, ...props}: TooltipProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
-  let context = createTooltip({
-    id: id ?? uid,
-    dir: dir ?? localeContext?.dir,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
-    ...props,
-  });
+  let context = createTooltip(props);
 
   tooltipContext.set(context);
 </script>

package/dist/tooltip/trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface TooltipTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface TooltipTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/types.d.ts

@@ -1,13 +1,7 @@
 import type { SvelteHTMLElements } from 'svelte/elements';
 export type Assign<Target, Source> = Omit<Target, keyof Source> & Source;
-type KnownKeys<T> = keyof {
-    [K in keyof T as string extends K ? never : number extends K ? never : K]: string;
+type IntrinsicElements = keyof {
+    [K in keyof SvelteHTMLElements as string extends K ? never : number extends K ? never : K]: string;
 };
-interface IngredientProps {
-    /** TODO */
-    asChild?: never;
-}
-type IntrinsicElements = KnownKeys<SvelteHTMLElements>;
-export type HtmlIngredientProps<T extends IntrinsicElements> = Assign<SvelteHTMLElements[T], IngredientProps>;
-export type PickPartial<T, K extends keyof T> = Partial<Pick<T, K>> & Omit<T, K>;
+export type HtmlProps<T extends IntrinsicElements> = SvelteHTMLElements[T];
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -85,6 +85,7 @@
     "release": "release-it"
   },
   "dependencies": {
+    "@internationalized/date": "3.5.5",
     "@zag-js/accordion": "0.65.1",
     "@zag-js/avatar": "0.65.1",
     "@zag-js/carousel": "0.65.1",
@@ -95,6 +96,7 @@
     "@zag-js/combobox": "0.65.1",
     "@zag-js/date-picker": "0.65.1",
     "@zag-js/dialog": "0.65.1",
+    "@zag-js/dom-query": "0.65.1",
     "@zag-js/editable": "0.65.1",
     "@zag-js/file-upload": "0.65.1",
     "@zag-js/hover-card": "0.65.1",
@@ -138,7 +140,7 @@
     "postcss": "8.4.41",
     "publint": "0.2.10",
     "release-it": "17.6.0",
-    "svelte": "5.0.0-next.234",
+    "svelte": "5.0.0-next.238",
     "svelte-check": "3.8.6",
     "tailwindcss": "3.4.10",
     "typescript": "5.5.4",