@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/pin-input/pin-input-label.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PinInputLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface PinInputLabelProps extends Assign<HTMLProps<'label'>, PinInputLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePinInputContext } from './use-pin-input-context'
+
+  const props: PinInputLabelProps = $props()
+  const pinInput = usePinInputContext()
+  const mergedProps = $derived(mergeProps(pinInput().getLabelProps(), props))
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/pin-input/pin-input-label.svelte.d.ts

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

package/dist/components/pin-input/pin-input-root-provider.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { PolymorphicProps } from '../../types'
+  import type { UsePinInputReturn } from './use-pin-input.svelte'
+
+  interface RootProviderProps {
+    value: UsePinInputReturn
+  }
+
+  export interface PinInputRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface PinInputRootProviderProps extends PinInputRootProviderBaseProps {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { PinInputProvider } from './use-pin-input-context'
+  import { Ark } from '../factory'
+
+  const { value, ...props }: PinInputRootProviderProps = $props()
+
+  PinInputProvider(value)
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/pin-input/pin-input-root-provider.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { PolymorphicProps } from '../../types';
+import type { UsePinInputReturn } from './use-pin-input.svelte';
+interface RootProviderProps {
+    value: UsePinInputReturn;
+}
+export interface PinInputRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+}
+export interface PinInputRootProviderProps extends PinInputRootProviderBaseProps {
+    children?: Snippet;
+}
+declare const PinInputRootProvider: import("svelte").Component<PinInputRootProviderProps, {}, "">;
+type PinInputRootProvider = ReturnType<typeof PinInputRootProvider>;
+export default PinInputRootProvider;

package/dist/components/pin-input/pin-input-root.svelte

@@ -0,0 +1,66 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UsePinInputProps } from './use-pin-input.svelte'
+
+  export interface PinInputRootBaseProps extends UsePinInputProps, PolymorphicProps<'div'> {}
+  export interface PinInputRootProps extends Assign<HTMLProps<'div'>, PinInputRootBaseProps> {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { PinInputProvider } from './use-pin-input-context'
+  import { usePinInput } from './use-pin-input.svelte'
+
+  let { value = $bindable(), ...props }: PinInputRootProps = $props()
+  const providedId = $props.id()
+
+  const [usePinInputProps, localProps] = $derived(
+    createSplitProps<UsePinInputProps>()(props, [
+      'autoFocus',
+      'blurOnComplete',
+      'count',
+      'defaultValue',
+      'disabled',
+      'form',
+      'id',
+      'ids',
+      'invalid',
+      'mask',
+      'name',
+      'onValueChange',
+      'onValueComplete',
+      'onValueInvalid',
+      'otp',
+      'pattern',
+      'placeholder',
+      'readOnly',
+      'required',
+      'selectOnFocus',
+      'translations',
+      'type',
+      'value',
+    ]),
+  )
+
+  const resolvedProps = $derived<UsePinInputProps>({
+    ...usePinInputProps,
+    id: usePinInputProps.id ?? providedId,
+    value,
+    onValueChange(details) {
+      usePinInputProps.onValueChange?.(details)
+      value = details.value
+    },
+  })
+
+  const pinInput = usePinInput(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(pinInput().getRootProps(), localProps))
+
+  PinInputProvider(pinInput)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/pin-input/pin-input-root.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UsePinInputProps } from './use-pin-input.svelte';
+export interface PinInputRootBaseProps extends UsePinInputProps, PolymorphicProps<'div'> {
+}
+export interface PinInputRootProps extends Assign<HTMLProps<'div'>, PinInputRootBaseProps> {
+    children?: Snippet;
+}
+declare const PinInputRoot: import("svelte").Component<PinInputRootProps, {}, "value">;
+type PinInputRoot = ReturnType<typeof PinInputRoot>;
+export default PinInputRoot;

package/dist/components/pin-input/pin-input.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';

package/dist/components/pin-input/pin-input.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';

package/dist/components/pin-input/pin-input.d.ts

@@ -0,0 +1,8 @@
+export type { ValueChangeDetails, ValueInvalidDetails } from '@zag-js/pin-input';
+export { default as Context, type PinInputContextProps as ContextProps } from './pin-input-context.svelte';
+export { default as Control, type PinInputControlBaseProps as ControlBaseProps, type PinInputControlProps as ControlProps, } from './pin-input-control.svelte';
+export { default as HiddenInput, type PinInputHiddenInputBaseProps as HiddenInputBaseProps, type PinInputHiddenInputProps as HiddenInputProps, } from './pin-input-hidden-input.svelte';
+export { default as Input, type PinInputInputBaseProps as InputBaseProps, type PinInputInputProps as InputProps, } from './pin-input-input.svelte';
+export { default as Label, type PinInputLabelBaseProps as LabelBaseProps, type PinInputLabelProps as LabelProps, } from './pin-input-label.svelte';
+export { default as Root, type PinInputRootBaseProps as RootBaseProps, type PinInputRootProps as RootProps, } from './pin-input-root.svelte';
+export { default as RootProvider, type PinInputRootProviderBaseProps as RootProviderBaseProps, type PinInputRootProviderProps as RootProviderProps, } from './pin-input-root-provider.svelte';

