@multiplatform.one/components 0.2.0

package/dist/esm/forms/FormCheckBox/FormCheckBox.stories.js

@@ -0,0 +1,12 @@
+import { FormCheckBox } from "./index";
+var FormCheckBox_stories_default = {
+  title: "forms/FormCheckBox",
+  component: FormCheckBox,
+  parameters: { status: { type: "beta" } }
+};
+const main = () => <FormCheckBox name="checkbox" label="checkbox" checkBoxElement={{ label: "checkbox", value: "checkbox" }}>Hello this is from FormCheckBox</FormCheckBox>;
+export {
+  FormCheckBox_stories_default as default,
+  main
+};
+//# sourceMappingURL=FormCheckBox.stories.js.map

package/dist/esm/forms/FormCheckBox/FormCheckBox.stories.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormCheckBox/FormCheckBox.stories.tsx"],
+  "mappings": "AACA,SAAS,oBAAoB;AAE7B,IAAO,+BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,EAAE;AACzC;AAEO,MAAM,OAAO,MAClB,CAAC,aAAa,KAAK,WAAW,MAAM,WAAW,iBAAiB,EAAE,OAAO,YAAY,OAAO,WAAW,GAAG,+BAE1G,EAFC;",
+  "names": []
+}

package/dist/esm/forms/FormCheckBox/index.js

