ui-ingredients 0.0.11 → 0.0.12
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -1
- package/dist/accordion/context.svelte.d.ts +2 -2
- package/dist/accordion/context.svelte.js +2 -2
- package/dist/accordion/item-content.svelte +28 -27
- package/dist/accordion/item-indicator.svelte +28 -27
- package/dist/accordion/item-trigger.svelte +28 -27
- package/dist/accordion/item.svelte +48 -48
- package/dist/accordion/root.svelte +68 -63
- package/dist/avatar/fallback.svelte +20 -20
- package/dist/avatar/image.svelte +18 -18
- package/dist/avatar/root.svelte +53 -48
- package/dist/carousel/indicator-group.svelte +21 -21
- package/dist/carousel/indicator.svelte +30 -30
- package/dist/carousel/item-group.svelte +20 -20
- package/dist/carousel/item.svelte +27 -27
- package/dist/carousel/next-trigger.svelte +21 -21
- package/dist/carousel/prev-trigger.svelte +21 -21
- package/dist/carousel/root.svelte +65 -60
- package/dist/carousel/viewport.svelte +20 -20
- package/dist/checkbox/control.svelte +20 -20
- package/dist/checkbox/hidden-input.svelte +19 -19
- package/dist/checkbox/indicator.svelte +20 -20
- package/dist/checkbox/label.svelte +20 -20
- package/dist/checkbox/root.svelte +69 -64
- package/dist/clipboard/control.svelte +20 -20
- package/dist/clipboard/indicator.svelte +22 -22
- package/dist/clipboard/input.svelte +18 -18
- package/dist/clipboard/label.svelte +20 -20
- package/dist/clipboard/root.svelte +56 -53
- package/dist/clipboard/trigger.svelte +21 -21
- package/dist/collapsible/content.svelte +20 -20
- package/dist/collapsible/root.svelte +64 -59
- package/dist/collapsible/trigger.svelte +19 -19
- package/dist/combobox/clear-trigger.svelte +21 -21
- package/dist/combobox/content.svelte +20 -20
- package/dist/combobox/context.svelte.d.ts +4 -4
- package/dist/combobox/context.svelte.js +4 -4
- package/dist/combobox/control.svelte +20 -20
- package/dist/combobox/input.svelte +18 -18
- package/dist/combobox/item-group-label.svelte +33 -32
- package/dist/combobox/item-group.svelte +32 -32
- package/dist/combobox/item-indicator.svelte +28 -27
- package/dist/combobox/item-text.svelte +29 -30
- package/dist/combobox/item.svelte +48 -48
- package/dist/combobox/label.svelte +20 -20
- package/dist/combobox/list.svelte +20 -20
- package/dist/combobox/positioner.svelte +20 -20
- package/dist/combobox/root.svelte +129 -124
- package/dist/combobox/trigger.svelte +20 -20
- package/dist/dialog/backdrop.svelte +20 -20
- package/dist/dialog/close-trigger.svelte +21 -21
- package/dist/dialog/content.svelte +20 -20
- package/dist/dialog/description.svelte +20 -20
- package/dist/dialog/positioner.svelte +20 -20
- package/dist/dialog/root.svelte +35 -28
- package/dist/dialog/title.svelte +20 -20
- package/dist/dialog/trigger.svelte +20 -20
- package/dist/editable/area.svelte +20 -20
- package/dist/editable/cancel-trigger.svelte +21 -21
- package/dist/editable/control.svelte +20 -20
- package/dist/editable/edit-trigger.svelte +21 -21
- package/dist/editable/input.svelte +18 -18
- package/dist/editable/label.svelte +20 -20
- package/dist/editable/preview.svelte +24 -24
- package/dist/editable/root.svelte +36 -29
- package/dist/editable/submit-trigger.svelte +21 -21
- package/dist/environment-provider/context.svelte.d.ts +14 -0
- package/dist/environment-provider/context.svelte.js +25 -0
- package/dist/environment-provider/index.d.ts +2 -0
- package/dist/environment-provider/index.js +2 -0
- package/dist/environment-provider/root.svelte +21 -0
- package/dist/environment-provider/root.svelte.d.ts +23 -0
- package/dist/hover-card/arrow-tip.svelte +20 -20
- package/dist/hover-card/arrow.svelte +20 -20
- package/dist/hover-card/content.svelte +20 -20
- package/dist/hover-card/positioner.svelte +21 -21
- package/dist/hover-card/root.svelte +39 -32
- package/dist/hover-card/trigger.svelte +20 -20
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/locale-provider/context.svelte.d.ts +11 -0
- package/dist/locale-provider/context.svelte.js +23 -0
- package/dist/locale-provider/index.d.ts +2 -0
- package/dist/locale-provider/index.js +2 -0
- package/dist/locale-provider/root.svelte +20 -0
- package/dist/locale-provider/root.svelte.d.ts +23 -0
- package/dist/menu/arrow-tip.svelte.d.ts +26 -0
- package/dist/menu/arrow.svelte +0 -0
- package/dist/menu/arrow.svelte.d.ts +26 -0
- package/dist/menu/content.svelte +0 -0
- package/dist/menu/content.svelte.d.ts +26 -0
- package/dist/menu/context-trigger.svelte +0 -0
- package/dist/menu/context-trigger.svelte.d.ts +26 -0
- package/dist/menu/context.svelte.d.ts +10 -0
- package/dist/menu/context.svelte.js +20 -0
- package/dist/menu/index.d.ts +1 -0
- package/dist/menu/index.js +1 -0
- package/dist/menu/indicator.svelte +0 -0
- package/dist/menu/indicator.svelte.d.ts +26 -0
- package/dist/menu/item-group-label.svelte +0 -0
- package/dist/menu/item-group-label.svelte.d.ts +26 -0
- package/dist/menu/item-group.svelte +0 -0
- package/dist/menu/item-group.svelte.d.ts +26 -0
- package/dist/menu/item-indicator.svelte +0 -0
- package/dist/menu/item-indicator.svelte.d.ts +26 -0
- package/dist/menu/item-text.svelte +0 -0
- package/dist/menu/item-text.svelte.d.ts +26 -0
- package/dist/menu/item.svelte +0 -0
- package/dist/menu/item.svelte.d.ts +26 -0
- package/dist/menu/menu.d.ts +1 -0
- package/dist/menu/menu.js +1 -0
- package/dist/menu/option-item.svelte +0 -0
- package/dist/menu/option-item.svelte.d.ts +26 -0
- package/dist/menu/positioner.svelte +0 -0
- package/dist/menu/positioner.svelte.d.ts +26 -0
- package/dist/menu/root.svelte +0 -0
- package/dist/menu/root.svelte.d.ts +26 -0
- package/dist/menu/separator.svelte +0 -0
- package/dist/menu/separator.svelte.d.ts +26 -0
- package/dist/menu/trigger-item.svelte +0 -0
- package/dist/menu/trigger-item.svelte.d.ts +26 -0
- package/dist/menu/trigger.svelte +0 -0
- package/dist/menu/trigger.svelte.d.ts +26 -0
- package/dist/number-input/control.svelte +21 -21
- package/dist/number-input/decrement-trigger.svelte +21 -21
- package/dist/number-input/increment-trigger.svelte +21 -21
- package/dist/number-input/input.svelte +18 -18
- package/dist/number-input/label.svelte +20 -20
- package/dist/number-input/root.svelte +100 -95
- package/dist/number-input/scrubber.svelte +21 -21
- package/dist/pagination/ellipsis.svelte +22 -22
- package/dist/pagination/item.svelte +30 -30
- package/dist/pagination/next-trigger.svelte +21 -21
- package/dist/pagination/prev-trigger.svelte +21 -21
- package/dist/pagination/root.svelte +70 -65
- package/dist/pin-input/clear-trigger.svelte +25 -25
- package/dist/pin-input/hidden-input.svelte +19 -19
- package/dist/pin-input/input.svelte +20 -20
- package/dist/pin-input/label.svelte +20 -20
- package/dist/pin-input/root.svelte +89 -84
- package/dist/popover/arrow-tip.svelte +20 -20
- package/dist/popover/arrow.svelte +20 -20
- package/dist/popover/close-trigger.svelte +21 -21
- package/dist/popover/content.svelte +20 -20
- package/dist/popover/description.svelte +20 -20
- package/dist/popover/positioner.svelte +20 -20
- package/dist/popover/root.svelte +35 -28
- package/dist/popover/title.svelte +20 -20
- package/dist/popover/trigger.svelte +20 -20
- package/dist/portal/root.svelte +20 -20
- package/dist/presence/root.svelte +46 -46
- package/dist/progress/circle-range.svelte +21 -21
- package/dist/progress/circle-track.svelte +21 -21
- package/dist/progress/circle.svelte +20 -20
- package/dist/progress/label.svelte +20 -20
- package/dist/progress/range.svelte +20 -20
- package/dist/progress/root.svelte +61 -56
- package/dist/progress/track.svelte +20 -20
- package/dist/progress/value-text.svelte +24 -24
- package/dist/qr-code/frame.svelte +20 -20
- package/dist/qr-code/overlay.svelte +20 -20
- package/dist/qr-code/pattern.svelte +20 -20
- package/dist/qr-code/root.svelte +55 -50
- package/dist/radio-group/context.svelte.d.ts +2 -2
- package/dist/radio-group/context.svelte.js +2 -2
- package/dist/radio-group/indicator.svelte +21 -21
- package/dist/radio-group/item-control.svelte +28 -27
- package/dist/radio-group/item-hidden-input.svelte +26 -25
- package/dist/radio-group/item-text.svelte +26 -27
- package/dist/radio-group/item.svelte +58 -58
- package/dist/radio-group/label.svelte +20 -20
- package/dist/radio-group/root.svelte +68 -63
- package/dist/rating-group/context.svelte.d.ts +0 -2
- package/dist/rating-group/context.svelte.js +0 -6
- package/dist/rating-group/control.svelte +20 -20
- package/dist/rating-group/hidden-input.svelte +19 -19
- package/dist/rating-group/item.svelte +27 -27
- package/dist/rating-group/label.svelte +20 -20
- package/dist/rating-group/root.svelte +78 -73
- package/dist/segment-group/context.svelte.d.ts +10 -0
- package/dist/segment-group/context.svelte.js +43 -0
- package/dist/segment-group/index.d.ts +9 -2
- package/dist/segment-group/index.js +2 -2
- package/dist/segment-group/indicator.svelte +21 -0
- package/dist/segment-group/indicator.svelte.d.ts +21 -0
- package/dist/segment-group/item-control.svelte +28 -0
- package/dist/segment-group/item-control.svelte.d.ts +21 -0
- package/dist/segment-group/item-hidden-input.svelte +26 -0
- package/dist/segment-group/item-hidden-input.svelte.d.ts +21 -0
- package/dist/segment-group/item-text.svelte +26 -0
- package/dist/segment-group/item-text.svelte.d.ts +21 -0
- package/dist/segment-group/item.svelte +58 -0
- package/dist/segment-group/item.svelte.d.ts +24 -0
- package/dist/segment-group/label.svelte +20 -0
- package/dist/segment-group/label.svelte.d.ts +21 -0
- package/dist/segment-group/root.svelte +68 -0
- package/dist/segment-group/root.svelte.d.ts +24 -0
- package/dist/segment-group/segment-group.d.ts +7 -0
- package/dist/segment-group/segment-group.js +7 -0
- package/dist/select/clear-trigger.svelte +21 -21
- package/dist/select/content.svelte +20 -20
- package/dist/select/context.svelte.d.ts +4 -7
- package/dist/select/context.svelte.js +4 -4
- package/dist/select/control.svelte +20 -20
- package/dist/select/hidden-select.svelte +21 -21
- package/dist/select/indicator.svelte +20 -20
- package/dist/select/item-group-label.svelte +31 -30
- package/dist/select/item-group.svelte +32 -32
- package/dist/select/item-indicator.svelte +28 -24
- package/dist/select/item-text.svelte +29 -27
- package/dist/select/item.svelte +48 -45
- package/dist/select/label.svelte +20 -20
- package/dist/select/list.svelte +20 -20
- package/dist/select/positioner.svelte +20 -20
- package/dist/select/root.svelte +103 -98
- package/dist/select/trigger.svelte +20 -20
- package/dist/select/value-text.svelte +26 -26
- package/dist/slider/context.svelte.d.ts +2 -2
- package/dist/slider/context.svelte.js +2 -2
- package/dist/slider/control.svelte +20 -20
- package/dist/slider/hidden-input.svelte +26 -22
- package/dist/slider/label.svelte +20 -20
- package/dist/slider/marker-group.svelte +20 -20
- package/dist/slider/marker.svelte +29 -29
- package/dist/slider/range.svelte +20 -20
- package/dist/slider/root.svelte +91 -86
- package/dist/slider/thumb.svelte +38 -35
- package/dist/slider/track.svelte +20 -20
- package/dist/slider/value-text.svelte +24 -24
- package/dist/steps/content.svelte +22 -22
- package/dist/steps/context.svelte.d.ts +2 -2
- package/dist/steps/context.svelte.js +2 -2
- package/dist/steps/indicator.svelte +22 -23
- package/dist/steps/item.svelte +29 -29
- package/dist/steps/list.svelte +20 -20
- package/dist/steps/next-trigger.svelte +21 -21
- package/dist/steps/prev-trigger.svelte +21 -21
- package/dist/steps/progress.svelte +20 -20
- package/dist/steps/root.svelte +62 -58
- package/dist/steps/separator.svelte +22 -23
- package/dist/steps/trigger.svelte +22 -21
- package/dist/switch/control.svelte +20 -20
- package/dist/switch/hidden-input.svelte +19 -19
- package/dist/switch/label.svelte +20 -20
- package/dist/switch/root.svelte +71 -66
- package/dist/switch/thumb.svelte +20 -20
- package/dist/tabs/content.svelte +22 -22
- package/dist/tabs/list.svelte +20 -20
- package/dist/tabs/root.svelte +67 -62
- package/dist/tabs/trigger.svelte +24 -24
- package/dist/tags-input/clear-trigger.svelte +21 -21
- package/dist/tags-input/context.svelte.d.ts +2 -2
- package/dist/tags-input/context.svelte.js +2 -2
- package/dist/tags-input/control.svelte +20 -20
- package/dist/tags-input/hidden-input.svelte +19 -19
- package/dist/tags-input/input.svelte +18 -18
- package/dist/tags-input/item-delete-trigger.svelte +28 -27
- package/dist/tags-input/item-input.svelte +24 -25
- package/dist/tags-input/item-preview.svelte +28 -27
- package/dist/tags-input/item-text.svelte +25 -26
- package/dist/tags-input/item.svelte +58 -52
- package/dist/tags-input/label.svelte +20 -20
- package/dist/tags-input/root.svelte +104 -99
- package/dist/timer/action-trigger.svelte +24 -24
- package/dist/timer/context.svelte.d.ts +2 -2
- package/dist/timer/context.svelte.js +2 -2
- package/dist/timer/item-label.svelte +22 -23
- package/dist/timer/item-value.svelte +26 -27
- package/dist/timer/item.svelte +24 -24
- package/dist/timer/root.svelte +59 -56
- package/dist/timer/separator.svelte +20 -20
- package/dist/toast/action-trigger.svelte +21 -21
- package/dist/toast/close-trigger.svelte +21 -21
- package/dist/toast/create-toaster.svelte.js +12 -1
- package/dist/toast/description.svelte +24 -24
- package/dist/toast/root.svelte +29 -29
- package/dist/toast/title.svelte +24 -24
- package/dist/toast/toaster.svelte +40 -40
- package/dist/toggle-group/item.svelte +29 -29
- package/dist/toggle-group/root.svelte +68 -63
- package/dist/tooltip/arrow-tip.svelte +20 -20
- package/dist/tooltip/arrow.svelte +20 -20
- package/dist/tooltip/content.svelte +20 -20
- package/dist/tooltip/positioner.svelte +20 -20
- package/dist/tooltip/root.svelte +35 -28
- package/dist/tooltip/trigger.svelte +20 -20
- package/package.json +3 -2
- /package/dist/menu/{.gitkeep → arrow-tip.svelte} +0 -0
@@ -0,0 +1,24 @@
|
|
1
|
+
import type { Assign, HtmlIngredientProps } from '../types.js';
|
2
|
+
import type { ItemProps, ItemState } from '@zag-js/radio-group';
|
3
|
+
import type { Snippet } from 'svelte';
|
4
|
+
export interface SegmentGroupItemProps extends Assign<Omit<HtmlIngredientProps<'label'>, 'children'>, ItemProps> {
|
5
|
+
children?: Snippet<[state: ItemState]>;
|
6
|
+
}
|
7
|
+
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> {
|
8
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
9
|
+
$$bindings?: Bindings;
|
10
|
+
} & Exports;
|
11
|
+
(internal: unknown, props: Props & {
|
12
|
+
$$events?: Events;
|
13
|
+
$$slots?: Slots;
|
14
|
+
}): Exports & {
|
15
|
+
$set?: any;
|
16
|
+
$on?: any;
|
17
|
+
};
|
18
|
+
z_$$bindings?: Bindings;
|
19
|
+
}
|
20
|
+
declare const Item: $$__sveltets_2_IsomorphicComponent<SegmentGroupItemProps, {
|
21
|
+
[evt: string]: CustomEvent<any>;
|
22
|
+
}, {}, {}, "">;
|
23
|
+
type Item = InstanceType<typeof Item>;
|
24
|
+
export default Item;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface SegmentGroupLabelProps extends HtmlIngredientProps<'span'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '@zag-js/svelte';
|
9
|
+
import {useSegmentGroupContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {children, ...props}: SegmentGroupLabelProps = $props();
|
12
|
+
|
13
|
+
let context = useSegmentGroupContext();
|
14
|
+
|
15
|
+
let attrs = $derived(mergeProps(props, context.getLabelProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
<span {...attrs}>
|
19
|
+
{@render children?.()}
|
20
|
+
</span>
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface SegmentGroupLabelProps extends HtmlIngredientProps<'span'> {
|
3
|
+
}
|
4
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
5
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
6
|
+
$$bindings?: Bindings;
|
7
|
+
} & Exports;
|
8
|
+
(internal: unknown, props: Props & {
|
9
|
+
$$events?: Events;
|
10
|
+
$$slots?: Slots;
|
11
|
+
}): Exports & {
|
12
|
+
$set?: any;
|
13
|
+
$on?: any;
|
14
|
+
};
|
15
|
+
z_$$bindings?: Bindings;
|
16
|
+
}
|
17
|
+
declare const Label: $$__sveltets_2_IsomorphicComponent<SegmentGroupLabelProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "">;
|
20
|
+
type Label = InstanceType<typeof Label>;
|
21
|
+
export default Label;
|
@@ -0,0 +1,68 @@
|
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Snippet} from 'svelte';
|
4
|
+
import type {
|
5
|
+
CreateSegmentGroupContextProps,
|
6
|
+
CreateSegmentGroupContextReturn,
|
7
|
+
} from './context.svelte.js';
|
8
|
+
|
9
|
+
export interface SegmentGroupProps
|
10
|
+
extends Assign<
|
11
|
+
Omit<HtmlIngredientProps<'div'>, 'children'>,
|
12
|
+
Omit<CreateSegmentGroupContextProps, 'id'>
|
13
|
+
> {
|
14
|
+
children?: Snippet<[context: CreateSegmentGroupContextReturn]>;
|
15
|
+
}
|
16
|
+
</script>
|
17
|
+
|
18
|
+
<script lang="ts">
|
19
|
+
import {useEnvironmentContext} from '../environment-provider/index.js';
|
20
|
+
import {useLocaleContext} from '../locale-provider/index.js';
|
21
|
+
import {uuid} from '../utils.svelte.js';
|
22
|
+
import {mergeProps} from '@zag-js/svelte';
|
23
|
+
import {
|
24
|
+
createSegmentGroupContext,
|
25
|
+
setSegmentGroupContext,
|
26
|
+
} from './context.svelte.js';
|
27
|
+
|
28
|
+
let {
|
29
|
+
id,
|
30
|
+
ids,
|
31
|
+
dir,
|
32
|
+
form,
|
33
|
+
name,
|
34
|
+
value,
|
35
|
+
disabled,
|
36
|
+
readOnly,
|
37
|
+
orientation,
|
38
|
+
onValueChange,
|
39
|
+
getRootNode,
|
40
|
+
children,
|
41
|
+
...props
|
42
|
+
}: SegmentGroupProps = $props();
|
43
|
+
|
44
|
+
let localeContext = useLocaleContext();
|
45
|
+
let environmentContext = useEnvironmentContext();
|
46
|
+
|
47
|
+
let context = createSegmentGroupContext({
|
48
|
+
id: id ?? uuid(),
|
49
|
+
ids,
|
50
|
+
dir: dir ?? localeContext?.dir,
|
51
|
+
form,
|
52
|
+
name,
|
53
|
+
value: $state.snapshot(value),
|
54
|
+
disabled,
|
55
|
+
readOnly,
|
56
|
+
orientation,
|
57
|
+
onValueChange,
|
58
|
+
getRootNode: getRootNode ?? environmentContext?.getRootNode,
|
59
|
+
});
|
60
|
+
|
61
|
+
let attrs = $derived(mergeProps(props, context.getRootProps()));
|
62
|
+
|
63
|
+
setSegmentGroupContext(context);
|
64
|
+
</script>
|
65
|
+
|
66
|
+
<div {...attrs}>
|
67
|
+
{@render children?.(context)}
|
68
|
+
</div>
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import type { Assign, HtmlIngredientProps } from '../types.js';
|
2
|
+
import type { Snippet } from 'svelte';
|
3
|
+
import type { CreateSegmentGroupContextProps, CreateSegmentGroupContextReturn } from './context.svelte.js';
|
4
|
+
export interface SegmentGroupProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateSegmentGroupContextProps, 'id'>> {
|
5
|
+
children?: Snippet<[context: CreateSegmentGroupContextReturn]>;
|
6
|
+
}
|
7
|
+
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> {
|
8
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
9
|
+
$$bindings?: Bindings;
|
10
|
+
} & Exports;
|
11
|
+
(internal: unknown, props: Props & {
|
12
|
+
$$events?: Events;
|
13
|
+
$$slots?: Slots;
|
14
|
+
}): Exports & {
|
15
|
+
$set?: any;
|
16
|
+
$on?: any;
|
17
|
+
};
|
18
|
+
z_$$bindings?: Bindings;
|
19
|
+
}
|
20
|
+
declare const Root: $$__sveltets_2_IsomorphicComponent<SegmentGroupProps, {
|
21
|
+
[evt: string]: CustomEvent<any>;
|
22
|
+
}, {}, {}, "">;
|
23
|
+
type Root = InstanceType<typeof Root>;
|
24
|
+
export default Root;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
export { default as Indicator } from './indicator.svelte';
|
2
|
+
export { default as ItemControl } from './item-control.svelte';
|
3
|
+
export { default as ItemHiddenInput } from './item-hidden-input.svelte';
|
4
|
+
export { default as ItemText } from './item-text.svelte';
|
5
|
+
export { default as Item } from './item.svelte';
|
6
|
+
export { default as Label } from './label.svelte';
|
7
|
+
export { default as Root } from './root.svelte';
|
@@ -0,0 +1,7 @@
|
|
1
|
+
export { default as Indicator } from './indicator.svelte';
|
2
|
+
export { default as ItemControl } from './item-control.svelte';
|
3
|
+
export { default as ItemHiddenInput } from './item-hidden-input.svelte';
|
4
|
+
export { default as ItemText } from './item-text.svelte';
|
5
|
+
export { default as Item } from './item.svelte';
|
6
|
+
export { default as Label } from './label.svelte';
|
7
|
+
export { default as Root } from './root.svelte';
|
@@ -1,21 +1,21 @@
|
|
1
|
-
<script lang="ts" context="module">
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
|
4
|
-
export interface SelectClearTriggerProps
|
5
|
-
extends HtmlIngredientProps<'button'> {}
|
6
|
-
</script>
|
7
|
-
|
8
|
-
<script lang="ts">
|
9
|
-
import {mergeProps} from '@zag-js/svelte';
|
10
|
-
import {useSelectContext} from './context.svelte.js';
|
11
|
-
|
12
|
-
let {children, ...props}: SelectClearTriggerProps = $props();
|
13
|
-
|
14
|
-
let context = useSelectContext();
|
15
|
-
|
16
|
-
let attrs = $derived(mergeProps(props, context.getClearTriggerProps()));
|
17
|
-
</script>
|
18
|
-
|
19
|
-
<button type="button" {...attrs}>
|
20
|
-
{@render children?.()}
|
21
|
-
</button>
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface SelectClearTriggerProps
|
5
|
+
extends HtmlIngredientProps<'button'> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {useSelectContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {children, ...props}: SelectClearTriggerProps = $props();
|
13
|
+
|
14
|
+
let context = useSelectContext();
|
15
|
+
|
16
|
+
let attrs = $derived(mergeProps(props, context.getClearTriggerProps()));
|
17
|
+
</script>
|
18
|
+
|
19
|
+
<button type="button" {...attrs}>
|
20
|
+
{@render children?.()}
|
21
|
+
</button>
|
@@ -1,20 +1,20 @@
|
|
1
|
-
<script lang="ts" context="module">
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
|
4
|
-
export interface SelectContentProps extends HtmlIngredientProps<'div'> {}
|
5
|
-
</script>
|
6
|
-
|
7
|
-
<script lang="ts">
|
8
|
-
import {mergeProps} from '@zag-js/svelte';
|
9
|
-
import {useSelectContext} from './context.svelte.js';
|
10
|
-
|
11
|
-
let {children, ...props}: SelectContentProps = $props();
|
12
|
-
|
13
|
-
let context = useSelectContext();
|
14
|
-
|
15
|
-
let attrs = $derived(mergeProps(props, context.getContentProps()));
|
16
|
-
</script>
|
17
|
-
|
18
|
-
<div {...attrs}>
|
19
|
-
{@render children?.()}
|
20
|
-
</div>
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface SelectContentProps extends HtmlIngredientProps<'div'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '@zag-js/svelte';
|
9
|
+
import {useSelectContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {children, ...props}: SelectContentProps = $props();
|
12
|
+
|
13
|
+
let context = useSelectContext();
|
14
|
+
|
15
|
+
let attrs = $derived(mergeProps(props, context.getContentProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
<div {...attrs}>
|
19
|
+
{@render children?.()}
|
20
|
+
</div>
|
@@ -10,10 +10,7 @@ export interface CreateSelectContextReturn extends ReturnType<typeof createSelec
|
|
10
10
|
export declare function createSelectContext<T>(props: CreateSelectContextProps<T>): any;
|
11
11
|
export declare function setSelectContext(value: CreateSelectContextReturn): void;
|
12
12
|
export declare function useSelectContext(): CreateSelectContextReturn;
|
13
|
-
export declare function
|
14
|
-
export declare function
|
15
|
-
export
|
16
|
-
|
17
|
-
}
|
18
|
-
export declare function setSelectItemContext(value: select.ItemProps): void;
|
19
|
-
export declare function useSelectItemContext(): select.ItemProps<any>;
|
13
|
+
export declare function setSelectItemGroupPropsContext(value: select.ItemGroupProps): void;
|
14
|
+
export declare function useSelectItemGroupPropsContext(): select.ItemGroupProps;
|
15
|
+
export declare function setSelectItemPropsContext(value: select.ItemProps): void;
|
16
|
+
export declare function useSelectItemPropsContext(): select.ItemProps<any>;
|
@@ -24,15 +24,15 @@ export function setSelectContext(value) {
|
|
24
24
|
export function useSelectContext() {
|
25
25
|
return getContext('Select');
|
26
26
|
}
|
27
|
-
export function
|
27
|
+
export function setSelectItemGroupPropsContext(value) {
|
28
28
|
setContext('SelectItemGroup', value);
|
29
29
|
}
|
30
|
-
export function
|
30
|
+
export function useSelectItemGroupPropsContext() {
|
31
31
|
return getContext('SelectItemGroup');
|
32
32
|
}
|
33
|
-
export function
|
33
|
+
export function setSelectItemPropsContext(value) {
|
34
34
|
setContext('SelectItem', value);
|
35
35
|
}
|
36
|
-
export function
|
36
|
+
export function useSelectItemPropsContext() {
|
37
37
|
return getContext('SelectItem');
|
38
38
|
}
|
@@ -1,20 +1,20 @@
|
|
1
|
-
<script lang="ts" context="module">
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
|
4
|
-
export interface SelectControlProps extends HtmlIngredientProps<'div'> {}
|
5
|
-
</script>
|
6
|
-
|
7
|
-
<script lang="ts">
|
8
|
-
import {mergeProps} from '@zag-js/svelte';
|
9
|
-
import {useSelectContext} from './context.svelte.js';
|
10
|
-
|
11
|
-
let {children, ...props}: SelectControlProps = $props();
|
12
|
-
|
13
|
-
let context = useSelectContext();
|
14
|
-
|
15
|
-
let attrs = $derived(mergeProps(props, context.getControlProps()));
|
16
|
-
</script>
|
17
|
-
|
18
|
-
<div {...attrs}>
|
19
|
-
{@render children?.()}
|
20
|
-
</div>
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface SelectControlProps extends HtmlIngredientProps<'div'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '@zag-js/svelte';
|
9
|
+
import {useSelectContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {children, ...props}: SelectControlProps = $props();
|
12
|
+
|
13
|
+
let context = useSelectContext();
|
14
|
+
|
15
|
+
let attrs = $derived(mergeProps(props, context.getControlProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
<div {...attrs}>
|
19
|
+
{@render children?.()}
|
20
|
+
</div>
|
@@ -1,21 +1,21 @@
|
|
1
|
-
<script lang="ts" context="module">
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
|
4
|
-
export interface SelectHiddenSelectProps
|
5
|
-
extends HtmlIngredientProps<'select'> {}
|
6
|
-
</script>
|
7
|
-
|
8
|
-
<script lang="ts">
|
9
|
-
import {mergeProps} from '@zag-js/svelte';
|
10
|
-
import {useSelectContext} from './context.svelte.js';
|
11
|
-
|
12
|
-
let {children, ...props}: SelectHiddenSelectProps = $props();
|
13
|
-
|
14
|
-
let context = useSelectContext();
|
15
|
-
|
16
|
-
let attrs = $derived(mergeProps(props, context.getHiddenSelectProps()));
|
17
|
-
</script>
|
18
|
-
|
19
|
-
<select {...attrs}>
|
20
|
-
{@render children?.()}
|
21
|
-
</select>
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface SelectHiddenSelectProps
|
5
|
+
extends HtmlIngredientProps<'select'> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {useSelectContext} from './context.svelte.js';
|
11
|
+
|
12
|
+
let {children, ...props}: SelectHiddenSelectProps = $props();
|
13
|
+
|
14
|
+
let context = useSelectContext();
|
15
|
+
|
16
|
+
let attrs = $derived(mergeProps(props, context.getHiddenSelectProps()));
|
17
|
+
</script>
|
18
|
+
|
19
|
+
<select {...attrs}>
|
20
|
+
{@render children?.()}
|
21
|
+
</select>
|
@@ -1,20 +1,20 @@
|
|
1
|
-
<script lang="ts" context="module">
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
|
4
|
-
export interface SelectIndicatorProps extends HtmlIngredientProps<'span'> {}
|
5
|
-
</script>
|
6
|
-
|
7
|
-
<script lang="ts">
|
8
|
-
import {mergeProps} from '@zag-js/svelte';
|
9
|
-
import {useSelectContext} from './context.svelte.js';
|
10
|
-
|
11
|
-
let {children, ...props}: SelectIndicatorProps = $props();
|
12
|
-
|
13
|
-
let context = useSelectContext();
|
14
|
-
|
15
|
-
let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
|
16
|
-
</script>
|
17
|
-
|
18
|
-
<span {...attrs}>
|
19
|
-
{@render children?.()}
|
20
|
-
</span>
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface SelectIndicatorProps extends HtmlIngredientProps<'span'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '@zag-js/svelte';
|
9
|
+
import {useSelectContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {children, ...props}: SelectIndicatorProps = $props();
|
12
|
+
|
13
|
+
let context = useSelectContext();
|
14
|
+
|
15
|
+
let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
<span {...attrs}>
|
19
|
+
{@render children?.()}
|
20
|
+
</span>
|
@@ -1,30 +1,31 @@
|
|
1
|
-
<script lang="ts" context="module">
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
|
4
|
-
export interface SelectItemGroupLabelProps
|
5
|
-
extends HtmlIngredientProps<'span'> {}
|
6
|
-
</script>
|
7
|
-
|
8
|
-
<script lang="ts">
|
9
|
-
import {mergeProps} from '@zag-js/svelte';
|
10
|
-
import {
|
11
|
-
useSelectContext,
|
12
|
-
|
13
|
-
} from './context.svelte.js';
|
14
|
-
|
15
|
-
let {children, ...props}: SelectItemGroupLabelProps = $props();
|
16
|
-
|
17
|
-
let context = useSelectContext();
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface SelectItemGroupLabelProps
|
5
|
+
extends HtmlIngredientProps<'span'> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {
|
11
|
+
useSelectContext,
|
12
|
+
useSelectItemGroupPropsContext,
|
13
|
+
} from './context.svelte.js';
|
14
|
+
|
15
|
+
let {children, ...props}: SelectItemGroupLabelProps = $props();
|
16
|
+
|
17
|
+
let context = useSelectContext();
|
18
|
+
|
19
|
+
let itemGroupProps = useSelectItemGroupPropsContext();
|
20
|
+
|
21
|
+
let attrs = $derived(
|
22
|
+
mergeProps(
|
23
|
+
props,
|
24
|
+
context.getItemGroupLabelProps({htmlFor: itemGroupProps.id}),
|
25
|
+
),
|
26
|
+
);
|
27
|
+
</script>
|
28
|
+
|
29
|
+
<span {...attrs}>
|
30
|
+
{@render children?.()}
|
31
|
+
</span>
|
@@ -1,32 +1,32 @@
|
|
1
|
-
<script lang="ts" context="module">
|
2
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {ItemGroupProps} from '@zag-js/select';
|
4
|
-
|
5
|
-
export interface SelectItemGroupProps
|
6
|
-
extends Assign<HtmlIngredientProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
|
7
|
-
</script>
|
8
|
-
|
9
|
-
<script lang="ts">
|
10
|
-
import {uuid} from '../utils.svelte.js';
|
11
|
-
import {mergeProps} from '@zag-js/svelte';
|
12
|
-
import {
|
13
|
-
|
14
|
-
useSelectContext,
|
15
|
-
} from './context.svelte.js';
|
16
|
-
|
17
|
-
let {id, children, ...props}: SelectItemGroupProps = $props();
|
18
|
-
|
19
|
-
let context = useSelectContext();
|
20
|
-
|
21
|
-
let uid = uuid();
|
22
|
-
|
23
|
-
let attrs = $derived(
|
24
|
-
mergeProps(props, context.getItemGroupProps({id: id ?? uid})),
|
25
|
-
);
|
26
|
-
|
27
|
-
|
28
|
-
</script>
|
29
|
-
|
30
|
-
<div {...attrs}>
|
31
|
-
{@render children?.()}
|
32
|
-
</div>
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {ItemGroupProps} from '@zag-js/select';
|
4
|
+
|
5
|
+
export interface SelectItemGroupProps
|
6
|
+
extends Assign<HtmlIngredientProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
|
7
|
+
</script>
|
8
|
+
|
9
|
+
<script lang="ts">
|
10
|
+
import {uuid} from '../utils.svelte.js';
|
11
|
+
import {mergeProps} from '@zag-js/svelte';
|
12
|
+
import {
|
13
|
+
setSelectItemGroupPropsContext,
|
14
|
+
useSelectContext,
|
15
|
+
} from './context.svelte.js';
|
16
|
+
|
17
|
+
let {id, children, ...props}: SelectItemGroupProps = $props();
|
18
|
+
|
19
|
+
let context = useSelectContext();
|
20
|
+
|
21
|
+
let uid = uuid();
|
22
|
+
|
23
|
+
let attrs = $derived(
|
24
|
+
mergeProps(props, context.getItemGroupProps({id: id ?? uid})),
|
25
|
+
);
|
26
|
+
|
27
|
+
setSelectItemGroupPropsContext({id: id ?? uid});
|
28
|
+
</script>
|
29
|
+
|
30
|
+
<div {...attrs}>
|
31
|
+
{@render children?.()}
|
32
|
+
</div>
|
@@ -1,24 +1,28 @@
|
|
1
|
-
<script lang="ts" context="module">
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
|
4
|
-
export interface SelectItemIndicatorProps
|
5
|
-
extends HtmlIngredientProps<'span'> {}
|
6
|
-
</script>
|
7
|
-
|
8
|
-
<script lang="ts">
|
9
|
-
import {mergeProps} from '@zag-js/svelte';
|
10
|
-
import {
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
let
|
16
|
-
|
17
|
-
let
|
18
|
-
|
19
|
-
);
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
</
|
1
|
+
<script lang="ts" context="module">
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface SelectItemIndicatorProps
|
5
|
+
extends HtmlIngredientProps<'span'> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '@zag-js/svelte';
|
10
|
+
import {
|
11
|
+
useSelectContext,
|
12
|
+
useSelectItemPropsContext,
|
13
|
+
} from './context.svelte.js';
|
14
|
+
|
15
|
+
let {children, ...props}: SelectItemIndicatorProps = $props();
|
16
|
+
|
17
|
+
let context = useSelectContext();
|
18
|
+
|
19
|
+
let itemProps = useSelectItemPropsContext();
|
20
|
+
|
21
|
+
let attrs = $derived(
|
22
|
+
mergeProps(props, context.getItemIndicatorProps(itemProps)),
|
23
|
+
);
|
24
|
+
</script>
|
25
|
+
|
26
|
+
<span {...attrs}>
|
27
|
+
{@render children?.()}
|
28
|
+
</span>
|