@skeletonlabs/skeleton-svelte 2.0.0-next.8 → 2.0.0-next.9
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/dist/components/segmented-control/anatomy/indicator.svelte +30 -0
- package/dist/components/segmented-control/anatomy/indicator.svelte.d.ts +8 -0
- package/dist/components/segmented-control/anatomy/indicator.svelte.d.ts.map +1 -0
- package/dist/components/segmented-control/anatomy/item-hidden-input.svelte +32 -0
- package/dist/components/segmented-control/anatomy/item-hidden-input.svelte.d.ts +8 -0
- package/dist/components/segmented-control/anatomy/item-hidden-input.svelte.d.ts.map +1 -0
- package/dist/components/segmented-control/anatomy/item-text.svelte +34 -0
- package/dist/components/segmented-control/anatomy/item-text.svelte.d.ts +8 -0
- package/dist/components/segmented-control/anatomy/item-text.svelte.d.ts.map +1 -0
- package/dist/components/segmented-control/anatomy/item.svelte +38 -0
- package/dist/components/segmented-control/anatomy/item.svelte.d.ts +9 -0
- package/dist/components/segmented-control/anatomy/item.svelte.d.ts.map +1 -0
- package/dist/components/segmented-control/anatomy/root-context.svelte +20 -0
- package/dist/components/segmented-control/anatomy/root-context.svelte.d.ts +9 -0
- package/dist/components/segmented-control/anatomy/root-context.svelte.d.ts.map +1 -0
- package/dist/components/segmented-control/anatomy/root-provider.svelte +35 -0
- package/dist/components/segmented-control/anatomy/root-provider.svelte.d.ts +10 -0
- package/dist/components/segmented-control/anatomy/root-provider.svelte.d.ts.map +1 -0
- package/dist/components/segmented-control/anatomy/root.svelte +42 -0
- package/dist/components/segmented-control/anatomy/root.svelte.d.ts +9 -0
- package/dist/components/segmented-control/anatomy/root.svelte.d.ts.map +1 -0
- package/dist/components/segmented-control/index.d.ts +10 -0
- package/dist/components/segmented-control/index.d.ts.map +1 -0
- package/dist/components/segmented-control/index.js +2 -0
- package/dist/components/segmented-control/modules/anatomy.d.ts +9 -0
- package/dist/components/segmented-control/modules/anatomy.d.ts.map +1 -0
- package/dist/components/segmented-control/modules/anatomy.js +15 -0
- package/dist/components/segmented-control/modules/item-context.d.ts +7 -0
- package/dist/components/segmented-control/modules/item-context.d.ts.map +1 -0
- package/dist/components/segmented-control/modules/item-context.js +2 -0
- package/dist/components/segmented-control/modules/root-context.d.ts +6 -0
- package/dist/components/segmented-control/modules/root-context.d.ts.map +1 -0
- package/dist/components/segmented-control/modules/root-context.js +2 -0
- package/dist/components/segmented-control/modules/use-segmented-control.svelte.d.ts +4 -0
- package/dist/components/segmented-control/modules/use-segmented-control.svelte.d.ts.map +1 -0
- package/dist/components/segmented-control/modules/use-segmented-control.svelte.js +10 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/package.json +4 -3
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface SegmentedControlIndicatorProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'children'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { SegmentedControlRootContext } from '../modules/root-context';
|
|
10
|
+
import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
|
|
11
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
12
|
+
|
|
13
|
+
const props: SegmentedControlIndicatorProps = $props();
|
|
14
|
+
|
|
15
|
+
const segmentedControl = SegmentedControlRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { element, ...rest } = $derived(props);
|
|
18
|
+
|
|
19
|
+
const attributes = $derived(
|
|
20
|
+
mergeProps(segmentedControl().getIndicatorProps(), rest, {
|
|
21
|
+
class: classesSegmentedControl.indicator,
|
|
22
|
+
}),
|
|
23
|
+
);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{#if element}
|
|
27
|
+
{@render element(attributes)}
|
|
28
|
+
{:else}
|
|
29
|
+
<div {...attributes}></div>
|
|
30
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface SegmentedControlIndicatorProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'children'> {
|
|
4
|
+
}
|
|
5
|
+
declare const Indicator: import("svelte").Component<SegmentedControlIndicatorProps, {}, "">;
|
|
6
|
+
type Indicator = ReturnType<typeof Indicator>;
|
|
7
|
+
export default Indicator;
|
|
8
|
+
//# sourceMappingURL=indicator.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"indicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/segmented-control/anatomy/indicator.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,WAAW,8BAA+B,SAAQ,gBAAgB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC;CAAG;AAmCtH,QAAA,MAAM,SAAS,oEAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface SegmentedControlItemHiddenInputProps extends PropsWithElement<'input'>, HTMLAttributes<'input', 'children'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { SegmentedControlItemContext } from '../modules/item-context';
|
|
10
|
+
import { SegmentedControlRootContext } from '../modules/root-context';
|
|
11
|
+
import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
|
|
12
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
13
|
+
|
|
14
|
+
const props: SegmentedControlItemHiddenInputProps = $props();
|
|
15
|
+
|
|
16
|
+
const segmentedcontrol = SegmentedControlRootContext.consume();
|
|
17
|
+
const itemProps = SegmentedControlItemContext.consume();
|
|
18
|
+
|
|
19
|
+
const { element, ...rest } = $derived(props);
|
|
20
|
+
|
|
21
|
+
const attributes = $derived(
|
|
22
|
+
mergeProps(segmentedcontrol().getItemHiddenInputProps(itemProps()), rest, {
|
|
23
|
+
class: classesSegmentedControl.itemHiddenInput,
|
|
24
|
+
}),
|
|
25
|
+
);
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
{#if element}
|
|
29
|
+
{@render element(attributes)}
|
|
30
|
+
{:else}
|
|
31
|
+
<input {...attributes} />
|
|
32
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface SegmentedControlItemHiddenInputProps extends PropsWithElement<'input'>, HTMLAttributes<'input', 'children'> {
|
|
4
|
+
}
|
|
5
|
+
declare const ItemHiddenInput: import("svelte").Component<SegmentedControlItemHiddenInputProps, {}, "">;
|
|
6
|
+
type ItemHiddenInput = ReturnType<typeof ItemHiddenInput>;
|
|
7
|
+
export default ItemHiddenInput;
|
|
8
|
+
//# sourceMappingURL=item-hidden-input.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"item-hidden-input.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/segmented-control/anatomy/item-hidden-input.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,WAAW,oCAAqC,SAAQ,gBAAgB,CAAC,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,EAAE,UAAU,CAAC;CAAG;AAsChI,QAAA,MAAM,eAAe,0EAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface SegmentedControlItemTextProps extends PropsWithElement<'span'>, HTMLAttributes<'span'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { SegmentedControlItemContext } from '../modules/item-context';
|
|
10
|
+
import { SegmentedControlRootContext } from '../modules/root-context';
|
|
11
|
+
import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
|
|
12
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
13
|
+
|
|
14
|
+
const props: SegmentedControlItemTextProps = $props();
|
|
15
|
+
|
|
16
|
+
const segmentedcontrol = SegmentedControlRootContext.consume();
|
|
17
|
+
const itemProps = SegmentedControlItemContext.consume();
|
|
18
|
+
|
|
19
|
+
const { element, children, ...rest } = $derived(props);
|
|
20
|
+
|
|
21
|
+
const attributes = $derived(
|
|
22
|
+
mergeProps(segmentedcontrol().getItemTextProps(itemProps()), rest, {
|
|
23
|
+
class: classesSegmentedControl.itemText,
|
|
24
|
+
}),
|
|
25
|
+
);
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
{#if element}
|
|
29
|
+
{@render element(attributes)}
|
|
30
|
+
{:else}
|
|
31
|
+
<span {...attributes}>
|
|
32
|
+
{@render children?.()}
|
|
33
|
+
</span>
|
|
34
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface SegmentedControlItemTextProps extends PropsWithElement<'span'>, HTMLAttributes<'span'> {
|
|
4
|
+
}
|
|
5
|
+
declare const ItemText: import("svelte").Component<SegmentedControlItemTextProps, {}, "">;
|
|
6
|
+
type ItemText = ReturnType<typeof ItemText>;
|
|
7
|
+
export default ItemText;
|
|
8
|
+
//# sourceMappingURL=item-text.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"item-text.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/segmented-control/anatomy/item-text.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,WAAW,6BAA8B,SAAQ,gBAAgB,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;CAAG;AAwC3G,QAAA,MAAM,QAAQ,mEAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
import type { ItemProps } from '@zag-js/radio-group';
|
|
5
|
+
|
|
6
|
+
export interface SegmentedControlItemProps extends ItemProps, PropsWithElement<'label'>, HTMLAttributes<'label'> {}
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<script lang="ts">
|
|
10
|
+
import { SegmentedControlItemContext } from '../modules/item-context';
|
|
11
|
+
import { SegmentedControlRootContext } from '../modules/root-context';
|
|
12
|
+
import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
|
|
13
|
+
import { splitItemProps } from '@zag-js/radio-group';
|
|
14
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
15
|
+
|
|
16
|
+
const props: SegmentedControlItemProps = $props();
|
|
17
|
+
|
|
18
|
+
const segmentedControl = SegmentedControlRootContext.consume();
|
|
19
|
+
|
|
20
|
+
const [itemProps, componentProps] = $derived(splitItemProps(props));
|
|
21
|
+
const { element, children, ...rest } = $derived(componentProps);
|
|
22
|
+
|
|
23
|
+
const attributes = $derived(
|
|
24
|
+
mergeProps(segmentedControl().getItemProps(itemProps), rest, {
|
|
25
|
+
class: classesSegmentedControl.item,
|
|
26
|
+
}),
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
SegmentedControlItemContext.provide(() => itemProps);
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
{#if element}
|
|
33
|
+
{@render element(attributes)}
|
|
34
|
+
{:else}
|
|
35
|
+
<label {...attributes}>
|
|
36
|
+
{@render children?.()}
|
|
37
|
+
</label>
|
|
38
|
+
{/if}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
import type { ItemProps } from '@zag-js/radio-group';
|
|
4
|
+
export interface SegmentedControlItemProps extends ItemProps, PropsWithElement<'label'>, HTMLAttributes<'label'> {
|
|
5
|
+
}
|
|
6
|
+
declare const Item: import("svelte").Component<SegmentedControlItemProps, {}, "">;
|
|
7
|
+
type Item = ReturnType<typeof Item>;
|
|
8
|
+
export default Item;
|
|
9
|
+
//# sourceMappingURL=item.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/segmented-control/anatomy/item.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,WAAW,yBAA0B,SAAQ,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC;CAAG;AA4CpH,QAAA,MAAM,IAAI,+DAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { useSegmentedControl } from '../modules/use-segmented-control.svelte';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
|
|
5
|
+
export interface SegmentedControlRootContextProps {
|
|
6
|
+
children: Snippet<[ReturnType<typeof useSegmentedControl>]>;
|
|
7
|
+
}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import { SegmentedControlRootContext } from '../modules/root-context';
|
|
12
|
+
|
|
13
|
+
const props: SegmentedControlRootContextProps = $props();
|
|
14
|
+
|
|
15
|
+
const segmentedControl = SegmentedControlRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { children } = $derived(props);
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
{@render children(segmentedControl)}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { useSegmentedControl } from '../modules/use-segmented-control.svelte';
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
export interface SegmentedControlRootContextProps {
|
|
4
|
+
children: Snippet<[ReturnType<typeof useSegmentedControl>]>;
|
|
5
|
+
}
|
|
6
|
+
declare const RootContext: import("svelte").Component<SegmentedControlRootContextProps, {}, "">;
|
|
7
|
+
type RootContext = ReturnType<typeof RootContext>;
|
|
8
|
+
export default RootContext;
|
|
9
|
+
//# sourceMappingURL=root-context.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root-context.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/segmented-control/anatomy/root-context.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,gCAAgC;IAChD,QAAQ,EAAE,OAAO,CAAC,CAAC,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC;CAC5D;AAqBF,QAAA,MAAM,WAAW,sEAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { useSegmentedControl } from '../modules/use-segmented-control.svelte';
|
|
3
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
4
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
5
|
+
|
|
6
|
+
export interface SegmentedControlRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
|
|
7
|
+
value: ReturnType<typeof useSegmentedControl>;
|
|
8
|
+
}
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<script lang="ts">
|
|
12
|
+
import { SegmentedControlRootContext } from '../modules/root-context';
|
|
13
|
+
import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
|
|
14
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
15
|
+
|
|
16
|
+
const props: SegmentedControlRootProviderProps = $props();
|
|
17
|
+
|
|
18
|
+
const { element, children, value: segmentedControl, ...rest } = $derived(props);
|
|
19
|
+
|
|
20
|
+
const attributes = $derived(
|
|
21
|
+
mergeProps(segmentedControl().getRootProps(), rest, {
|
|
22
|
+
class: classesSegmentedControl.root,
|
|
23
|
+
}),
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
SegmentedControlRootContext.provide(() => segmentedControl());
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
{#if element}
|
|
30
|
+
{@render element(attributes)}
|
|
31
|
+
{:else}
|
|
32
|
+
<div {...attributes}>
|
|
33
|
+
{@render children?.()}
|
|
34
|
+
</div>
|
|
35
|
+
{/if}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { useSegmentedControl } from '../modules/use-segmented-control.svelte';
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
export interface SegmentedControlRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
|
|
5
|
+
value: ReturnType<typeof useSegmentedControl>;
|
|
6
|
+
}
|
|
7
|
+
declare const RootProvider: import("svelte").Component<SegmentedControlRootProviderProps, {}, "">;
|
|
8
|
+
type RootProvider = ReturnType<typeof RootProvider>;
|
|
9
|
+
export default RootProvider;
|
|
10
|
+
//# sourceMappingURL=root-provider.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root-provider.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/segmented-control/anatomy/root-provider.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,WAAW,iCAAkC,SAAQ,gBAAgB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,EAAE,IAAI,GAAG,KAAK,CAAC;IACtH,KAAK,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;CAC9C;AAqCF,QAAA,MAAM,YAAY,uEAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
import type { Props } from '@zag-js/radio-group';
|
|
5
|
+
|
|
6
|
+
export interface SegmentedControlRootProps extends Omit<Props, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<script lang="ts">
|
|
10
|
+
import { SegmentedControlRootContext } from '../modules/root-context';
|
|
11
|
+
import { useSegmentedControl } from '../modules/use-segmented-control.svelte';
|
|
12
|
+
import { classesSegmentedControl } from '@skeletonlabs/skeleton-common';
|
|
13
|
+
import { splitProps } from '@zag-js/radio-group';
|
|
14
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
15
|
+
|
|
16
|
+
const props: SegmentedControlRootProps = $props();
|
|
17
|
+
|
|
18
|
+
const [segmentedControlProps, componentProps] = $derived(splitProps(props));
|
|
19
|
+
const { element, children, ...rest } = $derived(componentProps);
|
|
20
|
+
|
|
21
|
+
const id = $props.id();
|
|
22
|
+
const segmentedControl = useSegmentedControl(() => ({
|
|
23
|
+
id: id,
|
|
24
|
+
...segmentedControlProps,
|
|
25
|
+
}));
|
|
26
|
+
|
|
27
|
+
const attributes = $derived(
|
|
28
|
+
mergeProps(segmentedControl().getRootProps(), rest, {
|
|
29
|
+
class: classesSegmentedControl.root,
|
|
30
|
+
}),
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
SegmentedControlRootContext.provide(() => segmentedControl());
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
{#if element}
|
|
37
|
+
{@render element(attributes)}
|
|
38
|
+
{:else}
|
|
39
|
+
<div {...attributes}>
|
|
40
|
+
{@render children?.()}
|
|
41
|
+
</div>
|
|
42
|
+
{/if}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
import type { Props } from '@zag-js/radio-group';
|
|
4
|
+
export interface SegmentedControlRootProps extends Omit<Props, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
|
|
5
|
+
}
|
|
6
|
+
declare const Root: import("svelte").Component<SegmentedControlRootProps, {}, "">;
|
|
7
|
+
type Root = ReturnType<typeof Root>;
|
|
8
|
+
export default Root;
|
|
9
|
+
//# sourceMappingURL=root.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/segmented-control/anatomy/root.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,EAAE,IAAI,GAAG,KAAK,CAAC;CAAG;AAgDtI,QAAA,MAAM,IAAI,+DAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { SegmentedControl } from './modules/anatomy';
|
|
2
|
+
export { useSegmentedControl } from './modules/use-segmented-control.svelte';
|
|
3
|
+
export type { SegmentedControlRootProps } from './anatomy/root.svelte';
|
|
4
|
+
export type { SegmentedControlRootContextProps } from './anatomy/root-context.svelte';
|
|
5
|
+
export type { SegmentedControlRootProviderProps } from './anatomy/root-provider.svelte';
|
|
6
|
+
export type { SegmentedControlIndicatorProps } from './anatomy/indicator.svelte';
|
|
7
|
+
export type { SegmentedControlItemProps } from './anatomy/item.svelte';
|
|
8
|
+
export type { SegmentedControlItemTextProps } from './anatomy/item-text.svelte';
|
|
9
|
+
export type { SegmentedControlItemHiddenInputProps } from './anatomy/item-hidden-input.svelte';
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,YAAY,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACvE,YAAY,EAAE,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AACtF,YAAY,EAAE,iCAAiC,EAAE,MAAM,gCAAgC,CAAC;AACxF,YAAY,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AACjF,YAAY,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACvE,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAChF,YAAY,EAAE,oCAAoC,EAAE,MAAM,oCAAoC,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const SegmentedControl: import("svelte").Component<import("..").SegmentedControlRootProps, {}, ""> & {
|
|
2
|
+
Provider: import("svelte").Component<import("..").SegmentedControlRootProviderProps, {}, "">;
|
|
3
|
+
Context: import("svelte").Component<import("..").SegmentedControlRootContextProps, {}, "">;
|
|
4
|
+
Indicator: import("svelte").Component<import("..").SegmentedControlIndicatorProps, {}, "">;
|
|
5
|
+
Item: import("svelte").Component<import("..").SegmentedControlItemProps, {}, "">;
|
|
6
|
+
ItemText: import("svelte").Component<import("..").SegmentedControlItemTextProps, {}, "">;
|
|
7
|
+
ItemHiddenInput: import("svelte").Component<import("..").SegmentedControlItemHiddenInputProps, {}, "">;
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=anatomy.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"anatomy.d.ts","sourceRoot":"","sources":["../../../../src/components/segmented-control/modules/anatomy.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,gBAAgB;;;;;;;CAO3B,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import Indicator from '../anatomy/indicator.svelte';
|
|
2
|
+
import ItemHiddenInput from '../anatomy/item-hidden-input.svelte';
|
|
3
|
+
import ItemText from '../anatomy/item-text.svelte';
|
|
4
|
+
import Item from '../anatomy/item.svelte';
|
|
5
|
+
import RootContext from '../anatomy/root-context.svelte';
|
|
6
|
+
import RootProvider from '../anatomy/root-provider.svelte';
|
|
7
|
+
import Root from '../anatomy/root.svelte';
|
|
8
|
+
export const SegmentedControl = Object.assign(Root, {
|
|
9
|
+
Provider: RootProvider,
|
|
10
|
+
Context: RootContext,
|
|
11
|
+
Indicator: Indicator,
|
|
12
|
+
Item: Item,
|
|
13
|
+
ItemText: ItemText,
|
|
14
|
+
ItemHiddenInput: ItemHiddenInput,
|
|
15
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"item-context.d.ts","sourceRoot":"","sources":["../../../../src/components/segmented-control/modules/item-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,eAAO,MAAM,2BAA2B;;qBAAuB,SAAS;yBAAT,SAAS,SAAT,SAAS;CAAG,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const SegmentedControlRootContext: {
|
|
2
|
+
key: symbol;
|
|
3
|
+
consume(): () => import("@zag-js/radio-group").Api<import("@zag-js/svelte").PropTypes>;
|
|
4
|
+
provide(value: () => import("@zag-js/radio-group").Api<import("@zag-js/svelte").PropTypes>): () => import("@zag-js/radio-group").Api<import("@zag-js/svelte").PropTypes>;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=root-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root-context.d.ts","sourceRoot":"","sources":["../../../../src/components/segmented-control/modules/root-context.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,2BAA2B;;;;CAA0D,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-segmented-control.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/segmented-control/modules/use-segmented-control.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE5E,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,CAAC,SAAS,CAAC,CAOtF"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { connect, machine } from '@zag-js/radio-group';
|
|
2
|
+
import { normalizeProps, useMachine } from '@zag-js/svelte';
|
|
3
|
+
export function useSegmentedControl(props) {
|
|
4
|
+
const service = useMachine(machine, {
|
|
5
|
+
orientation: 'horizontal',
|
|
6
|
+
...(typeof props === 'function' ? props() : props),
|
|
7
|
+
});
|
|
8
|
+
const segmentedControl = connect(service, normalizeProps);
|
|
9
|
+
return () => segmentedControl;
|
|
10
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export * from './components/file-upload/index';
|
|
|
5
5
|
export * from './components/popover/index';
|
|
6
6
|
export * from './components/progress-linear/index';
|
|
7
7
|
export * from './components/rating-group/index';
|
|
8
|
+
export * from './components/segmented-control/index';
|
|
8
9
|
export * from './components/switch/index';
|
|
9
10
|
export * from './components/tabs/index';
|
|
10
11
|
export * from './components/tags-input/index';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,sCAAsC,CAAC;AACrD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export * from './components/file-upload/index';
|
|
|
5
5
|
export * from './components/popover/index';
|
|
6
6
|
export * from './components/progress-linear/index';
|
|
7
7
|
export * from './components/rating-group/index';
|
|
8
|
+
export * from './components/segmented-control/index';
|
|
8
9
|
export * from './components/switch/index';
|
|
9
10
|
export * from './components/tabs/index';
|
|
10
11
|
export * from './components/tags-input/index';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skeletonlabs/skeleton-svelte",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.9",
|
|
4
4
|
"description": "The Svelte package for Skeleton.",
|
|
5
5
|
"author": "endigo9740 <chris@skeletonlabs.dev>",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -24,13 +24,14 @@
|
|
|
24
24
|
"@zag-js/popover": "1.24.1",
|
|
25
25
|
"@zag-js/progress": "1.24.1",
|
|
26
26
|
"@zag-js/rating-group": "1.24.1",
|
|
27
|
+
"@zag-js/radio-group": "1.24.1",
|
|
27
28
|
"@zag-js/svelte": "1.24.1",
|
|
28
29
|
"@zag-js/switch": "1.24.1",
|
|
29
30
|
"@zag-js/tabs": "1.24.1",
|
|
30
31
|
"@zag-js/tags-input": "1.24.1",
|
|
31
32
|
"@zag-js/toast": "1.24.1",
|
|
32
33
|
"@zag-js/tooltip": "1.24.1",
|
|
33
|
-
"@skeletonlabs/skeleton-common": "1.0.0-next.
|
|
34
|
+
"@skeletonlabs/skeleton-common": "1.0.0-next.8"
|
|
34
35
|
},
|
|
35
36
|
"peerDependencies": {
|
|
36
37
|
"svelte": "^5.29.0"
|
|
@@ -49,7 +50,7 @@
|
|
|
49
50
|
"typescript": "5.9.2",
|
|
50
51
|
"vite": "7.1.3",
|
|
51
52
|
"vitest": "3.2.4",
|
|
52
|
-
"@skeletonlabs/skeleton": "4.0.0-next.
|
|
53
|
+
"@skeletonlabs/skeleton": "4.0.0-next.4"
|
|
53
54
|
},
|
|
54
55
|
"type": "module",
|
|
55
56
|
"scripts": {
|