Sheet

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { VariantProps } from "class-variance-authority";
3
import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
4

5
import { splitProps } from "solid-js";
6
import * as SheetPrimitive from "@kobalte/core/dialog";
7
import { cva } from "class-variance-authority";
8
import XIcon from "lucide-solid/icons/x";
9

10
import { cn } from "~/lib/utils";
11

12
const Sheet = (props: SheetPrimitive.DialogRootProps) => {
13
  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
14
};
15

16
const SheetTrigger = <T extends ValidComponent = "button">(
17
  props: PolymorphicProps<T, SheetPrimitive.DialogTriggerProps<T>>,
18
) => {
19
  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
20
};
21

22
const SheetClose = <T extends ValidComponent = "button">(
23
  props: PolymorphicProps<T, SheetPrimitive.DialogCloseButtonProps<T>>,
24
) => {
25
  return <SheetPrimitive.CloseButton data-slot="sheet-close" {...props} />;
26
};
27

28
const portalVariants = cva("fixed inset-0 z-50 flex", {
29
  variants: {
30
    position: {
31
      top: "items-start",
32
      bottom: "items-end",
33
      left: "justify-start",
34
      right: "justify-end",
35
    },
36
  },
37
  defaultVariants: { position: "right" },
38
});
39

40
type PortalProps = SheetPrimitive.DialogPortalProps &
41
  VariantProps<typeof portalVariants>;
42

43
const SheetPortal: Component<PortalProps> = (props) => {
44
  const [local, others] = splitProps(props, ["position", "children"]);
45
  return (
46
    <SheetPrimitive.Portal data-slot="sheet-portal" {...others}>
47
      <div class={portalVariants({ position: local.position })}>
48
        {local.children}
49
      </div>
50
    </SheetPrimitive.Portal>
51
  );
52
};
53

54
type DialogOverlayProps<T extends ValidComponent = "div"> =
55
  SheetPrimitive.DialogOverlayProps<T> & {
56
    class?: string | undefined;
57
  };
58

59
const SheetOverlay = <T extends ValidComponent = "div">(
60
  props: PolymorphicProps<T, DialogOverlayProps<T>>,
61
) => {
62
  const [local, others] = splitProps(props as DialogOverlayProps, ["class"]);
63
  return (
64
    <SheetPrimitive.Overlay
65
      data-slot="sheet-overlay"
66
      class={cn(
67
        "fixed inset-0 z-50 bg-overlay ui-expanded:animate-in ui-expanded:fade-in-0 ui-closed:animate-out ui-closed:fade-out-0",
68
        local.class,
69
      )}
70
      {...others}
71
    />
72
  );
73
};
74

75
const sheetVariants = cva(
76
  "fixed z-50 gap-4 bg-background p-6 transition-all ease-in-out ui-expanded:animate-in ui-expanded:duration-500 ui-closed:animate-out ui-closed:duration-300",
77
  {
78
    variants: {
79
      position: {
80
        top: "inset-x-0 top-0 border-b ui-expanded:slide-in-from-top ui-closed:slide-out-to-top",
81
        bottom:
82
          "inset-x-0 bottom-0 border-t ui-expanded:slide-in-from-bottom ui-closed:slide-out-to-bottom",
83
        left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm ui-expanded:slide-in-from-left ui-closed:slide-out-to-left",
84
        right:
85
          "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm ui-expanded:slide-in-from-right ui-closed:slide-out-to-right",
86
      },
87
    },
88
    defaultVariants: {
89
      position: "right",
90
    },
91
  },
92
);
93

94
type DialogContentProps<T extends ValidComponent = "div"> =
95
  SheetPrimitive.DialogContentProps<T> &
96
    VariantProps<typeof sheetVariants> & {
97
      class?: string | undefined;
98
      children?: JSX.Element;
99
    };
100

101
const SheetContent = <T extends ValidComponent = "div">(
102
  props: PolymorphicProps<T, DialogContentProps<T>>,
103
) => {
104
  const [local, others] = splitProps(props as DialogContentProps, [
105
    "position",
106
    "class",
107
    "children",
108
  ]);
109
  return (
110
    <SheetPortal position={local.position}>
111
      <SheetOverlay />
112
      <SheetPrimitive.Content
113
        data-slot="sheet-content"
114
        class={cn(
115
          sheetVariants({ position: local.position }),
116
          local.class,
117
          "flex max-h-screen flex-col overflow-y-auto",
118
        )}
119
        {...others}
120
      >
121
        {local.children}
122
        <SheetPrimitive.CloseButton
123
          data-slot="sheet-close-button"
124
          class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:pointer-events-none ui-expanded:bg-primary"
125
        >
126
          <XIcon class="size-4" />
127
          <span class="sr-only">Close</span>
128
        </SheetPrimitive.CloseButton>
129
      </SheetPrimitive.Content>
130
    </SheetPortal>
131
  );
132
};
133

134
const SheetHeader: Component<ComponentProps<"div">> = (props) => {
135
  const [local, others] = splitProps(props, ["class"]);
136
  return (
137
    <div
138
      data-slot="sheet-header"
139
      class={cn(
140
        "flex flex-col space-y-2 text-center sm:text-left",
141
        local.class,
142
      )}
143
      {...others}
144
    />
145
  );
146
};
147

148
const SheetFooter: Component<ComponentProps<"div">> = (props) => {
149
  const [local, others] = splitProps(props, ["class"]);
150
  return (
151
    <div
152
      data-slot="sheet-footer"
153
      class={cn("mt-auto flex flex-col", local.class)}
154
      {...others}
155
    />
156
  );
157
};
158

159
type DialogTitleProps<T extends ValidComponent = "h2"> =
160
  SheetPrimitive.DialogTitleProps<T> & {
161
    class?: string | undefined;
162
  };
163

164
const SheetTitle = <T extends ValidComponent = "h2">(
165
  props: PolymorphicProps<T, DialogTitleProps<T>>,
166
) => {
167
  const [local, others] = splitProps(props as DialogTitleProps, ["class"]);
168
  return (
169
    <SheetPrimitive.Title
170
      data-slot="sheet-title"
171
      class={cn("text-lg font-semibold text-foreground", local.class)}
172
      {...others}
173
    />
174
  );
175
};
176

177
type DialogDescriptionProps<T extends ValidComponent = "p"> =
178
  SheetPrimitive.DialogDescriptionProps<T> & { class?: string | undefined };
179

180
const SheetDescription = <T extends ValidComponent = "p">(
181
  props: PolymorphicProps<T, DialogDescriptionProps<T>>,
182
) => {
183
  const [local, others] = splitProps(props as DialogDescriptionProps, [
184
    "class",
185
  ]);
186
  return (
187
    <SheetPrimitive.Description
188
      data-slot="sheet-description"
189
      class={cn("text-sm text-muted-foreground", local.class)}
190
      {...others}
191
    />
192
  );
193
};
194

195
export {
196
  Sheet,
197
  SheetTrigger,
198
  SheetClose,
199
  SheetContent,
200
  SheetHeader,
201
  SheetFooter,
202
  SheetTitle,
203
  SheetDescription,
204
};