negodesign 0.0.71 → 0.0.73

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,45 +1,70 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { HugeiconsIcon } from "@hugeicons/svelte"
-	import { MinusSignIcon } from '@hugeicons/core-free-icons';
-	import { Tick02Icon } from '@hugeicons/core-free-icons';
-	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { MinusSignIcon, Tick02Icon } from "@hugeicons/core-free-icons";
+	import { cn } from "../../../utils.js";
 	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
+		ref = $bindable<HTMLButtonElement | null>(null),
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
+		onCheckedChange,
 		class: className,
-		children: childrenProp,
+		disabled,
+		children,
 		...restProps
-	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		checked?: boolean;
+		indeterminate?: boolean;
+		onCheckedChange?: (checked: boolean) => void;
+		class?: string;
+		disabled?: boolean;
 		children?: Snippet;
 	} = $props();
+
+	let isChecked = $derived(indeterminate || checked);
+
+	let highlighted = $state(false);
+
+	function handleClick() {
+		checked = !checked;
+		indeterminate = false;
+		onCheckedChange?.(checked);
+	}
 </script>
 
-<DropdownMenuPrimitive.CheckboxItem
-	bind:ref
-	bind:checked
-	bind:indeterminate
+<button
+	bind:this={ref}
+	type="button"
+	role="menuitemcheckbox"
+	tabindex="-1"
 	data-slot="dropdown-menu-checkbox-item"
+	data-state={isChecked ? "checked" : "unchecked"}
+	data-highlighted={highlighted || undefined}
+	aria-checked={isChecked}
+	{disabled}
+	onclick={handleClick}
+	onfocus={() => (highlighted = true)}
+	onblur={() => (highlighted = false)}
+	onmouseenter={() => (highlighted = true)}
+	onmouseleave={() => (highlighted = false)}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		className
+		"relative flex w-full cursor-pointer items-center justify-start gap-2.5 rounded-lg px-2 py-1.5 pr-8 text-sm outline-none select-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+		className,
 	)}
 	{...restProps}
 >
-	{#snippet children({ checked, indeterminate })}
-		<span
-			class="absolute right-2 flex items-center justify-center pointer-events-none"
-			data-slot="dropdown-menu-checkbox-item-indicator"
-		>
-			{#if indeterminate}
-				<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2}  />
-			{:else if checked}
-				<HugeiconsIcon icon={Tick02Icon} strokeWidth={2}  />
-			{/if}
-		</span>
-		{@render childrenProp?.()}
-	{/snippet}
-</DropdownMenuPrimitive.CheckboxItem>
+	<span
+		class="absolute right-2 flex size-4 items-center justify-center pointer-events-none"
+		data-slot="dropdown-menu-checkbox-item-indicator"
+	>
+		{#if indeterminate}
+			<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2} class="size-4" />
+		{:else if checked}
+			<HugeiconsIcon icon={Tick02Icon} strokeWidth={2} class="size-4" />
+		{/if}
+	</span>
+	{@render children?.()}
+</button>

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte.d.ts

@@ -1,7 +1,12 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-import { type WithoutChildrenOrChild } from "../../../utils.js";
 import type { Snippet } from "svelte";
-type $$ComponentProps = WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLButtonAttributes & {
+    ref?: HTMLButtonElement | null;
+    checked?: boolean;
+    indeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    class?: string;
+    disabled?: boolean;
     children?: Snippet;
 };
 declare const DropdownMenuCheckboxItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,31 +1,107 @@
 <script lang="ts">
-	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
-	import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import type { ComponentProps } from "svelte";
+	import { getDropdownMenuContext } from "./dropdown-menu-context.svelte.js";
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
-		sideOffset = 4,
+		ref = $bindable<HTMLDivElement | null>(null),
 		align = "start",
+		side = "bottom",
+		sideOffset = 4,
 		portalProps,
 		class: className,
+		children,
 		...restProps
-	}: DropdownMenuPrimitive.ContentProps & {
-		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		align?: "start" | "center" | "end";
+		side?: "top" | "right" | "bottom" | "left" | "inline-start" | "inline-end";
+		sideOffset?: number;
+		portalProps?: Record<string, unknown>;
+		class?: string;
+		children?: Snippet;
 	} = $props();
