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

package/dist/components/avatar/modules/anatomy.js

@@ -1,8 +1,9 @@
-import AvatarRoot from '../anatomy/avatar-root.svelte';
-import AvatarImage from '../anatomy/avatar-image.svelte';
-import AvatarFallback from '../anatomy/avatar-fallback.svelte';
-const Avatar = Object.assign(AvatarRoot, {
-    Image: AvatarImage,
-    Fallback: AvatarFallback
+import Root from '../anatomy/root.svelte';
+import RootContext from '../anatomy/root-context.svelte';
+import Image from '../anatomy/image.svelte';
+import Fallback from '../anatomy/fallback.svelte';
+export const Avatar = Object.assign(Root, {
+    Context: RootContext,
+    Image: Image,
+    Fallback: Fallback
 });
-export { Avatar };

package/dist/components/avatar/modules/root-context.d.ts

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

package/dist/components/avatar/modules/root-context.js

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

package/dist/components/progress-linear/anatomy/label.svelte

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

package/dist/components/progress-linear/anatomy/label.svelte.d.ts

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

package/dist/components/progress-linear/anatomy/range.svelte

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

package/dist/components/progress-linear/anatomy/range.svelte.d.ts

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

package/dist/components/progress-linear/anatomy/root-context.svelte

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

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { ProgressLinearRootContextType } from '../modules/root-context';
+export interface ProgressLinearRootContextProps {
+    children: Snippet<[ProgressLinearRootContextType]>;
+}
+declare const RootContext: import("svelte").Component<ProgressLinearRootContextProps, {}, "">;
+type RootContext = ReturnType<typeof RootContext>;
+export default RootContext;

package/dist/components/progress-linear/anatomy/root.svelte

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

package/dist/components/progress-linear/anatomy/root.svelte.d.ts

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

package/dist/components/progress-linear/anatomy/track.svelte

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

package/dist/components/progress-linear/anatomy/track.svelte.d.ts

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

package/dist/components/progress-linear/index.d.ts

@@ -0,0 +1,7 @@
+export { ProgressLinear } from './modules/anatomy';
+export type { ProgressLinearRootProps } from './anatomy/root.svelte';
+export type { ProgressLinearRootContextProps } from './anatomy/root-context.svelte';
+export type { ProgressLinearLabelProps } from './anatomy/label.svelte';
+export type { ProgressLinearTrackProps } from './anatomy/track.svelte';
+export type { ProgressLinearRangeProps } from './anatomy/range.svelte';
+export type { ProgressLinearRootContextType as ProgressLinearRootContext } from './modules/root-context';

package/dist/components/progress-linear/index.js

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

package/dist/components/progress-linear/modules/anatomy.d.ts

@@ -0,0 +1,6 @@
+export declare const ProgressLinear: import("svelte").Component<import("../anatomy/root.svelte").ProgressLinearRootProps, {}, ""> & {
+    Context: import("svelte").Component<import("../anatomy/root-context.svelte").ProgressLinearRootContextProps, {}, "">;
+    Label: import("svelte").Component<import("../anatomy/label.svelte").ProgressLinearLabelProps, {}, "">;
+    Track: import("svelte").Component<import("../anatomy/track.svelte").ProgressLinearTrackProps, {}, "">;
+    Range: import("svelte").Component<import("../anatomy/range.svelte").ProgressLinearRangeProps, {}, "">;
+};

package/dist/components/progress-linear/modules/anatomy.js

@@ -0,0 +1,11 @@
+import Root from '../anatomy/root.svelte';
+import RootContext from '../anatomy/root-context.svelte';
+import Label from '../anatomy/label.svelte';
+import Track from '../anatomy/track.svelte';
+import Range from '../anatomy/range.svelte';
+export const ProgressLinear = Object.assign(Root, {
+    Context: RootContext,
+    Label: Label,
+    Track: Track,
+    Range: Range
+});

package/dist/components/progress-linear/modules/root-context.d.ts

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

package/dist/components/progress-linear/modules/root-context.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '../../../internal/props-with-element';
+	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/root-context';
+	import { RatingGroupItemContext } from '../modules/item-context';
+	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 props: RatingGroupItemProps = $props();
+
+	const rootContext = RatingGroupRootContext.consume();
+
+	const [itemProps, componentProps] = $derived(splitItemProps(props));
+	const { element, children, empty = starEmpty, half = starHalf, full = starFull, ...restAttributes } = $derived(componentProps);
+
+	const itemState = $derived(rootContext.api.getItemState(itemProps));
+
+	const attributes = $derived(mergeProps(rootContext.api.getItemProps(itemProps), { class: classesRatingGroup.item }, restAttributes));
+
+	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/item.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PropsWithElement } from '../../../internal/props-with-element';
+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 Item: import("svelte").Component<RatingGroupItemProps, {}, "">;
+type Item = ReturnType<typeof Item>;
+export default Item;

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

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '../../../internal/props-with-element';
+
+	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/root-context';
+
+	const props: RatingGroupLabelProps = $props();
+
+	const rootContext = RatingGroupRootContext.consume();
+
+	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/label.svelte.d.ts

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '../../../internal/props-with-element';
+	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/root-context';
+
+	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/root.svelte.d.ts

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