@@ -0,0 +1,80 @@
+import { Label, Checkbox, XStack, YStack } from "tamagui";
+import { Controller, useFormContext } from "react-hook-form";
+import { FormField } from "../FormField";
+import { useId } from "react";
+import { Check as CheckIcon } from "@tamagui/lucide-icons";
+function FormCheckBox({
+  children,
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  rules,
+  checkBoxElement,
+  CheckBoxElementSizing,
+  IndicatorStyle,
+  iconColor,
+  LabelStyle,
+  ...checkProps
+}) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return <YStack><XStack
+      space={(CheckBoxElementSizing == null ? void 0 : CheckBoxElementSizing.space) || "$3"}
+      height={CheckBoxElementSizing == null ? void 0 : CheckBoxElementSizing.height}
+      width={(CheckBoxElementSizing == null ? void 0 : CheckBoxElementSizing.width) || "300"}
+    >
+      <Checkbox
+        id={id}
+        size={checkBoxElement.size}
+        defaultChecked={checkBoxElement.defaultChecked}
+        value={checkBoxElement.value}
+        {...checkProps}
+      ><Checkbox.Indicator><CheckIcon /></Checkbox.Indicator></Checkbox>
+      <Label size={checkBoxElement.size} htmlFor={id}>{checkBoxElement.label || checkBoxElement.value}</Label>
+    </XStack></YStack>;
+  }
+  return <Controller
+    name={name}
+    control={control}
+    rules={rules}
+    defaultValue={defaultValue}
+    render={({ field: { onChange, value }, fieldState: { error: error2 } }) => <FormField
+      id={id}
+      error={!!error2}
+      helperText={error2 ? error2.message : helperText}
+      label={label}
+      required={required}
+      {...fieldProps}
+    ><YStack><XStack
+      alignItems={(CheckBoxElementSizing == null ? void 0 : CheckBoxElementSizing.ai) || "center"}
+      space={(CheckBoxElementSizing == null ? void 0 : CheckBoxElementSizing.space) || "$3"}
+      height={CheckBoxElementSizing == null ? void 0 : CheckBoxElementSizing.height}
+      width={(CheckBoxElementSizing == null ? void 0 : CheckBoxElementSizing.width) || "300"}
+    >
+      <Checkbox
+        id={id}
+        size={checkBoxElement.size}
+        defaultChecked={checkBoxElement.defaultChecked}
+        value={checkBoxElement.value}
+        checked={value}
+        {...checkProps}
+        onCheckedChange={(e) => {
+          onChange(e);
+          if (checkProps.onCheckedChange)
+            checkProps.onCheckedChange(e);
+        }}
+      ><Checkbox.Indicator {...IndicatorStyle}><CheckIcon /></Checkbox.Indicator></Checkbox>
+      <Label size={checkBoxElement.size} htmlFor={id} {...LabelStyle}>{checkBoxElement.label || checkBoxElement.value}</Label>
+    </XStack></YStack></FormField>}
+  />;
+}
+export {
+  FormCheckBox
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/forms/FormCheckBox/index.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormCheckBox/index.tsx"],
+  "mappings": "AACA,SAAS,OAAO,UAAU,QAAQ,cAAc;AAChD,SAAS,YAAY,sBAAsB;AAG3C,SAAS,iBAAiB;AAC1B,SAAgB,aAAa;AAE7B,SAAS,SAAS,iBAAiB;AAyB5B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiH;AAC/G,QAAM,cAAc,eAAe;AACnC,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,aAAa;AAChB,WACE,CAAC,OACC,CAAC;AAAA,MACC,QAAO,+DAAuB,UAAS;AAAA,MACvC,QAAQ,+DAAuB;AAAA,MAC/B,QAAO,+DAAuB,UAAS;AAAA;AAAA,MAEvC,CAAC;AAAA,QACC,IAAI;AAAA,QACJ,MAAM,gBAAgB;AAAA,QACtB,gBAAgB,gBAAgB;AAAA,QAChC,OAAO,gBAAgB;AAAA,YACnB;AAAA,OAEJ,CAAC,SAAS,UACR,CAAC,UAAU,EACb,EAFC,SAAS,UAGZ,EAVC;AAAA,MAYD,CAAC,MAAM,MAAM,gBAAgB,MAAM,SAAS,KACzC,gBAAgB,SAAS,gBAAgB,MAC5C,EAFC;AAAA,IAGH,EApBC,OAqBH,EAtBC;AAAA,EAwBL;AACA,SACE,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,cAAc;AAAA,IACd,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,MAAM,GAAG,YAAY,EAAE,OAAAA,OAAM,EAAE,MAC3D,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,OAAO,CAAC,CAACA;AAAA,MACT,YAAYA,SAAQA,OAAM,UAAU;AAAA,MACpC,OAAO;AAAA,MACP,UAAU;AAAA,UACN;AAAA,KAEJ,CAAC,OACC,CAAC;AAAA,MACC,aAAY,+DAAuB,OAAM;AAAA,MACzC,QAAO,+DAAuB,UAAS;AAAA,MACvC,QAAQ,+DAAuB;AAAA,MAC/B,QAAO,+DAAuB,UAAS;AAAA;AAAA,MAEvC,CAAC;AAAA,QACC,IAAI;AAAA,QACJ,MAAM,gBAAgB;AAAA,QACtB,gBAAgB,gBAAgB;AAAA,QAChC,OAAO,gBAAgB;AAAA,QACvB,SAAS;AAAA,YACL;AAAA,QACJ,iBAAiB,CAAC,MAAM;AACtB,mBAAS,CAAC;AACV,cAAI,WAAW;AAAiB,uBAAW,gBAAgB,CAAC;AAAA,QAC9D;AAAA,OAEA,CAAC,SAAS,cAAc,gBACtB,CAAC,UAAU,EACb,EAFC,SAAS,UAGZ,EAfC;AAAA,MAgBD,CAAC,MAAM,MAAM,gBAAgB,MAAM,SAAS,QAAQ,aACjD,gBAAgB,SAAS,gBAAgB,MAC5C,EAFC;AAAA,IAGH,EAzBC,OA0BH,EA3BC,OA4BH,EApCC;AAAA,EAsCL;AAEJ;",
+  "names": ["error"]
+}

package/dist/esm/forms/FormField.js

@@ -0,0 +1,17 @@
+import { Label, Paragraph, YStack } from "tamagui";
+function FormField({ children, label, error, helperText, labelProps, id, size, required }) {
+  return <YStack>
+    {label && <Label htmlFor={id} size={size || "$3"} {...labelProps} color={error ? "$red10" : void 0}>
+      {label}
+      {required && ` *`}
+    </Label>}
+    <YStack>
+      {children}
+      {helperText && <Paragraph paddingLeft="$2" size={size} color={error ? "$red10" : void 0}>{helperText}</Paragraph>}
+    </YStack>
+  </YStack>;
+}
+export {
+  FormField
+};
+//# sourceMappingURL=FormField.js.map

