File size: 1,449 Bytes
9697ede | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import { Collapsible as Kobalte, CollapsibleRootProps } from "@kobalte/core/collapsible"
import { ComponentProps, ParentProps, splitProps } from "solid-js"
import { Icon } from "./icon"
export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
class?: string
classList?: ComponentProps<"div">["classList"]
variant?: "normal" | "ghost"
}
function CollapsibleRoot(props: CollapsibleProps) {
const [local, others] = splitProps(props, ["class", "classList", "variant"])
return (
<Kobalte
data-component="collapsible"
data-variant={local.variant || "normal"}
classList={{
...local.classList,
[local.class ?? ""]: !!local.class,
}}
{...others}
/>
)
}
function CollapsibleTrigger(props: ComponentProps<typeof Kobalte.Trigger>) {
return <Kobalte.Trigger data-slot="collapsible-trigger" {...props} />
}
function CollapsibleContent(props: ComponentProps<typeof Kobalte.Content>) {
return <Kobalte.Content data-slot="collapsible-content" {...props} />
}
function CollapsibleArrow(props?: ComponentProps<"div">) {
return (
<div data-slot="collapsible-arrow" {...(props || {})}>
<span data-slot="collapsible-arrow-icon">
<Icon name="chevron-down" size="small" />
</span>
</div>
)
}
export const Collapsible = Object.assign(CollapsibleRoot, {
Arrow: CollapsibleArrow,
Trigger: CollapsibleTrigger,
Content: CollapsibleContent,
})
|