@ark-ui/svelte 0.4.0 → 5.0.0-0

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

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseRatingGroupReturn } from './use-rating-group.svelte'
+
+  interface RootProviderProps {
+    value: UseRatingGroupReturn
+  }
+
+  export interface RatingGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface RatingGroupRootProviderProps extends Assign<HTMLProps<'div'>, RatingGroupRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { RatingGroupProvider } from './use-rating-group-context'
+
+  const props: RatingGroupRootProviderProps = $props()
+  const { value: ratingGroup, ...localProps } = props
+  const mergedProps = $derived(mergeProps(ratingGroup().getRootProps(), localProps))
+
+  RatingGroupProvider(ratingGroup)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,12 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseRatingGroupReturn } from './use-rating-group.svelte';
+interface RootProviderProps {
+    value: UseRatingGroupReturn;
+}
+export interface RatingGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+}
+export interface RatingGroupRootProviderProps extends Assign<HTMLProps<'div'>, RatingGroupRootProviderBaseProps> {
+}
+declare const RatingGroupRootProvider: import("svelte").Component<RatingGroupRootProviderProps, {}, "">;
+type RatingGroupRootProvider = ReturnType<typeof RatingGroupRootProvider>;
+export default RatingGroupRootProvider;

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

@@ -0,0 +1,37 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseRatingGroupProps } from './use-rating-group.svelte'
+
+  export interface RatingGroupRootBaseProps extends UseRatingGroupProps, PolymorphicProps<'div'> {}
+  export interface RatingGroupRootProps extends Assign<HTMLProps<'div'>, RatingGroupRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { splitRatingGroupProps } from './split-rating-group-props.svelte'
+  import { useRatingGroup } from './use-rating-group.svelte'
+  import { RatingGroupProvider } from './use-rating-group-context'
+
+  let { value = $bindable(), ...props }: RatingGroupRootProps = $props()
+  const providedId = $props.id()
+
+  const [ratingGroupProps, localProps] = $derived(splitRatingGroupProps(props))
+
+  const resolvedProps = $derived<UseRatingGroupProps>({
+    ...ratingGroupProps,
+    id: ratingGroupProps.id ?? providedId,
+    value,
+    onValueChange(details) {
+      ratingGroupProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
+    },
+  })
+
+  const ratingGroup = useRatingGroup(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(ratingGroup().getRootProps(), localProps))
+
+  RatingGroupProvider(ratingGroup)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseRatingGroupProps } from './use-rating-group.svelte';
+export interface RatingGroupRootBaseProps extends UseRatingGroupProps, PolymorphicProps<'div'> {
+}
+export interface RatingGroupRootProps extends Assign<HTMLProps<'div'>, RatingGroupRootBaseProps> {
+}
+declare const RatingGroupRoot: import("svelte").Component<RatingGroupRootProps, {}, "value">;
+type RatingGroupRoot = ReturnType<typeof RatingGroupRoot>;
+export default RatingGroupRoot;

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

@@ -0,0 +1 @@
+export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';

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

@@ -0,0 +1 @@
+export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';

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

@@ -0,0 +1,9 @@
+export type { HoverChangeDetails, ValueChangeDetails } from '@zag-js/rating-group';
+export { default as Context, type RatingGroupContextProps as ContextProps } from './rating-group-context.svelte';
+export { default as Control, type RatingGroupControlProps as ControlProps, type RatingGroupControlBaseProps as ControlBaseProps, } from './rating-group-control.svelte';
+export { default as HiddenInput, type RatingGroupHiddenInputProps as HiddenInputProps, type RatingGroupHiddenInputBaseProps as HiddenInputBaseProps, } from './rating-group-hidden-input.svelte';
+export { default as ItemContext, type RatingGroupItemContextProps as ItemContextProps, } from './rating-group-item-context.svelte';
+export { default as Item, type RatingGroupItemProps as ItemProps, type RatingGroupItemBaseProps as ItemBaseProps, } from './rating-group-item.svelte';
+export { default as Label, type RatingGroupLabelProps as LabelProps, type RatingGroupLabelBaseProps as LabelBaseProps, } from './rating-group-label.svelte';
+export { default as RootProvider, type RatingGroupRootProviderProps as RootProviderProps, type RatingGroupRootProviderBaseProps as RootProviderBaseProps, } from './rating-group-root-provider.svelte';
+export { default as Root, type RatingGroupRootBaseProps as RootBaseProps, type RatingGroupRootProps as RootProps, } from './rating-group-root.svelte';

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