package/dist/components/pin-input/pin-input.js

@@ -0,0 +1,7 @@
+export { default as Context } from './pin-input-context.svelte';
+export { default as Control, } from './pin-input-control.svelte';
+export { default as HiddenInput, } from './pin-input-hidden-input.svelte';
+export { default as Input, } from './pin-input-input.svelte';
+export { default as Label, } from './pin-input-label.svelte';
+export { default as Root, } from './pin-input-root.svelte';
+export { default as RootProvider, } from './pin-input-root-provider.svelte';

package/dist/components/pin-input/use-pin-input-context.d.ts

@@ -0,0 +1,4 @@
+import type { UsePinInputReturn } from './use-pin-input.svelte';
+export interface UsePinInputContext extends UsePinInputReturn {
+}
+export declare const PinInputProvider: (opts: UsePinInputContext) => void, usePinInputContext: (fallback?: UsePinInputContext | undefined) => UsePinInputContext;

package/dist/components/pin-input/use-pin-input-context.js

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

package/dist/components/pin-input/use-pin-input.svelte.d.ts

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

package/dist/components/pin-input/use-pin-input.svelte.js

@@ -0,0 +1,20 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as pinInput from '@zag-js/pin-input';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+export const usePinInput = (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(pinInput.machine, () => machineProps);
+    const api = $derived(pinInput.connect(service, normalizeProps));
+    return () => api;
+};

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

@@ -0,0 +1,20 @@
+export type { OpenChangeDetails as PopoverOpenChangeDetails } from '@zag-js/popover';
+export { default as PopoverAnchor, type PopoverAnchorBaseProps, type PopoverAnchorProps } from './popover-anchor.svelte';
+export { default as PopoverArrowTip, type PopoverArrowTipBaseProps, type PopoverArrowTipProps, } from './popover-arrow-tip.svelte';
+export { default as PopoverArrow, type PopoverArrowBaseProps, type PopoverArrowProps } from './popover-arrow.svelte';
+export { default as PopoverCloseTrigger, type PopoverCloseTriggerBaseProps, type PopoverCloseTriggerProps, } from './popover-close-trigger.svelte';
+export { default as PopoverContent, type PopoverContentBaseProps, type PopoverContentProps, } from './popover-content.svelte';
+export { default as PopoverContext, type PopoverContextProps } from './popover-context.svelte';
+export { default as PopoverDescription, type PopoverDescriptionBaseProps, type PopoverDescriptionProps, } from './popover-description.svelte';
+export { default as PopoverIndicator, type PopoverIndicatorBaseProps, type PopoverIndicatorProps, } from './popover-indicator.svelte';
+export { default as PopoverPositioner, type PopoverPositionerBaseProps, type PopoverPositionerProps, } from './popover-positioner.svelte';
+export { default as PopoverRootProvider, type PopoverRootProviderBaseProps, type PopoverRootProviderProps, } from './popover-root-provider.svelte';
+export { default as PopoverRoot, type PopoverRootBaseProps, type PopoverRootProps } from './popover-root.svelte';
+export { default as PopoverTitle, type PopoverTitleBaseProps, type PopoverTitleProps } from './popover-title.svelte';
+export { default as PopoverTrigger, type PopoverTriggerBaseProps, type PopoverTriggerProps, } from './popover-trigger.svelte';
+export { popoverAnatomy } from './popover.anatomy';
+export { usePopoverContext } from './use-popover-context';
+export type { UsePopoverContext } from './use-popover-context';
+export { usePopover } from './use-popover.svelte';
+export type { UsePopoverProps, UsePopoverReturn } from './use-popover.svelte';
+export * as Popover from './popover';

package/dist/components/popover/index.js

@@ -0,0 +1,17 @@
+export { default as PopoverAnchor } from './popover-anchor.svelte';
+export { default as PopoverArrowTip, } from './popover-arrow-tip.svelte';
+export { default as PopoverArrow } from './popover-arrow.svelte';
+export { default as PopoverCloseTrigger, } from './popover-close-trigger.svelte';
+export { default as PopoverContent, } from './popover-content.svelte';
+export { default as PopoverContext } from './popover-context.svelte';
+export { default as PopoverDescription, } from './popover-description.svelte';
+export { default as PopoverIndicator, } from './popover-indicator.svelte';
+export { default as PopoverPositioner, } from './popover-positioner.svelte';
+export { default as PopoverRootProvider, } from './popover-root-provider.svelte';
+export { default as PopoverRoot } from './popover-root.svelte';
+export { default as PopoverTitle } from './popover-title.svelte';
+export { default as PopoverTrigger, } from './popover-trigger.svelte';
+export { popoverAnatomy } from './popover.anatomy';
+export { usePopoverContext } from './use-popover-context';
+export { usePopover } from './use-popover.svelte';
+export * as Popover from './popover';

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

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

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

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

