@multiplatform.one/forms 6.0.0

package/dist/jsx/fieldLayout.mjs

@@ -0,0 +1,94 @@
+import { Field as TanstackField } from "@tanstack/react-form";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { createContext, useContext } from "react";
+import { Label, Paragraph, YStack } from "tamagui";
+import { formCommonColors } from "./shared/colorRamps.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const FieldDescribedByContext = createContext(void 0);
+function useFieldDescribedBy() {
+  return useContext(FieldDescribedByContext);
+}
+function getHelperTextSize(size) {
+  if (!size) return "$1";
+  const sizeMap = {
+    $1: "$1",
+    $2: "$1",
+    $3: "$2",
+    $4: "$3",
+    $5: "$4",
+    $6: "$5",
+    $7: "$6",
+    $8: "$7",
+    $9: "$8",
+    $10: "$9",
+    $11: "$10",
+    $12: "$11",
+    $13: "$12",
+    $14: "$13",
+    $15: "$14",
+    $16: "$15",
+    $17: "$16"
+  };
+  return sizeMap[size.toString()] || "$1";
+}
+function FieldLayout({
+  id,
+  label,
+  labelProps,
+  error: propError,
+  field,
+  helperText,
+  required,
+  size,
+  knobProps: knobPropsProp,
+  onBlur,
+  compactSpacing,
+  children
+}) {
+  const {
+    knobProps: resolvedKnobs
+  } = useResolvedKnobs();
+  const knobProps = knobPropsProp ?? resolvedKnobs;
+  const error = field?.state.meta.errors.length ? String(field.state.meta.errors[0]) : propError;
+  const errorMessage = typeof error === "string" && error.length > 0 ? error : void 0;
+  const hasErrorState = Boolean(error);
+  const helperSize = getHelperTextSize(size || knobProps.sizeToken);
+  const useCompact = compactSpacing || !label;
+  const gapProps = useCompact ? {
+    gap: "$1"
+  } : knobProps.gap;
+  const describedBy = [helperText && id ? `${id}-description` : void 0, errorMessage && id ? `${id}-error` : void 0].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */jsx(FieldDescribedByContext.Provider, {
+    value: describedBy,
+    children: /* @__PURE__ */jsxs(YStack, {
+      theme: hasErrorState ? "red" : void 0,
+      ...gapProps,
+      onBlur,
+      children: [label && /* @__PURE__ */jsxs(Label, {
+        htmlFor: id,
+        size: size || knobProps.sizeToken,
+        ...knobProps.heading,
+        color: hasErrorState ? formCommonColors.error : knobProps.textAccentColor,
+        ...labelProps,
+        children: [label, required && " *"]
+      }), children, helperText && !errorMessage ? /* @__PURE__ */jsx(Paragraph, {
+        id: id ? `${id}-description` : void 0,
+        size: helperSize,
+        ...knobProps.body,
+        color: formCommonColors.text,
+        children: helperText
+      }) : null, errorMessage ? /* @__PURE__ */jsx(Paragraph, {
+        id: id ? `${id}-error` : void 0,
+        size: helperSize,
+        ...knobProps.body,
+        color: formCommonColors.error,
+        role: "alert",
+        "aria-live": "polite",
+        children: errorMessage
+      }) : null]
+    })
+  });
+}
+const Field = TanstackField;
+export { Field, FieldLayout, useFieldDescribedBy };
+//# sourceMappingURL=fieldLayout.mjs.map

package/dist/jsx/fieldLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Field","TanstackField","useResolvedKnobs","createContext","useContext","Label","Paragraph","YStack","formCommonColors","jsx","jsxs","FieldDescribedByContext","useFieldDescribedBy","getHelperTextSize","size","sizeMap","$1","$2","$3","$4","$5","$6","$7","$8","$9","$10","$11","$12","$13","$14","$15","$16","$17","toString","FieldLayout","id","label","labelProps","error","propError","field","helperText","required","knobProps","knobPropsProp","onBlur","compactSpacing","children","resolvedKnobs","state","meta","errors","length","String","errorMessage","hasErrorState","Boolean","helperSize","sizeToken","useCompact","gapProps","gap","describedBy","filter","join","Provider","value","theme","htmlFor","heading","color","textAccentColor","body","text","role"],"sources":["../../src/fieldLayout.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fieldLayout.native.js

