@skeletonlabs/skeleton-svelte 2.0.0-next.1 → 2.0.0-next.3
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/accordion/anatomy/content.svelte +32 -0
- package/dist/components/accordion/anatomy/content.svelte.d.ts +7 -0
- package/dist/components/accordion/anatomy/heading.svelte +33 -0
- package/dist/components/accordion/anatomy/heading.svelte.d.ts +13 -0
- package/dist/components/accordion/anatomy/indicator.svelte +32 -0
- package/dist/components/accordion/anatomy/indicator.svelte.d.ts +7 -0
- package/dist/components/accordion/anatomy/item-context.svelte +18 -0
- package/dist/components/accordion/anatomy/item-context.svelte.d.ts +8 -0
- package/dist/components/accordion/anatomy/item.svelte +41 -0
- package/dist/components/accordion/anatomy/item.svelte.d.ts +8 -0
- package/dist/components/accordion/anatomy/root-context.svelte +18 -0
- package/dist/components/accordion/anatomy/root-context.svelte.d.ts +8 -0
- package/dist/components/accordion/anatomy/root.svelte +44 -0
- package/dist/components/accordion/anatomy/root.svelte.d.ts +8 -0
- package/dist/components/accordion/anatomy/trigger.svelte +32 -0
- package/dist/components/accordion/anatomy/trigger.svelte.d.ts +7 -0
- package/dist/components/accordion/index.d.ts +11 -2
- package/dist/components/accordion/index.js +1 -2
- package/dist/components/accordion/modules/anatomy.d.ts +8 -7
- package/dist/components/accordion/modules/anatomy.js +16 -13
- package/dist/components/accordion/modules/item-context.d.ts +10 -0
- package/dist/components/accordion/modules/item-context.js +2 -0
- package/dist/components/accordion/modules/root-context.d.ts +9 -0
- package/dist/components/accordion/modules/root-context.js +2 -0
- package/dist/components/avatar/anatomy/fallback.svelte +28 -0
- package/dist/components/avatar/anatomy/fallback.svelte.d.ts +7 -0
- package/dist/components/avatar/anatomy/image.svelte +26 -0
- package/dist/components/avatar/anatomy/image.svelte.d.ts +7 -0
- package/dist/components/avatar/anatomy/root-context.svelte +18 -0
- package/dist/components/avatar/anatomy/root-context.svelte.d.ts +8 -0
- package/dist/components/avatar/anatomy/root.svelte +41 -0
- package/dist/components/avatar/anatomy/root.svelte.d.ts +8 -0
- package/dist/components/avatar/index.d.ts +6 -2
- package/dist/components/avatar/index.js +1 -2
- package/dist/components/avatar/modules/anatomy.d.ts +4 -4
- package/dist/components/avatar/modules/anatomy.js +8 -7
- package/dist/components/avatar/modules/root-context.d.ts +9 -0
- package/dist/components/avatar/modules/root-context.js +2 -0
- package/dist/components/progress-linear/anatomy/label.svelte +36 -0
- package/dist/components/progress-linear/anatomy/label.svelte.d.ts +7 -0
- package/dist/components/progress-linear/anatomy/range.svelte +36 -0
- package/dist/components/progress-linear/anatomy/range.svelte.d.ts +7 -0
- package/dist/components/progress-linear/anatomy/root-context.svelte +18 -0
- package/dist/components/progress-linear/anatomy/root-context.svelte.d.ts +8 -0
- package/dist/components/progress-linear/anatomy/root.svelte +53 -0
- package/dist/components/progress-linear/anatomy/root.svelte.d.ts +8 -0
- package/dist/components/progress-linear/anatomy/track.svelte +28 -0
- package/dist/components/progress-linear/anatomy/track.svelte.d.ts +7 -0
- package/dist/components/progress-linear/index.d.ts +7 -0
- package/dist/components/progress-linear/index.js +1 -0
- package/dist/components/progress-linear/modules/anatomy.d.ts +6 -0
- package/dist/components/progress-linear/modules/anatomy.js +11 -0
- package/dist/components/progress-linear/modules/root-context.d.ts +9 -0
- package/dist/components/progress-linear/modules/root-context.js +2 -0
- package/dist/components/rating-group/anatomy/control.svelte +26 -0
- package/dist/components/rating-group/anatomy/control.svelte.d.ts +7 -0
- package/dist/components/rating-group/anatomy/hidden-input.svelte +28 -0
- package/dist/components/rating-group/anatomy/hidden-input.svelte.d.ts +7 -0
- package/dist/components/rating-group/anatomy/item-context.svelte +18 -0
- package/dist/components/rating-group/anatomy/item-context.svelte.d.ts +8 -0
- package/dist/components/rating-group/anatomy/item.svelte +86 -0
- package/dist/components/rating-group/anatomy/item.svelte.d.ts +27 -0
- package/dist/components/rating-group/anatomy/label.svelte +26 -0
- package/dist/components/rating-group/anatomy/label.svelte.d.ts +7 -0
- package/dist/components/rating-group/anatomy/root-context.svelte +18 -0
- package/dist/components/rating-group/anatomy/root-context.svelte.d.ts +8 -0
- package/dist/components/rating-group/anatomy/root.svelte +47 -0
- package/dist/components/rating-group/anatomy/root.svelte.d.ts +8 -0
- package/dist/components/rating-group/index.d.ts +10 -0
- package/dist/components/rating-group/index.js +1 -0
- package/dist/components/rating-group/modules/anatomy.d.ts +8 -0
- package/dist/components/rating-group/modules/anatomy.js +15 -0
- package/dist/components/rating-group/modules/item-context.d.ts +9 -0
- package/dist/components/rating-group/modules/item-context.js +2 -0
- package/dist/components/rating-group/modules/root-context.d.ts +9 -0
- package/dist/components/rating-group/modules/root-context.js +2 -0
- package/dist/components/tabs/anatomy/content.svelte +31 -0
- package/dist/components/tabs/anatomy/content.svelte.d.ts +8 -0
- package/dist/components/tabs/anatomy/indicator.svelte +26 -0
- package/dist/components/tabs/anatomy/indicator.svelte.d.ts +7 -0
- package/dist/components/tabs/anatomy/list.svelte +28 -0
- package/dist/components/tabs/anatomy/list.svelte.d.ts +7 -0
- package/dist/components/tabs/anatomy/root-context.svelte +18 -0
- package/dist/components/tabs/anatomy/root-context.svelte.d.ts +8 -0
- package/dist/components/tabs/anatomy/root.svelte +44 -0
- package/dist/components/tabs/anatomy/root.svelte.d.ts +8 -0
- package/dist/components/tabs/anatomy/trigger.svelte +31 -0
- package/dist/components/tabs/anatomy/trigger.svelte.d.ts +8 -0
- package/dist/components/tabs/index.d.ts +1 -0
- package/dist/components/tabs/index.js +1 -0
- package/dist/components/tabs/modules/anatomy.d.ts +7 -0
- package/dist/components/tabs/modules/anatomy.js +13 -0
- package/dist/components/tabs/modules/root-context.d.ts +9 -0
- package/dist/components/tabs/modules/root-context.js +2 -0
- package/dist/index.d.ts +5 -2
- package/dist/index.js +5 -2
- package/dist/internal/components/star-empty.svelte +12 -0
- package/dist/internal/components/star-empty.svelte.d.ts +26 -0
- package/dist/internal/components/star-full.svelte +12 -0
- package/dist/internal/components/star-full.svelte.d.ts +26 -0
- package/dist/internal/components/star-half.svelte +19 -0
- package/dist/internal/components/star-half.svelte.d.ts +26 -0
- package/dist/internal/create-context.d.ts +5 -6
- package/dist/internal/create-context.js +10 -9
- package/dist/internal/props-with-element.d.ts +3 -0
- package/package.json +3 -4
- package/dist/components/accordion/anatomy/accordion-content.svelte +0 -28
- package/dist/components/accordion/anatomy/accordion-content.svelte.d.ts +0 -4
- package/dist/components/accordion/anatomy/accordion-heading.svelte +0 -25
- package/dist/components/accordion/anatomy/accordion-heading.svelte.d.ts +0 -4
- package/dist/components/accordion/anatomy/accordion-indicator.svelte +0 -28
- package/dist/components/accordion/anatomy/accordion-indicator.svelte.d.ts +0 -4
- package/dist/components/accordion/anatomy/accordion-item.svelte +0 -34
- package/dist/components/accordion/anatomy/accordion-item.svelte.d.ts +0 -4
- package/dist/components/accordion/anatomy/accordion-root.svelte +0 -39
- package/dist/components/accordion/anatomy/accordion-root.svelte.d.ts +0 -4
- package/dist/components/accordion/anatomy/accordion-trigger.svelte +0 -28
- package/dist/components/accordion/anatomy/accordion-trigger.svelte.d.ts +0 -4
- package/dist/components/accordion/modules/context.d.ts +0 -12
- package/dist/components/accordion/modules/context.js +0 -4
- package/dist/components/accordion/modules/types.d.ts +0 -29
- package/dist/components/accordion/modules/types.js +0 -1
- package/dist/components/avatar/anatomy/avatar-fallback.svelte +0 -27
- package/dist/components/avatar/anatomy/avatar-fallback.svelte.d.ts +0 -4
- package/dist/components/avatar/anatomy/avatar-image.svelte +0 -25
- package/dist/components/avatar/anatomy/avatar-image.svelte.d.ts +0 -4
- package/dist/components/avatar/anatomy/avatar-root.svelte +0 -39
- package/dist/components/avatar/anatomy/avatar-root.svelte.d.ts +0 -4
- package/dist/components/avatar/modules/context.d.ts +0 -7
- package/dist/components/avatar/modules/context.js +0 -3
- package/dist/components/avatar/modules/types.d.ts +0 -14
- package/dist/components/avatar/modules/types.js +0 -1
- package/dist/internal/create-context-new.d.ts +0 -5
- package/dist/internal/create-context-new.js +0 -13
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { RatingGroup } from './modules/anatomy';
|
|
2
|
+
export type { RatingGroupRootProps } from './anatomy/root.svelte';
|
|
3
|
+
export type { RatingGroupRootContextProps } from './anatomy/root-context.svelte';
|
|
4
|
+
export type { RatingGroupLabelProps } from './anatomy/label.svelte';
|
|
5
|
+
export type { RatingGroupControlProps } from './anatomy/control.svelte';
|
|
6
|
+
export type { RatingGroupItemProps } from './anatomy/item.svelte';
|
|
7
|
+
export type { RatingGroupItemContextProps } from './anatomy/item-context.svelte';
|
|
8
|
+
export type { RatingGroupHiddenInputProps } from './anatomy/hidden-input.svelte';
|
|
9
|
+
export type { RatingGroupRootContextType as RatingGroupRootContext } from './modules/root-context';
|
|
10
|
+
export type { RatingGroupItemContextType as RatingGroupItemContext } from './modules/item-context';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { RatingGroup } from './modules/anatomy';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const RatingGroup: import("svelte").Component<import("../anatomy/root.svelte").RatingGroupRootProps, {}, ""> & {
|
|
2
|
+
Context: import("svelte").Component<import("../anatomy/root-context.svelte").RatingGroupRootContextProps, {}, "">;
|
|
3
|
+
Label: import("svelte").Component<import("../anatomy/label.svelte").RatingGroupLabelProps, {}, "">;
|
|
4
|
+
Control: import("svelte").Component<import("../anatomy/control.svelte").RatingGroupControlProps, {}, "">;
|
|
5
|
+
Item: import("svelte").Component<import("../anatomy/item.svelte").RatingGroupItemProps, {}, "">;
|
|
6
|
+
ItemContext: import("svelte").Component<import("../anatomy/item-context.svelte").RatingGroupItemContextProps, {}, "">;
|
|
7
|
+
HiddenInput: import("svelte").Component<import("../anatomy/hidden-input.svelte").RatingGroupHiddenInputProps, {}, "">;
|
|
8
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import Root from '../anatomy/root.svelte';
|
|
2
|
+
import RootContext from '../anatomy/root-context.svelte';
|
|
3
|
+
import Label from '../anatomy/label.svelte';
|
|
4
|
+
import Control from '../anatomy/control.svelte';
|
|
5
|
+
import Item from '../anatomy/item.svelte';
|
|
6
|
+
import ItemContext from '../anatomy/item-context.svelte';
|
|
7
|
+
import HiddenInput from '../anatomy/hidden-input.svelte';
|
|
8
|
+
export const RatingGroup = Object.assign(Root, {
|
|
9
|
+
Context: RootContext,
|
|
10
|
+
Label: Label,
|
|
11
|
+
Control: Control,
|
|
12
|
+
Item: Item,
|
|
13
|
+
ItemContext: ItemContext,
|
|
14
|
+
HiddenInput: HiddenInput
|
|
15
|
+
});
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { ItemState } from '@zag-js/rating-group';
|
|
2
|
+
export interface RatingGroupItemContextType {
|
|
3
|
+
itemState: ItemState;
|
|
4
|
+
}
|
|
5
|
+
export declare const RatingGroupItemContext: {
|
|
6
|
+
key: symbol;
|
|
7
|
+
consume(): RatingGroupItemContextType;
|
|
8
|
+
provide(value: RatingGroupItemContextType): RatingGroupItemContextType;
|
|
9
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Api } from '@zag-js/rating-group';
|
|
2
|
+
export interface RatingGroupRootContextType {
|
|
3
|
+
api: Api;
|
|
4
|
+
}
|
|
5
|
+
export declare const RatingGroupRootContext: {
|
|
6
|
+
key: symbol;
|
|
7
|
+
consume(): RatingGroupRootContextType;
|
|
8
|
+
provide(value: RatingGroupRootContextType): RatingGroupRootContextType;
|
|
9
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { ContentProps } from '@zag-js/tabs';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
5
|
+
|
|
6
|
+
export interface TabsContentProps extends ContentProps, PropsWithElement, HTMLAttributes<HTMLDivElement> {}
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<script lang="ts">
|
|
10
|
+
import { TabsRootContext } from '../modules/root-context';
|
|
11
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
12
|
+
import { classesTabs } from '@skeletonlabs/skeleton-common';
|
|
13
|
+
import { splitContentProps } from '@zag-js/tabs';
|
|
14
|
+
|
|
15
|
+
const props: TabsContentProps = $props();
|
|
16
|
+
|
|
17
|
+
const rootContext = TabsRootContext.consume();
|
|
18
|
+
|
|
19
|
+
const [contentProps, componentProps] = $derived(splitContentProps(props));
|
|
20
|
+
const { element, children, ...restAttributes } = $derived(componentProps);
|
|
21
|
+
|
|
22
|
+
const attributes = $derived(mergeProps(rootContext.api.getContentProps(contentProps), { class: classesTabs.content }, restAttributes));
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
{#if element}
|
|
26
|
+
{@render element({ attributes })}
|
|
27
|
+
{:else}
|
|
28
|
+
<div {...attributes}>
|
|
29
|
+
{@render children?.()}
|
|
30
|
+
</div>
|
|
31
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ContentProps } from '@zag-js/tabs';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
export interface TabsContentProps extends ContentProps, PropsWithElement, HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
}
|
|
6
|
+
declare const Content: import("svelte").Component<TabsContentProps, {}, "">;
|
|
7
|
+
type Content = ReturnType<typeof Content>;
|
|
8
|
+
export default Content;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface TabsIndicatorProps extends PropsWithElement, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { TabsRootContext } from '../modules/root-context';
|
|
10
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
11
|
+
import { classesTabs } from '@skeletonlabs/skeleton-common';
|
|
12
|
+
|
|
13
|
+
const props: TabsIndicatorProps = $props();
|
|
14
|
+
|
|
15
|
+
const rootContext = TabsRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { element, ...restAttributes } = $derived(props);
|
|
18
|
+
|
|
19
|
+
const attributes = $derived(mergeProps(rootContext.api.getIndicatorProps(), { class: classesTabs.indicator }, restAttributes));
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
{#if element}
|
|
23
|
+
{@render element({ attributes })}
|
|
24
|
+
{:else}
|
|
25
|
+
<div {...attributes}></div>
|
|
26
|
+
{/if}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface TabsIndicatorProps extends PropsWithElement, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
4
|
+
}
|
|
5
|
+
declare const Indicator: import("svelte").Component<TabsIndicatorProps, {}, "">;
|
|
6
|
+
type Indicator = ReturnType<typeof Indicator>;
|
|
7
|
+
export default Indicator;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface TabsListProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { TabsRootContext } from '../modules/root-context';
|
|
10
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
11
|
+
import { classesTabs } from '@skeletonlabs/skeleton-common';
|
|
12
|
+
|
|
13
|
+
const props: TabsListProps = $props();
|
|
14
|
+
|
|
15
|
+
const rootContext = TabsRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { element, children, ...restAttributes } = $derived(props);
|
|
18
|
+
|
|
19
|
+
const attributes = $derived(mergeProps(rootContext.api.getListProps(), { class: classesTabs.list }, restAttributes));
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
{#if element}
|
|
23
|
+
{@render element({ attributes })}
|
|
24
|
+
{:else}
|
|
25
|
+
<div {...attributes}>
|
|
26
|
+
{@render children?.()}
|
|
27
|
+
</div>
|
|
28
|
+
{/if}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface TabsListProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
}
|
|
5
|
+
declare const List: import("svelte").Component<TabsListProps, {}, "">;
|
|
6
|
+
type List = ReturnType<typeof List>;
|
|
7
|
+
export default List;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import type { TabsRootContextType } from '../modules/root-context';
|
|
4
|
+
|
|
5
|
+
export interface TabsRootContextProps {
|
|
6
|
+
children: Snippet<[TabsRootContextType]>;
|
|
7
|
+
}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import { TabsRootContext } from '../modules/root-context';
|
|
12
|
+
|
|
13
|
+
const props: TabsRootContextProps = $props();
|
|
14
|
+
|
|
15
|
+
const rootContext = TabsRootContext.consume();
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
{@render props.children(rootContext)}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { TabsRootContextType } from '../modules/root-context';
|
|
3
|
+
export interface TabsRootContextProps {
|
|
4
|
+
children: Snippet<[TabsRootContextType]>;
|
|
5
|
+
}
|
|
6
|
+
declare const RootContext: import("svelte").Component<TabsRootContextProps, {}, "">;
|
|
7
|
+
type RootContext = ReturnType<typeof RootContext>;
|
|
8
|
+
export default RootContext;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Props } from '@zag-js/tabs';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
5
|
+
|
|
6
|
+
export interface TabsRootProps
|
|
7
|
+
extends Omit<Props, 'id'>,
|
|
8
|
+
PropsWithElement,
|
|
9
|
+
Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {}
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<script lang="ts">
|
|
13
|
+
import { connect, machine, splitProps } from '@zag-js/tabs';
|
|
14
|
+
import { classesTabs } from '@skeletonlabs/skeleton-common';
|
|
15
|
+
import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
|
|
16
|
+
import { TabsRootContext } from '../modules/root-context';
|
|
17
|
+
|
|
18
|
+
const props: TabsRootProps = $props();
|
|
19
|
+
const [machineProps, componentProps] = $derived(splitProps(props));
|
|
20
|
+
const { element, children, ...restAttributes } = $derived(componentProps);
|
|
21
|
+
|
|
22
|
+
const id = $props.id();
|
|
23
|
+
const service = useMachine(machine, () => ({
|
|
24
|
+
id: id,
|
|
25
|
+
...machineProps
|
|
26
|
+
}));
|
|
27
|
+
const api = $derived(connect(service, normalizeProps));
|
|
28
|
+
|
|
29
|
+
const attributes = $derived(mergeProps(api.getRootProps(), { class: classesTabs.root }, restAttributes));
|
|
30
|
+
|
|
31
|
+
TabsRootContext.provide({
|
|
32
|
+
get api() {
|
|
33
|
+
return api;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
{#if element}
|
|
39
|
+
{@render element({ attributes })}
|
|
40
|
+
{:else}
|
|
41
|
+
<div {...attributes}>
|
|
42
|
+
{@render children?.()}
|
|
43
|
+
</div>
|
|
44
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Props } from '@zag-js/tabs';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
export interface TabsRootProps extends Omit<Props, 'id'>, PropsWithElement, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {
|
|
5
|
+
}
|
|
6
|
+
declare const Root: import("svelte").Component<TabsRootProps, {}, "">;
|
|
7
|
+
type Root = ReturnType<typeof Root>;
|
|
8
|
+
export default Root;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { TriggerProps } from '@zag-js/tabs';
|
|
3
|
+
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
4
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
5
|
+
|
|
6
|
+
export interface TabsTriggerProps extends TriggerProps, PropsWithElement, Omit<HTMLButtonAttributes, 'value' | 'disabled'> {}
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<script lang="ts">
|
|
10
|
+
import { TabsRootContext } from '../modules/root-context';
|
|
11
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
12
|
+
import { classesTabs } from '@skeletonlabs/skeleton-common';
|
|
13
|
+
import { splitTriggerProps } from '@zag-js/tabs';
|
|
14
|
+
|
|
15
|
+
const props: TabsTriggerProps = $props();
|
|
16
|
+
|
|
17
|
+
const rootContext = TabsRootContext.consume();
|
|
18
|
+
|
|
19
|
+
const [triggerProps, componentProps] = $derived(splitTriggerProps(props));
|
|
20
|
+
const { element, children, ...restAttributes } = $derived(componentProps);
|
|
21
|
+
|
|
22
|
+
const attributes = $derived(mergeProps(rootContext.api.getTriggerProps(triggerProps), { class: classesTabs.trigger }, restAttributes));
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
{#if element}
|
|
26
|
+
{@render element({ attributes })}
|
|
27
|
+
{:else}
|
|
28
|
+
<button {...attributes}>
|
|
29
|
+
{@render children?.()}
|
|
30
|
+
</button>
|
|
31
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { TriggerProps } from '@zag-js/tabs';
|
|
2
|
+
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
export interface TabsTriggerProps extends TriggerProps, PropsWithElement, Omit<HTMLButtonAttributes, 'value' | 'disabled'> {
|
|
5
|
+
}
|
|
6
|
+
declare const Trigger: import("svelte").Component<TabsTriggerProps, {}, "">;
|
|
7
|
+
type Trigger = ReturnType<typeof Trigger>;
|
|
8
|
+
export default Trigger;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './modules/anatomy';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './modules/anatomy';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const Tabs: import("svelte").Component<import("../anatomy/root.svelte").TabsRootProps, {}, ""> & {
|
|
2
|
+
Context: import("svelte").Component<import("../anatomy/root-context.svelte").TabsRootContextProps, {}, "">;
|
|
3
|
+
List: import("svelte").Component<import("../anatomy/list.svelte").TabsListProps, {}, "">;
|
|
4
|
+
Trigger: import("svelte").Component<import("../anatomy/trigger.svelte").TabsTriggerProps, {}, "">;
|
|
5
|
+
Indicator: import("svelte").Component<import("../anatomy/indicator.svelte").TabsIndicatorProps, {}, "">;
|
|
6
|
+
Content: import("svelte").Component<import("../anatomy/content.svelte").TabsContentProps, {}, "">;
|
|
7
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import Root from '../anatomy/root.svelte';
|
|
2
|
+
import RootContext from '../anatomy/root-context.svelte';
|
|
3
|
+
import List from '../anatomy/list.svelte';
|
|
4
|
+
import Trigger from '../anatomy/trigger.svelte';
|
|
5
|
+
import Indicator from '../anatomy/indicator.svelte';
|
|
6
|
+
import Content from '../anatomy/content.svelte';
|
|
7
|
+
export const Tabs = Object.assign(Root, {
|
|
8
|
+
Context: RootContext,
|
|
9
|
+
List: List,
|
|
10
|
+
Trigger: Trigger,
|
|
11
|
+
Indicator: Indicator,
|
|
12
|
+
Content: Content
|
|
13
|
+
});
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
export * from './components/accordion/index
|
|
2
|
-
export * from './components/avatar/index
|
|
1
|
+
export * from './components/accordion/index';
|
|
2
|
+
export * from './components/avatar/index';
|
|
3
|
+
export * from './components/progress-linear/index';
|
|
4
|
+
export * from './components/rating-group/index';
|
|
5
|
+
export * from './components/tabs/index';
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
export * from './components/accordion/index
|
|
2
|
-
export * from './components/avatar/index
|
|
1
|
+
export * from './components/accordion/index';
|
|
2
|
+
export * from './components/avatar/index';
|
|
3
|
+
export * from './components/progress-linear/index';
|
|
4
|
+
export * from './components/rating-group/index';
|
|
5
|
+
export * from './components/tabs/index';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
2
|
+
<path
|
|
3
|
+
stroke-linecap="round"
|
|
4
|
+
stroke-linejoin="round"
|
|
5
|
+
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345
|
|
6
|
+
l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557
|
|
7
|
+
l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0
|
|
8
|
+
L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557
|
|
9
|
+
l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345
|
|
10
|
+
L11.48 3.5Z"
|
|
11
|
+
/>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default StarEmpty;
|
|
2
|
+
type StarEmpty = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string | undefined;
|
|
8
|
+
};
|
|
9
|
+
declare const StarEmpty: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
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> {
|
|
15
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
16
|
+
$$bindings?: Bindings;
|
|
17
|
+
} & Exports;
|
|
18
|
+
(internal: unknown, props: {
|
|
19
|
+
$$events?: Events;
|
|
20
|
+
$$slots?: Slots;
|
|
21
|
+
}): Exports & {
|
|
22
|
+
$set?: any;
|
|
23
|
+
$on?: any;
|
|
24
|
+
};
|
|
25
|
+
z_$$bindings?: Bindings;
|
|
26
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" fill="currentColor">
|
|
2
|
+
<path
|
|
3
|
+
fill-rule="evenodd"
|
|
4
|
+
clip-rule="evenodd"
|
|
5
|
+
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006
|
|
6
|
+
5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527
|
|
7
|
+
1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354
|
|
8
|
+
7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273
|
|
9
|
+
-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434
|
|
10
|
+
2.082-5.005Z"
|
|
11
|
+
/>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default StarFull;
|
|
2
|
+
type StarFull = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string | undefined;
|
|
8
|
+
};
|
|
9
|
+
declare const StarFull: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
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> {
|
|
15
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
16
|
+
$$bindings?: Bindings;
|
|
17
|
+
} & Exports;
|
|
18
|
+
(internal: unknown, props: {
|
|
19
|
+
$$events?: Events;
|
|
20
|
+
$$slots?: Slots;
|
|
21
|
+
}): Exports & {
|
|
22
|
+
$set?: any;
|
|
23
|
+
$on?: any;
|
|
24
|
+
};
|
|
25
|
+
z_$$bindings?: Bindings;
|
|
26
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
2
|
+
<defs>
|
|
3
|
+
<linearGradient id="half-fill" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
4
|
+
<stop offset="50%" stop-color="currentColor" />
|
|
5
|
+
<stop offset="50%" stop-color="transparent" />
|
|
6
|
+
</linearGradient>
|
|
7
|
+
</defs>
|
|
8
|
+
<path
|
|
9
|
+
fill="url(#half-fill)"
|
|
10
|
+
stroke-linecap="round"
|
|
11
|
+
stroke-linejoin="round"
|
|
12
|
+
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345
|
|
13
|
+
l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557
|
|
14
|
+
l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0
|
|
15
|
+
L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557
|
|
16
|
+
l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345
|
|
17
|
+
L11.48 3.5Z"
|
|
18
|
+
/>
|
|
19
|
+
</svg>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default StarHalf;
|
|
2
|
+
type StarHalf = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string | undefined;
|
|
8
|
+
};
|
|
9
|
+
declare const StarHalf: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
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> {
|
|
15
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
16
|
+
$$bindings?: Bindings;
|
|
17
|
+
} & Exports;
|
|
18
|
+
(internal: unknown, props: {
|
|
19
|
+
$$events?: Events;
|
|
20
|
+
$$slots?: Slots;
|
|
21
|
+
}): Exports & {
|
|
22
|
+
$set?: any;
|
|
23
|
+
$on?: any;
|
|
24
|
+
};
|
|
25
|
+
z_$$bindings?: Bindings;
|
|
26
|
+
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export declare function createContext<T>(defaultValue: T): readonly [(value: T) => T, () => T, symbol];
|
|
1
|
+
export declare function createContext<T>(): {
|
|
2
|
+
key: symbol;
|
|
3
|
+
consume(): T;
|
|
4
|
+
provide(value: T): T;
|
|
5
|
+
};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { getContext, setContext } from 'svelte';
|
|
2
|
-
|
|
3
|
-
* Create a context with a default value
|
|
4
|
-
* @param defaultValue The default value that will be returned if the context is not set
|
|
5
|
-
* @returns [set, get, key] The setter, getter and key for the context, the getter returns the default value if the context is not set
|
|
6
|
-
*/
|
|
7
|
-
export function createContext(defaultValue) {
|
|
2
|
+
export function createContext() {
|
|
8
3
|
const key = Symbol();
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
return {
|
|
5
|
+
key: key,
|
|
6
|
+
consume() {
|
|
7
|
+
return getContext(key);
|
|
8
|
+
},
|
|
9
|
+
provide(value) {
|
|
10
|
+
return setContext(key, value);
|
|
11
|
+
}
|
|
12
|
+
};
|
|
12
13
|
}
|
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.3",
|
|
4
4
|
"description": "The Svelte package for Skeleton.",
|
|
5
5
|
"author": "endigo9740 <chris@skeletonlabs.dev>",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -33,13 +33,12 @@
|
|
|
33
33
|
"@zag-js/tags-input": "^1.22.1",
|
|
34
34
|
"@zag-js/toast": "^1.22.1",
|
|
35
35
|
"@zag-js/tooltip": "^1.22.1",
|
|
36
|
-
"@skeletonlabs/skeleton-common": "1.0.0-next.
|
|
36
|
+
"@skeletonlabs/skeleton-common": "1.0.0-next.3"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"svelte": "^5.20.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@sveltejs/adapter-auto": "^6.1.0",
|
|
43
42
|
"@sveltejs/kit": "^2.37.0",
|
|
44
43
|
"@sveltejs/package": "^2.5.0",
|
|
45
44
|
"@sveltejs/vite-plugin-svelte": "^6.1.3",
|
|
@@ -53,7 +52,7 @@
|
|
|
53
52
|
"typescript": "^5.9.2",
|
|
54
53
|
"vite": "^7.1.3",
|
|
55
54
|
"vitest": "3.2.4",
|
|
56
|
-
"@skeletonlabs/skeleton": "4.0.0-next.
|
|
55
|
+
"@skeletonlabs/skeleton": "4.0.0-next.2"
|
|
57
56
|
},
|
|
58
57
|
"type": "module",
|
|
59
58
|
"scripts": {
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { mergeProps } from '@zag-js/svelte';
|
|
3
|
-
import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
|
|
4
|
-
import { classesAccordion } from '@skeletonlabs/skeleton-common';
|
|
5
|
-
import type { AccordionContentProps } from '../modules/types.js';
|
|
6
|
-
|
|
7
|
-
const rootContext = AccordionRootContext.consume();
|
|
8
|
-
const itemContext = AccordionItemContext.consume();
|
|
9
|
-
const props: AccordionContentProps = $props();
|
|
10
|
-
const { element, children, ...restAttributes } = $derived(props);
|
|
11
|
-
const attributes = $derived(
|
|
12
|
-
mergeProps(
|
|
13
|
-
rootContext.api.getItemContentProps(itemContext.itemProps),
|
|
14
|
-
{
|
|
15
|
-
class: classesAccordion.content
|
|
16
|
-
},
|
|
17
|
-
restAttributes
|
|
18
|
-
)
|
|
19
|
-
);
|
|
20
|
-
</script>
|
|
21
|
-
|
|
22
|
-
{#if element}
|
|
23
|
-
{@render element({ attributes })}
|
|
24
|
-
{:else}
|
|
25
|
-
<div {...attributes}>
|
|
26
|
-
{@render children?.()}
|
|
27
|
-
</div>
|
|
28
|
-
{/if}
|