sheet

1import * as SheetPrimitive from "@kobalte/core/dialog";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import IconX from "~icons/lucide/x";
6import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
7 
8import { mergeProps, Show, splitProps } from "solid-js";
9import { buttonVariants } from "./button.tsx";
10 
11const Sheet = SheetPrimitive.Root;
12const SheetPortal = SheetPrimitive.Portal;
13 
14type SheetTriggerProps<T extends ValidComponent = "button"> =
15  & SheetPrimitive.DialogTriggerProps<T>
16  & { class?: string | undefined };
17 
18const SheetTrigger = <T extends ValidComponent = "button">(
19  props: PolymorphicProps<T, SheetTriggerProps<T>>,
20) => {
21  return (
22    <SheetPrimitive.Trigger
23      data-slot="sheet-trigger"
24      {...(props as SheetTriggerProps)}
25    />
26  );
27};
28 
29type SheetCloseProps<T extends ValidComponent = "button"> =
30  & SheetPrimitive.DialogCloseButtonProps<T>
31  & { class?: string | undefined };
32 
33const SheetClose = <T extends ValidComponent = "button">(
34  props: PolymorphicProps<T, SheetCloseProps<T>>,
35) => {
36  return (
37    <SheetPrimitive.CloseButton
38      data-slot="sheet-close"
39      {...(props as SheetCloseProps)}
40    />
41  );
42};
43 
44type SheetOverlayProps<T extends ValidComponent = "div"> =
45  & SheetPrimitive.DialogOverlayProps<T>
46  & { class?: string | undefined };
47 
48const SheetOverlay = <T extends ValidComponent = "div">(
49  props: PolymorphicProps<T, SheetOverlayProps<T>>,
50) => {
51  const [local, others] = splitProps(props as SheetOverlayProps, ["class"]);
52  return (
53    <SheetPrimitive.Overlay
54      data-slot="sheet-overlay"
55      class={cn(
56        "bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-closed:fade-out-0 data-expanded:fade-in-0 fixed inset-0 z-50 duration-100 data-closed:animate-out data-expanded:animate-in",
57        local.class,
58      )}
59      {...others}
60    />
61  );
62};
63 
64type SheetContentProps<T extends ValidComponent = "div"> =
65  & SheetPrimitive.DialogContentProps<T>
66  & {
67    class?: string | undefined;
68    children?: JSX.Element;
69    side?: "top" | "right" | "bottom" | "left";
70    showCloseButton?: boolean;
71  };
72 
73const SheetContent = <T extends ValidComponent = "div">(
74  rawProps: PolymorphicProps<T, SheetContentProps<T>>,
75) => {
76  const props = mergeProps(
77    { side: "right" as const, showCloseButton: true },
78    rawProps as SheetContentProps,
79  );
80  const [local, others] = splitProps(props, [
81    "class",
82    "children",
83    "side",
84// … truncated