ui-ingredients 0.4.2 → 0.4.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. package/dist/accordion/create-accordion.svelte.js +4 -4
  2. package/dist/alert-dialog/create-alert-dialog.svelte.js +3 -3
  3. package/dist/avatar/create-avatar.svelte.js +4 -4
  4. package/dist/carousel/create-carousel.svelte.js +4 -4
  5. package/dist/checkbox/create-checkbox.svelte.js +5 -5
  6. package/dist/clipboard/create-clipboard.svelte.js +4 -4
  7. package/dist/collapsible/create-collapsible.svelte.js +3 -3
  8. package/dist/color-picker/create-color-picker.svelte.js +2 -2
  9. package/dist/combobox/combobox-item-group.svelte +2 -2
  10. package/dist/combobox/create-combobox.svelte.js +2 -2
  11. package/dist/create-unique-id.d.ts +1 -0
  12. package/dist/create-unique-id.js +2 -0
  13. package/dist/date-picker/create-date-picker.svelte.d.ts +2 -2
  14. package/dist/date-picker/create-date-picker.svelte.js +2 -2
  15. package/dist/dialog/create-dialog.svelte.js +3 -3
  16. package/dist/drawer/create-drawer.svelte.js +3 -3
  17. package/dist/editable/create-editable.svelte.js +3 -3
  18. package/dist/field/create-field.svelte.js +39 -47
  19. package/dist/file-upload/create-file-upload.svelte.js +6 -6
  20. package/dist/floating-panel/create-floating-panel.svelte.js +4 -4
  21. package/dist/hover-card/create-hover-card.svelte.js +3 -3
  22. package/dist/index.d.ts +3 -1
  23. package/dist/index.js +3 -1
  24. package/dist/menu/create-menu.svelte.js +3 -3
  25. package/dist/menu/menu-item-group.svelte +2 -2
  26. package/dist/number-input/create-number-input.svelte.js +6 -6
  27. package/dist/pagination/create-pagination.svelte.js +4 -4
  28. package/dist/pin-input/create-pin-input.svelte.js +5 -5
  29. package/dist/popover/create-popover.svelte.js +3 -3
  30. package/dist/progress/create-progress.svelte.js +4 -4
  31. package/dist/qr-code/create-qr-code.svelte.js +4 -4
  32. package/dist/radio-group/create-radio-group.svelte.js +4 -4
  33. package/dist/rating-group/create-rating-group.svelte.js +5 -5
  34. package/dist/segment-group/create-segment-group.svelte.js +4 -4
  35. package/dist/select/create-select.svelte.js +2 -2
  36. package/dist/select/select-item-group.svelte +2 -2
  37. package/dist/signature-pad/create-signature-pad.svelte.js +4 -4
  38. package/dist/slider/create-slider.svelte.js +4 -4
  39. package/dist/splitter/create-splitter.svelte.js +4 -3
  40. package/dist/steps/create-steps.svelte.js +4 -4
  41. package/dist/switch/create-switch.svelte.js +5 -5
  42. package/dist/tabs/create-tabs.svelte.js +4 -4
  43. package/dist/tags-input/create-tags-input.svelte.js +5 -5
  44. package/dist/time-picker/create-time-picker.svelte.js +3 -3
  45. package/dist/timer/create-timer.svelte.js +4 -4
  46. package/dist/toast/create-toaster.svelte.js +3 -4
  47. package/dist/toggle-group/create-toggle-group.svelte.js +4 -4
  48. package/dist/tooltip/create-tooltip.svelte.js +3 -3
  49. package/dist/tour/create-tour.svelte.js +3 -3
  50. package/dist/tree-view/create-tree-view.svelte.js +4 -4
  51. package/package.json +9 -1
@@ -1,28 +1,28 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getFieldContext } from '../field/field-context.svelte.js';
3
4
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
4
5
  import * as numberInput from '@zag-js/number-input';
