/
Alex_Ural
/
opencode
Обзор
Документация
Войти
/
Alex_Ural
/
opencode
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
dev
packages/ui/src/components/switch.stories.tsx
68 строк
1 KB
Adam
chore: storybook (#15285)
27 фев 2026, 01:05
Не верифицирован
27 фев 2026, 01:05
05d77b7
Код
Авторство
О чём код?
// @ts-nocheck import * as mod from "./switch" import { create } from "../storybook/scaffold" const docs = `### Overview Toggle control for binary settings. Use in settings panels or forms. ### API - Uses Kobalte Switch props (\`checked\`, \`defaultChecked\`, \`onChange\`). - Optional: \`hideLabel\`, \`description\`. - Children render as the label. ### Variants and states - Checked/unchecked, disabled states. ### Behavior - Controlled or uncontrolled usage via Kobalte props. ### Accessibility - TODO: confirm aria attributes from Kobalte. ### Theming/tokens - Uses \`data-component="switch"\` and slot attributes. ` const story = create({ title: "UI/Switch", mod, args: { defaultChecked: true, children: "Enable notifications" }, }) export default { title: "UI/Switch", id: "components-switch", component: story.meta.component, tags: ["autodocs"], parameters: { docs: { description: { component: docs, }, }, }, } export const Basic = story.Basic export const States = { render: () => ( <div style={{ display: "grid", gap: "12px" }}> <mod.Switch defaultChecked>Enabled</mod.Switch> <mod.Switch>Disabled</mod.Switch> <mod.Switch disabled>Disabled switch</mod.Switch> <mod.Switch description="Optional description">With description</mod.Switch> </div> ), } export const HiddenLabel = { args: { children: "Hidden label", hideLabel: true, defaultChecked: true, }, }