package/dist/esm/forms/FormField.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/forms/FormField.tsx"],
+  "mappings": "AAGA,SAAS,OAAO,WAAW,cAAc;AAalC,SAAS,UAAU,EAAE,UAAU,OAAO,OAAO,YAAY,YAAY,IAAI,MAAM,SAAS,GAAmB;AAChH,SACE,CAAC;AAAA,KACE,SACC,CAAC,MAAM,SAAS,IAAI,MAAM,QAAQ,UAAU,YAAY,OAAO,QAAQ,WAAW;AAAA,OAC/E;AAAA,OACA,YAAY;AAAA,IACf,EAHC;AAAA,IAKH,CAAC;AAAA,OACE;AAAA,OACA,cACC,CAAC,UAAU,YAAY,KAAK,MAAM,MAAwB,OAAO,QAAQ,WAAW,SACjF,WACH,EAFC;AAAA,IAIL,EAPC;AAAA,EAQH,EAfC;AAiBL;",
+  "names": []
+}

package/dist/esm/forms/FormInput/FormInput.stories.js

@@ -0,0 +1,19 @@
+import { FormInput } from "./index";
+import { YStack } from "tamagui";
+import { action } from "@storybook/addon-actions";
+var FormInput_stories_default = {
+  title: "forms/FormInput",
+  component: FormInput,
+  parameters: {
+    status: { type: "beta" }
+  }
+};
+const main = () => <YStack padding="$4" space>
+  <FormInput onChangeText={action("onTextChange")} name="firstName" label="First Name" />
+  <FormInput onChangeText={action("onTextChange")} name="lastName" label="Last Name" />
+</YStack>;
+export {
+  FormInput_stories_default as default,
+  main
+};
+//# sourceMappingURL=FormInput.stories.js.map

package/dist/esm/forms/FormInput/FormInput.stories.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormInput/FormInput.stories.tsx"],
+  "mappings": "AACA,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,cAAc;AAEvB,IAAO,4BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ,EAAE,MAAM,OAAO;AAAA,EACzB;AACF;AAEO,MAAM,OAAO,MAClB,CAAC,OAAO,QAAQ,KAAK;AAAA,EACnB,CAAC,UAAU,cAAc,OAAO,cAAc,GAAG,KAAK,YAAY,MAAM,aAAa;AAAA,EACrF,CAAC,UAAU,cAAc,OAAO,cAAc,GAAG,KAAK,WAAW,MAAM,YAAY;AACrF,EAHC;",
+  "names": []
+}

package/dist/esm/forms/FormInput/index.js

@@ -0,0 +1,53 @@
+import { useId } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { FormField } from "../FormField";
+import { Input } from "tamagui";
+function FormInput({
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  rules,
+  ...inputProps
+}) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}><Input {...inputProps} /></FormField>;
+  }
+  return <Controller
+    name={name}
+    control={control}
+    rules={rules}
+    defaultValue={defaultValue}
+    render={({ field: { onChange, value, onBlur }, fieldState: { error: error2 } }) => <FormField
+      id={id}
+      error={!!error2}
+      helperText={error2 ? error2.message : helperText}
+      label={label}
+      required={required}
+      {...fieldProps}
+    ><Input
+      {...inputProps}
+      value={value ?? ""}
+      onBlur={(e) => {
+        onBlur();
+        if (inputProps.onBlur)
+          inputProps.onBlur(e);
+      }}
+      onChange={(e) => {
+        onChange(e);
+        if (inputProps.onChange)
+          inputProps.onChange(e);
+      }}
+    /></FormField>}
+  />;
+}
+export {
+  FormInput
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/forms/FormInput/index.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormInput/index.tsx"],
+  "mappings": "AAAA,SAAgB,aAAa;AAI7B,SAAS,YAAY,sBAAsB;AAC3C,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AAOf,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,cAAc,eAAe;AACnC,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,aAAa;AAChB,WACE,CAAC,UAAU,IAAI,IAAI,OAAO,CAAC,CAAC,OAAO,YAAY,YAAY,OAAO,OAAO,UAAU,cAAc,YAC/F,CAAC,UAAU,YAAY,EACzB,EAFC;AAAA,EAIL;AACA,SACE,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,cAAc;AAAA,IACd,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,OAAO,OAAO,GAAG,YAAY,EAAE,OAAAA,OAAM,EAAE,MACnE,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,OAAO,CAAC,CAACA;AAAA,MACT,YAAYA,SAAQA,OAAM,UAAU;AAAA,MACpC,OAAO;AAAA,MACP,UAAU;AAAA,UACN;AAAA,KAEJ,CAAC;AAAA,UACK;AAAA,MACJ,OAAO,SAAS;AAAA,MAChB,QAAQ,CAAC,MAAM;AACb,eAAO;AACP,YAAI,WAAW;AAAQ,qBAAW,OAAO,CAAC;AAAA,MAC5C;AAAA,MACA,UAAU,CAAC,MAAM;AACf,iBAAS,CAAC;AACV,YAAI,WAAW;AAAU,qBAAW,SAAS,CAAC;AAAA,MAChD;AAAA,IACF,EACF,EApBC;AAAA,EAsBL;AAEJ;",
+  "names": ["error"]
+}

