@yourrealm/sdk 0.0.0-alpha.1378.ce03c8dc

package/src/ui/components/sheet.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import type { ComponentProps } from "preact";
+import { Dialog as SheetPrimitive } from "@ark-ui/react/dialog";
+
+import { cn, type ElementProps } from "../utils.ts";
+import { Button } from "./button.tsx";
+import { XBoldIcon } from "./icons.tsx";
+
+function Sheet(props: ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root {...props} />;
+}
+
+function SheetTrigger({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: ComponentProps<typeof SheetPrimitive.CloseTrigger>) {
+  return <SheetPrimitive.CloseTrigger data-slot="sheet-close" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: ComponentProps<typeof SheetPrimitive.Backdrop>) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 supports-backdrop-filter:backdrop-blur-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <>
+      <SheetOverlay />
+      <SheetPrimitive.Positioner className="fixed inset-0 z-50">
+        <SheetPrimitive.Content
+          data-slot="sheet-content"
+          data-side={side}
+          className={cn(
+            "absolute z-50 flex flex-col gap-4 bg-background text-sm shadow-lg transition duration-200 ease-in-out",
+            "data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:rounded-t-2xl data-[side=bottom]:data-[state=closed]:translate-y-[2.5rem] data-[side=bottom]:data-[state=closed]:opacity-0",
+            "data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:data-[state=closed]:translate-x-[-2.5rem] data-[side=left]:data-[state=closed]:opacity-0",
+            "data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:data-[state=closed]:translate-x-[2.5rem] data-[side=right]:data-[state=closed]:opacity-0",
+            "data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:rounded-b-2xl data-[side=top]:data-[state=closed]:translate-y-[-2.5rem] data-[side=top]:data-[state=closed]:opacity-0",
+            "data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <SheetPrimitive.CloseTrigger asChild data-slot="sheet-close">
+              <Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+                <XBoldIcon />
+                <span className="sr-only">Close</span>
+              </Button>
+            </SheetPrimitive.CloseTrigger>
+          )}
+        </SheetPrimitive.Content>
+      </SheetPrimitive.Positioner>
+    </>
+  );
+}
+
+function SheetHeader({ className, ...props }: ElementProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: ElementProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-base font-medium text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};