Sheets

// Independent Components
import { Sheets, SheetsItem, SheetsContent, SheetsTrigger } from "@/ui/sheets";
import { ChevronIcon } from "@/icons/*";
import { Typography } from "@/ui/typography";

const data = [
  { title: "Accessibility", description: "Accessibility items that can be changed." },
  { title: "Terms and Conditions", description: "You can find out more here" },
  { title: "Preferences", description: "Change the theme, color, and font style according to your preferences" },
  { title: "Updates", description: "Find the latest news about us here." }
];

export function SheetsAccordionDemo() {
  return (
    <Sheets variant="accordion" defaultOpen="accessibility" className="w-full max-w-96 rounded-lg border px-6">
      {data.map((i, index) => (
        <SheetsItem
          key={index}
          value={String(i.title.replace(/\s/g, "-").toLowerCase())}
          className="group relative flex h-auto select-none flex-col border-b last-of-type:border-b-transparent"
        >
          <SheetsTrigger>
            {i.title}
            <ChevronIcon chevron="down" data-origin="arrow-collapse" />
          </SheetsTrigger>

          <SheetsContent className="text-sm">
            <Typography prose="muted" className="pb-8">
              {i.description}
            </Typography>
          </SheetsContent>
        </SheetsItem>
      ))}
    </Sheets>
  );
}

// Compound Components
"use client";
import { Sheets } from "@/ui/sheets";
import { ChevronIcon } from "@/icons/*";
import { Typography } from "@/ui/typography";

export function SheetsCollapsibleDemo() {
  return (
    <Sheets variant="collapsible" className="m-auto w-full max-w-80 space-y-2">
      <Sheets.Trigger className="w-full justify-between bg-background font-mono text-sm text-muted-foreground data-[state=open]:text-constructive">
        Select your &lt;Sheets /&gt;
        <Typography className="rounded-md border p-1 transition-colors group-hover:bg-muted/90 group-data-[state=open]:border-constructive">
          <ChevronIcon chevron="up-down" />
        </Typography>
      </Sheets.Trigger>

      <Typography
        el="a"
        data-ignore-clickoutside
        href="#sheets-variant-collapsible"
        className="mt-4 w-full justify-start rounded-md border px-4 py-2 font-mono text-sm shadow-sm hover:bg-muted/60"
      >
        @sheets/collapsible
      </Typography>

      <Sheets.Content className="space-y-2">
        {["accordion", "dialog", "drawer", "dropdown"].map(i => (
          <Typography
            el="a"
            key={i}
            href={`#sheets-variant-${i}`}
            className="w-full justify-start rounded-md border px-4 py-2 font-mono text-sm shadow-sm hover:bg-muted/60"
          >
            @sheets/{i}
          </Typography>
        ))}
      </Sheets.Content>
    </Sheets>
  );
}

// Only Root Component
"use client";
import { useState } from "react";
import { Sheets } from "@/ui/sheets";
import { Button } from "@/ui/button";
import { Stack } from "@/ui/stack";
import { Typography } from "@/ui/typography";

export function SheetsCollapsibleRootDemo() {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  return (
    <Stack gap={8}>
      <Button onClick={() => setIsOpen(o => !o)} className="w-max">{isOpen ? "Close" : "Read"}</Button>
      <Sheets variant="collapsible" open={isOpen} onOpenChange={setIsOpen} className="w-96 text-justify text-sm max-w-full">
        <Typography prose="span" className="max-w-full text-wrap">
          Long ago, during the era of Gol D. Roger, the Pirate King, the seas were filled with tales of adventure, danger, and mystery. His final words
          before execution ignited the "Great Pirate Era": "My treasure? It's yours if you want it. I left everything I gathered in one place." These words 
          inspired countless pirates, including a young boy named Monkey D. Luffy, who dreamed of finding the legendary <em>One Piece</em> and becoming the 
          next Pirate King. With a straw hat gifted by the infamous Shanks and the power of the Gomu Gomu no Mi, a mysterious Devil Fruit, Luffy set out on 
          a journey that would bring together an unforgettable crew and face unimaginable challenges. From battling fierce Warlords to uncovering secrets of 
          the Void Century, their adventure is a testament to loyalty, courage, and the unbreakable bonds of friendship.
        </Typography>
        <Button variant="link" onClick={() => setIsOpen(false)}>
          close
        </Button>
      </Sheets>
    </Stack>
  );
}

// Independent Components
import { Sheets, SheetsContent, SheetsTrigger, SheetsClose } from "@/ui/sheets";
import { Typography } from "@/ui/typography";
import { Stack } from "@/ui/stack";

