import { Button } from "pettyui/button";
import { TextField } from "pettyui/text-field";
import { NumberField } from "pettyui/number-field";
import { Checkbox } from "pettyui/checkbox";
import { Switch } from "pettyui/switch";
import { Toggle } from "pettyui/toggle";
import { ComponentDemo } from "../component-demo";
/** Button demo with primary, secondary, ghost, disabled variants. */
const ButtonDemo = () => (
);
/** TextField demo with label, description, and error state. */
const TextFieldDemo = () => (
Name
Your full name
Email
Invalid email address
);
/** NumberField demo with increment and decrement buttons. */
const NumberFieldDemo = () => (
Quantity
-
+
);
/** Checkbox demo with checked and unchecked states. */
const CheckboxDemo = () => (
{(state) => (
<>
{state.checked() ? "✓" : ""}
Accept terms and conditions
)}
{(state) => (
<>
{state.checked() ? "✓" : ""}
Subscribe to newsletter
)}
);
/** Switch demo with on/off toggle. */
const SwitchDemo = () => (
{(state) => (
<>
{state.checked() ? "On" : "Off"}
)}
);
/** Toggle demo with pressed/unpressed states. */
const ToggleDemo = () => (
Bold
);
/** Inputs Basic section with fundamental input components. */
export const InputsBasicSection = () => (
<>
);