@petrarca/sonnet-playground 0.2.0 → 0.4.0

package/dist/chunk-32DDRRWU.js

@@ -0,0 +1,617 @@
+import {
+  ExampleBlock
+} from "./chunk-C2EZ2ECG.js";
+
+// src/pages/PlayFormComponents.tsx
+import { useState, useCallback, useRef } 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 [emailError, setEmailError] = useState("");
+  const [passwordValue, setPasswordValue] = useState("");
+  const validateEmail = useCallback((value) => {
+    if (!value) {
+      setEmailError("");
+      return;
+    }
+    const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+    setEmailError(valid ? "" : "Invalid email address");
+  }, []);
+  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 [rangeValidated, setRangeValidated] = useState(
+    void 0
+  );
+  const [rangeError, setRangeError] = useState("");
+  const rangeValidatedRef = useRef(void 0);
+  const validateRange = useCallback((value) => {
+    if (value === void 0) {
+      setRangeError("");
+      return;
+    }
+    if (value < 1 || value > 10) setRangeError("Must be between 1 and 10");
+    else setRangeError("");
+  }, []);
+  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 (STATIC)", 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: "Email (on-blur validation)", children: /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Email",
+              type: "email",
+              value: emailValue,
+              onChange: (e) => {
+                setEmailValue(e.target.value);
+                if (emailError) validateEmail(e.target.value);
+              },
+              onBlur: (e) => validateEmail(e.target.value),
+              error: emailError,
+              placeholder: "user@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 (STATIC)", children: /* @__PURE__ */ jsx(
+            FormNumberInput,
+            {
+              label: "Invalid Input",
+              value: numberValue,
+              onChange: setNumberValue,
+              error: "Value must be greater than 0"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Range (on-blur validation)", children: /* @__PURE__ */ jsx(
+            FormNumberInput,
+            {
+              label: "Rating (1\u201310)",
+              value: rangeValidated,
+              onChange: (v) => {
+                setRangeValidated(v);
+                rangeValidatedRef.current = v;
+                if (rangeError) validateRange(v);
+              },
+              onBlur: () => validateRange(rangeValidatedRef.current),
+              error: rangeError,
+              min: 1,
+              max: 10,
+              step: 1,
+              placeholder: "1\u201310"
+            }
+          ) })
+        ] }),
+        /* @__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 (STATIC)", 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 (STATIC)", 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 (STATIC)", 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 (STATIC)", 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-32DDRRWU.js.map