ui-ingredients 0.0.16 → 0.0.18

package/dist/toggle-group/root.svelte

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

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

@@ -1,9 +1,3 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { CreateToggleGroupContextProps, CreateToggleGroupContextReturn } from './context.svelte.js';
-export interface ToggleGroupProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateToggleGroupContextProps, 'id'>> {
-    children?: Snippet<[context: CreateToggleGroupContextReturn]>;
-}
 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;

package/dist/tooltip/arrow-tip.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface TooltipArrowTipProps extends HtmlIngredientProps<'div'> {}
+  export interface TooltipArrowTipProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useTooltipContext} from './context.svelte.js';
+  import {tooltipContext} from './context.svelte.js';
 
   let {children, ...props}: TooltipArrowTipProps = $props();
 
-  let context = useTooltipContext();
+  let context = tooltipContext.get();
 
   let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
 </script>

package/dist/tooltip/arrow-tip.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface TooltipArrowTipProps extends HtmlIngredientProps<'div'> {
-}
 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;

package/dist/tooltip/arrow.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface TooltipArrowProps extends HtmlIngredientProps<'div'> {}
+  export interface TooltipArrowProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useTooltipContext} from './context.svelte.js';
+  import {tooltipContext} from './context.svelte.js';
 
   let {children, ...props}: TooltipArrowProps = $props();
 
-  let context = useTooltipContext();
+  let context = tooltipContext.get();
 
   let attrs = $derived(mergeProps(props, context.getArrowProps()));
 </script>

package/dist/tooltip/arrow.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface TooltipArrowProps extends HtmlIngredientProps<'div'> {
-}
 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;

package/dist/tooltip/content.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface TooltipContentProps extends HtmlIngredientProps<'div'> {}
+  export interface TooltipContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useTooltipContext} from './context.svelte.js';
+  import {tooltipContext} from './context.svelte.js';
 
   let {children, ...props}: TooltipContentProps = $props();
 
-  let context = useTooltipContext();
+  let context = tooltipContext.get();
 
   let attrs = $derived(mergeProps(props, context.getContentProps()));
 </script>

package/dist/tooltip/content.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface TooltipContentProps extends HtmlIngredientProps<'div'> {
-}
 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;

package/dist/tooltip/context.svelte.d.ts

@@ -1,8 +1,3 @@
-import * as tooltip from '@zag-js/tooltip';
-export interface CreateTooltipContextProps extends tooltip.Context {
-}
-export interface CreateTooltipContextReturn extends ReturnType<typeof createTooltipContext> {
-}
-export declare function createTooltipContext(props: CreateTooltipContextProps): any;
-export declare function setTooltipContext(value: CreateTooltipContextReturn): void;
-export declare function useTooltipContext(): CreateTooltipContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { CreateTooltipReturn } from './create-tooltip.svelte.js';
+export declare const tooltipContext: Context<CreateTooltipReturn>;

package/dist/tooltip/context.svelte.js