@@ -0,0 +1,8 @@
+export { default as Context } from './rating-group-context.svelte';
+export { default as Control, } from './rating-group-control.svelte';
+export { default as HiddenInput, } from './rating-group-hidden-input.svelte';
+export { default as ItemContext, } from './rating-group-item-context.svelte';
+export { default as Item, } from './rating-group-item.svelte';
+export { default as Label, } from './rating-group-label.svelte';
+export { default as RootProvider, } from './rating-group-root-provider.svelte';
+export { default as Root, } from './rating-group-root.svelte';

package/dist/components/rating-group/split-rating-group-props.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { UseRatingGroupProps } from './use-rating-group.svelte';
+export declare const splitRatingGroupProps: <T extends UseRatingGroupProps>(props: T) => [UseRatingGroupProps, Omit<T, "form" | "name" | "defaultValue" | "value" | "ids" | "disabled" | "id" | "onValueChange" | "translations" | "readOnly" | "required" | "autoFocus" | "count" | "allowHalf" | "onHoverChange">];

package/dist/components/rating-group/split-rating-group-props.svelte.js

@@ -0,0 +1,19 @@
+import { createSplitProps } from '../../utils/create-split-props';
+const splitFn = createSplitProps();
+export const splitRatingGroupProps = (props) => splitFn(props, [
+    'allowHalf',
+    'autoFocus',
+    'count',
+    'defaultValue',
+    'disabled',
+    'form',
+    'id',
+    'ids',
+    'name',
+    'onHoverChange',
+    'onValueChange',
+    'readOnly',
+    'required',
+    'translations',
+    'value',
+]);

package/dist/components/rating-group/use-rating-group-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseRatingGroupReturn } from './use-rating-group.svelte';
+export interface UseRatingGroupContext extends UseRatingGroupReturn {
+}
+export declare const RatingGroupProvider: (opts: UseRatingGroupContext) => void, useRatingGroupContext: (fallback?: UseRatingGroupContext | undefined) => UseRatingGroupContext;

package/dist/components/rating-group/use-rating-group-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [RatingGroupProvider, useRatingGroupContext] = createContext({
+    name: 'RatingGroupContext',
+    hookName: 'useRatingGroupContext',
+    providerName: '<RatingGroupProvider />',
+});

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

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types';
+import type { ItemState } from '@zag-js/rating-group';
+export interface UseRatingGroupItemContext extends Accessor<ItemState> {
+}
+export declare const RatingGroupItemProvider: (opts: UseRatingGroupItemContext) => void, useRatingGroupItemContext: (fallback?: UseRatingGroupItemContext | undefined) => UseRatingGroupItemContext;

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

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
+    name: 'RatingGroupItemContext',
+    hookName: 'useRatingGroupItemContext',
+    providerName: '<RatingGroupItemProvider />',
+});

package/dist/components/rating-group/use-rating-group.svelte.d.ts

@@ -0,0 +1,9 @@
+import * as rating from '@zag-js/rating-group';
+import { type PropTypes } from '@zag-js/svelte';
+import { type MaybeFunction } from '@zag-js/utils';
+import type { Accessor, Optional } from '../../types';
+export interface UseRatingGroupProps extends Optional<Omit<rating.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseRatingGroupReturn extends Accessor<rating.Api<PropTypes>> {
+}
+export declare const useRatingGroup: (props: MaybeFunction<UseRatingGroupProps>) => UseRatingGroupReturn;

package/dist/components/rating-group/use-rating-group.svelte.js

@@ -0,0 +1,29 @@
+import * as rating from '@zag-js/rating-group';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+import { useFieldContext } from '../field';
+export const useRatingGroup = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const field = useFieldContext();
+    const resolvedProps = $derived.by(() => {
+        const localProps = runIfFn(props);
+        return {
+            ids: {
+                label: field?.()?.ids.label,
+                hiddenInput: field?.()?.ids.control,
+                ...localProps.ids,
+            },
+            dir: locale().dir,
+            disabled: field?.()?.disabled ?? localProps.disabled,
+            readOnly: field?.()?.readOnly ?? localProps.readOnly,
+            required: field?.()?.required ?? localProps.required,
+            getRootNode: env().getRootNode,
+            ...localProps,
+        };
+    });
+    const service = useMachine(rating.machine, () => resolvedProps);
+    const api = $derived(rating.connect(service, normalizeProps));
+    return () => api;
+};

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

