negodesign 0.0.71 → 0.0.72

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "../../../utils.js";
+	import type { ComponentProps, Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 	import DrawerPortal from "./drawer-portal.svelte";
 	import DrawerOverlay from "./drawer-overlay.svelte";
-	import { cn } from "../../../utils.js";
-	import type { ComponentProps } from "svelte";
-	import type { WithoutChildrenOrChild } from "../../../utils.js";
+	import { useDrawerContext } from "./drawer.svelte";
 
 	let {
 		ref = $bindable(null),
@@ -12,22 +12,71 @@
 		portalProps,
 		children,
 		...restProps
-	}: DrawerPrimitive.ContentProps & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
+		children?: Snippet;
 	} = $props();
+
+	const drawer = useDrawerContext();
+
+	$effect(() => {
+		if (!drawer.open) return;
+		const previous = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		const onKeydown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") drawer.setOpen(false);
+		};
+		document.addEventListener("keydown", onKeydown);
+		return () => {
+			document.body.style.overflow = previous;
+			document.removeEventListener("keydown", onKeydown);
+		};
+	});
+
+	const directionClasses = $derived(
+		drawer.direction === "left" || drawer.direction === "right"
+			? cn(
+					"inset-y-0 w-full max-w-sm",
+					drawer.direction === "left"
+						? "left-0 border-r rounded-r-xl"
+						: "right-0 border-l rounded-l-xl"
+				)
+			: cn(
+					"inset-x-0 h-auto max-h-[80vh]",
+					drawer.direction === "bottom"
+						? "bottom-0 mt-24 rounded-t-xl border-t animate-slide-in-up"
+						: "top-0 mb-24 rounded-b-xl border-b animate-slide-in-down"
+				)
+	);
 </script>
 
-<DrawerPortal {...portalProps}>
-	<DrawerOverlay />
-	<DrawerPrimitive.Content
-		bind:ref
-		data-slot="drawer-content"
-		class={cn("before:bg-popover text-popover-foreground before:border-border relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50", className)}
-		{...restProps}
-	>
+{#if drawer.open}
+	<DrawerPortal {...portalProps}>
+		<DrawerOverlay />
 		<div
-			class="bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-muted mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
-		></div>
-		{@render children?.()}
-	</DrawerPrimitive.Content>
-</DrawerPortal>
+			bind:this={ref}
+			data-slot="drawer-content"
+			data-state={drawer.open ? "open" : "closed"}
+			data-vaul-drawer-direction={drawer.direction}
+			class={cn(
+				"bg-background text-foreground fixed z-50 flex flex-col border p-4 group/drawer-content",
+				directionClasses,
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				aria-hidden="true"
+				class={cn(
+					"bg-muted mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full",
+					drawer.direction === "bottom" || drawer.direction === "top"
+						? "block"
+						: "hidden"
+				)}
+			></div>
+			<div class="flex h-full w-full flex-col">
+				{@render children?.()}
+			</div>
+		</div>
+	</DrawerPortal>
+{/if}

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

@@ -1,9 +1,10 @@
-import { Drawer as DrawerPrimitive } from "vaul-svelte";
+import { type WithElementRef, type WithoutChildrenOrChild } from "../../../utils.js";
+import type { ComponentProps, Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import DrawerPortal from "./drawer-portal.svelte";
-import type { ComponentProps } from "svelte";
-import type { WithoutChildrenOrChild } from "../../../utils.js";
-type $$ComponentProps = DrawerPrimitive.ContentProps & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
+    children?: Snippet;
 };
 declare const DrawerContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DrawerContent = ReturnType<typeof DrawerContent>;

package/dist/components/ui/drawer/drawer-description.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		children,
 		...restProps
-	}: DrawerPrimitive.DescriptionProps = $props();
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
 </script>
 
-<DrawerPrimitive.Description
-	bind:ref
+<p
+	bind:this={ref}
 	data-slot="drawer-description"
 	class={cn("text-muted-foreground text-sm", className)}
 	{...restProps}
-/>
+>
+	{@render children?.()}
+</p>

package/dist/components/ui/drawer/drawer-description.svelte.d.ts

@@ -1,4 +1,5 @@
-import { Drawer as DrawerPrimitive } from "vaul-svelte";
-declare const DrawerDescription: import("svelte").Component<DrawerPrimitive.DescriptionProps, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const DrawerDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLParagraphElement>>, {}, "ref">;
 type DrawerDescription = ReturnType<typeof DrawerDescription>;
 export default DrawerDescription;

package/dist/components/ui/drawer/drawer-nested.svelte

@@ -1,12 +1,35 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { type Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { setDrawerContext, useDrawerContext } from "./drawer.svelte";
 
 	let {
-		shouldScaleBackground = true,
 		open = $bindable(false),
-		activeSnapPoint = $bindable(null),
+		direction = "bottom",
+		class: className,
+		children,
 		...restProps
-	}: DrawerPrimitive.RootProps = $props();
+	}: HTMLAttributes<HTMLDivElement> & {
+		open?: boolean;
+		direction?: "top" | "right" | "bottom" | "left";
+		children?: Snippet;
+	} = $props();
+
+	useDrawerContext();
+
+	setDrawerContext({
+		get open() {
+			return open;
+		},
+		get direction() {
+			return direction;
+		},
+		setOpen(value: boolean) {
+			open = value;
+		},
+	});
 </script>
 
-<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />
+<div data-slot="drawer-nested" class={className} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/ui/drawer/drawer-nested.svelte.d.ts

@@ -1,3 +1,10 @@
-declare const DrawerNested: import("svelte").Component<import("vaul-svelte").DrawerRootPropsWithoutHTML, {}, "open" | "activeSnapPoint">;
+import { type Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    open?: boolean;
+    direction?: "top" | "right" | "bottom" | "left";
+    children?: Snippet;
+};
+declare const DrawerNested: import("svelte").Component<$$ComponentProps, {}, "open">;
 type DrawerNested = ReturnType<typeof DrawerNested>;
 export default DrawerNested;

package/dist/components/ui/drawer/drawer-overlay.svelte

@@ -1,17 +1,26 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useDrawerContext } from "./drawer.svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		...restProps
-	}: DrawerPrimitive.OverlayProps = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const drawer = useDrawerContext();
 </script>
 