package/dist/components/popover/popover-arrow-tip.svelte

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

package/dist/components/popover/popover-arrow-tip.svelte.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PopoverContentBaseProps extends PolymorphicProps<'div'> {
+    ref?: Element | null
+  }
+  export interface PopoverContentProps extends Assign<HTMLProps<'div'>, PopoverContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { usePopoverContext } from './use-popover-context'
+
+  let { ref = $bindable<Element | null>(), ...props }: PopoverContentProps = $props()
+
+  const popover = usePopoverContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(popover().getContentProps(), presence().getPresenceProps(), props))
+
+  function setNode(node: Element | null) {
+    presence().setNode(node)
+    ref = node
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {...mergedProps} {@attach setNode} />
+{/if}

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface PopoverContentBaseProps extends PolymorphicProps<'div'> {
+    ref?: Element | null;
+}
+export interface PopoverContentProps extends Assign<HTMLProps<'div'>, PopoverContentBaseProps> {
+}
+declare const PopoverContent: import("svelte").Component<PopoverContentProps, {}, "ref">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

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

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UsePopoverContext } from './use-popover-context'
+
+  export interface PopoverContextProps {
+    render?: Snippet<[UsePopoverContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { usePopoverContext } from './use-popover-context'
+
+  const { render }: PopoverContextProps = $props()
+
+  const context = usePopoverContext()
+</script>
+
+{@render render?.(context)}

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UsePopoverContext } from './use-popover-context';
+export interface PopoverContextProps {
+    render?: Snippet<[UsePopoverContext]>;
+}
+declare const PopoverContext: import("svelte").Component<PopoverContextProps, {}, "">;
+type PopoverContext = ReturnType<typeof PopoverContext>;
+export default PopoverContext;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PopoverPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface PopoverPositionerProps extends Assign<HTMLProps<'div'>, PopoverPositionerBaseProps> {}
+</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: PopoverPositionerProps = $props()
+
+  const popover = usePopoverContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(popover().getPositionerProps(), props))
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {...mergedProps} />
+{/if}

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

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

package/dist/components/popover/popover-root-provider.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import type { UsePopoverReturn } from './use-popover.svelte'
+  import type { UsePresenceReturn } from '../presence'
+  import type { Snippet } from 'svelte'
+
+  export interface PopoverRootProviderBaseProps {
+    value: UsePopoverReturn
+    presence: UsePresenceReturn
+    children?: Snippet
+  }
+  export interface PopoverRootProviderProps extends PopoverRootProviderBaseProps {}
+</script>
+
+<script lang="ts">
+  import { PresenceProvider } from '../presence'
+  import { PopoverProvider } from './use-popover-context'
+
+  const { value, presence, children }: PopoverRootProviderProps = $props()
+
+  PopoverProvider(value)
+  PresenceProvider(presence)
+</script>
+
+{@render children?.()}

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

@@ -0,0 +1,13 @@
+import type { UsePopoverReturn } from './use-popover.svelte';
+import type { UsePresenceReturn } from '../presence';
+import type { Snippet } from 'svelte';
+export interface PopoverRootProviderBaseProps {
+    value: UsePopoverReturn;
+    presence: UsePresenceReturn;
+    children?: Snippet;
+}
+export interface PopoverRootProviderProps extends PopoverRootProviderBaseProps {
+}
+declare const PopoverRootProvider: import("svelte").Component<PopoverRootProviderProps, {}, "">;
+type PopoverRootProvider = ReturnType<typeof PopoverRootProvider>;
+export default PopoverRootProvider;

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

@@ -0,0 +1,49 @@
+<script module lang="ts">
+  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
+  }
+</script>
+
+<script lang="ts">
+  import { PresenceProvider, usePresence } from '../presence'
+  import { splitPresenceProps } from '../presence/split-presence-props.svelte'
+  import { PopoverProvider } from './use-popover-context'
+  import { usePopover } from './use-popover.svelte'
+
+  let { open = $bindable(), children, ...props }: PopoverRootProps = $props()
+
+  const providedId = $props.id()
+
+  const [presenceProps, localProps] = $derived(splitPresenceProps(props))
+
+  const machineProps = $derived.by<UsePopoverProps>(() => {
+    return {
+      ...localProps,
+      id: localProps.id ?? providedId,
+      open,
+      onOpenChange(details) {
+        localProps.onOpenChange?.(details)
+        open = details.open
+      },
+    }
+  })
+
+  const popover = usePopover(() => machineProps)
+
+  const presenceMachineProps = $derived.by<UsePresenceProps>(() => ({
+    ...presenceProps,
+    present: popover().open,
+  }))
+
+  const presence = usePresence(() => presenceMachineProps)
+
+  PopoverProvider(popover)
+  PresenceProvider(presence)
+</script>
+
+{@render children?.()}