@multiplatform.one/forms 6.0.0

package/dist/esm/fields/Combobox/Combobox.stories.mjs

@@ -0,0 +1,296 @@
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Text, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Form } from "../../Form/index.mjs";
+import { Combobox } from "./index.mjs";
+import { authorOptions } from "./authorOptions.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Forms/Combobox",
+  component: Combobox,
+  parameters: {
+    docs: {
+      description: {
+        component: "A searchable select component with form integration. Use when options are many and users benefit from filtering by typing."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the combobox"
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text when no value is selected"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the combobox"
+    },
+    error: {
+      control: "text",
+      description: "Error message to display"
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the combobox is required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the combobox is disabled"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the combobox"
+    },
+    searchPlaceholder: {
+      control: "text",
+      description: "Placeholder text in the search input"
+    },
+    options: {
+      control: "object",
+      description: "Array of selectable options"
+    }
+  }
+};
+var Combobox_stories_default = meta;
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          author: "",
+          favoriteAuthor: "hemingway"
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          maxWidth: 300,
+          children: [/* @__PURE__ */jsx(Combobox, {
+            label: "Author",
+            name: "author",
+            options: authorOptions,
+            placeholder: "Select an author...",
+            searchPlaceholder: "Type to search...",
+            required: true
+          }), /* @__PURE__ */jsx(Combobox, {
+            label: "Favorite author",
+            name: "favoriteAuthor",
+            options: authorOptions,
+            placeholder: "Select an author...",
+            searchPlaceholder: "Type to search..."
+          }), /* @__PURE__ */jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Author",
+    placeholder: "Select an author",
+    helperText: "Choose an author from the list",
+    options: authorOptions
+  },
+  render: args => /* @__PURE__ */jsx(Combobox, {
+    ...args
+  })
+};
+const Basic = {
+  args: {
+    options: authorOptions,
+    placeholder: "Select an author...",
+    searchPlaceholder: "Type to search..."
+  },
+  render: function Render(args) {
+    const [value, setValue] = useState();
+    return /* @__PURE__ */jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 300,
+      children: [/* @__PURE__ */jsx(Combobox, {
+        ...args,
+        value,
+        onValueChange: val => {
+          setValue(Array.isArray(val) ? val[0] : val);
+          action("onValueChange")(val);
+        }
+      }), value && /* @__PURE__ */jsxs(Text, {
+        color: "$colorHover",
+        children: ["Selected: ", value]
+      })]
+    });
+  }
+};
+const WithLabel = {
+  render: function Render2() {
+    const [value, setValue] = useState();
+    return /* @__PURE__ */jsx(YStack, {
+      gap: "$4",
+      maxWidth: 300,
+      children: /* @__PURE__ */jsx(Combobox, {
+        label: "Author",
+        helperText: "Select an author from the list",
+        options: authorOptions,
+        value,
+        onValueChange: v => setValue(Array.isArray(v) ? v[0] : v),
+        placeholder: "Select an author...",
+        searchPlaceholder: "Type to search..."
+      })
+    });
+  }
+};
+const Disabled = {
+  args: {
+    label: "Disabled Combobox",
+    disabled: true,
+    options: authorOptions,
+    placeholder: "Select an author..."
+  }
+};
+const WithError = {
+  args: {
+    label: "Combobox with Error",
+    error: "This field is required",
+    required: true,
+    options: authorOptions,
+    placeholder: "Select an author..."
+  }
+};
+const Sizes = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(Combobox, {
+      label: "Small",
+      size: "$2",
+      options: authorOptions,
+      placeholder: "Select..."
+    }), /* @__PURE__ */jsx(Combobox, {
+      label: "Medium (default)",
+      size: "$3",
+      options: authorOptions,
+      placeholder: "Select..."
+    }), /* @__PURE__ */jsx(Combobox, {
+      label: "Large",
+      size: "$4",
+      options: authorOptions,
+      placeholder: "Select..."
+    })]
+  })
+};
+const Interactive = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState();
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */jsx(Combobox, {
+          label: "Pick an author",
+          options: authorOptions,
+          value,
+          onValueChange: v => setValue(Array.isArray(v) ? v[0] : v),
+          placeholder: "Select an author..."
+        }), /* @__PURE__ */jsxs(Text, {
+          children: ["Selected: ", value || "None"]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(InteractiveExample, {});
+  }
+};
+const CustomTrigger = {
+  render: () => {
+    const CustomTriggerExample = () => {
+      const [value, setValue] = useState();
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 300,
+        children: [/* @__PURE__ */jsx(Text, {
+          fontWeight: "bold",
+          color: "$colorHover",
+          children: "Author picker with custom trigger:"
+        }), /* @__PURE__ */jsx(XStack, {
+          gap: "$2",
+          alignItems: "center",
+          children: /* @__PURE__ */jsx(Combobox, {
+            options: authorOptions,
+            value,
+            onValueChange: v => setValue(Array.isArray(v) ? v[0] : v),
+            searchPlaceholder: "Type to search...",
+            popoverWidth: 260,
+            trigger: selected => /* @__PURE__ */jsxs(XStack, {
+              gap: "$2",
+              alignItems: "center",
+              paddingHorizontal: "$3",
+              paddingVertical: "$2",
+              backgroundColor: "$backgroundHover",
+              borderRadius: "$3",
+              hoverStyle: {
+                backgroundColor: "$backgroundPress"
+              },
+              pressStyle: {
+                backgroundColor: "$backgroundFocus"
+              },
+              cursor: "pointer",
+              children: [/* @__PURE__ */jsx(Text, {
+                fontSize: "$5",
+                children: "\u{1F4DA}"
+              }), /* @__PURE__ */jsx(Text, {
+                color: "$colorHover",
+                children: (Array.isArray(selected) ? selected[0]?.label : selected?.label) || "Pick an author"
+              })]
+            })
+          })
+        }), value && /* @__PURE__ */jsxs(Text, {
+          color: "$colorHover",
+          children: ["Selected: ", value]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(CustomTriggerExample, {});
+  }
+};
+const ManyOptions = {
+  render: function Render3() {
+    const [value, setValue] = useState();
+    const options = Array.from({
+      length: 100
+    }, (_, i) => ({
+      value: `item-${i + 1}`,
+      label: `Item ${i + 1}`,
+      keywords: `option number ${i + 1}`
+    }));
+    return /* @__PURE__ */jsx(YStack, {
+      gap: "$4",
+      maxWidth: 300,
+      children: /* @__PURE__ */jsx(Combobox, {
+        label: "Pick an item",
+        options,
+        value,
+        onValueChange: v => setValue(Array.isArray(v) ? v[0] : v),
+        placeholder: "Select from 100 items...",
+        searchPlaceholder: "Type to filter...",
+        emptyMessage: "No matching items."
+      })
+    });
+  }
+};
+export { Basic, CustomTrigger, Disabled, Interactive, Main, ManyOptions, Sizes, Standalone, WithError, WithLabel, Combobox_stories_default as default };
+//# sourceMappingURL=Combobox.stories.mjs.map

package/dist/esm/fields/Combobox/Combobox.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["action","useForm","useState","Text","XStack","YStack","Button","Form","Combobox","authorOptions","jsx","jsxs","meta","title","component","parameters","docs","description","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","searchPlaceholder","Combobox_stories_default","Main","name","render","FormExample","form","defaultValues","author","favoriteAuthor","onSubmit","value","children","gap","maxWidth","Standalone","args","Basic","Render","setValue","onValueChange","val","Array","isArray","color","WithLabel","Render2","v","Disabled","WithError","Sizes","Interactive","InteractiveExample","CustomTrigger","CustomTriggerExample","fontWeight","alignItems","popoverWidth","trigger","selected","paddingHorizontal","paddingVertical","backgroundColor","borderRadius","hoverStyle","pressStyle","cursor","fontSize","ManyOptions","Render3","from","length","_","i","keywords","emptyMessage"],"sources":["../../../../src/fields/Combobox/Combobox.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/fields/Combobox/Combobox.stories.native.js

@@ -0,0 +1,314 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Text, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.native.js";
+import { Form } from "../../Form/index.native.js";
+import { Combobox } from "./index.native.js";
+import { authorOptions } from "./authorOptions.native.js";
+var meta = {
+  title: "Forms/Combobox",
+  component: Combobox,
+  parameters: {
+    docs: {
+      description: {
+        component: "A searchable select component with form integration. Use when options are many and users benefit from filtering by typing."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the combobox"
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text when no value is selected"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the combobox"
+    },
+    error: {
+      control: "text",
+      description: "Error message to display"
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the combobox is required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the combobox is disabled"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the combobox"
+    },
+    searchPlaceholder: {
+      control: "text",
+      description: "Placeholder text in the search input"
+    },
+    options: {
+      control: "object",
+      description: "Array of selectable options"
+    }
+  }
+};
+var Combobox_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = useForm({
+        defaultValues: {
+          author: "",
+          favoriteAuthor: "hemingway"
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */_jsx(Form, {
+        form,
+        children: /* @__PURE__ */_jsxs(YStack, {
+          gap: "$4",
+          maxWidth: 300,
+          children: [/* @__PURE__ */_jsx(Combobox, {
+            label: "Author",
+            name: "author",
+            options: authorOptions,
+            placeholder: "Select an author...",
+            searchPlaceholder: "Type to search...",
+            required: true
+          }), /* @__PURE__ */_jsx(Combobox, {
+            label: "Favorite author",
+            name: "favoriteAuthor",
+            options: authorOptions,
+            placeholder: "Select an author...",
+            searchPlaceholder: "Type to search..."
+          }), /* @__PURE__ */_jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */_jsx(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Author",
+    placeholder: "Select an author",
+    helperText: "Choose an author from the list",
+    options: authorOptions
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */_jsx(Combobox, {
+      ...args
+    });
+  }
+};
+var Basic = {
+  args: {
+    options: authorOptions,
+    placeholder: "Select an author...",
+    searchPlaceholder: "Type to search..."
+  },
+  render: function Render(args) {
+    var [value, setValue] = useState();
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 300,
+      children: [/* @__PURE__ */_jsx(Combobox, {
+        ...args,
+        value,
+        onValueChange: function onValueChange(val) {
+          setValue(Array.isArray(val) ? val[0] : val);
+          action("onValueChange")(val);
+        }
+      }), value && /* @__PURE__ */_jsxs(Text, {
+        color: "$colorHover",
+        children: ["Selected: ", value]
+      })]
+    });
+  }
+};
+var WithLabel = {
+  render: function Render2() {
+    var [value, setValue] = useState();
+    return /* @__PURE__ */_jsx(YStack, {
+      gap: "$4",
+      maxWidth: 300,
+      children: /* @__PURE__ */_jsx(Combobox, {
+        label: "Author",
+        helperText: "Select an author from the list",
+        options: authorOptions,
+        value,
+        onValueChange: function onValueChange(v) {
+          return setValue(Array.isArray(v) ? v[0] : v);
+        },
+        placeholder: "Select an author...",
+        searchPlaceholder: "Type to search..."
+      })
+    });
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Combobox",
+    disabled: true,
+    options: authorOptions,
+    placeholder: "Select an author..."
+  }
+};
+var WithError = {
+  args: {
+    label: "Combobox with Error",
+    error: "This field is required",
+    required: true,
+    options: authorOptions,
+    placeholder: "Select an author..."
+  }
+};
+var Sizes = {
+  render: function render3() {
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */_jsx(Combobox, {
+        label: "Small",
+        size: "$2",
+        options: authorOptions,
+        placeholder: "Select..."
+      }), /* @__PURE__ */_jsx(Combobox, {
+        label: "Medium (default)",
+        size: "$3",
+        options: authorOptions,
+        placeholder: "Select..."
+      }), /* @__PURE__ */_jsx(Combobox, {
+        label: "Large",
+        size: "$4",
+        options: authorOptions,
+        placeholder: "Select..."
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render4() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [value, setValue] = useState();
+      return /* @__PURE__ */_jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */_jsx(Combobox, {
+          label: "Pick an author",
+          options: authorOptions,
+          value,
+          onValueChange: function onValueChange(v) {
+            return setValue(Array.isArray(v) ? v[0] : v);
+          },
+          placeholder: "Select an author..."
+        }), /* @__PURE__ */_jsxs(Text, {
+          children: ["Selected: ", value || "None"]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(InteractiveExample, {});
+  }
+};
+var CustomTrigger = {
+  render: function render5() {
+    var CustomTriggerExample = function CustomTriggerExample2() {
+      var [value, setValue] = useState();
+      return /* @__PURE__ */_jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 300,
+        children: [/* @__PURE__ */_jsx(Text, {
+          fontWeight: "bold",
+          color: "$colorHover",
+          children: "Author picker with custom trigger:"
+        }), /* @__PURE__ */_jsx(XStack, {
+          gap: "$2",
+          alignItems: "center",
+          children: /* @__PURE__ */_jsx(Combobox, {
+            options: authorOptions,
+            value,
+            onValueChange: function onValueChange(v) {
+              return setValue(Array.isArray(v) ? v[0] : v);
+            },
+            searchPlaceholder: "Type to search...",
+            popoverWidth: 260,
+            trigger: function trigger(selected) {
+              var _selected_;
+              return /* @__PURE__ */_jsxs(XStack, {
+                gap: "$2",
+                alignItems: "center",
+                paddingHorizontal: "$3",
+                paddingVertical: "$2",
+                backgroundColor: "$backgroundHover",
+                borderRadius: "$3",
+                hoverStyle: {
+                  backgroundColor: "$backgroundPress"
+                },
+                pressStyle: {
+                  backgroundColor: "$backgroundFocus"
+                },
+                cursor: "pointer",
+                children: [/* @__PURE__ */_jsx(Text, {
+                  fontSize: "$5",
+                  children: "\u{1F4DA}"
+                }), /* @__PURE__ */_jsx(Text, {
+                  color: "$colorHover",
+                  children: (Array.isArray(selected) ? (_selected_ = selected[0]) === null || _selected_ === void 0 ? void 0 : _selected_.label : selected === null || selected === void 0 ? void 0 : selected.label) || "Pick an author"
+                })]
+              });
+            }
+          })
+        }), value && /* @__PURE__ */_jsxs(Text, {
+          color: "$colorHover",
+          children: ["Selected: ", value]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(CustomTriggerExample, {});
+  }
+};
+var ManyOptions = {
+  render: function Render3() {
+    var [value, setValue] = useState();
+    var options = Array.from({
+      length: 100
+    }, function (_, i) {
+      return {
+        value: `item-${i + 1}`,
+        label: `Item ${i + 1}`,
+        keywords: `option number ${i + 1}`
+      };
+    });
+    return /* @__PURE__ */_jsx(YStack, {
+      gap: "$4",
+      maxWidth: 300,
+      children: /* @__PURE__ */_jsx(Combobox, {
+        label: "Pick an item",
+        options,
+        value,
+        onValueChange: function onValueChange(v) {
+          return setValue(Array.isArray(v) ? v[0] : v);
+        },
+        placeholder: "Select from 100 items...",
+        searchPlaceholder: "Type to filter...",
+        emptyMessage: "No matching items."
+      })
+    });
+  }
+};
+export { Basic, CustomTrigger, Disabled, Interactive, Main, ManyOptions, Sizes, Standalone, WithError, WithLabel, Combobox_stories_default as default };
+//# sourceMappingURL=Combobox.stories.native.js.map

package/dist/esm/fields/Combobox/Combobox.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","action","useForm","useState","Text","XStack","YStack","Button","Form","Combobox","authorOptions","meta","title","component","parameters","docs","description","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","searchPlaceholder","Combobox_stories_default","Main","name","render","FormExample","FormExample2","form","defaultValues","author","favoriteAuthor","onSubmit","param","value","children","gap","maxWidth","Standalone","args","render2","Basic","Render","setValue","onValueChange","val","Array","isArray","color","WithLabel","Render2","v","Disabled","WithError","Sizes","render3","Interactive","render4","InteractiveExample","InteractiveExample2","CustomTrigger","render5","CustomTriggerExample","CustomTriggerExample2","fontWeight","alignItems","popoverWidth","trigger","selected","_selected_"],"sources":["../../../../src/fields/Combobox/Combobox.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}