@skeletonlabs/skeleton-svelte 2.0.0-next.1 → 2.0.0-next.2

package/dist/components/rating-group/anatomy/rating-group-hidden-input.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface RatingGroupHiddenInputProps extends PropsWithElement, Omit<HTMLInputAttributes, 'id' | 'defaultValue' | 'dir' | 'children'> {
+}
+declare const RatingGroupHiddenInput: import("svelte").Component<RatingGroupHiddenInputProps, {}, "">;
+type RatingGroupHiddenInput = ReturnType<typeof RatingGroupHiddenInput>;
+export default RatingGroupHiddenInput;

package/dist/components/rating-group/anatomy/rating-group-item-context.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { RatingGroupItemContextType } from '../modules/rating-group-item-context.js';
+
+	export interface RatingGroupItemContextProps {
+		children: Snippet<[RatingGroupItemContextType]>;
+	}
+</script>
+
+<script lang="ts">
+	import { RatingGroupItemContext } from '../modules/rating-group-item-context.js';
+
+	const props: RatingGroupItemContextProps = $props();
+	const itemContext = RatingGroupItemContext.consume();
+</script>
+
+{@render props.children(itemContext)}

package/dist/components/rating-group/anatomy/rating-group-item-context.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { RatingGroupItemContextType } from '../modules/rating-group-item-context.js';
+export interface RatingGroupItemContextProps {
+    children: Snippet<[RatingGroupItemContextType]>;
+}
+import { RatingGroupItemContext } from '../modules/rating-group-item-context.js';
+declare const RatingGroupItemContext: import("svelte").Component<RatingGroupItemContextProps, {}, "">;
+type RatingGroupItemContext = ReturnType<typeof RatingGroupItemContext>;
+export default RatingGroupItemContext;

