From 894aca0d14650efef37beb538da41625a4bc6d61 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Thu, 18 Sep 2025 12:03:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20dropdown-menu=20UI=20compo?=
 =?UTF-8?q?nent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dropdown-menu-content.svelte              | 27 +++++++++++++++
 .../dropdown-menu/dropdown-menu-group.svelte  | 14 ++++++++
 .../dropdown-menu/dropdown-menu-item.svelte   | 27 +++++++++++++++
 .../dropdown-menu/dropdown-menu-label.svelte  | 25 ++++++++++++++
 .../dropdown-menu-separator.svelte            | 17 ++++++++++
 .../dropdown-menu-shortcut.svelte             | 24 ++++++++++++++
 .../dropdown-menu-trigger.svelte              | 14 ++++++++
 src/components/ui/dropdown-menu/index.ts      | 33 +++++++++++++++++++
 8 files changed, 181 insertions(+)
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-content.svelte
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-group.svelte
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-item.svelte
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-label.svelte
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
 create mode 100644 src/components/ui/dropdown-menu/index.ts

diff --git a/src/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000..d0d9864
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    sideOffset = 4,
+    portalProps,
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.ContentProps & {
+    portalProps?: DropdownMenuPrimitive.PortalProps;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...portalProps}>
+  <DropdownMenuPrimitive.Content
+    bind:ref
+    data-slot="dropdown-menu-content"
+    {sideOffset}
+    class={cn(
+      "z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-neutral-200 bg-neutral-50 p-1 text-neutral-950 shadow-md outline-none 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",
+      className,
+    )}
+    {...restProps}
+  />
+</DropdownMenuPrimitive.Portal>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-group.svelte b/src/components/ui/dropdown-menu/dropdown-menu-group.svelte
new file mode 100644
index 0000000..2473b77
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group
+  bind:ref
+  data-slot="dropdown-menu-group"
+  {...restProps}
+/>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 0000000..4287a08
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    variant = "default",
+    ...restProps
+  }: DropdownMenuPrimitive.ItemProps & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+  bind:ref
+  data-slot="dropdown-menu-item"
+  data-inset={inset}
+  data-variant={variant}
+  class={cn(
+    "data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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-highlighted:bg-neutral-200 data-highlighted:text-neutral-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 dark:data-highlighted:bg-neutral-800 dark:data-highlighted:text-neutral-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
+/>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 0000000..a32cf94
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { WithElementRef } from "@/types/components";
+  import { cn } from "@/utils/cn";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="dropdown-menu-label"
+  data-inset={inset}
+  class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..cd8cb1e
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import { cn } from "@/utils/cn";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+  bind:ref
+  data-slot="dropdown-menu-separator"
+  class={cn("-mx-1 my-1 h-px bg-neutral-200 dark:bg-neutral-800", className)}
+  {...restProps}
+/>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000..fc78b73
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { WithElementRef } from "@/types/components";
+  import { cn } from "@/utils/cn";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="dropdown-menu-shortcut"
+  class={cn(
+    "ml-auto text-xs tracking-widest text-neutral-700 dark:text-neutral-300",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/src/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 0000000..a52fb99
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger
+  bind:ref
+  data-slot="dropdown-menu-trigger"
+  {...restProps}
+/>
diff --git a/src/components/ui/dropdown-menu/index.ts b/src/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..06eafa0
--- /dev/null
+++ b/src/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,33 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+
+export {
+  Content,
+  Root as DropdownMenu,
+  Content as DropdownMenuContent,
+  Group as DropdownMenuGroup,
+  Item as DropdownMenuItem,
+  Separator as DropdownMenuSeparator,
+  Shortcut as DropdownMenuShortcut,
+  Label as DropdownMenuLabel,
+  Sub as DropdownMenuSub,
+  Trigger as DropdownMenuTrigger,
+  Group,
+  Item,
+  Root,
+  Separator,
+  Shortcut,
+  Sub,
+  Trigger,
+  Label,
+};