import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AlertCircle, Info } from "lucide-react";
import { useState } from "react";
import { Input } from "../../Input";
import { Label } from "../../Label";
import { FormControl } from "../FormControl";
import { Hint } from "../Hint";
const meta = {
    title: "Components/FormControl",
    component: FormControl,
    tags: ["!dev", "autodocs"],
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { FormControl, Hint } from '@openuidev/react-ui';\n```",
            },
        },
    },
    argTypes: {
        children: {
            control: false,
            description: "The child elements of the form control that accept Label, Input, and Hint components",
            table: {
                category: "Content",
                type: { summary: "ReactNode[] | ReactNode" },
            },
        },
        className: {
            control: false,
            description: "Additional CSS class name for custom styling",
            table: {
                category: "Styling",
                type: { summary: "string" },
            },
        },
        style: {
            control: false,
            description: "Inline CSS styles for custom styling",
            table: {
                category: "Styling",
                type: { summary: "CSSProperties" },
            },
        },
        hasError: {
            control: "boolean",
            description: "Toggles error styling for child inputs and hints",
            table: {
                category: "Behavior",
                type: { summary: "boolean" },
                defaultValue: { summary: "false" },
            },
        },
    },
};
export default meta;
export const WithLabelAndHint = {
    render: (args) => (_jsxs(FormControl, { children: [_jsx(Label, { htmlFor: "username", required: true, children: "Username" }), _jsx(Input, { placeholder: "Enter username", id: "username" }), _jsxs(Hint, { children: [_jsx(Info, { size: 14 }), _jsx("span", { children: "Must be at least 4 characters long" })] })] })),
};
export const WithMultipleChildren = {
    render: (args) => (_jsxs(FormControl, { children: [_jsx(Label, { htmlFor: "profile-information", children: "Profile Information" }), _jsx(Input, { placeholder: "Full name", id: "profile-information" }), _jsx(Input, { placeholder: "Bio" }), _jsx(Hint, { children: "This information will be displayed on your public profile" })] })),
};
export const LengthValidation = {
    render: () => {
        const [value, setValue] = useState("");
        const hasError = value.length > 0 && (value.length > 10 || value.length < 3);
        const helperText = hasError
            ? "Name must be between 3 and 10 characters"
            : "Enter a name between 3 and 10 characters";
        return (_jsx("div", { style: { width: 420 }, children: _jsxs(FormControl, { hasError: hasError, children: [_jsx(Label, { htmlFor: "name-validated", children: "Name" }), _jsx(Input, { id: "name-validated", placeholder: "Type here", value: value, onChange: (e) => setValue(e.target.value) }), _jsxs(Hint, { children: [hasError ? _jsx(AlertCircle, { size: 14 }) : _jsx(Info, { size: 14 }), _jsx("span", { children: helperText })] })] }) }));
    },
};
//# sourceMappingURL=FormControl.stories.js.map