-<DrawerPrimitive.Overlay
-	bind:ref
-	data-slot="drawer-overlay"
-	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
-	{...restProps}
-/>
+{#if drawer.open}
+	<div
+		bind:this={ref}
+		data-slot="drawer-overlay"
+		class={cn(
+			"bg-black/60 fixed inset-0 z-40 animate-fade-in",
+			className
+		)}
+		onclick={() => drawer.setOpen(false)}
+		{...restProps}
+	></div>
+{/if}

package/dist/components/ui/drawer/drawer-overlay.svelte.d.ts

@@ -1,4 +1,5 @@
-import { Drawer as DrawerPrimitive } from "vaul-svelte";
-declare const DrawerOverlay: import("svelte").Component<DrawerPrimitive.OverlayProps, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const DrawerOverlay: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type DrawerOverlay = ReturnType<typeof DrawerOverlay>;
 export default DrawerOverlay;

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

@@ -1,7 +1,20 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	let { ...restProps }: DrawerPrimitive.PortalProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<DrawerPrimitive.Portal {...restProps} />
+<div
+	bind:this={ref}
+	data-slot="drawer-portal"
+	class={cn("contents", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/drawer/drawer-portal.svelte.d.ts

@@ -1,3 +1,5 @@
-declare const DrawerPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const DrawerPortal: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
 type DrawerPortal = ReturnType<typeof DrawerPortal>;
 export default DrawerPortal;

package/dist/components/ui/drawer/drawer-title.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		children,
 		...restProps
-	}: DrawerPrimitive.TitleProps = $props();
+	}: WithElementRef<HTMLAttributes<HTMLHeadingElement>> = $props();
 </script>
 
-<DrawerPrimitive.Title
-	bind:ref
+<h2
+	bind:this={ref}
 	data-slot="drawer-title"
 	class={cn("text-foreground text-base font-medium", className)}
 	{...restProps}
-/>
+>
+	{@render children?.()}
+</h2>

package/dist/components/ui/drawer/drawer-title.svelte.d.ts

@@ -1,4 +1,5 @@
-import { Drawer as DrawerPrimitive } from "vaul-svelte";
-declare const DrawerTitle: import("svelte").Component<DrawerPrimitive.TitleProps, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const DrawerTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLHeadingElement>>, {}, "ref">;
 type DrawerTitle = ReturnType<typeof DrawerTitle>;
 export default DrawerTitle;

package/dist/components/ui/drawer/drawer-trigger.svelte

@@ -1,7 +1,43 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { useDrawerContext } from "./drawer.svelte";
 
-	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.TriggerProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		onclick,
+		...restProps
+	}: HTMLButtonAttributes & {
+		children?: Snippet;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		ref?: HTMLButtonElement | null;
+	} = $props();
+
+	const drawer = useDrawerContext();
+
+	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		onclick?.(event);
+		drawer.setOpen(true);
+	}
+
+	const triggerProps = $derived({
+		...restProps,
+		class: className,
+		"data-slot": "drawer-trigger",
+		"data-state": drawer.open ? "open" : "closed",
+		"aria-expanded": drawer.open,
+		type: "button" as const,
+		onclick: handleClick,
+	});
 </script>
 
