Collapsible

Preview

@thomkrupa starred 3 repositories

Toggle

@data-slot/collapsible

@bejamas/ui

@astrojs/astro

Source

---
import { ChevronsUpDownIcon } from '@lucide/astro';

import { Button } from '@bejamas/ui/components/button';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@bejamas/ui/components/collapsible';
---

<Collapsible class="w-[350px] flex flex-col gap-2">
  <div class="flex items-center justify-between gap-4 px-4">
    <span class="text-sm font-semibold">@thomkrupa starred 3 repositories</span>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="icon" class="size-8">
        <ChevronsUpDownIcon class="size-4" />
        <span class="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">@data-slot/collapsible</div>
  <CollapsibleContent class="flex flex-col gap-2">
    <div class="rounded-md border px-4 py-2 font-mono text-sm">@bejamas/ui</div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">@astrojs/astro</div>
  </CollapsibleContent>
</Collapsible>

Installation

CLI

bun

 bunx bejamas add collapsible

npm

 npx bejamas add collapsible

pnpm

 pnpm dlx bejamas add collapsible

yarn

 yarn dlx bejamas add collapsible

Manual

---
/**
 * @component Collapsible
 * @title Collapsible
 * @description An interactive component that expands and collapses content sections.
 *
 * @preview
 *
 * <Collapsible class="w-[350px] flex flex-col gap-2">
 *   <div class="flex items-center justify-between gap-4 px-4">
 *     <span class="text-sm font-semibold">@thomkrupa starred 3 repositories</span>
 *     <CollapsibleTrigger asChild>
 *       <Button variant="ghost" size="icon" class="size-8">
 *         <ChevronsUpDownIcon class="size-4" />
 *         <span class="sr-only">Toggle</span>
 *       </Button>
 *     </CollapsibleTrigger>
 *   </div>
 *   <div class="rounded-md border px-4 py-2 font-mono text-sm">@data-slot/collapsible</div>
 *   <CollapsibleContent class="flex flex-col gap-2">
 *     <div class="rounded-md border px-4 py-2 font-mono text-sm">@bejamas/ui</div>
 *     <div class="rounded-md border px-4 py-2 font-mono text-sm">@astrojs/astro</div>
 *   </CollapsibleContent>
 * </Collapsible>
 *
 * @usage
 *
 * ```astro
 * ---
 * import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@bejamas/ui/components/collapsible';
 * import { Button } from '@bejamas/ui/components/button';
 * ---
 *
 * <Collapsible>
 *   <CollapsibleTrigger>
 *     <Button variant="ghost">Toggle</Button>
 *   </CollapsibleTrigger>
 *   <CollapsibleContent>
 *     Hidden content here
 *   </CollapsibleContent>
 * </Collapsible>
 * ```
 *
 * @examples
 *
 * ### Default open
 *
 * <Collapsible open class="w-[350px] flex flex-col gap-2">
 *   <div class="flex items-center justify-between gap-4 px-4">
 *     <span class="text-sm font-semibold">Expanded by default</span>
 *     <CollapsibleTrigger asChild>
 *       <Button variant="ghost" size="icon" class="size-8">
 *         <ChevronsUpDownIcon class="size-4" />
 *         <span class="sr-only">Toggle</span>
 *       </Button>
 *     </CollapsibleTrigger>
 *   </div>
 *   <CollapsibleContent class="flex flex-col gap-2">
 *     <div class="rounded-md border px-4 py-2 font-mono text-sm">This content is visible by default</div>
 *   </CollapsibleContent>
 * </Collapsible>
 *
 */

import { cn } from "@bejamas/ui/lib/utils";
import type { HTMLAttributes } from "astro/types";

type Props = {
  class?: string;
  open?: boolean;
} & HTMLAttributes<"div">;

const { class: className = "", open = false, ...rest } = Astro.props as Props;
---

<div
  {...rest}
  data-slot="collapsible"
  data-default-open={open}
  class={cn("group/collapsible", className)}
>
  <slot />
</div>

<script>
  import { createCollapsible } from "@data-slot/collapsible";

  document.querySelectorAll('[data-slot="collapsible"]').forEach((el) =>
    createCollapsible(el, {
      defaultOpen: el.dataset.defaultOpen === "true",
    }),
  );

  console.log("test123");
</script>

Usage

---
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@bejamas/ui/components/collapsible';
import { Button } from '@bejamas/ui/components/button';
---

<Collapsible>
  <CollapsibleTrigger>
    <Button variant="ghost">Toggle</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    Hidden content here
  </CollapsibleContent>
</Collapsible>

Examples

Default open

Preview

Expanded by default

Toggle

This content is visible by default

Source

---
import { ChevronsUpDownIcon } from '@lucide/astro';

import { Button } from '@bejamas/ui/components/button';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@bejamas/ui/components/collapsible';
---

<Collapsible open class="w-[350px] flex flex-col gap-2">
  <div class="flex items-center justify-between gap-4 px-4">
    <span class="text-sm font-semibold">Expanded by default</span>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="icon" class="size-8">
        <ChevronsUpDownIcon class="size-4" />
        <span class="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <CollapsibleContent class="flex flex-col gap-2">
    <div class="rounded-md border px-4 py-2 font-mono text-sm">This content is visible by default</div>
  </CollapsibleContent>
</Collapsible>