@@ -0,0 +1,125 @@
+"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 fieldLayout_exports = {};
+__export(fieldLayout_exports, {
+  Field: () => Field,
+  FieldLayout: () => FieldLayout,
+  useFieldDescribedBy: () => useFieldDescribedBy
+});
+module.exports = __toCommonJS(fieldLayout_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_form = require("@tanstack/react-form");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_colorRamps = require("./shared/colorRamps.native.js");
+var FieldDescribedByContext = /* @__PURE__ */(0, import_react.createContext)(void 0);
+function useFieldDescribedBy() {
+  return (0, import_react.useContext)(FieldDescribedByContext);
+}
+function getHelperTextSize(size) {
+  if (!size) return "$1";
+  var sizeMap = {
+    $1: "$1",
+    $2: "$1",
+    $3: "$2",
+    $4: "$3",
+    $5: "$4",
+    $6: "$5",
+    $7: "$6",
+    $8: "$7",
+    $9: "$8",
+    $10: "$9",
+    $11: "$10",
+    $12: "$11",
+    $13: "$12",
+    $14: "$13",
+    $15: "$14",
+    $16: "$15",
+    $17: "$16"
+  };
+  return sizeMap[size.toString()] || "$1";
+}
+function FieldLayout(param) {
+  var {
+    id,
+    label,
+    labelProps,
+    error: propError,
+    field,
+    helperText,
+    required,
+    size,
+    knobProps: knobPropsProp,
+    onBlur,
+    compactSpacing,
+    children
+  } = param;
+  var {
+    knobProps: resolvedKnobs
+  } = (0, import_theme.useResolvedKnobs)();
+  var knobProps = knobPropsProp !== null && knobPropsProp !== void 0 ? knobPropsProp : resolvedKnobs;
+  var error = (field === null || field === void 0 ? void 0 : field.state.meta.errors.length) ? String(field.state.meta.errors[0]) : propError;
+  var errorMessage = typeof error === "string" && error.length > 0 ? error : void 0;
+  var hasErrorState = Boolean(error);
+  var helperSize = getHelperTextSize(size || knobProps.sizeToken);
+  var useCompact = compactSpacing || !label;
+  var gapProps = useCompact ? {
+    gap: "$1"
+  } : knobProps.gap;
+  var describedBy = [helperText && id ? `${id}-description` : void 0, errorMessage && id ? `${id}-error` : void 0].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FieldDescribedByContext.Provider, {
+    value: describedBy,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      theme: hasErrorState ? "red" : void 0,
+      ...gapProps,
+      onBlur,
+      children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Label, {
+        htmlFor: id,
+        size: size || knobProps.sizeToken,
+        ...knobProps.heading,
+        color: hasErrorState ? import_colorRamps.formCommonColors.error : knobProps.textAccentColor,
+        ...labelProps,
+        children: [label, required && " *"]
+      }), children, helperText && !errorMessage ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+        id: id ? `${id}-description` : void 0,
+        size: helperSize,
+        ...knobProps.body,
+        color: import_colorRamps.formCommonColors.text,
+        children: helperText
+      }) : null, errorMessage ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+        id: id ? `${id}-error` : void 0,
+        size: helperSize,
+        ...knobProps.body,
+        color: import_colorRamps.formCommonColors.error,
+        role: "alert",
+        "aria-live": "polite",
+        children: errorMessage
+      }) : null]
+    })
+  });
+}
+var Field = import_react_form.Field;
+//# sourceMappingURL=fieldLayout.native.js.map