@@ -1,14 +1,2 @@
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import * as tooltip from '@zag-js/tooltip';
-import { getContext, setContext } from 'svelte';
-export function createTooltipContext(props) {
-    const [state, send] = useMachine(tooltip.machine(props));
-    const api = $derived(reflect(() => tooltip.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setTooltipContext(value) {
-    setContext('Tooltip', value);
-}
-export function useTooltipContext() {
-    return getContext('Tooltip');
-}
+import { Context } from '../utils.svelte.js';
+export const tooltipContext = new Context('Tooltip');

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

@@ -0,0 +1,7 @@
+import * as tooltip from '@zag-js/tooltip';
+export interface CreateTooltipProps extends Omit<tooltip.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
+    id?: string | null;
+}
+export interface CreateTooltipReturn extends tooltip.Api {
+}
+export declare function createTooltip(props: CreateTooltipProps): any;

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

@@ -0,0 +1,18 @@
+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 localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(tooltip.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        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,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface TooltipPositionerProps extends HtmlIngredientProps<'div'> {}
+  export interface TooltipPositionerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useTooltipContext} from './context.svelte.js';
+  import {tooltipContext} from './context.svelte.js';
 
   let {children, ...props}: TooltipPositionerProps = $props();
 
-  let context = useTooltipContext();
+  let context = tooltipContext.get();
 
   let attrs = $derived(mergeProps(props, context.getPositionerProps()));
 </script>

package/dist/tooltip/positioner.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface TooltipPositionerProps extends HtmlIngredientProps<'div'> {
-}
 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;

package/dist/tooltip/root.svelte

@@ -1,35 +1,21 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Snippet} from 'svelte';
-  import type {
-    CreateTooltipContextProps,
-    CreateTooltipContextReturn,
-  } from './context.svelte.js';
+  import type {CreateTooltipProps, CreateTooltipReturn} from './create-tooltip.svelte.js';
 
-  export interface TooltipProps extends Omit<CreateTooltipContextProps, 'id'> {
-    id?: string | null;
-    children?: Snippet<[CreateTooltipContextReturn]>;
+  export interface TooltipProps extends CreateTooltipProps {
+    children?: Snippet<[api: CreateTooltipReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {useEnvironmentContext} from '../environment-provider/index.js';
-  import {useLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
-  import {createTooltipContext, setTooltipContext} from './context.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 = useLocaleContext();
-  let environmentContext = useEnvironmentContext();
+  let context = createTooltip(props);
 
-  let context = createTooltipContext({
-    id: id ?? createUniqueId(),
-    dir: dir ?? localeContext?.dir,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
-    ...props,
-  });
-
-  setTooltipContext(context);
+  tooltipContext.set(context);
 </script>
 
 {@render children?.(context)}

package/dist/tooltip/root.svelte.d.ts

@@ -1,9 +1,3 @@
-import type { Snippet } from 'svelte';
-import type { CreateTooltipContextProps, CreateTooltipContextReturn } from './context.svelte.js';
-export interface TooltipProps extends Omit<CreateTooltipContextProps, 'id'> {
-    id?: string | null;
-    children?: Snippet<[CreateTooltipContextReturn]>;
-}
 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;

package/dist/tooltip/trigger.svelte

@@ -1,16 +1,16 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-  export interface TooltipTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface TooltipTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useTooltipContext} from './context.svelte.js';
+  import {tooltipContext} from './context.svelte.js';
 
   let {children, ...props}: TooltipTriggerProps = $props();
 
-  let context = useTooltipContext();
+  let context = tooltipContext.get();
 
   let attrs = $derived(mergeProps(props, context.getTriggerProps()));
 </script>

package/dist/tooltip/trigger.svelte.d.ts

@@ -1,6 +1,3 @@
-import type { HtmlIngredientProps } from '../types.js';
-export interface TooltipTriggerProps extends HtmlIngredientProps<'button'> {
-}
 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;

package/dist/types.d.ts

@@ -3,10 +3,7 @@ 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;
 };
-interface IngredientProps {
-    /** TODO */
-    asChild?: never;
-}
 type IntrinsicElements = KnownKeys<SvelteHTMLElements>;
-export type HtmlIngredientProps<T extends IntrinsicElements> = Assign<SvelteHTMLElements[T], IngredientProps>;
+export type HtmlProps<T extends IntrinsicElements> = SvelteHTMLElements[T];
+export type PickPartial<T, K extends keyof T> = Partial<Pick<T, K>> & Omit<T, K>;
 export {};

package/dist/utils.svelte.d.ts

@@ -1 +1,13 @@
 export declare const createUniqueId: () => string;
+export declare function ensureStyleIsString<T extends {
+    style?: null | string | Record<string, string | number>;
+}>(o: T): Omit<T, "style"> & {
+    style?: string | null;
+};
+export declare class Context<T extends Record<string, any>> {
+    private key;
+    private strict;
+    constructor(key: string, strict?: boolean);
+    get(): T;
+    set(context: T | (() => T)): any;
+}

package/dist/utils.svelte.js

@@ -1,2 +1,46 @@
+import { reflect } from '@zag-js/svelte';
+import { getContext, hasContext, setContext } from 'svelte';
 import { uid } from 'uid';
 export const createUniqueId = () => uid();
+function isObject(value) {
+    return Object.prototype.toString.call(value) === '[object Object]' && value === Object(value);
+}
+export function ensureStyleIsString(o) {
+    const c = { ...o };
+    if (isObject(c.style)) {
+        let s = '';
+        for (const k in c.style) {
+            s += `${k}:${c.style[k]};`;
+        }
+        c.style = s;
+    }
+    return c;
+}
+export class Context {
+    key;
+    strict;
+    constructor(key, strict = true) {
+        this.key = key;
+        this.strict = strict;
+    }
+    get() {
+        if (this.strict && !hasContext(this.key)) {
+            const e = new Error();
+            e.name = 'ContextError';
+            e.message = `No context found for '${this.key}'`;
+            throw e;
+        }
+        return getContext(this.key);
+    }
+    set(context) {
+        const v = $derived.by(() => {
+            if (typeof context === 'function') {
+                return reflect(context);
+            }
+            else {
+                return context;
+            }
+        });
+        return setContext(this.key, v);
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "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,12 +140,13 @@
     "postcss": "8.4.41",
     "publint": "0.2.10",
     "release-it": "17.6.0",
-    "svelte": "5.0.0-next.233",
-    "svelte-check": "3.8.5",
+    "svelte": "5.0.0-next.236",
+    "svelte-check": "3.8.6",
     "tailwindcss": "3.4.10",
     "typescript": "5.5.4",
     "vite": "5.4.2",
-    "vitest": "2.0.5"
+    "vitest": "2.0.5",
+    "vitest-axe": "0.1.0"
   },
   "release-it": {
     "git": {