@multiplatform.one/forms 6.0.0

package/dist/jsx/fields/ImageField/ImageField.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["import_jsx_runtime","require","import_vitest","import_test_utils","import_Form","import_index","describe","it","result","renderWithProviders","jsx","ImageField","label","name","expect","findTextElement","toBeDefined","required","container","querySelector","textContent","toContain","helperText","skeleton","toBeNull","input","toBeTruthy"],"sources":["../../../../src/fields/ImageField/ImageField.spec.tsx"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AACT,IAAAA,kBAAS,GAAAC,OAAA,oBAA2B;AACpC,IAAAC,aAAS,GAAAD,OAAY;AACrB,IAAAE,iBAAS,GAAAF,OAAkB;AAKc,IAAAG,WAAA,GAAAH,OAAA;AAHzC,IAAAI,YAAS,GAAAJ,OAAc,oBAAM;AAC3B,IAAAC,aAAS,CAAAI,QAAA,cAAwB,EAAM;EACrC,IAAAJ,aAAG,CAAAI,QAAA,EAAsB,sBAAM;IAC7B,IAAAJ,aAAe,CAAAK,EAAA,sBAAoB;MACnC,IAAAC,MAAO,IAAO,GAAAL,iBAAgB,CAAAM,mBAAuB,qBAAAT,kBAAA,CAAAU,GAAA,EAAAL,YAAA,CAAAM,UAAA;QACtDC,KAAA;QAEEC,IAAA;MACD;MACA,IAAAX,aAAc,CAAAY,MAAO,EAAAN,MAAU,CAAAO,eAAc,SAAO,GAAAC,WAAA;IACpD;IACF,CAAC,GAAAd,aAAA,CAAAK,EAAA;MAED,IAAGC,MAAA,OAAAL,iBAA4B,CAAMM,mBAAA,qBAAAT,kBAAA,CAAAU,GAAA,EAAAL,YAAA,CAAAM,UAAA;QACnCC,KAAM,YAAS;QACbC,IAAA;QACFI,QAAA;MACA;MACD,IAAAL,KAAA,GAAAJ,MAAA,CAAAU,SAAA,CAAAC,aAAA;MAED,CAAG,GAAAjB,aAAA,CAAAY,MAAA,EAAAF,KAAA,KAAgC,IAAM,IAAAA,KAAA,uBAAAA,KAAA,CAAAQ,WAAA,EAAAC,SAAA;IACvC;IACA,IAAAnB,aAAc,CAAAK,EAAA,4BAAwB,cAAqB;MAC5D,IAAAC,MAAA,OAAAL,iBAAA,CAAAM,mBAAA,qBAAAT,kBAAA,CAAAU,GAAA,EAAAL,YAAA,CAAAM,UAAA;QAEEC,KAAA;QACDC,IAAM;QACNS,UAAM,EAAQ;MACd;MACD,IAAApB,aAAA,CAAAY,MAAA,EAAAN,MAAA,CAAAO,eAAA,qBAAAC,WAAA;IAED;IACE,IAAAd,aAAe,CAAAK,EAAA;MAAA,IACbC,MAAA,OAAAL,iBAAC,CAAAM,mBAAyB,iBAAW,IAAAT,kBAAY,CAAAU,GAAkB,EAAAL,YAAA,CAAAM,UAAA;QACrEC,KAAA;QACAC,IAAA,EAAO;QACRU,QAAA;MAED,CAAG;MACD,IAAArB,aAAe,CAAAY,MAAA,EAAAN,MAAA,CAAAU,SAAoB,CAAAC,aAAC,qBAAiB,GAAAK,QAAW;IAChE;IACF,CAAC,GAAAtB,aAAA,CAAAK,EAAA;MACF,IAAAC,MAAA,OAAAL,iBAAA,CAAAM,mBAAA,qBAAAT,kBAAA,CAAAU,GAAA,EAAAL,YAAA,CAAAM,UAAA;QAEDC,KAAS;QACJC,IAAA;MACD;MAAe,IACbY,KAAA,GAAAjB,MAAA,CAAAU,SAAC,CAAAC,aAAK,CAAa,oBAAmB;MAGxC,IAAAjB,aAAA,CAAAY,MAAA,EAAAW,KAAA,EAAAC,UAAA;IACA;IACF,CAAC,GAAAxB,aAAA,CAAAK,EAAA;MACF,IAAAC,MAAA,OAAAL,iBAAA,CAAAM,mBAAA,qBAAAT,kBAAA,CAAAU,GAAA,EAAAL,YAAA,CAAAM,UAAA;QACFC,KAAA","ignoreList":[]}

package/dist/jsx/fields/ImageField/ImageField.stories.mjs

@@ -0,0 +1,265 @@
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { YStack, XStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Form } from "../../Form/index.mjs";
+import { ImageField } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Forms/ImageField",
+  component: ImageField,
+  parameters: {
+    docs: {
+      description: {
+        component: "An image upload field that shows a preview when an image exists, or a dashed upload area when empty. Both states have the same dimensions for consistent layout."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Field label"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text below the field"
+    },
+    error: {
+      control: "text",
+      description: "Error message"
+    },
+    required: {
+      control: "boolean",
+      description: "Mark field as required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disable image upload"
+    },
+    readOnly: {
+      control: "boolean",
+      description: "Read-only mode"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Field size"
+    },
+    imageWidth: {
+      control: "number",
+      description: "Width of the image area"
+    },
+    imageHeight: {
+      control: "number",
+      description: "Height of the image area"
+    },
+    showRemove: {
+      control: "boolean",
+      description: "Show remove button on image"
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text when no image"
+    }
+  }
+};
+var ImageField_stories_default = meta;
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          avatar: null,
+          logo: null
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */jsx(ImageField, {
+            ...{
+              label: "Profile Avatar",
+              name: "avatar",
+              helperText: "Upload your profile picture",
+              imageWidth: 64,
+              imageHeight: 64
+            }
+          }), /* @__PURE__ */jsx(ImageField, {
+            ...{
+              label: "Company Logo",
+              name: "logo",
+              helperText: "Upload your company logo",
+              imageWidth: 120,
+              imageHeight: 60
+            }
+          }), /* @__PURE__ */jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Upload Image",
+    helperText: "Click to upload an image",
+    imageWidth: 64,
+    imageHeight: 64
+  },
+  render: args => /* @__PURE__ */jsx(ImageField, {
+    ...args
+  })
+};
+const WithPlaceholder = {
+  args: {
+    label: "Profile Picture",
+    placeholder: "Upload",
+    imageWidth: 80,
+    imageHeight: 80
+  },
+  render: args => /* @__PURE__ */jsx(ImageField, {
+    ...args
+  })
+};
+const WithExistingImage = {
+  args: {
+    label: "Current Avatar",
+    value: "https://picsum.photos/200",
+    imageWidth: 80,
+    imageHeight: 80,
+    helperText: "Click to change image"
+  },
+  render: args => /* @__PURE__ */jsx(ImageField, {
+    ...args
+  })
+};
+const Disabled = {
+  args: {
+    label: "Disabled Image",
+    disabled: true,
+    imageWidth: 64,
+    imageHeight: 64
+  },
+  render: args => /* @__PURE__ */jsx(ImageField, {
+    ...args
+  })
+};
+const ReadOnly = {
+  args: {
+    label: "Read Only",
+    readOnly: true,
+    value: "https://picsum.photos/200",
+    imageWidth: 64,
+    imageHeight: 64
+  },
+  render: args => /* @__PURE__ */jsx(ImageField, {
+    ...args
+  })
+};
+const WithError = {
+  args: {
+    label: "Required Image",
+    error: "Please upload an image",
+    required: true,
+    imageWidth: 64,
+    imageHeight: 64
+  },
+  render: args => /* @__PURE__ */jsx(ImageField, {
+    ...args
+  })
+};
+const Sizes = {
+  render: () => /* @__PURE__ */jsx(YStack, {
+    gap: "$4",
+    children: /* @__PURE__ */jsxs(XStack, {
+      gap: "$4",
+      alignItems: "flex-end",
+      children: [/* @__PURE__ */jsx(ImageField, {
+        label: "Small (32x32)",
+        imageWidth: 32,
+        imageHeight: 32
+      }), /* @__PURE__ */jsx(ImageField, {
+        label: "Medium (48x48)",
+        imageWidth: 48,
+        imageHeight: 48
+      }), /* @__PURE__ */jsx(ImageField, {
+        label: "Large (64x64)",
+        imageWidth: 64,
+        imageHeight: 64
+      }), /* @__PURE__ */jsx(ImageField, {
+        label: "XL (96x96)",
+        imageWidth: 96,
+        imageHeight: 96
+      })]
+    })
+  })
+};
+const RectangularSizes = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    children: [/* @__PURE__ */jsx(ImageField, {
+      label: "Banner (200x80)",
+      imageWidth: 200,
+      imageHeight: 80,
+      placeholder: "Banner"
+    }), /* @__PURE__ */jsx(ImageField, {
+      label: "Logo (160x40)",
+      imageWidth: 160,
+      imageHeight: 40,
+      placeholder: "Logo"
+    }), /* @__PURE__ */jsx(ImageField, {
+      label: "Thumbnail (120x90)",
+      imageWidth: 120,
+      imageHeight: 90,
+      placeholder: "Thumb"
+    })]
+  })
+};
+const Interactive = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [image, setImage] = useState(null);
+      return /* @__PURE__ */jsx(YStack, {
+        gap: "$4",
+        children: /* @__PURE__ */jsx(ImageField, {
+          label: "Upload Image",
+          value: image,
+          onValueChange: val => {
+            setImage(val);
+            action("onValueChange")(val);
+          },
+          imageWidth: 80,
+          imageHeight: 80,
+          helperText: image ? typeof image === "string" ? "URL loaded" : `File: ${image.name}` : "No image selected"
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(InteractiveExample, {});
+  }
+};
+const NoRemoveButton = {
+  args: {
+    label: "No Remove Button",
+    value: "https://picsum.photos/200",
+    showRemove: false,
+    imageWidth: 64,
+    imageHeight: 64,
+    helperText: "Click image to change"
+  },
+  render: args => /* @__PURE__ */jsx(ImageField, {
+    ...args
+  })
+};
+export { Disabled, Interactive, Main, NoRemoveButton, ReadOnly, RectangularSizes, Sizes, Standalone, WithError, WithExistingImage, WithPlaceholder, ImageField_stories_default as default };
+//# sourceMappingURL=ImageField.stories.mjs.map

package/dist/jsx/fields/ImageField/ImageField.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["action","useForm","useState","YStack","XStack","Button","Form","ImageField","jsx","jsxs","meta","title","component","parameters","docs","description","argTypes","label","control","helperText","error","required","disabled","readOnly","size","options","imageWidth","imageHeight","showRemove","placeholder","ImageField_stories_default","Main","name","render","FormExample","form","defaultValues","avatar","logo","onSubmit","value","children","gap","Standalone","args","WithPlaceholder","WithExistingImage","Disabled","ReadOnly","WithError","Sizes","alignItems","RectangularSizes","Interactive","InteractiveExample","image","setImage","onValueChange","val","NoRemoveButton"],"sources":["../../../../src/fields/ImageField/ImageField.stories.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AAEvB,SAASC,OAAA,QAAe;AACxB,SAASC,QAAA,QAAgB;AACzB,SAASC,MAAA,EAAQC,MAAA,QAAc;AAC/B,SAASC,MAAA,QAAc;AACvB,SAASC,IAAA,QAAY;AACrB,SAASC,UAAA,QAAkB;AA+CjB,SACEC,GAAA,EADFC,IAAA;AA7CV,MAAMC,IAAA,GAAgC;EACpCC,KAAA,EAAO;EACPC,SAAA,EAAWL,UAAA;EACXM,UAAA,EAAY;IACVC,IAAA,EAAM;MACJC,WAAA,EAAa;QACXH,SAAA,EACE;MACJ;IACF;EACF;EACAI,QAAA,EAAU;IACRC,KAAA,EAAO;MAAEC,OAAA,EAAS;MAAQH,WAAA,EAAa;IAAc;IACrDI,UAAA,EAAY;MAAED,OAAA,EAAS;MAAQH,WAAA,EAAa;IAA8B;IAC1EK,KAAA,EAAO;MAAEF,OAAA,EAAS;MAAQH,WAAA,EAAa;IAAgB;IACvDM,QAAA,EAAU;MAAEH,OAAA,EAAS;MAAWH,WAAA,EAAa;IAAyB;IACtEO,QAAA,EAAU;MAAEJ,OAAA,EAAS;MAAWH,WAAA,EAAa;IAAuB;IACpEQ,QAAA,EAAU;MAAEL,OAAA,EAAS;MAAWH,WAAA,EAAa;IAAiB;IAC9DS,IAAA,EAAM;MAAEN,OAAA,EAAS;MAAUO,OAAA,EAAS,CAAC,MAAM,MAAM,IAAI;MAAGV,WAAA,EAAa;IAAa;IAClFW,UAAA,EAAY;MAAER,OAAA,EAAS;MAAUH,WAAA,EAAa;IAA0B;IACxEY,WAAA,EAAa;MAAET,OAAA,EAAS;MAAUH,WAAA,EAAa;IAA2B;IAC1Ea,UAAA,EAAY;MAAEV,OAAA,EAAS;MAAWH,WAAA,EAAa;IAA8B;IAC7Ec,WAAA,EAAa;MAAEX,OAAA,EAAS;MAAQH,WAAA,EAAa;IAAiC;EAChF;AACF;AAEA,IAAOe,0BAAA,GAAQpB,IAAA;AAGR,MAAMqB,IAAA,GAAc;EACzBC,IAAA,EAAM;EACNC,MAAA,EAAQA,CAAA,KAAM;IACZ,MAAMC,WAAA,GAAcA,CAAA,KAAM;MACxB,MAAMC,IAAA,GAAOlC,OAAA,CAAQ;QACnBmC,aAAA,EAAe;UACbC,MAAA,EAAQ;UACRC,IAAA,EAAM;QACR;QACAC,QAAA,EAAU,MAAAA,CAAO;UAAEC;QAAM,MAAM;UAC7BxC,MAAA,CAAO,UAAU,EAAEwC,KAAK;QAC1B;MACF,CAAC;MAED,OACE,eAAAhC,GAAA,CAACF,IAAA;QAAK6B,IAAA;QACJM,QAAA,iBAAAhC,IAAA,CAACN,MAAA;UAAOuC,GAAA,EAAI;UACVD,QAAA,kBAAAjC,GAAA,CAACD,UAAA;YACE,GAAI;cACHU,KAAA,EAAO;cACPe,IAAA,EAAM;cACNb,UAAA,EAAY;cACZO,UAAA,EAAY;cACZC,WAAA,EAAa;YACf;UAAA,CACF,GACA,eAAAnB,GAAA,CAACD,UAAA;YACE,GAAI;cACHU,KAAA,EAAO;cACPe,IAAA,EAAM;cACNb,UAAA,EAAY;cACZO,UAAA,EAAY;cACZC,WAAA,EAAa;YACf;UAAA,CACF,GACA,eAAAnB,GAAA,CAACH,MAAA;YAAOL,MAAA,EAAO;YAASyC,QAAA;UAAA,CAAM;QAAA,CAChC;MAAA,CACF;IAEJ;IACA,OAAO,eAAAjC,GAAA,CAAC0B,WAAA,IAAY;EACtB;AACF;AAEO,MAAMS,UAAA,GAAoB;EAC/BC,IAAA,EAAM;IACJ3B,KAAA,EAAO;IACPE,UAAA,EAAY;IACZO,UAAA,EAAY;IACZC,WAAA,EAAa;EACf;EACAM,MAAA,EAASW,IAAA,IAAS,eAAApC,GAAA,CAACD,UAAA;IAAY,GAAGqC;EAAA,CAAM;AAC1C;AAEO,MAAMC,eAAA,GAAyB;EACpCD,IAAA,EAAM;IACJ3B,KAAA,EAAO;IACPY,WAAA,EAAa;IACbH,UAAA,EAAY;IACZC,WAAA,EAAa;EACf;EACAM,MAAA,EAASW,IAAA,IAAS,eAAApC,GAAA,CAACD,UAAA;IAAY,GAAGqC;EAAA,CAAM;AAC1C;AAEO,MAAME,iBAAA,GAA2B;EACtCF,IAAA,EAAM;IACJ3B,KAAA,EAAO;IACPuB,KAAA,EAAO;IACPd,UAAA,EAAY;IACZC,WAAA,EAAa;IACbR,UAAA,EAAY;EACd;EACAc,MAAA,EAASW,IAAA,IAAS,eAAApC,GAAA,CAACD,UAAA;IAAY,GAAGqC;EAAA,CAAM;AAC1C;AAEO,MAAMG,QAAA,GAAkB;EAC7BH,IAAA,EAAM;IACJ3B,KAAA,EAAO;IACPK,QAAA,EAAU;IACVI,UAAA,EAAY;IACZC,WAAA,EAAa;EACf;EACAM,MAAA,EAASW,IAAA,IAAS,eAAApC,GAAA,CAACD,UAAA;IAAY,GAAGqC;EAAA,CAAM;AAC1C;AAEO,MAAMI,QAAA,GAAkB;EAC7BJ,IAAA,EAAM;IACJ3B,KAAA,EAAO;IACPM,QAAA,EAAU;IACViB,KAAA,EAAO;IACPd,UAAA,EAAY;IACZC,WAAA,EAAa;EACf;EACAM,MAAA,EAASW,IAAA,IAAS,eAAApC,GAAA,CAACD,UAAA;IAAY,GAAGqC;EAAA,CAAM;AAC1C;AAEO,MAAMK,SAAA,GAAmB;EAC9BL,IAAA,EAAM;IACJ3B,KAAA,EAAO;IACPG,KAAA,EAAO;IACPC,QAAA,EAAU;IACVK,UAAA,EAAY;IACZC,WAAA,EAAa;EACf;EACAM,MAAA,EAASW,IAAA,IAAS,eAAApC,GAAA,CAACD,UAAA;IAAY,GAAGqC;EAAA,CAAM;AAC1C;AAEO,MAAMM,KAAA,GAAe;EAC1BjB,MAAA,EAAQA,CAAA,KACN,eAAAzB,GAAA,CAACL,MAAA;IAAOuC,GAAA,EAAI;IACVD,QAAA,iBAAAhC,IAAA,CAACL,MAAA;MAAOsC,GAAA,EAAI;MAAKS,UAAA,EAAW;MAC1BV,QAAA,kBAAAjC,GAAA,CAACD,UAAA;QAAWU,KAAA,EAAM;QAAgBS,UAAA,EAAY;QAAIC,WAAA,EAAa;MAAA,CAAI,GACnE,eAAAnB,GAAA,CAACD,UAAA;QAAWU,KAAA,EAAM;QAAiBS,UAAA,EAAY;QAAIC,WAAA,EAAa;MAAA,CAAI,GACpE,eAAAnB,GAAA,CAACD,UAAA;QAAWU,KAAA,EAAM;QAAgBS,UAAA,EAAY;QAAIC,WAAA,EAAa;MAAA,CAAI,GACnE,eAAAnB,GAAA,CAACD,UAAA;QAAWU,KAAA,EAAM;QAAaS,UAAA,EAAY;QAAIC,WAAA,EAAa;MAAA,CAAI;IAAA,CAClE;EAAA,CACF;AAEJ;AAEO,MAAMyB,gBAAA,GAA0B;EACrCnB,MAAA,EAAQA,CAAA,KACN,eAAAxB,IAAA,CAACN,MAAA;IAAOuC,GAAA,EAAI;IACVD,QAAA,kBAAAjC,GAAA,CAACD,UAAA;MAAWU,KAAA,EAAM;MAAkBS,UAAA,EAAY;MAAKC,WAAA,EAAa;MAAIE,WAAA,EAAY;IAAA,CAAS,GAC3F,eAAArB,GAAA,CAACD,UAAA;MAAWU,KAAA,EAAM;MAAgBS,UAAA,EAAY;MAAKC,WAAA,EAAa;MAAIE,WAAA,EAAY;IAAA,CAAO,GACvF,eAAArB,GAAA,CAACD,UAAA;MACCU,KAAA,EAAM;MACNS,UAAA,EAAY;MACZC,WAAA,EAAa;MACbE,WAAA,EAAY;IAAA,CACd;EAAA,CACF;AAEJ;AAEO,MAAMwB,WAAA,GAAqB;EAChCpB,MAAA,EAAQA,CAAA,KAAM;IACZ,MAAMqB,kBAAA,GAAqBA,CAAA,KAAM;MAC/B,MAAM,CAACC,KAAA,EAAOC,QAAQ,IAAItD,QAAA,CAA+B,IAAI;MAC7D,OACE,eAAAM,GAAA,CAACL,MAAA;QAAOuC,GAAA,EAAI;QACVD,QAAA,iBAAAjC,GAAA,CAACD,UAAA;UACCU,KAAA,EAAM;UACNuB,KAAA,EAAOe,KAAA;UACPE,aAAA,EAAgBC,GAAA,IAAQ;YACtBF,QAAA,CAASE,GAAG;YACZ1D,MAAA,CAAO,eAAe,EAAE0D,GAAG;UAC7B;UACAhC,UAAA,EAAY;UACZC,WAAA,EAAa;UACbR,UAAA,EACEoC,KAAA,GACI,OAAOA,KAAA,KAAU,WACf,eACA,SAASA,KAAA,CAAMvB,IAAI,KACrB;QAAA,CAER;MAAA,CACF;IAEJ;IACA,OAAO,eAAAxB,GAAA,CAAC8C,kBAAA,IAAmB;EAC7B;AACF;AAEO,MAAMK,cAAA,GAAwB;EACnCf,IAAA,EAAM;IACJ3B,KAAA,EAAO;IACPuB,KAAA,EAAO;IACPZ,UAAA,EAAY;IACZF,UAAA,EAAY;IACZC,WAAA,EAAa;IACbR,UAAA,EAAY;EACd;EACAc,MAAA,EAASW,IAAA,IAAS,eAAApC,GAAA,CAACD,UAAA;IAAY,GAAGqC;EAAA,CAAM;AAC1C","ignoreList":[]}

package/dist/jsx/fields/ImageField/ImageField.stories.native.js

@@ -0,0 +1,323 @@
+"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 ImageField_stories_exports = {};
+__export(ImageField_stories_exports, {
+  Disabled: () => Disabled,
+  Interactive: () => Interactive,
+  Main: () => Main,
+  NoRemoveButton: () => NoRemoveButton,
+  ReadOnly: () => ReadOnly,
+  RectangularSizes: () => RectangularSizes,
+  Sizes: () => Sizes,
+  Standalone: () => Standalone,
+  WithError: () => WithError,
+  WithExistingImage: () => WithExistingImage,
+  WithPlaceholder: () => WithPlaceholder,
+  default: () => ImageField_stories_default
+});
+module.exports = __toCommonJS(ImageField_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_storybook = require("@multiplatform.one/storybook");
+var import_react_form = require("@tanstack/react-form");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.native.js");
+var import_Form = require("../../Form/index.native.js");
+var import_index = require("./index.native.js");
+var meta = {
+  title: "Forms/ImageField",
+  component: import_index.ImageField,
+  parameters: {
+    docs: {
+      description: {
+        component: "An image upload field that shows a preview when an image exists, or a dashed upload area when empty. Both states have the same dimensions for consistent layout."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Field label"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text below the field"
+    },
+    error: {
+      control: "text",
+      description: "Error message"
+    },
+    required: {
+      control: "boolean",
+      description: "Mark field as required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disable image upload"
+    },
+    readOnly: {
+      control: "boolean",
+      description: "Read-only mode"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Field size"
+    },
+    imageWidth: {
+      control: "number",
+      description: "Width of the image area"
+    },
+    imageHeight: {
+      control: "number",
+      description: "Height of the image area"
+    },
+    showRemove: {
+      control: "boolean",
+      description: "Show remove button on image"
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text when no image"
+    }
+  }
+};
+var ImageField_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = (0, import_react_form.useForm)({
+        defaultValues: {
+          avatar: null,
+          logo: null
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          (0, import_storybook.action)("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        form,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+            ...{
+              label: "Profile Avatar",
+              name: "avatar",
+              helperText: "Upload your profile picture",
+              imageWidth: 64,
+              imageHeight: 64
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+            ...{
+              label: "Company Logo",
+              name: "logo",
+              helperText: "Upload your company logo",
+              imageWidth: 120,
+              imageHeight: 60
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Upload Image",
+    helperText: "Click to upload an image",
+    imageWidth: 64,
+    imageHeight: 64
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+      ...args
+    });
+  }
+};
+var WithPlaceholder = {
+  args: {
+    label: "Profile Picture",
+    placeholder: "Upload",
+    imageWidth: 80,
+    imageHeight: 80
+  },
+  render: function render3(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+      ...args
+    });
+  }
+};
+var WithExistingImage = {
+  args: {
+    label: "Current Avatar",
+    value: "https://picsum.photos/200",
+    imageWidth: 80,
+    imageHeight: 80,
+    helperText: "Click to change image"
+  },
+  render: function render4(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+      ...args
+    });
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Image",
+    disabled: true,
+    imageWidth: 64,
+    imageHeight: 64
+  },
+  render: function render5(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+      ...args
+    });
+  }
+};
+var ReadOnly = {
+  args: {
+    label: "Read Only",
+    readOnly: true,
+    value: "https://picsum.photos/200",
+    imageWidth: 64,
+    imageHeight: 64
+  },
+  render: function render6(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+      ...args
+    });
+  }
+};
+var WithError = {
+  args: {
+    label: "Required Image",
+    error: "Please upload an image",
+    required: true,
+    imageWidth: 64,
+    imageHeight: 64
+  },
+  render: function render7(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+      ...args
+    });
+  }
+};
+var Sizes = {
+  render: function render8() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      gap: "$4",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$4",
+        alignItems: "flex-end",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+          label: "Small (32x32)",
+          imageWidth: 32,
+          imageHeight: 32
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+          label: "Medium (48x48)",
+          imageWidth: 48,
+          imageHeight: 48
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+          label: "Large (64x64)",
+          imageWidth: 64,
+          imageHeight: 64
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+          label: "XL (96x96)",
+          imageWidth: 96,
+          imageHeight: 96
+        })]
+      })
+    });
+  }
+};
+var RectangularSizes = {
+  render: function render9() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+        label: "Banner (200x80)",
+        imageWidth: 200,
+        imageHeight: 80,
+        placeholder: "Banner"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+        label: "Logo (160x40)",
+        imageWidth: 160,
+        imageHeight: 40,
+        placeholder: "Logo"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+        label: "Thumbnail (120x90)",
+        imageWidth: 120,
+        imageHeight: 90,
+        placeholder: "Thumb"
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render10() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [image, setImage] = (0, import_react.useState)(null);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$4",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+          label: "Upload Image",
+          value: image,
+          onValueChange: function onValueChange(val) {
+            setImage(val);
+            (0, import_storybook.action)("onValueChange")(val);
+          },
+          imageWidth: 80,
+          imageHeight: 80,
+          helperText: image ? typeof image === "string" ? "URL loaded" : `File: ${image.name}` : "No image selected"
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InteractiveExample, {});
+  }
+};
+var NoRemoveButton = {
+  args: {
+    label: "No Remove Button",
+    value: "https://picsum.photos/200",
+    showRemove: false,
+    imageWidth: 64,
+    imageHeight: 64,
+    helperText: "Click image to change"
+  },
+  render: function render11(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ImageField, {
+      ...args
+    });
+  }
+};
+//# sourceMappingURL=ImageField.stories.native.js.map

package/dist/jsx/fields/ImageField/ImageField.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","ImageField_stories_exports","Disabled","Interactive","Main","NoRemoveButton","ReadOnly","RectangularSizes","Sizes","Standalone","WithError","WithExistingImage","WithPlaceholder","default","ImageField_stories_default","module","exports","import_jsx_runtime","require","import_storybook","import_react_form","import_react","import_tamagui","import_Button","import_Form","import_index","meta","title","component","ImageField","parameters","docs","description","argTypes","label","control","helperText","error","required","disabled","readOnly","size","options","imageWidth","imageHeight","showRemove","placeholder","render","FormExample","FormExample2","form","useForm","defaultValues","avatar","logo","onSubmit","param","action","jsx","Form","children","jsxs","YStack","gap","Button","args","render2","render3","render4"],"sources":["../../../../src/fields/ImageField/ImageField.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}