ui-ingredients 0.12.0 → 0.13.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.
Files changed (120) hide show
  1. package/README.md +1 -1
  2. package/dist/accordion/accordion-item-trigger.svelte +1 -1
  3. package/dist/alert-dialog/alert-dialog-close-trigger.svelte +1 -1
  4. package/dist/alert-dialog/alert-dialog-trigger.svelte +1 -1
  5. package/dist/carousel/carousel-indicator.svelte +1 -1
  6. package/dist/carousel/carousel-next-trigger.svelte +1 -1
  7. package/dist/carousel/carousel-prev-trigger.svelte +1 -1
  8. package/dist/clipboard/clipboard-trigger.svelte +1 -1
  9. package/dist/collapsible/collapsible-trigger.svelte +1 -1
  10. package/dist/color-picker/color-picker-channel-slider-label.svelte +2 -5
  11. package/dist/color-picker/color-picker-channel-slider-label.svelte.d.ts +2 -3
  12. package/dist/color-picker/color-picker-swatch-trigger.svelte +1 -1
  13. package/dist/color-picker/create-color-picker.svelte.d.ts +1 -2
  14. package/dist/color-picker/create-color-picker.svelte.js +0 -1
  15. package/dist/color-picker/index.d.ts +1 -0
  16. package/dist/combobox/combobox-clear-trigger.svelte +1 -1
  17. package/dist/combobox/combobox-root.svelte +6 -10
  18. package/dist/combobox/combobox-root.svelte.d.ts +16 -19
  19. package/dist/combobox/combobox-trigger.svelte +1 -1
  20. package/dist/combobox/combobox.d.ts +1 -0
  21. package/dist/combobox/combobox.js +1 -0
  22. package/dist/combobox/create-combobox.svelte.d.ts +3 -3
  23. package/dist/combobox/create-combobox.svelte.js +1 -10
  24. package/dist/create-context.svelte.d.ts +1 -1
  25. package/dist/date-picker/create-date-picker.svelte.d.ts +1 -5
  26. package/dist/date-picker/create-date-picker.svelte.js +0 -6
  27. package/dist/date-picker/date-picker-clear-trigger.svelte +1 -1
  28. package/dist/date-picker/date-picker-day-table-cell-trigger.svelte +1 -1
  29. package/dist/date-picker/date-picker-month-table-cell-trigger.svelte +1 -1
  30. package/dist/date-picker/date-picker-next-trigger.svelte +1 -1
  31. package/dist/date-picker/date-picker-preset-trigger.svelte +1 -1
  32. package/dist/date-picker/date-picker-prev-trigger.svelte +1 -1
  33. package/dist/date-picker/date-picker-trigger.svelte +1 -1
  34. package/dist/date-picker/date-picker-view-trigger.svelte +1 -1
  35. package/dist/date-picker/date-picker-year-table-cell-trigger.svelte +1 -1
  36. package/dist/date-picker/index.d.ts +1 -0
  37. package/dist/dialog/dialog-close-trigger.svelte +1 -1
  38. package/dist/dialog/dialog-trigger.svelte +1 -1
  39. package/dist/drawer/drawer-close-trigger.svelte +1 -1
  40. package/dist/drawer/drawer-trigger.svelte +1 -1
  41. package/dist/editable/editable-cancel-trigger.svelte +1 -1
  42. package/dist/editable/editable-edit-trigger.svelte +1 -1
  43. package/dist/editable/editable-submit-trigger.svelte +1 -1
  44. package/dist/field/field-textarea.svelte +30 -4
  45. package/dist/field/field-textarea.svelte.d.ts +3 -1
  46. package/dist/file-upload/file-upload-clear-trigger.svelte +1 -1
  47. package/dist/file-upload/file-upload-item-delete-trigger.svelte +1 -1
  48. package/dist/file-upload/file-upload-trigger.svelte +1 -1
  49. package/dist/floating-panel/floating-panel-close-trigger.svelte +1 -1
  50. package/dist/floating-panel/floating-panel-drag-trigger.svelte +1 -1
  51. package/dist/floating-panel/floating-panel-maximize-trigger.svelte +1 -1
  52. package/dist/floating-panel/floating-panel-minimize-trigger.svelte +1 -1
  53. package/dist/floating-panel/floating-panel-resize-trigger.svelte +1 -1
  54. package/dist/floating-panel/floating-panel-restore-trigger.svelte +1 -1
  55. package/dist/floating-panel/floating-panel-trigger.svelte +1 -1
  56. package/dist/menu/menu-context-trigger.svelte +1 -1
  57. package/dist/menu/menu-trigger-item.svelte +1 -1
  58. package/dist/menu/menu-trigger.svelte +1 -1
  59. package/dist/number-input/number-input-decrement-trigger.svelte +1 -1
  60. package/dist/number-input/number-input-increment-trigger.svelte +1 -1
  61. package/dist/pagination/pagination-item.svelte +1 -1
  62. package/dist/pagination/pagination-next-trigger.svelte +1 -1
  63. package/dist/pagination/pagination-prev-trigger.svelte +1 -1
  64. package/dist/pin-input/create-pin-input.svelte.js +1 -0
  65. package/dist/pin-input/pin-input-clear-trigger.svelte +1 -1
  66. package/dist/popover/popover-close-trigger.svelte +1 -1
  67. package/dist/popover/popover-trigger.svelte +1 -1
  68. package/dist/select/create-select.svelte.d.ts +3 -3
  69. package/dist/select/create-select.svelte.js +1 -10
  70. package/dist/select/select-clear-trigger.svelte +1 -1
  71. package/dist/select/select-root.svelte +6 -9
  72. package/dist/select/select-root.svelte.d.ts +16 -19
  73. package/dist/select/select-trigger.svelte +1 -1
  74. package/dist/select/select.d.ts +1 -0
  75. package/dist/select/select.js +1 -0
  76. package/dist/signature-pad/signature-pad-clear-trigger.svelte +1 -1
  77. package/dist/steps/steps-next-trigger.svelte +1 -1
  78. package/dist/steps/steps-prev-trigger.svelte +1 -1
  79. package/dist/steps/steps-trigger.svelte +1 -1
  80. package/dist/tabs/tabs-trigger.svelte +1 -1
  81. package/dist/tags-input/tags-input-clear-trigger.svelte +1 -1
  82. package/dist/tags-input/tags-input-item-delete-trigger.svelte +1 -1
  83. package/dist/time-picker/index.d.ts +1 -1
  84. package/dist/time-picker/time-picker-clear-trigger.svelte +1 -1
  85. package/dist/time-picker/time-picker-trigger.svelte +1 -1
  86. package/dist/timer/timer-action-trigger.svelte +1 -1
  87. package/dist/toast/create-toaster.svelte.d.ts +3 -17
  88. package/dist/toast/toast-action-trigger.svelte +1 -1
  89. package/dist/toast/toast-close-trigger.svelte +1 -1
  90. package/dist/toggle-group/toggle-group-item.svelte +1 -1
  91. package/dist/tooltip/tooltip-trigger.svelte +1 -1
  92. package/dist/tour/tour-action-trigger.svelte +1 -1
  93. package/dist/tour/tour-close-trigger.svelte +1 -1
  94. package/dist/tour/tour-trigger.svelte +1 -1
  95. package/dist/tree-view/index.d.ts +2 -0
  96. package/dist/tree-view/tree-view-branch-content.svelte +6 -7
  97. package/dist/tree-view/tree-view-branch-control.svelte +3 -5
  98. package/dist/tree-view/tree-view-branch-indent-guide.svelte +35 -0
  99. package/dist/tree-view/tree-view-branch-indent-guide.svelte.d.ts +21 -0
  100. package/dist/tree-view/tree-view-branch-indicator.svelte +6 -8
  101. package/dist/tree-view/tree-view-branch-indicator.svelte.d.ts +1 -1
  102. package/dist/tree-view/tree-view-branch-text.svelte +3 -5
  103. package/dist/tree-view/tree-view-branch-trigger.svelte +3 -5
  104. package/dist/tree-view/tree-view-branch.svelte +11 -20
  105. package/dist/tree-view/tree-view-branch.svelte.d.ts +2 -2
  106. package/dist/tree-view/tree-view-context.svelte.d.ts +2 -10
  107. package/dist/tree-view/tree-view-context.svelte.js +1 -3
  108. package/dist/tree-view/tree-view-item-indicator.svelte +3 -5
  109. package/dist/tree-view/tree-view-item-text.svelte +3 -5
  110. package/dist/tree-view/tree-view-item.svelte +9 -22
  111. package/dist/tree-view/tree-view-item.svelte.d.ts +2 -2
  112. package/dist/tree-view/tree-view-label.svelte +0 -1
  113. package/dist/tree-view/tree-view-root.svelte +1 -0
  114. package/dist/tree-view/tree-view-tree.svelte +2 -11
  115. package/dist/tree-view/tree-view-tree.svelte.d.ts +0 -1
  116. package/dist/tree-view/tree-view.d.ts +2 -0
  117. package/dist/tree-view/tree-view.js +2 -0
  118. package/dist/tree-view/types.d.ts +4 -0
  119. package/dist/tree-view/types.js +1 -0
  120. package/package.json +58 -57