package/dist/esm/forms/FormRadioGroup/FormRadioGroup.stories.js

@@ -0,0 +1,22 @@
+import { FormRadioGroup } from "./index";
+var FormRadioGroup_stories_default = {
+  title: "forms/FormRadioGroup",
+  component: FormRadioGroup,
+  parameters: { status: { type: "beta" } }
+};
+const main = () => <FormRadioGroup
+  name="radio group"
+  label="radio group"
+  helperText="select an option"
+  required
+  radioElements={[
+    { label: "option 1", value: "option1" },
+    { label: "option 2", value: "option2" },
+    { label: "option 3", value: "option3" }
+  ]}
+/>;
+export {
+  FormRadioGroup_stories_default as default,
+  main
+};
+//# sourceMappingURL=FormRadioGroup.stories.js.map

package/dist/esm/forms/FormRadioGroup/FormRadioGroup.stories.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormRadioGroup/FormRadioGroup.stories.tsx"],
+  "mappings": "AACA,SAAS,sBAAsB;AAE/B,IAAO,iCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,EAAE;AACzC;AAEO,MAAM,OAAO,MAClB,CAAC;AAAA,EACC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,WAAW;AAAA,EACX;AAAA,EACA,eAAe;AAAA,IACb,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,IACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,IACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,EACxC;AACF;",
+  "names": []
+}

package/dist/esm/forms/FormRadioGroup/index.js

