ui-ingredients 0.31.0 → 0.31.2

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.
Files changed (50) hide show
  1. package/README.md +49 -49
  2. package/dist/accordion/accordion-item.svelte +64 -64
  3. package/dist/accordion/accordion-root.svelte +65 -65
  4. package/dist/alert/alert-root.svelte +45 -45
  5. package/dist/alert-dialog/alert-dialog-root.svelte +48 -48
  6. package/dist/angle-slider/angle-slider-root.svelte +58 -58
  7. package/dist/avatar/avatar-root.svelte +45 -45
  8. package/dist/carousel/carousel-root.svelte +64 -64
  9. package/dist/clipboard/clipboard-root.svelte +52 -52
  10. package/dist/collapsible/collapsible-root.svelte +73 -73
  11. package/dist/color-picker/color-picker-root.svelte +88 -88
  12. package/dist/combobox/combobox-root.svelte +102 -102
  13. package/dist/dialog/dialog-root.svelte +48 -48
  14. package/dist/drawer/drawer-root.svelte +48 -48
  15. package/dist/editable/editable-root.svelte +72 -72
  16. package/dist/field/field-root.svelte +62 -62
  17. package/dist/file-upload/file-upload-root.svelte +68 -68
  18. package/dist/floating-panel/floating-panel-root.svelte +47 -47
  19. package/dist/highlight/highlight.svelte +42 -42
  20. package/dist/hover-card/hover-card-root.svelte +51 -51
  21. package/dist/menu/menu-root.svelte +74 -74
  22. package/dist/merge-props.js +15 -17
  23. package/dist/number-input/number-input-root.svelte +74 -74
  24. package/dist/pagination/pagination-root.svelte +57 -57
  25. package/dist/pin-input/pin-input-root.svelte +67 -67
  26. package/dist/popover/popover-root.svelte +60 -60
  27. package/dist/presence/presence.svelte +43 -43
  28. package/dist/progress/progress-root.svelte +55 -55
  29. package/dist/qr-code/qr-code-root.svelte +52 -52
  30. package/dist/radio-group/radio-group-root.svelte +55 -55
  31. package/dist/rating-group/rating-group-root.svelte +62 -62
  32. package/dist/segment-group/segment-group-root.svelte +57 -57
  33. package/dist/select/select-root.svelte +88 -88
  34. package/dist/signature-pad/signature-pad-root.svelte +59 -59
  35. package/dist/slider/slider-root.svelte +68 -68
  36. package/dist/splitter/splitter-root.svelte +52 -52
  37. package/dist/steps/steps-root.svelte +64 -64
  38. package/dist/switch/switch-root.svelte +58 -58
  39. package/dist/tabs/tabs-root.svelte +58 -58
  40. package/dist/tags-input/tags-input-root.svelte +74 -74
  41. package/dist/time-picker/time-picker-root.svelte +81 -81
  42. package/dist/timer/timer-root.svelte +55 -55
  43. package/dist/toast/toast-actor.svelte +19 -19
  44. package/dist/toggle/toggle-root.svelte +49 -49
  45. package/dist/toggle-group/toggle-group-root.svelte +57 -57
  46. package/dist/tooltip/tooltip-root.svelte +44 -44
  47. package/dist/tour/tour-root.svelte +46 -46
  48. package/dist/tree-view/tree-view-branch.svelte +63 -63
  49. package/dist/tree-view/tree-view-root.svelte +68 -68
  50. package/package.json +403 -411