@@ -0,0 +1,16 @@
+export type { ValueChangeDetails as SegmentGroupValueChangeDetails } from '@zag-js/radio-group';
+export { default as SegmentGroupContext, type SegmentGroupContextProps } from './segment-group-context.svelte';
+export { default as SegmentGroupIndicator, type SegmentGroupIndicatorBaseProps, type SegmentGroupIndicatorProps, } from './segment-group-indicator.svelte';
+export { default as SegmentGroupItemContext, type SegmentGroupItemContextProps, } from './segment-group-item-context.svelte';
+export { default as SegmentGroupItemControl, type SegmentGroupItemControlBaseProps, type SegmentGroupItemControlProps, } from './segment-group-item-control.svelte';
+export { default as SegmentGroupItemHiddenInput, type SegmentGroupItemHiddenInputBaseProps, type SegmentGroupItemHiddenInputProps, } from './segment-group-item-hidden-input.svelte';
+export { default as SegmentGroupItemText, type SegmentGroupItemTextBaseProps, type SegmentGroupItemTextProps, } from './segment-group-item-text.svelte';
+export { default as SegmentGroupItem, type SegmentGroupItemBaseProps, type SegmentGroupItemProps, } from './segment-group-item.svelte';
+export { default as SegmentGroupLabel, type SegmentGroupLabelBaseProps, type SegmentGroupLabelProps, } from './segment-group-label.svelte';
+export { default as SegmentGroupRootProvider, type SegmentGroupRootProviderBaseProps, type SegmentGroupRootProviderProps, } from './segment-group-root-provider.svelte';
+export { default as SegmentGroupRoot, type SegmentGroupRootBaseProps, type SegmentGroupRootProps, } from './segment-group-root.svelte';
+export { segmentGroupAnatomy } from './segment-group.anatomy';
+export { useSegmentGroup, type UseSegmentGroupProps, type UseSegmentGroupReturn } from './use-segment-group.svelte';
+export { useSegmentGroupContext, type UseSegmentGroupContext } from './use-segment-group-context';
+export { useSegmentGroupItemContext, type UseSegmentGroupItemContext } from './use-segment-group-item-context';
+export * as SegmentGroup from './segment-group';

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

@@ -0,0 +1,15 @@
+export { default as SegmentGroupContext } from './segment-group-context.svelte';
+export { default as SegmentGroupIndicator, } from './segment-group-indicator.svelte';
+export { default as SegmentGroupItemContext, } from './segment-group-item-context.svelte';
+export { default as SegmentGroupItemControl, } from './segment-group-item-control.svelte';
+export { default as SegmentGroupItemHiddenInput, } from './segment-group-item-hidden-input.svelte';
+export { default as SegmentGroupItemText, } from './segment-group-item-text.svelte';
+export { default as SegmentGroupItem, } from './segment-group-item.svelte';
+export { default as SegmentGroupLabel, } from './segment-group-label.svelte';
+export { default as SegmentGroupRootProvider, } from './segment-group-root-provider.svelte';
+export { default as SegmentGroupRoot, } from './segment-group-root.svelte';
+export { segmentGroupAnatomy } from './segment-group.anatomy';
+export { useSegmentGroup } from './use-segment-group.svelte';
+export { useSegmentGroupContext } from './use-segment-group-context';
+export { useSegmentGroupItemContext } from './use-segment-group-item-context';
+export * as SegmentGroup from './segment-group';

package/dist/components/segment-group/segment-group-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseSegmentGroupContext } from './use-segment-group-context'
+
+  export interface SegmentGroupContextProps {
+    render: Snippet<[UseSegmentGroupContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useSegmentGroupContext } from './use-segment-group-context'
+
+  let { render }: SegmentGroupContextProps = $props()
+
+  const context = useSegmentGroupContext()
+</script>
+
+{@render render(context)}

package/dist/components/segment-group/segment-group-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseSegmentGroupContext } from './use-segment-group-context';
+export interface SegmentGroupContextProps {
+    render: Snippet<[UseSegmentGroupContext]>;
+}
+declare const SegmentGroupContext: import("svelte").Component<SegmentGroupContextProps, {}, "">;
+type SegmentGroupContext = ReturnType<typeof SegmentGroupContext>;
+export default SegmentGroupContext;

