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.
- package/dist/accordion/create-accordion.svelte.js +4 -4
- package/dist/alert-dialog/create-alert-dialog.svelte.js +3 -3
- package/dist/avatar/create-avatar.svelte.js +4 -4
- package/dist/carousel/create-carousel.svelte.js +4 -4
- package/dist/checkbox/create-checkbox.svelte.js +5 -5
- package/dist/clipboard/create-clipboard.svelte.js +4 -4
- package/dist/collapsible/create-collapsible.svelte.js +3 -3
- package/dist/color-picker/create-color-picker.svelte.js +2 -2
- package/dist/combobox/combobox-item-group.svelte +2 -2
- package/dist/combobox/create-combobox.svelte.js +2 -2
- package/dist/create-unique-id.d.ts +1 -0
- package/dist/create-unique-id.js +2 -0
- package/dist/date-picker/create-date-picker.svelte.d.ts +2 -2
- package/dist/date-picker/create-date-picker.svelte.js +2 -2
- package/dist/dialog/create-dialog.svelte.js +3 -3
- package/dist/drawer/create-drawer.svelte.js +3 -3
- package/dist/editable/create-editable.svelte.js +3 -3
- package/dist/field/create-field.svelte.js +39 -47
- package/dist/file-upload/create-file-upload.svelte.js +6 -6
- package/dist/floating-panel/create-floating-panel.svelte.js +4 -4
- package/dist/hover-card/create-hover-card.svelte.js +3 -3
- package/dist/index.d.ts +3 -1
- package/dist/index.js +3 -1
- package/dist/menu/create-menu.svelte.js +3 -3
- package/dist/menu/menu-item-group.svelte +2 -2
- package/dist/number-input/create-number-input.svelte.js +6 -6
- package/dist/pagination/create-pagination.svelte.js +4 -4
- package/dist/pin-input/create-pin-input.svelte.js +5 -5
- package/dist/popover/create-popover.svelte.js +3 -3
- package/dist/progress/create-progress.svelte.js +4 -4
- package/dist/qr-code/create-qr-code.svelte.js +4 -4
- package/dist/radio-group/create-radio-group.svelte.js +4 -4
- package/dist/rating-group/create-rating-group.svelte.js +5 -5
- package/dist/segment-group/create-segment-group.svelte.js +4 -4
- package/dist/select/create-select.svelte.js +2 -2
- package/dist/select/select-item-group.svelte +2 -2
- package/dist/signature-pad/create-signature-pad.svelte.js +4 -4
- package/dist/slider/create-slider.svelte.js +4 -4
- package/dist/splitter/create-splitter.svelte.js +4 -3
- package/dist/steps/create-steps.svelte.js +4 -4
- package/dist/switch/create-switch.svelte.js +5 -5
- package/dist/tabs/create-tabs.svelte.js +4 -4
- package/dist/tags-input/create-tags-input.svelte.js +5 -5
- package/dist/time-picker/create-time-picker.svelte.js +3 -3
- package/dist/timer/create-timer.svelte.js +4 -4
- package/dist/toast/create-toaster.svelte.js +3 -4
- package/dist/toggle-group/create-toggle-group.svelte.js +4 -4
- package/dist/tooltip/create-tooltip.svelte.js +3 -3
- package/dist/tour/create-tour.svelte.js +3 -3
- package/dist/tree-view/create-tree-view.svelte.js +4 -4
- 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 =
|
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 =
|
9
|
+
const id = createUniqueId();
|
10
10
|
const context = reflect(() => ({
|
11
|
-
|
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 =
|
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 =
|
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 =
|
9
|
+
const id = createUniqueId();
|
10
10
|
const context = reflect(() => ({
|
11
|
-
|
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 =
|
9
|
+
const id = createUniqueId();
|
10
10
|
const context = reflect(() => ({
|
11
|
-
|
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 =
|
9
|
+
const id = createUniqueId();
|
10
10
|
const context = reflect(() => ({
|
11
|
-
|
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 =
|
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 =
|
9
|
+
const id = createUniqueId();
|
10
10
|
const context = reflect(() => ({
|
11
|
-
|
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 =
|
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_ =
|
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 =
|
9
|
+
const id = createUniqueId();
|
10
10
|
const context = reflect(() => ({
|
11
|
-
|
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 =
|
9
|
+
const id = createUniqueId();
|
10
10
|
const context = reflect(() => ({
|
11
|
-
|
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
|
-
|
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 =
|
9
|
+
const id = createUniqueId();
|
10
10
|
const context = reflect(() => ({
|
11
|
-
|
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 =
|
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 =
|
9
|
+
const id = createUniqueId();
|
10
10
|
const context = reflect(() => ({
|
11
|
-
|
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 =
|
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 =
|
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 =
|
7
|
+
const id = createUniqueId();
|
8
8
|
const context = reflect(() => ({
|
9
|
-
|
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
|
6
|
-
const
|
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 =
|
9
|
+
const id = createUniqueId();
|
10
10
|
const context = reflect(() => ({
|
11
|
-
|
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 =
|
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 =
|
10
|
+
const id = createUniqueId();
|
11
11
|
const steps = $derived.by(() => {
|
12
12
|
return props.steps?.map((step) => ({
|
13
|
-
id:
|
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 =
|
9
|
+
const id = createUniqueId();
|
10
10
|
const context = reflect(() => ({
|
11
|
-
|
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.
|
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": [
|