package/dist/jsx/fieldLayout.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","fieldLayout_exports","Field","FieldLayout","useFieldDescribedBy","module","exports","import_jsx_runtime","require","import_react_form","import_theme","import_react","import_tamagui","import_colorRamps","FieldDescribedByContext","createContext","useContext","getHelperTextSize","size","sizeMap","$1","$2","$3","$4","$5","$6","$7","$8","$9","$10","$11","$12","$13","$14","$15","$16","$17","toString","param","id","label","labelProps","error","propError","field","helperText","required","knobProps","knobPropsProp","onBlur","compactSpacing","children","resolvedKnobs","useResolvedKnobs","state","meta","errors","length","String","errorMessage","hasErrorState","Boolean","helperSize","sizeToken","useCompact","gapProps","gap","describedBy","filter","join","jsx","Provider","jsxs","YStack","theme","Label","htmlFor","heading","color","formCommonColors","textAccentColor","Paragraph","body","text"],"sources":["../../src/fieldLayout.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/Barcode/Barcode.spec.mjs

@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form/index.mjs";
+import { Barcode } from "./index.mjs";
+import { jsx } from "react/jsx-runtime";
+const barcodeIcon = /* @__PURE__ */jsx("span", {
+  "data-testid": "barcode-icon"
+});
+const scanIcon = /* @__PURE__ */jsx("span", {
+  "data-testid": "scan-icon"
+});
+const stopIcon = /* @__PURE__ */jsx("span", {
+  "data-testid": "stop-icon"
+});
+describe("Barcode", () => {
+  describe("without form context", () => {
+    it("renders with label", () => {
+      const result = renderWithProviders(/* @__PURE__ */jsx(Barcode, {
+        label: "Barcode",
+        name: "code",
+        barcodeIcon,
+        scanIcon,
+        stopIcon
+      }));
+      expect(result.findTextElement("Barcode")).toBeDefined();
+    });
+    it("renders required label with asterisk", () => {
+      const result = renderWithProviders(/* @__PURE__ */jsx(Barcode, {
+        label: "Required",
+        name: "req",
+        barcodeIcon,
+        scanIcon,
+        stopIcon,
+        required: true
+      }));
+      const label = result.container.querySelector("label");
+      expect(label?.textContent).toContain("*");
+    });
+    it("renders with helper text", () => {
+      const result = renderWithProviders(/* @__PURE__ */jsx(Barcode, {
+        label: "Code",
+        name: "c",
+        barcodeIcon,
+        scanIcon,
+        stopIcon,
+        helperText: "Scan or type a code"
+      }));
+      expect(result.findTextElement("Scan or type a code")).toBeDefined();
+    });
+    it("renders skeleton placeholder", () => {
+      const result = renderWithProviders(/* @__PURE__ */jsx(Barcode, {
+        label: "Loading",
+        name: "l",
+        barcodeIcon,
+        scanIcon,
+        stopIcon,
+        skeleton: true
+      }));
+      expect(result.container.querySelector("input")).toBeNull();
+    });
+    it("renders disabled state", () => {
+      const result = renderWithProviders(/* @__PURE__ */jsx(Barcode, {
+        label: "Disabled",
+        name: "d",
+        barcodeIcon,
+        scanIcon,
+        stopIcon,
+        disabled: true
+      }));
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("aria-disabled")).toBe("true");
+    });
+    it("renders readOnly \u2014 hides scan button", () => {
+      const result = renderWithProviders(/* @__PURE__ */jsx(Barcode, {
+        label: "ReadOnly",
+        name: "r",
+        barcodeIcon,
+        scanIcon,
+        stopIcon,
+        readOnly: true,
+        value: "12345"
+      }));
+      expect(result.container.querySelectorAll("[data-testid='scan-icon']").length).toBe(0);
+    });
+  });
+  describe("with form context", () => {
+    it("renders inside form", () => {
+      const result = renderWithProviders(/* @__PURE__ */jsx(Form, {
+        formOptions: {
+          defaultValues: {
+            code: ""
+          }
+        },
+        submitText: "Submit",
+        children: /* @__PURE__ */jsx(Barcode, {
+          name: "code",
+          label: "Barcode",
+          barcodeIcon,
+          scanIcon,
+          stopIcon
+        })
+      }));
+      expect(result.findTextElement("Barcode")).toBeDefined();
+    });
+  });
+});
+//# sourceMappingURL=Barcode.spec.mjs.map

