import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { CheckboxGroupItem } from './checkbox-group-item.js';
/**
 * **CheckboxGroupItem** renders a single checkbox row with a label and optional
 * description. It is the building block used inside `CheckboxGroup` but can
 * also be used standalone when you need a labelled checkbox with a description.
 */
const meta = {
    title: 'Primitives/CheckboxGroupItem',
    component: CheckboxGroupItem,
    parameters: { layout: 'centered' },
    tags: ['autodocs'],
};
export default meta;
/** Unchecked item with label only. */
export const Default = {
    render: function Render() {
        const [checked, setChecked] = useState(false);
        return (_jsx(CheckboxGroupItem, { id: "demo", label: "Enable notifications", checked: checked, onCheckedChange: setChecked }));
    },
};
/** Item with label and description text. */
export const WithDescription = {
    render: function Render() {
        const [checked, setChecked] = useState(false);
        return (_jsx(CheckboxGroupItem, { id: "demo-desc", label: "Auto-approve PRD", description: "Automatically approve requirements and move to planning.", checked: checked, onCheckedChange: setChecked }));
    },
};
/** Disabled state — both checked and unchecked. */
export const Disabled = {
    render: () => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(CheckboxGroupItem, { id: "disabled-off", label: "Disabled unchecked", description: "Cannot be toggled.", checked: false, onCheckedChange: () => undefined, disabled: true }), _jsx(CheckboxGroupItem, { id: "disabled-on", label: "Disabled checked", description: "Cannot be toggled.", checked: true, onCheckedChange: () => undefined, disabled: true })] })),
};