export function SheetsDialogDemo() {
  return (
    <Sheets variant="dialog">
      <SheetsTrigger>
        <Typography
          el="span"
          data-labelopen="Open Dialog"
          data-labelclosed="Close Dialog"
          className="group-data-[state=closed]:before:content-[attr(data-labelopen)] group-data-[state=open]:before:content-[attr(data-labelclosed)]"
        />
      </SheetsTrigger>

      <SheetsContent className="flex flex-col gap-4 overflow-hidden md:w-[528px] md:h-[438px] max-md:max-h-96">
        <Stack>
          <Typography el="h2" prose="large">
            The Power of Dreams
          </Typography>
          <Typography prose="muted">
            Explore the strength of ambitions and the stories of those who dare to dream beyond the horizon.
          </Typography>
        </Stack>
        <Typography prose="p" className="flex size-full flex-col overflow-y-auto">
          Every great journey begins with a dream. It is the courage to pursue the unknown, the resilience to face challenges, and the belief in oneself 
          that turns visions into reality. Whether it’s the quest for knowledge, the pursuit of adventure, or the desire to leave a lasting legacy, dreams 
          shape the world we live in. From the innovators who redefined technology to explorers who mapped uncharted territories, their stories remind us 
          that nothing is impossible when driven by purpose. So, what’s your dream, and how far will you go to achieve it?
        </Typography>

        <SheetsClose />
      </SheetsContent>
    </Sheets>
  );
}

"use client";
import { Sheets } from "@/ui/sheets";
import { Typography } from "@/ui/typography";
import { Button, buttonStyle } from "@/ui/button";
import { Stack } from "@/ui/stack";
import { Input } from "@/ui/input";
import { Group } from "@/ui/group";

export function SheetsDialogDemoNested() {
  return (
    <Sheets variant="dialog" multipleOpen>
      <Sheets.Trigger id="dialog-demo-1">Edit profile</Sheets.Trigger>

      <Sheets.Content value="dialog-demo-1" className="flex flex-col justify-between md:w-full max-w-md">
        <Typography el="p" prose="h4">
          Edit profile
        </Typography>
        <Typography prose="muted">Make changes to your profile here. Click continue to the next step.</Typography>

        <Stack>
          <Input.Wrapper label="Name">
            <Input placeholder="Edit your name" />
          </Input.Wrapper>
          <Input.Wrapper label="Username">
            <Input placeholder="Edit Username" />
          </Input.Wrapper>
        </Stack>

        <Group align="stretch" grow>
          <Sheets.Close unstyled className={buttonStyle({ variant: "destructive" })}>
            Cancel
          </Sheets.Close>
          <Sheets.Trigger id="dialog-demo-2" unstyled className={buttonStyle({ variant: "default" })}>
            Continue
          </Sheets.Trigger>
        </Group>

        <Sheets.Close />
      </Sheets.Content>

      <Sheets.Content value="dialog-demo-2" side="bottom" className="flex flex-col justify-between md:w-full max-w-md">
        <Typography el="p" prose="h1">
          Dialog 2
        </Typography>

        <Sheets.Trigger id="dialog-demo-3" className="absolute bottom-4">
          Open Dialog 3
        </Sheets.Trigger>

        <Sheets.Close />
      </Sheets.Content>

      <Sheets.Content value="dialog-demo-3" side="bottom" className="flex flex-col justify-between md:w-full max-w-md">
        <Typography el="p" prose="h1">
          Dialog 3
        </Typography>

        <Sheets.Trigger id="dialog-demo-4" className="absolute bottom-4">
          Open Dialog 4
        </Sheets.Trigger>

        <Sheets.Close />
      </Sheets.Content>

      <Sheets.Content value="dialog-demo-4" className="flex flex-col justify-between md:w-full max-w-md">
        <Typography el="p" prose="h1">
          Dialog 4
        </Typography>

        <Sheets.Close />
      </Sheets.Content>
    </Sheets>
  );
}

// Independent Components
import { Sheets, SheetsContent, SheetsTrigger, SheetsClose } from "@/ui/sheets";
import { Typography } from "@/ui/typography";
import { Stack } from "@/ui/stack";

export function SheetsDrawerDemo() {
  return (
    <Sheets variant="drawer">
      <SheetsTrigger id="drawer">
        <Typography
          el="span"
          data-labelopen="Open Drawer"
          data-labelclosed="Close Drawer"
          className="group-data-[state=closed]:before:content-[attr(data-labelopen)] group-data-[state=open]:before:content-[attr(data-labelclosed)]"
        />
      </SheetsTrigger>

      <SheetsContent className="flex flex-col gap-4">
        <Stack>
          <Typography el="h2" prose="large">
            Lorem ipsum
          </Typography>
          <Typography prose="muted">Tenetur fugiat aspernatur aut quas ex praesentium molestias officiis. repudiandae.</Typography>
        </Stack>
        <Typography prose="p" className="flex size-full flex-col overflow-y-auto">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur fugiat aspernatur aut quas ex praesentium molestias officiis fugit accusamus
          expedita alias repudiandae, exercitationem maiores velit quos reiciendis recusandae, quod iusto earum? Fugiat fuga dolor atque nobis esse dignissimos
          temporibus vel incidunt maxime provident ut dolorem hic explicabo corrupti, praesentium.
        </Typography>

        <SheetsClose />
      </SheetsContent>
    </Sheets>
  );
}