package/dist/components/rating-group/anatomy/rating-group-item.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { ItemProps } from '@zag-js/rating-group';
+
+	export interface RatingGroupItemProps
+		extends PropsWithElement,
+			ItemProps,
+			Omit<HTMLAttributes<HTMLSpanElement>, 'id' | 'defaultValue' | 'dir'> {
+		/**
+		 * The content to render when the item is in the empty state.
+		 *
+		 * @default StarEmpty (SVG)
+		 */
+		empty?: Snippet;
+		/**
+		 * The content to render when the item is in the half state.
+		 *
+		 * @default StarHalf (SVG)
+		 */
+		half?: Snippet;
+		/**
+		 * The content to render when the item is in the full state.
+		 *
+		 * @default StarFull (SVG)
+		 */
+		full?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesRatingGroup } from '@skeletonlabs/skeleton-common';
+	import { splitItemProps } from '@zag-js/rating-group';
+	import { RatingGroupRootContext } from '../modules/rating-group-root-context.js';
+	import { RatingGroupItemContext } from '../modules/rating-group-item-context.js';
+	import StarFull from '../../../internal/components/star-full.svelte';
+	import StarEmpty from '../../../internal/components/star-empty.svelte';
+	import StarHalf from '../../../internal/components/star-half.svelte';
+	import type { Snippet } from 'svelte';
+
+	const rootContext = RatingGroupRootContext.consume();
+	const props: RatingGroupItemProps = $props();
+	const [itemProps, componentProps] = $derived(splitItemProps(props));
+	const { element, children, empty = starEmpty, half = starHalf, full = starFull, ...restAttributes } = $derived(componentProps);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getItemProps(itemProps),
+			{
+				class: classesRatingGroup.item
+			},
+			restAttributes
+		)
+	);
+	const itemState = $derived(rootContext.api.getItemState(itemProps));
+	RatingGroupItemContext.provide({
+		get itemState() {
+			return itemState;
+		}
+	});
+</script>
+
+{#snippet starEmpty()}
+	<StarEmpty />
+{/snippet}
+
+{#snippet starHalf()}
+	<StarHalf />
+{/snippet}
+
+{#snippet starFull()}
+	<StarFull />
+{/snippet}
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{#if children}
+			{@render children()}
+		{:else if !itemState.highlighted}
+			{@render empty?.()}
+		{:else if itemState.half}
+			{@render half?.()}
+		{:else}
+			{@render full?.()}
+		{/if}
+	</div>
+{/if}

package/dist/components/rating-group/anatomy/rating-group-item.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { ItemProps } from '@zag-js/rating-group';
+export interface RatingGroupItemProps extends PropsWithElement, ItemProps, Omit<HTMLAttributes<HTMLSpanElement>, 'id' | 'defaultValue' | 'dir'> {
+    /**
+     * The content to render when the item is in the empty state.
+     *
+     * @default StarEmpty (SVG)
+     */
+    empty?: Snippet;
+    /**
+     * The content to render when the item is in the half state.
+     *
+     * @default StarHalf (SVG)
+     */
+    half?: Snippet;
+    /**
+     * The content to render when the item is in the full state.
+     *
+     * @default StarFull (SVG)
+     */
+    full?: Snippet;
+}
+import type { Snippet } from 'svelte';
+declare const RatingGroupItem: import("svelte").Component<RatingGroupItemProps, {}, "">;
+type RatingGroupItem = ReturnType<typeof RatingGroupItem>;
+export default RatingGroupItem;

package/dist/components/rating-group/anatomy/rating-group-label.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface RatingGroupLabelProps extends PropsWithElement, Omit<HTMLAttributes<HTMLLabelElement>, 'id' | 'defaultValue' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesRatingGroup } from '@skeletonlabs/skeleton-common';
+	import { RatingGroupRootContext } from '../modules/rating-group-root-context.js';
+
+	const rootContext = RatingGroupRootContext.consume();
+	const props: RatingGroupLabelProps = $props();
+	const { element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getControlProps(),
+			{
+				class: classesRatingGroup.label
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<label {...attributes}>{@render children?.()}</label>
+{/if}

package/dist/components/rating-group/anatomy/rating-group-label.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface RatingGroupLabelProps extends PropsWithElement, Omit<HTMLAttributes<HTMLLabelElement>, 'id' | 'defaultValue' | 'dir'> {
+}
+declare const RatingGroupLabel: import("svelte").Component<RatingGroupLabelProps, {}, "">;
+type RatingGroupLabel = ReturnType<typeof RatingGroupLabel>;
+export default RatingGroupLabel;

package/dist/components/rating-group/anatomy/rating-group-root-context.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { RatingGroupRootContextType } from '../modules/rating-group-root-context.js';
+
+	export interface RatingGroupRootContextProps {
+		children: Snippet<[RatingGroupRootContextType]>;
+	}
+</script>
+
+<script lang="ts">
+	import { RatingGroupRootContext } from '../modules/rating-group-root-context.js';
+
+	const props: RatingGroupRootContextProps = $props();
+	const rootContext = RatingGroupRootContext.consume();
+</script>
+
+{@render props.children(rootContext)}

package/dist/components/rating-group/anatomy/rating-group-root-context.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { RatingGroupRootContextType } from '../modules/rating-group-root-context.js';
+export interface RatingGroupRootContextProps {
+    children: Snippet<[RatingGroupRootContextType]>;
+}
+import { RatingGroupRootContext } from '../modules/rating-group-root-context.js';
+declare const RatingGroupRootContext: import("svelte").Component<RatingGroupRootContextProps, {}, "">;
+type RatingGroupRootContext = ReturnType<typeof RatingGroupRootContext>;
+export default RatingGroupRootContext;

package/dist/components/rating-group/anatomy/rating-group-root.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { Props } from '@zag-js/rating-group';
+
+	export interface RatingGroupRootProps
+		extends PropsWithElement,
+			Omit<Props, 'id'>,
+			Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte';
+	import { splitProps, machine, connect } from '@zag-js/rating-group';
+	import { classesRatingGroup } from '@skeletonlabs/skeleton-common';
+	import { RatingGroupRootContext } from '../modules/rating-group-root-context.js';
+
+	const props: RatingGroupRootProps = $props();
+	// @ts-expect-error - https://github.com/chakra-ui/zag/issues/2672
+	const [machineProps, componentProps] = $derived(splitProps(props));
+	// @ts-expect-error - https://github.com/chakra-ui/zag/issues/2672
+	const { element, children, ...restAttributes } = $derived(componentProps);
+	const id = $props.id();
+	const service = useMachine(machine, () => ({
+		// @ts-expect-error - https://github.com/chakra-ui/zag/issues/2672
+		id: id,
+		...machineProps
+	}));
+	const api = $derived(connect(service, normalizeProps));
+	const attributes = $derived(
+		mergeProps(
+			api.getRootProps(),
+			{
+				class: classesRatingGroup.root
+			},
+			restAttributes
+		)
+	);
+	RatingGroupRootContext.provide({
+		get api() {
+			return api;
+		}
+	});
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/rating-group/anatomy/rating-group-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { Props } from '@zag-js/rating-group';
+export interface RatingGroupRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {
+}
+declare const RatingGroupRoot: import("svelte").Component<RatingGroupRootProps, {}, "">;
+type RatingGroupRoot = ReturnType<typeof RatingGroupRoot>;
+export default RatingGroupRoot;

package/dist/components/rating-group/index.d.ts

@@ -0,0 +1,10 @@
+export { RatingGroup } from './modules/rating-group-anatomy';
+export type { RatingGroupRootProps } from './anatomy/rating-group-root.svelte';
+export type { RatingGroupRootContextProps } from './anatomy/rating-group-root-context.svelte';
+export type { RatingGroupLabelProps } from './anatomy/rating-group-label.svelte';
+export type { RatingGroupControlProps } from './anatomy/rating-group-control.svelte';
+export type { RatingGroupItemProps } from './anatomy/rating-group-item.svelte';
+export type { RatingGroupItemContextProps } from './anatomy/rating-group-item-context.svelte';
+export type { RatingGroupHiddenInputProps } from './anatomy/rating-group-hidden-input.svelte';
+export type { RatingGroupRootContextType as RatingGroupRootContext } from './modules/rating-group-root-context.js';
+export type { RatingGroupItemContextType as RatingGroupItemContext } from './modules/rating-group-item-context.js';

package/dist/components/rating-group/index.js

@@ -0,0 +1 @@
+export { RatingGroup } from './modules/rating-group-anatomy';

package/dist/components/rating-group/modules/rating-group-anatomy.d.ts

@@ -0,0 +1,8 @@
+export declare const RatingGroup: import("svelte").Component<import("../anatomy/rating-group-root.svelte").RatingGroupRootProps, {}, ""> & {
+    Context: import("svelte").Component<import("../anatomy/rating-group-root-context.svelte").RatingGroupRootContextProps, {}, "">;
+    Label: import("svelte").Component<import("../anatomy/rating-group-label.svelte").RatingGroupLabelProps, {}, "">;
+    Control: import("svelte").Component<import("../anatomy/rating-group-control.svelte").RatingGroupControlProps, {}, "">;
+    Item: import("svelte").Component<import("../anatomy/rating-group-item.svelte").RatingGroupItemProps, {}, "">;
+    ItemContext: import("svelte").Component<import("../anatomy/rating-group-item-context.svelte").RatingGroupItemContextProps, {}, "">;
+    HiddenInput: import("svelte").Component<import("../anatomy/rating-group-hidden-input.svelte").RatingGroupHiddenInputProps, {}, "">;
+};

package/dist/components/rating-group/modules/rating-group-anatomy.js

@@ -0,0 +1,15 @@
+import RatingGroupRoot from '../anatomy/rating-group-root.svelte';
+import RatingGroupLabel from '../anatomy/rating-group-label.svelte';
+import RatingGroupControl from '../anatomy/rating-group-control.svelte';
+import RatingGroupItem from '../anatomy/rating-group-item.svelte';
+import RatingGroupHiddenInput from '../anatomy/rating-group-hidden-input.svelte';
+import RatingGroupRootContext from '../anatomy/rating-group-root-context.svelte';
+import RatingGroupItemContext from '../anatomy/rating-group-item-context.svelte';
+export const RatingGroup = Object.assign(RatingGroupRoot, {
+    Context: RatingGroupRootContext,
+    Label: RatingGroupLabel,
+    Control: RatingGroupControl,
+    Item: RatingGroupItem,
+    ItemContext: RatingGroupItemContext,
+    HiddenInput: RatingGroupHiddenInput
+});

package/dist/components/rating-group/modules/rating-group-item-context.d.ts

@@ -0,0 +1,9 @@
+import type { ItemState } from '@zag-js/rating-group';
+export interface RatingGroupItemContextType {
+    itemState: ItemState;
+}
+export declare const RatingGroupItemContext: {
+    key: symbol;
+    consume(): RatingGroupItemContextType;
+    provide(value: RatingGroupItemContextType): RatingGroupItemContextType;
+};

package/dist/components/rating-group/modules/rating-group-item-context.js

@@ -0,0 +1,2 @@
+import { createContext } from '../../../internal/create-context.js';
+export const RatingGroupItemContext = createContext();

package/dist/components/rating-group/modules/rating-group-root-context.d.ts

@@ -0,0 +1,9 @@
+import type { Api } from '@zag-js/rating-group';
+export interface RatingGroupRootContextType {
+    api: Api;
+}
+export declare const RatingGroupRootContext: {
+    key: symbol;
+    consume(): RatingGroupRootContextType;
+    provide(value: RatingGroupRootContextType): RatingGroupRootContextType;
+};

package/dist/components/rating-group/modules/rating-group-root-context.js

@@ -0,0 +1,2 @@
+import { createContext } from '../../../internal/create-context.js';
+export const RatingGroupRootContext = createContext();

package/dist/components/tabs/anatomy/tabs-content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { ContentProps } from '@zag-js/tabs';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface TabsContentProps extends ContentProps, PropsWithElement, HTMLAttributes<HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+	import { TabsRootContext } from '../modules/tabs-root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesTabs } from '@skeletonlabs/skeleton-common';
+	import { splitContentProps } from '@zag-js/tabs';
+
+	const props: TabsContentProps = $props();
+	const rootContext = TabsRootContext.consume();
+	const [contentProps, componentProps] = $derived(splitContentProps(props));
+	const { element, children, ...restAttributes } = $derived(componentProps);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getContentProps(contentProps),
+			{
+				class: classesTabs.content
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/tabs/anatomy/tabs-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ContentProps } from '@zag-js/tabs';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface TabsContentProps extends ContentProps, PropsWithElement, HTMLAttributes<HTMLDivElement> {
+}
+declare const TabsContent: import("svelte").Component<TabsContentProps, {}, "">;
+type TabsContent = ReturnType<typeof TabsContent>;
+export default TabsContent;

package/dist/components/tabs/anatomy/tabs-indicator.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface TabsIndicatorProps extends PropsWithElement, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {}
+</script>
+
+<script lang="ts">
+	import { TabsRootContext } from '../modules/tabs-root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesTabs } from '@skeletonlabs/skeleton-common';
+
+	const props: TabsIndicatorProps = $props();
+	const rootContext = TabsRootContext.consume();
+	const { element, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getIndicatorProps(),
+			{
+				class: classesTabs.indicator
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}></div>
+{/if}

package/dist/components/tabs/anatomy/tabs-indicator.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface TabsIndicatorProps extends PropsWithElement, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+}
+declare const TabsIndicator: import("svelte").Component<TabsIndicatorProps, {}, "">;
+type TabsIndicator = ReturnType<typeof TabsIndicator>;
+export default TabsIndicator;

package/dist/components/tabs/anatomy/tabs-list.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface TabsListProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+	import { TabsRootContext } from '../modules/tabs-root-context';
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesTabs } from '@skeletonlabs/skeleton-common';
+
+	const props: TabsListProps = $props();
+	const rootContext = TabsRootContext.consume();
+	const { element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getListProps(),
+			{
+				class: classesTabs.list
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/tabs/anatomy/tabs-list.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface TabsListProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
+}
+declare const TabsList: import("svelte").Component<TabsListProps, {}, "">;
+type TabsList = ReturnType<typeof TabsList>;
+export default TabsList;

package/dist/components/tabs/anatomy/tabs-root-context.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { TabsRootContextType } from '../modules/tabs-root-context.js';
+
+	export interface TabsRootContextProps {
+		children: Snippet<[TabsRootContextType]>;
+	}
+</script>
+
+<script lang="ts">
+	import { TabsRootContext } from '../modules/tabs-root-context.js';
+
+	const props: TabsRootContextProps = $props();
+	const rootContext = TabsRootContext.consume();
+</script>
+
+{@render props.children(rootContext)}

package/dist/components/tabs/anatomy/tabs-root-context.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { TabsRootContextType } from '../modules/tabs-root-context.js';
+export interface TabsRootContextProps {
+    children: Snippet<[TabsRootContextType]>;
+}
+import { TabsRootContext } from '../modules/tabs-root-context.js';
+declare const TabsRootContext: import("svelte").Component<TabsRootContextProps, {}, "">;
+type TabsRootContext = ReturnType<typeof TabsRootContext>;
+export default TabsRootContext;

package/dist/components/tabs/anatomy/tabs-root.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import type { Props } from '@zag-js/tabs';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface TabsRootProps
+		extends Omit<Props, 'id'>,
+			PropsWithElement,
+			Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { connect, machine, splitProps } from '@zag-js/tabs';
+	import { classesTabs } from '@skeletonlabs/skeleton-common';
+	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
+	import { TabsRootContext } from '../modules/tabs-root-context.js';
+
+	const props: TabsRootProps = $props();
+	const [machineProps, componentProps] = $derived(splitProps(props));
+	const { element, children, ...restAttributes } = $derived(componentProps);
+	const id = $props.id();
+	const service = useMachine(machine, () => ({
+		id: id,
+		...machineProps
+	}));
+	const api = $derived(connect(service, normalizeProps));
+	const attributes = $derived(
+		mergeProps(
+			api.getRootProps(),
+			{
+				class: classesTabs.root
+			},
+			restAttributes
+		)
+	);
+	TabsRootContext.provide({
+		get api() {
+			return api;
+		}
+	});
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/tabs/anatomy/tabs-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Props } from '@zag-js/tabs';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface TabsRootProps extends Omit<Props, 'id'>, PropsWithElement, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {
+}
+declare const TabsRoot: import("svelte").Component<TabsRootProps, {}, "">;
+type TabsRoot = ReturnType<typeof TabsRoot>;
+export default TabsRoot;

package/dist/components/tabs/anatomy/tabs-trigger.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { TriggerProps } from '@zag-js/tabs';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface TabsTriggerProps extends TriggerProps, PropsWithElement, Omit<HTMLButtonAttributes, 'value' | 'disabled'> {}
+</script>
+
+<script lang="ts">
+	import { TabsRootContext } from '../modules/tabs-root-context';
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesTabs } from '@skeletonlabs/skeleton-common';
+	import { splitTriggerProps } from '@zag-js/tabs';
+
+	const props: TabsTriggerProps = $props();
+	const rootContext = TabsRootContext.consume();
+	const [triggerProps, componentProps] = $derived(splitTriggerProps(props));
+	const { element, children, ...restAttributes } = $derived(componentProps);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getTriggerProps(triggerProps),
+			{
+				class: classesTabs.trigger
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/tabs/anatomy/tabs-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TriggerProps } from '@zag-js/tabs';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface TabsTriggerProps extends TriggerProps, PropsWithElement, Omit<HTMLButtonAttributes, 'value' | 'disabled'> {
+}
+declare const TabsTrigger: import("svelte").Component<TabsTriggerProps, {}, "">;
+type TabsTrigger = ReturnType<typeof TabsTrigger>;
+export default TabsTrigger;

package/dist/components/tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './modules/tabs-anatomy.js';

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export * from './modules/tabs-anatomy.js';

package/dist/components/tabs/modules/tabs-anatomy.d.ts

@@ -0,0 +1,7 @@
+export declare const Tabs: import("svelte").Component<import("../anatomy/tabs-root.svelte").TabsRootProps, {}, ""> & {
+    Context: import("svelte").Component<import("../anatomy/tabs-root-context.svelte").TabsRootContextProps, {}, "">;
+    List: import("svelte").Component<import("../anatomy/tabs-list.svelte").TabsListProps, {}, "">;
+    Trigger: import("svelte").Component<import("../anatomy/tabs-trigger.svelte").TabsTriggerProps, {}, "">;
+    Indicator: import("svelte").Component<import("../anatomy/tabs-indicator.svelte").TabsIndicatorProps, {}, "">;
+    Content: import("svelte").Component<import("../anatomy/tabs-content.svelte").TabsContentProps, {}, "">;
+};