@@ -0,0 +1,60 @@
+import { useId } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { FormField } from "../FormField";
+import { Label, RadioGroup, XStack, YStack } from "tamagui";
+function FormRadioGroup({
+  children,
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  horizontal,
+  rules,
+  labelStyle,
+  spacingProps,
+  ...radioProps
+}) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return <RadioGroup name={name} {...radioProps}>{horizontal ? <XStack {...spacingProps}>{radioProps.radioElements.map((item) => <FormRadio {...item} key={item.value} />)}</XStack> : <YStack {...spacingProps}>{radioProps.radioElements.map((item) => <FormRadio {...item} key={item.value} />)}</YStack>}</RadioGroup>;
+  }
+  return <Controller
+    name={name}
+    control={control}
+    rules={rules}
+    defaultValue={defaultValue}
+    render={({ field: { onChange, value }, fieldState: { error: error2 } }) => <FormField
+      id={id}
+      error={!!error2}
+      helperText={error2 ? error2.message : helperText}
+      label={label}
+      required={required}
+      {...fieldProps}
+    ><RadioGroup
+      name={name}
+      {...radioProps}
+      value={value}
+      onValueChange={(e) => {
+        onChange(e);
+        if (radioProps.onValueChange)
+          radioProps.onValueChange(e);
+      }}
+    >{horizontal ? <XStack {...spacingProps}>{radioProps.radioElements.map((item) => <FormRadio {...item} key={item.value} {...labelStyle} />)}</XStack> : <YStack {...spacingProps}>{radioProps.radioElements.map((item) => <FormRadio {...item} key={item.value} {...labelStyle} />)}</YStack>}</RadioGroup></FormField>}
+  />;
+}
+function FormRadio({ label, value, size, disabled, id, ...labelStyle }) {
+  return <XStack alignItems="center" space="$1">
+    <RadioGroup.Item value={value} id={id} size={size}><RadioGroup.Indicator disabled={disabled} /></RadioGroup.Item>
+    <Label size={size} htmlFor={id} {...labelStyle}>{label}</Label>
+  </XStack>;
+}
+export {
+  FormRadio,
+  FormRadioGroup
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/forms/FormRadioGroup/index.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormRadioGroup/index.tsx"],
+  "mappings": "AAAA,SAAgB,aAAa;AAI7B,SAAS,YAAY,sBAAsB;AAC3C,SAAS,iBAAiB;AAC1B,SAAS,OAAO,YAAY,QAAQ,cAAc;AAwB3C,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgG;AAC9F,QAAM,cAAc,eAAe;AACnC,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,aAAa;AAChB,WACE,CAAC,WAAW,MAAM,UAAU,aACzB,aACC,CAAC,WAAW,eACT,WAAW,cAAc,IAAI,CAAC,SAC7B,CAAC,cAAc,MAAM,KAAK,KAAK,OAAO,EACvC,EACH,EAJC,UAMD,CAAC,WAAW,eACT,WAAW,cAAc,IAAI,CAAC,SAC7B,CAAC,cAAc,MAAM,KAAK,KAAK,OAAO,EACvC,EACH,EAJC,QAML,EAdC;AAAA,EAgBL;AACA,SACE,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,cAAc;AAAA,IACd,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,MAAM,GAAG,YAAY,EAAE,OAAAA,OAAM,EAAE,MAC3D,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,OAAO,CAAC,CAACA;AAAA,MACT,YAAYA,SAAQA,OAAM,UAAU;AAAA,MACpC,OAAO;AAAA,MACP,UAAU;AAAA,UACN;AAAA,KAEJ,CAAC;AAAA,MACC,MAAM;AAAA,UACF;AAAA,MACJ,OAAO;AAAA,MACP,eAAe,CAAC,MAAM;AACpB,iBAAS,CAAC;AACV,YAAI,WAAW;AAAe,qBAAW,cAAc,CAAC;AAAA,MAC1D;AAAA,MAEC,aACC,CAAC,WAAW,eACT,WAAW,cAAc,IAAI,CAAC,SAC7B,CAAC,cAAc,MAAM,KAAK,KAAK,WAAW,YAAY,EACvD,EACH,EAJC,UAMD,CAAC,WAAW,eACT,WAAW,cAAc,IAAI,CAAC,SAC7B,CAAC,cAAc,MAAM,KAAK,KAAK,WAAW,YAAY,EACvD,EACH,EAJC,QAML,EAtBC,WAuBH,EA/BC;AAAA,EAiCL;AAEJ;AAEO,SAAS,UAAU,EAAE,OAAO,OAAO,MAAM,UAAU,IAAI,GAAG,WAAW,GAAmB;AAC7F,SACE,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,IAChC,CAAC,WAAW,KAAK,OAAO,OAAO,IAAI,IAAI,MAAM,MAC3C,CAAC,WAAW,UAAU,UAAU,UAAU,EAC5C,EAFC,WAAW;AAAA,IAGZ,CAAC,MAAM,MAAM,MAAM,SAAS,QAAQ,aACjC,MACH,EAFC;AAAA,EAGH,EAPC;AASL;",
+  "names": ["error"]
+}

package/dist/esm/forms/FormSelectSimple/FormSelectSimple.stories.js

@@ -0,0 +1,20 @@
+import { FormSelectSimple } from "./index";
+import { Select } from "tamagui";
+var FormSelectSimple_stories_default = {
+  title: "forms/FormSelectSimple",
+  component: FormSelectSimple,
+  parameters: {
+    status: { type: "beta" }
+  }
+};
+const main = () => <FormSelectSimple name="FormSelectSimple" placeholder="select one of these">
+  <Select.Item index={0} value="bmw"><Select.ItemText>BMW</Select.ItemText></Select.Item>
+  <Select.Item index={1} value="audi"><Select.ItemText>AUDI</Select.ItemText></Select.Item>
+  <Select.Item index={2} value="ford"><Select.ItemText>FORD</Select.ItemText></Select.Item>
+  <Select.Item index={3} value="suzuki"><Select.ItemText>SUZUKI</Select.ItemText></Select.Item>
+</FormSelectSimple>;
+export {
+  FormSelectSimple_stories_default as default,
+  main
+};
+//# sourceMappingURL=FormSelectSimple.stories.js.map

