UNPKG

@still-ui/accordion

Version:

Highly customizable and accessible Accordion component.

61 lines (58 loc) 1.79 kB
"use client"; import { AccordionContext } from "./chunk-MDNHWMKB.js"; // src/AccordionTrigger.tsx import { AccordionTrigger as Trigger, AccordionHeader } from "@radix-ui/react-accordion"; import { useContext } from "react"; import { tv } from "tailwind-variants"; import { ChevronDownIcon } from "@radix-ui/react-icons"; import React from "react"; import { jsx, jsxs } from "react/jsx-runtime"; var trigger = tv({ slots: { wrapper: "group flex w-full items-center justify-between gap-4 p-4 text-left", innerWrapper: "flex flex-col gap-1", tvTitle: "text-base", tvSubtitle: "text-xs", tvIcon: "transition-transform group-data-[state=open]:rotate-180" }, variants: { ui: { brutal: "", glassmorphic: { wrapper: "bg-white/50 backdrop-blur-md" }, neumorphic: "" }, splitted: { true: { wrapper: "p-6" } } } }); var { wrapper, innerWrapper, tvTitle, tvSubtitle, tvIcon } = trigger(); var AccordionTrigger = React.forwardRef(({ className, icon, subtitle, title, ...props }, ref) => { const { splitted, ui } = useContext(AccordionContext); return /* @__PURE__ */ jsx(AccordionHeader, { children: /* @__PURE__ */ jsxs( Trigger, { ref, className: wrapper({ class: className, ui, splitted }), ...props, children: [ /* @__PURE__ */ jsxs("div", { className: innerWrapper(), children: [ /* @__PURE__ */ jsx("span", { className: tvTitle(), children: title }), /* @__PURE__ */ jsx("span", { className: tvSubtitle(), children: subtitle }) ] }), icon ? icon : /* @__PURE__ */ jsx(ChevronDownIcon, { className: tvIcon() }) ] } ) }); }); var AccordionTrigger_default = AccordionTrigger; export { AccordionTrigger_default };