@petrarca/sonnet-playground 0.2.0 → 0.3.0

package/dist/chunk-MT4ILA37.js

@@ -0,0 +1,563 @@
+import {
+  ExampleBlock
+} from "./chunk-C2EZ2ECG.js";
+
+// src/pages/PlayFormComponents.tsx
+import { useState } from "react";
+import { SimpleStack, Card } from "@petrarca/sonnet-ui";
+import {
+  FormInput,
+  FormTextarea,
+  FormNumberInput,
+  FormCheckbox,
+  FormSelect,
+  FormMultiSelect,
+  FormTagsInput
+} from "@petrarca/sonnet-forms";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PlayFormComponents() {
+  const [textValue, setTextValue] = useState("");
+  const [emailValue, setEmailValue] = useState("");
+  const [passwordValue, setPasswordValue] = useState("");
+  const [urlValue, setUrlValue] = useState("");
+  const [textareaValue, setTextareaValue] = useState("");
+  const [textareaError, setTextareaError] = useState("");
+  const [numberValue, setNumberValue] = useState(void 0);
+  const [rangeValue, setRangeValue] = useState(5);
+  const [decimalValue, setDecimalValue] = useState(
+    void 0
+  );
+  const [checkboxValue, setCheckboxValue] = useState(false);
+  const [checkboxIndeterminate, setCheckboxIndeterminate] = useState("indeterminate");
+  const [selectValue, setSelectValue] = useState("");
+  const [selectRequired, setSelectRequired] = useState("");
+  const [multiSelectValue, setMultiSelectValue] = useState([]);
+  const [tagsValue, setTagsValue] = useState(["react", "typescript"]);
+  const colorOptions = [
+    { label: "Red", value: "red" },
+    { label: "Green", value: "green" },
+    { label: "Blue", value: "blue" },
+    { label: "Yellow", value: "yellow" },
+    { label: "Purple", value: "purple" }
+  ];
+  const countryOptions = [
+    { label: "United States", value: "us" },
+    { label: "Canada", value: "ca" },
+    { label: "United Kingdom", value: "uk" },
+    { label: "Germany", value: "de" },
+    { label: "France", value: "fr" },
+    { label: "Japan", value: "jp" },
+    { label: "Australia", value: "au" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Form Components Playground" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Test all custom Form wrapper components with labels, descriptions, and error states" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "md", style: { maxWidth: "900px" }, children: [
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "FormInput" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Text input wrapper with label, description, and error support. Supports all HTML input types." }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Basic", children: /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Username",
+              value: textValue,
+              onChange: (e) => setTextValue(e.target.value),
+              placeholder: "Enter username"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With description", children: /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Full Name",
+              description: "Your first and last name",
+              value: textValue,
+              onChange: (e) => setTextValue(e.target.value),
+              placeholder: "John Doe"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Required", children: /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Email",
+              required: true,
+              value: emailValue,
+              onChange: (e) => setEmailValue(e.target.value),
+              placeholder: "john@example.com"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With error", children: /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Email",
+              value: emailValue,
+              onChange: (e) => setEmailValue(e.target.value),
+              error: "Invalid email format",
+              placeholder: "john@example.com"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Password", children: /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Password",
+              type: "password",
+              value: passwordValue,
+              onChange: (e) => setPasswordValue(e.target.value),
+              placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Disabled", children: /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Readonly Field",
+              value: "Cannot edit this",
+              onChange: () => {
+              },
+              disabled: true
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: `<FormInput
+  label="Username"
+  value={textValue}
+  onChange={(e) => setTextValue(e.target.value)}
+  placeholder="Enter username"
+  description="Optional description"
+  error="Optional error message"
+  required={false}
+  disabled={false}
+/>` }) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "Current value: ",
+          textValue || "(empty)"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "FormTextarea" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Multi-line text input with label, description, and error support." }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Basic", children: /* @__PURE__ */ jsx(
+            FormTextarea,
+            {
+              label: "Description",
+              value: textareaValue,
+              onChange: (e) => setTextareaValue(e.target.value),
+              placeholder: "Enter a detailed description...",
+              rows: 4
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With description", children: /* @__PURE__ */ jsx(
+            FormTextarea,
+            {
+              label: "Bio",
+              description: "Tell us about yourself (max 500 characters)",
+              value: textareaValue,
+              onChange: (e) => setTextareaValue(e.target.value),
+              placeholder: "I am a...",
+              rows: 3
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With error validation", children: /* @__PURE__ */ jsx(
+            FormTextarea,
+            {
+              label: "Comments",
+              value: textareaValue,
+              onChange: (e) => {
+                setTextareaValue(e.target.value);
+                setTextareaError(
+                  e.target.value.length > 100 ? "Maximum 100 characters allowed" : ""
+                );
+              },
+              error: textareaError,
+              placeholder: "Enter your comments...",
+              rows: 3
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Disabled", children: /* @__PURE__ */ jsx(
+            FormTextarea,
+            {
+              label: "Readonly Text",
+              value: "This cannot be edited",
+              onChange: () => {
+              },
+              disabled: true,
+              rows: 2
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: `<FormTextarea
+  label="Description"
+  value={textareaValue}
+  onChange={(e) => setTextareaValue(e.target.value)}
+  placeholder="Enter text..."
+  rows={4}
+  description="Optional description"
+  error="Optional error message"
+/>` }) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "Current value: ",
+          textareaValue || "(empty)"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "FormNumberInput" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Number input with min/max validation and step control." }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Basic", children: /* @__PURE__ */ jsx(
+            FormNumberInput,
+            {
+              label: "Age",
+              value: numberValue,
+              onChange: setNumberValue,
+              placeholder: "Enter age"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With min/max/step", children: /* @__PURE__ */ jsx(
+            FormNumberInput,
+            {
+              label: "Rating (1-10)",
+              value: rangeValue,
+              onChange: setRangeValue,
+              min: 1,
+              max: 10,
+              step: 1,
+              description: "Rate from 1 to 10"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Decimal", children: /* @__PURE__ */ jsx(
+            FormNumberInput,
+            {
+              label: "Price",
+              value: decimalValue,
+              onChange: setDecimalValue,
+              allowDecimal: true,
+              step: 0.01,
+              placeholder: "0.00",
+              description: "Enter price with cents"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Required", children: /* @__PURE__ */ jsx(
+            FormNumberInput,
+            {
+              label: "Quantity",
+              required: true,
+              value: numberValue,
+              onChange: setNumberValue,
+              min: 0,
+              placeholder: "0"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With error", children: /* @__PURE__ */ jsx(
+            FormNumberInput,
+            {
+              label: "Invalid Input",
+              value: numberValue,
+              onChange: setNumberValue,
+              error: "Value must be greater than 0"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: `<FormNumberInput
+  label="Age"
+  value={numberValue}
+  onChange={setNumberValue}
+  min={0}
+  max={120}
+  step={1}
+  allowDecimal={false}
+/>` }) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "Current value: ",
+          numberValue ?? "(empty)"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "FormCheckbox" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Checkbox with label, description, and indeterminate state support." }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Basic", children: /* @__PURE__ */ jsx(
+            FormCheckbox,
+            {
+              label: "Accept terms and conditions",
+              checked: checkboxValue,
+              onChange: (checked) => setCheckboxValue(checked === true)
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With description", children: /* @__PURE__ */ jsx(
+            FormCheckbox,
+            {
+              label: "Subscribe to newsletter",
+              description: "Receive weekly updates about new features",
+              checked: checkboxValue,
+              onChange: (checked) => setCheckboxValue(checked === true)
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Required", children: /* @__PURE__ */ jsx(
+            FormCheckbox,
+            {
+              label: "I agree to the privacy policy",
+              required: true,
+              checked: checkboxValue,
+              onChange: (checked) => setCheckboxValue(checked === true)
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Indeterminate", children: /* @__PURE__ */ jsx(
+            FormCheckbox,
+            {
+              label: "Select all items",
+              description: "Some items are selected",
+              checked: checkboxIndeterminate,
+              onChange: setCheckboxIndeterminate
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Disabled", children: /* @__PURE__ */ jsx(
+            FormCheckbox,
+            {
+              label: "Cannot change this",
+              checked: true,
+              onChange: () => {
+              },
+              disabled: true
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With error", children: /* @__PURE__ */ jsx(
+            FormCheckbox,
+            {
+              label: "Required checkbox",
+              checked: checkboxValue,
+              onChange: (checked) => setCheckboxValue(checked === true),
+              error: "You must accept to continue"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: `<FormCheckbox
+  label="Accept terms"
+  checked={checkboxValue}
+  onChange={(checked) => setCheckboxValue(checked === true)}
+  description="Optional description"
+  required={false}
+/>` }) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "Current value: ",
+          String(checkboxValue)
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "FormSelect" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Searchable single-select dropdown with label and error support." }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Basic", children: /* @__PURE__ */ jsx(
+            FormSelect,
+            {
+              label: "Favorite Color",
+              value: selectValue,
+              onChange: (value) => setSelectValue(value || ""),
+              options: colorOptions,
+              placeholder: "Choose a color"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With description", children: /* @__PURE__ */ jsx(
+            FormSelect,
+            {
+              label: "Country",
+              description: "Select your country of residence",
+              value: selectValue,
+              onChange: (value) => setSelectValue(value || ""),
+              options: countryOptions,
+              placeholder: "Select country"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Required", children: /* @__PURE__ */ jsx(
+            FormSelect,
+            {
+              label: "Required Selection",
+              required: true,
+              value: selectRequired,
+              onChange: (value) => setSelectRequired(value || ""),
+              options: colorOptions,
+              placeholder: "Must select one"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Disabled", children: /* @__PURE__ */ jsx(
+            FormSelect,
+            {
+              label: "Disabled Select",
+              value: "blue",
+              onChange: () => {
+              },
+              options: colorOptions,
+              disabled: true,
+              placeholder: "Cannot change"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With error", children: /* @__PURE__ */ jsx(
+            FormSelect,
+            {
+              label: "Invalid Selection",
+              value: selectValue,
+              onChange: (value) => setSelectValue(value || ""),
+              options: colorOptions,
+              error: "This field is required",
+              placeholder: "Select option"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: `<FormSelect
+  label="Country"
+  value={selectValue}
+  onChange={(value) => setSelectValue(value || '')}
+  options={[
+    { label: 'USA', value: 'us' },
+    { label: 'UK', value: 'uk' }
+  ]}
+  placeholder="Select..."
+/>` }) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "Current value: ",
+          selectValue || "(none selected)"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "FormMultiSelect" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Searchable multi-select dropdown with badges." }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Basic", children: /* @__PURE__ */ jsx(
+            FormMultiSelect,
+            {
+              label: "Favorite Colors",
+              value: multiSelectValue,
+              onChange: setMultiSelectValue,
+              options: colorOptions,
+              placeholder: "Select multiple colors"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With description", children: /* @__PURE__ */ jsx(
+            FormMultiSelect,
+            {
+              label: "Visited Countries",
+              description: "Select all countries you've visited",
+              value: multiSelectValue,
+              onChange: setMultiSelectValue,
+              options: countryOptions,
+              placeholder: "Select countries"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Required", children: /* @__PURE__ */ jsx(
+            FormMultiSelect,
+            {
+              label: "Skills",
+              required: true,
+              value: multiSelectValue,
+              onChange: setMultiSelectValue,
+              options: [
+                { label: "JavaScript", value: "js" },
+                { label: "TypeScript", value: "ts" },
+                { label: "Python", value: "py" },
+                { label: "Java", value: "java" }
+              ],
+              placeholder: "Select at least one skill"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With error", children: /* @__PURE__ */ jsx(
+            FormMultiSelect,
+            {
+              label: "Categories",
+              value: multiSelectValue,
+              onChange: setMultiSelectValue,
+              options: colorOptions,
+              error: "Please select at least 2 categories",
+              placeholder: "Select categories"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: `<FormMultiSelect
+  label="Skills"
+  value={multiSelectValue}
+  onChange={setMultiSelectValue}
+  options={skillOptions}
+  placeholder="Select skills"
+/>` }) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "Current value:",
+          " ",
+          multiSelectValue.length > 0 ? multiSelectValue.join(", ") : "(none selected)"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "FormTagsInput" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Free-text tag input with creation and deletion." }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Basic", children: /* @__PURE__ */ jsx(
+            FormTagsInput,
+            {
+              label: "Technologies",
+              value: tagsValue,
+              onChange: setTagsValue,
+              placeholder: "Type and press Enter to add tags"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With description", children: /* @__PURE__ */ jsx(
+            FormTagsInput,
+            {
+              label: "Skills",
+              description: "Add your programming skills (press Enter after each)",
+              value: tagsValue,
+              onChange: setTagsValue,
+              placeholder: "e.g., React, Node.js"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Required", children: /* @__PURE__ */ jsx(
+            FormTagsInput,
+            {
+              label: "Keywords",
+              required: true,
+              value: tagsValue,
+              onChange: setTagsValue,
+              placeholder: "Add at least one keyword"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "With error", children: /* @__PURE__ */ jsx(
+            FormTagsInput,
+            {
+              label: "Tags",
+              value: tagsValue,
+              onChange: setTagsValue,
+              error: "Maximum 5 tags allowed",
+              placeholder: "Add tags"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Disabled", children: /* @__PURE__ */ jsx(
+            FormTagsInput,
+            {
+              label: "Fixed Tags",
+              value: ["readonly", "tags"],
+              onChange: () => {
+              },
+              disabled: true,
+              placeholder: "Cannot edit"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: `<FormTagsInput
+  label="Technologies"
+  value={tagsValue}
+  onChange={setTagsValue}
+  placeholder="Type and press Enter"
+  description="Optional description"
+/>` }) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "Current tags:",
+          " ",
+          tagsValue.length > 0 ? tagsValue.join(", ") : "(none)"
+        ] })
+      ] }) })
+    ] }) })
+  ] });
+}
+
+export {
+  PlayFormComponents
+};
+//# sourceMappingURL=chunk-MT4ILA37.js.map

package/dist/chunk-MT4ILA37.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayFormComponents.tsx"],"sourcesContent":["/**\n * Playground page for testing Form components\n * Accessible at /playground/form-components\n *\n * Tests all custom Form wrapper components that provide consistent\n * label, description, and error handling around base UI components.\n */\n\nimport { useState } from \"react\";\nimport { SimpleStack, Card } from \"@petrarca/sonnet-ui\";\nimport { ExampleBlock } from \"../PlaygroundSection\";\nimport {\n  FormInput,\n  FormTextarea,\n  FormNumberInput,\n  FormCheckbox,\n  FormSelect,\n  FormMultiSelect,\n  FormTagsInput,\n} from \"@petrarca/sonnet-forms\";\n\nexport default function PlayFormComponents() {\n  // FormInput states\n  const [textValue, setTextValue] = useState(\"\");\n  const [emailValue, setEmailValue] = useState(\"\");\n  const [passwordValue, setPasswordValue] = useState(\"\");\n  const [urlValue, setUrlValue] = useState(\"\");\n\n  // FormTextarea states\n  const [textareaValue, setTextareaValue] = useState(\"\");\n  const [textareaError, setTextareaError] = useState(\"\");\n\n  // FormNumberInput states\n  const [numberValue, setNumberValue] = useState<number | undefined>(undefined);\n  const [rangeValue, setRangeValue] = useState<number | undefined>(5);\n  const [decimalValue, setDecimalValue] = useState<number | undefined>(\n    undefined,\n  );\n\n  // FormCheckbox states\n  const [checkboxValue, setCheckboxValue] = useState(false);\n  const [checkboxIndeterminate, setCheckboxIndeterminate] = useState<\n    boolean | \"indeterminate\"\n  >(\"indeterminate\");\n\n  // FormSelect states\n  const [selectValue, setSelectValue] = useState(\"\");\n  const [selectRequired, setSelectRequired] = useState(\"\");\n\n  // FormMultiSelect states\n  const [multiSelectValue, setMultiSelectValue] = useState<string[]>([]);\n\n  // FormTagsInput states\n  const [tagsValue, setTagsValue] = useState<string[]>([\"react\", \"typescript\"]);\n\n  // Options for selects\n  const colorOptions = [\n    { label: \"Red\", value: \"red\" },\n    { label: \"Green\", value: \"green\" },\n    { label: \"Blue\", value: \"blue\" },\n    { label: \"Yellow\", value: \"yellow\" },\n    { label: \"Purple\", value: \"purple\" },\n  ];\n\n  const countryOptions = [\n    { label: \"United States\", value: \"us\" },\n    { label: \"Canada\", value: \"ca\" },\n    { label: \"United Kingdom\", value: \"uk\" },\n    { label: \"Germany\", value: \"de\" },\n    { label: \"France\", value: \"fr\" },\n    { label: \"Japan\", value: \"jp\" },\n    { label: \"Australia\", value: \"au\" },\n  ];\n\n  return (\n    <div className=\"w-full max-w-4xl space-y-6\">\n      <div>\n        <h1>Form Components Playground</h1>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Test all custom Form wrapper components with labels, descriptions, and\n          error states\n        </p>\n      </div>\n\n      <div>\n        <SimpleStack gap=\"md\" style={{ maxWidth: \"900px\" }}>\n          {/* FormInput */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormInput</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Text input wrapper with label, description, and error support.\n                Supports all HTML input types.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormInput\n                    label=\"Username\"\n                    value={textValue}\n                    onChange={(e) => setTextValue(e.target.value)}\n                    placeholder=\"Enter username\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormInput\n                    label=\"Full Name\"\n                    description=\"Your first and last name\"\n                    value={textValue}\n                    onChange={(e) => setTextValue(e.target.value)}\n                    placeholder=\"John Doe\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormInput\n                    label=\"Email\"\n                    required\n                    value={emailValue}\n                    onChange={(e) => setEmailValue(e.target.value)}\n                    placeholder=\"john@example.com\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With error\">\n                  <FormInput\n                    label=\"Email\"\n                    value={emailValue}\n                    onChange={(e) => setEmailValue(e.target.value)}\n                    error=\"Invalid email format\"\n                    placeholder=\"john@example.com\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Password\">\n                  <FormInput\n                    label=\"Password\"\n                    type=\"password\"\n                    value={passwordValue}\n                    onChange={(e) => setPasswordValue(e.target.value)}\n                    placeholder=\"••••••••\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Disabled\">\n                  <FormInput\n                    label=\"Readonly Field\"\n                    value=\"Cannot edit this\"\n                    onChange={() => {}}\n                    disabled\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormInput\n  label=\"Username\"\n  value={textValue}\n  onChange={(e) => setTextValue(e.target.value)}\n  placeholder=\"Enter username\"\n  description=\"Optional description\"\n  error=\"Optional error message\"\n  required={false}\n  disabled={false}\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {textValue || \"(empty)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormTextarea */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormTextarea</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Multi-line text input with label, description, and error\n                support.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormTextarea\n                    label=\"Description\"\n                    value={textareaValue}\n                    onChange={(e) => setTextareaValue(e.target.value)}\n                    placeholder=\"Enter a detailed description...\"\n                    rows={4}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormTextarea\n                    label=\"Bio\"\n                    description=\"Tell us about yourself (max 500 characters)\"\n                    value={textareaValue}\n                    onChange={(e) => setTextareaValue(e.target.value)}\n                    placeholder=\"I am a...\"\n                    rows={3}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With error validation\">\n                  <FormTextarea\n                    label=\"Comments\"\n                    value={textareaValue}\n                    onChange={(e) => {\n                      setTextareaValue(e.target.value);\n                      setTextareaError(\n                        e.target.value.length > 100\n                          ? \"Maximum 100 characters allowed\"\n                          : \"\",\n                      );\n                    }}\n                    error={textareaError}\n                    placeholder=\"Enter your comments...\"\n                    rows={3}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Disabled\">\n                  <FormTextarea\n                    label=\"Readonly Text\"\n                    value=\"This cannot be edited\"\n                    onChange={() => {}}\n                    disabled\n                    rows={2}\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormTextarea\n  label=\"Description\"\n  value={textareaValue}\n  onChange={(e) => setTextareaValue(e.target.value)}\n  placeholder=\"Enter text...\"\n  rows={4}\n  description=\"Optional description\"\n  error=\"Optional error message\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {textareaValue || \"(empty)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormNumberInput */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormNumberInput</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Number input with min/max validation and step control.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormNumberInput\n                    label=\"Age\"\n                    value={numberValue}\n                    onChange={setNumberValue}\n                    placeholder=\"Enter age\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With min/max/step\">\n                  <FormNumberInput\n                    label=\"Rating (1-10)\"\n                    value={rangeValue}\n                    onChange={setRangeValue}\n                    min={1}\n                    max={10}\n                    step={1}\n                    description=\"Rate from 1 to 10\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Decimal\">\n                  <FormNumberInput\n                    label=\"Price\"\n                    value={decimalValue}\n                    onChange={setDecimalValue}\n                    allowDecimal={true}\n                    step={0.01}\n                    placeholder=\"0.00\"\n                    description=\"Enter price with cents\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormNumberInput\n                    label=\"Quantity\"\n                    required\n                    value={numberValue}\n                    onChange={setNumberValue}\n                    min={0}\n                    placeholder=\"0\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With error\">\n                  <FormNumberInput\n                    label=\"Invalid Input\"\n                    value={numberValue}\n                    onChange={setNumberValue}\n                    error=\"Value must be greater than 0\"\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormNumberInput\n  label=\"Age\"\n  value={numberValue}\n  onChange={setNumberValue}\n  min={0}\n  max={120}\n  step={1}\n  allowDecimal={false}\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {numberValue ?? \"(empty)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormCheckbox */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormCheckbox</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Checkbox with label, description, and indeterminate state\n                support.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormCheckbox\n                    label=\"Accept terms and conditions\"\n                    checked={checkboxValue}\n                    onChange={(checked) => setCheckboxValue(checked === true)}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormCheckbox\n                    label=\"Subscribe to newsletter\"\n                    description=\"Receive weekly updates about new features\"\n                    checked={checkboxValue}\n                    onChange={(checked) => setCheckboxValue(checked === true)}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormCheckbox\n                    label=\"I agree to the privacy policy\"\n                    required\n                    checked={checkboxValue}\n                    onChange={(checked) => setCheckboxValue(checked === true)}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Indeterminate\">\n                  <FormCheckbox\n                    label=\"Select all items\"\n                    description=\"Some items are selected\"\n                    checked={checkboxIndeterminate}\n                    onChange={setCheckboxIndeterminate}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Disabled\">\n                  <FormCheckbox\n                    label=\"Cannot change this\"\n                    checked={true}\n                    onChange={() => {}}\n                    disabled\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With error\">\n                  <FormCheckbox\n                    label=\"Required checkbox\"\n                    checked={checkboxValue}\n                    onChange={(checked) => setCheckboxValue(checked === true)}\n                    error=\"You must accept to continue\"\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormCheckbox\n  label=\"Accept terms\"\n  checked={checkboxValue}\n  onChange={(checked) => setCheckboxValue(checked === true)}\n  description=\"Optional description\"\n  required={false}\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {String(checkboxValue)}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormSelect */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormSelect</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Searchable single-select dropdown with label and error support.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormSelect\n                    label=\"Favorite Color\"\n                    value={selectValue}\n                    onChange={(value) => setSelectValue(value || \"\")}\n                    options={colorOptions}\n                    placeholder=\"Choose a color\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormSelect\n                    label=\"Country\"\n                    description=\"Select your country of residence\"\n                    value={selectValue}\n                    onChange={(value) => setSelectValue(value || \"\")}\n                    options={countryOptions}\n                    placeholder=\"Select country\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormSelect\n                    label=\"Required Selection\"\n                    required\n                    value={selectRequired}\n                    onChange={(value) => setSelectRequired(value || \"\")}\n                    options={colorOptions}\n                    placeholder=\"Must select one\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Disabled\">\n                  <FormSelect\n                    label=\"Disabled Select\"\n                    value=\"blue\"\n                    onChange={() => {}}\n                    options={colorOptions}\n                    disabled\n                    placeholder=\"Cannot change\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With error\">\n                  <FormSelect\n                    label=\"Invalid Selection\"\n                    value={selectValue}\n                    onChange={(value) => setSelectValue(value || \"\")}\n                    options={colorOptions}\n                    error=\"This field is required\"\n                    placeholder=\"Select option\"\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormSelect\n  label=\"Country\"\n  value={selectValue}\n  onChange={(value) => setSelectValue(value || '')}\n  options={[\n    { label: 'USA', value: 'us' },\n    { label: 'UK', value: 'uk' }\n  ]}\n  placeholder=\"Select...\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {selectValue || \"(none selected)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormMultiSelect */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormMultiSelect</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Searchable multi-select dropdown with badges.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormMultiSelect\n                    label=\"Favorite Colors\"\n                    value={multiSelectValue}\n                    onChange={setMultiSelectValue}\n                    options={colorOptions}\n                    placeholder=\"Select multiple colors\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormMultiSelect\n                    label=\"Visited Countries\"\n                    description=\"Select all countries you've visited\"\n                    value={multiSelectValue}\n                    onChange={setMultiSelectValue}\n                    options={countryOptions}\n                    placeholder=\"Select countries\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormMultiSelect\n                    label=\"Skills\"\n                    required\n                    value={multiSelectValue}\n                    onChange={setMultiSelectValue}\n                    options={[\n                      { label: \"JavaScript\", value: \"js\" },\n                      { label: \"TypeScript\", value: \"ts\" },\n                      { label: \"Python\", value: \"py\" },\n                      { label: \"Java\", value: \"java\" },\n                    ]}\n                    placeholder=\"Select at least one skill\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With error\">\n                  <FormMultiSelect\n                    label=\"Categories\"\n                    value={multiSelectValue}\n                    onChange={setMultiSelectValue}\n                    options={colorOptions}\n                    error=\"Please select at least 2 categories\"\n                    placeholder=\"Select categories\"\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormMultiSelect\n  label=\"Skills\"\n  value={multiSelectValue}\n  onChange={setMultiSelectValue}\n  options={skillOptions}\n  placeholder=\"Select skills\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value:{\" \"}\n                {multiSelectValue.length > 0\n                  ? multiSelectValue.join(\", \")\n                  : \"(none selected)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormTagsInput */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormTagsInput</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Free-text tag input with creation and deletion.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormTagsInput\n                    label=\"Technologies\"\n                    value={tagsValue}\n                    onChange={setTagsValue}\n                    placeholder=\"Type and press Enter to add tags\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormTagsInput\n                    label=\"Skills\"\n                    description=\"Add your programming skills (press Enter after each)\"\n                    value={tagsValue}\n                    onChange={setTagsValue}\n                    placeholder=\"e.g., React, Node.js\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormTagsInput\n                    label=\"Keywords\"\n                    required\n                    value={tagsValue}\n                    onChange={setTagsValue}\n                    placeholder=\"Add at least one keyword\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With error\">\n                  <FormTagsInput\n                    label=\"Tags\"\n                    value={tagsValue}\n                    onChange={setTagsValue}\n                    error=\"Maximum 5 tags allowed\"\n                    placeholder=\"Add tags\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Disabled\">\n                  <FormTagsInput\n                    label=\"Fixed Tags\"\n                    value={[\"readonly\", \"tags\"]}\n                    onChange={() => {}}\n                    disabled\n                    placeholder=\"Cannot edit\"\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormTagsInput\n  label=\"Technologies\"\n  value={tagsValue}\n  onChange={setTagsValue}\n  placeholder=\"Type and press Enter\"\n  description=\"Optional description\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current tags:{\" \"}\n                {tagsValue.length > 0 ? tagsValue.join(\", \") : \"(none)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n        </SimpleStack>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}