@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/popover/popover-root.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { UsePresenceProps } from '../presence';
+import type { UsePopoverProps } from './use-popover.svelte';
+export interface PopoverRootBaseProps extends UsePopoverProps, UsePresenceProps {
+}
+export interface PopoverRootProps extends PopoverRootBaseProps {
+    children?: Snippet;
+}
+declare const PopoverRoot: import("svelte").Component<PopoverRootProps, {}, "open">;
+type PopoverRoot = ReturnType<typeof PopoverRoot>;
+export default PopoverRoot;

package/dist/components/popover/popover-title.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PopoverTitleBaseProps extends PolymorphicProps<'h2'> {}
+  export interface PopoverTitleProps extends Assign<HTMLProps<'h2'>, PopoverTitleBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePopoverContext } from './use-popover-context'
+
+  const props: PopoverTitleProps = $props()
+
+  const popover = usePopoverContext()
+  const mergedProps = $derived(mergeProps(popover().getTitleProps(), props))
+</script>
+
+<Ark as="h2" {...mergedProps} />

package/dist/components/popover/popover-title.svelte.d.ts

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

package/dist/components/popover/popover-trigger.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PopoverTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface PopoverTriggerProps extends Assign<HTMLProps<'button'>, PopoverTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { usePopoverContext } from './use-popover-context'
+
+  const props: PopoverTriggerProps = $props()
+
+  const popover = usePopoverContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(
+    mergeProps(
+      {
+        ...popover().getTriggerProps(),
+        'aria-controls': presence().unmounted ? undefined : popover().getTriggerProps()['aria-controls'],
+      },
+      props,
+    ),
+  )
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/popover/popover-trigger.svelte.d.ts

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

package/dist/components/popover/popover.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as popoverAnatomy } from '@zag-js/popover';

package/dist/components/popover/popover.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as popoverAnatomy } from '@zag-js/popover';

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,14 @@
+export type { OpenChangeDetails } from '@zag-js/popover';
+export { default as Anchor, type PopoverAnchorBaseProps as AnchorBaseProps, type PopoverAnchorProps as AnchorProps, } from './popover-anchor.svelte';
+export { default as Arrow, type PopoverArrowBaseProps as ArrowBaseProps, type PopoverArrowProps as ArrowProps, } from './popover-arrow.svelte';
+export { default as ArrowTip, type PopoverArrowTipBaseProps as ArrowTipBaseProps, type PopoverArrowTipProps as ArrowTipProps, } from './popover-arrow-tip.svelte';
+export { default as CloseTrigger, type PopoverCloseTriggerBaseProps as CloseTriggerBaseProps, type PopoverCloseTriggerProps as CloseTriggerProps, } from './popover-close-trigger.svelte';
+export { default as Content, type PopoverContentBaseProps as ContentBaseProps, type PopoverContentProps as ContentProps, } from './popover-content.svelte';
+export { default as Context, type PopoverContextProps as ContextProps } from './popover-context.svelte';
+export { default as Description, type PopoverDescriptionBaseProps as DescriptionBaseProps, type PopoverDescriptionProps as DescriptionProps, } from './popover-description.svelte';
+export { default as Indicator, type PopoverIndicatorBaseProps as IndicatorBaseProps, type PopoverIndicatorProps as IndicatorProps, } from './popover-indicator.svelte';
+export { default as Positioner, type PopoverPositionerBaseProps as PositionerBaseProps, type PopoverPositionerProps as PositionerProps, } from './popover-positioner.svelte';
+export { default as Root, type PopoverRootBaseProps as RootBaseProps, type PopoverRootProps as RootProps, } from './popover-root.svelte';
+export { default as RootProvider, type PopoverRootProviderBaseProps as RootProviderBaseProps, type PopoverRootProviderProps as RootProviderProps, } from './popover-root-provider.svelte';
+export { default as Title, type PopoverTitleBaseProps as TitleBaseProps, type PopoverTitleProps as TitleProps, } from './popover-title.svelte';
+export { default as Trigger, type PopoverTriggerBaseProps as TriggerBaseProps, type PopoverTriggerProps as TriggerProps, } from './popover-trigger.svelte';

