@tanglemedia/svelte-starter-ui-shadcn 0.0.1

package/dist/lib/components/ui/carousel/carousel.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import {
+		type CarouselAPI,
+		type CarouselProps,
+		type EmblaContext,
+		setEmblaContext,
+	} from "./context.js";
+	import { cn } from "../../../utils.js";
+
+	let {
+		opts = {},
+		plugins = [],
+		setApi = () => {},
+		orientation = "horizontal",
+		class: className,
+		children,
+		...restProps
+	}: CarouselProps = $props();
+
+	let carouselState = $state<EmblaContext>({
+		api: undefined,
+		scrollPrev,
+		scrollNext,
+		orientation,
+		canScrollNext: false,
+		canScrollPrev: false,
+		handleKeyDown,
+		options: opts,
+		plugins,
+		onInit,
+		scrollSnaps: [],
+		selectedIndex: 0,
+		scrollTo,
+	});
+
+	setEmblaContext(carouselState);
+
+	function scrollPrev() {
+		carouselState.api?.scrollPrev();
+	}
+	function scrollNext() {
+		carouselState.api?.scrollNext();
+	}
+	function scrollTo(index: number, jump?: boolean) {
+		carouselState.api?.scrollTo(index, jump);
+	}
+
+	function onSelect(api: CarouselAPI) {
+		if (!api) return;
+		carouselState.canScrollPrev = api.canScrollPrev();
+		carouselState.canScrollNext = api.canScrollNext();
+		carouselState.selectedIndex = api.selectedScrollSnap();
+	}
+
+	$effect(() => {
+		if (carouselState.api) {
+			onSelect(carouselState.api);
+			carouselState.api.on("select", onSelect);
+			carouselState.api.on("reInit", onSelect);
+		}
+	});
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			scrollPrev();
+		} else if (e.key === "ArrowRight") {
+			e.preventDefault();
+			scrollNext();
+		}
+	}
+
+	$effect(() => {
+		setApi(carouselState.api);
+	});
+
+	function onInit(event: CustomEvent<CarouselAPI>) {
+		carouselState.api = event.detail;
+
+		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
+	}
+
+	$effect(() => {
+		return () => {
+			carouselState.api?.off("select", onSelect);
+		};
+	});
+</script>
+
+<div class={cn("relative", className)} role="region" aria-roledescription="carousel" {...restProps}>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/carousel/carousel.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type CarouselProps } from "./context.js";
+declare const Carousel: import("svelte").Component<CarouselProps, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/lib/components/ui/carousel/context.d.ts

@@ -0,0 +1,32 @@
+import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
+import type emblaCarouselSvelte from "embla-carousel-svelte";
+import type { WithElementRef } from "bits-ui";
+import type { HTMLAttributes } from "svelte/elements";
+export type CarouselAPI = NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (evt: CustomEvent<infer CarouselAPI>) => void ? CarouselAPI : never;
+type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
+export type CarouselOptions = EmblaCarouselConfig["options"];
+export type CarouselPlugins = EmblaCarouselConfig["plugins"];
+export type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugins;
+    setApi?: (api: CarouselAPI | undefined) => void;
+    orientation?: "horizontal" | "vertical";
+} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
+export type EmblaContext = {
+    api: CarouselAPI | undefined;
+    orientation: "horizontal" | "vertical";
+    scrollNext: () => void;
+    scrollPrev: () => void;
+    canScrollNext: boolean;
+    canScrollPrev: boolean;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    options: CarouselOptions;
+    plugins: CarouselPlugins;
+    onInit: (e: CustomEvent<CarouselAPI>) => void;
+    scrollTo: (index: number, jump?: boolean) => void;
+    scrollSnaps: number[];
+    selectedIndex: number;
+};
+export declare function setEmblaContext(config: EmblaContext): EmblaContext;
+export declare function getEmblaContext(name?: string): EmblaContext;
+export {};

package/dist/lib/components/ui/carousel/context.js

@@ -0,0 +1,12 @@
+import { getContext, hasContext, setContext } from "svelte";
+const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
+export function setEmblaContext(config) {
+    setContext(EMBLA_CAROUSEL_CONTEXT, config);
+    return config;
+}
+export function getEmblaContext(name = "This component") {
+    if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
+        throw new Error(`${name} must be used within a <Carousel.Root> component`);
+    }
+    return getContext(EMBLA_CAROUSEL_CONTEXT);
+}

package/dist/lib/components/ui/carousel/index.d.ts

@@ -0,0 +1,6 @@
+import Root from "./carousel.svelte";
+import Content from "./carousel-content.svelte";
+import Item from "./carousel-item.svelte";
+import Previous from "./carousel-previous.svelte";
+import Next from "./carousel-next.svelte";
+export { Root, Content, Item, Previous, Next, Root as Carousel, Content as CarouselContent, Item as CarouselItem, Previous as CarouselPrevious, Next as CarouselNext, };

