negodesign 0.0.70 → 0.0.72

package/dist/components/ui/phone-input/country-selector.svelte

@@ -1,101 +1,87 @@
+<script lang="ts" module>
+	import type { Country } from './types';
+
+	export const COUNTRIES: Country[] = [
+		{ id: 'ao', iso2: 'ao', name: 'Angola', dialCode: '244' },
+		{ id: 'br', iso2: 'br', name: 'Brazil', dialCode: '55' },
+		{ id: 'cv', iso2: 'cv', name: 'Cape Verde', dialCode: '238' },
+		{ id: 'cn', iso2: 'cn', name: 'China', dialCode: '86' },
+		{ id: 'fr', iso2: 'fr', name: 'France', dialCode: '33' },
+		{ id: 'gw', iso2: 'gw', name: 'Guinea-Bissau', dialCode: '245' },
+		{ id: 'jp', iso2: 'jp', name: 'Japan', dialCode: '81' },
+		{ id: 'mz', iso2: 'mz', name: 'Mozambique', dialCode: '258' },
+		{ id: 'pt', iso2: 'pt', name: 'Portugal', dialCode: '351' },
+		{ id: 'st', iso2: 'st', name: 'São Tomé and Príncipe', dialCode: '239' },
+		{ id: 'za', iso2: 'za', name: 'South Africa', dialCode: '27' },
+		{ id: 'es', iso2: 'es', name: 'Spain', dialCode: '34' },
+		{ id: 'gb', iso2: 'gb', name: 'United Kingdom', dialCode: '44' },
+		{ id: 'us', iso2: 'us', name: 'United States', dialCode: '1' }
+	];
+</script>
+
 <script lang="ts">
-	import * as Popover from '../popover';
-	import Button from '../button/button.svelte';
-	import * as Command from '../command';
-	import { ScrollArea } from '../scroll-area';
-	import CheckIcon from '@lucide/svelte/icons/check';
-	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
 	import { cn } from '../../../utils.js';
-	import Flag from './flag.svelte';
-	import type { Country, CountryCode } from 'svelte-tel-input/types';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import { GlobalIcon, UnfoldMoreIcon } from '@hugeicons/core-free-icons';
+	import type { CountryCode } from './types';
 
 	interface Props {
-		/** List of countries */
-		countries: Country[];
-		disabled?: boolean;
 		selected?: CountryCode | null;
+		dialCode?: string;
+		disabled?: boolean;
 		onselect?: (val: CountryCode | null) => void;
-		/** Default ordering is alphabetical by country name supply this function to customize the sorting behavior  */
 		order?: (a: Country, b: Country) => number;
 	}
 
 	let {
-		countries,
-		disabled = false,
 		selected = $bindable(null),
+		// eslint-disable-next-line no-useless-assignment
+	dialCode = $bindable(''),
+		disabled = false,
 		onselect = undefined,
 		order = (a, b) => {
 			return a.name.localeCompare(b.name);
 		}
 	}: Props = $props();
 
-	let selectedCountry = $derived(countries.find((a) => a.iso2 == selected));
+	let ordered = $derived(COUNTRIES.slice().sort(order));
 
