"use client";
import * as React from "react";
import * as A from "@radix-ui/react-accordion";
import { AnimatePresence, motion } from "motion/react";
import { CaretDownIcon } from "@phosphor-icons/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const RootCtx = React.createContext<string[]>([]);
const ItemCtx = React.createContext<string>("");

type AccordionProps = React.ComponentProps<typeof A.Root>;

/** Same API as Radix Accordion. Tracks open items so content can animate its height in and out. */
export function Accordion({ className, ...props }: AccordionProps) {
  const p = props as {
    type: "single" | "multiple";
    value?: string | string[];
    defaultValue?: string | string[];
    onValueChange?: (v: string | string[]) => void;
  };
  const [inner, setInner] = React.useState<string | string[] | undefined>(p.defaultValue);
  const current = p.value ?? inner;
  const open = current == null ? [] : Array.isArray(current) ? current : current ? [current] : [];
  const rootProps = {
    ...props,
    value: current ?? (p.type === "multiple" ? [] : ""),
    defaultValue: undefined,
    onValueChange: (v: string | string[]) => {
      setInner(v);
      p.onValueChange?.(v);
    },
  } as AccordionProps;
  return (
    <RootCtx.Provider value={open}>
      <A.Root className={cn("flex flex-col gap-3", className)} {...rootProps} />
    </RootCtx.Provider>
  );
}

export function AccordionItem({ className, value, ...p }: React.ComponentProps<typeof A.Item>) {
  return (
    <ItemCtx.Provider value={value}>
      <A.Item value={value} className={cn("rounded-xl bg-surface text-on-surface shadow-clay-sm", className)} {...p} />
    </ItemCtx.Provider>
  );
}

export function AccordionTrigger({ className, children, ...p }: React.ComponentProps<typeof A.Trigger>) {
  const open = React.useContext(RootCtx).includes(React.useContext(ItemCtx));
  return (
    <A.Header className="flex">
      <A.Trigger
        className={cn(
          "flex flex-1 cursor-pointer items-center justify-between gap-4 rounded-xl px-5 py-4 text-left font-bold [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50",
          className
        )}
        {...p}
      >
        <span className="inline-flex items-center gap-2.5 [&_svg]:size-[1.15em]">{children}</span>
        <motion.span
          animate={{ rotate: open ? 180 : 0 }}
          transition={springs.squish}
          className="grid size-8 shrink-0 place-items-center rounded-full bg-surface-sunken shadow-well"
        >
          <CaretDownIcon weight="bold" className="size-4" aria-hidden />
        </motion.span>
      </A.Trigger>
    </A.Header>
  );
}

export function AccordionContent({ className, children, ...p }: React.ComponentProps<typeof A.Content>) {
  const open = React.useContext(RootCtx).includes(React.useContext(ItemCtx));
  return (
    <AnimatePresence initial={false}>
      {open && (
        <A.Content asChild forceMount {...p}>
          <motion.div
            className="overflow-hidden"
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={springs.gentle}
          >
            <div className={cn("px-5 pb-5 text-sm font-medium text-on-surface-muted", className)}>{children}</div>
          </motion.div>
        </A.Content>
      )}
    </AnimatePresence>
  );
}
What is Parlemen?

Where does the data come from?

Is it free?

Installation

What is Parlemen?

Where does the data come from?

Is it free?
