<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Checkbox from "./Checkbox.svelte";

	const { Story } = defineMeta({
		title: "UI/Checkbox",
		component: Checkbox,
		tags: ["autodocs"],
		argTypes: {
			checked: { control: "boolean" },
			indeterminate: { control: "boolean" },
			disabled: { control: "boolean" }
		},
		args: {
			checked: false,
			indeterminate: false,
			disabled: false
		}
	});
</script>

<!-- Checkbox content comes through its `children` snippet, provided here as Story slot content. -->
<Story name="Default">Item</Story>
<Story name="Checked" args={{ checked: true }}>Item</Story>
<Story name="Indeterminate" args={{ indeterminate: true }}>Item</Story>
<Story name="Disabled" args={{ disabled: true }}>Item</Story>
<Story name="Disabled checked" args={{ disabled: true, checked: true }}>Item</Story>

<Story name="States">
	<div class="flex flex-col gap-3">
		<Checkbox>Unchecked</Checkbox>
		<Checkbox checked>Checked</Checkbox>
		<Checkbox indeterminate>Indeterminate</Checkbox>
		<Checkbox disabled>Disabled</Checkbox>
		<Checkbox disabled checked>Disabled checked</Checkbox>
	</div>
</Story>