package/dist/components/popover/popover.js

@@ -0,0 +1,13 @@
+export { default as Anchor, } from './popover-anchor.svelte';
+export { default as Arrow, } from './popover-arrow.svelte';
+export { default as ArrowTip, } from './popover-arrow-tip.svelte';
+export { default as CloseTrigger, } from './popover-close-trigger.svelte';
+export { default as Content, } from './popover-content.svelte';
+export { default as Context } from './popover-context.svelte';
+export { default as Description, } from './popover-description.svelte';
+export { default as Indicator, } from './popover-indicator.svelte';
+export { default as Positioner, } from './popover-positioner.svelte';
+export { default as Root, } from './popover-root.svelte';
+export { default as RootProvider, } from './popover-root-provider.svelte';
+export { default as Title, } from './popover-title.svelte';
+export { default as Trigger, } from './popover-trigger.svelte';

package/dist/components/popover/use-popover-context.d.ts

@@ -0,0 +1,4 @@
+import type { UsePopoverReturn } from './use-popover.svelte';
+export interface UsePopoverContext extends UsePopoverReturn {
+}
+export declare const PopoverProvider: (opts: UsePopoverContext) => void, usePopoverContext: (fallback?: UsePopoverContext | undefined) => UsePopoverContext;

package/dist/components/popover/use-popover-context.js

@@ -0,0 +1,4 @@
+import { createContext } from '../../utils/create-context';
+export const [PopoverProvider, usePopoverContext] = createContext({
+    name: 'PopoverContext',
+});

package/dist/components/popover/use-popover.svelte.d.ts

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

package/dist/components/popover/use-popover.svelte.js

