@voilajsx/uikit
Version:
Cross-platform React components with beautiful themes and OKLCH color science
49 lines (48 loc) • 1.75 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";
import { cn } from "./utils.js";
const Accordion = AccordionPrimitive.Root;
const AccordionItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
AccordionPrimitive.Item,
{
ref,
className: cn("border-b", className),
...props
}
));
AccordionItem.displayName = "AccordionItem";
const AccordionTrigger = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
AccordionPrimitive.Trigger,
{
ref,
className: cn(
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
className
),
...props,
children: [
children,
/* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })
]
}
) }));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
const AccordionContent = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
AccordionPrimitive.Content,
{
ref,
className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
...props,
children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
}
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
export {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger
};
//# sourceMappingURL=accordion.js.map