ui-ingredients 0.0.7 → 0.0.8
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.
- package/README.md +4 -4
- package/dist/index.d.ts +11 -0
- package/dist/index.js +8 -0
- package/dist/qr-code/context.svelte.d.ts +8 -0
- package/dist/qr-code/context.svelte.js +14 -0
- package/dist/qr-code/frame.svelte +21 -0
- package/dist/qr-code/frame.svelte.d.ts +22 -0
- package/dist/qr-code/index.d.ts +4 -0
- package/dist/qr-code/index.js +4 -0
- package/dist/qr-code/overlay.svelte +21 -0
- package/dist/qr-code/overlay.svelte.d.ts +22 -0
- package/dist/qr-code/pattern.svelte +21 -0
- package/dist/qr-code/pattern.svelte.d.ts +22 -0
- package/dist/qr-code/root.svelte +48 -0
- package/dist/qr-code/root.svelte.d.ts +25 -0
- package/dist/tags-input/clear-trigger.svelte +21 -0
- package/dist/tags-input/clear-trigger.svelte.d.ts +22 -0
- package/dist/tags-input/context.svelte.d.ts +10 -0
- package/dist/tags-input/context.svelte.js +20 -0
- package/dist/tags-input/control.svelte +21 -0
- package/dist/tags-input/control.svelte.d.ts +22 -0
- package/dist/tags-input/hidden-input.svelte +19 -0
- package/dist/tags-input/hidden-input.svelte.d.ts +22 -0
- package/dist/tags-input/index.d.ts +11 -0
- package/dist/tags-input/index.js +11 -0
- package/dist/tags-input/input.svelte +19 -0
- package/dist/tags-input/input.svelte.d.ts +22 -0
- package/dist/tags-input/item-delete-trigger.svelte +23 -0
- package/dist/tags-input/item-delete-trigger.svelte.d.ts +22 -0
- package/dist/tags-input/item-input.svelte +20 -0
- package/dist/tags-input/item-input.svelte.d.ts +22 -0
- package/dist/tags-input/item-preview.svelte +22 -0
- package/dist/tags-input/item-preview.svelte.d.ts +22 -0
- package/dist/tags-input/item-text.svelte +22 -0
- package/dist/tags-input/item-text.svelte.d.ts +22 -0
- package/dist/tags-input/item.svelte +37 -0
- package/dist/tags-input/item.svelte.d.ts +23 -0
- package/dist/tags-input/label.svelte +21 -0
- package/dist/tags-input/label.svelte.d.ts +22 -0
- package/dist/tags-input/root.svelte +97 -0
- package/dist/tags-input/root.svelte.d.ts +25 -0
- package/dist/timer/action-trigger.svelte +23 -0
- package/dist/timer/action-trigger.svelte.d.ts +23 -0
- package/dist/timer/context.svelte.d.ts +10 -0
- package/dist/timer/context.svelte.js +20 -0
- package/dist/timer/index.d.ts +6 -0
- package/dist/timer/index.js +6 -0
- package/dist/timer/item-label.svelte +22 -0
- package/dist/timer/item-label.svelte.d.ts +22 -0
- package/dist/timer/item-value.svelte +26 -0
- package/dist/timer/item-value.svelte.d.ts +22 -0
- package/dist/timer/item.svelte +24 -0
- package/dist/timer/item.svelte.d.ts +23 -0
- package/dist/timer/root.svelte +54 -0
- package/dist/timer/root.svelte.d.ts +25 -0
- package/dist/timer/separator.svelte +21 -0
- package/dist/timer/separator.svelte.d.ts +22 -0
- package/package.json +1 -1
- package/dist/qr-code/.gitkeep +0 -0
- package/dist/tags-input/.gitkeep +0 -0
- package/dist/timer/.gitkeep +0 -0
@@ -0,0 +1,22 @@
|
|
1
|
+
import type { Assign } from '../types.js';
|
2
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
3
|
+
export interface TagsInputItemDeleteTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
|
4
|
+
}
|
5
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
6
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
7
|
+
$$bindings?: Bindings;
|
8
|
+
} & Exports;
|
9
|
+
(internal: unknown, props: Props & {
|
10
|
+
$$events?: Events;
|
11
|
+
$$slots?: Slots;
|
12
|
+
}): Exports & {
|
13
|
+
$set?: any;
|
14
|
+
$on?: any;
|
15
|
+
};
|
16
|
+
z_$$bindings?: Bindings;
|
17
|
+
}
|
18
|
+
declare const ItemDeleteTrigger: $$__sveltets_2_IsomorphicComponent<TagsInputItemDeleteTriggerProps, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "">;
|
21
|
+
type ItemDeleteTrigger = InstanceType<typeof ItemDeleteTrigger>;
|
22
|
+
export default ItemDeleteTrigger;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign} from '../types.js';
|
3
|
+
import type {SvelteHTMLElements} from 'svelte/elements';
|
4
|
+
|
5
|
+
export interface TagsInputItemInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {useTagsInputContext, useTagsInputItemContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {...props}: TagsInputItemInputProps = $props();
|
13
|
+
|
14
|
+
let context = useTagsInputContext();
|
15
|
+
let itemContext = useTagsInputItemContext();
|
16
|
+
|
17
|
+
let attrs = $derived(mergeProps(props, context.getItemInputProps(itemContext)));
|
18
|
+
</script>
|
19
|
+
|
20
|
+
<input {...attrs} />
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import type { Assign } from '../types.js';
|
2
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
3
|
+
export interface TagsInputItemInputProps extends Assign<SvelteHTMLElements['input'], {}> {
|
4
|
+
}
|
5
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
6
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
7
|
+
$$bindings?: Bindings;
|
8
|
+
} & Exports;
|
9
|
+
(internal: unknown, props: Props & {
|
10
|
+
$$events?: Events;
|
11
|
+
$$slots?: Slots;
|
12
|
+
}): Exports & {
|
13
|
+
$set?: any;
|
14
|
+
$on?: any;
|
15
|
+
};
|
16
|
+
z_$$bindings?: Bindings;
|
17
|
+
}
|
18
|
+
declare const ItemInput: $$__sveltets_2_IsomorphicComponent<TagsInputItemInputProps, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "">;
|
21
|
+
type ItemInput = InstanceType<typeof ItemInput>;
|
22
|
+
export default ItemInput;
|
@@ -0,0 +1,22 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign} from '../types.js';
|
3
|
+
import type {SvelteHTMLElements} from 'svelte/elements';
|
4
|
+
|
5
|
+
export interface TagsInputItemPreviewProps extends Assign<SvelteHTMLElements['div'], {}> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {useTagsInputContext, useTagsInputItemContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {children, ...props}: TagsInputItemPreviewProps = $props();
|
13
|
+
|
14
|
+
let context = useTagsInputContext();
|
15
|
+
let itemContext = useTagsInputItemContext();
|
16
|
+
|
17
|
+
let attrs = $derived(mergeProps(props, context.getItemPreviewProps(itemContext)));
|
18
|
+
</script>
|
19
|
+
|
20
|
+
<div {...attrs}>
|
21
|
+
{@render children?.()}
|
22
|
+
</div>
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import type { Assign } from '../types.js';
|
2
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
3
|
+
export interface TagsInputItemPreviewProps extends Assign<SvelteHTMLElements['div'], {}> {
|
4
|
+
}
|
5
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
6
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
7
|
+
$$bindings?: Bindings;
|
8
|
+
} & Exports;
|
9
|
+
(internal: unknown, props: Props & {
|
10
|
+
$$events?: Events;
|
11
|
+
$$slots?: Slots;
|
12
|
+
}): Exports & {
|
13
|
+
$set?: any;
|
14
|
+
$on?: any;
|
15
|
+
};
|
16
|
+
z_$$bindings?: Bindings;
|
17
|
+
}
|
18
|
+
declare const ItemPreview: $$__sveltets_2_IsomorphicComponent<TagsInputItemPreviewProps, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "">;
|
21
|
+
type ItemPreview = InstanceType<typeof ItemPreview>;
|
22
|
+
export default ItemPreview;
|
@@ -0,0 +1,22 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign} from '../types.js';
|
3
|
+
import type {SvelteHTMLElements} from 'svelte/elements';
|
4
|
+
|
5
|
+
export interface TagsInputItemTextProps extends Assign<SvelteHTMLElements['span'], {}> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {useTagsInputContext, useTagsInputItemContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {children, ...props}: TagsInputItemTextProps = $props();
|
13
|
+
|
14
|
+
let context = useTagsInputContext();
|
15
|
+
let itemContext = useTagsInputItemContext();
|
16
|
+
|
17
|
+
let attrs = $derived(mergeProps(props, context.getItemTextProps(itemContext)));
|
18
|
+
</script>
|
19
|
+
|
20
|
+
<span {...attrs}>
|
21
|
+
{@render children?.()}
|
22
|
+
</span>
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import type { Assign } from '../types.js';
|
2
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
3
|
+
export interface TagsInputItemTextProps extends Assign<SvelteHTMLElements['span'], {}> {
|
4
|
+
}
|
5
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
6
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
7
|
+
$$bindings?: Bindings;
|
8
|
+
} & Exports;
|
9
|
+
(internal: unknown, props: Props & {
|
10
|
+
$$events?: Events;
|
11
|
+
$$slots?: Slots;
|
12
|
+
}): Exports & {
|
13
|
+
$set?: any;
|
14
|
+
$on?: any;
|
15
|
+
};
|
16
|
+
z_$$bindings?: Bindings;
|
17
|
+
}
|
18
|
+
declare const ItemText: $$__sveltets_2_IsomorphicComponent<TagsInputItemTextProps, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "">;
|
21
|
+
type ItemText = InstanceType<typeof ItemText>;
|
22
|
+
export default ItemText;
|
@@ -0,0 +1,37 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign} from '../types.js';
|
3
|
+
import type {ItemProps} from '@zag-js/tags-input';
|
4
|
+
import type {SvelteHTMLElements} from 'svelte/elements';
|
5
|
+
|
6
|
+
export interface TagsInputItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {}
|
7
|
+
</script>
|
8
|
+
|
9
|
+
<script lang="ts">
|
10
|
+
import {mergeProps} from '@zag-js/svelte';
|
11
|
+
import {setTagsInputItemContext, useTagsInputContext} from './context.svelte.js';
|
12
|
+
|
13
|
+
let {index, value, disabled, children, ...props}: TagsInputItemProps = $props();
|
14
|
+
|
15
|
+
let context = useTagsInputContext();
|
16
|
+
|
17
|
+
let attrs = $derived(
|
18
|
+
mergeProps(
|
19
|
+
props,
|
20
|
+
context.getItemProps({
|
21
|
+
index,
|
22
|
+
value,
|
23
|
+
disabled,
|
24
|
+
}),
|
25
|
+
),
|
26
|
+
);
|
27
|
+
|
28
|
+
setTagsInputItemContext({
|
29
|
+
index,
|
30
|
+
value,
|
31
|
+
disabled,
|
32
|
+
});
|
33
|
+
</script>
|
34
|
+
|
35
|
+
<div {...attrs}>
|
36
|
+
{@render children?.()}
|
37
|
+
</div>
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import type { Assign } from '../types.js';
|
2
|
+
import type { ItemProps } from '@zag-js/tags-input';
|
3
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
4
|
+
export interface TagsInputItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
|
5
|
+
}
|
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;
|
16
|
+
};
|
17
|
+
z_$$bindings?: Bindings;
|
18
|
+
}
|
19
|
+
declare const Item: $$__sveltets_2_IsomorphicComponent<TagsInputItemProps, {
|
20
|
+
[evt: string]: CustomEvent<any>;
|
21
|
+
}, {}, {}, "">;
|
22
|
+
type Item = InstanceType<typeof Item>;
|
23
|
+
export default Item;
|
@@ -0,0 +1,21 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign} from '../types.js';
|
3
|
+
import type {SvelteHTMLElements} from 'svelte/elements';
|
4
|
+
|
5
|
+
export interface TagsInputLabelProps extends Assign<SvelteHTMLElements['label'], {}> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {useTagsInputContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {children, ...props}: TagsInputLabelProps = $props();
|
13
|
+
|
14
|
+
let context = useTagsInputContext();
|
15
|
+
|
16
|
+
let attrs = $derived(mergeProps(props, context.getLabelProps()));
|
17
|
+
</script>
|
18
|
+
|
19
|
+
<label {...attrs}>
|
20
|
+
{@render children?.()}
|
21
|
+
</label>
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import type { Assign } from '../types.js';
|
2
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
3
|
+
export interface TagsInputLabelProps extends Assign<SvelteHTMLElements['label'], {}> {
|
4
|
+
}
|
5
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
6
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
7
|
+
$$bindings?: Bindings;
|
8
|
+
} & Exports;
|
9
|
+
(internal: unknown, props: Props & {
|
10
|
+
$$events?: Events;
|
11
|
+
$$slots?: Slots;
|
12
|
+
}): Exports & {
|
13
|
+
$set?: any;
|
14
|
+
$on?: any;
|
15
|
+
};
|
16
|
+
z_$$bindings?: Bindings;
|
17
|
+
}
|
18
|
+
declare const Label: $$__sveltets_2_IsomorphicComponent<TagsInputLabelProps, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "">;
|
21
|
+
type Label = InstanceType<typeof Label>;
|
22
|
+
export default Label;
|
@@ -0,0 +1,97 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign, OptionalId, WithoutChildren} from '../types.js';
|
3
|
+
import type {Snippet} from 'svelte';
|
4
|
+
import type {SvelteHTMLElements} from 'svelte/elements';
|
5
|
+
import type {
|
6
|
+
CreateTagsInputContextProps,
|
7
|
+
CreateTagsInputContextReturn,
|
8
|
+
} from './context.svelte.js';
|
9
|
+
|
10
|
+
export interface TagsInputProps
|
11
|
+
extends Assign<
|
12
|
+
WithoutChildren<SvelteHTMLElements['div']>,
|
13
|
+
OptionalId<CreateTagsInputContextProps>
|
14
|
+
> {
|
15
|
+
children?: Snippet<[CreateTagsInputContextReturn]>;
|
16
|
+
}
|
17
|
+
</script>
|
18
|
+
|
19
|
+
<script lang="ts">
|
20
|
+
import {uuid} from '../utils.svelte.js';
|
21
|
+
import {mergeProps} from '@zag-js/svelte';
|
22
|
+
import {createTagsInputContext, setTagsInputContext} from './context.svelte.js';
|
23
|
+
|
24
|
+
let {
|
25
|
+
id = uuid(),
|
26
|
+
ids,
|
27
|
+
dir,
|
28
|
+
max,
|
29
|
+
form,
|
30
|
+
name,
|
31
|
+
value,
|
32
|
+
invalid,
|
33
|
+
disabled,
|
34
|
+
editable,
|
35
|
+
readOnly,
|
36
|
+
validate,
|
37
|
+
required,
|
38
|
+
delimiter,
|
39
|
+
autoFocus,
|
40
|
+
maxLength,
|
41
|
+
addOnPaste,
|
42
|
+
inputValue,
|
43
|
+
blurBehavior,
|
44
|
+
translations,
|
45
|
+
allowOverflow,
|
46
|
+
onValueChange,
|
47
|
+
onFocusOutside,
|
48
|
+
onValueInvalid,
|
49
|
+
onInteractOutside,
|
50
|
+
onHighlightChange,
|
51
|
+
onInputValueChange,
|
52
|
+
onPointerDownOutside,
|
53
|
+
getRootNode,
|
54
|
+
children,
|
55
|
+
...props
|
56
|
+
}: TagsInputProps = $props();
|
57
|
+
|
58
|
+
let context = createTagsInputContext({
|
59
|
+
id,
|
60
|
+
ids,
|
61
|
+
dir,
|
62
|
+
max,
|
63
|
+
form,
|
64
|
+
name,
|
65
|
+
value: $state.snapshot(value),
|
66
|
+
invalid,
|
67
|
+
disabled,
|
68
|
+
editable,
|
69
|
+
readOnly,
|
70
|
+
validate,
|
71
|
+
required,
|
72
|
+
delimiter,
|
73
|
+
autoFocus,
|
74
|
+
maxLength,
|
75
|
+
addOnPaste,
|
76
|
+
inputValue,
|
77
|
+
blurBehavior,
|
78
|
+
translations,
|
79
|
+
allowOverflow,
|
80
|
+
onValueChange,
|
81
|
+
onFocusOutside,
|
82
|
+
onValueInvalid,
|
83
|
+
onInteractOutside,
|
84
|
+
onHighlightChange,
|
85
|
+
onInputValueChange,
|
86
|
+
onPointerDownOutside,
|
87
|
+
getRootNode,
|
88
|
+
});
|
89
|
+
|
90
|
+
let attrs = $derived(mergeProps(props, context.getRootProps()));
|
91
|
+
|
92
|
+
setTagsInputContext(context);
|
93
|
+
</script>
|
94
|
+
|
95
|
+
<div {...attrs}>
|
96
|
+
{@render children?.(context)}
|
97
|
+
</div>
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import type { Assign, OptionalId, WithoutChildren } from '../types.js';
|
2
|
+
import type { Snippet } from 'svelte';
|
3
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
4
|
+
import type { CreateTagsInputContextProps, CreateTagsInputContextReturn } from './context.svelte.js';
|
5
|
+
export interface TagsInputProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateTagsInputContextProps>> {
|
6
|
+
children?: Snippet<[CreateTagsInputContextReturn]>;
|
7
|
+
}
|
8
|
+
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> {
|
9
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
10
|
+
$$bindings?: Bindings;
|
11
|
+
} & Exports;
|
12
|
+
(internal: unknown, props: Props & {
|
13
|
+
$$events?: Events;
|
14
|
+
$$slots?: Slots;
|
15
|
+
}): Exports & {
|
16
|
+
$set?: any;
|
17
|
+
$on?: any;
|
18
|
+
};
|
19
|
+
z_$$bindings?: Bindings;
|
20
|
+
}
|
21
|
+
declare const Root: $$__sveltets_2_IsomorphicComponent<TagsInputProps, {
|
22
|
+
[evt: string]: CustomEvent<any>;
|
23
|
+
}, {}, {}, "">;
|
24
|
+
type Root = InstanceType<typeof Root>;
|
25
|
+
export default Root;
|
@@ -0,0 +1,23 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign} from '../types.js';
|
3
|
+
import type {ActionTriggerProps} from '@zag-js/timer';
|
4
|
+
import type {SvelteHTMLElements} from 'svelte/elements';
|
5
|
+
|
6
|
+
export interface TimerActionTriggerProps
|
7
|
+
extends Assign<SvelteHTMLElements['button'], ActionTriggerProps> {}
|
8
|
+
</script>
|
9
|
+
|
10
|
+
<script lang="ts">
|
11
|
+
import {mergeProps} from '@zag-js/svelte';
|
12
|
+
import {useTimerContext} from './context.svelte.js';
|
13
|
+
|
14
|
+
let {action, children, ...props}: TimerActionTriggerProps = $props();
|
15
|
+
|
16
|
+
let context = useTimerContext();
|
17
|
+
|
18
|
+
let attrs = $derived(mergeProps(props, context.getActionTriggerProps({action})));
|
19
|
+
</script>
|
20
|
+
|
21
|
+
<button type="button" {...attrs}>
|
22
|
+
{@render children?.()}
|
23
|
+
</button>
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import type { Assign } from '../types.js';
|
2
|
+
import type { ActionTriggerProps } from '@zag-js/timer';
|
3
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
4
|
+
export interface TimerActionTriggerProps extends Assign<SvelteHTMLElements['button'], ActionTriggerProps> {
|
5
|
+
}
|
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;
|
16
|
+
};
|
17
|
+
z_$$bindings?: Bindings;
|
18
|
+
}
|
19
|
+
declare const ActionTrigger: $$__sveltets_2_IsomorphicComponent<TimerActionTriggerProps, {
|
20
|
+
[evt: string]: CustomEvent<any>;
|
21
|
+
}, {}, {}, "">;
|
22
|
+
type ActionTrigger = InstanceType<typeof ActionTrigger>;
|
23
|
+
export default ActionTrigger;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import * as timer from '@zag-js/timer';
|
2
|
+
export interface CreateTimerContextProps extends timer.Context {
|
3
|
+
}
|
4
|
+
export interface CreateTimerContextReturn extends ReturnType<typeof createTimerContext> {
|
5
|
+
}
|
6
|
+
export declare function createTimerContext(props: CreateTimerContextProps): any;
|
7
|
+
export declare function setTimerContext(value: CreateTimerContextReturn): void;
|
8
|
+
export declare function useTimerContext(): CreateTimerContextReturn;
|
9
|
+
export declare function setTimerItemContext(value: timer.ItemProps): void;
|
10
|
+
export declare function useTimerItemContext(): timer.ItemProps;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
|
2
|
+
import * as timer from '@zag-js/timer';
|
3
|
+
import { getContext, setContext } from 'svelte';
|
4
|
+
export function createTimerContext(props) {
|
5
|
+
const [state, send] = useMachine(timer.machine(props));
|
6
|
+
const api = $derived(reflect(() => timer.connect(state, send, normalizeProps)));
|
7
|
+
return api;
|
8
|
+
}
|
9
|
+
export function setTimerContext(value) {
|
10
|
+
setContext('Timer', value);
|
11
|
+
}
|
12
|
+
export function useTimerContext() {
|
13
|
+
return getContext('Timer');
|
14
|
+
}
|
15
|
+
export function setTimerItemContext(value) {
|
16
|
+
setContext('TimerItem', value);
|
17
|
+
}
|
18
|
+
export function useTimerItemContext() {
|
19
|
+
return getContext('TimerItem');
|
20
|
+
}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
export { default as ActionTrigger, type TimerActionTriggerProps } from './action-trigger.svelte';
|
2
|
+
export { default as ItemLabel, type TimerItemLabelProps } from './item-label.svelte';
|
3
|
+
export { default as ItemValue, type TimerItemValueProps } from './item-value.svelte';
|
4
|
+
export { default as Item, type TimerItemProps } from './item.svelte';
|
5
|
+
export { default as Root, type TimerProps } from './root.svelte';
|
6
|
+
export { default as Separator, type TimerSeparatorProps } from './separator.svelte';
|
@@ -0,0 +1,6 @@
|
|
1
|
+
export { default as ActionTrigger } from './action-trigger.svelte';
|
2
|
+
export { default as ItemLabel } from './item-label.svelte';
|
3
|
+
export { default as ItemValue } from './item-value.svelte';
|
4
|
+
export { default as Item } from './item.svelte';
|
5
|
+
export { default as Root } from './root.svelte';
|
6
|
+
export { default as Separator } from './separator.svelte';
|
@@ -0,0 +1,22 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign} from '../types.js';
|
3
|
+
import type {SvelteHTMLElements} from 'svelte/elements';
|
4
|
+
|
5
|
+
export interface TimerItemLabelProps extends Assign<SvelteHTMLElements['span'], {}> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {useTimerContext, useTimerItemContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {children, ...props}: TimerItemLabelProps = $props();
|
13
|
+
|
14
|
+
let context = useTimerContext();
|
15
|
+
let itemContext = useTimerItemContext();
|
16
|
+
|
17
|
+
let attrs = $derived(mergeProps(props, context.getItemLabelProps(itemContext)));
|
18
|
+
</script>
|
19
|
+
|
20
|
+
<span {...attrs}>
|
21
|
+
{@render children?.()}
|
22
|
+
</span>
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import type { Assign } from '../types.js';
|
2
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
3
|
+
export interface TimerItemLabelProps extends Assign<SvelteHTMLElements['span'], {}> {
|
4
|
+
}
|
5
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
6
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
7
|
+
$$bindings?: Bindings;
|
8
|
+
} & Exports;
|
9
|
+
(internal: unknown, props: Props & {
|
10
|
+
$$events?: Events;
|
11
|
+
$$slots?: Slots;
|
12
|
+
}): Exports & {
|
13
|
+
$set?: any;
|
14
|
+
$on?: any;
|
15
|
+
};
|
16
|
+
z_$$bindings?: Bindings;
|
17
|
+
}
|
18
|
+
declare const ItemLabel: $$__sveltets_2_IsomorphicComponent<TimerItemLabelProps, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "">;
|
21
|
+
type ItemLabel = InstanceType<typeof ItemLabel>;
|
22
|
+
export default ItemLabel;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign} from '../types.js';
|
3
|
+
import type {SvelteHTMLElements} from 'svelte/elements';
|
4
|
+
|
5
|
+
export interface TimerItemValueProps extends Assign<SvelteHTMLElements['span'], {}> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {useTimerContext, useTimerItemContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {children, ...props}: TimerItemValueProps = $props();
|
13
|
+
|
14
|
+
let context = useTimerContext();
|
15
|
+
let itemContext = useTimerItemContext();
|
16
|
+
|
17
|
+
let attrs = $derived(mergeProps(props, context.getItemValueProps(itemContext)));
|
18
|
+
</script>
|
19
|
+
|
20
|
+
<span {...attrs}>
|
21
|
+
{#if children}
|
22
|
+
{@render children?.()}
|
23
|
+
{:else}
|
24
|
+
{context.formattedTime[itemContext.type]}
|
25
|
+
{/if}
|
26
|
+
</span>
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import type { Assign } from '../types.js';
|
2
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
3
|
+
export interface TimerItemValueProps extends Assign<SvelteHTMLElements['span'], {}> {
|
4
|
+
}
|
5
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
6
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
7
|
+
$$bindings?: Bindings;
|
8
|
+
} & Exports;
|
9
|
+
(internal: unknown, props: Props & {
|
10
|
+
$$events?: Events;
|
11
|
+
$$slots?: Slots;
|
12
|
+
}): Exports & {
|
13
|
+
$set?: any;
|
14
|
+
$on?: any;
|
15
|
+
};
|
16
|
+
z_$$bindings?: Bindings;
|
17
|
+
}
|
18
|
+
declare const ItemValue: $$__sveltets_2_IsomorphicComponent<TimerItemValueProps, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "">;
|
21
|
+
type ItemValue = InstanceType<typeof ItemValue>;
|
22
|
+
export default ItemValue;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign} from '../types.js';
|
3
|
+
import type {ItemProps} from '@zag-js/timer';
|
4
|
+
import type {SvelteHTMLElements} from 'svelte/elements';
|
5
|
+
|
6
|
+
export interface TimerItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {}
|
7
|
+
</script>
|
8
|
+
|
9
|
+
<script lang="ts">
|
10
|
+
import {mergeProps} from '@zag-js/svelte';
|
11
|
+
import {setTimerItemContext, useTimerContext} from './context.svelte.js';
|
12
|
+
|
13
|
+
let {type, children, ...props}: TimerItemProps = $props();
|
14
|
+
|
15
|
+
let context = useTimerContext();
|
16
|
+
|
17
|
+
let attrs = $derived(mergeProps(props, context.getItemProps({type})));
|
18
|
+
|
19
|
+
setTimerItemContext({type});
|
20
|
+
</script>
|
21
|
+
|
22
|
+
<div {...attrs}>
|
23
|
+
{@render children?.()}
|
24
|
+
</div>
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import type { Assign } from '../types.js';
|
2
|
+
import type { ItemProps } from '@zag-js/timer';
|
3
|
+
import type { SvelteHTMLElements } from 'svelte/elements';
|
4
|
+
export interface TimerItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
|
5
|
+
}
|
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;
|
16
|
+
};
|
17
|
+
z_$$bindings?: Bindings;
|
18
|
+
}
|
19
|
+
declare const Item: $$__sveltets_2_IsomorphicComponent<TimerItemProps, {
|
20
|
+
[evt: string]: CustomEvent<any>;
|
21
|
+
}, {}, {}, "">;
|
22
|
+
type Item = InstanceType<typeof Item>;
|
23
|
+
export default Item;
|