58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import { Checkbox, Label } from "@ai-ui/ui";
|
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
|
|
const meta = {
|
|
title: "Components/Checkbox",
|
|
component: Checkbox,
|
|
args: {
|
|
defaultChecked: true
|
|
},
|
|
argTypes: {
|
|
className: {
|
|
control: false
|
|
},
|
|
defaultChecked: {
|
|
control: "boolean"
|
|
},
|
|
disabled: {
|
|
control: "boolean"
|
|
},
|
|
invalid: {
|
|
control: "boolean"
|
|
}
|
|
},
|
|
parameters: {
|
|
layout: "centered"
|
|
},
|
|
tags: ["autodocs"]
|
|
} satisfies Meta<typeof Checkbox>;
|
|
|
|
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">
|
|
<Checkbox defaultChecked id="checkbox-default" />
|
|
<Label htmlFor="checkbox-default">Default checked</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Checkbox id="checkbox-unchecked" />
|
|
<Label htmlFor="checkbox-unchecked">Unchecked</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Checkbox disabled id="checkbox-disabled" />
|
|
<Label htmlFor="checkbox-disabled">Disabled</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Checkbox id="checkbox-invalid" invalid />
|
|
<Label htmlFor="checkbox-invalid">Invalid state</Label>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|