-<DrawerPrimitive.Trigger bind:ref data-slot="drawer-trigger" {...restProps} />
+{#if child}
+	{@render child({ props: triggerProps })}
+{:else}
+	<button bind:this={ref} {...triggerProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/ui/drawer/drawer-trigger.svelte.d.ts

@@ -1,4 +1,12 @@
-import { Drawer as DrawerPrimitive } from "vaul-svelte";
-declare const DrawerTrigger: import("svelte").Component<DrawerPrimitive.TriggerProps, {}, "ref">;
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLButtonAttributes & {
+    children?: Snippet;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    ref?: HTMLButtonElement | null;
+};
+declare const DrawerTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DrawerTrigger = ReturnType<typeof DrawerTrigger>;
 export default DrawerTrigger;

package/dist/components/ui/drawer/drawer.svelte

@@ -1,12 +1,75 @@
+<script lang="ts" module>
+	import { getContext, setContext } from "svelte";
+
+	export type DrawerDirection = "top" | "right" | "bottom" | "left";
+
+	export type DrawerContext = {
+		get open(): boolean;
+		get direction(): DrawerDirection;
+		setOpen: (open: boolean) => void;
+	};
+
+	const DRAWER_CONTEXT_KEY = "scn-drawer";
+
+	export function setDrawerContext(ctx: DrawerContext): DrawerContext {
+		return setContext(DRAWER_CONTEXT_KEY, ctx);
+	}
+
+	export function useDrawerContext(): DrawerContext {
+		return getContext<DrawerContext>(DRAWER_CONTEXT_KEY);
+	}
+</script>
+
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
-		shouldScaleBackground = true,
 		open = $bindable(false),
+		onOpenChange = () => {},
+		direction = "bottom",
+		shouldScaleBackground = false,
+		// eslint-disable-next-line no-useless-assignment
 		activeSnapPoint = $bindable(null),
+		snapPoints,
+		closeThreshold,
+		handleOnly = false,
+		noBodyStyles = false,
+		class: className,
+		children,
 		...restProps
-	}: DrawerPrimitive.RootProps = $props();
+	}: HTMLAttributes<HTMLDivElement> & {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		direction?: DrawerDirection;
+		shouldScaleBackground?: boolean;
+		activeSnapPoint?: number | string | null;
+		snapPoints?: (number | string)[];
+		closeThreshold?: number;
+		handleOnly?: boolean;
+		noBodyStyles?: boolean;
+		children?: Snippet;
+	} = $props();
+
+	setDrawerContext({
+		get open() {
+			return open;
+		},
+		get direction() {
+			return direction;
+		},
+		setOpen(value: boolean) {
+			open = value;
+			onOpenChange(value);
+		},
+	});
 </script>
 
-<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />
+<div
+	data-slot="drawer-root"
+	class={cn("contents", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/drawer/drawer.svelte.d.ts

@@ -1,3 +1,25 @@
-declare const Drawer: import("svelte").Component<import("vaul-svelte").DrawerRootPropsWithoutHTML, {}, "open" | "activeSnapPoint">;
+export type DrawerDirection = "top" | "right" | "bottom" | "left";
+export type DrawerContext = {
+    get open(): boolean;
+    get direction(): DrawerDirection;
+    setOpen: (open: boolean) => void;
+};
+export declare function setDrawerContext(ctx: DrawerContext): DrawerContext;
+export declare function useDrawerContext(): DrawerContext;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    direction?: DrawerDirection;
+    shouldScaleBackground?: boolean;
+    activeSnapPoint?: number | string | null;
+    snapPoints?: (number | string)[];
+    closeThreshold?: number;
+    handleOnly?: boolean;
+    noBodyStyles?: boolean;
+    children?: Snippet;
+};
+declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open" | "activeSnapPoint">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

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

@@ -1,16 +1,26 @@
 <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),
-		value = $bindable([]),
+		ref = $bindable<HTMLDivElement | null>(null),
+		// eslint-disable-next-line no-useless-assignment
+		value = $bindable<(string | number)[]>([]),
+		children,
 		...restProps
-	}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		value?: (string | number)[];
+		children?: Snippet;
+	} = $props();
 </script>
 
-<DropdownMenuPrimitive.CheckboxGroup
-	bind:ref
-	bind:value
+<div
+	bind:this={ref}
+	role="group"
+	aria-label="checkbox-group"
 	data-slot="dropdown-menu-checkbox-group"
 	{...restProps}
-/>
+>
+	{@render children?.()}
+</div>

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

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

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>