package/dist/esm/forms/FormSelectSimple/FormSelectSimple.stories.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormSelectSimple/FormSelectSimple.stories.tsx"],
+  "mappings": "AACA,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAEvB,IAAO,mCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ,EAAE,MAAM,OAAO;AAAA,EACzB;AACF;AAEO,MAAM,OAAO,MAClB,CAAC,iBAAiB,KAAK,mBAAmB,YAAY;AAAA,EACpD,CAAC,OAAO,KAAK,OAAO,GAAG,MAAM,MAC3B,CAAC,OAAO,SAAS,GAAG,EAAnB,OAAO,SACV,EAFC,OAAO;AAAA,EAGR,CAAC,OAAO,KAAK,OAAO,GAAG,MAAM,OAC3B,CAAC,OAAO,SAAS,IAAI,EAApB,OAAO,SACV,EAFC,OAAO;AAAA,EAGR,CAAC,OAAO,KAAK,OAAO,GAAG,MAAM,OAC3B,CAAC,OAAO,SAAS,IAAI,EAApB,OAAO,SACV,EAFC,OAAO;AAAA,EAGR,CAAC,OAAO,KAAK,OAAO,GAAG,MAAM,SAC3B,CAAC,OAAO,SAAS,MAAM,EAAtB,OAAO,SACV,EAFC,OAAO;AAGV,EAbC;",
+  "names": []
+}

package/dist/esm/forms/FormSelectSimple/index.js

@@ -0,0 +1,48 @@
+import { useId } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { FormField } from "../FormField";
+import { SelectSimple } from "../SelectSimple";
+function FormSelectSimple({
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  rules,
+  ...selectProps
+}) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}><SelectSimple {...selectProps} /></FormField>;
+  }
+  return <Controller
+    name={name}
+    control={control}
+    rules={rules}
+    defaultValue={defaultValue}
+    render={({ field: { onChange, value }, fieldState: { error: error2 } }) => <FormField
+      id={id}
+      error={!!error2}
+      helperText={error2 ? error2.message : helperText}
+      label={label}
+      required={required}
+      {...fieldProps}
+    ><SelectSimple
+      {...selectProps}
+      value={value ?? ""}
+      onValueChange={(e) => {
+        onChange(e);
+        if (selectProps.onValueChange)
+          selectProps.onValueChange(e);
+      }}
+    /></FormField>}
+  />;
+}
+export {
+  FormSelectSimple
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/forms/FormSelectSimple/index.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormSelectSimple/index.tsx"],
+  "mappings": "AAAA,SAAgB,aAAa;AAI7B,SAAS,YAAY,sBAAsB;AAC3C,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAOtB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,cAAc,eAAe;AACnC,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,aAAa;AAChB,WACE,CAAC,UAAU,IAAI,IAAI,OAAO,CAAC,CAAC,OAAO,YAAY,YAAY,OAAO,OAAO,UAAU,cAAc,YAC/F,CAAC,iBAAiB,aAAa,EACjC,EAFC;AAAA,EAIL;AACA,SACE,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,cAAc;AAAA,IACd,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,MAAM,GAAG,YAAY,EAAE,OAAAA,OAAM,EAAE,MAC3D,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,OAAO,CAAC,CAACA;AAAA,MACT,YAAYA,SAAQA,OAAM,UAAU;AAAA,MACpC,OAAO;AAAA,MACP,UAAU;AAAA,UACN;AAAA,KAEJ,CAAC;AAAA,UACK;AAAA,MACJ,OAAO,SAAS;AAAA,MAChB,eAAe,CAAC,MAAM;AACpB,iBAAS,CAAC;AACV,YAAI,YAAY;AAAe,sBAAY,cAAc,CAAC;AAAA,MAC5D;AAAA,IACF,EACF,EAhBC;AAAA,EAkBL;AAEJ;",
+  "names": ["error"]
+}

package/dist/esm/forms/FormSlider/FormSlider.stories.js

@@ -0,0 +1,14 @@
+import { FormSlider } from "./index";
+var FormSlider_stories_default = {
+  title: "forms/FormSlider",
+  component: FormSlider,
+  parameters: {
+    status: { type: "beta" }
+  }
+};
+const main = () => <FormSlider name="FormSlider" size={20} />;
+export {
+  FormSlider_stories_default as default,
+  main
+};
+//# sourceMappingURL=FormSlider.stories.js.map

package/dist/esm/forms/FormSlider/FormSlider.stories.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormSlider/FormSlider.stories.tsx"],
+  "mappings": "AACA,SAAS,kBAAkB;AAE3B,IAAO,6BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ,EAAE,MAAM,OAAO;AAAA,EACzB;AACF;AAEO,MAAM,OAAO,MAAM,CAAC,WAAW,KAAK,aAAa,MAAM,IAAI;",
+  "names": []
+}