package/dist/jsx/fields/Barcode/Barcode.spec.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","expect","it","renderWithProviders","Form","Barcode","jsx","barcodeIcon","scanIcon","stopIcon","result","label","name","findTextElement","toBeDefined","required","container","querySelector","textContent","toContain","helperText","skeleton","toBeNull","disabled","input","getAttribute","toBe","readOnly","value","querySelectorAll","length","formOptions","defaultValues","code","submitText","children"],"sources":["../../../../src/fields/Barcode/Barcode.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/Barcode/Barcode.spec.native.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_Form = require("../../Form/index.native.js");
+var import_index = require("./index.native.js");
+var barcodeIcon = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+  "data-testid": "barcode-icon"
+});
+var scanIcon = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+  "data-testid": "scan-icon"
+});
+var stopIcon = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+  "data-testid": "stop-icon"
+});
+(0, import_vitest.describe)("Barcode", function () {
+  (0, import_vitest.describe)("without form context", function () {
+    (0, import_vitest.it)("renders with label", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Barcode, {
+        label: "Barcode",
+        name: "code",
+        barcodeIcon,
+        scanIcon,
+        stopIcon
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Barcode")).toBeDefined();
+    });
+    (0, import_vitest.it)("renders required label with asterisk", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Barcode, {
+        label: "Required",
+        name: "req",
+        barcodeIcon,
+        scanIcon,
+        stopIcon,
+        required: true
+      }));
+      var label = result.container.querySelector("label");
+      (0, import_vitest.expect)(label === null || label === void 0 ? void 0 : label.textContent).toContain("*");
+    });
+    (0, import_vitest.it)("renders with helper text", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Barcode, {
+        label: "Code",
+        name: "c",
+        barcodeIcon,
+        scanIcon,
+        stopIcon,
+        helperText: "Scan or type a code"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Scan or type a code")).toBeDefined();
+    });
+    (0, import_vitest.it)("renders skeleton placeholder", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Barcode, {
+        label: "Loading",
+        name: "l",
+        barcodeIcon,
+        scanIcon,
+        stopIcon,
+        skeleton: true
+      }));
+      (0, import_vitest.expect)(result.container.querySelector("input")).toBeNull();
+    });
+    (0, import_vitest.it)("renders disabled state", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Barcode, {
+        label: "Disabled",
+        name: "d",
+        barcodeIcon,
+        scanIcon,
+        stopIcon,
+        disabled: true
+      }));
+      var input = result.container.querySelector("input");
+      (0, import_vitest.expect)(input === null || input === void 0 ? void 0 : input.getAttribute("aria-disabled")).toBe("true");
+    });
+    (0, import_vitest.it)("renders readOnly \u2014 hides scan button", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Barcode, {
+        label: "ReadOnly",
+        name: "r",
+        barcodeIcon,
+        scanIcon,
+        stopIcon,
+        readOnly: true,
+        value: "12345"
+      }));
+      (0, import_vitest.expect)(result.container.querySelectorAll("[data-testid='scan-icon']").length).toBe(0);
+    });
+  });
+  (0, import_vitest.describe)("with form context", function () {
+    (0, import_vitest.it)("renders inside form", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        formOptions: {
+          defaultValues: {
+            code: ""
+          }
+        },
+        submitText: "Submit",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Barcode, {
+          name: "code",
+          label: "Barcode",
+          barcodeIcon,
+          scanIcon,
+          stopIcon
+        })
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Barcode")).toBeDefined();
+    });
+  });
+});
+//# sourceMappingURL=Barcode.spec.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["import_jsx_runtime","require","import_vitest","import_test_utils","import_Form","import_index","barcodeIcon","jsx","scanIcon","stopIcon","describe","it","result","renderWithProviders","Barcode","label","name","expect","findTextElement","toBeDefined","required","container","querySelector","textContent","toContain","helperText","skeleton","toBeNull","disabled","input","getAttribute","toBe","readOnly","value","querySelectorAll","length","Form","formOptions","defaultValues","code","submitText","children"],"sources":["../../../../src/fields/Barcode/Barcode.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,206 @@
+import { action } from "@multiplatform.one/storybook";
+import { BarcodeIcon, CameraIcon, XIcon } from "@phosphor-icons/react";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Text, YStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Form } from "../../Form/index.mjs";
+import { Barcode } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const iconProps = {
+  barcodeIcon: /* @__PURE__ */jsx(BarcodeIcon, {
+    size: 18
+  }),
+  scanIcon: /* @__PURE__ */jsx(CameraIcon, {
+    size: 18
+  }),
+  stopIcon: /* @__PURE__ */jsx(XIcon, {
+    size: 18
+  })
+};
+const meta = {
+  title: "Forms/Barcode",
+  component: Barcode,
+  parameters: {
+    docs: {
+      description: {
+        component: "A barcode input field with optional camera-based scanning via html5-qrcode."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    helperText: {
+      control: "text"
+    },
+    error: {
+      control: "text"
+    },
+    required: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"]
+    },
+    value: {
+      control: "text"
+    },
+    enableScan: {
+      control: "boolean",
+      description: "Enable camera scanner"
+    }
+  }
+};
+var Barcode_stories_default = meta;
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          barcode: ""
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        maxWidth: 400,
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */jsx(Barcode, {
+            label: "Item Barcode",
+            name: "barcode",
+            helperText: "Scan or type the barcode",
+            enableScan: true,
+            ...iconProps
+          }), /* @__PURE__ */jsx(Button, {
+            action: "submit",
+            children: "Look Up"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Barcode",
+    helperText: "Scan or enter barcode",
+    enableScan: true
+  },
+  render: args => /* @__PURE__ */jsx(Barcode, {
+    ...args,
+    ...iconProps
+  })
+};
+const Basic = {
+  args: {
+    label: "Product Barcode",
+    helperText: "Enter or scan a barcode",
+    onChange: action("onChange")
+  },
+  render: args => /* @__PURE__ */jsx(Barcode, {
+    ...args,
+    ...iconProps
+  })
+};
+const Disabled = {
+  args: {
+    label: "Product Barcode",
+    helperText: "This field is disabled",
+    disabled: true,
+    onChange: action("onChange")
+  },
+  render: args => /* @__PURE__ */jsx(Barcode, {
+    ...args,
+    ...iconProps
+  })
+};
+const WithError = {
+  args: {
+    label: "Product Barcode",
+    helperText: "Enter or scan a barcode",
+    required: true,
+    error: "Barcode is required",
+    onChange: action("onChange")
+  },
+  render: args => /* @__PURE__ */jsx(Barcode, {
+    ...args,
+    ...iconProps
+  })
+};
+const Sizes = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(Text, {
+      fontWeight: "bold",
+      children: "Size $2"
+    }), /* @__PURE__ */jsx(Barcode, {
+      label: "Small",
+      size: "$2",
+      ...iconProps,
+      onChange: action("onChange")
+    }), /* @__PURE__ */jsx(Text, {
+      fontWeight: "bold",
+      children: "Size $3"
+    }), /* @__PURE__ */jsx(Barcode, {
+      label: "Medium",
+      size: "$3",
+      ...iconProps,
+      onChange: action("onChange")
+    }), /* @__PURE__ */jsx(Text, {
+      fontWeight: "bold",
+      children: "Size $4"
+    }), /* @__PURE__ */jsx(Barcode, {
+      label: "Large",
+      size: "$4",
+      ...iconProps,
+      onChange: action("onChange")
+    })]
+  })
+};
+const Interactive = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState("");
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */jsx(Barcode, {
+          label: "Scan Product",
+          helperText: value ? `Scanned: ${value}` : "Enter a barcode",
+          value,
+          onChange: v => {
+            setValue(v);
+            action("onChange")(v);
+          },
+          ...iconProps
+        }), /* @__PURE__ */jsx(Barcode, {
+          label: "Without Camera",
+          enableScan: false,
+          value,
+          onChange: v => {
+            setValue(v);
+            action("onChange")(v);
+          },
+          ...iconProps
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(InteractiveExample, {});
+  }
+};
+export { Basic, Disabled, Interactive, Main, Sizes, Standalone, WithError, Barcode_stories_default as default };
+//# sourceMappingURL=Barcode.stories.mjs.map