5
6
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
6
- import { uid } from 'uid';
7
7
  export function createNumberInput(props) {
8
8
  const field = getFieldContext();
9
9
  const locale = getLocaleContext();
10
10
  const environment = getEnvironmentContext();
11
- const id = uid();
11
+ const id = createUniqueId();
12
12
  const context = reflect(() => ({
13
+ id,
14
+ dir: locale?.dir,
13
15
  ids: {
14
16
  label: field?.ids.label,
15
17
  input: field?.ids.control,
16
18
  },
19
+ locale: locale?.locale,
17
20
  invalid: field?.invalid,
18
21
  disabled: field?.disabled,
19
22
  readOnly: field?.readOnly,
20
23
  required: field?.required,
21
- ...props,
22
- id: props.id ?? id,
23
- dir: locale?.dir,
24
- locale: props.locale ?? locale?.locale,
25
24
  getRootNode: environment?.getRootNode,
25
+ ...props,
26
26
  }));
27
27
  const [state, send] = useMachine(numberInput.machine(context), { context });
28
28
  return reflect(() => {
@@ -1,17 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import * as pagination from '@zag-js/pagination';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
- import { uid } from 'uid';
6
6
  export function createPagination(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
11
+ id,
13
12
  dir: locale?.dir,
14
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
15
15
  }));
16
16
  const [state, send] = useMachine(pagination.machine(context), { context });
17
17
  return reflect(() => pagination.connect(state, send, normalizeProps));
@@ -1,15 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getFieldContext } from '../field/field-context.svelte.js';
3
4
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
4
5
  import * as pinInput from '@zag-js/pin-input';
5
6
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
6
- import { uid } from 'uid';
7
7
  export function createPinInputContext(props) {
8
8
  const field = getFieldContext();
9
9
  const locale = getLocaleContext();
10
10
  const environment = getEnvironmentContext();
11
- const id = uid();
11
+ const id = createUniqueId();
12
12
  const context = reflect(() => ({
13
+ id,
14
+ dir: locale?.dir,
13
15
  ids: {
14
16
  label: field?.ids.label,
15
17
  hiddenInput: field?.ids.control,
@@ -18,10 +20,8 @@ export function createPinInputContext(props) {
18
20
  required: field?.required,
19
21
  disabled: field?.disabled,
20
22
  readOnly: field?.readOnly,
21
- ...props,
22
- id: props.id ?? id,
23
- dir: locale?.dir,
24
23
  getRootNode: environment?.getRootNode,
24
+ ...props,
25
25
  }));
26
26
  const [state, send] = useMachine(pinInput.machine(context), { context });
27
27
  return reflect(() => {
@@ -1,18 +1,18 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import * as popover from '@zag-js/popover';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
- import { uid } from 'uid';
6
6
  export function createPopover(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
11
  id,
12
12
  dir: locale?.dir,
13
- ...props,
14
13
  getRootNode: environment?.getRootNode,
15
14
  'open.controlled': props.openControlled,
15
+ ...props,
16
16
  }));
17
17
  const [state, send] = useMachine(popover.machine(context), { context });
18
18
  return reflect(() => popover.connect(state, send, normalizeProps));
@@ -1,17 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import * as progress from '@zag-js/progress';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
- import { uid } from 'uid';
6
6
  export function createProgress(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
11
+ id,
13
12
  dir: locale?.dir,
14
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
15
15
  }));
16
16
  const [state, send] = useMachine(progress.machine(context), { context });
17
17
  return reflect(() => progress.connect(state, send, normalizeProps));
@@ -1,17 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import * as qrCode from '@zag-js/qr-code';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
- import { uid } from 'uid';
6
6
  export function createQRCode(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
11
+ id,
13
12
  dir: locale?.dir,
14
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
15
15
  }));
16
16
  const [state, send] = useMachine(qrCode.machine(context), { context });
17
17
  return reflect(() => qrCode.connect(state, send, normalizeProps));
@@ -1,17 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import * as radioGroup from '@zag-js/radio-group';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
- import { uid } from 'uid';
6
6
  export function createRadioGroup(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
11
+ id,
13
12
  dir: locale?.dir,
14
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
15
15
  }));
16
16
  const [state, send] = useMachine(radioGroup.machine(context), { context });
17
17
  return reflect(() => radioGroup.connect(state, send, normalizeProps));
@@ -1,15 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getFieldContext } from '../field/field-context.svelte.js';
3
4
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
4
5
  import * as ratingGroup from '@zag-js/rating-group';