package/dist/esm/forms/FormSlider/index.js

@@ -0,0 +1,66 @@
+import { useId } from "react";
+import { Slider } from "tamagui";
+import { Controller, useFormContext } from "react-hook-form";
+import { FormField } from "../FormField";
+function FormSlider({
+  children,
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  thumbStyle,
+  rules,
+  ...switchProps
+}) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return <Slider defaultValue={defaultValue} {...switchProps}>
+      <Slider.Track><Slider.TrackActive /></Slider.Track>
+      <Slider.Thumb
+        bordered
+        circular
+        elevate
+        index={0}
+        aria-describedby="my-tooltip"
+        position="absolute"
+        style={{ height: 10, width: 10 }}
+      />
+    </Slider>;
+  }
+  return <Controller
+    name={name}
+    control={control}
+    rules={rules}
+    defaultValue={defaultValue}
+    render={({ field: { onChange, value }, fieldState: { error: error2 } }) => <FormField
+      id={id}
+      error={!!error2}
+      helperText={error2 ? error2.message : helperText}
+      label={label}
+      required={required}
+      {...fieldProps}
+    ><Slider defaultValue={defaultValue} value={value} onValueChange={onChange} {...switchProps}>
+      <Slider.Track><Slider.TrackActive /></Slider.Track>
+      <Slider.Thumb
+        alignItems="center"
+        justifyContent="center"
+        bordered
+        circular
+        userSelect="none"
+        elevate
+        index={0}
+        {...thumbStyle}
+      >{value[0]}</Slider.Thumb>
+      {children}
+    </Slider></FormField>}
+  />;
+}
+export {
+  FormSlider
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/forms/FormSlider/index.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormSlider/index.tsx"],
+  "mappings": "AACA,SAAgB,aAAa;AAE7B,SAAS,cAAc;AAGvB,SAAS,YAAY,sBAAsB;AAC3C,SAAS,iBAAiB;AAOnB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,cAAc,eAAe;AACnC,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,aAAa;AAChB,WACE,CAAC,OAAO,cAAc,kBAAkB;AAAA,MACtC,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,OAAO,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,MACjC;AAAA,IACF,EAbC;AAAA,EAeL;AACA,SACE,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,cAAc;AAAA,IACd,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,MAAM,GAAG,YAAY,EAAE,OAAAA,OAAM,EAAE,MAC3D,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,OAAO,CAAC,CAACA;AAAA,MACT,YAAYA,SAAQA,OAAM,UAAU;AAAA,MACpC,OAAO;AAAA,MACP,UAAU;AAAA,UACN;AAAA,KAEJ,CAAC,OAAO,cAAc,cAAc,OAAO,OAAO,eAAe,cAAc;AAAA,MAC7E,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO;AAAA,QACN,WAAW;AAAA,QACX,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA,OAAO;AAAA,YACH;AAAA,QAEH,MAAM,CAAC,EACV,EAXC,OAAO;AAAA,OAYP;AAAA,IACH,EAjBC,OAkBH,EA1BC;AAAA,EA4BL;AAEJ;",
+  "names": ["error"]
+}

package/dist/esm/forms/FormSubmitButton/FormSubmitButton.stories.js

@@ -0,0 +1,15 @@
+import { SimpleForm } from "../SimpleForm";
+import { FormSubmitButton } from "./index";
+var FormSubmitButton_stories_default = {
+  title: "forms/FormSubmitButton",
+  component: FormSubmitButton,
+  parameters: {
+    status: { type: "beta" }
+  }
+};
+const main = () => <SimpleForm><FormSubmitButton onSubmit={() => console.log("Form submitted")}>Click here</FormSubmitButton></SimpleForm>;
+export {
+  FormSubmitButton_stories_default as default,
+  main
+};
+//# sourceMappingURL=FormSubmitButton.stories.js.map

package/dist/esm/forms/FormSubmitButton/FormSubmitButton.stories.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormSubmitButton/FormSubmitButton.stories.tsx"],
+  "mappings": "AACA,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAEjC,IAAO,mCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ,EAAE,MAAM,OAAO;AAAA,EACzB;AACF;AAEO,MAAM,OAAO,MAClB,CAAC,WACC,CAAC,iBAAiB,UAAU,MAAM,QAAQ,IAAI,gBAAgB,GAAG,UAAU,EAA1E,iBACH,EAFC;",
+  "names": []
+}

