@multiplatform.one/forms 6.1.0 → 6.3.0

package/dist/cjs/Form/Form.stories.cjs

@@ -1,1823 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
-};
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var Form_stories_exports = {};
-__export(Form_stories_exports, {
-  AllFields: () => AllFields,
-  AllFieldsShortLists: () => AllFieldsShortLists,
-  Basic: () => Basic,
-  DynamicFields: () => DynamicFields,
-  InputWithLinkResolver: () => InputWithLinkResolver,
-  ReadOnlyAndDisabledSubmit: () => ReadOnlyAndDisabledSubmit,
-  WithValidation: () => WithValidation,
-  default: () => Form_stories_default
-});
-module.exports = __toCommonJS(Form_stories_exports);
-var import_storybook = require("@multiplatform.one/storybook");
-var import_react = require("@phosphor-icons/react");
-var import_react_form = require("@tanstack/react-form");
-var import_react2 = require("react");
-var import_tamagui = require("tamagui");
-var import_FormGrid = require("../FormGrid.cjs");
-var import_Button = require("../Button/index.cjs");
-var import_Barcode = require("../fields/Barcode/index.cjs");
-var import_Checkbox = require("../fields/Checkbox/index.cjs");
-var import_ColorPicker = require("../fields/ColorPicker/index.cjs");
-var import_Combobox = require("../fields/Combobox/index.cjs");
-var import_authorOptions = require("../fields/Combobox/authorOptions.cjs");
-var import_DatePicker = require("../fields/DatePicker/index.cjs");
-var import_rich_text = require("@multiplatform.one/rich-text");
-var import_Duration = require("../fields/Duration/index.cjs");
-var import_FileUpload = require("../fields/FileUpload/index.cjs");
-var import_Geolocation = require("../fields/Geolocation/index.cjs");
-var import_Input = require("../fields/Input/index.cjs");
-var import_MentionInput = require("../fields/MentionInput/index.cjs");
-var import_Stepper = require("../fields/Stepper/index.cjs");
-var import_OTPInput = require("../fields/OTPInput/index.cjs");
-var import_PhoneInput = require("../fields/PhoneInput/index.cjs");
-var import_Progress = require("../fields/Progress/index.cjs");
-var import_RadioGroup = require("../fields/RadioGroup/index.cjs");
-var import_Rating = require("../fields/Rating/index.cjs");
-var import_Select = require("../fields/Select/index.cjs");
-var import_Signature = require("../fields/Signature/index.cjs");
-var import_Slider = require("../fields/Slider/index.cjs");
-var import_Switch = require("../fields/Switch/index.cjs");
-var import_TextArea = require("../fields/TextArea/index.cjs");
-var import_TimePicker = require("../fields/TimePicker/index.cjs");
-var import_ToggleGroup = require("../fields/ToggleGroup/index.cjs");
-var import_index = require("./index.cjs");
-var import_jsx_runtime = require("react/jsx-runtime");
-const meta = {
-  title: "Forms/Form",
-  component: import_index.Form,
-  parameters: {
-    docs: {
-      description: {
-        component: "A form wrapper component that provides TanStack Form context and handles form submission with URL state sync support."
-      }
-    }
-  },
-  argTypes: {
-    syncWithUrl: {
-      control: "boolean",
-      description: "Sync form state with URL query parameters"
-    },
-    urlDebounceMs: {
-      control: "number",
-      description: "Debounce time for URL sync in milliseconds"
-    }
-  }
-};
-var Form_stories_default = meta;
-const Basic = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Form, {
-  formOptions: {
-    defaultValues: {
-      username: "",
-      email: ""
-    }
-  },
-  onSubmit: values => (0, import_storybook.action)("onSubmit")(values),
-  children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-      label: "Username",
-      name: "username",
-      required: true
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-      label: "Email",
-      name: "email",
-      required: true
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-      action: "submit",
-      children: "Submit"
-    })]
-  })
-});
-Basic.storyName = "Main";
-const WithValidation = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Form, {
-  formOptions: {
-    defaultValues: {
-      password: "",
-      confirmPassword: ""
-    }
-  },
-  onSubmit: values => (0, import_storybook.action)("onSubmit")(values),
-  children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-      label: "Password",
-      name: "password",
-      validators: {
-        onChange: ({
-          value
-        }) => value.length < 8 ? "Password must be at least 8 characters" : void 0
-      },
-      required: true
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-      label: "Confirm Password",
-      name: "confirmPassword",
-      validators: {
-        onChangeListenTo: ["password"],
-        onChange: ({
-          value,
-          fieldApi
-        }) => {
-          const password = fieldApi.form.getFieldValue("password");
-          return value !== password ? "Passwords must match" : void 0;
-        }
-      },
-      required: true
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-      action: "submit",
-      children: "Create Account"
-    })]
-  })
-});
-const DynamicFields = () => {
-  const form = (0, import_react_form.useForm)({
-    defaultValues: {
-      accountType: "personal",
-      companyName: "",
-      personalInfo: ""
-    },
-    onSubmit: async ({
-      value
-    }) => {
-      (0, import_storybook.action)("onSubmit")(value);
-    }
-  });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Form, {
-    form,
-    onSubmit: () => form.handleSubmit(),
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$4",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Select.Select, {
-        label: "Account Type",
-        name: "accountType",
-        required: true,
-        options: [{
-          label: "Personal",
-          value: "personal"
-        }, {
-          label: "Business",
-          value: "business"
-        }]
-      }), (() => {
-        const FormSubscribe = form.Subscribe;
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormSubscribe, {
-          selector: state => [state.values.accountType],
-          children: ([accountType]) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-            children: accountType === "business" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-              label: "Company Name",
-              name: "companyName",
-              required: true,
-              helperText: "Enter your company name"
-            }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-              label: "Personal Info",
-              name: "personalInfo",
-              helperText: "Tell us about yourself"
-            })
-          })
-        });
-      })(), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        action: "submit",
-        children: "Submit"
-      })]
-    })
-  });
-};
-const ReadOnlyAndDisabledSubmit = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Form, {
-  formOptions: {
-    defaultValues: {
-      editable: "included in submit",
-      readOnlyField: "included in submit",
-      disabledField: "included in submit (not editable)"
-    }
-  },
-  onSubmit: values => (0, import_storybook.action)("onSubmit")(values),
-  children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-      label: "Editable",
-      name: "editable"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-      label: "Read Only",
-      name: "readOnlyField",
-      readOnly: true
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-      label: "Disabled",
-      name: "disabledField",
-      disabled: true
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-      action: "submit",
-      children: "Submit"
-    })]
-  })
-});
-ReadOnlyAndDisabledSubmit.parameters = {
-  docs: {
-    description: {
-      story: "readOnly values are included in submit. Disabled fields are non-editable and visually muted but remain in TanStack Form payload unless filtered by app logic."
-    }
-  }
-};
-const InputWithLinkResolver = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Form, {
-  formOptions: {
-    defaultValues: {
-      itemCode: "ITEM-001"
-    }
-  },
-  onSubmit: values => (0, import_storybook.action)("onSubmit")(values),
-  children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    gap: "$4",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-      label: "Item Code (readOnly + linkResolver)",
-      name: "itemCode",
-      readOnly: true,
-      linkResolver: v => v ? `/items/${String(v)}` : null
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-      action: "submit",
-      children: "Submit"
-    })]
-  })
-});
-InputWithLinkResolver.parameters = {
-  docs: {
-    description: {
-      story: "When readOnly and linkResolver are provided, the value renders as a Link when linkResolver returns href. Frappe wrappers provide doctype-aware resolvers."
-    }
-  }
-};
-const shortPriorityOptions = [{
-  value: "low",
-  label: "Low"
-}, {
-  value: "medium",
-  label: "Medium"
-}, {
-  value: "high",
-  label: "High"
-}];
-const shortCountryOptions = [{
-  value: "us",
-  label: "United States",
-  keywords: "usa america"
-}, {
-  value: "ca",
-  label: "Canada",
-  keywords: "north america"
-}, {
-  value: "uk",
-  label: "United Kingdom",
-  keywords: "britain england"
-}, {
-  value: "de",
-  label: "Germany",
-  keywords: "europe deutschland"
-}, {
-  value: "fr",
-  label: "France",
-  keywords: "europe paris"
-}];
-const countryOptions = [{
-  value: "af",
-  label: "Afghanistan",
-  keywords: "asia kabul"
-}, {
-  value: "al",
-  label: "Albania",
-  keywords: "europe tirana"
-}, {
-  value: "dz",
-  label: "Algeria",
-  keywords: "africa algiers"
-}, {
-  value: "ad",
-  label: "Andorra",
-  keywords: "europe"
-}, {
-  value: "ao",
-  label: "Angola",
-  keywords: "africa luanda"
-}, {
-  value: "ag",
-  label: "Antigua and Barbuda",
-  keywords: "caribbean"
-}, {
-  value: "ar",
-  label: "Argentina",
-  keywords: "south america buenos aires"
-}, {
-  value: "am",
-  label: "Armenia",
-  keywords: "asia yerevan"
-}, {
-  value: "au",
-  label: "Australia",
-  keywords: "oceania sydney canberra"
-}, {
-  value: "at",
-  label: "Austria",
-  keywords: "europe vienna wien"
-}, {
-  value: "az",
-  label: "Azerbaijan",
-  keywords: "asia baku"
-}, {
-  value: "bs",
-  label: "Bahamas",
-  keywords: "caribbean nassau"
-}, {
-  value: "bh",
-  label: "Bahrain",
-  keywords: "middle east asia"
-}, {
-  value: "bd",
-  label: "Bangladesh",
-  keywords: "asia dhaka"
-}, {
-  value: "bb",
-  label: "Barbados",
-  keywords: "caribbean"
-}, {
-  value: "by",
-  label: "Belarus",
-  keywords: "europe minsk"
-}, {
-  value: "be",
-  label: "Belgium",
-  keywords: "europe brussels"
-}, {
-  value: "bz",
-  label: "Belize",
-  keywords: "central america"
-}, {
-  value: "bj",
-  label: "Benin",
-  keywords: "africa"
-}, {
-  value: "bt",
-  label: "Bhutan",
-  keywords: "asia thimphu"
-}, {
-  value: "bo",
-  label: "Bolivia",
-  keywords: "south america"
-}, {
-  value: "ba",
-  label: "Bosnia and Herzegovina",
-  keywords: "europe sarajevo"
-}, {
-  value: "bw",
-  label: "Botswana",
-  keywords: "africa gaborone"
-}, {
-  value: "br",
-  label: "Brazil",
-  keywords: "south america brasilia"
-}, {
-  value: "bn",
-  label: "Brunei",
-  keywords: "asia"
-}, {
-  value: "bg",
-  label: "Bulgaria",
-  keywords: "europe sofia"
-}, {
-  value: "bf",
-  label: "Burkina Faso",
-  keywords: "africa"
-}, {
-  value: "bi",
-  label: "Burundi",
-  keywords: "africa"
-}, {
-  value: "kh",
-  label: "Cambodia",
-  keywords: "asia phnom penh"
-}, {
-  value: "cm",
-  label: "Cameroon",
-  keywords: "africa yaounde"
-}, {
-  value: "ca",
-  label: "Canada",
-  keywords: "north america ottawa"
-}, {
-  value: "cv",
-  label: "Cape Verde",
-  keywords: "africa"
-}, {
-  value: "cf",
-  label: "Central African Republic",
-  keywords: "africa"
-}, {
-  value: "td",
-  label: "Chad",
-  keywords: "africa ndjamena"
-}, {
-  value: "cl",
-  label: "Chile",
-  keywords: "south america santiago"
-}, {
-  value: "cn",
-  label: "China",
-  keywords: "asia beijing"
-}, {
-  value: "co",
-  label: "Colombia",
-  keywords: "south america bogota"
-}, {
-  value: "km",
-  label: "Comoros",
-  keywords: "africa"
-}, {
-  value: "cg",
-  label: "Congo",
-  keywords: "africa brazzaville"
-}, {
-  value: "cd",
-  label: "Congo (DRC)",
-  keywords: "africa kinshasa"
-}, {
-  value: "cr",
-  label: "Costa Rica",
-  keywords: "central america san jose"
-}, {
-  value: "hr",
-  label: "Croatia",
-  keywords: "europe zagreb"
-}, {
-  value: "cu",
-  label: "Cuba",
-  keywords: "caribbean havana"
-}, {
-  value: "cy",
-  label: "Cyprus",
-  keywords: "europe nicosia"
-}, {
-  value: "cz",
-  label: "Czech Republic",
-  keywords: "europe prague"
-}, {
-  value: "dk",
-  label: "Denmark",
-  keywords: "europe copenhagen"
-}, {
-  value: "dj",
-  label: "Djibouti",
-  keywords: "africa"
-}, {
-  value: "dm",
-  label: "Dominica",
-  keywords: "caribbean"
-}, {
-  value: "do",
-  label: "Dominican Republic",
-  keywords: "caribbean santo domingo"
-}, {
-  value: "ec",
-  label: "Ecuador",
-  keywords: "south america quito"
-}, {
-  value: "eg",
-  label: "Egypt",
-  keywords: "africa cairo"
-}, {
-  value: "sv",
-  label: "El Salvador",
-  keywords: "central america"
-}, {
-  value: "gq",
-  label: "Equatorial Guinea",
-  keywords: "africa"
-}, {
-  value: "er",
-  label: "Eritrea",
-  keywords: "africa asmara"
-}, {
-  value: "ee",
-  label: "Estonia",
-  keywords: "europe tallinn baltic"
-}, {
-  value: "sz",
-  label: "Eswatini",
-  keywords: "africa swaziland"
-}, {
-  value: "et",
-  label: "Ethiopia",
-  keywords: "africa addis ababa"
-}, {
-  value: "fj",
-  label: "Fiji",
-  keywords: "oceania pacific"
-}, {
-  value: "fi",
-  label: "Finland",
-  keywords: "europe helsinki nordic"
-}, {
-  value: "fr",
-  label: "France",
-  keywords: "europe paris"
-}, {
-  value: "ga",
-  label: "Gabon",
-  keywords: "africa"
-}, {
-  value: "gm",
-  label: "Gambia",
-  keywords: "africa"
-}, {
-  value: "ge",
-  label: "Georgia",
-  keywords: "europe tbilisi"
-}, {
-  value: "de",
-  label: "Germany",
-  keywords: "europe berlin deutschland"
-}, {
-  value: "gh",
-  label: "Ghana",
-  keywords: "africa accra"
-}, {
-  value: "gr",
-  label: "Greece",
-  keywords: "europe athens"
-}, {
-  value: "gd",
-  label: "Grenada",
-  keywords: "caribbean"
-}, {
-  value: "gt",
-  label: "Guatemala",
-  keywords: "central america"
-}, {
-  value: "gn",
-  label: "Guinea",
-  keywords: "africa conakry"
-}, {
-  value: "gw",
-  label: "Guinea-Bissau",
-  keywords: "africa"
-}, {
-  value: "gy",
-  label: "Guyana",
-  keywords: "south america"
-}, {
-  value: "ht",
-  label: "Haiti",
-  keywords: "caribbean port-au-prince"
-}, {
-  value: "hn",
-  label: "Honduras",
-  keywords: "central america"
-}, {
-  value: "hu",
-  label: "Hungary",
-  keywords: "europe budapest"
-}, {
-  value: "is",
-  label: "Iceland",
-  keywords: "europe reykjavik nordic"
-}, {
-  value: "in",
-  label: "India",
-  keywords: "asia new delhi mumbai"
-}, {
-  value: "id",
-  label: "Indonesia",
-  keywords: "asia jakarta"
-}, {
-  value: "ir",
-  label: "Iran",
-  keywords: "middle east tehran"
-}, {
-  value: "iq",
-  label: "Iraq",
-  keywords: "middle east baghdad"
-}, {
-  value: "ie",
-  label: "Ireland",
-  keywords: "europe dublin"
-}, {
-  value: "il",
-  label: "Israel",
-  keywords: "middle east jerusalem tel aviv"
-}, {
-  value: "it",
-  label: "Italy",
-  keywords: "europe rome roma"
-}, {
-  value: "ci",
-  label: "Ivory Coast",
-  keywords: "africa cote d'ivoire"
-}, {
-  value: "jm",
-  label: "Jamaica",
-  keywords: "caribbean kingston"
-}, {
-  value: "jp",
-  label: "Japan",
-  keywords: "asia tokyo"
-}, {
-  value: "jo",
-  label: "Jordan",
-  keywords: "middle east amman"
-}, {
-  value: "kz",
-  label: "Kazakhstan",
-  keywords: "asia astana"
-}, {
-  value: "ke",
-  label: "Kenya",
-  keywords: "africa nairobi"
-}, {
-  value: "ki",
-  label: "Kiribati",
-  keywords: "oceania pacific"
-}, {
-  value: "kw",
-  label: "Kuwait",
-  keywords: "middle east"
-}, {
-  value: "kg",
-  label: "Kyrgyzstan",
-  keywords: "asia bishkek"
-}, {
-  value: "la",
-  label: "Laos",
-  keywords: "asia vientiane"
-}, {
-  value: "lv",
-  label: "Latvia",
-  keywords: "europe riga baltic"
-}, {
-  value: "lb",
-  label: "Lebanon",
-  keywords: "middle east beirut"
-}, {
-  value: "ls",
-  label: "Lesotho",
-  keywords: "africa"
-}, {
-  value: "lr",
-  label: "Liberia",
-  keywords: "africa monrovia"
-}, {
-  value: "ly",
-  label: "Libya",
-  keywords: "africa tripoli"
-}, {
-  value: "li",
-  label: "Liechtenstein",
-  keywords: "europe"
-}, {
-  value: "lt",
-  label: "Lithuania",
-  keywords: "europe vilnius baltic"
-}, {
-  value: "lu",
-  label: "Luxembourg",
-  keywords: "europe"
-}, {
-  value: "mg",
-  label: "Madagascar",
-  keywords: "africa"
-}, {
-  value: "mw",
-  label: "Malawi",
-  keywords: "africa lilongwe"
-}, {
-  value: "my",
-  label: "Malaysia",
-  keywords: "asia kuala lumpur"
-}, {
-  value: "mv",
-  label: "Maldives",
-  keywords: "asia"
-}, {
-  value: "ml",
-  label: "Mali",
-  keywords: "africa bamako"
-}, {
-  value: "mt",
-  label: "Malta",
-  keywords: "europe valletta"
-}, {
-  value: "mh",
-  label: "Marshall Islands",
-  keywords: "oceania pacific"
-}, {
-  value: "mr",
-  label: "Mauritania",
-  keywords: "africa"
-}, {
-  value: "mu",
-  label: "Mauritius",
-  keywords: "africa"
-}, {
-  value: "mx",
-  label: "Mexico",
-  keywords: "north america mexico city"
-}, {
-  value: "fm",
-  label: "Micronesia",
-  keywords: "oceania pacific"
-}, {
-  value: "md",
-  label: "Moldova",
-  keywords: "europe chisinau"
-}, {
-  value: "mc",
-  label: "Monaco",
-  keywords: "europe"
-}, {
-  value: "mn",
-  label: "Mongolia",
-  keywords: "asia ulaanbaatar"
-}, {
-  value: "me",
-  label: "Montenegro",
-  keywords: "europe podgorica"
-}, {
-  value: "ma",
-  label: "Morocco",
-  keywords: "africa rabat"
-}, {
-  value: "mz",
-  label: "Mozambique",
-  keywords: "africa maputo"
-}, {
-  value: "mm",
-  label: "Myanmar",
-  keywords: "asia burma"
-}, {
-  value: "na",
-  label: "Namibia",
-  keywords: "africa windhoek"
-}, {
-  value: "nr",
-  label: "Nauru",
-  keywords: "oceania pacific"
-}, {
-  value: "np",
-  label: "Nepal",
-  keywords: "asia kathmandu"
-}, {
-  value: "nl",
-  label: "Netherlands",
-  keywords: "europe amsterdam holland"
-}, {
-  value: "nz",
-  label: "New Zealand",
-  keywords: "oceania wellington"
-}, {
-  value: "ni",
-  label: "Nicaragua",
-  keywords: "central america managua"
-}, {
-  value: "ne",
-  label: "Niger",
-  keywords: "africa niamey"
-}, {
-  value: "ng",
-  label: "Nigeria",
-  keywords: "africa lagos abuja"
-}, {
-  value: "kp",
-  label: "North Korea",
-  keywords: "asia pyongyang"
-}, {
-  value: "mk",
-  label: "North Macedonia",
-  keywords: "europe skopje"
-}, {
-  value: "no",
-  label: "Norway",
-  keywords: "europe oslo nordic"
-}, {
-  value: "om",
-  label: "Oman",
-  keywords: "middle east muscat"
-}, {
-  value: "pk",
-  label: "Pakistan",
-  keywords: "asia islamabad"
-}, {
-  value: "pw",
-  label: "Palau",
-  keywords: "oceania pacific"
-}, {
-  value: "ps",
-  label: "Palestine",
-  keywords: "middle east"
-}, {
-  value: "pa",
-  label: "Panama",
-  keywords: "central america"
-}, {
-  value: "pg",
-  label: "Papua New Guinea",
-  keywords: "oceania pacific"
-}, {
-  value: "py",
-  label: "Paraguay",
-  keywords: "south america asuncion"
-}, {
-  value: "pe",
-  label: "Peru",
-  keywords: "south america lima"
-}, {
-  value: "ph",
-  label: "Philippines",
-  keywords: "asia manila"
-}, {
-  value: "pl",
-  label: "Poland",
-  keywords: "europe warsaw"
-}, {
-  value: "pt",
-  label: "Portugal",
-  keywords: "europe lisbon"
-}, {
-  value: "qa",
-  label: "Qatar",
-  keywords: "middle east doha"
-}, {
-  value: "ro",
-  label: "Romania",
-  keywords: "europe bucharest"
-}, {
-  value: "ru",
-  label: "Russia",
-  keywords: "europe asia moscow"
-}, {
-  value: "rw",
-  label: "Rwanda",
-  keywords: "africa kigali"
-}, {
-  value: "kn",
-  label: "Saint Kitts and Nevis",
-  keywords: "caribbean"
-}, {
-  value: "lc",
-  label: "Saint Lucia",
-  keywords: "caribbean"
-}, {
-  value: "vc",
-  label: "Saint Vincent and the Grenadines",
-  keywords: "caribbean"
-}, {
-  value: "ws",
-  label: "Samoa",
-  keywords: "oceania pacific"
-}, {
-  value: "sm",
-  label: "San Marino",
-  keywords: "europe"
-}, {
-  value: "st",
-  label: "Sao Tome and Principe",
-  keywords: "africa"
-}, {
-  value: "sa",
-  label: "Saudi Arabia",
-  keywords: "middle east riyadh"
-}, {
-  value: "sn",
-  label: "Senegal",
-  keywords: "africa dakar"
-}, {
-  value: "rs",
-  label: "Serbia",
-  keywords: "europe belgrade"
-}, {
-  value: "sc",
-  label: "Seychelles",
-  keywords: "africa"
-}, {
-  value: "sl",
-  label: "Sierra Leone",
-  keywords: "africa freetown"
-}, {
-  value: "sg",
-  label: "Singapore",
-  keywords: "asia"
-}, {
-  value: "sk",
-  label: "Slovakia",
-  keywords: "europe bratislava"
-}, {
-  value: "si",
-  label: "Slovenia",
-  keywords: "europe ljubljana"
-}, {
-  value: "sb",
-  label: "Solomon Islands",
-  keywords: "oceania pacific"
-}, {
-  value: "so",
-  label: "Somalia",
-  keywords: "africa mogadishu"
-}, {
-  value: "za",
-  label: "South Africa",
-  keywords: "africa pretoria cape town"
-}, {
-  value: "kr",
-  label: "South Korea",
-  keywords: "asia seoul"
-}, {
-  value: "ss",
-  label: "South Sudan",
-  keywords: "africa juba"
-}, {
-  value: "es",
-  label: "Spain",
-  keywords: "europe madrid"
-}, {
-  value: "lk",
-  label: "Sri Lanka",
-  keywords: "asia colombo"
-}, {
-  value: "sd",
-  label: "Sudan",
-  keywords: "africa khartoum"
-}, {
-  value: "sr",
-  label: "Suriname",
-  keywords: "south america"
-}, {
-  value: "se",
-  label: "Sweden",
-  keywords: "europe stockholm nordic"
-}, {
-  value: "ch",
-  label: "Switzerland",
-  keywords: "europe bern zurich"
-}, {
-  value: "sy",
-  label: "Syria",
-  keywords: "middle east damascus"
-}, {
-  value: "tw",
-  label: "Taiwan",
-  keywords: "asia taipei"
-}, {
-  value: "tj",
-  label: "Tajikistan",
-  keywords: "asia dushanbe"
-}, {
-  value: "tz",
-  label: "Tanzania",
-  keywords: "africa dar es salaam"
-}, {
-  value: "th",
-  label: "Thailand",
-  keywords: "asia bangkok"
-}, {
-  value: "tl",
-  label: "Timor-Leste",
-  keywords: "asia"
-}, {
-  value: "tg",
-  label: "Togo",
-  keywords: "africa lome"
-}, {
-  value: "to",
-  label: "Tonga",
-  keywords: "oceania pacific"
-}, {
-  value: "tt",
-  label: "Trinidad and Tobago",
-  keywords: "caribbean"
-}, {
-  value: "tn",
-  label: "Tunisia",
-  keywords: "africa tunis"
-}, {
-  value: "tr",
-  label: "Turkey",
-  keywords: "europe asia ankara istanbul"
-}, {
-  value: "tm",
-  label: "Turkmenistan",
-  keywords: "asia ashgabat"
-}, {
-  value: "tv",
-  label: "Tuvalu",
-  keywords: "oceania pacific"
-}, {
-  value: "ug",
-  label: "Uganda",
-  keywords: "africa kampala"
-}, {
-  value: "ua",
-  label: "Ukraine",
-  keywords: "europe kyiv"
-}, {
-  value: "ae",
-  label: "United Arab Emirates",
-  keywords: "middle east dubai abu dhabi"
-}, {
-  value: "uk",
-  label: "United Kingdom",
-  keywords: "europe london britain england"
-}, {
-  value: "us",
-  label: "United States",
-  keywords: "north america washington usa"
-}, {
-  value: "uy",
-  label: "Uruguay",
-  keywords: "south america montevideo"
-}, {
-  value: "uz",
-  label: "Uzbekistan",
-  keywords: "asia tashkent"
-}, {
-  value: "vu",
-  label: "Vanuatu",
-  keywords: "oceania pacific"
-}, {
-  value: "va",
-  label: "Vatican City",
-  keywords: "europe rome"
-}, {
-  value: "ve",
-  label: "Venezuela",
-  keywords: "south america caracas"
-}, {
-  value: "vn",
-  label: "Vietnam",
-  keywords: "asia hanoi"
-}, {
-  value: "ye",
-  label: "Yemen",
-  keywords: "middle east sanaa"
-}, {
-  value: "zm",
-  label: "Zambia",
-  keywords: "africa lusaka"
-}, {
-  value: "zw",
-  label: "Zimbabwe",
-  keywords: "africa harare"
-}];
-const mockUserDatabase = [{
-  value: "alice",
-  label: "Alice Johnson",
-  keywords: "engineer dev"
-}, {
-  value: "bob",
-  label: "Bob Smith",
-  keywords: "designer ui"
-}, {
-  value: "charlie",
-  label: "Charlie Brown",
-  keywords: "pm product"
-}, {
-  value: "diana",
-  label: "Diana Prince",
-  keywords: "lead"
-}, {
-  value: "eve",
-  label: "Eve Wilson",
-  keywords: "qa test"
-}, {
-  value: "frank",
-  label: "Frank Miller",
-  keywords: "backend"
-}, {
-  value: "grace",
-  label: "Grace Lee",
-  keywords: "frontend"
-}, {
-  value: "henry",
-  label: "Henry Ford",
-  keywords: "ops"
-}, {
-  value: "iris",
-  label: "Iris Chang",
-  keywords: "data science ml"
-}, {
-  value: "jack",
-  label: "Jack Reacher",
-  keywords: "security infra"
-}, {
-  value: "karen",
-  label: "Karen Wu",
-  keywords: "mobile ios"
-}, {
-  value: "leo",
-  label: "Leo Tanaka",
-  keywords: "devops cloud"
-}, {
-  value: "maya",
-  label: "Maya Patel",
-  keywords: "fullstack react"
-}, {
-  value: "nick",
-  label: "Nick Rivera",
-  keywords: "backend go"
-}, {
-  value: "olivia",
-  label: "Olivia Chen",
-  keywords: "design systems"
-}, {
-  value: "paul",
-  label: "Paul Nguyen",
-  keywords: "database sql"
-}, {
-  value: "quinn",
-  label: "Quinn Harper",
-  keywords: "platform sre"
-}, {
-  value: "rosa",
-  label: "Rosa Martinez",
-  keywords: "analytics data"
-}, {
-  value: "sam",
-  label: "Sam O'Brien",
-  keywords: "frontend vue"
-}, {
-  value: "tara",
-  label: "Tara Singh",
-  keywords: "ml research"
-}, {
-  value: "uma",
-  label: "Uma Krishnan",
-  keywords: "architect"
-}, {
-  value: "vic",
-  label: "Vic Romano",
-  keywords: "product manager"
-}, {
-  value: "wendy",
-  label: "Wendy Zhou",
-  keywords: "ux research"
-}, {
-  value: "xander",
-  label: "Xander Blake",
-  keywords: "embedded systems"
-}, {
-  value: "yuki",
-  label: "Yuki Yamamoto",
-  keywords: "compiler rust"
-}, {
-  value: "zara",
-  label: "Zara Ahmed",
-  keywords: "ai nlp"
-}];
-const mockPageSize = 20;
-const mockUserInitialPage = mockUserDatabase.slice(0, mockPageSize);
-const userMentions = {
-  trigger: "@",
-  data: [{
-    id: "1",
-    display: "Alice",
-    description: "Engineer"
-  }, {
-    id: "2",
-    display: "Bob",
-    description: "Designer"
-  }, {
-    id: "3",
-    display: "Charlie",
-    description: "PM"
-  }],
-  allowSpace: false,
-  insertSpace: true
-};
-const AllFields = () => {
-  const [userSearchOptions, setUserSearchOptions] = (0, import_react2.useState)(mockUserInitialPage);
-  const [userSearchLoading, setUserSearchLoading] = (0, import_react2.useState)(false);
-  const handleUserSearch = (0, import_react2.useCallback)(query => {
-    setUserSearchLoading(true);
-    const timer = setTimeout(() => {
-      const results = (query.trim() ? mockUserDatabase.filter(u => u.label.toLowerCase().includes(query.toLowerCase()) || u.keywords && u.keywords.toLowerCase().includes(query.toLowerCase())) : mockUserDatabase).slice(0, mockPageSize);
-      setUserSearchOptions(results);
-      setUserSearchLoading(false);
-    }, 150);
-    return () => clearTimeout(timer);
-  }, []);
-  const form = (0, import_react_form.useForm)({
-    defaultValues: {
-      fullName: "",
-      email: "",
-      bio: "",
-      age: 25,
-      country: "",
-      priority: "",
-      countries: [],
-      author: "",
-      authors: [],
-      userSearch: "",
-      usersMulti: [],
-      role: "",
-      theme: "light",
-      alignment: "center",
-      volume: [50],
-      birthDate: null,
-      appointmentDatetime: null,
-      fiscalMonth: null,
-      vacationDates: [],
-      projectDateRange: null,
-      startTime: "09:00",
-      taskDuration: 3600,
-      richContent: "<p>Welcome to the <strong>rich text</strong> editor!</p>",
-      markdownContent: "# Hello\n\nThis is **markdown** content.",
-      features: [],
-      phone: "",
-      otp: "",
-      brandColor: "#3B82F6",
-      comment: {
-        text: "",
-        mentions: []
-      },
-      avatar: null,
-      acceptTerms: false,
-      notifications: true,
-      completion: 65,
-      rating: 0.6,
-      signature: "",
-      barcode: "",
-      location: JSON.stringify({
-        lat: 40.7128,
-        lng: -74.006
-      }),
-      items: []
-    },
-    onSubmit: async ({
-      value
-    }) => {
-      (0, import_storybook.action)("onSubmit")(value);
-    }
-  });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Form, {
-    form,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$4",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-        children: "Field Height Comparison (2 columns)"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_FormGrid.FormGrid, {
-        columns: 2,
-        gap: 16,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-          label: "Full Name",
-          name: "fullName",
-          placeholder: "Jane Doe",
-          helperText: "Your first and last name",
-          required: true
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-          label: "Email",
-          name: "email",
-          placeholder: "jane@example.com",
-          helperText: "We'll never share your email",
-          required: true
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Select.Select, {
-          label: "Country",
-          name: "country",
-          placeholder: "Select a country",
-          options: countryOptions,
-          required: true
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Select.Select, {
-          label: "Priority",
-          name: "priority",
-          placeholder: "Select priority",
-          options: shortPriorityOptions,
-          helperText: "Short list (no scroll)"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Combobox.Combobox, {
-          label: "Author",
-          name: "author",
-          options: import_authorOptions.authorOptions,
-          placeholder: "Search and select...",
-          searchPlaceholder: "Type to search...",
-          helperText: "Full list, filters locally"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Combobox.Combobox, {
-          label: "User",
-          name: "userSearch",
-          options: userSearchOptions,
-          placeholder: "Type to search users...",
-          searchPlaceholder: "Type to search...",
-          emptyMessage: "No users found.",
-          onSearch: handleUserSearch,
-          loading: userSearchLoading,
-          helperText: "onSearch callback (simulated API)"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DatePicker.DatePicker, {
-          label: "Birth Date",
-          name: "birthDate",
-          helperText: "Select your date of birth"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DatePicker.DatetimePicker, {
-          label: "Appointment",
-          name: "appointmentDatetime",
-          helperText: "Select date and time"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimePicker.TimePicker, {
-          label: "Start Time",
-          name: "startTime",
-          helperText: "When does your day begin?",
-          clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
-            size: 16
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DatePicker.MonthPicker, {
-          label: "Fiscal Month",
-          name: "fiscalMonth",
-          helperText: "Select month and year"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ColorPicker.ColorPicker, {
-          label: "Brand Color",
-          name: "brandColor",
-          helperText: "Pick your favorite color"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DatePicker.DateRangePicker, {
-          label: "Project Dates",
-          name: "projectDateRange",
-          helperText: "Select start and end dates"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_PhoneInput.PhoneInput, {
-          label: "Phone Number",
-          name: "phone",
-          helperText: "Your contact number"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DatePicker.MultiDatePicker, {
-          label: "Vacation Days",
-          name: "vacationDates",
-          helperText: "Select multiple dates",
-          limit: 10
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Stepper.Stepper, {
-          label: "Age",
-          name: "age",
-          min: 0,
-          max: 150,
-          helperText: "Your current age"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_OTPInput.OTPInput, {
-          label: "Verification Code",
-          name: "otp",
-          length: 6,
-          helperText: "Enter the 6-digit code"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Duration.Duration, {
-          label: "Task Duration",
-          name: "taskDuration",
-          helperText: "How long will this take?",
-          clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
-            size: 16
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.Checkbox, {
-          label: "Accept Terms & Conditions",
-          name: "acceptTerms"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Slider.Slider, {
-          label: "Volume",
-          name: "volume",
-          min: 0,
-          max: 100,
-          helperText: "Adjust the volume"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Switch.Switch, {
-          label: "Enable Notifications",
-          name: "notifications",
-          helperText: "Receive push notifications"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Rating.Rating, {
-          label: "Quality Rating",
-          name: "rating",
-          helperText: "Rate from 1 to 5 stars",
-          starIcon: import_react.StarIcon
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Geolocation.Geolocation, {
-          label: "Location",
-          name: "location",
-          helperText: "Set your coordinates",
-          locationIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.NavigationArrowIcon, {
-            size: 16
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Progress.Progress, {
-          label: "Profile Completion",
-          name: "completion",
-          form,
-          helperText: "Your profile progress"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Barcode.Barcode, {
-          label: "Product Barcode",
-          name: "barcode",
-          helperText: "Scan or enter a barcode",
-          barcodeIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.BarcodeIcon, {
-            size: 18
-          }),
-          scanIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CameraIcon, {
-            size: 18
-          }),
-          stopIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-            size: 18
-          })
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
-        marginTop: "$4"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-        children: "Multi-line Fields"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_FormGrid.FormGrid, {
-        columns: 2,
-        gap: 16,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TextArea.TextArea, {
-          label: "Bio",
-          name: "bio",
-          textAreaProps: {
-            placeholder: "Tell us about yourself..."
-          },
-          helperText: "A short description"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_MentionInput.MentionInput, {
-          label: "Comment",
-          name: "comment",
-          mentions: [userMentions],
-          placeholder: "Type @ to mention someone",
-          helperText: "Mention team members with @"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RadioGroup.RadioGroup, {
-          label: "Role",
-          name: "role",
-          helperText: "Select your primary role",
-          options: [{
-            value: "developer",
-            label: "Developer"
-          }, {
-            value: "designer",
-            label: "Designer"
-          }, {
-            value: "manager",
-            label: "Manager"
-          }]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.CheckboxGroup, {
-          label: "Features",
-          name: "features",
-          options: [{
-            value: "notifications",
-            label: "Push Notifications"
-          }, {
-            value: "emails",
-            label: "Email Updates"
-          }, {
-            value: "sms",
-            label: "SMS Alerts"
-          }],
-          helperText: "Select all that apply"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToggleGroup.ToggleGroup, {
-          label: "Theme",
-          name: "theme",
-          type: "single",
-          orientation: "vertical",
-          options: [{
-            label: "Light",
-            value: "light"
-          }, {
-            label: "Dark",
-            value: "dark"
-          }, {
-            label: "Auto",
-            value: "auto"
-          }]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToggleGroup.ToggleGroup, {
-          label: "Alignment",
-          name: "alignment",
-          type: "single",
-          orientation: "horizontal",
-          options: [{
-            label: "Left",
-            value: "left"
-          }, {
-            label: "Center",
-            value: "center"
-          }, {
-            label: "Right",
-            value: "right"
-          }]
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
-        marginTop: "$4"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-        children: "Full-width Fields"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        gap: "$4",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_rich_text.RichTextEditor, {
-          label: "Rich Content",
-          name: "richContent",
-          helperText: "Toggle between Raw and Formatted views",
-          minHeight: 150
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Select.Select, {
-          label: "Countries (Multi)",
-          name: "countries",
-          placeholder: "Select countries...",
-          options: countryOptions,
-          multiple: true,
-          helperText: "Multi-select with chips"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Combobox.Combobox, {
-          label: "Authors (Multi)",
-          name: "authors",
-          options: import_authorOptions.authorOptions,
-          placeholder: "Search and select authors...",
-          searchPlaceholder: "Type to search...",
-          helperText: "Multi-select combobox",
-          multiple: true
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Combobox.Combobox, {
-          label: "Users (Multi)",
-          name: "usersMulti",
-          options: userSearchOptions,
-          placeholder: "Search and select users...",
-          searchPlaceholder: "Type to search...",
-          emptyMessage: "No users found.",
-          onSearch: handleUserSearch,
-          loading: userSearchLoading,
-          helperText: "Multi-select with onSearch callback",
-          multiple: true
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FileUpload.FileUpload, {
-          ...{
-            label: "Avatar",
-            name: "avatar",
-            form,
-            accept: "image/*",
-            helperText: "Upload a profile picture",
-            showPreview: true
-          }
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Signature.Signature, {
-          label: "Signature",
-          name: "signature",
-          helperText: "Sign in the box",
-          clearIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EraserIcon, {
-            size: 16
-          })
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
-        marginTop: "$4"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        action: "submit",
-        children: "Submit All Fields"
-      })]
-    })
-  });
-};
-AllFields.parameters = {
-  docs: {
-    description: {
-      story: "A comprehensive showcase of every available form field rendered inside a single Form, demonstrating how they integrate with TanStack Form context."
-    }
-  }
-};
-const shortListDefaults = {
-  fullName: "",
-  email: "",
-  bio: "",
-  age: 25,
-  country: "",
-  author: "",
-  role: "",
-  theme: "light",
-  alignment: "center",
-  volume: [50],
-  birthDate: null,
-  startTime: "09:00",
-  taskDuration: 3600,
-  phone: "",
-  otp: "",
-  brandColor: "#3B82F6",
-  comment: {
-    text: "",
-    mentions: []
-  },
-  avatar: null,
-  acceptTerms: false,
-  notifications: true,
-  completion: 65,
-  rating: 0.6,
-  signature: "",
-  barcode: "",
-  location: JSON.stringify({
-    lat: 40.7128,
-    lng: -74.006
-  }),
-  items: []
-};
-const AllFieldsShortLists = () => {
-  const form = (0, import_react_form.useForm)({
-    defaultValues: shortListDefaults,
-    onSubmit: async ({
-      value
-    }) => {
-      (0, import_storybook.action)("onSubmit")(value);
-    }
-  });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Form, {
-    form,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$4",
-      maxWidth: 500,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-        children: "Text Inputs"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-        label: "Full Name",
-        name: "fullName",
-        placeholder: "Jane Doe",
-        helperText: "Your first and last name",
-        required: true
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
-        label: "Email",
-        name: "email",
-        placeholder: "jane@example.com",
-        helperText: "We'll never share your email",
-        required: true
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TextArea.TextArea, {
-        label: "Bio",
-        name: "bio",
-        textAreaProps: {
-          placeholder: "Tell us about yourself..."
-        },
-        helperText: "A short description"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Stepper.Stepper, {
-        label: "Age",
-        name: "age",
-        min: 0,
-        max: 150,
-        helperText: "Your current age"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-        children: "Selection (short lists)"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Select.Select, {
-        label: "Country",
-        name: "country",
-        placeholder: "Select a country",
-        options: shortCountryOptions,
-        required: true
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Combobox.Combobox, {
-        label: "Author",
-        name: "author",
-        options: import_authorOptions.shortAuthorOptions,
-        placeholder: "Search and select...",
-        searchPlaceholder: "Type to search..."
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RadioGroup.RadioGroup, {
-        label: "Role",
-        name: "role",
-        helperText: "Select your primary role",
-        options: [{
-          value: "developer",
-          label: "Developer"
-        }, {
-          value: "designer",
-          label: "Designer"
-        }, {
-          value: "manager",
-          label: "Manager"
-        }]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToggleGroup.ToggleGroup, {
-        label: "Theme",
-        name: "theme",
-        type: "single",
-        orientation: "vertical",
-        options: [{
-          label: "Light",
-          value: "light"
-        }, {
-          label: "Dark",
-          value: "dark"
-        }, {
-          label: "Auto",
-          value: "auto"
-        }]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToggleGroup.ToggleGroup, {
-        label: "Alignment",
-        name: "alignment",
-        type: "single",
-        orientation: "horizontal",
-        options: [{
-          label: "Left",
-          value: "left"
-        }, {
-          label: "Center",
-          value: "center"
-        }, {
-          label: "Right",
-          value: "right"
-        }]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-        children: "Toggles"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.Checkbox, {
-        label: "Accept Terms & Conditions",
-        name: "acceptTerms"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Switch.Switch, {
-        label: "Enable Notifications",
-        name: "notifications",
-        helperText: "Receive push notifications"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-        children: "Range, Rating & Date/Time"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Slider.Slider, {
-        label: "Volume",
-        name: "volume",
-        min: 0,
-        max: 100,
-        helperText: "Adjust the volume"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Rating.Rating, {
-        label: "Quality Rating",
-        name: "rating",
-        helperText: "Rate from 1 to 5 stars",
-        starIcon: import_react.StarIcon
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DatePicker.DatePicker, {
-        label: "Birth Date",
-        name: "birthDate",
-        helperText: "Select your date of birth"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimePicker.TimePicker, {
-        label: "Start Time",
-        name: "startTime",
-        helperText: "When does your day begin?",
-        clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
-          size: 16
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Duration.Duration, {
-        label: "Task Duration",
-        name: "taskDuration",
-        helperText: "How long will this take?",
-        clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
-          size: 16
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-        children: "Specialized Inputs"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_PhoneInput.PhoneInput, {
-        label: "Phone Number",
-        name: "phone",
-        helperText: "Your contact number"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_OTPInput.OTPInput, {
-        label: "Verification Code",
-        name: "otp",
-        length: 6,
-        helperText: "Enter the 6-digit code"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ColorPicker.ColorPicker, {
-        label: "Brand Color",
-        name: "brandColor",
-        helperText: "Pick your favorite color"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_MentionInput.MentionInput, {
-        label: "Comment",
-        name: "comment",
-        mentions: [userMentions],
-        placeholder: "Type @ to mention someone",
-        helperText: "Mention team members with @"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FileUpload.FileUpload, {
-        ...{
-          label: "Avatar",
-          name: "avatar",
-          form,
-          accept: "image/*",
-          helperText: "Upload a profile picture",
-          showPreview: true
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Signature.Signature, {
-        label: "Signature",
-        name: "signature",
-        helperText: "Sign in the box",
-        clearIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EraserIcon, {
-          size: 16
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Barcode.Barcode, {
-        label: "Product Barcode",
-        name: "barcode",
-        helperText: "Scan or enter a barcode",
-        barcodeIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.BarcodeIcon, {
-          size: 18
-        }),
-        scanIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CameraIcon, {
-          size: 18
-        }),
-        stopIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-          size: 18
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Geolocation.Geolocation, {
-        label: "Location",
-        name: "location",
-        helperText: "Set your coordinates",
-        locationIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.NavigationArrowIcon, {
-          size: 16
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-        children: "Display"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Progress.Progress, {
-        label: "Profile Completion",
-        name: "completion",
-        form,
-        helperText: "Your profile progress"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        action: "submit",
-        children: "Submit All Fields"
-      })]
-    })
-  });
-};
-AllFieldsShortLists.parameters = {
-  docs: {
-    description: {
-      story: "Same as All Fields but with short option lists (no scroll). Tests dropdown shrink-to-fit when content doesn't fill the viewport."
-    }
-  }
-};