package/dist/components/segment-group/segment-group-indicator.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface SegmentGroupIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface SegmentGroupIndicatorProps extends Assign<HTMLProps<'div'>, SegmentGroupIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { parts } from './segment-group.anatomy'
+  import { useSegmentGroupContext } from './use-segment-group-context'
+
+  const props: SegmentGroupIndicatorProps = $props()
+
+  const segmentGroup = useSegmentGroupContext()
+  const mergedProps = $derived(mergeProps(segmentGroup().getIndicatorProps(), parts.indicator.attrs, props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/segment-group/segment-group-indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface SegmentGroupIndicatorBaseProps extends PolymorphicProps<'div'> {
+}
+export interface SegmentGroupIndicatorProps extends Assign<HTMLProps<'div'>, SegmentGroupIndicatorBaseProps> {
+}
+declare const SegmentGroupIndicator: import("svelte").Component<SegmentGroupIndicatorProps, {}, "">;
+type SegmentGroupIndicator = ReturnType<typeof SegmentGroupIndicator>;
+export default SegmentGroupIndicator;

package/dist/components/segment-group/segment-group-item-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseSegmentGroupItemContext } from './use-segment-group-item-context'
+
+  export interface SegmentGroupItemContextProps {
+    render: Snippet<[UseSegmentGroupItemContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useSegmentGroupItemContext } from './use-segment-group-item-context'
+
+  let { render }: SegmentGroupItemContextProps = $props()
+
+  const context = useSegmentGroupItemContext()
+</script>
+
+{@render render(context)}

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseSegmentGroupItemContext } from './use-segment-group-item-context';
+export interface SegmentGroupItemContextProps {
+    render: Snippet<[UseSegmentGroupItemContext]>;
+}
+declare const SegmentGroupItemContext: import("svelte").Component<SegmentGroupItemContextProps, {}, "">;
+type SegmentGroupItemContext = ReturnType<typeof SegmentGroupItemContext>;
+export default SegmentGroupItemContext;

package/dist/components/segment-group/segment-group-item-control.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface SegmentGroupItemControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface SegmentGroupItemControlProps extends Assign<HTMLProps<'div'>, SegmentGroupItemControlBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { parts } from './segment-group.anatomy'
+  import { useSegmentGroupContext } from './use-segment-group-context'
+  import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context'
+
+  const props: SegmentGroupItemControlProps = $props()
+
+  const segmentGroup = useSegmentGroupContext()
+  const itemProps = useSegmentGroupItemPropsContext()
+
+  const mergedProps = $derived(
+    mergeProps(segmentGroup().getItemControlProps(itemProps()), parts.itemControl.attrs, props),
+  )
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/segment-group/segment-group-item-control.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface SegmentGroupItemControlBaseProps extends PolymorphicProps<'div'> {
+}
+export interface SegmentGroupItemControlProps extends Assign<HTMLProps<'div'>, SegmentGroupItemControlBaseProps> {
+}
+declare const SegmentGroupItemControl: import("svelte").Component<SegmentGroupItemControlProps, {}, "">;
+type SegmentGroupItemControl = ReturnType<typeof SegmentGroupItemControl>;
+export default SegmentGroupItemControl;

package/dist/components/segment-group/segment-group-item-hidden-input.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface SegmentGroupItemHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface SegmentGroupItemHiddenInputProps
+    extends Assign<HTMLProps<'input'>, SegmentGroupItemHiddenInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useSegmentGroupContext } from './use-segment-group-context'
+  import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context'
+
+  const props: SegmentGroupItemHiddenInputProps = $props()
+  const segmentGroup = useSegmentGroupContext()
+  const itemProps = useSegmentGroupItemPropsContext()
+
+  const mergedProps = $derived(mergeProps(segmentGroup().getItemHiddenInputProps(itemProps()), props))
+</script>
+
+<Ark as="input" {...mergedProps} />