-	let open = $state(false);
-	let selectedValue = $state(false);
-
-	function selectCountry(country: Country) {
-		selected = country.iso2;
-		selectedValue = true;
-		open = false;
+	function handleChange(e: Event) {
+		selected = (e.currentTarget as HTMLSelectElement).value;
 		onselect?.(selected);
 	}
+
+	$effect(() => {
+		const country = COUNTRIES.find((c) => c.iso2 === selected);
+		dialCode = country?.dialCode ?? '';
+	});
 </script>
 
-<Popover.Root bind:open>
-	<Popover.Trigger>
-		{#snippet child({ props })}
-			<Button
-				{...props}
-				type="button"
-				variant="outline"
-				class={cn('flex shrink-0 gap-1 rounded-l-lg rounded-r-none px-3')}
-				{disabled}
-			>
-				<Flag country={selectedCountry} />
-				<ChevronsUpDownIcon
-					class={cn('-mr-2 h-4 w-4 opacity-50', disabled ? 'hidden' : 'opacity-100')}
-				/>
-			</Button>
-		{/snippet}
-	</Popover.Trigger>
-	<Popover.Content
-		class="w-[300px] p-0"
-		align="start"
-		onCloseAutoFocus={(e) => {
-			if (selectedValue) {
-				selectedValue = false;
-				e.preventDefault();
-			}
-		}}
+<div class="relative flex shrink-0 items-center">
+	<HugeiconsIcon
+		icon={GlobalIcon}
+		strokeWidth={2}
+		class="text-muted-foreground pointer-events-none absolute left-2.5 size-4"
+	/>
+	<select
+		value={selected ?? ''}
+		onchange={handleChange}
+		aria-label="Country code"
+		{disabled}
+		class={cn(
+			'border-input bg-input/30 focus-visible:ring-ring/50 dark:bg-input/30 focus-visible:border-ring h-9 w-fit appearance-none rounded-l-md rounded-r-none border py-1 pr-8 pl-8 text-sm transition-[color,box-shadow] focus-visible:ring-[3px] outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>option]:bg-background',
+			disabled ? 'cursor-not-allowed opacity-50' : ''
+		)}
 	>
-		<Command.Root>
-			<Command.Input placeholder="Search..." />
-			<Command.List>
-				<ScrollArea class="h-72">
-					<Command.Empty>No country found.</Command.Empty>
-					<Command.Group class="overflow-clip">
-						{#each countries.sort(order) as country (country.id)}
-							<Command.Item
-								class="gap-2 [&_.cn-command-item-indicator]:hidden"
-								value={country.name}
-								onSelect={() => selectCountry(country)}
-							>
-								<Flag {country} />
-								<span class="flex-1 text-sm">{country.name}</span>
-								<span class="text-foreground/50 text-sm">
-									+{country.dialCode}
-								</span>
-								<div class="w-4">
-									{#if country.iso2 == selected}
-										<CheckIcon class="phone-input-check-icon size-4" />
-									{/if}
-								</div>
-							</Command.Item>
-						{/each}
-					</Command.Group>
-				</ScrollArea>
-			</Command.List>
-		</Command.Root>
-	</Popover.Content>
-</Popover.Root>
+		{#each ordered as country (country.id)}
+			<option value={country.iso2}>
+				{country.name} (+{country.dialCode})
+			</option>
+		{/each}
+	</select>
+	<HugeiconsIcon
+		icon={UnfoldMoreIcon}
+		strokeWidth={2}
+		class="text-muted-foreground pointer-events-none absolute right-2.5 size-4"
+	/>
+</div>

package/dist/components/ui/phone-input/country-selector.svelte.d.ts

@@ -1,13 +1,13 @@
-import type { Country, CountryCode } from 'svelte-tel-input/types';
+import type { Country } from './types';
+export declare const COUNTRIES: Country[];
+import type { CountryCode } from './types';
 interface Props {
-    /** List of countries */
-    countries: Country[];
-    disabled?: boolean;
     selected?: CountryCode | null;
+    dialCode?: string;
+    disabled?: boolean;
     onselect?: (val: CountryCode | null) => void;
-    /** Default ordering is alphabetical by country name supply this function to customize the sorting behavior  */
     order?: (a: Country, b: Country) => number;
 }
-declare const CountrySelector: import("svelte").Component<Props, {}, "selected">;
+declare const CountrySelector: import("svelte").Component<Props, {}, "selected" | "dialCode">;
 type CountrySelector = ReturnType<typeof CountrySelector>;
 export default CountrySelector;

package/dist/components/ui/phone-input/flag.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { Country } from 'svelte-tel-input/types';
-	import { getFlag } from './flags';
+	import type { Country } from './types';
 
 	interface Props {
 		country?: Country | null;
@@ -9,13 +8,5 @@
 	let { country = null }: Props = $props();
 </script>
 
-<span
-	class="bg-foreground/20 flex h-4 w-6 shrink-0 overflow-clip rounded-sm [&>svg]:h-4! [&>svg]:w-6!"
->
-	{#await getFlag(country) then flag}
-		{#if flag}
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-			{@html flag}
-		{/if}
-	{/await}
-</span>
+<span class="bg-foreground/20 flex h-4 w-6 shrink-0 overflow-clip rounded-sm">
+</span>

package/dist/components/ui/phone-input/flag.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Country } from 'svelte-tel-input/types';
+import type { Country } from './types';
 interface Props {
     country?: Country | null;
 }

package/dist/components/ui/phone-input/flags.d.ts

@@ -1,2 +1,3 @@
-import type { Country } from 'svelte-tel-input/types';
+import type { Country, CountryCode } from './types';
+export declare function hasFlag(code: CountryCode): boolean;
 export declare function getFlag(country: Country | null): Promise<string | null>;

package/dist/components/ui/phone-input/flags.js

@@ -1,10 +1,6 @@
-import { hasFlag } from 'country-flag-icons';
-let flagIcons = null;
+export function hasFlag(code) {
+    return false;
+}
 export async function getFlag(country) {
-    if (!country)
-        return null;
-    if (!hasFlag(country.iso2))
-        return null;
-    flagIcons ??= await import('country-flag-icons/string/3x2');
-    return flagIcons[country.iso2] ?? null;
+    return null;
 }

package/dist/components/ui/phone-input/index.d.ts

@@ -1,3 +1,3 @@
 import PhoneInput, { defaultOptions } from './phone-input.svelte';
 export { PhoneInput, defaultOptions };
-export type { PhoneInputProps } from './types';
+export type { PhoneInputProps, Country, CountryCode, DetailedValue, TelInputOptions } from './types';

package/dist/components/ui/phone-input/phone-input.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" module>
+	import type { TelInputOptions } from './types';
+
 	export const defaultOptions: TelInputOptions = {
 		spaces: true,
 		autoPlaceholder: true
@@ -6,16 +8,13 @@
 </script>
 
 <script lang="ts">
-	import CountrySelector from './country-selector.svelte';
+	import CountrySelector, { COUNTRIES } from './country-selector.svelte';
 	import { type PhoneInputProps } from '.';
 	import { cn } from '../../../utils.js';
-	import { TelInput, countries } from 'svelte-tel-input';
-	import 'svelte-tel-input/styles/flags.css';
-	import type { TelInputOptions } from 'svelte-tel-input/types';
 
 	let {
 		class: className = undefined,
-		defaultCountry = null,
+		defaultCountry = 'ao',
 		country = $bindable(defaultCountry),
 		options = defaultOptions,
 		placeholder,
@@ -23,6 +22,7 @@
 		disabled = false,
 		value = $bindable(''),
 		valid = $bindable(true),
+		// eslint-disable-next-line no-useless-assignment
 		detailedValue = $bindable(null),
 		order = undefined,
 		name = undefined,
@@ -30,34 +30,119 @@
 	}: PhoneInputProps = $props();
 
 	let el: HTMLInputElement | undefined = $state();
+	let dialCode = $state('');
+	let number = $state('');
+	let displayNumber = $state('');
+	let lastEmitted = $state('');
+
+	const currentCountry = $derived(COUNTRIES.find((c) => c.iso2 === country) ?? null);
+
+	function nationalDigits(input: string): string {
+		return input.replace(/\D/g, '');
+	}
+
+	function formatNational(input: string): string {
+		const digits = nationalDigits(input);
+		if (!options?.spaces) return digits;
+		return digits.match(/.{1,3}/g)?.join(' ') ?? '';
+	}
+
+	function formatFull(code: string, input: string): string {
+		const national = nationalDigits(input);
+		if (!national) return '';
+		return options?.spaces ? `+${code} ${formatNational(national)}` : `+${code}${national}`;
+	}
+
+	function parseValue(input: string): { code: string; number: string } | null {
+		const digits = nationalDigits(input);
+		if (!digits) return null;
+		for (const c of COUNTRIES) {
+			if (digits.startsWith(c.dialCode) && digits.length > c.dialCode.length) {
+				return { code: c.dialCode, number: digits.slice(c.dialCode.length) };
+			}
+		}
+		const exact = COUNTRIES.find((c) => digits === c.dialCode);
+		if (exact) return { code: exact.dialCode, number: '' };
+		return { code: '', number: digits };
+	}
+
+	function isValidNumber(input: string): boolean {
+		const length = nationalDigits(input).length;
+		if (!length) return true;
+		return length >= 6 && length <= 15;
+	}
+
+	function handleNumberInput(e: Event) {
+		const input = (e.currentTarget as HTMLInputElement).value;
+		displayNumber = input;
+		number = input.replace(/[^\d]/g, '');
+	}
 
 	function focus() {
-		// sort of an after update kinda thing
 		setTimeout(() => {
 			el?.focus();
 		}, 0);
 	}
+
+	$effect(() => {
+		const full = formatFull(dialCode, number);
+		if (value !== full) {
+			value = full;
+			lastEmitted = full;
+		}
+		valid = isValidNumber(number);
+		detailedValue = {
+			country: currentCountry,
+			code: dialCode,
+			number: nationalDigits(number)
+		};
+	});
+
+	$effect(() => {
+		const incoming = value;
+		if (incoming === lastEmitted) return;
+		lastEmitted = incoming;
+		const parsed = parseValue(incoming);
+		if (!parsed) {
+			if (!nationalDigits(incoming)) {
+				number = '';
+				displayNumber = '';
+			}
+			return;
+		}
+		if (parsed.code) {
+			const matched = COUNTRIES.find((c) => c.dialCode === parsed.code);
+			if (matched && matched.iso2 !== country) country = matched.iso2;
+		}
+		dialCode = parsed.code;
+		number = parsed.number;
+		displayNumber = formatNational(parsed.number);
+	});
 </script>
 
-<div class="flex place-items-center">
-	<CountrySelector {order} {countries} bind:selected={country} onselect={focus} />
-	<TelInput
-		{name}
-		bind:country
-		bind:detailedValue
-		bind:value
-		bind:valid
-		{readonly}
+<div class={cn('flex h-9 w-full min-w-0 items-center', className)}>
+	<CountrySelector
+		{order}
 		{disabled}
+		bind:selected={country}
+		bind:dialCode
+		onselect={focus}
+	/>
+	<input
+		type="tel"
+		{name}
+		bind:this={el}
+		bind:value={displayNumber}
+		oninput={handleNumberInput}
 		{placeholder}
-		bind:el
-		{options}
+		readonly={readonly}
+		{disabled}
+		aria-invalid={!valid}
 		class={cn(
-			'border-input border-l-none bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-l-none rounded-r-md border-y border-r px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'border-input border-l-none bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 flex-1 rounded-r-md rounded-l-none border-y border-r px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-			className
+			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
 		)}
 		{...rest}
 	/>
-</div>
+</div>

package/dist/components/ui/phone-input/phone-input.svelte.d.ts

@@ -1,7 +1,6 @@
+import type { TelInputOptions } from './types';
 export declare const defaultOptions: TelInputOptions;
 import { type PhoneInputProps } from '.';
-import 'svelte-tel-input/styles/flags.css';
-import type { TelInputOptions } from 'svelte-tel-input/types';
 declare const PhoneInput: import("svelte").Component<PhoneInputProps, {}, "value" | "country" | "valid" | "detailedValue">;
 type PhoneInput = ReturnType<typeof PhoneInput>;
 export default PhoneInput;

package/dist/components/ui/phone-input/types.d.ts

@@ -1,4 +1,19 @@
-import type { Country, CountryCode, DetailedValue, TelInputOptions } from 'svelte-tel-input/types';
+export type CountryCode = string;
+export type Country = {
+    id: string;
+    iso2: string;
+    name: string;
+    dialCode: string;
+};
+export type DetailedValue = {
+    country: Country | null;
+    code: string;
+    number: string;
+};
+export type TelInputOptions = {
+    spaces?: boolean;
+    autoPlaceholder?: boolean;
+};
 export type PhoneInputProps = {
     country?: CountryCode | null;
     defaultCountry?: CountryCode | null;

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

@@ -1,7 +1,26 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { getPopoverContext } from "./popover-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+	let {
+		ref = $bindable<HTMLButtonElement | null>(null),
+		children,
+		...restProps
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		children?: Snippet;
+	} = $props();
+
+	const store = getPopoverContext();
 </script>
 
-<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />
+<button
+	bind:this={ref}
+	type="button"
+	data-slot="popover-close"
+	onclick={() => store.closeMenu()}
+	{...restProps}
+>
+	{@render children?.()}
+</button>

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

@@ -1,4 +1,9 @@
-import { Popover as PopoverPrimitive } from 'bits-ui';
-declare const PopoverClose: import("svelte").Component<PopoverPrimitive.CloseProps, {}, "ref">;
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLButtonAttributes & {
+    ref?: HTMLButtonElement | null;
+    children?: Snippet;
+};
+declare const PopoverClose: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type PopoverClose = ReturnType<typeof PopoverClose>;
 export default PopoverClose;

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

@@ -1,31 +1,93 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from 'bits-ui';
-	import PopoverPortal from './popover-portal.svelte';
-	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
-	import type { ComponentProps } from 'svelte';
+	import { getPopoverContext } from "./popover-context.svelte.js";
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
-		class: className,
+		ref = $bindable<HTMLDivElement | null>(null),
+		align = "center",
+		side = "bottom",
 		sideOffset = 4,
-		align = 'center',
 		portalProps,
+		class: className,
+		children,
 		...restProps
-	}: PopoverPrimitive.ContentProps & {
-		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		align?: "start" | "center" | "end";
+		side?: "top" | "right" | "bottom" | "left";
+		sideOffset?: number;
+		portalProps?: Record<string, unknown>;
+		class?: string;
+		children?: Snippet;
 	} = $props();
+
+	const store = getPopoverContext();
+
+	$effect(() => {
+		if (!store.open) return;
+		function handlePointerDown(event: PointerEvent) {
+			const target = event.target as Node;
+			if (store.anchorEl?.contains(target)) return;
+			if (ref?.contains(target)) return;
+			store.closeMenu();
+		}
+		function handleKeydown(event: KeyboardEvent) {
+			if (event.key === "Escape") {
+				store.closeMenu();
+				store.anchorEl?.focus();
+			}
+		}
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeydown);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeydown);
+		};
+	});
+
+	let positionClasses = $derived.by(() => {
+		const horizontal = side === "right" || side === "left";
+		if (horizontal) {
+			const sideClass = side === "left" ? "right-full" : "left-full";
+			const alignClass =
+				align === "end"
+					? "bottom-0"
+					: align === "start"
+						? "top-0"
+						: "top-1/2 -translate-y-1/2";
+			const margin =
+				side === "left"
+					? `margin-right: ${sideOffset + 4}px`
+					: `margin-left: ${sideOffset + 4}px`;
+			return { sideClass, alignClass, margin };
+		}
+		const sideClass = side === "top" ? "bottom-full" : "top-full";
+		const alignClass =
+			align === "end" ? "end-0" : align === "start" ? "start-0" : "start-1/2 -translate-x-1/2";
+		const margin =
+			side === "top"
+				? `margin-bottom: ${sideOffset + 4}px`
+				: `margin-top: ${sideOffset + 4}px`;
+		return { sideClass, alignClass, margin };
+	});
 </script>
 
-<PopoverPortal {...portalProps}>
-	<PopoverPrimitive.Content
-		bind:ref
+{#if store.open}
+	<div
+		bind:this={ref}
 		data-slot="popover-content"
-		{sideOffset}
-		{align}
+		data-state={store.open ? "open" : "closed"}
+		style={positionClasses.margin}
 		class={cn(
-			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden duration-100',
-			className
+			"absolute z-50 w-72 rounded-md border bg-popover p-4 text-sm text-popover-foreground shadow-md outline-none animate-zoom-in",
+			positionClasses.sideClass,
+			positionClasses.alignClass,
+			className,
 		)}
 		{...restProps}
-	/>
-</PopoverPortal>
+	>
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -1,9 +1,13 @@
-import { Popover as PopoverPrimitive } from 'bits-ui';
-import PopoverPortal from './popover-portal.svelte';
-import { type WithoutChildrenOrChild } from '../../../utils.js';
-import type { ComponentProps } from 'svelte';
-type $$ComponentProps = PopoverPrimitive.ContentProps & {
-    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    sideOffset?: number;
+    portalProps?: Record<string, unknown>;
+    class?: string;
+    children?: Snippet;
 };
 declare const PopoverContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type PopoverContent = ReturnType<typeof PopoverContent>;

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

@@ -0,0 +1,13 @@
+export type PopoverStore = {
+    open: boolean;
+    anchorId: string;
+    anchorEl: HTMLElement | null;
+    clickEvent: MouseEvent | null;
+    toggle: () => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    setAnchor: (el: HTMLElement | null) => void;
+};
+export declare function generatePopoverId(): string;
+export declare function setPopoverContext(store: PopoverStore): PopoverStore;
+export declare function getPopoverContext(): PopoverStore;

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

@@ -0,0 +1,13 @@
+import { getContext, setContext } from "svelte";
+const POPOVER_CONTEXT_KEY = Symbol("popover-context");
+let popoverIdCounter = 0;
+export function generatePopoverId() {
+    popoverIdCounter += 1;
+    return `popover-${popoverIdCounter.toString(36)}`;
+}
+export function setPopoverContext(store) {
+    return setContext(POPOVER_CONTEXT_KEY, store);
+}
+export function getPopoverContext() {
+    return getContext(POPOVER_CONTEXT_KEY);
+}

package/dist/components/ui/popover/popover-portal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import type { Snippet } from "svelte";
 
-	let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+	let { children }: { children?: Snippet } = $props();
 </script>
 
-<PopoverPrimitive.Portal {...restProps} />
+{@render children?.()}