package/dist/lib/components/ui/carousel/index.js

@@ -0,0 +1,8 @@
+import Root from "./carousel.svelte";
+import Content from "./carousel-content.svelte";
+import Item from "./carousel-item.svelte";
+import Previous from "./carousel-previous.svelte";
+import Next from "./carousel-next.svelte";
+export { Root, Content, Item, Previous, Next, 
+//
+Root as Carousel, Content as CarouselContent, Item as CarouselItem, Previous as CarouselPrevious, Next as CarouselNext, };

package/dist/lib/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import Check from "@lucide/svelte/icons/check";
+	import Minus from "@lucide/svelte/icons/minus";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	class={cn(
+		"border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:ref
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span class="flex items-center justify-center text-current">
+			{#if indeterminate}
+				<Minus class="size-4" />
+			{:else}
+				<Check class={cn("size-4", !checked && "text-transparent")} />
+			{/if}
+		</span>
+	{/snippet}
+</CheckboxPrimitive.Root>

package/dist/lib/components/ui/checkbox/checkbox.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Checkbox as CheckboxPrimitive } from "bits-ui";
+declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/lib/components/ui/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./checkbox.svelte";
+export { Root, Root as Checkbox, };

package/dist/lib/components/ui/checkbox/index.js

@@ -0,0 +1,4 @@
+import Root from "./checkbox.svelte";
+export { Root, 
+//
+Root as Checkbox, };

package/dist/lib/components/ui/collapsible/index.d.ts

@@ -0,0 +1,5 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+declare const Root: typeof CollapsiblePrimitive.Root;
+declare const Trigger: typeof CollapsiblePrimitive.Trigger;
+declare const Content: typeof CollapsiblePrimitive.Content;
+export { Root, Content, Trigger, Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger, };

package/dist/lib/components/ui/collapsible/index.js

@@ -0,0 +1,7 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+const Content = CollapsiblePrimitive.Content;
+export { Root, Content, Trigger, 
+//
+Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger, };

package/dist/lib/components/ui/command/command-dialog.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import {
+		Command as CommandPrimitive,
+		Dialog as DialogPrimitive,
+		type WithoutChildrenOrChild,
+	} from "bits-ui";
+	import type { Snippet } from "svelte";
+	import Command from "./command.svelte";
+	import * as Dialog from "../dialog/index.js";
+
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(""),
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+		} = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
+		<Command
+			class="[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
+			{...restProps}
+			bind:value
+			bind:ref
+			{children}
+		/>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/lib/components/ui/command/command-dialog.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Command as CommandPrimitive, Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import type { Snippet } from "svelte";
+type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+    portalProps?: DialogPrimitive.PortalProps;
+    children: Snippet;
+};
+declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
+type CommandDialog = ReturnType<typeof CommandDialog>;
+export default CommandDialog;

package/dist/lib/components/ui/command/command-empty.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty bind:ref class={cn("py-6 text-center text-sm", className)} {...restProps} />

package/dist/lib/components/ui/command/command-empty.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from "bits-ui";
+declare const CommandEmpty: import("svelte").Component<CommandPrimitive.EmptyProps, {}, "ref">;
+type CommandEmpty = ReturnType<typeof CommandEmpty>;
+export default CommandEmpty;

package/dist/lib/components/ui/command/command-group.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	class={cn("text-foreground overflow-hidden p-1", className)}
+	bind:ref
+	{...restProps}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading
+			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+		>
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>

package/dist/lib/components/ui/command/command-group.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Command as CommandPrimitive } from "bits-ui";
+type $$ComponentProps = CommandPrimitive.GroupProps & {
+    heading?: string;
+};
+declare const CommandGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CommandGroup = ReturnType<typeof CommandGroup>;
+export default CommandGroup;

package/dist/lib/components/ui/command/command-input.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import Search from "@lucide/svelte/icons/search";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
+</script>
+
+<div class="flex items-center border-b px-3" data-command-input-wrapper="">
+	<Search class="mr-2 size-4 shrink-0 opacity-50" />
+	<CommandPrimitive.Input
+		class={cn(
+			"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className
+		)}
+		bind:ref
+		bind:value
+		{...restProps}
+	/>
+</div>

package/dist/lib/components/ui/command/command-input.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from "bits-ui";
+declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "ref" | "value">;
+type CommandInput = ReturnType<typeof CommandInput>;
+export default CommandInput;

package/dist/lib/components/ui/command/command-item.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
+</script>
+
+<CommandPrimitive.Item
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		className
+	)}
+	bind:ref
+	{...restProps}
+/>

package/dist/lib/components/ui/command/command-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from "bits-ui";
+declare const CommandItem: import("svelte").Component<CommandPrimitive.ItemProps, {}, "ref">;
+type CommandItem = ReturnType<typeof CommandItem>;
+export default CommandItem;

package/dist/lib/components/ui/command/command-link-item.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.LinkItemProps = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		className
+	)}
+	bind:ref
+	{...restProps}
+/>