"use client";
import { Sheets } from "@/ui/sheets";
import { Typography } from "@/ui/typography";

export function SheetsDrawerDemoNested() {
  return (
    <Sheets variant="drawer" multipleOpen>
      <Sheets.Trigger id="drawer-demo-1">Open Drawer 1</Sheets.Trigger>

      <Sheets.Content value="drawer-demo-1" side="right">
        <Typography el="p" prose="h1">
          Drawer 1
        </Typography>
        <Sheets.Trigger id="drawer-demo-2" className="absolute bottom-8">
          Open Drawer 2
        </Sheets.Trigger>
        <Sheets.Close />
      </Sheets.Content>

      <Sheets.Content value="drawer-demo-2" side="right">
        <Typography el="p" prose="h1">
          Drawer 2
        </Typography>
        <Sheets.Trigger id="drawer-demo-3" className="absolute bottom-8">
          Open Drawer 3
        </Sheets.Trigger>
        <Sheets.Close />
      </Sheets.Content>

      <Sheets.Content value="drawer-demo-3" side="left">
        <Typography el="p" prose="h1">
          Drawer 3
        </Typography>
        <Sheets.Trigger id="drawer-demo-4" className="absolute bottom-8">
          Open Drawer 4
        </Sheets.Trigger>
        <Sheets.Close />
      </Sheets.Content>

      <Sheets.Content value="drawer-demo-4" side="top">
        <Typography el="p" prose="h2">
          Drawer 4
        </Typography>
        <Sheets.Close />
      </Sheets.Content>
    </Sheets>
  );
}

"use client";
import { Sheets } from "@/ui/sheets";
import { ScrollArea } from "@/ui/scroll-area";

const TAGS = Array.from({ length: 58 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);

export function SheetsDropdownDemo() {
  return (
    <Sheets align="center" sideOffset={4} variant="dropdown">
      <Sheets.Trigger id="dropdown" className="m-auto">
        <span
          data-labelopen="Dropdown"
          data-labelclosed="Dropdown"
          className="group-data-[state=closed]:before:content-[attr(data-labelopen)] group-data-[state=open]:before:content-[attr(data-labelclosed)]"
        />
      </Sheets.Trigger>

      <Sheets.Content className="h-[178px] w-44">
        <ScrollArea className="h-full p-4">
          {TAGS.map(tag => (
            <p key={tag} className="flex min-w-max items-center gap-3 border-b border-muted py-1 text-sm text-muted-foreground">
              <FileIcon /> {tag}
            </p>
          ))}
        </ScrollArea>
      </Sheets.Content>
    </Sheets>
  );
}

"use client";
import { Sheets } from "@/ui/sheets";
import { ScrollArea } from "@/ui/scroll-area";
import { Button, buttonStyle } from "@/ui/button";
import { Stack } from "@/ui/stack";

export function SheetsDropdownDemoNested() {
  return (
    <Sheets variant="dropdown" sideOffset={2}>
      <Sheets.Trigger id="dropdown-nested-root" unstyled className={buttonStyle({ variant: "outline", size: "icon" })}>
        <DotsIcon />
        <span className="sr-only">Options</span>
      </Sheets.Trigger>

      <Sheets.Content value="dropdown-nested-root" className="rounded-lg p-2 [&_button]:justify-start">
        <ScrollArea>
          <Stack gap={4}>
            <Button variant="outline">Menu 1</Button>
            <Button variant="outline">Menu 3</Button>
            <Button variant="outline">Menu 4</Button>

            <DropdownMoreOptions />
          </Stack>
        </ScrollArea>
      </Sheets.Content>
    </Sheets>
  );
}

function DropdownMoreOptions() {
  return (
    <Sheets variant="dropdown" side="left" align="start" sideOffset={10} clickOutsideToClose>
      <Sheets.Trigger id="dropdown-nested-child-1" unstyled className={buttonStyle({ variant: "outline" })}>
        More...
      </Sheets.Trigger>

      <Sheets.Content className="rounded-lg p-2 [&_button]:justify-start">
        <ScrollArea>
          <Stack gap={4}>
            <Button variant="outline">Sub Menu 1</Button>
            <Button variant="outline">Sub Menu 3</Button>
            <Button variant="outline">Sub Menu 4</Button>
            <Button variant="outline">Sub Menu 5</Button>
          </Stack>
        </ScrollArea>
      </Sheets.Content>
    </Sheets>
  );
}