package/dist/components/segment-group/segment-group-item-hidden-input.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface SegmentGroupItemHiddenInputBaseProps extends PolymorphicProps<'input'> {
+}
+export interface SegmentGroupItemHiddenInputProps extends Assign<HTMLProps<'input'>, SegmentGroupItemHiddenInputBaseProps> {
+}
+declare const SegmentGroupItemHiddenInput: import("svelte").Component<SegmentGroupItemHiddenInputProps, {}, "">;
+type SegmentGroupItemHiddenInput = ReturnType<typeof SegmentGroupItemHiddenInput>;
+export default SegmentGroupItemHiddenInput;

package/dist/components/segment-group/segment-group-item-text.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface SegmentGroupItemTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface SegmentGroupItemTextProps extends Assign<HTMLProps<'span'>, SegmentGroupItemTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { parts } from './segment-group.anatomy'
+  import { useSegmentGroupContext } from './use-segment-group-context'
+  import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context'
+
+  const props: SegmentGroupItemTextProps = $props()
+  const segmentGroup = useSegmentGroupContext()
+  const itemProps = useSegmentGroupItemPropsContext()
+
+  const mergedProps = $derived(mergeProps(segmentGroup().getItemTextProps(itemProps()), parts.itemText.attrs, props))
+</script>
+
+<Ark as="span" {...mergedProps} />

package/dist/components/segment-group/segment-group-item-text.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface SegmentGroupItemTextBaseProps extends PolymorphicProps<'span'> {
+}
+export interface SegmentGroupItemTextProps extends Assign<HTMLProps<'span'>, SegmentGroupItemTextBaseProps> {
+}
+declare const SegmentGroupItemText: import("svelte").Component<SegmentGroupItemTextProps, {}, "">;
+type SegmentGroupItemText = ReturnType<typeof SegmentGroupItemText>;
+export default SegmentGroupItemText;

package/dist/components/segment-group/segment-group-item.svelte

@@ -0,0 +1,31 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ItemProps } from '@zag-js/radio-group'
+
+  export interface SegmentGroupItemBaseProps extends ItemProps, PolymorphicProps<'label'> {}
+  export interface SegmentGroupItemProps extends Assign<HTMLProps<'label'>, SegmentGroupItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { parts } from './segment-group.anatomy'
+  import { useSegmentGroupContext } from './use-segment-group-context'
+  import { SegmentGroupItemProvider } from './use-segment-group-item-context'
+  import { SegmentGroupItemPropsProvider } from './use-segment-group-item-props-context'
+  import { createSplitProps } from '../../utils/create-split-props'
+
+  const props: SegmentGroupItemProps = $props()
+
+  const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['value', 'disabled', 'invalid']))
+
+  const segmentGroup = useSegmentGroupContext()
+
+  const itemState = $derived(segmentGroup().getItemState(itemProps))
+  const mergedProps = $derived(mergeProps(segmentGroup().getItemProps(itemProps), parts.item.attrs, localProps))
+
+  SegmentGroupItemProvider(() => itemState)
+  SegmentGroupItemPropsProvider(() => itemProps)
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/segment-group/segment-group-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ItemProps } from '@zag-js/radio-group';
+export interface SegmentGroupItemBaseProps extends ItemProps, PolymorphicProps<'label'> {
+}
+export interface SegmentGroupItemProps extends Assign<HTMLProps<'label'>, SegmentGroupItemBaseProps> {
+}
+declare const SegmentGroupItem: import("svelte").Component<SegmentGroupItemProps, {}, "">;
+type SegmentGroupItem = ReturnType<typeof SegmentGroupItem>;
+export default SegmentGroupItem;

package/dist/components/segment-group/segment-group-label.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface SegmentGroupLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface SegmentGroupLabelProps extends Assign<HTMLProps<'label'>, SegmentGroupLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { parts } from './segment-group.anatomy'
+  import { useSegmentGroupContext } from './use-segment-group-context'
+
+  const props: SegmentGroupLabelProps = $props()
+
+  const segmentGroup = useSegmentGroupContext()
+  const mergedProps = $derived(mergeProps(segmentGroup().getLabelProps(), parts.label.attrs, props))
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/segment-group/segment-group-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface SegmentGroupLabelBaseProps extends PolymorphicProps<'label'> {
+}
+export interface SegmentGroupLabelProps extends Assign<HTMLProps<'label'>, SegmentGroupLabelBaseProps> {
+}
+declare const SegmentGroupLabel: import("svelte").Component<SegmentGroupLabelProps, {}, "">;
+type SegmentGroupLabel = ReturnType<typeof SegmentGroupLabel>;
+export default SegmentGroupLabel;