@@ -0,0 +1,20 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as popover from '@zag-js/popover';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+export const usePopover = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props) || {};
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(popover.machine, () => machineProps);
+    const api = $derived(popover.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/portal/portal.svelte

@@ -13,7 +13,7 @@
   import { getAllContexts, mount, unmount } from 'svelte'
   import PortalConsumer from './portal-consumer.svelte'
 
-  const { container = document.body, children }: PortalProps = $props()
+  const { container = globalThis?.document?.body, children }: PortalProps = $props()
 
   const context = getAllContexts()
 

package/dist/components/presence/presence.svelte

@@ -2,32 +2,30 @@
   import type { HTMLProps, PolymorphicProps } from '../../types'
   import { type UsePresenceProps, usePresence } from './use-presence.svelte'
 
-  export interface PresenceBaseProps extends UsePresenceProps, PolymorphicProps<'div'> {}
+  export interface PresenceBaseProps extends UsePresenceProps, PolymorphicProps<'div'> {
+    ref?: Element | null
+  }
   export interface PresenceProps extends HTMLProps<'div'>, PresenceBaseProps {}
 </script>
 
 <script lang="ts">
-  import { mergeProps, reflect } from '@zag-js/svelte'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
   import { splitPresenceProps } from './split-presence-props.svelte'
 
-  let props: PresenceProps = $props()
-  let ref: HTMLDivElement | null = $state(null)
-  let called = $state(false)
+  let { ref = $bindable<Element | null>(null), ...props }: PresenceProps = $props()
 
   const [presenceProps, localProps] = $derived(splitPresenceProps(props))
-  const presence = usePresence(reflect(() => presenceProps))
+  const presence = usePresence(() => presenceProps)
+
   const mergedProps = $derived(mergeProps(presence().getPresenceProps(), localProps))
 
-  $effect(() => {
-    if (!called && ref) {
-      called = true
-      presence().setNode(ref)
-    }
-  })
+  function setNode(node: Element | null) {
+    ref = node
+    presence().setNode(node)
+  }
 </script>
 
 {#if !presence().unmounted}
-  <div data-scope="presence" data-part="root" bind:this={ref} {...mergedProps}>
-    {@render localProps.children?.()}
-  </div>
+  <Ark as="div" data-scope="presence" data-part="root" {@attach setNode} {...mergedProps} />
 {/if}

package/dist/components/presence/presence.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { HTMLProps, PolymorphicProps } from '../../types';
 import { type UsePresenceProps } from './use-presence.svelte';
 export interface PresenceBaseProps extends UsePresenceProps, PolymorphicProps<'div'> {
+    ref?: Element | null;
 }
 export interface PresenceProps extends HTMLProps<'div'>, PresenceBaseProps {
 }
-declare const Presence: import("svelte").Component<PresenceProps, {}, "">;
+declare const Presence: import("svelte").Component<PresenceProps, {}, "ref">;
 type Presence = ReturnType<typeof Presence>;
 export default Presence;

package/dist/components/presence/split-presence-props.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { UsePresenceProps } from './use-presence.svelte';
-export declare const splitPresenceProps: <T extends UsePresenceProps>(props: T) => [UsePresenceProps, Omit<T, "lazyMount" | "unmountOnExit" | "present" | "onExitComplete" | "immediate" | "skipAnimationOnMount">];
+export declare const splitPresenceProps: <T extends UsePresenceProps>(props: T) => [UsePresenceProps, Omit<T, "lazyMount" | "unmountOnExit" | "onExitComplete" | "present" | "immediate" | "skipAnimationOnMount">];

package/dist/components/presence/use-presence-context.js

@@ -1,4 +1,4 @@
 import { createContext } from '../../utils/create-context';
 export const [PresenceProvider, usePresenceContext] = createContext({
-    key: 'PresenceContext',
+    name: 'PresenceContext',
 });

package/dist/components/presence/use-presence.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Optional } from '../../types';
 import { type RenderStrategyProps } from '../../utils/render-strategy';
 import * as presence from '@zag-js/presence';
+import { type MaybeFunction } from '@zag-js/utils';
 export interface UsePresenceProps extends Optional<presence.Props, 'present'>, RenderStrategyProps {
     /**
      * Whether to allow the initial presence animation.
@@ -10,12 +11,12 @@ export interface UsePresenceProps extends Optional<presence.Props, 'present'>, R
 }
 export interface UsePresenceReturn extends ReturnType<typeof usePresence> {
 }
-export declare const usePresence: (props: UsePresenceProps) => () => {
+export declare const usePresence: (props: MaybeFunction<UsePresenceProps>) => () => {
     getPresenceProps: () => {
         'data-state': string | undefined;
         hidden: boolean;
     };
     present: boolean;
-    setNode: (node: HTMLElement | null) => void;
+    setNode: (node: Element | null) => void;
     unmounted: boolean | undefined;
 };

package/dist/components/presence/use-presence.svelte.js

@@ -1,8 +1,10 @@
 import { splitRenderStrategyProps } from '../../utils/render-strategy';
 import * as presence from '@zag-js/presence';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
 export const usePresence = (props) => {
-    const [renderStrategyProps, machineProps] = $derived(splitRenderStrategyProps(props));
+    const resolvedProps = $derived(runIfFn(props));
+    const [renderStrategyProps, machineProps] = $derived(splitRenderStrategyProps(resolvedProps));
     const service = useMachine(presence.machine, () => machineProps);
     const api = $derived(presence.connect(service, normalizeProps));
     let wasEverPresent = $state(false);
@@ -11,16 +13,23 @@ export const usePresence = (props) => {
             wasEverPresent = true;
         }
     });
+    const setNode = (node) => {
+        if (!node)
+            return;
+        if (service.refs.get('node'))
+            return;
+        service.send({ type: 'NODE.SET', node });
+    };
     const unmounted = $derived((!api.present && !wasEverPresent && renderStrategyProps.lazyMount) ||
         (renderStrategyProps.unmountOnExit && !api.present && wasEverPresent));
-    const result = $derived(() => ({
+    const result = $derived({
         getPresenceProps: () => ({
-            'data-state': api.skip && props.skipAnimationOnMount ? undefined : props.present ? 'open' : 'closed',
+            'data-state': api.skip && resolvedProps.skipAnimationOnMount ? undefined : resolvedProps.present ? 'open' : 'closed',
             hidden: !api.present,
         }),
         present: api.present,
-        setNode: api.setNode,
+        setNode,
         unmounted,
-    }));
-    return result;
+    });
+    return () => result;
 };

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

@@ -1,3 +1,4 @@
+export type { ValueChangeDetails as ProgressValueChangeDetails, ValueTranslationDetails as ProgressValueTranslationDetails, } from '@zag-js/progress';
 export { default as ProgressCircleRange, type ProgressCircleRangeBaseProps, type ProgressCircleRangeProps, } from './progress-circle-range.svelte';
 export { default as ProgressCircleTrack, type ProgressCircleTrackBaseProps, type ProgressCircleTrackProps, } from './progress-circle-track.svelte';
 export { default as ProgressCircle, type ProgressCircleBaseProps, type ProgressCircleProps, } from './progress-circle.svelte';

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

@@ -7,17 +7,17 @@
 </script>
 
 <script lang="ts">
-  import { mergeProps, reflect } from '@zag-js/svelte'
+  import { mergeProps } from '@zag-js/svelte'
   import { createSplitProps } from '../../utils/create-split-props'
   import { Ark } from '../factory'
   import { ProgressProvider } from './use-progress-context'
   import { useProgress } from './use-progress.svelte'
 
-  const _props: ProgressRootProps = $props()
+  let { value = $bindable(), ...props }: ProgressRootProps = $props()
   const providedId = $props.id()
 
   const [useProgressProps, localProps] = $derived(
-    createSplitProps<Optional<UseProgressProps, 'id'>>()(_props, [
+    createSplitProps<Optional<UseProgressProps, 'id'>>()(props, [
       'defaultValue',
       'formatOptions',
       'id',
@@ -31,12 +31,17 @@
       'value',
     ]),
   )
-  const resolvedProps = $derived({
+  const resolvedProps = $derived<UseProgressProps>({
     ...useProgressProps,
-    id: providedId,
+    id: useProgressProps.id ?? providedId,
+    value,
+    onValueChange(details) {
+      value = details.value
+      useProgressProps.onValueChange?.(details)
+    },
   })
 
-  const progress = useProgress(reflect(() => resolvedProps))
+  const progress = useProgress(() => resolvedProps)
   const mergedProps = $derived(mergeProps(progress().getRootProps(), localProps))
 
   ProgressProvider(progress)

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

@@ -4,6 +4,6 @@ export interface ProgressRootBaseProps extends Optional<UseProgressProps, 'id'>,
 }
 export interface ProgressRootProps extends Assign<HTMLProps<'div'>, ProgressRootBaseProps> {
 }
-declare const ProgressRoot: import("svelte").Component<ProgressRootProps, {}, "">;
+declare const ProgressRoot: import("svelte").Component<ProgressRootProps, {}, "value">;
 type ProgressRoot = ReturnType<typeof ProgressRoot>;
 export default ProgressRoot;

package/dist/components/progress/use-progress-context.js

@@ -1,4 +1,4 @@
 import { createContext } from '../../utils/create-context';
 export const [ProgressProvider, useProgressContext] = createContext({
-    key: 'ProgressContext',
+    name: 'ProgressContext',
 });

package/dist/components/progress/use-progress.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Accessor } from '../../types';
 import * as progress from '@zag-js/progress';
 import { type PropTypes } from '@zag-js/svelte';
+import { type MaybeFunction } from '@zag-js/utils';
 export interface UseProgressProps extends Omit<progress.Props, 'dir' | 'getRootNode'> {
 }
 export interface UseProgressReturn extends Accessor<progress.Api<PropTypes>> {
 }
-export declare const useProgress: (props: UseProgressProps) => () => progress.Api<import("@zag-js/types").PropTypes>;
+export declare const useProgress: (props: MaybeFunction<UseProgressProps>) => () => progress.Api<import("@zag-js/types").PropTypes>;

package/dist/components/progress/use-progress.svelte.js

@@ -2,15 +2,19 @@ import { useEnvironmentContext } from '../../providers/environment';
 import { useLocaleContext } from '../../providers/locale';
 import * as progress from '@zag-js/progress';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
 export const useProgress = (props) => {
     const env = useEnvironmentContext();
     const locale = useLocaleContext();
-    const machineProps = $derived({
-        dir: locale.dir,
-        getRootNode: env.getRootNode,
-        ...props,
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
     });
     const service = useMachine(progress.machine, () => machineProps);
-    const api = $derived(() => progress.connect(service, normalizeProps));
-    return api;
+    const api = $derived(progress.connect(service, normalizeProps));
+    return () => api;
 };

package/dist/components/qr-code/qr-code-root.svelte

@@ -13,11 +13,11 @@
   import { QrCodeProvider } from './use-qr-code-context'
   import { useQrCode } from './use-qr-code.svelte'
 
-  const _props: QrCodeRootProps = $props()
+  let { value = $bindable(), ...props }: QrCodeRootProps = $props()
   const providedId = $props.id()
 
   const [useQrCodeProps, localProps] = $derived(
-    createSplitProps<Optional<UseQrCodeProps, 'id'>>()(_props, [
+    createSplitProps<Optional<UseQrCodeProps, 'id'>>()(props, [
       'defaultValue',
       'encoding',
       'id',
@@ -28,12 +28,17 @@
     ]),
   )
 
-  const resolvedProps = $derived({
+  const resolvedProps = $derived<UseQrCodeProps>({
     ...useQrCodeProps,
     id: providedId,
+    value,
+    onValueChange(details) {
+      value = details.value
+      useQrCodeProps.onValueChange?.(details)
+    },
   })
 
-  const qrCode = useQrCode(reflect(() => resolvedProps))
+  const qrCode = useQrCode(() => resolvedProps)
   const mergedProps = $derived(mergeProps(qrCode().getRootProps(), localProps))
 
   QrCodeProvider(qrCode)

package/dist/components/qr-code/qr-code-root.svelte.d.ts

@@ -4,6 +4,6 @@ export interface QrCodeRootBaseProps extends Optional<UseQrCodeProps, 'id'>, Pol
 }
 export interface QrCodeRootProps extends Assign<HTMLProps<'div'>, QrCodeRootBaseProps> {
 }
-declare const QrCodeRoot: import("svelte").Component<QrCodeRootProps, {}, "">;
+declare const QrCodeRoot: import("svelte").Component<QrCodeRootProps, {}, "value">;
 type QrCodeRoot = ReturnType<typeof QrCodeRoot>;
 export default QrCodeRoot;

package/dist/components/qr-code/use-qr-code-context.js

@@ -1,4 +1,4 @@
 import { createContext } from '../../utils/create-context';
 export const [QrCodeProvider, useQrCodeContext] = createContext({
-    key: 'QrCodeContext',
+    name: 'QrCodeContext',
 });

package/dist/components/qr-code/use-qr-code.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Accessor } from '../../types';
 import * as qrcode from '@zag-js/qr-code';
 import { type PropTypes } from '@zag-js/svelte';
+import { type MaybeFunction } from '@zag-js/utils';
 export interface UseQrCodeProps extends Omit<qrcode.Props, 'dir' | 'getRootNode'> {
 }
 export interface UseQrCodeReturn extends Accessor<qrcode.Api<PropTypes>> {
 }
-export declare const useQrCode: (props: UseQrCodeProps) => () => qrcode.Api<import("@zag-js/types").PropTypes>;
+export declare const useQrCode: (props: MaybeFunction<UseQrCodeProps>) => () => qrcode.Api<import("@zag-js/types").PropTypes>;

package/dist/components/qr-code/use-qr-code.svelte.js

@@ -2,15 +2,19 @@ import { useEnvironmentContext } from '../../providers/environment';
 import { useLocaleContext } from '../../providers/locale';
 import * as qrcode from '@zag-js/qr-code';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
 export const useQrCode = (props) => {
     const env = useEnvironmentContext();
     const locale = useLocaleContext();
-    const machineProps = $derived({
-        dir: locale.dir,
-        getRootNode: env.getRootNode,
-        ...props,
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
     });
     const service = useMachine(qrcode.machine, () => machineProps);
-    const api = $derived(() => qrcode.connect(service, normalizeProps));
-    return api;
+    const api = $derived(qrcode.connect(service, normalizeProps));
+    return () => api;
 };

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

@@ -0,0 +1,16 @@
+export type { ValueChangeDetails as RadioGroupValueChangeDetails } from '@zag-js/radio-group';
+export { default as RadioGroupContext, type RadioGroupContextProps } from './radio-group-context.svelte';
+export { default as RadioGroupIndicator, type RadioGroupIndicatorBaseProps, type RadioGroupIndicatorProps, } from './radio-group-indicator.svelte';
+export { default as RadioGroupItemContext, type RadioGroupItemContextProps } from './radio-group-item-context.svelte';
+export { default as RadioGroupItemControl, type RadioGroupItemControlBaseProps, type RadioGroupItemControlProps, } from './radio-group-item-control.svelte';
+export { default as RadioGroupItemHiddenInput, type RadioGroupItemHiddenInputBaseProps, type RadioGroupItemHiddenInputProps, } from './radio-group-item-hidden-input.svelte';
+export { default as RadioGroupItemText, type RadioGroupItemTextBaseProps, type RadioGroupItemTextProps, } from './radio-group-item-text.svelte';
+export { default as RadioGroupItem, type RadioGroupItemBaseProps, type RadioGroupItemProps, } from './radio-group-item.svelte';
+export { default as RadioGroupLabel, type RadioGroupLabelBaseProps, type RadioGroupLabelProps, } from './radio-group-label.svelte';
+export { default as RadioGroupRootProvider, type RadioGroupRootProviderBaseProps, type RadioGroupRootProviderProps, } from './radio-group-root-provider.svelte';
+export { default as RadioGroupRoot, type RadioGroupRootBaseProps, type RadioGroupRootProps, } from './radio-group-root.svelte';
+export { radioGroupAnatomy } from './radio-group.anatomy';
+export { useRadioGroup, type UseRadioGroupProps, type UseRadioGroupReturn } from './use-radio-group.svelte';
+export { useRadioGroupContext, type UseRadioGroupContext } from './use-radio-group-context';
+export { useRadioGroupItemContext, type UseRadioGroupItemContext } from './use-radio-group-item-context';
+export * as RadioGroup from './radio-group';

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

@@ -0,0 +1,15 @@
+export { default as RadioGroupContext } from './radio-group-context.svelte';
+export { default as RadioGroupIndicator, } from './radio-group-indicator.svelte';
+export { default as RadioGroupItemContext } from './radio-group-item-context.svelte';
+export { default as RadioGroupItemControl, } from './radio-group-item-control.svelte';
+export { default as RadioGroupItemHiddenInput, } from './radio-group-item-hidden-input.svelte';
+export { default as RadioGroupItemText, } from './radio-group-item-text.svelte';
+export { default as RadioGroupItem, } from './radio-group-item.svelte';
+export { default as RadioGroupLabel, } from './radio-group-label.svelte';
+export { default as RadioGroupRootProvider, } from './radio-group-root-provider.svelte';
+export { default as RadioGroupRoot, } from './radio-group-root.svelte';
+export { radioGroupAnatomy } from './radio-group.anatomy';
+export { useRadioGroup } from './use-radio-group.svelte';
+export { useRadioGroupContext } from './use-radio-group-context';
+export { useRadioGroupItemContext } from './use-radio-group-item-context';
+export * as RadioGroup from './radio-group';

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

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

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseRadioGroupContext } from './use-radio-group-context';
+export interface RadioGroupContextProps {
+    children: Snippet<[UseRadioGroupContext]>;
+}
+declare const RadioGroupContext: import("svelte").Component<RadioGroupContextProps, {}, "">;
+type RadioGroupContext = ReturnType<typeof RadioGroupContext>;
+export default RadioGroupContext;

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

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface RadioGroupIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface RadioGroupIndicatorProps extends Assign<HTMLProps<'div'>, RadioGroupIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useRadioGroupContext } from './use-radio-group-context'
+
+  const props: RadioGroupIndicatorProps = $props()
+
+  const radioGroup = useRadioGroupContext()
+  const mergedProps = $derived(mergeProps(radioGroup().getIndicatorProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

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

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

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

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