ui-ingredients 0.18.2 → 0.20.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. package/dist/angle-slider/create-angle-slider.svelte.js +2 -0
  2. package/dist/combobox/combobox-trigger.svelte +15 -4
  3. package/dist/combobox/combobox-trigger.svelte.d.ts +3 -2
  4. package/dist/date-picker/date-picker-root.svelte +0 -1
  5. package/dist/environment-provider/environment-provider.svelte +41 -41
  6. package/dist/locale-provider/local-provider.svelte +26 -26
  7. package/dist/toast/toaster.svelte +60 -60
  8. package/package.json +54 -54
package/dist/angle-slider/create-angle-slider.svelte.js CHANGED
@@ -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
  }
package/dist/combobox/combobox-trigger.svelte CHANGED
@@ -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}
package/dist/combobox/combobox-trigger.svelte.d.ts CHANGED
@@ -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;
package/dist/date-picker/date-picker-root.svelte CHANGED
@@ -45,7 +45,6 @@
45
45
  'openControlled',
46
46
  'view',
47
47
  'value',
48
- 'modal',
49
48
  'format',
50
49
  'locale',
51
50
  'disabled',
package/dist/environment-provider/environment-provider.svelte CHANGED
@@ -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}
package/dist/locale-provider/local-provider.svelte CHANGED
@@ -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()}
package/dist/toast/toaster.svelte CHANGED
@@ -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"