Sheet

1import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import * as SheetPrimitive from "@kobalte/core/dialog"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6import { cva, type VariantProps } from "class-variance-authority"
7 
8import { cn } from "~/lib/utils"
9 
10const Sheet = SheetPrimitive.Root
11const SheetTrigger = SheetPrimitive.Trigger
12const SheetClose = SheetPrimitive.CloseButton
13 
14const portalVariants = cva("fixed inset-0 z-50 flex", {
15  variants: {
16    position: {
17      top: "items-start",
18      bottom: "items-end",
19      left: "justify-start",
20      right: "justify-end"
21    }
22  },
23  defaultVariants: { position: "right" }
24})
25 
26type PortalProps = SheetPrimitive.DialogPortalProps & VariantProps<typeof portalVariants>
27 
28const SheetPortal: Component<PortalProps> = (props) => {
29  const [local, others] = splitProps(props, ["position", "children"])
30  return (
31    <SheetPrimitive.Portal {...others}>
32      <div class={portalVariants({ position: local.position })}>{local.children}</div>
33    </SheetPrimitive.Portal>
34  )
35}
36 
37type DialogOverlayProps<T extends ValidComponent = "div"> = SheetPrimitive.DialogOverlayProps<T> & {
38  class?: string | undefined
39}
40 
41const SheetOverlay = <T extends ValidComponent = "div">(
42  props: PolymorphicProps<T, DialogOverlayProps<T>>
43) => {
44  const [local, others] = splitProps(props as DialogOverlayProps, ["class"])
45  return (
46    <SheetPrimitive.Overlay
47      class={cn(
48        "fixed inset-0 z-50 bg-black/80 data-[expanded=]:animate-in data-[closed=]:animate-out data-[closed=]:fade-out-0 data-[expanded=]:fade-in-0",
49        local.class
50      )}
51      {...others}
52    />
53  )
54}
55 
56const sheetVariants = cva(
57  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[closed=]:duration-300 data-[expanded=]:duration-500 data-[expanded=]:animate-in data-[closed=]:animate-out",
58  {
59    variants: {
60      position: {
61        top: "inset-x-0 top-0 border-b data-[closed=]:slide-out-to-top data-[expanded=]:slide-in-from-top",
62        bottom:
63          "inset-x-0 bottom-0 border-t data-[closed=]:slide-out-to-bottom data-[expanded=]:slide-in-from-bottom",
64        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[closed=]:slide-out-to-left data-[expanded=]:slide-in-from-left sm:max-w-sm",
65        right:
66          "inset-y-0 right-0 h-full w-3/4 border-l data-[closed=]:slide-out-to-right data-[expanded=]:slide-in-from-right sm:max-w-sm"
67      }
68    },
69// … truncated