@heyramzi/ui 0.0.0-stage → 1.53.1

package/src/shadcn/command/command-group.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Command as CommandPrimitive, useId } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		value,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	bind:ref
+	data-slot="command-group"
+	class={cn(
+		"text-foreground overflow-hidden px-1 py-1",
+		// WHY only titled groups: a heading is what makes a group a section, and a section needs a rule above it.
+
+		// Untitled groups inside a combobox stay seamless, and the ones that want a divider still ask for a Separator.
+		heading &&
+			"[&:not(:first-child)]:border-border/50 [&:not(:first-child)]:mt-1 [&:not(:first-child)]:border-t [&:not(:first-child)]:pt-1",
+		className,
+	)}
+	value={value ?? heading ?? `----${useId()}`}
+	{...restProps}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading
+			class="text-muted-foreground px-2.5 pt-2.5 pb-1.5 text-xs font-medium tracking-[0.09em] uppercase"
+		>
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>

package/src/shadcn/command/command-input.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+	import { MagnifyingGlass } from "phosphor-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		wrapperClass,
+		size = "default",
+		trailing,
+		value = $bindable(""),
+		...restProps
+		// WHY Omit: the HTML input `size` attribute is a character count, and the
+		// intersection with it collapses this union to never.
+	}: Omit<CommandPrimitive.InputProps, "size"> & {
+		/** Classes for the row that holds the glyph, the field and `trailing`. */
+		wrapperClass?: string;
+		/** `lg` is the standalone search header; `default` is a combobox popover. */
+		size?: "default" | "lg";
+		/** Right-aligned affordances: a dismiss hint, a close button, a scope chip. */
+		trailing?: Snippet;
+	} = $props();
+</script>
+
+<div
+	data-slot="command-input-wrapper"
+	class={cn(
+		"border-border/70 flex items-center gap-2.5 border-b",
+		size === "lg" ? "px-4" : "px-3",
+		wrapperClass,
+	)}
+>
+	<MagnifyingGlass size={size === "lg" ? 18 : 16} class="text-muted-foreground shrink-0" />
+	<CommandPrimitive.Input
+		data-slot="command-input"
+		class={cn(
+			// WHY the caret: it is the one part of a search field the browser draws, and its default belongs to no theme.
+
+			// Brand indigo on the blinking cursor is the cheapest signal that the field was designed. WHY the ring is refused here and nowhere else: the craft layer draws
+
+			// one focus ring on every `input` at specificity zero, and this field has no edge of its own to redraw.
+
+			// It got a rounded accent box floating inside a popover that was already the focused surface, on every combobox and on the palette itself.
+
+			// The caret carries focus instead, which is why it is brand indigo two lines down.
+			"focus-visible:shadow-none",
+			"caret-brand-indigo placeholder:text-muted-foreground/70 w-full bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+			// A combobox popover's search line is 36px, measured; `lg` is the
+			// standalone palette header and keeps its own larger rhythm.
+			size === "lg" ? "py-3.5 text-[15px]" : "py-2 text-[13px]",
+			className,
+		)}
+		bind:ref
+		{...restProps}
+		bind:value
+	/>
+	{#if trailing}
+		<div class="flex shrink-0 items-center gap-1.5">
+			{@render trailing()}
+		</div>
+	{/if}
+</div>

package/src/shadcn/command/command-item.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+	import { Check } from "phosphor-svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
+</script>
+
+<CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		// 32px at 13px inside a 6px inset is the measured density of the product this kit names as its reference (31 Aug 2026).
+
+		// 36px at 14px read as one notch looser on every menu and palette in the app. WHY the keyboard cursor reads as a lit plate rather than a tint: accent
+
+		// at half strength is a two-percent lightness step on the dark surface, so the one row the arrow keys are on was the hardest row to find.
+
+		// A foreground wash plus an inset hairline works in both modes from one rule.
+		"group/command-item data-selected:bg-foreground/6 data-selected:ring-foreground/10 data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-8 cursor-default items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-[13px] outline-hidden transition-colors duration-[var(--duration-fast)] select-none active:translate-y-px data-selected:ring-1 data-selected:ring-inset data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<!-- WHY hidden rather than transparent: rendered at zero opacity it still took 16px and the row's `ml-auto` on every list that never sets `data-checked`, -->
+	<!-- which is what pulled the palette's right-hand column out of alignment. -->
+	<Check
+		size={16}
+		class="cn-command-item-indicator group-data-[checked=true]/command-item:block ml-auto hidden"
+	/>
+</CommandPrimitive.Item>

package/src/shadcn/command/command-link-item.svelte

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

package/src/shadcn/command/command-list.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
+</script>
+
+<CommandPrimitive.List
+	bind:ref
+	data-slot="command-list"
+	class={cn(
+		"scrollbar-thin max-h-[420px] scroll-py-1 outline-none overflow-x-hidden overflow-y-auto px-1.5 py-1",
+		className,
+	)}
+	{...restProps}
+/>

package/src/shadcn/command/command-loading.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
+</script>
+
+<CommandPrimitive.Loading bind:ref {...restProps} />

package/src/shadcn/command/command-separator.svelte

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

package/src/shadcn/command/command-shortcut.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="command-shortcut"
+	class={cn(
+		"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>

package/src/shadcn/command/command.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { Command as CommandPrimitive } from "bits-ui";
+
+	export type CommandRootApi = CommandPrimitive.Root;
+
+	let {
+		api = $bindable(null),
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps & {
+		api?: CommandRootApi | null;
+	} = $props();
+</script>
+
+<CommandPrimitive.Root
+	bind:this={api}
+	bind:value
+	bind:ref
+	data-slot="command"
+	class={cn(
+		"bg-popover text-popover-foreground rounded-xl! flex size-full flex-col overflow-hidden",
+		className,
+	)}
+	{...restProps}
+/>

package/src/shadcn/command/index.ts

@@ -0,0 +1,40 @@
+import { computeCommandScore } from "bits-ui";
+import Root from "./command.svelte";
+import Loading from "./command-loading.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";
+
+// The scorer Command uses by default, for a custom `filter` that wants to rank its own words.
+export {
+  computeCommandScore,
+  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/src/shadcn/context-menu/context-menu-checkbox-item.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
+	import type { Snippet } from "svelte";
+	import { Check as CheckIcon } from "phosphor-svelte";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		inset,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+		inset?: boolean;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="context-menu-checkbox-item"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_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,
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span class="absolute right-2 pointer-events-none">
+			{#if checked}
+				<CheckIcon />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</ContextMenuPrimitive.CheckboxItem>

package/src/shadcn/context-menu/context-menu-content.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+	import ContextMenuPortal from "./context-menu-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		portalProps,
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
+	} = $props();
+</script>
+
+<ContextMenuPortal {...portalProps}>
+	<ContextMenuPrimitive.Content
+		bind:ref
+		data-slot="context-menu-content"
+		class={cn(
+			"t-dropdown ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-xl p-1 shadow-raised ring-1 z-50 overflow-x-hidden overflow-y-auto outline-none",
+			className,
+		)}
+		{...restProps}
+	/>
+</ContextMenuPortal>

package/src/shadcn/context-menu/context-menu-group-heading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: ContextMenuPrimitive.GroupHeadingProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="context-menu-group-heading"
+	data-inset={inset}
+	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-inset:ps-8", className)}
+	{...restProps}
+/>

package/src/shadcn/context-menu/context-menu-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.GroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.Group bind:ref data-slot="context-menu-group" {...restProps} />

package/src/shadcn/context-menu/context-menu-item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		variant = "default",
+		...restProps
+	}: ContextMenuPrimitive.ItemProps & {
+		inset?: boolean;
+		variant?: "default" | "destructive";
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.Item
+	bind:ref
+	data-slot="context-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	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 focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item 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,
+	)}
+	{...restProps}
+/>

package/src/shadcn/context-menu/context-menu-label.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="context-menu-label"
+	data-inset={inset}
+	class={cn(
+		"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-inset:pl-8",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/context-menu/context-menu-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { ...restProps }: ContextMenuPrimitive.PortalProps = $props();
+</script>
+
+<ContextMenuPrimitive.Portal {...restProps} />

package/src/shadcn/context-menu/context-menu-radio-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		...restProps
+	}: ContextMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="context-menu-radio-group"
+	{...restProps}
+/>

package/src/shadcn/context-menu/context-menu-radio-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "@heyramzi/utils";
+	import { Check as CheckIcon } from "phosphor-svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<ContextMenuPrimitive.RadioItemProps> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="context-menu-radio-item"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_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,
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span class="absolute right-2 pointer-events-none">
+			{#if checked}
+				<CheckIcon />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</ContextMenuPrimitive.RadioItem>

package/src/shadcn/context-menu/context-menu-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<ContextMenuPrimitive.Separator
+	bind:ref
+	data-slot="context-menu-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>

package/src/shadcn/context-menu/context-menu-shortcut.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="context-menu-shortcut"
+	class={cn(
+		"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/context-menu/context-menu-sub-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+	import ContextMenuPortal from "./context-menu-portal.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.SubContentProps = $props();
+</script>
+
+<!-- Portalled: the parent Content scrolls its overflow, so a submenu drawn
+     inside it is clipped away, open and invisible. -->
+<ContextMenuPortal>
+	<ContextMenuPrimitive.SubContent
+		bind:ref
+		data-slot="context-menu-sub-content"
+		class={cn(
+			"t-dropdown ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-xl p-1 shadow-raised ring-1 z-50",
+			className,
+		)}
+		{...restProps}
+	/>
+</ContextMenuPortal>

package/src/shadcn/context-menu/context-menu-sub-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "@heyramzi/utils";
+	import { CaretRight as CaretRightIcon } from "phosphor-svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="context-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<CaretRightIcon class="ml-auto" />
+</ContextMenuPrimitive.SubTrigger>

package/src/shadcn/context-menu/context-menu-sub.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.SubProps = $props();
+</script>
+
+<ContextMenuPrimitive.Sub bind:open {...restProps} />

package/src/shadcn/context-menu/context-menu-trigger.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.TriggerProps = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger
+	bind:ref
+	data-slot="context-menu-trigger"
+	class={cn("cn-context-menu-trigger select-none", className)}
+	{...restProps}
+/>

package/src/shadcn/context-menu/context-menu.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.RootProps = $props();
+</script>
+
+<ContextMenuPrimitive.Root bind:open {...restProps} />