@petrarca/sonnet-playground 0.1.2

package/dist/chunk-5V27QDAY.js

@@ -0,0 +1,617 @@
+// 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",
+    {
+      style: {
+        width: "100%",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { padding: "1rem 1rem 0 1rem" }, 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", { style: { flex: 1, overflow: "auto", padding: "0 1rem 1rem 1rem" }, 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("p", { className: "text-lg font-semibold", 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(SimpleStack, { gap: "xs", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Basic Text Input:" }),
+              /* @__PURE__ */ jsx(
+                FormInput,
+                {
+                  label: "Username",
+                  value: textValue,
+                  onChange: (e) => setTextValue(e.target.value),
+                  placeholder: "Enter username"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Description:" }),
+              /* @__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("p", { className: "text-sm font-medium mt-2", children: "Required Field:" }),
+              /* @__PURE__ */ jsx(
+                FormInput,
+                {
+                  label: "Email",
+                  required: true,
+                  value: emailValue,
+                  onChange: (e) => setEmailValue(e.target.value),
+                  placeholder: "john@example.com"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Error:" }),
+              /* @__PURE__ */ jsx(
+                FormInput,
+                {
+                  label: "Email",
+                  value: emailValue,
+                  onChange: (e) => setEmailValue(e.target.value),
+                  error: "Invalid email format",
+                  placeholder: "john@example.com"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "Password Input:" }),
+              /* @__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("p", { className: "text-sm font-medium mt-2", children: "URL Input:" }),
+              /* @__PURE__ */ jsx(
+                FormInput,
+                {
+                  label: "Website",
+                  type: "url",
+                  value: urlValue,
+                  onChange: (e) => setUrlValue(e.target.value),
+                  placeholder: "https://example.com"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "Disabled:" }),
+              /* @__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("p", { className: "text-lg font-semibold", children: "FormTextarea" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Multi-line text input with label, description, and error support." }),
+            /* @__PURE__ */ jsxs(SimpleStack, { gap: "xs", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Basic Textarea:" }),
+              /* @__PURE__ */ jsx(
+                FormTextarea,
+                {
+                  label: "Description",
+                  value: textareaValue,
+                  onChange: (e) => setTextareaValue(e.target.value),
+                  placeholder: "Enter a detailed description...",
+                  rows: 4
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Description:" }),
+              /* @__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("p", { className: "text-sm font-medium mt-2", children: "With Error Validation:" }),
+              /* @__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("p", { className: "text-sm font-medium mt-2", children: "Disabled:" }),
+              /* @__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("p", { className: "text-lg font-semibold", children: "FormNumberInput" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Number input with min/max validation and step control." }),
+            /* @__PURE__ */ jsxs(SimpleStack, { gap: "xs", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Basic Number Input:" }),
+              /* @__PURE__ */ jsx(
+                FormNumberInput,
+                {
+                  label: "Age",
+                  value: numberValue,
+                  onChange: setNumberValue,
+                  placeholder: "Enter age"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Min/Max/Step:" }),
+              /* @__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("p", { className: "text-sm font-medium mt-2", children: "Decimal Numbers:" }),
+              /* @__PURE__ */ jsx(
+                FormNumberInput,
+                {
+                  label: "Price",
+                  value: decimalValue,
+                  onChange: setDecimalValue,
+                  allowDecimal: true,
+                  step: 0.01,
+                  placeholder: "0.00",
+                  description: "Enter price with cents"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "Required:" }),
+              /* @__PURE__ */ jsx(
+                FormNumberInput,
+                {
+                  label: "Quantity",
+                  required: true,
+                  value: numberValue,
+                  onChange: setNumberValue,
+                  min: 0,
+                  placeholder: "0"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Error:" }),
+              /* @__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("p", { className: "text-lg font-semibold", children: "FormCheckbox" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Checkbox with label, description, and indeterminate state support." }),
+            /* @__PURE__ */ jsxs(SimpleStack, { gap: "xs", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Basic Checkbox:" }),
+              /* @__PURE__ */ jsx(
+                FormCheckbox,
+                {
+                  label: "Accept terms and conditions",
+                  checked: checkboxValue,
+                  onChange: (checked) => setCheckboxValue(checked === true)
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Description:" }),
+              /* @__PURE__ */ jsx(
+                FormCheckbox,
+                {
+                  label: "Subscribe to newsletter",
+                  description: "Receive weekly updates about new features",
+                  checked: checkboxValue,
+                  onChange: (checked) => setCheckboxValue(checked === true)
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "Required:" }),
+              /* @__PURE__ */ jsx(
+                FormCheckbox,
+                {
+                  label: "I agree to the privacy policy",
+                  required: true,
+                  checked: checkboxValue,
+                  onChange: (checked) => setCheckboxValue(checked === true)
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "Indeterminate State:" }),
+              /* @__PURE__ */ jsx(
+                FormCheckbox,
+                {
+                  label: "Select all items",
+                  description: "Some items are selected",
+                  checked: checkboxIndeterminate,
+                  onChange: setCheckboxIndeterminate
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "Disabled:" }),
+              /* @__PURE__ */ jsx(
+                FormCheckbox,
+                {
+                  label: "Cannot change this",
+                  checked: true,
+                  onChange: () => {
+                  },
+                  disabled: true
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Error:" }),
+              /* @__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("p", { className: "text-lg font-semibold", children: "FormSelect" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Searchable single-select dropdown with label and error support." }),
+            /* @__PURE__ */ jsxs(SimpleStack, { gap: "xs", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Basic Select:" }),
+              /* @__PURE__ */ jsx(
+                FormSelect,
+                {
+                  label: "Favorite Color",
+                  value: selectValue,
+                  onChange: (value) => setSelectValue(value || ""),
+                  options: colorOptions,
+                  placeholder: "Choose a color"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Description:" }),
+              /* @__PURE__ */ jsx(
+                FormSelect,
+                {
+                  label: "Country",
+                  description: "Select your country of residence",
+                  value: selectValue,
+                  onChange: (value) => setSelectValue(value || ""),
+                  options: countryOptions,
+                  placeholder: "Select country"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "Required:" }),
+              /* @__PURE__ */ jsx(
+                FormSelect,
+                {
+                  label: "Required Selection",
+                  required: true,
+                  value: selectRequired,
+                  onChange: (value) => setSelectRequired(value || ""),
+                  options: colorOptions,
+                  placeholder: "Must select one"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "Disabled:" }),
+              /* @__PURE__ */ jsx(
+                FormSelect,
+                {
+                  label: "Disabled Select",
+                  value: "blue",
+                  onChange: () => {
+                  },
+                  options: colorOptions,
+                  disabled: true,
+                  placeholder: "Cannot change"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Error:" }),
+              /* @__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("p", { className: "text-lg font-semibold", children: "FormMultiSelect" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Searchable multi-select dropdown with badges." }),
+            /* @__PURE__ */ jsxs(SimpleStack, { gap: "xs", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Basic Multi-Select:" }),
+              /* @__PURE__ */ jsx(
+                FormMultiSelect,
+                {
+                  label: "Favorite Colors",
+                  value: multiSelectValue,
+                  onChange: setMultiSelectValue,
+                  options: colorOptions,
+                  placeholder: "Select multiple colors"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Description:" }),
+              /* @__PURE__ */ jsx(
+                FormMultiSelect,
+                {
+                  label: "Visited Countries",
+                  description: "Select all countries you've visited",
+                  value: multiSelectValue,
+                  onChange: setMultiSelectValue,
+                  options: countryOptions,
+                  placeholder: "Select countries"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "Required:" }),
+              /* @__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("p", { className: "text-sm font-medium mt-2", children: "With Error:" }),
+              /* @__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("p", { className: "text-lg font-semibold", children: "FormTagsInput" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Free-text tag input with creation and deletion." }),
+            /* @__PURE__ */ jsxs(SimpleStack, { gap: "xs", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Basic Tags Input:" }),
+              /* @__PURE__ */ jsx(
+                FormTagsInput,
+                {
+                  label: "Technologies",
+                  value: tagsValue,
+                  onChange: setTagsValue,
+                  placeholder: "Type and press Enter to add tags"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Description:" }),
+              /* @__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("p", { className: "text-sm font-medium mt-2", children: "Required:" }),
+              /* @__PURE__ */ jsx(
+                FormTagsInput,
+                {
+                  label: "Keywords",
+                  required: true,
+                  value: tagsValue,
+                  onChange: setTagsValue,
+                  placeholder: "Add at least one keyword"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "With Error:" }),
+              /* @__PURE__ */ jsx(
+                FormTagsInput,
+                {
+                  label: "Tags",
+                  value: tagsValue,
+                  onChange: setTagsValue,
+                  error: "Maximum 5 tags allowed",
+                  placeholder: "Add tags"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-2", children: "Disabled:" }),
+              /* @__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-5V27QDAY.js.map