@multiplatform.one/forms 6.0.0

package/dist/cjs/Form/Form.stories.native.js

@@ -0,0 +1,1863 @@
+"use strict";
+
+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_jsx_runtime = require("react/jsx-runtime");
+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.native.js");
+var import_Button = require("../Button/index.native.js");
+var import_Barcode = require("../fields/Barcode/index.native.js");
+var import_Checkbox = require("../fields/Checkbox/index.native.js");
+var import_ColorPicker = require("../fields/ColorPicker/index.native.js");
+var import_Combobox = require("../fields/Combobox/index.native.js");
+var import_authorOptions = require("../fields/Combobox/authorOptions.native.js");
+var import_DatePicker = require("../fields/DatePicker/index.native.js");
+var import_rich_text = require("@multiplatform.one/rich-text");
+var import_Duration = require("../fields/Duration/index.native.js");
+var import_FileUpload = require("../fields/FileUpload/index.native.js");
+var import_Geolocation = require("../fields/Geolocation/index.native.js");
+var import_Input = require("../fields/Input/index.native.js");
+var import_MentionInput = require("../fields/MentionInput/index.native.js");
+var import_Stepper = require("../fields/Stepper/index.native.js");
+var import_OTPInput = require("../fields/OTPInput/index.native.js");
+var import_PhoneInput = require("../fields/PhoneInput/index.native.js");
+var import_Progress = require("../fields/Progress/index.native.js");
+var import_RadioGroup = require("../fields/RadioGroup/index.native.js");
+var import_Rating = require("../fields/Rating/index.native.js");
+var import_Select = require("../fields/Select/index.native.js");
+var import_Signature = require("../fields/Signature/index.native.js");
+var import_Slider = require("../fields/Slider/index.native.js");
+var import_Switch = require("../fields/Switch/index.native.js");
+var import_TextArea = require("../fields/TextArea/index.native.js");
+var import_TimePicker = require("../fields/TimePicker/index.native.js");
+var import_ToggleGroup = require("../fields/ToggleGroup/index.native.js");
+var import_index = require("./index.native.js");
+var 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;
+var Basic = function Basic2() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Form, {
+    formOptions: {
+      defaultValues: {
+        username: "",
+        email: ""
+      }
+    },
+    onSubmit: function onSubmit(values) {
+      return (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";
+var WithValidation = function WithValidation2() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Form, {
+    formOptions: {
+      defaultValues: {
+        password: "",
+        confirmPassword: ""
+      }
+    },
+    onSubmit: function onSubmit(values) {
+      return (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: function onChange(param) {
+            var {
+              value
+            } = param;
+            return 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: function onChange(param) {
+            var {
+              value,
+              fieldApi
+            } = param;
+            var 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"
+      })]
+    })
+  });
+};
+var DynamicFields = function DynamicFields2() {
+  var form = (0, import_react_form.useForm)({
+    defaultValues: {
+      accountType: "personal",
+      companyName: "",
+      personalInfo: ""
+    },
+    onSubmit: async function onSubmit(param) {
+      var {
+        value
+      } = param;
+      (0, import_storybook.action)("onSubmit")(value);
+    }
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Form, {
+    form,
+    onSubmit: function onSubmit() {
+      return 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"
+        }]
+      }), function () {
+        var FormSubscribe = form.Subscribe;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormSubscribe, {
+          selector: function selector(state) {
+            return [state.values.accountType];
+          },
+          children: function children(param) {
+            var [accountType] = param;
+            return /* @__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"
+      })]
+    })
+  });
+};
+var ReadOnlyAndDisabledSubmit = function ReadOnlyAndDisabledSubmit2() {
+  return /* @__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: function onSubmit(values) {
+      return (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."
+    }
+  }
+};
+var InputWithLinkResolver = function InputWithLinkResolver2() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Form, {
+    formOptions: {
+      defaultValues: {
+        itemCode: "ITEM-001"
+      }
+    },
+    onSubmit: function onSubmit(values) {
+      return (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: function linkResolver(v) {
+          return 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."
+    }
+  }
+};
+var shortPriorityOptions = [{
+  value: "low",
+  label: "Low"
+}, {
+  value: "medium",
+  label: "Medium"
+}, {
+  value: "high",
+  label: "High"
+}];
+var 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"
+}];
+var 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"
+}];
+var 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"
+}];
+var mockPageSize = 20;
+var mockUserInitialPage = mockUserDatabase.slice(0, mockPageSize);
+var 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
+};
+var AllFields = function AllFields2() {
+  var [userSearchOptions, setUserSearchOptions] = (0, import_react2.useState)(mockUserInitialPage);
+  var [userSearchLoading, setUserSearchLoading] = (0, import_react2.useState)(false);
+  var handleUserSearch = (0, import_react2.useCallback)(function (query) {
+    setUserSearchLoading(true);
+    var timer = setTimeout(function () {
+      var results = (query.trim() ? mockUserDatabase.filter(function (u) {
+        return u.label.toLowerCase().includes(query.toLowerCase()) || u.keywords && u.keywords.toLowerCase().includes(query.toLowerCase());
+      }) : mockUserDatabase).slice(0, mockPageSize);
+      setUserSearchOptions(results);
+      setUserSearchLoading(false);
+    }, 150);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, []);
+  var 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 function onSubmit(param) {
+      var {
+        value
+      } = param;
+      (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."
+    }
+  }
+};
+var 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: []
+};
+var AllFieldsShortLists = function AllFieldsShortLists2() {
+  var form = (0, import_react_form.useForm)({
+    defaultValues: shortListDefaults,
+    onSubmit: async function onSubmit(param) {
+      var {
+        value
+      } = param;
+      (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
+        })
+      }), /* DataTable moved to @multiplatform.one/table */
+      /* @__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."
+    }
+  }
+};
+//# sourceMappingURL=Form.stories.native.js.map