📦 Add Sheet UI component

src/components/ui/sheet/index.ts

@@ -0,0 +1,36 @@
+import { Dialog as SheetPrimitive } from "bits-ui";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+const Root = SheetPrimitive.Root;
+const Portal = SheetPrimitive.Portal;
+
+export {
+  Root,
+  Close,
+  Trigger,
+  Portal,
+  Overlay,
+  Content,
+  Header,
+  Footer,
+  Title,
+  Description,
+  //
+  Root as Sheet,
+  Close as SheetClose,
+  Trigger as SheetTrigger,
+  Portal as SheetPortal,
+  Overlay as SheetOverlay,
+  Content as SheetContent,
+  Header as SheetHeader,
+  Footer as SheetFooter,
+  Title as SheetTitle,
+  Description as SheetDescription,
+};

src/components/ui/sheet/sheet-close.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+
+  let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps =
+    $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />

src/components/ui/sheet/sheet-content.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { WithoutChildrenOrChild } from "@/types/components";
+
+  import SheetOverlay from "./sheet-overlay.svelte";
+  import { sheetVariants, type Side } from "./sheet.variants";
+
+  import { cn } from "@/utils/cn";
+  import { Dialog as SheetPrimitive } from "bits-ui";
+  import XIcon from "@lucide/svelte/icons/x";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    side = "right",
+    portalProps,
+    children,
+    ...restProps
+  }: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    portalProps?: SheetPrimitive.PortalProps;
+    side?: Side;
+    children: Snippet;
+  } = $props();
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
+  <SheetOverlay />
+  <SheetPrimitive.Content
+    bind:ref
+    data-slot="sheet-content"
+    class={cn(sheetVariants({ side }), className)}
+    {...restProps}
+  >
+    {@render children?.()}
+    <SheetPrimitive.Close
+      class={cn(
+        "ring-offset-neutral-300 focus-visible:ring-neutral-300 dark:ring-offset-neutral-700 dark:focus-visible:ring-neutral-700",
+        "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none",
+      )}
+    >
+      <XIcon class="size-4" />
+      <span class="sr-only">Close</span>
+    </SheetPrimitive.Close>
+  </SheetPrimitive.Content>
+</SheetPrimitive.Portal>

src/components/ui/sheet/sheet-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+  import { cn } from "@/utils/cn";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+  bind:ref
+  data-slot="sheet-description"
+  class={cn("text-sm text-neutral-700 dark:text-neutral-300", className)}
+  {...restProps}
+/>

src/components/ui/sheet/sheet-footer.svelte

@@ -0,0 +1,21 @@
+<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<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sheet-footer"
+  class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

src/components/ui/sheet/sheet-header.svelte

@@ -0,0 +1,21 @@
+<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<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sheet-header"
+  class={cn("flex flex-col gap-1.5 p-4", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

src/components/ui/sheet/sheet-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+  import { cn } from "@/utils/cn";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+  bind:ref
+  data-slot="sheet-overlay"
+  class={cn(
+    "fixed inset-0 z-50 bg-neutral-200/50 backdrop-blur-[4px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 dark:bg-neutral-900/50",
+    className,
+  )}
+  {...restProps}
+/>

src/components/ui/sheet/sheet-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+  import { cn } from "@/utils/cn";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+  bind:ref
+  data-slot="sheet-title"
+  class={cn("font-semibold text-neutral-950 dark:text-neutral-50", className)}
+  {...restProps}
+/>

src/components/ui/sheet/sheet-trigger.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from "bits-ui";
+
+  let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps =
+    $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />

src/components/ui/sheet/sheet.variants.ts

@@ -0,0 +1,22 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+const sheetVariants = tv({
+  base: "bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  variants: {
+    side: {
+      top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+      bottom:
+        "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+      left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+      right:
+        "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+    },
+  },
+  defaultVariants: {
+    side: "left",
+  },
+});
+
+type Side = VariantProps<typeof sheetVariants>["side"];
+
+export { sheetVariants, type Side };