package/README.md CHANGED
@@ -13,7 +13,7 @@ npm install ui-ingredients
13
13
  ## Usage
14
14
 
15
15
  ```svelte
16
- <script>
16
+ <script lang="ts">
17
17
  import {Dialog, Portal} from 'ui-ingredients';
18
18
  import {XCloseIcon, Button} from '$lib';
19
19
  </script>
@@ -30,7 +30,7 @@
30
30
  {#if asChild}
31
31
  {@render asChild(mergedProps)}
32
32
  {:else}
33
- <button bind:this={ref} type="button" {...mergedProps}>
33
+ <button bind:this={ref} {...mergedProps}>
34
34
  {@render children?.()}
35
35
  </button>
36
36
  {/if}
@@ -26,7 +26,7 @@
26
26
  {#if asChild}
27
27
  {@render asChild(mergedProps)}
28
28
  {:else}
29
- <button bind:this={ref} type="button" {...mergedProps}>
29
+ <button bind:this={ref} {...mergedProps}>
30
30
  {@render children?.()}
31
31
  </button>
32
32
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -35,7 +35,7 @@
35
35
  {#if asChild}
36
36
  {@render asChild(mergedProps)}
37
37
  {:else}
38
- <button bind:this={ref} type="button" {...mergedProps}>
38
+ <button bind:this={ref} {...mergedProps}>
39
39
  {@render children?.()}
40
40
  </button>
41
41
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -23,7 +23,7 @@
23
23
  {#if asChild}
24
24
  {@render asChild(mergedProps)}
25
25
  {:else}
26
- <button bind:this={ref} type="button" {...mergedProps}>
26
+ <button bind:this={ref} {...mergedProps}>
27
27
  {@render children?.()}
28
28
  </button>
29
29
  {/if}
@@ -1,9 +1,8 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {ChannelProps} from '@zag-js/color-picker';
2
+ import type {HtmlIngredientProps} from '../types.js';
4
3
 
5
4
  export interface ColorPickerChannelSliderLabelProps
6
- extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ChannelProps> {}
5
+ extends HtmlIngredientProps<'div', HTMLDivElement> {}
7
6
  </script>
8
7
 
9
8
  <script lang="ts">
@@ -15,8 +14,6 @@
15
14
 
16
15
  let {
17
16
  ref = $bindable(null),
18
- channel,
19
- orientation,
20
17
  asChild,
21
18
  children,
22
19
  ...props
@@ -1,6 +1,5 @@
1
- import type { Assign, HtmlIngredientProps } from '../types.js';
2
- import type { ChannelProps } from '@zag-js/color-picker';
3
- export interface ColorPickerChannelSliderLabelProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ChannelProps> {
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface ColorPickerChannelSliderLabelProps extends HtmlIngredientProps<'div', HTMLDivElement> {
4
3
  }
5
4
  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> {
6
5
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -38,7 +38,7 @@
38
38
  {#if asChild}
39
39
  {@render asChild(mergedProps)}
40
40
  {:else}
41
- <button bind:this={ref} type="button" {...mergedProps}>
41
+ <button bind:this={ref} {...mergedProps}>
42
42
  {@render children?.()}
43
43
  </button>
44
44
  {/if}
@@ -1,9 +1,8 @@
1
1
  import type { GenericObject } from '../types.js';
2
2
  import * as colorPicker from '@zag-js/color-picker';
3
- type Omitted = 'id' | 'dir' | 'value' | 'getRootNode' | 'open.controlled';
3
+ type Omitted = 'id' | 'dir' | 'getRootNode' | 'open.controlled';
4
4
  export interface CreateColorPickerProps extends Omit<colorPicker.Context, Omitted> {
5
5
  id?: string;
6
- value?: string;
7
6
  openControlled?: boolean;
8
7
  }
9
8
  export interface CreateColorPickerReturn extends colorPicker.Api {
@@ -12,7 +12,6 @@ export function createColorPicker(props) {
12
12
  id,
13
13
  dir: locale?.dir,
14
14
  ...props,
15
- value: props.value ? colorPicker.parse(props.value) : undefined,
16
15
  getRootNode: environment?.getRootNode,
17
16
  'open.controlled': props.openControlled,
18
17
  }));
@@ -26,5 +26,6 @@ export type { ColorPickerTriggerProps } from './color-picker-trigger.svelte';
26
26
  export type { ColorPickerValueSwatchProps } from './color-picker-value-swatch.svelte';
27
27
  export type { ColorPickerValueTextProps } from './color-picker-value-text.svelte';
28
28
  export type { ColorPickerViewTextProps } from './color-picker-view.svelte';
29
+ export type { Color } from '@zag-js/color-picker';
29
30
  export { anatomy as colorPickerAnatomy } from './color-picker-anatomy.js';
30
31
  export { getColorPickerContext } from './color-picker-context.svelte.js';
@@ -26,7 +26,7 @@
26
26
  {#if asChild}
27
27
  {@render asChild(mergedProps)}
28
28
  {:else}
29
- <button bind:this={ref} type="button" {...mergedProps}>
29
+ <button bind:this={ref} {...mergedProps}>
30
30
  {@render children?.()}
31
31
  </button>
32
32
  {/if}
@@ -6,15 +6,15 @@
6
6
  CreateComboboxReturn,
7
7
  } from './create-combobox.svelte.js';
8
8
 
9
- export interface ComboboxProps<T>
9
+ export interface ComboboxProps
10
10
  extends Assign<
11
11
  HtmlIngredientProps<'div', HTMLDivElement, CreateComboboxReturn>,
12
- CreateComboboxProps<T>
12
+ CreateComboboxProps
13
13
  >,
14
14
  PresenceStrategyProps {}
15
15
  </script>
16
16
 
17
- <script lang="ts" generics="T">
17
+ <script lang="ts">
18
18
  import {mergeProps} from '../merge-props.js';
19
19
  import {createPresence} from '../presence/create-presence.svelte.js';
20
20
  import {setPresenceContext} from '../presence/presence-context.svelte.js';
@@ -28,7 +28,7 @@
28
28
  asChild,
29
29
  children,
30
30
  ...props
31
- }: ComboboxProps<T> = $props();
31
+ }: ComboboxProps = $props();
32
32
 
33
33
  let [presenceStrategyProps, rest] = $derived(
34
34
  createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
@@ -37,14 +37,14 @@
37
37
  );
38
38
 
39
39
  let [createComboboxProps, localProps] = $derived(
40
- createSplitProps<CreateComboboxProps<T>>([
40
+ createSplitProps<CreateComboboxProps>([
41
41
  'id',
42
42
  'ids',
43
43
  'name',
44
44
  'form',
45
45
  'open',
46
46
  'openControlled',
47
- 'items',
47
+ 'collection',
48
48
  'value',
49
49
  'invalid',
50
50
  'disabled',
@@ -67,9 +67,6 @@
67
67
  'allowCustomValue',
68
68
  'highlightedValue',
69
69
  'selectionBehavior',
70
- 'itemToString',
71
- 'itemToValue',
72
- 'isItemDisabled',
73
70
  'onOpenChange',
74
71
  'onValueChange',
75
72
  'onFocusOutside',
@@ -77,7 +74,6 @@
77
74
  'onInteractOutside',
78
75
  'onInputValueChange',
79
76
  'onPointerDownOutside',
80
- 'getSelectionValue',
81
77
  'scrollToIndexFn',
82
78
  ])(rest),
83
79
  );
@@ -1,26 +1,23 @@
1
1
  import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
2
2
  import type { Assign, HtmlIngredientProps } from '../types.js';
3
3
  import type { CreateComboboxProps, CreateComboboxReturn } from './create-combobox.svelte.js';
4
- export interface ComboboxProps<T> extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateComboboxReturn>, CreateComboboxProps<T>>, PresenceStrategyProps {
4
+ export interface ComboboxProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateComboboxReturn>, CreateComboboxProps>, PresenceStrategyProps {
5
5
  }
6
- declare class __sveltets_Render<T> {
7
- props(): ComboboxProps<T>;
8
- events(): {} & {
9
- [evt: string]: CustomEvent<any>;
6
+ 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> {
7
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
8
+ $$bindings?: Bindings;
9
+ } & Exports;
10
+ (internal: unknown, props: Props & {
11
+ $$events?: Events;
12
+ $$slots?: Slots;
13
+ }): Exports & {
14
+ $set?: any;
15
+ $on?: any;
10
16
  };
11
- slots(): {};
12
- bindings(): "ref";
13
- exports(): {};
17
+ z_$$bindings?: Bindings;
14
18
  }
15
- interface $$IsomorphicComponent {
16
- new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
17
- $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
18
- } & ReturnType<__sveltets_Render<T>['exports']>;
19
- <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
20
- $$events?: ReturnType<__sveltets_Render<T>['events']>;
21
- }): ReturnType<__sveltets_Render<T>['exports']>;
22
- z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
23
- }
24
- declare const ComboboxRoot: $$IsomorphicComponent;
25
- type ComboboxRoot<T> = InstanceType<typeof ComboboxRoot<T>>;
19
+ declare const ComboboxRoot: $$__sveltets_2_IsomorphicComponent<ComboboxProps, {
20
+ [evt: string]: CustomEvent<any>;
21
+ }, {}, {}, "ref">;
22
+ type ComboboxRoot = InstanceType<typeof ComboboxRoot>;
26
23
  export default ComboboxRoot;
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -1,3 +1,4 @@
1
+ export { collection } from '@zag-js/combobox';
1
2
  export { default as ClearTrigger } from './combobox-clear-trigger.svelte';
2
3
  export { default as Content } from './combobox-content.svelte';
3
4
  export { default as Control } from './combobox-control.svelte';
@@ -1,3 +1,4 @@
1
+ export { collection } from '@zag-js/combobox';
1
2
  export { default as ClearTrigger } from './combobox-clear-trigger.svelte';
2
3
  export { default as Content } from './combobox-content.svelte';
3
4
  export { default as Control } from './combobox-control.svelte';
@@ -1,10 +1,10 @@
1
1
  import * as combobox from '@zag-js/combobox';
2
- type Omitted = 'id' | 'dir' | 'collection' | 'getRootNode' | 'open.controlled';
3
- export interface CreateComboboxProps<T> extends combobox.CollectionOptions<T>, Omit<combobox.Context, Omitted> {
2
+ type Omitted = 'id' | 'dir' | 'getRootNode' | 'open.controlled';
3
+ export interface CreateComboboxProps extends Omit<combobox.Context, Omitted> {
4
4
  id?: string;
5
5
  openControlled?: boolean;
6
6
  }
7
7
  export interface CreateComboboxReturn extends combobox.Api {
8
8
  }
9
- export declare function createCombobox<T>(props: CreateComboboxProps<T>): CreateComboboxReturn;
9
+ export declare function createCombobox(props: CreateComboboxProps): CreateComboboxReturn;
10
10
  export {};
@@ -4,15 +4,7 @@ import { getFieldContext } from '../field/field-context.svelte.js';
4
4
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
5
5
  import * as combobox from '@zag-js/combobox';
6
6
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
7
- import { createSplitProps } from '@zag-js/utils';
8
7
  export function createCombobox(props) {
9
- const [collectionProps, comboboxProps] = $derived(createSplitProps([
10
- 'items',
11
- 'itemToValue',
12
- 'itemToString',
13
- 'isItemDisabled',
14
- ])(props));
15
- const collection = $derived(combobox.collection(collectionProps));
16
8
  const field = getFieldContext();
17
9
  const locale = getLocaleContext();
18
10
  const environment = getEnvironmentContext();
@@ -28,10 +20,9 @@ export function createCombobox(props) {
28
20
  disabled: field?.disabled,
29
21
  readOnly: field?.readOnly,
30
22
  required: field?.required,
31
- ...comboboxProps,
23
+ ...props,
32
24
  getRootNode: environment?.getRootNode,
33
25
  'open.controlled': props.openControlled,
34
- collection,
35
26
  }));
36
27
  const [state, send, service] = useMachine(combobox.machine(context));
37
28
  $effect(() => {
@@ -7,7 +7,7 @@ type CreateContextReturn<T, Strict extends boolean> = [
7
7
  setContext: SetContext<T>,
8
8
  hasContext: HasContext
9
9
  ];
10
- export declare function createContext<T extends GenericObject>(key: string): CreateContextReturn<T, true>;
11
10
  export declare function createContext<T extends GenericObject>(key: string, strict: true): CreateContextReturn<T, true>;
12
11
  export declare function createContext<T extends GenericObject>(key: string, strict: false): CreateContextReturn<T, false>;
12
+ export declare function createContext<T extends GenericObject>(key: string): CreateContextReturn<T, true>;
13
13
  export {};
@@ -1,12 +1,8 @@
1
1
  import * as datePicker from '@zag-js/date-picker';
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
- type Omitted = 'id' | 'dir' | 'min' | 'max' | 'value' | 'focusedValue' | 'getRootNode' | 'open.controlled';
3
+ type Omitted = 'id' | 'dir' | 'getRootNode' | 'open.controlled';
4
4
  export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
5
5
  id?: string;
6
- min?: string | Date;
7
- max?: string | Date;
8
- value?: string[] | Date[];
9
- focusedValue?: string | Date;
10
6
  openControlled?: boolean;
11
7
  }
12
8
  export interface CreateDatePickerReturn extends datePicker.Api {
@@ -13,12 +13,6 @@ export function createDatePicker(props) {
13
13
  dir: locale?.dir,
14
14
  locale: locale?.locale,
15
15
  ...props,
16
- min: props.min ? datePicker.parse(props.min) : undefined,
17
- max: props.max ? datePicker.parse(props.max) : undefined,
18
- value: props.value ? datePicker.parse(props.value) : undefined,
19
- focusedValue: props.focusedValue
20
- ? datePicker.parse(props.focusedValue)
21
- : undefined,
22
16
  getRootNode: environment?.getRootNode,
23
17
  'open.controlled': props.openControlled,
24
18
  }));
@@ -26,7 +26,7 @@
26
26
  {#if asChild}
27
27
  {@render asChild(mergedProps)}
28
28
  {:else}
29
- <button bind:this={ref} type="button" {...mergedProps}>
29
+ <button bind:this={ref} {...mergedProps}>
30
30
  {@render children?.()}
31
31
  </button>
32
32
  {/if}
@@ -30,7 +30,7 @@
30
30
  {#if asChild}
31
31
  {@render asChild(mergedProps)}
32
32
  {:else}
33
- <button bind:this={ref} type="button" {...mergedProps}>
33
+ <button bind:this={ref} {...mergedProps}>
34
34
  {@render children?.()}
35
35
  </button>
36
36
  {/if}
@@ -30,7 +30,7 @@
30
30
  {#if asChild}
31
31
  {@render asChild(mergedProps)}
32
32
  {:else}
33
- <button bind:this={ref} type="button" {...mergedProps}>
33
+ <button bind:this={ref} {...mergedProps}>
34
34
  {@render children?.()}
35
35
  </button>
36
36
  {/if}
@@ -30,7 +30,7 @@
30
30
  {#if asChild}
31
31
  {@render asChild(mergedProps)}
32
32
  {:else}
33
- <button bind:this={ref} type="button" {...mergedProps}>
33
+ <button bind:this={ref} {...mergedProps}>
34
34
  {@render children?.()}
35
35
  </button>
36
36
  {/if}
@@ -31,7 +31,7 @@
31
31
  {#if asChild}
32
32
  {@render asChild(mergedProps)}
33
33
  {:else}
34
- <button bind:this={ref} type="button" {...mergedProps}>
34
+ <button bind:this={ref} {...mergedProps}>
35
35
  {@render children?.()}
36
36
  </button>
37
37
  {/if}
@@ -30,7 +30,7 @@
30
30
  {#if asChild}
31
31
  {@render asChild(mergedProps)}
32
32
  {:else}
33
- <button bind:this={ref} type="button" {...mergedProps}>
33
+ <button bind:this={ref} {...mergedProps}>
34
34
  {@render children?.()}
35
35
  </button>
36
36
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -30,7 +30,7 @@
30
30
  {#if asChild}
31
31
  {@render asChild(mergedProps)}
32
32
  {:else}
33
- <button bind:this={ref} type="button" {...mergedProps}>
33
+ <button bind:this={ref} {...mergedProps}>
34
34
  {@render children?.()}
35
35
  </button>
36
36
  {/if}
@@ -30,7 +30,7 @@
30
30
  {#if asChild}
31
31
  {@render asChild(mergedProps)}
32
32
  {:else}
33
- <button bind:this={ref} type="button" {...mergedProps}>
33
+ <button bind:this={ref} {...mergedProps}>
34
34
  {@render children?.()}
35
35
  </button>
36
36
  {/if}
@@ -27,5 +27,6 @@ export type { DatePickerViewProps } from './date-picker-view.svelte';
27
27
  export type { DatePickerYearSelectProps } from './date-picker-year-select.svelte';
28
28
  export type { DatePickerYearTableCellTriggerProps } from './date-picker-year-table-cell-trigger.svelte';
29
29
  export type { DatePickerYearTableCellProps } from './date-picker-year-table-cell.svelte';
30
+ export type { DateValue } from '@zag-js/date-picker';
30
31
  export { anatomy as datePickerAnatomy } from './date-picker-anatomy.js';
31
32
  export { getDatePickerContext } from './date-picker-context.svelte.js';
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -26,7 +26,7 @@
26
26
  {#if asChild}
27
27
  {@render asChild(mergedProps)}
28
28
  {:else}
29
- <button bind:this={ref} type="button" {...mergedProps}>
29
+ <button bind:this={ref} {...mergedProps}>
30
30
  {@render children?.()}
31
31
  </button>
32
32
  {/if}
@@ -24,7 +24,7 @@
24
24
  {#if asChild}
25
25
  {@render asChild(mergedProps)}
26
26
  {:else}
27
- <button bind:this={ref} type="button" {...mergedProps}>
27
+ <button bind:this={ref} {...mergedProps}>
28
28
  {@render children?.()}
29
29
  </button>
30
30
  {/if}
@@ -26,7 +26,7 @@
26
26
  {#if asChild}
27
27
  {@render asChild(mergedProps)}
28
28
  {:else}
29
- <button bind:this={ref} type="button" {...mergedProps}>
29
+ <button bind:this={ref} {...mergedProps}>
30
30
  {@render children?.()}
31
31
  </button>
32
32
  {/if}
@@ -1,25 +1,51 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
+ import {autoresizeTextarea} from '@zag-js/auto-resize';
4
+ import type {Action} from 'svelte/action';
3
5
 
4
6
  export interface FieldTextareaProps
5
- extends HtmlIngredientProps<'textarea', HTMLTextAreaElement> {}
7
+ extends HtmlIngredientProps<
8
+ 'textarea',
9
+ HTMLTextAreaElement,
10
+ never,
11
+ Action<HTMLTextAreaElement>
12
+ > {
13
+ autoResize?: boolean;
14
+ }
15
+
16
+ function action(node: HTMLTextAreaElement) {
17
+ const destroy = autoresizeTextarea(node);
18
+
19
+ return {
20
+ destroy,
21
+ };
22
+ }
6
23
  </script>
7
24
 
8
25
  <script lang="ts">
9
26
  import {mergeProps} from '../merge-props.js';
10
27
  import {getFieldContext} from './field-context.svelte.js';
11
28
 
12
- let {ref = $bindable(null), asChild, ...props}: FieldTextareaProps = $props();
29
+ let {
30
+ ref = $bindable(null),
31
+ autoResize,
32
+ asChild,
33
+ ...props
34
+ }: FieldTextareaProps = $props();
13
35
 
14
36
  let field = getFieldContext();
15
37
 
16
38
  let mergedProps = $derived(
17
39
  mergeProps(field?.getTextareaProps() ?? {}, props),
18
40
  );
41
+
42
+ function wrappedAction(node: HTMLTextAreaElement) {
43
+ return autoResize ? action(node) : {};
44
+ }
19
45
  </script>
20
46
 
21
47
  {#if asChild}
22
- {@render asChild(mergedProps)}
48
+ {@render asChild(wrappedAction, mergedProps)}
23
49
  {:else}
24
- <textarea bind:this={ref} {...mergedProps}></textarea>
50
+ <textarea bind:this={ref} use:wrappedAction {...mergedProps}></textarea>
25
51
  {/if}
@@ -1,5 +1,7 @@
1
1
  import type { HtmlIngredientProps } from '../types.js';
2
- export interface FieldTextareaProps extends HtmlIngredientProps<'textarea', HTMLTextAreaElement> {
2
+ import type { Action } from 'svelte/action';
3
+ export interface FieldTextareaProps extends HtmlIngredientProps<'textarea', HTMLTextAreaElement, never, Action<HTMLTextAreaElement>> {
4
+ autoResize?: boolean;
3
5
  }
4
6
  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
7
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -26,7 +26,7 @@
26
26
  {#if asChild}
27
27
  {@render asChild(mergedProps)}
28
28
  {:else}
29
- <button bind:this={ref} type="button" {...mergedProps}>
29
+ <button bind:this={ref} {...mergedProps}>
30
30
  {@render children?.()}
31
31
  </button>
32
32
  {/if}
@@ -30,7 +30,7 @@
30
30
  {#if asChild}
31
31
  {@render asChild(mergedProps)}
32
32
  {:else}
33
- <button bind:this={ref} type="button" {...mergedProps}>
33
+ <button bind:this={ref} {...mergedProps}>
34
34
  {@render children?.()}
35
35
  </button>
36
36
  {/if}