@svadmin/ui 0.3.0 → 0.4.1

package/src/components/fields/MultiSelectField.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Badge } from '../ui/badge/index.js';
+
+  let { value } = $props<{
+    value: (string | number)[] | null | undefined;
+    options?: { label: string; value: string | number }[];
+  }>();
+
+  const items = $derived(Array.isArray(value) ? value : []);
+</script>
+
+{#if items.length > 0}
+  <div class="flex flex-wrap gap-1">
+    {#each items as item}
+      <Badge variant="secondary">{String(item)}</Badge>
+    {/each}
+  </div>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

package/src/components/fields/RelationField.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { ExternalLink } from 'lucide-svelte';
+
+  let { value, resourceName, displayValue } = $props<{
+    value: string | number | null | undefined;
+    resourceName?: string;
+    displayValue?: string;
+  }>();
+
+  const display = $derived(displayValue ?? (value != null ? `#${value}` : '—'));
+  const href = $derived(resourceName && value != null ? `#/${resourceName}/show/${value}` : undefined);
+</script>
+
+{#if href}
+  <a
+    {href}
+    class="inline-flex items-center gap-1 text-primary hover:underline text-sm"
+  >
+    {display}
+    <ExternalLink class="h-3 w-3" />
+  </a>
+{:else}
+  <span class="text-muted-foreground">{display}</span>
+{/if}

package/src/components/fields/RichTextField.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+
+  let { value, maxLength = 200 } = $props<{
+    value: string | null | undefined;
+    maxLength?: number;
+  }>();
+
+  const text = $derived(value ?? '');
+  const truncated = $derived(text.length > maxLength);
+  const display = $derived(truncated ? text.slice(0, maxLength) + '...' : text);
+
+  let showFull = $state(false);
+</script>
+
+{#if !text}
+  <span class="text-muted-foreground">—</span>
+{:else}
+  <div class="prose prose-sm dark:prose-invert max-w-none">
+    <p class="whitespace-pre-wrap text-sm leading-relaxed">
+      {showFull ? text : display}
+    </p>
+    {#if truncated}
+      <Button
+        variant="link"
+        size="sm"
+        class="text-xs text-primary h-auto p-0"
+        onclick={() => { showFull = !showFull; }}
+      >
+        {showFull ? t('common.showLess') : t('common.showMore')}
+      </Button>
+    {/if}
+  </div>
+{/if}

package/src/components/fields/SelectField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Badge } from '../ui/badge/index.js';
+
+  let { value, options } = $props<{
+    value: string | number | null | undefined;
+    options?: { label: string; value: string | number }[];
+  }>();
+
+  const label = $derived(
+    options?.find(o => o.value === value)?.label ?? (value != null ? String(value) : '—')
+  );
+</script>
+
+<Badge variant="outline">{label}</Badge>

package/src/components/fields/TagField.svelte

@@ -1,17 +1,12 @@
 <script lang="ts">
-  interface Props { value: string | string[] | null | undefined; color?: string }
-  let { value, color = 'var(--color-primary, #3b82f6)' }: Props = $props();
+  import { Badge } from '../ui/badge/index.js';
+  interface Props { value: string | string[] | null | undefined }
+  let { value }: Props = $props();
   const tags = $derived(Array.isArray(value) ? value : value ? [value] : []);
 </script>
-<span class="field-tags">
+<span class="inline-flex flex-wrap gap-1">
   {#each tags as tag}
-    <span class="tag" style="--tag-color: {color}">{tag}</span>
+    <Badge variant="secondary">{tag}</Badge>
   {/each}
-  {#if tags.length === 0}<span class="field-empty">—</span>{/if}
+  {#if tags.length === 0}<span class="text-muted-foreground">—</span>{/if}
 </span>
-
-<style>
-  .field-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
-  .tag { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 12px; background: color-mix(in srgb, var(--tag-color) 15%, transparent); color: var(--tag-color); border: 1px solid color-mix(in srgb, var(--tag-color) 30%, transparent); }
-  .field-empty { color: var(--color-text-muted, #9ca3af); }
-</style>

package/src/components/fields/TextField.svelte

@@ -5,12 +5,7 @@
   const needsTooltip = $derived(value && maxLength && value.length > maxLength);
 </script>
 {#if value}
-  <span class="field-text" title={needsTooltip ? value : undefined}>{display}</span>
+  <span class="inline-block" title={needsTooltip ? value : undefined}>{display}</span>
 {:else}
-  <span class="field-text field-empty">—</span>
+  <span class="text-muted-foreground">—</span>
 {/if}
-
-<style>
-  .field-text { display: inline-block; }
-  .field-empty { color: var(--color-text-muted, #9ca3af); }
-</style>

package/src/components/fields/UrlField.svelte

@@ -1,20 +1,14 @@
 <script lang="ts">
+  import { ExternalLink } from 'lucide-svelte';
   interface Props { value: string | null | undefined; label?: string }
   let { value, label }: Props = $props();
   const display = $derived(label ?? value ?? '');
 </script>
 {#if value}
-  <a href={value} target="_blank" rel="noopener noreferrer" class="field-url">
+  <a href={value} target="_blank" rel="noopener noreferrer" class="text-primary hover:underline no-underline inline-flex items-center gap-1">
     {display}
-    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+    <ExternalLink class="h-3 w-3 opacity-60" />
   </a>
 {:else}
-  <span class="field-url field-empty">—</span>
+  <span class="text-muted-foreground">—</span>
 {/if}
-
-<style>
-  .field-url { color: var(--color-primary, #3b82f6); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
-  .field-url:hover { text-decoration: underline; }
-  .field-url svg { opacity: 0.6; }
-  .field-empty { color: var(--color-text-muted, #9ca3af); }
-</style>

package/src/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import type { WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<AlertDialogPrimitive.ContentProps> & { class?: string } = $props();
+</script>
+
+<AlertDialogPrimitive.Portal>
+	<AlertDialogPrimitive.Overlay
+		class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+	/>
+	<AlertDialogPrimitive.Content
+		bind:ref
+		class={cn(
+			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+			className,
+		)}
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>

package/src/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps & { class?: string } = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	class={cn("text-sm text-muted-foreground", className)}
+	{...restProps}
+/>

package/src/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...restProps}></div>

package/src/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...restProps}></div>

package/src/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps & { class?: string } = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	{...restProps}
+/>

package/src/components/ui/alert-dialog/alert-dialog-portal.svelte

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

package/src/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps & { class?: string } = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	class={cn("text-lg font-semibold", className)}
+	{...restProps}
+/>

package/src/components/ui/alert-dialog/index.ts

@@ -0,0 +1,20 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+const Action = AlertDialogPrimitive.Action;
+const Cancel = AlertDialogPrimitive.Cancel;
+
+export {
+	Root,
+	Trigger,
+	Action,
+	Cancel,
+};
+export { default as Content } from "./alert-dialog-content.svelte";
+export { default as Description } from "./alert-dialog-description.svelte";
+export { default as Footer } from "./alert-dialog-footer.svelte";
+export { default as Header } from "./alert-dialog-header.svelte";
+export { default as Overlay } from "./alert-dialog-overlay.svelte";
+export { default as Portal } from "./alert-dialog-portal.svelte";
+export { default as Title } from "./alert-dialog-title.svelte";

package/src/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { Ellipsis } from 'lucide-svelte';
+
+  let { class: className, ...restProps }: HTMLAttributes<HTMLSpanElement> = $props();
+</script>
+
+<span
+  role="presentation"
+  aria-hidden="true"
+  data-slot="breadcrumb-ellipsis"
+  class={cn("flex size-9 items-center justify-center", className)}
+  {...restProps}
+>
+  <Ellipsis class="size-4" />
+  <span class="sr-only">More</span>
+</span>

package/src/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLLiAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLLiAttributes & { children?: Snippet } = $props();
+</script>
+
+<li
+  data-slot="breadcrumb-item"
+  class={cn("inline-flex items-center gap-1.5", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</li>

package/src/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLAnchorAttributes & { children?: Snippet } = $props();
+</script>
+
+<a
+  data-slot="breadcrumb-link"
+  class={cn("hover:text-foreground transition-colors", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</a>

package/src/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLOlAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLOlAttributes & { children?: Snippet } = $props();
+</script>
+
+<ol
+  data-slot="breadcrumb-list"
+  class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</ol>

package/src/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLAttributes<HTMLSpanElement> & { children?: Snippet } = $props();
+</script>
+
+<span
+  role="link"
+  aria-disabled="true"
+  aria-current="page"
+  data-slot="breadcrumb-page"
+  class={cn("text-foreground font-normal", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</span>

package/src/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLLiAttributes } from 'svelte/elements';
+  import { ChevronRight } from 'lucide-svelte';
+
+  let { class: className, children, ...restProps }: HTMLLiAttributes & { children?: Snippet } = $props();
+</script>
+
+<li
+  role="presentation"
+  aria-hidden="true"
+  data-slot="breadcrumb-separator"
+  class={cn("[&>svg]:size-3.5", className)}
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    <ChevronRight />
+  {/if}
+</li>

package/src/components/ui/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> & { children?: Snippet } = $props();
+</script>
+
+<nav aria-label="breadcrumb" data-slot="breadcrumb" class={cn("", className)} {...restProps}>
+  {@render children?.()}
+</nav>

package/src/components/ui/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Root } from './breadcrumb.svelte';
+export { default as Item } from './breadcrumb-item.svelte';
+export { default as Link } from './breadcrumb-link.svelte';
+export { default as Page } from './breadcrumb-page.svelte';
+export { default as Separator } from './breadcrumb-separator.svelte';
+export { default as Ellipsis } from './breadcrumb-ellipsis.svelte';
+export { default as List } from './breadcrumb-list.svelte';

package/src/components/ui/collapsible/index.ts

@@ -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, Trigger, Content };

package/src/components/ui/command/command-dialog.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Command } from 'cmdk-sv';
+  import * as Dialog from '../dialog/index.js';
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+
+  let {
+    open = $bindable(false),
+    class: className,
+    children,
+    ...restProps
+  }: {
+    open?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  } = $props();
+</script>
+
+<Dialog.Dialog bind:open {...restProps}>
+  <Dialog.DialogContent class="overflow-hidden p-0">
+    <Command.Root
+      class={cn(
+        "[&_[data-cmdk-group-heading]]:text-muted-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[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",
+        className
+      )}
+    >
+      {@render children?.()}
+    </Command.Root>
+  </Dialog.DialogContent>
+</Dialog.Dialog>

package/src/components/ui/command/index.ts

@@ -0,0 +1,2 @@
+export { Command as Root, Command } from 'cmdk-sv';
+export { default as CommandDialog } from './command-dialog.svelte';

package/src/components/ui/context-menu/index.ts

@@ -0,0 +1,11 @@
+import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+const Root = ContextMenuPrimitive.Root;
+const Trigger = ContextMenuPrimitive.Trigger;
+const Content = ContextMenuPrimitive.Content;
+const Item = ContextMenuPrimitive.Item;
+const Separator = ContextMenuPrimitive.Separator;
+const Group = ContextMenuPrimitive.Group;
+const GroupHeading = ContextMenuPrimitive.GroupHeading;
+
+export { Root, Trigger, Content, Item, Separator, Group, GroupHeading };

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+
+  let { class: className, children, ...restProps }: { class?: string; children?: Snippet; [key: string]: unknown } = $props();
+</script>
+
+<DrawerPrimitive.Portal>
+  <DrawerPrimitive.Overlay class="fixed inset-0 z-50 bg-black/80" />
+  <DrawerPrimitive.Content
+    class={cn(
+      "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+      className
+    )}
+    {...restProps}
+  >
+    <div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full"></div>
+    {@render children?.()}
+  </DrawerPrimitive.Content>
+</DrawerPrimitive.Portal>

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+
+  let { class: className, children, ...restProps }: { class?: string; children?: Snippet; [key: string]: unknown } = $props();
+</script>
+
+<DrawerPrimitive.Description class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+  {@render children?.()}
+</DrawerPrimitive.Description>

package/src/components/ui/drawer/drawer-footer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<div data-slot="drawer-footer" class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...restProps}>
+  {@render children?.()}
+</div>

package/src/components/ui/drawer/drawer-header.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<div data-slot="drawer-header" class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...restProps}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+
+  let { class: className, children, ...restProps }: { class?: string; children?: Snippet; [key: string]: unknown } = $props();
+</script>
+
+<DrawerPrimitive.Title class={cn("text-lg font-semibold leading-none tracking-tight", className)} {...restProps}>
+  {@render children?.()}
+</DrawerPrimitive.Title>

package/src/components/ui/drawer/drawer.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+  import type { Snippet } from 'svelte';
+
+  let {
+    open = $bindable(false),
+    children,
+    ...restProps
+  }: {
+    open?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  } = $props();
+</script>
+
+<DrawerPrimitive.Root bind:open {...restProps}>
+  {@render children?.()}
+</DrawerPrimitive.Root>

package/src/components/ui/drawer/index.ts

@@ -0,0 +1,6 @@
+export { default as Root } from './drawer.svelte';
+export { default as Content } from './drawer-content.svelte';
+export { default as Header } from './drawer-header.svelte';
+export { default as Footer } from './drawer-footer.svelte';
+export { default as Title } from './drawer-title.svelte';
+export { default as Description } from './drawer-description.svelte';

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLButtonAttributes> & {
+		checked?: boolean;
+		onCheckedChange?: (checked: boolean) => void;
+	};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = false,
+		onCheckedChange,
+		children,
+		...restProps
+	}: Props = $props();
+
+	function handleClick() {
+		const next = !checked;
+		onCheckedChange?.(next);
+	}
+</script>
+
+<button
+	bind:this={ref}
+	role="menuitemcheckbox"
+	aria-checked={checked}
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	onclick={handleClick}
+	{...restProps}
+>
+	<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+		{#if checked}
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+		{/if}
+	</span>
+	{@render children?.()}
+</button>