drawer

1import type {
2  CloseProps,
3  ContentProps,
4  DescriptionProps,
5  DynamicProps,
6  LabelProps,
7  OverlayProps,
8  TriggerProps,
9} from "@corvu/drawer";
10import DrawerPrimitive from "@corvu/drawer";
11 
12import { cn } from "~/lib/utils.ts";
13import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
14 
15import { splitProps } from "solid-js";
16 
17const Drawer = DrawerPrimitive;
18 
19const DrawerPortal = DrawerPrimitive.Portal;
20 
21const DrawerTrigger = <T extends ValidComponent = "button">(
22  props: DynamicProps<T, TriggerProps<T>>,
23) => {
24  return (
25    <DrawerPrimitive.Trigger
26      data-slot="drawer-trigger"
27      {...(props as TriggerProps)}
28    />
29  );
30};
31 
32const DrawerClose = <T extends ValidComponent = "button">(
33  props: DynamicProps<T, CloseProps<T>>,
34) => {
35  return (
36    <DrawerPrimitive.Close
37      data-slot="drawer-close"
38      {...(props as CloseProps)}
39    />
40  );
41};
42 
43type DrawerOverlayProps<T extends ValidComponent = "div"> = OverlayProps<T> & {
44  class?: string;
45};
46 
47const DrawerOverlay = <T extends ValidComponent = "div">(
48  props: DynamicProps<T, DrawerOverlayProps<T>>,
49) => {
50  const [local, rest] = splitProps(props as DrawerOverlayProps, [
51    "class",
52    "style",
53  ]);
54  const drawerContext = DrawerPrimitive.useContext();
55  return (
56    <DrawerPrimitive.Overlay
57      data-slot="drawer-overlay"
58      class={cn(
59        "bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50 data-transitioning:transition-opacity data-transitioning:duration-300",
60        props.class,
61      )}
62      // the drag/close fade rides on opacity, so a consumer style has to merge
63      // with it rather than replace it
64      style={typeof local.style === "string"
65        ? `opacity:${drawerContext.openPercentage()};${local.style}`
66        : { opacity: drawerContext.openPercentage(), ...local.style }}
67      {...rest}
68    />
69  );
70};
71 
72type DrawerContentProps<T extends ValidComponent = "div"> = ContentProps<T> & {
73  class?: string;
74  children?: JSX.Element;
75};
76 
77const DrawerContent = <T extends ValidComponent = "div">(
78  props: DynamicProps<T, DrawerContentProps<T>>,
79) => {
80  const [, rest] = splitProps(props as DrawerContentProps, [
81    "class",
82    "children",
83  ]);
84  return (
85    <DrawerPortal>
86      <DrawerOverlay />
87      <DrawerPrimitive.Content
88        data-slot="drawer-content"
89        class={cn(
90// … truncated