Drawer

1import Drawer from "corvu/drawer";
2import type { Component, ComponentProps, JSX } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6// Drawer — a bottom sheet / drawer using Corvu
7 
8const DrawerRoot = Drawer;
9const DrawerTrigger = Drawer.Trigger;
10const DrawerClose = Drawer.Close;
11const DrawerPortal = Drawer.Portal;
12 
13const DrawerOverlay: Component<ComponentProps<typeof Drawer.Overlay>> = (props) => {
14  const [local, rest] = splitProps(props, ["class"]);
15  return (
16    <Drawer.Overlay
17      class={cn(
18        "fixed inset-0 z-50 bg-black/80",
19        "corvu-transitioning:transition-opacity corvu-transitioning:duration-300",
20        "corvu-open:opacity-100 corvu-closed:opacity-0",
21        local.class,
22      )}
23      {...rest}
24    />
25  );
26};
27 
28const DrawerContent: Component<ComponentProps<typeof Drawer.Content>> = (props) => {
29  const [local, rest] = splitProps(props, ["class", "children"]);
30  return (
31    <Drawer.Portal>
32      <DrawerOverlay />
33      <Drawer.Content
34        class={cn(
35          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
36          "corvu-transitioning:transition-transform corvu-transitioning:duration-300 corvu-transitioning:ease-in-out",
37          local.class,
38        )}
39        {...rest}
40      >
41        <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
42        {local.children}
43      </Drawer.Content>
44    </Drawer.Portal>
45  );
46};
47 
48const DrawerHeader: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
49  const [local, rest] = splitProps(props, ["class"]);
50  return <div class={cn("grid gap-1.5 p-4 text-center sm:text-left", local.class)} {...rest} />;
51};
52 
53const DrawerFooter: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
54  const [local, rest] = splitProps(props, ["class"]);
55  return <div class={cn("mt-auto flex flex-col gap-2 p-4", local.class)} {...rest} />;
56};
57 
58const DrawerTitle: Component<ComponentProps<typeof Drawer.Label>> = (props) => {
59  const [local, rest] = splitProps(props, ["class"]);
60  return (
61    <Drawer.Label
62      class={cn("text-lg font-semibold leading-none tracking-tight", local.class)}
63      {...rest}
64    />
65  );
66};
67 
68const DrawerDescription: Component<ComponentProps<typeof Drawer.Description>> = (props) => {
69  const [local, rest] = splitProps(props, ["class"]);
70  return <Drawer.Description class={cn("text-sm text-muted-foreground", local.class)} {...rest} />;
71};
72 
73export {
74// … truncated