@sprawlify/svelte 0.0.46 → 0.0.48

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

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

@@ -0,0 +1,8 @@
+export type { ValueChangeDetails, ValueInvalidDetails } from '@sprawlify/primitives/machines/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 '@sprawlify/primitives/machines/pin-input';
+import { type PropTypes } from '../../core';
+import { type MaybeFunction } from '@sprawlify/primitives/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 '@sprawlify/primitives/machines/pin-input';
+import { normalizeProps, useMachine } from '../../core';
+import { runIfFn } from '@sprawlify/primitives/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 { FocusOutsideEvent as PopoverFocusOutsideEvent, InteractOutsideEvent as PopoverInteractOutsideEvent, OpenChangeDetails as PopoverOpenChangeDetails, PointerDownOutsideEvent as PopoverPointerDownOutsideEvent, } from '@sprawlify/primitives/machines/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-anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as popoverAnatomy } from '@sprawlify/primitives/machines/popover';

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

@@ -0,0 +1 @@
+export { anatomy as popoverAnatomy } from '@sprawlify/primitives/machines/popover';

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

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

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PopoverAnchorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface PopoverAnchorProps extends Assign<HTMLProps<'div'>, PopoverAnchorBaseProps> {
+}
+declare const PopoverAnchor: import("svelte").Component<PopoverAnchorProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface PopoverArrowTipBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface PopoverArrowTipProps extends Assign<HTMLProps<'div'>, PopoverArrowTipBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePopoverContext } from './use-popover-context'
+
+  let { ref = $bindable(null), ...props }: PopoverArrowTipProps = $props()
+
+  const popover = usePopoverContext()
+  const mergedProps = $derived(mergeProps(popover().getArrowTipProps(), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PopoverArrowTipBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface PopoverArrowTipProps extends Assign<HTMLProps<'div'>, PopoverArrowTipBaseProps> {
+}
+declare const PopoverArrowTip: import("svelte").Component<PopoverArrowTipProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface PopoverArrowBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface PopoverArrowProps extends Assign<HTMLProps<'div'>, PopoverArrowBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePopoverContext } from './use-popover-context'
+
+  let { ref = $bindable(null), ...props }: PopoverArrowProps = $props()
+
+  const popover = usePopoverContext()
+  const mergedProps = $derived(mergeProps(popover().getArrowProps(), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PopoverArrowBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface PopoverArrowProps extends Assign<HTMLProps<'div'>, PopoverArrowBaseProps> {
+}
+declare const PopoverArrow: import("svelte").Component<PopoverArrowProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface PopoverCloseTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface PopoverCloseTriggerProps extends Assign<HTMLProps<'button'>, PopoverCloseTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePopoverContext } from './use-popover-context'
+
+  let { ref = $bindable(null), ...props }: PopoverCloseTriggerProps = $props()
+
+  const popover = usePopoverContext()
+  const mergedProps = $derived(mergeProps(popover().getCloseTriggerProps(), props))
+</script>
+
+<Sprawlify as="button" bind:ref {...mergedProps} />

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

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

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

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface PopoverContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface PopoverContentProps extends Assign<HTMLProps<'div'>, PopoverContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { usePopoverContext } from './use-popover-context'
+
+  let { ref = $bindable(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)
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Sprawlify as="div" bind:ref {...mergedProps} {@attach setNode} />
+{/if}

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PopoverContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+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, RefAttribute } from '../../types'
+
+  export interface PopoverDescriptionBaseProps extends PolymorphicProps<'p'>, RefAttribute {}
+  export interface PopoverDescriptionProps extends Assign<HTMLProps<'p'>, PopoverDescriptionBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePopoverContext } from './use-popover-context'
+
+  let { ref = $bindable(null), ...props }: PopoverDescriptionProps = $props()
+
+  const popover = usePopoverContext()
+  const mergedProps = $derived(mergeProps(popover().getDescriptionProps(), props))
+</script>
+
+<Sprawlify as="p" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PopoverDescriptionBaseProps extends PolymorphicProps<'p'>, RefAttribute {
+}
+export interface PopoverDescriptionProps extends Assign<HTMLProps<'p'>, PopoverDescriptionBaseProps> {
+}
+declare const PopoverDescription: import("svelte").Component<PopoverDescriptionProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface PopoverIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface PopoverIndicatorProps extends Assign<HTMLProps<'div'>, PopoverIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePopoverContext } from './use-popover-context'
+
+  let { ref = $bindable(null), ...props }: PopoverIndicatorProps = $props()
+
+  const popover = usePopoverContext()
+  const mergedProps = $derived(mergeProps(popover().getIndicatorProps(), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PopoverIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface PopoverIndicatorProps extends Assign<HTMLProps<'div'>, PopoverIndicatorBaseProps> {
+}
+declare const PopoverIndicator: import("svelte").Component<PopoverIndicatorProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface PopoverPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface PopoverPositionerProps extends Assign<HTMLProps<'div'>, PopoverPositionerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { usePopoverContext } from './use-popover-context'
+
+  let { ref = $bindable(null), ...props }: PopoverPositionerProps = $props()
+
+  const popover = usePopoverContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(popover().getPositionerProps(), props))
+</script>
+
+{#if !presence().unmounted}
+  <Sprawlify as="div" bind:ref {...mergedProps} />
+{/if}

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

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

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

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { UsePresenceProps } from '../presence'
+  import type { UsePopoverReturn } from './use-popover.svelte'
+
+  interface RootProviderProps {
+    value: UsePopoverReturn
+  }
+
+  export interface PopoverRootProviderBaseProps extends RootProviderProps, UsePresenceProps {
+    children?: Snippet
+  }
+  export interface PopoverRootProviderProps extends PopoverRootProviderBaseProps {}
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence'
+  import { PopoverProvider } from './use-popover-context'
+
+  const { value, ...props }: PopoverRootProviderProps = $props()
+
+  const [presenceProps, localProps] = $derived(splitPresenceProps(props))
+  const presence = usePresence(() => ({ present: value().open, ...presenceProps }))
+
+  PopoverProvider(value)
+  PresenceProvider(presence)
+</script>
+
+{@render localProps.children?.()}

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

@@ -0,0 +1,14 @@
+import type { UsePresenceProps } from '../presence';
+import type { UsePopoverReturn } from './use-popover.svelte';
+interface RootProviderProps {
+    value: UsePopoverReturn;
+}
+export interface PopoverRootProviderBaseProps extends RootProviderProps, UsePresenceProps {
+    children?: Snippet;
+}
+export interface PopoverRootProviderProps extends PopoverRootProviderBaseProps {
+}
+import type { Snippet } from 'svelte';
+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)
+        if (open !== undefined) 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?.()}

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, RefAttribute } from '../../types'
+
+  export interface PopoverTitleBaseProps extends PolymorphicProps<'h2'>, RefAttribute {}
+  export interface PopoverTitleProps extends Assign<HTMLProps<'h2'>, PopoverTitleBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePopoverContext } from './use-popover-context'
+
+  let { ref = $bindable(null), ...props }: PopoverTitleProps = $props()
+
+  const popover = usePopoverContext()
+  const mergedProps = $derived(mergeProps(popover().getTitleProps(), props))
+</script>
+
+<Sprawlify as="h2" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PopoverTitleBaseProps extends PolymorphicProps<'h2'>, RefAttribute {
+}
+export interface PopoverTitleProps extends Assign<HTMLProps<'h2'>, PopoverTitleBaseProps> {
+}
+declare const PopoverTitle: import("svelte").Component<PopoverTitleProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface PopoverTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface PopoverTriggerProps extends Assign<HTMLProps<'button'>, PopoverTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { usePopoverContext } from './use-popover-context'
+
+  let { ref = $bindable(null), ...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>
+
+<Sprawlify as="button" bind:ref {...mergedProps} />

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

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

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

@@ -0,0 +1,14 @@
+export type { FocusOutsideEvent, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, } from '@sprawlify/primitives/machines/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;