opencode/packages/ui/src/components/switch.tsx

30 lines
1.1 KiB
TypeScript
Raw Normal View History

2025-12-15 09:33:40 +08:00
import { Switch as Kobalte } from "@kobalte/core/switch"
2025-12-20 05:11:42 +08:00
import { Show, splitProps } from "solid-js"
2025-12-15 09:33:40 +08:00
import type { ComponentProps, ParentProps } from "solid-js"
export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>> {
hideLabel?: boolean
description?: string
}
export function Switch(props: SwitchProps) {
const [local, others] = splitProps(props, ["children", "class", "hideLabel", "description"])
return (
<Kobalte {...others} data-component="switch">
<Kobalte.Input data-slot="switch-input" />
2025-12-20 05:11:42 +08:00
<Show when={local.children}>
2025-12-15 09:33:40 +08:00
<Kobalte.Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
2025-12-20 05:11:42 +08:00
{local.children}
2025-12-15 09:33:40 +08:00
</Kobalte.Label>
</Show>
<Show when={local.description}>
<Kobalte.Description data-slot="switch-description">{local.description}</Kobalte.Description>
</Show>
<Kobalte.ErrorMessage data-slot="switch-error" />
<Kobalte.Control data-slot="switch-control">
<Kobalte.Thumb data-slot="switch-thumb" />
</Kobalte.Control>
</Kobalte>
)
}