From 6b39aa4e70d52e68e20f2ccc53a096489aaa9675 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Thu, 25 Jan 2024 13:40:12 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20dialog=20UI=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/dialog/dialog-content.svelte     | 38 +++++++++++++++++++++++++
 src/ui/dialog/dialog-description.svelte | 13 +++++++++
 src/ui/dialog/dialog-footer.svelte      | 16 +++++++++++
 src/ui/dialog/dialog-header.svelte      | 13 +++++++++
 src/ui/dialog/dialog-overlay.svelte     | 24 ++++++++++++++++
 src/ui/dialog/dialog-portal.svelte      |  8 ++++++
 src/ui/dialog/dialog-title.svelte       | 16 +++++++++++
 src/ui/dialog/index.ts                  | 34 ++++++++++++++++++++++
 8 files changed, 162 insertions(+)
 create mode 100644 src/ui/dialog/dialog-content.svelte
 create mode 100644 src/ui/dialog/dialog-description.svelte
 create mode 100644 src/ui/dialog/dialog-footer.svelte
 create mode 100644 src/ui/dialog/dialog-header.svelte
 create mode 100644 src/ui/dialog/dialog-overlay.svelte
 create mode 100644 src/ui/dialog/dialog-portal.svelte
 create mode 100644 src/ui/dialog/dialog-title.svelte
 create mode 100644 src/ui/dialog/index.ts

diff --git a/src/ui/dialog/dialog-content.svelte b/src/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..2a83cc4
--- /dev/null
+++ b/src/ui/dialog/dialog-content.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import * as Dialog from '@/ui/dialog';
+  import { cn } from '@/utils/cn';
+
+  import { X } from 'lucide-svelte';
+  import { flyAndScale } from '@/utils/flyAndScale';
+
+  type $$Props = DialogPrimitive.ContentProps;
+
+  let className: $$Props['class'] = undefined;
+  export let transition: $$Props['transition'] = flyAndScale;
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    duration: 200
+  };
+  export { className as class };
+</script>
+
+<Dialog.Portal>
+  <Dialog.Overlay />
+  <DialogPrimitive.Content
+    {transition}
+    {transitionConfig}
+    class={cn(
+      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border border-neutral-200 dark:border-neutral-800 dark:bg-neutral-900 bg-white p-6 shadow-lg sm:rounded-lg md:w-full',
+      className
+    )}
+    {...$$restProps}
+  >
+    <slot />
+    <DialogPrimitive.Close
+      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+    >
+      <X class="h-4 w-4" />
+      <span class="sr-only">Close</span>
+    </DialogPrimitive.Close>
+  </DialogPrimitive.Content>
+</Dialog.Portal>
diff --git a/src/ui/dialog/dialog-description.svelte b/src/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..89cd271
--- /dev/null
+++ b/src/ui/dialog/dialog-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '@/utils/cn';
+
+  type $$Props = DialogPrimitive.DescriptionProps;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<DialogPrimitive.Description class={cn('text-sm opacity-70 mb-2', className)} {...$$restProps}>
+  <slot />
+</DialogPrimitive.Description>
diff --git a/src/ui/dialog/dialog-footer.svelte b/src/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..ee5263f
--- /dev/null
+++ b/src/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '@/utils/cn';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<div
+  class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+  {...$$restProps}
+>
+  <slot />
+</div>
diff --git a/src/ui/dialog/dialog-header.svelte b/src/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..2432973
--- /dev/null
+++ b/src/ui/dialog/dialog-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { cn } from '@/utils/cn';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...$$restProps}>
+  <slot />
+</div>
diff --git a/src/ui/dialog/dialog-overlay.svelte b/src/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..fb1314f
--- /dev/null
+++ b/src/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '@/utils/cn';
+  import { fade } from 'svelte/transition';
+
+  type $$Props = DialogPrimitive.OverlayProps;
+
+  let className: $$Props['class'] = undefined;
+  export let transition: $$Props['transition'] = fade;
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    duration: 150
+  };
+  export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+  {transition}
+  {transitionConfig}
+  class={cn(
+    'fixed inset-0 z-50 bg-neutral-100/80 dark:bg-neutral-900/80 backdrop-blur-sm',
+    className
+  )}
+  {...$$restProps}
+/>
diff --git a/src/ui/dialog/dialog-portal.svelte b/src/ui/dialog/dialog-portal.svelte
new file mode 100644
index 0000000..45112b7
--- /dev/null
+++ b/src/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  type $$Props = DialogPrimitive.PortalProps;
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+  <slot />
+</DialogPrimitive.Portal>
diff --git a/src/ui/dialog/dialog-title.svelte b/src/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..a4b54aa
--- /dev/null
+++ b/src/ui/dialog/dialog-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '@/utils/cn';
+
+  type $$Props = DialogPrimitive.TitleProps;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<DialogPrimitive.Title
+  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+  {...$$restProps}
+>
+  <slot />
+</DialogPrimitive.Title>
diff --git a/src/ui/dialog/index.ts b/src/ui/dialog/index.ts
new file mode 100644
index 0000000..676a771
--- /dev/null
+++ b/src/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+
+import Title from './dialog-title.svelte';
+import Portal from './dialog-portal.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+
+export {
+  Root,
+  Title,
+  Portal,
+  Footer,
+  Header,
+  Trigger,
+  Overlay,
+  Content,
+  Description,
+  //
+  Root as Dialog,
+  Title as DialogTitle,
+  Portal as DialogPortal,
+  Footer as DialogFooter,
+  Header as DialogHeader,
+  Trigger as DialogTrigger,
+  Overlay as DialogOverlay,
+  Content as DialogContent,
+  Description as DialogDescription
+};