ui-ingredients 0.18.2 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -13,6 +13,8 @@ export function createAngleSlider(props) {
13
13
  getRootNode: environment?.getRootNode,
14
14
  ...props,
15
15
  }));
16
+ // @ts-expect-error "Incompatible version of @zag-js/svelte"
16
17
  const [state, send] = useMachine(angleSlider.machine(context), { context });
18
+ // @ts-expect-error "Incompatible version of @zag-js/svelte"
17
19
  return reflect(() => angleSlider.connect(state, send, normalizeProps));
18
20
  }
@@ -1,12 +1,17 @@
1
1
  <script lang="ts" module>
2
- import type {HtmlIngredientProps} from '../types.js';
2
+ import {mergeProps} from '../merge-props.js';
3
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
4
 
4
5
  export interface ComboboxTriggerProps
5
- extends HtmlIngredientProps<'button', HTMLButtonElement> {}
6
+ extends Assign<
7
+ HtmlIngredientProps<'button', HTMLButtonElement>,
8
+ TriggerProps
9
+ > {}
6
10
  </script>
7
11
 
8
12
  <script lang="ts">
9
- import {mergeProps} from '../merge-props.js';
13
+ import type {TriggerProps} from '@zag-js/combobox';
14
+ import {createSplitProps} from '@zag-js/utils';
10
15
  import {getComboboxContext} from './combobox-context.svelte.js';
11
16
 
12
17
  let {
@@ -16,9 +21,15 @@
16
21
  ...props
17
22
  }: ComboboxTriggerProps = $props();
18
23
 
24
+ let [triggerProps, localProps] = $derived(
25
+ createSplitProps<TriggerProps>(['focusable'])(props),
26
+ );
27
+
19
28
  let combobox = getComboboxContext();
20
29
 
21
- let mergedProps = $derived(mergeProps(combobox.getTriggerProps(), props));
30
+ let mergedProps = $derived(
31
+ mergeProps(combobox.getTriggerProps(triggerProps), localProps),
32
+ );
22
33
  </script>
23
34
 
