58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import { Label, Switch } from "@ai-ui/ui";
|
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
|
|
const meta = {
|
|
title: "Components/Switch",
|
|
component: Switch,
|
|
args: {
|
|
defaultChecked: true
|
|
},
|
|
argTypes: {
|
|
className: {
|
|
control: false
|
|
},
|
|
defaultChecked: {
|
|
control: "boolean"
|
|
},
|
|
disabled: {
|
|
control: "boolean"
|
|
},
|
|
invalid: {
|
|
control: "boolean"
|
|
}
|
|
},
|
|
parameters: {
|
|
layout: "centered"
|
|
},
|
|
tags: ["autodocs"]
|
|
} satisfies Meta<typeof Switch>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Playground: Story = {};
|
|
|
|
export const States: Story = {
|
|
render: () => (
|
|
<div className="grid gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<Switch defaultChecked id="switch-live" />
|
|
<Label htmlFor="switch-live">Live publishing</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Switch id="switch-draft" />
|
|
<Label htmlFor="switch-draft">Draft only</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Switch disabled id="switch-disabled" />
|
|
<Label htmlFor="switch-disabled">Disabled</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Switch id="switch-invalid" invalid />
|
|
<Label htmlFor="switch-invalid">Invalid state</Label>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|