package/dist/lib/components/ui/command/command-link-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from "bits-ui";
+declare const CommandLinkItem: import("svelte").Component<CommandPrimitive.LinkItemProps, {}, "ref">;
+type CommandLinkItem = ReturnType<typeof CommandLinkItem>;
+export default CommandLinkItem;

package/dist/lib/components/ui/command/command-list.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
+</script>
+
+<CommandPrimitive.List
+	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+	bind:ref
+	{...restProps}
+/>

package/dist/lib/components/ui/command/command-list.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from "bits-ui";
+declare const CommandList: import("svelte").Component<CommandPrimitive.ListProps, {}, "ref">;
+type CommandList = ReturnType<typeof CommandList>;
+export default CommandList;

package/dist/lib/components/ui/command/command-separator.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
+</script>
+
+<CommandPrimitive.Separator bind:ref class={cn("bg-border -mx-1 h-px", className)} {...restProps} />

package/dist/lib/components/ui/command/command-separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from "bits-ui";
+declare const CommandSeparator: import("svelte").Component<CommandPrimitive.SeparatorProps, {}, "ref">;
+type CommandSeparator = ReturnType<typeof CommandSeparator>;
+export default CommandSeparator;

package/dist/lib/components/ui/command/command-shortcut.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+	bind:this={ref}
+>
+	{@render children?.()}
+</span>

package/dist/lib/components/ui/command/command-shortcut.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "bits-ui";
+import type { HTMLAttributes } from "svelte/elements";
+declare const CommandShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type CommandShortcut = ReturnType<typeof CommandShortcut>;
+export default CommandShortcut;

package/dist/lib/components/ui/command/command.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		value = $bindable(""),
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps = $props();
+</script>
+
+<CommandPrimitive.Root
+	class={cn(
+		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+		className
+	)}
+	bind:ref
+	bind:value
+	{...restProps}
+/>

package/dist/lib/components/ui/command/command.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from "bits-ui";
+declare const Command: import("svelte").Component<CommandPrimitive.RootProps, {}, "ref" | "value">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/lib/components/ui/command/index.d.ts

@@ -0,0 +1,13 @@
+import { Command as CommandPrimitive } from "bits-ui";
+import Root from "./command.svelte";
+import Dialog from "./command-dialog.svelte";
+import Empty from "./command-empty.svelte";
+import Group from "./command-group.svelte";
+import Item from "./command-item.svelte";
+import Input from "./command-input.svelte";
+import List from "./command-list.svelte";
+import Separator from "./command-separator.svelte";
+import Shortcut from "./command-shortcut.svelte";
+import LinkItem from "./command-link-item.svelte";
+declare const Loading: typeof CommandPrimitive.Loading;
+export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading, };

package/dist/lib/components/ui/command/index.js

@@ -0,0 +1,15 @@
+import { Command as CommandPrimitive } from "bits-ui";
+import Root from "./command.svelte";
+import Dialog from "./command-dialog.svelte";
+import Empty from "./command-empty.svelte";
+import Group from "./command-group.svelte";
+import Item from "./command-item.svelte";
+import Input from "./command-input.svelte";
+import List from "./command-list.svelte";
+import Separator from "./command-separator.svelte";
+import Shortcut from "./command-shortcut.svelte";
+import LinkItem from "./command-link-item.svelte";
+const Loading = CommandPrimitive.Loading;
+export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, 
+//
+Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading, };

package/dist/lib/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import Check from "@lucide/svelte/icons/check";
+	import Minus from "@lucide/svelte/icons/minus";
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if indeterminate}
+				<Minus class="size-4" />
+			{:else}
+				<Check class={cn("size-4", !checked && "text-transparent")} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</ContextMenuPrimitive.CheckboxItem>

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

@@ -0,0 +1,8 @@
+import { ContextMenu as ContextMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import type { Snippet } from "svelte";
+type $$ComponentProps = WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+    children?: Snippet;
+};
+declare const ContextMenuCheckboxItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;
+type ContextMenuCheckboxItem = ReturnType<typeof ContextMenuCheckboxItem>;
+export default ContextMenuCheckboxItem;

package/dist/lib/components/ui/context-menu/context-menu-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: ContextMenuPrimitive.ContentProps & {
+		portalProps?: ContextMenuPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.Portal {...portalProps}>
+	<ContextMenuPrimitive.Content
+		class={cn(
+			"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+			className
+		)}
+		{...restProps}
+		bind:ref
+	/>
+</ContextMenuPrimitive.Portal>

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

@@ -0,0 +1,7 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+type $$ComponentProps = ContextMenuPrimitive.ContentProps & {
+    portalProps?: ContextMenuPrimitive.PortalProps;
+};
+declare const ContextMenuContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ContextMenuContent = ReturnType<typeof ContextMenuContent>;
+export default ContextMenuContent;