24
35
  {#if asChild}
@@ -1,6 +1,7 @@
1
- import type { HtmlIngredientProps } from '../types.js';
2
- export interface ComboboxTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
1
+ import type { Assign, HtmlIngredientProps } from '../types.js';
2
+ export interface ComboboxTriggerProps extends Assign<HtmlIngredientProps<'button', HTMLButtonElement>, TriggerProps> {
3
3
  }
4
+ import type { TriggerProps } from '@zag-js/combobox';
4
5
  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> {
5
6
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
7
  $$bindings?: Bindings;
@@ -45,7 +45,6 @@
45
45
  'openControlled',
46
46
  'view',
47
47
  'value',
48
- 'modal',
49
48
  'format',
50
49
  'locale',
51
50
  'disabled',
@@ -1,41 +1,41 @@
1
- <script lang="ts" module>
2
- import type {Snippet} from 'svelte';
3
-
4
- export interface EnvironmentProviderProps {
5
- rootNode?:
6
- | ShadowRoot
7
- | Document
8
- | Node
9
- | (() => ShadowRoot | Document | Node);
10
- children: Snippet;
11
- }
12
- </script>
13
-
14
- <script lang="ts">
15
- import {getDocument, getWindow} from '@zag-js/dom-query';
16
- import {setEnvironmentContext} from './enviroment-provider-context.svelte.js';
17
-
18
- let {rootNode, children}: EnvironmentProviderProps = $props();
19
-
20
- let elem: HTMLSpanElement | null = $state(null);
21
-
22
- function getRootNode() {
23
- if (rootNode) {
24
- return typeof rootNode === 'function' ? rootNode() : rootNode;
25
- } else {
26
- return elem?.ownerDocument ?? document;
27
- }
28
- }
29
-
30
- setEnvironmentContext({
31
- getRootNode,
32
- getDocument: () => getDocument(getRootNode()),
33
- getWindow: () => getWindow(getRootNode()),
34
- });
35
- </script>
36
-
37
- {@render children()}
38
-
39
- {#if !rootNode}
40
- <span bind:this={elem} hidden></span>
41
- {/if}
1
+ <script lang="ts" module>
2
+ import type {Snippet} from 'svelte';
3
+
4
+ export interface EnvironmentProviderProps {
5
+ rootNode?:
6
+ | ShadowRoot
7
+ | Document
8
+ | Node
9
+ | (() => ShadowRoot | Document | Node);
10
+ children: Snippet;
11
+ }
12
+ </script>
13
+
14
+ <script lang="ts">
15
+ import {getDocument, getWindow} from '@zag-js/dom-query';
16
+ import {setEnvironmentContext} from './enviroment-provider-context.svelte.js';
17
+
18
+ let {rootNode, children}: EnvironmentProviderProps = $props();
19
+
20
+ let elem: HTMLSpanElement | null = $state(null);
21
+
22
+ function getRootNode() {
23
+ if (rootNode) {
24
+ return typeof rootNode === 'function' ? rootNode() : rootNode;
25
+ } else {
26
+ return elem?.ownerDocument ?? document;
27
+ }
28
+ }
29
+
30
+ setEnvironmentContext({
31
+ getRootNode,
32
+ getDocument: () => getDocument(getRootNode()),
33
+ getWindow: () => getWindow(getRootNode()),
34
+ });
35
+ </script>
36
+
37
+ {@render children()}
38
+
39
+ {#if !rootNode}
40
+ <span bind:this={elem} hidden></span>
41
+ {/if}
@@ -1,26 +1,26 @@
1
- <script lang="ts" module>
2
- import type {Snippet} from 'svelte';
3
-
4
- export interface LocaleProviderProps {
5
- locale: string;
6
- children: Snippet;
7
- }
8
- </script>
9
-
10
- <script lang="ts">
11
- import {isRTL} from '@zag-js/i18n-utils';
12
- import {setLocaleContext} from './local-provider-context.svelte.js';
13
-
14
- let {children, ...props}: LocaleProviderProps = $props();
15
-
16
- setLocaleContext({
17
- get locale() {
18
- return props.locale;
19
- },
20
- get dir() {
21
- return isRTL(props.locale) ? 'rtl' : 'ltr';
22
- },
23
- });
24
- </script>
25
-
26
- {@render children()}
1
+ <script lang="ts" module>
2
+ import type {Snippet} from 'svelte';
3
+
4
+ export interface LocaleProviderProps {
5
+ locale: string;
6
+ children: Snippet;
7
+ }
8
+ </script>
9
+
10
+ <script lang="ts">
11
+ import {isRTL} from '@zag-js/i18n-utils';
12
+ import {setLocaleContext} from './local-provider-context.svelte.js';
13
+
14
+ let {children, ...props}: LocaleProviderProps = $props();
15
+
16
+ setLocaleContext({
17
+ get locale() {
18
+ return props.locale;
19
+ },
20
+ get dir() {
21
+ return isRTL(props.locale) ? 'rtl' : 'ltr';
22
+ },
23
+ });
24
+ </script>
25
+
26
+ {@render children()}
@@ -1,60 +1,60 @@
1
- <script lang="ts" module>
2
- import type {HtmlIngredientProps} from '../types.js';
3
- import type {CreateToastReturn} from './create-toast.svelte.js';
4
- import type {CreateToasterReturn} from './create-toaster.svelte.js';
5
-
6
- export interface ToasterProps
7
- extends HtmlIngredientProps<'div', HTMLDivElement, CreateToastReturn> {
8
- toaster: CreateToasterReturn;
9
- }
10
- </script>
11
-
12
- <script lang="ts">
13
- import {getEnvironmentContext} from '../environment-provider/enviroment-provider-context.svelte.js';
14
- import {getLocaleContext} from '../locale-provider/local-provider-context.svelte.js';
15
- import {mergeProps} from '../merge-props.js';
16
- import {Portal} from '../portal/index.js';
17
- import {normalizeProps, useMachine} from '@zag-js/svelte';
18
- import * as toast from '@zag-js/toast';
19
- import type {HTMLAttributes} from 'svelte/elements';
20
- import ToastActor from './toast-actor.svelte';
21
-
22
- let {
23
- ref = $bindable(null),
24
- toaster,
25
- children: children_,
26
- ...props
27
- }: ToasterProps = $props();
28
-
29
- const locale = getLocaleContext();
30
- const environment = getEnvironmentContext();
31
-
32
- let [snapshot, send] = useMachine(toaster.machine, {
33
- context: {
34
- dir: locale?.dir,
35
- getRootNode: environment?.getRootNode,
36
- },
37
- });
38
-
39
- let placement = $derived(snapshot.context.placement);
40
- let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
41
- let toasts = $derived(api.getToastsByPlacement(placement));
42
- let mergedProps = $derived(
43
- mergeProps<HTMLAttributes<HTMLDivElement>>(
44
- api.getGroupProps({placement}),
45
- props,
46
- ),
47
- );
48
- </script>
49
-
50
- <Portal>
51
- <div bind:this={ref} {...mergedProps}>
52
- {#each toasts as toast (toast.id)}
53
- <ToastActor actor={toast}>
54
- {#snippet children(ctx)}
55
- {@render children_?.(ctx)}
56
- {/snippet}
57
- </ToastActor>
58
- {/each}
59
- </div>
60
- </Portal>
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+ import type {CreateToastReturn} from './create-toast.svelte.js';
4
+ import type {CreateToasterReturn} from './create-toaster.svelte.js';
5
+
6
+ export interface ToasterProps
7
+ extends HtmlIngredientProps<'div', HTMLDivElement, CreateToastReturn> {
8
+ toaster: CreateToasterReturn;
9
+ }
10
+ </script>
11
+
12
+ <script lang="ts">
13
+ import {getEnvironmentContext} from '../environment-provider/enviroment-provider-context.svelte.js';
14
+ import {getLocaleContext} from '../locale-provider/local-provider-context.svelte.js';
15
+ import {mergeProps} from '../merge-props.js';
16
+ import {Portal} from '../portal/index.js';
17
+ import {normalizeProps, useMachine} from '@zag-js/svelte';
18
+ import * as toast from '@zag-js/toast';
19
+ import type {HTMLAttributes} from 'svelte/elements';
20
+ import ToastActor from './toast-actor.svelte';
21
+
22
+ let {
23
+ ref = $bindable(null),
24
+ toaster,
25
+ children: children_,
26
+ ...props
27
+ }: ToasterProps = $props();
28
+
29
+ const locale = getLocaleContext();
30
+ const environment = getEnvironmentContext();
31
+
32
+ let [snapshot, send] = useMachine(toaster.machine, {
33
+ context: {
34
+ dir: locale?.dir,
35
+ getRootNode: environment?.getRootNode,
36
+ },
37
+ });
38
+
39
+ let placement = $derived(snapshot.context.placement);
40
+ let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
41
+ let toasts = $derived(api.getToastsByPlacement(placement));
42
+ let mergedProps = $derived(
43
+ mergeProps<HTMLAttributes<HTMLDivElement>>(
44
+ api.getGroupProps({placement}),
45
+ props,
46
+ ),
47
+ );
48
+ </script>
49
+
50
+ <Portal>
51
+ <div bind:this={ref} {...mergedProps}>
52
+ {#each toasts as toast (toast.id)}
53
+ <ToastActor actor={toast}>
54
+ {#snippet children(ctx)}
55
+ {@render children_?.(ctx)}
56
+ {/snippet}
57
+ </ToastActor>
58
+ {/each}
59
+ </div>
60
+ </Portal>
package/package.json CHANGED
@@ -2,8 +2,8 @@
2
2
  "name": "ui-ingredients",
3
3
  "type": "module",
4
4
  "license": "MIT",
5
- "version": "0.18.2",
6
- "packageManager": "pnpm@9.14.4",
5
+ "version": "0.20.0",
6
+ "packageManager": "pnpm@9.15.0",
7
7
  "svelte": "./dist/index.js",
8
8
  "types": "./dist/index.d.ts",
9
9
  "exports": {
@@ -307,62 +307,62 @@
307
307
  "release": "release-it"
308
308
  },
309
309
  "dependencies": {
310
- "@zag-js/accordion": "^0.78.1",
311
- "@zag-js/anatomy": "^0.78.1",
312
- "@zag-js/angle-slider": "^0.78.1",
313
- "@zag-js/auto-resize": "^0.78.1",
314
- "@zag-js/avatar": "^0.78.1",
315
- "@zag-js/carousel": "^0.78.1",
316
- "@zag-js/checkbox": "^0.78.1",
317
- "@zag-js/clipboard": "^0.78.1",
318
- "@zag-js/collapsible": "^0.78.1",
319
- "@zag-js/color-picker": "^0.78.1",
320
- "@zag-js/combobox": "^0.78.1",
321
- "@zag-js/core": "^0.78.1",
322
- "@zag-js/date-picker": "^0.78.1",
323
- "@zag-js/dialog": "^0.78.1",
324
- "@zag-js/dom-query": "^0.78.1",
325
- "@zag-js/editable": "^0.78.1",
326
- "@zag-js/file-upload": "^0.78.1",
327
- "@zag-js/floating-panel": "^0.78.1",
328
- "@zag-js/highlight-word": "^0.78.1",
329
- "@zag-js/hover-card": "^0.78.1",
330
- "@zag-js/i18n-utils": "^0.78.1",
331
- "@zag-js/menu": "^0.78.1",
332
- "@zag-js/number-input": "^0.78.1",
333
- "@zag-js/pagination": "^0.78.1",
334
- "@zag-js/pin-input": "^0.78.1",
335
- "@zag-js/popover": "^0.78.1",
336
- "@zag-js/presence": "^0.78.1",
337
- "@zag-js/progress": "^0.78.1",
338
- "@zag-js/qr-code": "^0.78.1",
339
- "@zag-js/radio-group": "^0.78.1",
340
- "@zag-js/rating-group": "^0.78.1",
341
- "@zag-js/select": "^0.78.1",
342
- "@zag-js/signature-pad": "^0.78.1",
343
- "@zag-js/slider": "^0.78.1",
344
- "@zag-js/splitter": "^0.78.1",
345
- "@zag-js/steps": "^0.78.1",
346
- "@zag-js/svelte": "^0.78.1",
347
- "@zag-js/switch": "^0.78.1",
348
- "@zag-js/tabs": "^0.78.1",
349
- "@zag-js/tags-input": "^0.78.1",
350
- "@zag-js/time-picker": "^0.78.1",
351
- "@zag-js/timer": "^0.78.1",
352
- "@zag-js/toast": "^0.78.1",
353
- "@zag-js/toggle-group": "^0.78.1",
354
- "@zag-js/tooltip": "^0.78.1",
355
- "@zag-js/tour": "^0.78.1",
356
- "@zag-js/tree-view": "^0.78.1",
357
- "@zag-js/utils": "^0.78.1"
310
+ "@zag-js/accordion": "^0.77.1",
311
+ "@zag-js/anatomy": "^0.77.1",
312
+ "@zag-js/angle-slider": "^0.78.2",
313
+ "@zag-js/auto-resize": "^0.77.1",
314
+ "@zag-js/avatar": "^0.77.1",
315
+ "@zag-js/carousel": "^0.77.1",
316
+ "@zag-js/checkbox": "^0.77.1",
317
+ "@zag-js/clipboard": "^0.77.1",
318
+ "@zag-js/collapsible": "^0.77.1",
319
+ "@zag-js/color-picker": "^0.77.1",
320
+ "@zag-js/combobox": "^0.77.1",
321
+ "@zag-js/core": "^0.77.1",
322
+ "@zag-js/date-picker": "^0.77.1",
323
+ "@zag-js/dialog": "^0.77.1",
324
+ "@zag-js/dom-query": "^0.77.1",
325
+ "@zag-js/editable": "^0.77.1",
326
+ "@zag-js/file-upload": "^0.77.1",
327
+ "@zag-js/floating-panel": "^0.77.1",
328
+ "@zag-js/highlight-word": "^0.77.1",
329
+ "@zag-js/hover-card": "^0.77.1",
330
+ "@zag-js/i18n-utils": "^0.77.1",
331
+ "@zag-js/menu": "^0.77.1",
332
+ "@zag-js/number-input": "^0.77.1",
333
+ "@zag-js/pagination": "^0.77.1",
334
+ "@zag-js/pin-input": "^0.77.1",
335
+ "@zag-js/popover": "^0.77.1",
336
+ "@zag-js/presence": "^0.77.1",
337
+ "@zag-js/progress": "^0.77.1",
338
+ "@zag-js/qr-code": "^0.77.1",
339
+ "@zag-js/radio-group": "^0.77.1",
340
+ "@zag-js/rating-group": "^0.77.1",
341
+ "@zag-js/select": "^0.77.1",
342
+ "@zag-js/signature-pad": "^0.77.1",
343
+ "@zag-js/slider": "^0.77.1",
344
+ "@zag-js/splitter": "^0.77.1",
345
+ "@zag-js/steps": "^0.77.1",
346
+ "@zag-js/svelte": "^0.77.1",
347
+ "@zag-js/switch": "^0.77.1",
348
+ "@zag-js/tabs": "^0.77.1",
349
+ "@zag-js/tags-input": "^0.77.1",
350
+ "@zag-js/time-picker": "^0.77.1",
351
+ "@zag-js/timer": "^0.77.1",
352
+ "@zag-js/toast": "^0.77.1",
353
+ "@zag-js/toggle-group": "^0.77.1",
354
+ "@zag-js/tooltip": "^0.77.1",
355
+ "@zag-js/tour": "^0.77.1",
356
+ "@zag-js/tree-view": "^0.77.1",
357
+ "@zag-js/utils": "^0.77.1"
358
358
  },
359
359
  "peerDependencies": {
360
360
  "svelte": ">=5.0.0"
361
361
  },
362
362
  "devDependencies": {
363
363
  "@faker-js/faker": "^9.3.0",
364
- "@sveltejs/adapter-vercel": "^5.5.0",
365
- "@sveltejs/kit": "^2.9.0",
364
+ "@sveltejs/adapter-vercel": "^5.5.1",
365
+ "@sveltejs/kit": "^2.9.1",
366
366
  "@sveltejs/package": "^2.3.7",
367
367
  "@sveltejs/vite-plugin-svelte": "^5.0.1",
368
368
  "@testing-library/jest-dom": "^6.6.3",
@@ -377,13 +377,13 @@
377
377
  "publint": "^0.2.12",
378
378
  "release-it": "^17.10.0",
379
379
  "resize-observer-polyfill": "^1.5.1",
380
- "svelte": "^5.5.3",
380
+ "svelte": "^5.10.0",
381
381
  "svelte-check": "^4.1.1",
382
382
  "tailwind-merge": "^2.5.5",
383
383
  "tailwind-variants": "^0.3.0",
384
384
  "tailwindcss": "^3.4.16",
385
385
  "typescript": "^5.7.2",
386
- "vite": "^6.0.2",
386
+ "vite": "^6.0.3",
387
387
  "vitest": "^2.1.8",
388
388
  "vitest-axe": "^1.0.0-pre.3",
389
389
  "vitest-canvas-mock": "^0.3.3"