ui-ingredients 0.0.7 → 0.0.8
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|