package/dist/components/segment-group/segment-group-root-provider.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseSegmentGroupReturn } from './use-segment-group.svelte'
+
+  interface RootProviderProps {
+    value: UseSegmentGroupReturn
+  }
+
+  export interface SegmentGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface SegmentGroupRootProviderProps extends Assign<HTMLProps<'div'>, SegmentGroupRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { parts } from './segment-group.anatomy'
+  import { SegmentGroupProvider } from './use-segment-group-context'
+
+  let { value, ...props }: SegmentGroupRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(value().getRootProps(), parts.root.attrs, props))
+
+  SegmentGroupProvider(value)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/segment-group/segment-group-root-provider.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseSegmentGroupReturn } from './use-segment-group.svelte';
+interface RootProviderProps {
+    value: UseSegmentGroupReturn;
+}
+export interface SegmentGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+}
+export interface SegmentGroupRootProviderProps extends Assign<HTMLProps<'div'>, SegmentGroupRootProviderBaseProps> {
+}
+declare const SegmentGroupRootProvider: import("svelte").Component<SegmentGroupRootProviderProps, {}, "">;
+type SegmentGroupRootProvider = ReturnType<typeof SegmentGroupRootProvider>;
+export default SegmentGroupRootProvider;

package/dist/components/segment-group/segment-group-root.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ValueChangeDetails } from '@zag-js/radio-group'
+  import type { UseSegmentGroupProps } from './use-segment-group.svelte'
+
+  export interface SegmentGroupRootEmits {
+    valueChange: ValueChangeDetails
+  }
+
+  export interface SegmentGroupRootBaseProps extends UseSegmentGroupProps, PolymorphicProps<'div'> {}
+  export interface SegmentGroupRootProps extends Assign<HTMLProps<'div'>, SegmentGroupRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { parts } from './segment-group.anatomy'
+  import { splitSegmentGroupProps } from './split-segment-group-props.svelte'
+  import { useSegmentGroup } from './use-segment-group.svelte'
+  import { SegmentGroupProvider } from './use-segment-group-context'
+
+  let { value = $bindable(), ...props }: SegmentGroupRootProps = $props()
+  const providedId = $props.id()
+
+  const [segmentGroupProps, localProps] = $derived(splitSegmentGroupProps(props))
+
+  const resolvedProps = $derived<UseSegmentGroupProps>({
+    ...segmentGroupProps,
+    id: segmentGroupProps.id ?? providedId,
+    value,
+    onValueChange(details) {
+      segmentGroupProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
+    },
+  })
+
+  const segmentGroup = useSegmentGroup(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(segmentGroup().getRootProps(), parts.root.attrs, localProps))
+
+  SegmentGroupProvider(segmentGroup)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/segment-group/segment-group-root.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ValueChangeDetails } from '@zag-js/radio-group';
+import type { UseSegmentGroupProps } from './use-segment-group.svelte';
+export interface SegmentGroupRootEmits {
+    valueChange: ValueChangeDetails;
+}
+export interface SegmentGroupRootBaseProps extends UseSegmentGroupProps, PolymorphicProps<'div'> {
+}
+export interface SegmentGroupRootProps extends Assign<HTMLProps<'div'>, SegmentGroupRootBaseProps> {
+}
+declare const SegmentGroupRoot: import("svelte").Component<SegmentGroupRootProps, {}, "value">;
+type SegmentGroupRoot = ReturnType<typeof SegmentGroupRoot>;
+export default SegmentGroupRoot;

package/dist/components/segment-group/segment-group.anatomy.d.ts

@@ -0,0 +1,2 @@
+export declare const segmentGroupAnatomy: import("@zag-js/anatomy").Anatomy<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl">;
+export declare const parts: Record<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl", import("@zag-js/anatomy").AnatomyPart>;

package/dist/components/segment-group/segment-group.anatomy.js

@@ -0,0 +1,3 @@
+import { anatomy } from '@zag-js/radio-group';
+export const segmentGroupAnatomy = anatomy.rename('segment-group');
+export const parts = segmentGroupAnatomy.build();