+
+	const store = getDropdownMenuContext();
+
+	let anchorWidth = $state(0);
+
+	$effect(() => {
+		if (!store.open) return;
+		const width = store.anchorEl?.getBoundingClientRect().width ?? 0;
+		if (width > 0) anchorWidth = width;
+	});
+
+	$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" || side === "inline-start" || side === "inline-end";
+		if (horizontal) {
+			const sideClass = side === "left" || side === "inline-start" ? "right-full" : "left-full";
+			const alignClass =
+				align === "end"
+					? "bottom-0"
+					: align === "center"
+						? "top-1/2 -translate-y-1/2"
+						: "top-0";
+			const margin =
+				side === "left" || side === "inline-start"
+					? `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 === "center" ? "start-1/2 -translate-x-1/2" : "start-0";
+		const margin =
+			side === "top"
+				? `margin-bottom: ${sideOffset + 4}px`
+				: `margin-top: ${sideOffset + 4}px`;
+		return { sideClass, alignClass, margin };
+	});
+
+	let contentStyle = $derived(
+		`${positionClasses.margin}${anchorWidth > 0 ? `;--bits-dropdown-menu-anchor-width: ${anchorWidth}px` : ""}`,
+	);
 </script>
 
-<DropdownMenuPortal {...portalProps}>
-	<DropdownMenuPrimitive.Content
-		bind:ref
+{#if store.open}
+	<div
+		bind:this={ref}
 		data-slot="dropdown-menu-content"
-		{sideOffset}
-		{align}
+		role="menu"
+		data-state={store.open ? "open" : "closed"}
+		style={contentStyle}
 		class={cn(
-			"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/5 bg-popover text-popover-foreground dark:ring-foreground/10 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
-			className
+			"absolute z-50 min-w-48 overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 ring-foreground/5 bg-popover text-popover-foreground outline-none animate-zoom-in",
+			positionClasses.sideClass,
+			positionClasses.alignClass,
+			className,
 		)}
 		{...restProps}
-	/>
-</DropdownMenuPortal>
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte.d.ts

@@ -1,9 +1,13 @@
-import { type WithoutChildrenOrChild } from "../../../utils.js";
-import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-import type { ComponentProps } from "svelte";
-type $$ComponentProps = DropdownMenuPrimitive.ContentProps & {
-    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+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" | "inline-start" | "inline-end";
+    sideOffset?: number;
+    portalProps?: Record<string, unknown>;
+    class?: string;
+    children?: Snippet;
 };
 declare const DropdownMenuContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DropdownMenuContent = ReturnType<typeof DropdownMenuContent>;

package/dist/components/ui/dropdown-menu/dropdown-menu-context.svelte.d.ts

@@ -0,0 +1,26 @@
+export type DropdownMenuStore = {
+    open: boolean;
+    anchorId: string;
+    anchorEl: HTMLElement | null;
+    clickEvent: MouseEvent | null;
+    toggle: () => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    setAnchor: (el: HTMLElement | null) => void;
+};
+export type DropdownMenuSubStore = {
+    open: boolean;
+};
+export type DropdownRadioGroupStore = {
+    state: {
+        value: string;
+    };
+    setValue: (value: string) => void;
+};
+export declare function generateDropdownMenuId(): string;
+export declare function setDropdownMenuContext(store: DropdownMenuStore): DropdownMenuStore;
+export declare function getDropdownMenuContext(): DropdownMenuStore;
+export declare function setDropdownMenuSubContext(store: DropdownMenuSubStore): DropdownMenuSubStore;
+export declare function getDropdownMenuSubContext(): DropdownMenuSubStore;
+export declare function setDropdownMenuRadioGroupContext(ctx: DropdownRadioGroupStore): DropdownRadioGroupStore;
+export declare function getDropdownMenuRadioGroupContext(): DropdownRadioGroupStore;

package/dist/components/ui/dropdown-menu/dropdown-menu-context.svelte.js

@@ -0,0 +1,27 @@
+import { getContext, setContext } from "svelte";
+const DROPDOWN_MENU_CONTEXT_KEY = Symbol("dropdown-menu-context");
+const DROPDOWN_MENU_SUB_CONTEXT_KEY = Symbol("dropdown-menu-sub-context");
+const DROPDOWN_MENU_RADIO_GROUP_CONTEXT_KEY = Symbol("dropdown-menu-radio-group-context");
+let dropdownMenuIdCounter = 0;
+export function generateDropdownMenuId() {
+    dropdownMenuIdCounter += 1;
+    return `dropdown-menu-${dropdownMenuIdCounter.toString(36)}`;
+}
+export function setDropdownMenuContext(store) {
+    return setContext(DROPDOWN_MENU_CONTEXT_KEY, store);
+}
+export function getDropdownMenuContext() {
+    return getContext(DROPDOWN_MENU_CONTEXT_KEY);
+}
+export function setDropdownMenuSubContext(store) {
+    return setContext(DROPDOWN_MENU_SUB_CONTEXT_KEY, store);
+}
+export function getDropdownMenuSubContext() {
+    return getContext(DROPDOWN_MENU_SUB_CONTEXT_KEY);
+}
+export function setDropdownMenuRadioGroupContext(ctx) {
+    return setContext(DROPDOWN_MENU_RADIO_GROUP_CONTEXT_KEY, ctx);
+}
+export function getDropdownMenuRadioGroupContext() {
+    return getContext(DROPDOWN_MENU_RADIO_GROUP_CONTEXT_KEY);
+}

package/dist/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
-	import type { ComponentProps } from "svelte";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
+		ref = $bindable<HTMLDivElement | null>(null),
 		class: className,
 		inset,
+		children,
 		...restProps
-	}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
 		inset?: boolean;
+		children?: Snippet;
 	} = $props();
 </script>
 
-<DropdownMenuPrimitive.GroupHeading
-	bind:ref
+<div
+	bind:this={ref}
 	data-slot="dropdown-menu-group-heading"
 	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	class={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className)}
 	{...restProps}
-/>
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte.d.ts

@@ -1,7 +1,10 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-import type { ComponentProps } from "svelte";
-type $$ComponentProps = ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    class?: string;
     inset?: boolean;
+    children?: Snippet;
 };
 declare const DropdownMenuGroupHeading: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DropdownMenuGroupHeading = ReturnType<typeof DropdownMenuGroupHeading>;

package/dist/components/ui/dropdown-menu/dropdown-menu-group.svelte

@@ -1,7 +1,22 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+	let {
+		ref = $bindable<HTMLDivElement | null>(null),
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		children?: Snippet;
+	} = $props();
 </script>
 
-<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="dropdown-menu-group"
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/dropdown-menu/dropdown-menu-group.svelte.d.ts

@@ -1,4 +1,9 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-declare const DropdownMenuGroup: import("svelte").Component<DropdownMenuPrimitive.GroupProps, {}, "ref">;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    children?: Snippet;
+};
+declare const DropdownMenuGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DropdownMenuGroup = ReturnType<typeof DropdownMenuGroup>;
 export default DropdownMenuGroup;

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -1,27 +1,61 @@
 <script lang="ts">
 	import { cn } from "../../../utils.js";
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { getDropdownMenuContext } from "./dropdown-menu-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
+		ref = $bindable<HTMLButtonElement | null>(null),
 		class: className,
+		disabled,
 		inset,
 		variant = "default",
+		onSelect,
+		onclick,
+		children,
 		...restProps
-	}: DropdownMenuPrimitive.ItemProps & {
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
+		disabled?: boolean;
 		inset?: boolean;
 		variant?: "default" | "destructive";
+		onSelect?: (event: MouseEvent) => void;
+		onclick?: (event: MouseEvent) => void;
+		children?: Snippet;
 	} = $props();
+
+	const store = getDropdownMenuContext();
+
+	let highlighted = $state(false);
+
+	function handleSelect(event: MouseEvent) {
+		onclick?.(event);
+		onSelect?.(event);
+		store.closeMenu();
+	}
 </script>
 
-<DropdownMenuPrimitive.Item
-	bind:ref
+<button
+	bind:this={ref}
+	type="button"
+	role="menuitem"
+	tabindex="-1"
 	data-slot="dropdown-menu-item"
 	data-inset={inset}
 	data-variant={variant}
+	data-highlighted={highlighted || undefined}
+	{disabled}
+	onclick={handleSelect}
+	onfocus={() => (highlighted = true)}
+	onblur={() => (highlighted = false)}
+	onmouseenter={() => (highlighted = true)}
+	onmouseleave={() => (highlighted = false)}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		className
+		"group/dropdown-menu-item relative flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg px-2 py-1.5 text-sm outline-none select-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+		className,
 	)}
 	{...restProps}
-/>
+>
+	{@render children?.()}
+</button>

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte.d.ts

@@ -1,7 +1,14 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-type $$ComponentProps = DropdownMenuPrimitive.ItemProps & {
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLButtonAttributes & {
+    ref?: HTMLButtonElement | null;
+    class?: string;
+    disabled?: boolean;
     inset?: boolean;
     variant?: "default" | "destructive";
+    onSelect?: (event: MouseEvent) => void;
+    onclick?: (event: MouseEvent) => void;
+    children?: Snippet;
 };
 declare const DropdownMenuItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DropdownMenuItem = ReturnType<typeof DropdownMenuItem>;

package/dist/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
+		ref = $bindable<HTMLDivElement | null>(null),
 		class: className,
 		inset,
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
 		inset?: boolean;
+		children?: Snippet;
 	} = $props();
 </script>
 
@@ -17,8 +21,8 @@
 	bind:this={ref}
 	data-slot="dropdown-menu-label"
 	data-inset={inset}
-	class={cn("text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5 data-[inset]:pl-8", className)}
+	class={cn("px-2 py-1.5 text-sm font-medium text-foreground", className)}
 	{...restProps}
 >
 	{@render children?.()}
-</div>
+</div>

package/dist/components/ui/dropdown-menu/dropdown-menu-label.svelte.d.ts

@@ -1,7 +1,10 @@
-import { type WithElementRef } from "../../../utils.js";
+import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    class?: string;
     inset?: boolean;
+    children?: Snippet;
 };
 declare const DropdownMenuLabel: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DropdownMenuLabel = ReturnType<typeof DropdownMenuLabel>;

package/dist/components/ui/dropdown-menu/dropdown-menu-portal.svelte

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

package/dist/components/ui/dropdown-menu/dropdown-menu-portal.svelte.d.ts

@@ -1,3 +1,7 @@
-declare const DropdownMenuPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const DropdownMenuPortal: import("svelte").Component<$$ComponentProps, {}, "">;
 type DropdownMenuPortal = ReturnType<typeof DropdownMenuPortal>;
 export default DropdownMenuPortal;

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -1,16 +1,44 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { setDropdownMenuRadioGroupContext } from "./dropdown-menu-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
-		value = $bindable(),
+		ref = $bindable<HTMLDivElement | null>(null),
+		value = $bindable<string>(),
+		onValueChange,
+		children,
 		...restProps
-	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		value?: string;
+		onValueChange?: (value: string) => void;
+		children?: Snippet;
+	} = $props();
+
+	let groupState = $state({ value: value ?? "" });
+
+	$effect(() => {
+		if (value !== undefined && value !== groupState.value) {
+			groupState.value = value;
+		}
+	});
+
+	function setValue(next: string) {
+		if (next === groupState.value) return;
+		groupState.value = next;
+		value = next;
+		onValueChange?.(next);
+	}
+
+	setDropdownMenuRadioGroupContext({ state: groupState, setValue });
 </script>
 
-<DropdownMenuPrimitive.RadioGroup
-	bind:ref
-	bind:value
+<div
+	bind:this={ref}
+	role="radiogroup"
 	data-slot="dropdown-menu-radio-group"
 	{...restProps}
-/>
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte.d.ts

@@ -1,4 +1,11 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-declare const DropdownMenuRadioGroup: import("svelte").Component<DropdownMenuPrimitive.RadioGroupProps, {}, "ref" | "value">;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children?: Snippet;
+};
+declare const DropdownMenuRadioGroup: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
 type DropdownMenuRadioGroup = ReturnType<typeof DropdownMenuRadioGroup>;
 export default DropdownMenuRadioGroup;