@loke/design-system/dist/components/accordion/index.mjs

A design system with individually importable components

import{cn}from"@loke/design-system/cn";import{ChevronDownIcon,ChevronUpIcon}from"@loke/icons";import*as AccordionPrimitive from"@loke/ui/accordion";import{createSlottable}from"@loke/ui/slot";import{forwardRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";var Accordion=forwardRef(({className,...props},ref)=>jsx(AccordionPrimitive.Root,{className:cn("flex w-full flex-col",className),"data-slot":"accordion",ref,...props}));Accordion.displayName=AccordionPrimitive.Root.displayName;var AccordionItem=forwardRef(({className,...props},ref)=>jsx(AccordionPrimitive.Item,{className:cn("not-last:border-b",className),"data-slot":"accordion-item",ref,...props}));AccordionItem.displayName=AccordionPrimitive.Item.displayName;var Slottable=createSlottable("AccordionTrigger"),AccordionTrigger=forwardRef(({className,children,...props},ref)=>jsx(AccordionPrimitive.Header,{className:"flex",children:jsxs(AccordionPrimitive.Trigger,{className:cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left font-medium text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",className),"data-slot":"accordion-trigger",ref,...props,children:[jsx(Slottable,{children}),jsx(ChevronDownIcon,{className:"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden","data-slot":"accordion-trigger-icon"}),jsx(ChevronUpIcon,{className:"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline","data-slot":"accordion-trigger-icon"})]})}));AccordionTrigger.displayName=AccordionPrimitive.Trigger.displayName;var AccordionContent=forwardRef(({className,children,...props},ref)=>jsx(AccordionPrimitive.Content,{className:"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down","data-slot":"accordion-content",ref,...props,children:jsx("div",{className:cn("h-(--loke-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",className),children})}));AccordionContent.displayName=AccordionPrimitive.Content.displayName;export{AccordionTrigger,AccordionItem,AccordionContent,Accordion};