Sheet

1import { type VariantProps, cva } from "class-variance-authority";
2import Drawer from "corvu/drawer";
3import { X } from "lucide-solid";
4import type { Component, ComponentProps, JSX } from "solid-js";
5import { splitProps } from "solid-js";
6import { cn } from "~/lib/utils";
7 
8// Sheet is a Drawer that slides from a side edge
9 
10const Sheet = Drawer;
11const SheetTrigger = Drawer.Trigger;
12const SheetClose = Drawer.Close;
13const SheetPortal = Drawer.Portal;
14 
15const SheetOverlay: Component<ComponentProps<typeof Drawer.Overlay>> = (props) => {
16  const [local, rest] = splitProps(props, ["class"]);
17  return (
18    <Drawer.Overlay
19      class={cn(
20        "fixed inset-0 z-50 bg-black/80",
21        "corvu-transitioning:transition-opacity corvu-transitioning:duration-200",
22        "corvu-open:opacity-100 corvu-closed:opacity-0",
23        local.class,
24      )}
25      {...rest}
26    />
27  );
28};
29 
30export const sheetVariants = cva(
31  [
32    "fixed z-50 gap-4 bg-background p-6 shadow-lg",
33    "transition ease-in-out",
34    "corvu-transitioning:duration-300",
35  ],
36  {
37    variants: {
38      side: {
39        top: "inset-x-0 top-0 border-b corvu-open:translate-y-0 corvu-closed:-translate-y-full",
40        bottom:
41          "inset-x-0 bottom-0 border-t corvu-open:translate-y-0 corvu-closed:translate-y-full",
42        left: "inset-y-0 left-0 h-full w-3/4 border-r corvu-open:translate-x-0 corvu-closed:-translate-x-full sm:max-w-sm",
43        right:
44          "inset-y-0 right-0 h-full w-3/4 border-l corvu-open:translate-x-0 corvu-closed:translate-x-full sm:max-w-sm",
45      },
46    },
47    defaultVariants: {
48      side: "right",
49    },
50  },
51);
52 
53export type SheetContentProps = ComponentProps<typeof Drawer.Content> &
54  VariantProps<typeof sheetVariants> & {
55    class?: string;
56    showClose?: boolean;
57  };
58 
59const SheetContent: Component<SheetContentProps> = (props) => {
60  const [local, variants, rest] = splitProps(props, ["class", "showClose", "children"], ["side"]);
61  return (
62    <Drawer.Portal>
63      <SheetOverlay />
64      <Drawer.Content class={cn(sheetVariants(variants), local.class)} {...rest}>
65        {local.showClose !== false && (
66          <Drawer.Close class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
67            <X class="h-4 w-4" />
68            <span class="sr-only">Close</span>
69          </Drawer.Close>
70        )}
71// … truncated