package/dist/esm/forms/FormSubmitButton/index.js

@@ -0,0 +1,25 @@
+import { Button } from "tamagui";
+import { useFormContext } from "react-hook-form";
+function FormSubmitButton({
+  onSubmit,
+  onPress,
+  ...buttonProps
+}) {
+  const formContext = useFormContext();
+  const { handleSubmit } = formContext;
+  return <Button
+    onPress={(e) => {
+      if (onPress)
+        onPress(e);
+      handleSubmit((data) => {
+        if (onSubmit)
+          onSubmit(data, formContext);
+      })(e);
+    }}
+    {...buttonProps}
+  />;
+}
+export {
+  FormSubmitButton
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/forms/FormSubmitButton/index.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormSubmitButton/index.tsx"],
+  "mappings": "AAIA,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAMxB,SAAS,iBAAsD;AAAA,EACpE;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM,cAAc,eAAkB;AACtC,QAAM,EAAE,aAAa,IAAI;AACzB,SACE,CAAC;AAAA,IACC,SAAS,CAAC,MAA6B;AACrC,UAAI;AAAS,gBAAQ,CAAC;AACtB,mBAAa,CAAC,SAAS;AACrB,YAAI;AAAU,mBAAS,MAAM,WAAW;AAAA,MAC1C,CAAC,EAAE,CAAC;AAAA,IACN;AAAA,QACI;AAAA,EACN;AAEJ;",
+  "names": []
+}

package/dist/esm/forms/FormSwitch/FormSwitch.stories.js

@@ -0,0 +1,14 @@
+import { FormSwitch } from "./index";
+var FormSwitch_stories_default = {
+  title: "forms/FormSwitch",
+  component: FormSwitch,
+  parameters: {
+    status: { type: "beta" }
+  }
+};
+const main = () => <FormSwitch label="Example Switch" name="exampleSwitch" helperText="This is an example switch" defaultValue={false} />;
+export {
+  FormSwitch_stories_default as default,
+  main
+};
+//# sourceMappingURL=FormSwitch.stories.js.map

package/dist/esm/forms/FormSwitch/FormSwitch.stories.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/FormSwitch/FormSwitch.stories.tsx"],
+  "mappings": "AACA,SAAS,kBAAkB;AAE3B,IAAO,6BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ,EAAE,MAAM,OAAO;AAAA,EACzB;AACF;AAEO,MAAM,OAAO,MAClB,CAAC,WAAW,MAAM,iBAAiB,KAAK,gBAAgB,WAAW,4BAA4B,cAAc,OAAO;",
+  "names": []
+}

package/dist/esm/forms/FormSwitch/index.js

@@ -0,0 +1,59 @@
+import { useId } from "react";
+import { Switch } from "tamagui";
+import { Controller, useFormContext } from "react-hook-form";
+import { FormField } from "../FormField";
+function FormSwitch({
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  rules,
+  ThumbStyle,
+  ...switchProps
+}) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}><Switch {...switchProps} /></FormField>;
+  }
+  return <Controller
+    name={name}
+    control={control}
+    rules={rules}
+    defaultValue={defaultValue}
+    render={({ field: { onChange, value }, fieldState: { error: error2 } }) => <FormField
+      id={id}
+      error={!!error2}
+      helperText={error2 ? error2.message : helperText}
+      label={label}
+      required={required}
+      {...fieldProps}
+    ><Switch
+      checked={value ?? false}
+      id={id}
+      {...switchProps}
+      onCheckedChange={(e) => {
+        onChange(e);
+        if (switchProps.onCheckedChange)
+          switchProps.onCheckedChange(e);
+      }}
+      onPress={(e) => {
+        e.preventDefault();
+        if (switchProps.onPress)
+          switchProps.onPress(e);
+      }}
+    ><Switch.Thumb {...ThumbStyle} /></Switch></FormField>}
+  />;
+}
+FormSwitch.defaultProps = {
+  size: "$3",
+  Animation: "quick"
+};
+export {
+  FormSwitch
+};
+//# sourceMappingURL=index.js.map