@@ -1,19 +1,19 @@
1
- <script lang="ts">
2
- import type {Snippet} from 'svelte';
3
- import type {Service} from 'zagjs-legacy-toast';
4
- import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
5
- import {setToastContext} from './toast-context.svelte.js';
6
-
7
- interface Props {
8
- actor: Service;
9
- children?: Snippet<[toast: CreateToastReturn]>;
10
- }
11
-
12
- let {actor, children}: Props = $props();
13
-
14
- let toast = createToast(actor);
15
-
16
- setToastContext(toast);
17
- </script>
18
-
19
- {@render children?.(toast)}
1
+ <script lang="ts">
2
+ import type {Snippet} from 'svelte';
3
+ import type {Service} from 'zagjs-legacy-toast';
4
+ import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
5
+ import {setToastContext} from './toast-context.svelte.js';
6
+
7
+ interface Props {
8
+ actor: Service;
9
+ children?: Snippet<[toast: CreateToastReturn]>;
10
+ }
11
+
12
+ let {actor, children}: Props = $props();
13
+
14
+ let toast = createToast(actor);
15
+
16
+ setToastContext(toast);
17
+ </script>
18
+
19
+ {@render children?.(toast)}
@@ -1,49 +1,49 @@
1
- <script lang="ts" module>
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {
4
- CreateToggleProps,
5
- CreateToggleReturn,
6
- } from './create-toggle.svelte.js';
7
-
8
- export interface ToggleProps
9
- extends Assign<
10
- HtmlIngredientProps<'button', HTMLButtonElement, CreateToggleReturn>,
11
- CreateToggleProps
12
- > {}
13
- </script>
14
-
15
- <script lang="ts">
16
- import {reflect} from '@zag-js/svelte';
17
- import {createSplitProps} from '../create-split-props.js';
18
- import {mergeProps} from '../merge-props.js';
19
- import {createToggle} from './create-toggle.svelte.js';
20
- import {setToggleContext} from './toggle-context.svelte.js';
21
-
22
- let {
23
- ref = $bindable(null),
24
- asChild,
25
- children,
26
- ...props
27
- }: ToggleProps = $props();
28
-
29
- let [createToggleProps, localProps] = $derived(
30
- createSplitProps<CreateToggleProps>([
31
- 'disabled',
32
- 'onPressedChange',
33
- 'pressed',
34
- ])(props),
35
- );
36
-
37
- let toggle = createToggle(reflect(() => createToggleProps));
38
- let mergedProps = $derived(mergeProps(toggle.getRootProps(), localProps));
39
-
40
- setToggleContext(toggle);
41
- </script>
42
-
43
- {#if asChild}
44
- {@render asChild(mergedProps, toggle)}
45
- {:else}
46
- <button bind:this={ref} {...mergedProps}>
47
- {@render children?.(toggle)}
48
- </button>
49
- {/if}
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {
4
+ CreateToggleProps,
5
+ CreateToggleReturn,
6
+ } from './create-toggle.svelte.js';
7
+
8
+ export interface ToggleProps
9
+ extends Assign<
10
+ HtmlIngredientProps<'button', HTMLButtonElement, CreateToggleReturn>,
11
+ CreateToggleProps
12
+ > {}
13
+ </script>
14
+
15
+ <script lang="ts">
16
+ import {reflect} from '@zag-js/svelte';
17
+ import {createSplitProps} from '../create-split-props.js';
18
+ import {mergeProps} from '../merge-props.js';
19
+ import {createToggle} from './create-toggle.svelte.js';
20
+ import {setToggleContext} from './toggle-context.svelte.js';
21
+
22
+ let {
23
+ ref = $bindable(null),
24
+ asChild,
25
+ children,
26
+ ...props
27
+ }: ToggleProps = $props();
28
+
29
+ let [createToggleProps, localProps] = $derived(
30
+ createSplitProps<CreateToggleProps>([
31
+ 'disabled',
32
+ 'onPressedChange',
33
+ 'pressed',
34
+ ])(props),
35
+ );
36
+
37
+ let toggle = createToggle(reflect(() => createToggleProps));
38
+ let mergedProps = $derived(mergeProps(toggle.getRootProps(), localProps));
39
+
40
+ setToggleContext(toggle);
41
+ </script>
42
+
43
+ {#if asChild}
44
+ {@render asChild(mergedProps, toggle)}
45
+ {:else}
46
+ <button bind:this={ref} {...mergedProps}>
47
+ {@render children?.(toggle)}
48
+ </button>
49
+ {/if}
@@ -1,57 +1,57 @@
1
- <script lang="ts" module>
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {
4
- CreateToggleGroupProps,
5
- CreateToggleGroupReturn,
6
- } from './create-toggle-group.svelte.js';
7
-
8
- export interface ToggleGroupProps
9
- extends Assign<
10
- HtmlIngredientProps<'div', HTMLDivElement, CreateToggleGroupReturn>,
11
- CreateToggleGroupProps
12
- > {}
13
- </script>
14
-
15
- <script lang="ts">
16
- import {reflect} from '@zag-js/svelte';
17
- import {createSplitProps} from '../create-split-props.js';
18
- import {mergeProps} from '../merge-props.js';
19
- import {createToggleGroup} from './create-toggle-group.svelte.js';
20
- import {setToggleGroupContext} from './toggle-group-context.svelte.js';
21
-
22
- let {
23
- ref = $bindable(null),
24
- asChild,
25
- children,
26
- ...props
27
- }: ToggleGroupProps = $props();
28
-
29
- let [createToggleGroupProps, localProps] = $derived(
30
- createSplitProps<CreateToggleGroupProps>([
31
- 'disabled',
32
- 'id',
33
- 'ids',
34
- 'loopFocus',
35
- 'multiple',
36
- 'onValueChange',
37
- 'orientation',
38
- 'rovingFocus',
39
- 'value',
40
- ])(props),
41
- );
42
-
43
- let toggleGroup = createToggleGroup(reflect(() => createToggleGroupProps));
44
- let mergedProps = $derived(
45
- mergeProps(toggleGroup.getRootProps(), localProps),
46
- );
47
-
48
- setToggleGroupContext(toggleGroup);
49
- </script>
50
-
51
- {#if asChild}
52
- {@render asChild(mergedProps, toggleGroup)}
53
- {:else}
54
- <div bind:this={ref} {...mergedProps}>
55
- {@render children?.(toggleGroup)}
56
- </div>
57
- {/if}
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {
4
+ CreateToggleGroupProps,
5
+ CreateToggleGroupReturn,
6
+ } from './create-toggle-group.svelte.js';
7
+
8
+ export interface ToggleGroupProps
9
+ extends Assign<
10
+ HtmlIngredientProps<'div', HTMLDivElement, CreateToggleGroupReturn>,
11
+ CreateToggleGroupProps
12
+ > {}
13
+ </script>
14
+
15
+ <script lang="ts">
16
+ import {reflect} from '@zag-js/svelte';
17
+ import {createSplitProps} from '../create-split-props.js';
18
+ import {mergeProps} from '../merge-props.js';
19
+ import {createToggleGroup} from './create-toggle-group.svelte.js';
20
+ import {setToggleGroupContext} from './toggle-group-context.svelte.js';
21
+
22
+ let {
23
+ ref = $bindable(null),
24
+ asChild,
25
+ children,
26
+ ...props
27
+ }: ToggleGroupProps = $props();
28
+
29
+ let [createToggleGroupProps, localProps] = $derived(
30
+ createSplitProps<CreateToggleGroupProps>([
31
+ 'disabled',
32
+ 'id',
33
+ 'ids',
34
+ 'loopFocus',
35
+ 'multiple',
36
+ 'onValueChange',
37
+ 'orientation',
38
+ 'rovingFocus',
39
+ 'value',
40
+ ])(props),
41
+ );
42
+
43
+ let toggleGroup = createToggleGroup(reflect(() => createToggleGroupProps));
44
+ let mergedProps = $derived(
45
+ mergeProps(toggleGroup.getRootProps(), localProps),
46
+ );
47
+
48
+ setToggleGroupContext(toggleGroup);
49
+ </script>
50
+
51
+ {#if asChild}
52
+ {@render asChild(mergedProps, toggleGroup)}
53
+ {:else}
54
+ <div bind:this={ref} {...mergedProps}>
55
+ {@render children?.(toggleGroup)}
56
+ </div>
57
+ {/if}
@@ -1,44 +1,44 @@
1
- <script lang="ts" module>
2
- import type {Snippet} from 'svelte';
3
- import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
4
- import type {
5
- CreateTooltipProps,
6
- CreateTooltipReturn,
7
- } from './create-tooltip.svelte.js';
8
-
9
- export interface TooltipProps
10
- extends CreateTooltipProps,
11
- PresenceStrategyProps {
12
- children?: Snippet<[CreateTooltipReturn]>;
13
- }
14
- </script>
15
-
16
- <script lang="ts">
17
- import {reflect} from '@zag-js/svelte';
18
- import {createSplitProps} from '../create-split-props.js';
19
- import {createPresence} from '../presence/create-presence.svelte.js';
20
- import {setPresenceContext} from '../presence/presence-context.svelte.js';
21
- import {createTooltip} from './create-tooltip.svelte.js';
22
- import {setTooltipContext} from './tooltip-context.svelte.js';
23
-
24
- let {children, ...props}: TooltipProps = $props();
25
-
26
- let [presenceStrategyProps, createTooltipProps] = $derived(
27
- createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
28
- props,
29
- ),
30
- );
31
-
32
- let tooltip = createTooltip(reflect(() => createTooltipProps));
33
- let presence = createPresence(
34
- reflect(() => ({
35
- ...presenceStrategyProps,
36
- present: tooltip.open,
37
- })),
38
- );
39
-
40
- setTooltipContext(tooltip);
41
- setPresenceContext(presence);
42
- </script>
43
-
44
- {@render children?.(tooltip)}
1
+ <script lang="ts" module>
2
+ import type {Snippet} from 'svelte';
3
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
4
+ import type {
5
+ CreateTooltipProps,
6
+ CreateTooltipReturn,
7
+ } from './create-tooltip.svelte.js';
8
+
9
+ export interface TooltipProps
10
+ extends CreateTooltipProps,
11
+ PresenceStrategyProps {
12
+ children?: Snippet<[CreateTooltipReturn]>;
13
+ }
14
+ </script>
15
+
16
+ <script lang="ts">
17
+ import {reflect} from '@zag-js/svelte';
18
+ import {createSplitProps} from '../create-split-props.js';
19
+ import {createPresence} from '../presence/create-presence.svelte.js';
20
+ import {setPresenceContext} from '../presence/presence-context.svelte.js';
21
+ import {createTooltip} from './create-tooltip.svelte.js';
22
+ import {setTooltipContext} from './tooltip-context.svelte.js';
23
+
24
+ let {children, ...props}: TooltipProps = $props();
25
+
26
+ let [presenceStrategyProps, createTooltipProps] = $derived(
27
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
28
+ props,
29
+ ),
30
+ );
31
+
32
+ let tooltip = createTooltip(reflect(() => createTooltipProps));
33
+ let presence = createPresence(
34
+ reflect(() => ({
35
+ ...presenceStrategyProps,
36
+ present: tooltip.open,
37
+ })),
38
+ );
39
+
40
+ setTooltipContext(tooltip);
41
+ setPresenceContext(presence);
42
+ </script>
43
+
44
+ {@render children?.(tooltip)}
@@ -1,46 +1,46 @@
1
- <script lang="ts" module>
2
- import type {Snippet} from 'svelte';
3
- import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
4
- import type {
5
- CreateTourProps,
6
- CreateTourReturn,
7
- } from './create-tour.svelte.js';
8
-
9
- export interface TourProps extends CreateTourProps, PresenceStrategyProps {
10
- children?: Snippet<[CreateTourReturn]>;
11
- }
12
- </script>
13
-
14
- <script lang="ts">
15
- import {reflect} from '@zag-js/svelte';
16
- import {createSplitProps} from '../create-split-props.js';
17
- import {createPresence} from '../presence/create-presence.svelte.js';
18
- import {
19
- setPresenceContext,
20
- setPresenceStrategyPropsContext,
21
- } from '../presence/presence-context.svelte.js';
22
- import {createTour} from './create-tour.svelte.js';
23
- import {setTourContext} from './tour-context.svelte.js';
24
-
25
- let {children, ...props}: TourProps = $props();
26
-
27
- let [presenceStrategyProps, createTourProps] = $derived(
28
- createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
29
- props,
30
- ),
31
- );
32
-
33
- let tour = createTour(reflect(() => createTourProps));
34
- let presence = createPresence(
35
- reflect(() => ({
36
- ...presenceStrategyProps,
37
- present: tour.open,
38
- })),
39
- );
40
-
41
- setTourContext(tour);
42
- setPresenceContext(presence);
43
- setPresenceStrategyPropsContext(() => presenceStrategyProps);
44
- </script>
45
-
46
- {@render children?.(tour)}
1
+ <script lang="ts" module>
2
+ import type {Snippet} from 'svelte';
3
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
4
+ import type {
5
+ CreateTourProps,
6
+ CreateTourReturn,
7
+ } from './create-tour.svelte.js';
8
+
9
+ export interface TourProps extends CreateTourProps, PresenceStrategyProps {
10
+ children?: Snippet<[CreateTourReturn]>;
11
+ }
12
+ </script>
13
+
14
+ <script lang="ts">
15
+ import {reflect} from '@zag-js/svelte';
16
+ import {createSplitProps} from '../create-split-props.js';
17
+ import {createPresence} from '../presence/create-presence.svelte.js';
18
+ import {
19
+ setPresenceContext,
20
+ setPresenceStrategyPropsContext,
21
+ } from '../presence/presence-context.svelte.js';
22
+ import {createTour} from './create-tour.svelte.js';
23
+ import {setTourContext} from './tour-context.svelte.js';
24
+
25
+ let {children, ...props}: TourProps = $props();
26
+
27
+ let [presenceStrategyProps, createTourProps] = $derived(
28
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
29
+ props,
30
+ ),
31
+ );
32
+
33
+ let tour = createTour(reflect(() => createTourProps));
34
+ let presence = createPresence(
35
+ reflect(() => ({
36
+ ...presenceStrategyProps,
37
+ present: tour.open,
38
+ })),
39
+ );
40
+
41
+ setTourContext(tour);
42
+ setPresenceContext(presence);
43
+ setPresenceStrategyPropsContext(() => presenceStrategyProps);
44
+ </script>
45
+
46
+ {@render children?.(tour)}
@@ -1,63 +1,63 @@
1
- <script lang="ts" module>
2
- import type {NodeProps, NodeState} from '@zag-js/tree-view';
3
- import type {Assign, HtmlIngredientProps} from '../types.js';
4
-
5
- export interface TreeViewBranchProps
6
- extends Assign<
7
- HtmlIngredientProps<'div', HTMLDivElement, NodeState>,
8
- NodeProps
9
- > {}
10
- </script>
11
-
12
- <script lang="ts">
13
- import {reflect} from '@zag-js/svelte';
14
- import {setCollapsibleContext} from '../collapsible/collapsible-context.svelte.js';
15
- import {createCollapsible} from '../collapsible/create-collapsible.svelte.js';
16
- import {createSplitProps} from '../create-split-props.js';
17
- import {mergeProps} from '../merge-props.js';
18
- import {
19
- getTreeViewContext,
20
- setTreeViewNodePropsContext,
21
- } from './tree-view-context.svelte.js';
22
-
23
- let {
24
- ref = $bindable(null),
25
- asChild,
26
- children,
27
- ...props
28
- }: TreeViewBranchProps = $props();
29
-
30
- let [nodeProps, localProps] = $derived(
31
- createSplitProps<NodeProps>(['node', 'indexPath'])(props),
32
- );
33
-
34
- let treeView = getTreeViewContext();
35
- let nodeState = $derived(treeView.getNodeState(nodeProps));
36
- let branchContentProps = $derived(treeView.getBranchContentProps(nodeProps));
37
- let collapbsible = createCollapsible(
38
- reflect(() => ({
39
- ids: {content: branchContentProps.id},
40
- open: nodeState.expanded,
41
- disabled: nodeState.disabled,
42
- })),
43
- );
44
-
45
- let mergedProps = $derived(
46
- mergeProps(
47
- collapbsible.getRootProps(),
48
- treeView.getBranchProps(nodeProps),
49
- localProps,
50
- ),
51
- );
52
-
53
- setCollapsibleContext(collapbsible);
54
- setTreeViewNodePropsContext(() => nodeProps);
55
- </script>
56
-
57
- {#if asChild}
58
- {@render asChild(mergedProps, nodeState)}
59
- {:else}
60
- <div bind:this={ref} {...mergedProps}>
61
- {@render children?.(nodeState)}
62
- </div>
63
- {/if}
1
+ <script lang="ts" module>
2
+ import type {NodeProps, NodeState} from '@zag-js/tree-view';
3
+ import type {Assign, HtmlIngredientProps} from '../types.js';
4
+
5
+ export interface TreeViewBranchProps
6
+ extends Assign<
7
+ HtmlIngredientProps<'div', HTMLDivElement, NodeState>,
8
+ NodeProps
9
+ > {}
10
+ </script>
11
+
12
+ <script lang="ts">
13
+ import {reflect} from '@zag-js/svelte';
14
+ import {setCollapsibleContext} from '../collapsible/collapsible-context.svelte.js';
15
+ import {createCollapsible} from '../collapsible/create-collapsible.svelte.js';
16
+ import {createSplitProps} from '../create-split-props.js';
17
+ import {mergeProps} from '../merge-props.js';
18
+ import {
19
+ getTreeViewContext,
20
+ setTreeViewNodePropsContext,
21
+ } from './tree-view-context.svelte.js';
22
+
23
+ let {
24
+ ref = $bindable(null),
25
+ asChild,
26
+ children,
27
+ ...props
28
+ }: TreeViewBranchProps = $props();
29
+
30
+ let [nodeProps, localProps] = $derived(
31
+ createSplitProps<NodeProps>(['node', 'indexPath'])(props),
32
+ );
33
+
34
+ let treeView = getTreeViewContext();
35
+ let nodeState = $derived(treeView.getNodeState(nodeProps));
36
+ let branchContentProps = $derived(treeView.getBranchContentProps(nodeProps));
37
+ let collapbsible = createCollapsible(
38
+ reflect(() => ({
39
+ ids: {content: branchContentProps.id},
40
+ open: nodeState.expanded,
41
+ disabled: nodeState.disabled,
42
+ })),
43
+ );
44
+
45
+ let mergedProps = $derived(
46
+ mergeProps(
47
+ collapbsible.getRootProps(),
48
+ treeView.getBranchProps(nodeProps),
49
+ localProps,
50
+ ),
51
+ );
52
+
53
+ setCollapsibleContext(collapbsible);
54
+ setTreeViewNodePropsContext(() => nodeProps);
55
+ </script>
56
+
57
+ {#if asChild}
58
+ {@render asChild(mergedProps, nodeState)}
59
+ {:else}
60
+ <div bind:this={ref} {...mergedProps}>
61
+ {@render children?.(nodeState)}
62
+ </div>
63
+ {/if}