From 1d6384b1f2cb44344572f2a094ffd8b9ce1679a3 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 9 Apr 2024 23:06:11 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20popover=20UI=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/popover/index.ts               | 16 +++++++++++++++
 src/ui/popover/popover-content.svelte | 29 +++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 src/ui/popover/index.ts
 create mode 100644 src/ui/popover/popover-content.svelte

diff --git a/src/ui/popover/index.ts b/src/ui/popover/index.ts
new file mode 100644
index 0000000..ad14bcd
--- /dev/null
+++ b/src/ui/popover/index.ts
@@ -0,0 +1,16 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+
+export {
+  Root,
+  Content,
+  Trigger,
+  Close,
+  Root as Popover,
+  Content as PopoverContent,
+  Trigger as PopoverTrigger,
+  Close as PopoverClose
+};
diff --git a/src/ui/popover/popover-content.svelte b/src/ui/popover/popover-content.svelte
new file mode 100644
index 0000000..67636a8
--- /dev/null
+++ b/src/ui/popover/popover-content.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Popover as PopoverPrimitive } from 'bits-ui';
+
+  import { cn } from '@/utils/cn';
+  import { flyAndScale } from '@/utils/flyAndScale';
+
+  type $$Props = PopoverPrimitive.ContentProps;
+
+  let className: $$Props['class'] = undefined;
+  export let transition: $$Props['transition'] = flyAndScale;
+  export let transitionConfig: $$Props['transitionConfig'] = undefined;
+  export let align: $$Props['align'] = 'center';
+  export let sideOffset: $$Props['sideOffset'] = 4;
+  export { className as class };
+</script>
+
+<PopoverPrimitive.Content
+  {transition}
+  {transitionConfig}
+  {align}
+  {sideOffset}
+  {...$$restProps}
+  class={cn(
+    'z-50 w-60 rounded-md border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 text-popover-foreground shadow-md outline-none',
+    className
+  )}
+>
+  <slot />
+</PopoverPrimitive.Content>