27 lines
1.0 KiB
TypeScript
27 lines
1.0 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import * as React from "react"
|
||
|
|
import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
|
||
|
|
export type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Trigger> & {
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const BaseAccordionTrigger = BaseAccordion.Trigger as React.ElementType
|
||
|
|
|
||
|
|
export const AccordionTrigger = React.forwardRef<HTMLElement, AccordionTriggerProps>(
|
||
|
|
({ className, ...props }, ref) => (
|
||
|
|
<BaseAccordionTrigger
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
"group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none [&:not([data-disabled]):hover]:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:[&:not([data-disabled]):hover]:bg-neutral-800",
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
)
|
||
|
|
|
||
|
|
AccordionTrigger.displayName = "AccordionTrigger"
|