File size: 2,534 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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import { Accordion as Kobalte } from "@kobalte/core/accordion"
import { splitProps } from "solid-js"
import type { ComponentProps, ParentProps } from "solid-js"
export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
function AccordionRoot(props: AccordionProps) {
const [split, rest] = splitProps(props, ["class", "classList"])
return (
<Kobalte
{...rest}
data-component="accordion"
classList={{
...split.classList,
[split.class ?? ""]: !!split.class,
}}
/>
)
}
function AccordionItem(props: AccordionItemProps) {
const [split, rest] = splitProps(props, ["class", "classList"])
return (
<Kobalte.Item
{...rest}
data-slot="accordion-item"
classList={{
...split.classList,
[split.class ?? ""]: !!split.class,
}}
/>
)
}
function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
const [split, rest] = splitProps(props, ["class", "classList", "children"])
return (
<Kobalte.Header
{...rest}
data-slot="accordion-header"
classList={{
...split.classList,
[split.class ?? ""]: !!split.class,
}}
>
{split.children}
</Kobalte.Header>
)
}
function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
const [split, rest] = splitProps(props, ["class", "classList", "children"])
return (
<Kobalte.Trigger
{...rest}
data-slot="accordion-trigger"
classList={{
...split.classList,
[split.class ?? ""]: !!split.class,
}}
>
{split.children}
</Kobalte.Trigger>
)
}
function AccordionContent(props: ParentProps<AccordionContentProps>) {
const [split, rest] = splitProps(props, ["class", "classList", "children"])
return (
<Kobalte.Content
{...rest}
data-slot="accordion-content"
classList={{
...split.classList,
[split.class ?? ""]: !!split.class,
}}
>
{split.children}
</Kobalte.Content>
)
}
export const Accordion = Object.assign(AccordionRoot, {
Item: AccordionItem,
Header: AccordionHeader,
Trigger: AccordionTrigger,
Content: AccordionContent,
})
|