5
6
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
6
- import { uid } from 'uid';
7
7
  export function createRatingGroup(props) {
8
8
  const field = getFieldContext();
9
9
  const locale = getLocaleContext();
10
10
  const environment = getEnvironmentContext();
11
- const id = uid();
11
+ const id = createUniqueId();
12
12
  const context = reflect(() => ({
13
+ id,
14
+ dir: locale?.dir,
13
15
  ids: {
14
16
  label: field?.ids.label,
15
17
  hiddenInput: field?.ids.control,
@@ -17,10 +19,8 @@ export function createRatingGroup(props) {
17
19
  required: field?.required,
18
20
  disabled: field?.disabled,
19
21
  readOnly: field?.readOnly,
20
- ...props,
21
- id: props.id ?? id,
22
- dir: locale?.dir,
23
22
  getRootNode: environment?.getRootNode,
23
+ ...props,
24
24
  }));
25
25
  const [state, send] = useMachine(ratingGroup.machine(context), { context });
26
26
  return reflect(() => {
@@ -1,17 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import * as segmentGroup from '@zag-js/radio-group';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
- import { uid } from 'uid';
6
6
  export function createSegmentGroup(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
11
+ id,
13
12
  dir: locale?.dir,
14
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
15
15
  }));
16
16
  const [state, send] = useMachine(segmentGroup.machine(context));
17
17
  return reflect(() => segmentGroup.connect(state, send, normalizeProps));
@@ -1,10 +1,10 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getFieldContext } from '../field/field-context.svelte.js';
3
4
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
4
5
  import * as select from '@zag-js/select';
5
6
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
6
7
  import { createSplitProps } from '@zag-js/utils';
7
- import { uid } from 'uid';
8
8
  export function createSelect(props) {
9
9
  const [collectionProps, selectProps] = $derived(createSplitProps([
10
10
  'items',
@@ -16,7 +16,7 @@ export function createSelect(props) {
16
16
  const field = getFieldContext();
17
17
  const locale = getLocaleContext();
18
18
  const environment = getEnvironmentContext();
19
- const id = uid();
19
+ const id = createUniqueId();
20
20
  const context = reflect(() => ({
21
21
  id,
22
22
  ids: {
@@ -6,8 +6,8 @@
6
6
  </script>
7
7
 
8
8
  <script lang="ts">
9
+ import {createUniqueId} from '../create-unique-id.js';
9
10
  import {mergeProps} from '../merge-props.js';
10
- import {uid} from 'uid';
11
11
  import {
12
12
  getSelectContext,
13
13
  setSelectItemGroupPropsContext,
@@ -23,7 +23,7 @@
23
23
 
24
24
  let select = getSelectContext();
25
25
 
26
- let id_ = uid();
26
+ let id_ = createUniqueId();
27
27
 
28
28
  let itemGroupProps = $derived({
29
29
  id: id ?? id_,
@@ -1,17 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import * as signaturePad from '@zag-js/signature-pad';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
- import { uid } from 'uid';
6
6
  export function createSignaturePad(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
11
+ id,
13
12
  dir: locale?.dir,
14
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
15
15
  }));
16
16
  const [state, send] = useMachine(signaturePad.machine(context), { context });
17
17
  return reflect(() => signaturePad.connect(state, send, normalizeProps));
@@ -1,17 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import * as slider from '@zag-js/slider';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
- import { uid } from 'uid';
6
6
  export function createSlider(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
11
+ id,
13
12
  dir: locale?.dir,
14
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
15
15
  }));
16
16
  const [state, send] = useMachine(slider.machine(context), { context });
17
17
  return reflect(() => slider.connect(state, send, normalizeProps));
@@ -1,16 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import * as splitter from '@zag-js/splitter';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
- import { uid } from 'uid';
6
6
  export function createSplitter(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
+ const id = createUniqueId();
9
10
  const context = reflect(() => ({
10
- ...props,
11
- id: props.id ?? uid(),
11
+ id,
12
12
  dir: locale?.dir,
13
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
14
15
  }));
15
16
  const [state, send] = useMachine(splitter.machine(context), { context });
16
17
  return reflect(() => splitter.connect(state, send, normalizeProps));
@@ -1,17 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import * as steps from '@zag-js/steps';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
- import { uid } from 'uid';
6
6
  export function createSteps(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
11
+ id,
13
12
  dir: locale?.dir,
14
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
15
15
  }));
16
16
  const [state, send] = useMachine(steps.machine(context), { context });
17
17
  return reflect(() => steps.connect(state, send, normalizeProps));
@@ -1,15 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getFieldContext } from '../field/field-context.svelte.js';
3
4
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
6
  import * as switch_ from '@zag-js/switch';
6
- import { uid } from 'uid';
7
7
  export function createSwitch(props) {
8
8
  const field = getFieldContext();
9
9
  const locale = getLocaleContext();
10
10
  const environment = getEnvironmentContext();
11
- const id = uid();
11
+ const id = createUniqueId();
12
12
  const context = reflect(() => ({
13
+ id,
14
+ dir: locale?.dir,
13
15
  ids: {
14
16
  label: field?.ids.label,
15
17
  hiddenInput: field?.ids.control,
@@ -18,10 +20,8 @@ export function createSwitch(props) {
18
20
  readOnly: field?.readOnly,
19
21
  invalid: field?.invalid,
20
22
  required: field?.required,
21
- ...props,
22
- id: props.id ?? id,
23
- dir: locale?.dir,
24
23
  getRootNode: environment?.getRootNode,
24
+ ...props,
25
25
  }));
26
26
  const [state, send] = useMachine(switch_.machine(context), { context });
27
27
  return reflect(() => {
@@ -1,17 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
4
5
  import * as tabs from '@zag-js/tabs';
5
- import { uid } from 'uid';
6
6
  export function createTabs(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
11
+ id,
13
12
  dir: locale?.dir,
14
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
15
15
  }));
16
16
  const [state, send] = useMachine(tabs.machine(context), { context });
17
17
  return reflect(() => tabs.connect(state, send, normalizeProps));
@@ -1,15 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getFieldContext } from '../field/field-context.svelte.js';
3
4
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
4
5
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
5
6
  import * as tagsInput from '@zag-js/tags-input';
6
- import { uid } from 'uid';
7
7
  export function createTagsInput(props) {
8
8
  const field = getFieldContext();
9
9
  const locale = getLocaleContext();
10
10
  const environment = getEnvironmentContext();
11
- const id = uid();
11
+ const id = createUniqueId();
12
12
  const context = reflect(() => ({
13
+ id,
14
+ dir: locale?.dir,
13
15
  ids: {
14
16
  label: field?.ids.label,
15
17
  hiddenInput: field?.ids.control,
@@ -18,10 +20,8 @@ export function createTagsInput(props) {
18
20
  disabled: field?.disabled,
19
21
  readOnly: field?.readOnly,
20
22
  required: field?.required,
21
- ...props,
22
- id: props.id ?? id,
23
- dir: locale?.dir,
24
23
  getRootNode: environment?.getRootNode,
24
+ ...props,
25
25
  }));
26
26
  const [state, send] = useMachine(tagsInput.machine(context), { context });
27
27
  return reflect(() => {
@@ -1,19 +1,19 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
4
5
  import * as timePicker from '@zag-js/time-picker';
5
- import { uid } from 'uid';
6
6
  export function createTimePicker(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
11
  id,
12
12
  dir: locale?.dir,
13
13
  locale: locale?.locale,
14
- ...props,
15
14
  getRootNode: environment?.getRootNode,
16
15
  'open.controlled': props.openControlled,
16
+ ...props,
17
17
  }));
18
18
  const [state, send] = useMachine(timePicker.machine(context), { context });
19
19
  return reflect(() => timePicker.connect(state, send, normalizeProps));
@@ -1,14 +1,14 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
3
4
  import * as timer from '@zag-js/timer';
4
- import { uid } from 'uid';
5
5
  export function createTimer(props) {
6
6
  const environment = getEnvironmentContext();
7
- const id = uid();
7
+ const id = createUniqueId();
8
8
  const context = reflect(() => ({
9
- ...props,
10
- id: props.id ?? id,
9
+ id,
11
10
  getRootNode: environment?.getRootNode,
11
+ ...props,
12
12
  }));
13
13
  const [state, send] = useMachine(timer.machine(context), { context });
14
14
  return reflect(() => timer.connect(state, send, normalizeProps));
@@ -1,10 +1,9 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { normalizeProps, reflect } from '@zag-js/svelte';
2
3
  import * as toast from '@zag-js/toast';
3
- import { uid } from 'uid';
4
4
  export function createToaster(props) {
5
- const id_ = uid();
6
- const id = $derived(props?.id ?? id_);
7
- const machine = $derived(toast.group.machine({ ...props, id }));
5
+ const id = createUniqueId();
6
+ const machine = $derived(toast.group.machine({ id, ...props }));
8
7
  return reflect(() => ({
9
8
  machine,
10
9
  ...toast.group.connect(machine, machine.send, normalizeProps),
@@ -1,17 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
4
5
  import * as toggleGroup from '@zag-js/toggle-group';
5
- import { uid } from 'uid';
6
6
  export function createToggleGroup(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
11
+ id,
13
12
  dir: locale?.dir,
14
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
15
15
  }));
16
16
  const [state, send] = useMachine(toggleGroup.machine(context), { context });
17
17
  return reflect(() => toggleGroup.connect(state, send, normalizeProps));
@@ -1,18 +1,18 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
4
5
  import * as tooltip from '@zag-js/tooltip';
5
- import { uid } from 'uid';
6
6
  export function createTooltip(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
11
  id,
12
12
  dir: locale?.dir,
13
- ...props,
14
13
  getRootNode: environment?.getRootNode,
15
14
  'open.controlled': props.openControlled,
15
+ ...props,
16
16
  }));
17
17
  const [state, send] = useMachine(tooltip.machine(context), { context });
18
18
  return reflect(() => tooltip.connect(state, send, normalizeProps));
@@ -1,16 +1,16 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
4
5
  import * as tour from '@zag-js/tour';
5
- import { uid } from 'uid';
6
6
  import { parts } from './tour-anatomy.js';
7
7
  export function createTour(props) {
8
8
  const locale = getLocaleContext();
9
9
  const environment = getEnvironmentContext();
10
- const id = uid();
10
+ const id = createUniqueId();
11
11
  const steps = $derived.by(() => {
12
12
  return props.steps?.map((step) => ({
13
- id: uid(),
13
+ id: createUniqueId(),
14
14
  ...step,
15
15
  }));
16
16
  });
@@ -1,17 +1,17 @@
1
+ import { createUniqueId } from '../create-unique-id.js';
1
2
  import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
2
3
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
3
4
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
4
5
  import * as treeView from '@zag-js/tree-view';
5
- import { uid } from 'uid';
6
6
  export function createTreeView(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
- const id = uid();
9
+ const id = createUniqueId();
10
10
  const context = reflect(() => ({
11
- ...props,
12
- id: props.id ?? id,
11
+ id,
13
12
  dir: locale?.dir,
14
13
  getRootNode: environment?.getRootNode,
14
+ ...props,
15
15
  }));
16
16
  const [state, send] = useMachine(treeView.machine(context), { context });
17
17
  return reflect(() => treeView.connect(state, send, normalizeProps));
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "ui-ingredients",
3
3
  "type": "module",
4
4
  "license": "MIT",
5
- "version": "0.4.2",
5
+ "version": "0.4.4",
6
6
  "packageManager": "pnpm@9.7.0",
7
7
  "svelte": "./dist/index.js",
8
8
  "types": "./dist/index.d.ts",
@@ -214,6 +214,14 @@
214
214
  "./merge-props": {
215
215
  "types": "./dist/merge-props.d.ts",
216
216
  "import": "./dist/merge-props.js"
217
+ },
218
+ "./create-context": {
219
+ "types": "./dist/create-context.svelte.d.ts",
220
+ "import": "./dist/create-context.svelte.js"
221
+ },
222
+ "./create-unique-id": {
223
+ "types": "./dist/create-unique-id.d.ts",
224
+ "import": "./dist/create-unique-id.js"
217
225
  }
218
226
  },
219
227
  "files": [