@multiplatform.one/components 5.0.27 → 6.0.0

package/dist/esm/layouts/Debug/index.mjs

@@ -1,103 +1,43 @@
-import i18n from "i18next";
-import { config } from "multiplatform.one";
-import { createWithLayout, useLanguage } from "multiplatform.one";
-import { useTheme } from "multiplatform.one/theme";
-import { Adapt, Circle, Popover, Select, XStack, YStack } from "tamagui";
-import { useTint } from "../../tints.mjs";
+import { componentColors } from "../../componentColors.mjs";
+import { createWithLayout } from "@multiplatform.one/platform";
+import { config } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Circle, Popover, XStack, YStack } from "tamagui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function DebugLayout({
   children,
   debugView,
   debugViewProps,
-  rootThemeNames = ["system", "light", "dark"],
-  size = 12,
-  subThemeNames = ["blue", "gray", "green", "orange", "pink", "purple", "red", "yellow"]
+  size = 12
 }) {
   const {
-      familiesNames,
-      setFamily,
-      name
-    } = useTint(),
-    DebugView = debugView,
-    [theme, setTheme] = useTheme(),
-    [language, setLanguage] = useLanguage();
-  function handleSubThemeChange(subTheme) {
-    setTheme({
-      sub: subTheme
-    });
-  }
-  function handleRootThemeChange(rootTheme) {
-    setTheme({
-      root: rootTheme
-    });
-  }
-  function renderSubThemeItems() {
-    return (subThemeNames || []).map((name2, i) => /* @__PURE__ */jsx(Select.Item, {
-      index: i,
-      value: name2,
-      children: /* @__PURE__ */jsx(Select.ItemText, {
-        children: name2
-      })
-    }, i + name2));
-  }
-  function renderRootThemeItems() {
-    return (rootThemeNames || []).map((name2, i) => /* @__PURE__ */jsx(Select.Item, {
-      index: i,
-      value: name2,
-      children: /* @__PURE__ */jsx(Select.ItemText, {
-        children: name2
-      })
-    }, i + name2));
-  }
-  function renderLocaleItems() {
-    return (i18n?.languages || []).map((name2, i) => /* @__PURE__ */jsx(Select.Item, {
-      index: i,
-      value: name2,
-      children: /* @__PURE__ */jsx(Select.ItemText, {
-        children: name2
-      })
-    }, i + name2));
-  }
-  function renderTintFamilyItems() {
-    return familiesNames.map((name2, i) => /* @__PURE__ */jsx(Select.Item, {
-      index: i,
-      value: name2,
-      children: /* @__PURE__ */jsx(Select.ItemText, {
-        children: name2
-      })
-    }, i + name2));
-  }
+    knobProps
+  } = useResolvedKnobs();
+  const DebugView = debugView;
   function renderDebug() {
     return /* @__PURE__ */jsx(XStack, {
-      gap: "$4",
-      margin: "$4",
+      ...knobProps.gap,
+      margin: knobProps.panelPadding.padding,
       width: size,
       height: size,
+      "data-testid": "debug-container",
       children: /* @__PURE__ */jsxs(Popover, {
         placement: "right",
         size: "$5",
         children: [/* @__PURE__ */jsx(Popover.Trigger, {
           children: /* @__PURE__ */jsx(Circle, {
             cursor: "pointer",
-            backgroundColor: "$color9",
+            backgroundColor: componentColors.debug,
             width: size,
-            height: size
-          })
-        }), /* @__PURE__ */jsx(Adapt, {
-          children: /* @__PURE__ */jsxs(Popover.Sheet, {
-            modal: !0,
-            dismissOnSnapToBottom: !0,
-            children: [/* @__PURE__ */jsx(Popover.Sheet.Frame, {
-              padding: "$4",
-              children: /* @__PURE__ */jsx(Adapt.Contents, {})
-            }), /* @__PURE__ */jsx(Popover.Sheet.Overlay, {})]
+            height: size,
+            "data-testid": "debug-circle"
           })
         }), /* @__PURE__ */jsxs(Popover.Content, {
           borderWidth: 1,
           borderColor: "$borderColor",
-          elevate: !0,
+          elevation: knobProps.elevation,
           children: [/* @__PURE__ */jsx(XStack, {
-            gap: "$4"
+            ...knobProps.gap
           }), DebugView && /* @__PURE__ */jsx(DebugView, {
             ...debugViewProps
           })]
@@ -105,10 +45,12 @@ function DebugLayout({
       })
     });
   }
-  return config.get("DEBUG") !== "1" ? /* @__PURE__ */jsx(Fragment, {
+  if (config.get("DEBUG") !== "1") return /* @__PURE__ */jsx(Fragment, {
     children
-  }) : /* @__PURE__ */jsxs(YStack, {
-    fullscreen: !0,
+  });
+  return /* @__PURE__ */jsxs(YStack, {
+    fullscreen: true,
+    "data-testid": "debug-layout-root",
     children: [children, /* @__PURE__ */jsx(YStack, {
       position: "absolute",
       children: renderDebug()

package/dist/esm/layouts/Debug/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["i18n","config","createWithLayout","useLanguage","useTheme","Adapt","Circle","Popover","Select","XStack","YStack","useTint","Fragment","jsx","jsxs","DebugLayout","children","debugView","debugViewProps","rootThemeNames","size","subThemeNames","familiesNames","setFamily","name","DebugView","theme","setTheme","language","setLanguage","handleSubThemeChange","subTheme","sub","handleRootThemeChange","rootTheme","root","renderSubThemeItems","map","name2","i","Item","index","value","ItemText","renderRootThemeItems","renderLocaleItems","languages","renderTintFamilyItems","renderDebug","gap","margin","width","height","placement","Trigger","cursor","backgroundColor","Sheet","modal","dismissOnSnapToBottom","Frame","padding","Contents","Overlay","Content","borderWidth","borderColor","elevate","get","fullscreen","position","createWithDebugLayout","extraLayouts","debugLayoutProps","withDebugLayout"],"sources":["../../../../src/layouts/Debug/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["componentColors","createWithLayout","config","useResolvedKnobs","Circle","Popover","XStack","YStack","Fragment","jsx","jsxs","DebugLayout","children","debugView","debugViewProps","size","knobProps","DebugView","renderDebug","gap","margin","panelPadding","padding","width","height","placement","Trigger","cursor","backgroundColor","debug","Content","borderWidth","borderColor","elevation","get","fullscreen","position","createWithDebugLayout","extraLayouts","debugLayoutProps","withDebugLayout"],"sources":["../../../../src/layouts/Debug/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,eAAA,QAAuB;AAEhC,SAASC,gBAAA,QAAwB;AACjC,SAASC,MAAA,QAAc;AACvB,SAASC,gBAAA,QAAwB;AAEjC,SAASC,MAAA,EAAQC,OAAA,EAASC,MAAA,EAAQC,MAAA,QAAc;AA6BpC,SAqB8BC,QAAA,EArB9BC,GAAA,EAQFC,IAAA,QARE;AApBL,SAASC,YAA4B;EAC1CC,QAAA;EACAC,SAAA;EACAC,cAAA;EACAC,IAAA,GAAO;AACT,GAAqC;EACnC,MAAM;IAAEC;EAAU,IAAIb,gBAAA,CAAiB;EACvC,MAAMc,SAAA,GAAYJ,SAAA;EAElB,SAASK,YAAA,EAAc;IACrB,OACE,eAAAT,GAAA,CAACH,MAAA;MACE,GAAGU,SAAA,CAAUG,GAAA;MACdC,MAAA,EAAQJ,SAAA,CAAUK,YAAA,CAAaC,OAAA;MAC/BC,KAAA,EAAOR,IAAA;MACPS,MAAA,EAAQT,IAAA;MACR,eAAY;MAEZH,QAAA,iBAAAF,IAAA,CAACL,OAAA;QAAQoB,SAAA,EAAU;QAAQV,IAAA,EAAK;QAC9BH,QAAA,kBAAAH,GAAA,CAACJ,OAAA,CAAQqB,OAAA,EAAR;UACCd,QAAA,iBAAAH,GAAA,CAACL,MAAA;YACCuB,MAAA,EAAO;YACPC,eAAA,EAAiB5B,eAAA,CAAgB6B,KAAA;YACjCN,KAAA,EAAOR,IAAA;YACPS,MAAA,EAAQT,IAAA;YACR,eAAY;UAAA,CACd;QAAA,CACF,GACA,eAAAL,IAAA,CAACL,OAAA,CAAQyB,OAAA,EAAR;UACCC,WAAA,EAAa;UACbC,WAAA,EAAY;UACZC,SAAA,EAAWjB,SAAA,CAAUiB,SAAA;UAErBrB,QAAA,kBAAAH,GAAA,CAACH,MAAA;YAAQ,GAAGU,SAAA,CAAUG;UAAA,CAAK,GAC1BF,SAAA,IAAa,eAAAR,GAAA,CAACQ,SAAA;YAAW,GAAIH;UAAA,CAAwB;QAAA,CACxD;MAAA,CACF;IAAA,CACF;EAEJ;EAEA,IAAIZ,MAAA,CAAOgC,GAAA,CAAI,OAAO,MAAM,KAAK,OAAO,eAAAzB,GAAA,CAAAD,QAAA;IAAGI;EAAA,CAAS;EACpD,OACE,eAAAF,IAAA,CAACH,MAAA;IAAO4B,UAAA,EAAU;IAAC,eAAY;IAC5BvB,QAAA,GAAAA,QAAA,EACD,eAAAH,GAAA,CAACF,MAAA;MAAO6B,QAAA,EAAS;MAAYxB,QAAA,EAAAM,WAAA,CAAY;IAAA,CAAE;EAAA,CAC7C;AAEJ;AAEO,SAASmB,sBACdC,YAAA,EACAC,gBAAA,GAA0D,CAAC,GAC3D;EACA,OAAOtC,gBAAA,CACLU,WAAA,EACA2B,YAAA,EACAC,gBACF;AACF;AAEO,MAAMC,eAAA,GAAkBH,qBAAA,CAAsB","ignoreList":[]}

package/dist/esm/layouts/Debug/index.native.js

@@ -1,177 +1,61 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import i18n from "i18next";
-import { config } from "multiplatform.one";
-import { createWithLayout, useLanguage } from "multiplatform.one";
-import { useTheme } from "multiplatform.one/theme";
-import { Adapt, Circle, Popover, Select, XStack, YStack } from "tamagui";
-import { useTint } from "../../tints";
+import { componentColors } from "../../componentColors.native.js";
+import { createWithLayout } from "@multiplatform.one/platform";
+import { config } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Circle, Popover, XStack, YStack } from "tamagui";
 function DebugLayout(param) {
-  var { children, debugView, debugViewProps, rootThemeNames = [
-    "system",
-    "light",
-    "dark"
-  ], size = 12, subThemeNames = [
-    "blue",
-    "gray",
-    "green",
-    "orange",
-    "pink",
-    "purple",
-    "red",
-    "yellow"
-  ] } = param, { familiesNames, setFamily, name } = useTint(), DebugView = debugView, [theme, setTheme] = useTheme(), [language, setLanguage] = useLanguage();
-  function handleSubThemeChange(subTheme) {
-    setTheme({
-      sub: subTheme
-    });
-  }
-  function handleRootThemeChange(rootTheme) {
-    setTheme({
-      root: rootTheme
-    });
-  }
-  function renderSubThemeItems() {
-    return (subThemeNames || []).map(function(name2, i) {
-      return /* @__PURE__ */ _jsx(Select.Item, {
-        index: i,
-        value: name2,
-        children: /* @__PURE__ */ _jsx(Select.ItemText, {
-          children: name2
-        })
-      }, i + name2);
-    });
-  }
-  function renderRootThemeItems() {
-    return (rootThemeNames || []).map(function(name2, i) {
-      return /* @__PURE__ */ _jsx(Select.Item, {
-        index: i,
-        value: name2,
-        children: /* @__PURE__ */ _jsx(Select.ItemText, {
-          children: name2
-        })
-      }, i + name2);
-    });
-  }
-  function renderLocaleItems() {
-    return ((i18n === null || i18n === void 0 ? void 0 : i18n.languages) || []).map(function(name2, i) {
-      return /* @__PURE__ */ _jsx(Select.Item, {
-        index: i,
-        value: name2,
-        children: /* @__PURE__ */ _jsx(Select.ItemText, {
-          children: name2
-        })
-      }, i + name2);
-    });
-  }
-  function renderTintFamilyItems() {
-    return familiesNames.map(function(name2, i) {
-      return /* @__PURE__ */ _jsx(Select.Item, {
-        index: i,
-        value: name2,
-        children: /* @__PURE__ */ _jsx(Select.ItemText, {
-          children: name2
-        })
-      }, i + name2);
-    });
-  }
+  var {
+    children,
+    debugView,
+    debugViewProps,
+    size = 12
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var DebugView = debugView;
   function renderDebug() {
-    return /* @__PURE__ */ _jsx(XStack, {
-      gap: "$4",
-      margin: "$4",
+    return /* @__PURE__ */_jsx(XStack, {
+      ...knobProps.gap,
+      margin: knobProps.panelPadding.padding,
       width: size,
       height: size,
-      children: /* @__PURE__ */ _jsxs(Popover, {
+      "data-testid": "debug-container",
+      children: /* @__PURE__ */_jsxs(Popover, {
         placement: "right",
         size: "$5",
-        children: [
-          /* @__PURE__ */ _jsx(Popover.Trigger, {
-            children: /* @__PURE__ */ _jsx(Circle, {
-              cursor: "pointer",
-              backgroundColor: "$color9",
-              width: size,
-              height: size
-            })
-          }),
-          /* @__PURE__ */ _jsx(Adapt, {
-            children: /* @__PURE__ */ _jsxs(Popover.Sheet, {
-              modal: !0,
-              dismissOnSnapToBottom: !0,
-              children: [
-                /* @__PURE__ */ _jsx(Popover.Sheet.Frame, {
-                  padding: "$4",
-                  children: /* @__PURE__ */ _jsx(Adapt.Contents, {})
-                }),
-                /* @__PURE__ */ _jsx(Popover.Sheet.Overlay, {})
-              ]
-            })
-          }),
-          /* @__PURE__ */ _jsxs(Popover.Content, {
-            borderWidth: 1,
-            borderColor: "$borderColor",
-            elevate: !0,
-            children: [
-              /* @__PURE__ */ _jsx(XStack, {
-                gap: "$4"
-              }),
-              /* <SelectSimple
-                id="root-theme"
-                placeholder={theme.root}
-                width={96}
-                value={theme.root || 'system'}
-                onValueChange={handleRootThemeChange}
-              >
-                {renderRootThemeItems()}
-              </SelectSimple>
-              <SelectSimple
-                id="sub-theme"
-                placeholder={theme.sub}
-                width={96}
-                backgroundColor="$color5"
-                value={theme.sub?.toString()}
-                onValueChange={handleSubThemeChange}
-              >
-                {renderSubThemeItems()}
-              </SelectSimple>
-              <SelectSimple
-                id="locales"
-                width={96}
-                placeholder={locale}
-                backgroundColor="$color10"
-                value={language}
-                onValueChange={setLanguage}
-              >
-                {renderLocaleItems()}
-              </SelectSimple>
-              <SelectSimple
-                id="tint-families"
-                width={96}
-                placeholder={name.toString()}
-                backgroundColor="$color10"
-                value={name.toString()}
-                onValueChange={setFamily}
-              >
-                {renderTintFamilyItems()}
-              </SelectSimple> */
-              DebugView && /* @__PURE__ */ _jsx(DebugView, {
-                ...debugViewProps
-              })
-            ]
+        children: [/* @__PURE__ */_jsx(Popover.Trigger, {
+          children: /* @__PURE__ */_jsx(Circle, {
+            cursor: "pointer",
+            backgroundColor: componentColors.debug,
+            width: size,
+            height: size,
+            "data-testid": "debug-circle"
           })
-        ]
+        }), /* @__PURE__ */_jsxs(Popover.Content, {
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          elevation: knobProps.elevation,
+          children: [/* @__PURE__ */_jsx(XStack, {
+            ...knobProps.gap
+          }), DebugView && /* @__PURE__ */_jsx(DebugView, {
+            ...debugViewProps
+          })]
+        })]
       })
     });
   }
-  return config.get("DEBUG") !== "1" ? /* @__PURE__ */ _jsx(_Fragment, {
+  if (config.get("DEBUG") !== "1") return /* @__PURE__ */_jsx(_Fragment, {
     children
-  }) : /* @__PURE__ */ _jsxs(YStack, {
-    fullscreen: !0,
-    children: [
-      children,
-      /* @__PURE__ */ _jsx(YStack, {
-        position: "absolute",
-        children: renderDebug()
-      })
-    ]
+  });
+  return /* @__PURE__ */_jsxs(YStack, {
+    fullscreen: true,
+    "data-testid": "debug-layout-root",
+    children: [children, /* @__PURE__ */_jsx(YStack, {
+      position: "absolute",
+      children: renderDebug()
+    })]
   });
 }
 function createWithDebugLayout(extraLayouts) {
@@ -179,9 +63,5 @@ function createWithDebugLayout(extraLayouts) {
   return createWithLayout(DebugLayout, extraLayouts, debugLayoutProps);
 }
 var withDebugLayout = createWithDebugLayout();
-export {
-  DebugLayout,
-  createWithDebugLayout,
-  withDebugLayout
-};
-//# sourceMappingURL=index.js.map
+export { DebugLayout, createWithDebugLayout, withDebugLayout };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/layouts/Debug/index.native.js.map

@@ -1,6 +1 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/layouts/Debug/home/clayrisser/Projects/bitspur/multiplatform.one/multiplatform.one/packages/components/src/layouts/Debug/index.tsx"],
-  "mappings": "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",
-  "names": ["i18n", "config", "createWithLayout", "useLanguage", "useTheme", "Adapt", "Circle", "Popover", "Select", "XStack", "YStack", "useTint", "DebugLayout", "children", "debugView", "debugViewProps", "rootThemeNames", "size", "subThemeNames", "familiesNames", "setFamily", "name", "DebugView", "theme", "setTheme", "language", "setLanguage", "handleSubThemeChange", "subTheme", "sub", "handleRootThemeChange", "rootTheme", "root", "renderSubThemeItems", "map", "i", "Item", "index", "value", "ItemText", "renderRootThemeItems", "renderLocaleItems", "languages", "renderTintFamilyItems", "renderDebug", "gap", "margin", "width", "height", "placement", "Trigger", "cursor", "backgroundColor", "Sheet", "modal", "dismissOnSnapToBottom", "Frame", "padding", "Contents", "Overlay", "Content", "borderWidth", "borderColor", "elevate", "get", "fullscreen", "position", "createWithDebugLayout", "extraLayouts", "debugLayoutProps", "withDebugLayout"]
-}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","componentColors","createWithLayout","config","useResolvedKnobs","Circle","Popover","XStack","YStack","DebugLayout","param","children","debugView","debugViewProps","size","knobProps","DebugView","renderDebug","gap","margin","panelPadding","padding","width","height","placement","Trigger","cursor","backgroundColor","debug","Content","borderWidth","borderColor","elevation","get","fullscreen","position","createWithDebugLayout","extraLayouts","debugLayoutProps","arguments","length"],"sources":["../../../../src/layouts/Debug/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAuB,EAAAC,QAAA,IAAAC,SAAA;AAEhC,SAASC,eAAA,yCAAwB;AACjC,SAASC,gBAAc;AACvB,SAASC,MAAA,qCAAwB;AAEjC,SAASC,gBAAQ,QAAS,0BAAsB;AA6BpC,SAqB8BC,MAAA,EAAAC,OAbhC,EAAAC,MAAA,EAAAC,MARE;AApBL,SAASC,YAA4BC,KAAA;EAC1C;IAAAC,QAAA;IAAAC,SAAA;IAAAC,cAAA;IAAAC,IAAA;EAAA,IAAAJ,KAAA;EACA;IAAAK;EAAA,IAAAX,gBAAA;EACA,IAAAY,SAAA,GAAAJ,SAAA;EACA,SAAOK,YAAA;IAC4B,sBAAArB,IAAA,CAAAW,MAAA;MACnC,GAAMQ,SAAE,CAAAG,GAAU;MAClBC,MAAM,EAAAJ,SAAY,CAAAK,YAAA,CAAAC,OAAA;MAElBC,KAAS,EAAAR,IAAA;MACPS,MACE,EAAAT,IAAA;MAAC;MAAAH,QAAA,iBAAAb,KAAA,CAAAQ,OAAA;QACEkB,SAAG,SAAU;QACdV,IAAA,MAAQ;QACRH,QAAO,GACP,eAAQf,IAAA,CAAAU,OAAA,CAAAmB,OAAA;UACRd,QAAA,iBAAYf,IAAA,CAAAS,MAAA;YAEZqB,MAAA;YACEC,eAAA,EAAC1B,eAAQ,CAAR2B,KACC;YAACN,KAAA,EAAAR,IAAA;YAAAS,MAAA,EAAAT,IAAA;YACC,aAAO;UAAA;QAC0B,IAC1B,eACChB,KAAA,CAAAQ,OAAA,CAAAuB,OAAA;UAAAC,WACR;UAAYC,WAAA;UACdC,SACF,EAAAjB,SAAA,CAAAiB,SAAA;UACArB,QAAA,GAAC,eAAQf,IAAA,CAAAW,MAAA;YAAR,GAAAQ,SAAA,CAAAG;UACC,IACAF,SAAA,IAAY,eAAApB,IAAA,CAAAoB,SAAA;YACZ,GAAAH;UAEA;QAA2B;MAC2B;IAAA;EACxD;EACF,IAAAV,MAAA,CAAA8B,GAAA,yCAAArC,IAAA,CAAAI,SAAA;IACFW;EAEJ;EAEA,OAAI,eAAkBb,KAAM,CAAAU,MAAK;IACjC0B,UACE;IACG;IACDvB,QAAA,GACFA,QAAA,EAEJ,eAAAf,IAAA,CAAAY,MAAA;MAEO2B,QAAS;MAIdxB,QAAO,EAAAM,WAAA;IACL;EACA,EACA;AAAA;AAEJ,SAAAmB,sBAAAC,YAAA;EAEO,IAAMC,gBAAA,GAAkBC,SAAA,CAAAC,MAAA,QAAsBD,SAAA,iBAAAA,SAAA","ignoreList":[]}

package/dist/esm/layouts/KeyboardAvoidingWrapper/KeyboardAvoidingWrapper.stories.mjs

@@ -0,0 +1,36 @@
+import { Input } from "@multiplatform.one/forms";
+import { Text, YStack } from "tamagui";
+import { KeyboardAvoidingWrapper } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Components/KeyboardAvoidingWrapper",
+  component: KeyboardAvoidingWrapper,
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var KeyboardAvoidingWrapper_stories_default = meta;
+const Default = {
+  name: "Main",
+  render: () => /* @__PURE__ */jsx(KeyboardAvoidingWrapper, {
+    behavior: "padding",
+    padding: "$4",
+    children: /* @__PURE__ */jsxs(YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */jsx(Text, {
+        children: "Content inside KeyboardAvoidingWrapper"
+      }), /* @__PURE__ */jsx(Text, {
+        fontSize: "$2",
+        color: "$color10",
+        children: "On native, this shifts content when the keyboard appears. On web, it is a simple passthrough wrapper."
+      }), /* @__PURE__ */jsx(Input, {
+        label: "Test input",
+        placeholder: "Focus to test keyboard avoidance"
+      })]
+    })
+  })
+};
+export { Default, KeyboardAvoidingWrapper_stories_default as default };
+//# sourceMappingURL=KeyboardAvoidingWrapper.stories.mjs.map

package/dist/esm/layouts/KeyboardAvoidingWrapper/KeyboardAvoidingWrapper.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Input","Text","YStack","KeyboardAvoidingWrapper","jsx","jsxs","meta","title","component","parameters","status","type","KeyboardAvoidingWrapper_stories_default","Default","name","render","behavior","padding","children","gap","fontSize","color","label","placeholder"],"sources":["../../../../src/layouts/KeyboardAvoidingWrapper/KeyboardAvoidingWrapper.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,KAAA,QAAa;AACtB,SAASC,IAAA,EAAMC,MAAA,QAAc;AAC7B,SAASC,uBAAA,QAA+B;AAiBlC,SACEC,GAAA,EADFC,IAAA;AAfN,MAAMC,IAAA,GAA6C;EACjDC,KAAA,EAAO;EACPC,SAAA,EAAWL,uBAAA;EACXM,UAAA,EAAY;IACVC,MAAA,EAAQ;MAAEC,IAAA,EAAM;IAAS;EAC3B;AACF;AAEA,IAAOC,uCAAA,GAAQN,IAAA;AAGR,MAAMO,OAAA,GAAiB;EAC5BC,IAAA,EAAM;EACNC,MAAA,EAAQA,CAAA,KACN,eAAAX,GAAA,CAACD,uBAAA;IAAwBa,QAAA,EAAS;IAAUC,OAAA,EAAQ;IAClDC,QAAA,iBAAAb,IAAA,CAACH,MAAA;MAAOiB,GAAA,EAAI;MACVD,QAAA,kBAAAd,GAAA,CAACH,IAAA;QAAKiB,QAAA;MAAA,CAAsC,GAC5C,eAAAd,GAAA,CAACH,IAAA;QAAKmB,QAAA,EAAS;QAAKC,KAAA,EAAM;QAAWH,QAAA;MAAA,CAGrC,GACA,eAAAd,GAAA,CAACJ,KAAA;QAAMsB,KAAA,EAAM;QAAaC,WAAA,EAAY;MAAA,CAAmC;IAAA,CAC3E;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/layouts/KeyboardAvoidingWrapper/KeyboardAvoidingWrapper.stories.native.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "@multiplatform.one/forms";
+import { Text, YStack } from "tamagui";
+import { KeyboardAvoidingWrapper } from "./index.native.js";
+var meta = {
+  title: "Components/KeyboardAvoidingWrapper",
+  component: KeyboardAvoidingWrapper,
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var KeyboardAvoidingWrapper_stories_default = meta;
+var Default = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */_jsx(KeyboardAvoidingWrapper, {
+      behavior: "padding",
+      padding: "$4",
+      children: /* @__PURE__ */_jsxs(YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */_jsx(Text, {
+          children: "Content inside KeyboardAvoidingWrapper"
+        }), /* @__PURE__ */_jsx(Text, {
+          fontSize: "$2",
+          color: "$color10",
+          children: "On native, this shifts content when the keyboard appears. On web, it is a simple passthrough wrapper."
+        }), /* @__PURE__ */_jsx(Input, {
+          label: "Test input",
+          placeholder: "Focus to test keyboard avoidance"
+        })]
+      })
+    });
+  }
+};
+export { Default, KeyboardAvoidingWrapper_stories_default as default };
+//# sourceMappingURL=KeyboardAvoidingWrapper.stories.native.js.map

package/dist/esm/layouts/KeyboardAvoidingWrapper/KeyboardAvoidingWrapper.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Input","Text","YStack","KeyboardAvoidingWrapper","meta","title","component","parameters","status","type","KeyboardAvoidingWrapper_stories_default","Default","name","render","behavior","padding"],"sources":["../../../../src/layouts/KeyboardAvoidingWrapper/KeyboardAvoidingWrapper.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAA,EAAaC,IAAA,IAAAC,KAAA;AACtB,SAASC,KAAA,QAAM,0BAAc;AAC7B,SAASC,IAAA,EAAAC,MAAA;AAiBH,SACEC,uBADF;AAfN,IAAAC,IAAM;EACJC,KAAA,EAAO;EACPC,SAAA,EAAWH,uBAAA;EACXI,UAAA,EAAY;IACVC,MAAA,EAAQ;MACVC,IAAA;IACF;EAEA;AAGO;AAAuB,IAC5BC,uCAAM,GAAAN,IAAA;AAAA,IACNO,OAAQ;EAGFC,IAAA;EAA4CC,MAC5C,WAAAA,MAACA,CAAA;IAID,sBAAChB,IAAA,CAAAM,uBAAyB;MAC5BW,QACF;MAEJC,OAAA","ignoreList":[]}

package/dist/esm/layouts/KeyboardAvoidingWrapper/index.mjs

@@ -0,0 +1,17 @@
+import { YStack } from "tamagui";
+import { jsx } from "react/jsx-runtime";
+function KeyboardAvoidingWrapper({
+  children,
+  behavior: _behavior,
+  keyboardVerticalOffset: _offset,
+  enabled: _enabled,
+  ...stackProps
+}) {
+  return /* @__PURE__ */jsx(YStack, {
+    flex: 1,
+    ...stackProps,
+    children
+  });
+}
+export { KeyboardAvoidingWrapper };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/layouts/KeyboardAvoidingWrapper/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["YStack","jsx","KeyboardAvoidingWrapper","children","behavior","_behavior","keyboardVerticalOffset","_offset","enabled","_enabled","stackProps","flex"],"sources":["../../../../src/layouts/KeyboardAvoidingWrapper/index.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,MAAA,QAAgC;AAoCrC,SAAAC,GAAA;AARG,SAASC,wBAAwB;EACtCC,QAAA;EACAC,QAAA,EAAUC,SAAA;EACVC,sBAAA,EAAwBC,OAAA;EACxBC,OAAA,EAASC,QAAA;EACT,GAAGC;AACL,GAAoD;EAClD,OACE,eAAAT,GAAA,CAACD,MAAA;IAAOW,IAAA,EAAM;IAAI,GAAGD,UAAA;IAClBP;EAAA,CACH;AAEJ","ignoreList":[]}

package/dist/esm/layouts/KeyboardAvoidingWrapper/index.native.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
+import { YStack } from "tamagui";
+function KeyboardAvoidingWrapper(param) {
+  var {
+    children,
+    behavior,
+    keyboardVerticalOffset = 0,
+    enabled = true,
+    ...stackProps
+  } = param;
+  var defaultBehavior = Platform.OS === "ios" ? "padding" : "height";
+  var effectiveBehavior = behavior || defaultBehavior;
+  return /* @__PURE__ */_jsx(KeyboardAvoidingView, {
+    style: styles.container,
+    behavior: effectiveBehavior,
+    keyboardVerticalOffset,
+    enabled,
+    children: /* @__PURE__ */_jsx(YStack, {
+      flex: 1,
+      ...stackProps,
+      children
+    })
+  });
+}
+var styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+export { KeyboardAvoidingWrapper };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/layouts/KeyboardAvoidingWrapper/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","KeyboardAvoidingView","Platform","StyleSheet","YStack","KeyboardAvoidingWrapper","param","children","behavior","keyboardVerticalOffset","enabled","stackProps","defaultBehavior","OS","effectiveBehavior","style","styles","container","flex","create"],"sources":["../../../../src/layouts/KeyboardAvoidingWrapper/index.native.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAOC,IAAA,QAAY;AAC5B,SAASC,oBAAA,EAAsBC,QAAA,EAAUC,UAAA,QAAkB;AAC3D,SAASC,MAAA,QAAc;AAiBZ,SAASC,wBAAwBC,KAAA,EAAO;EAC/C,IAAI;IAAEC,QAAA;IAAUC,QAAA;IAAUC,sBAAA,GAAyB;IAAGC,OAAA,GAAU;IAAM,GAAGC;EAAW,IAAIL,KAAA;EAExF,IAAIM,eAAA,GAAkBV,QAAA,CAASW,EAAA,KAAO,QAAQ,YAAY;EAC1D,IAAIC,iBAAA,GAAoBN,QAAA,IAAYI,eAAA;EACpC,OAAqB,eAAAZ,IAAA,CAAKC,oBAAA,EAAsB;IAC5Cc,KAAA,EAAOC,MAAA,CAAOC,SAAA;IACdT,QAAA,EAAUM,iBAAA;IACVL,sBAAA;IACAC,OAAA;IACAH,QAAA,EAAwB,eAAAP,IAAA,CAAKI,MAAA,EAAQ;MACjCc,IAAA,EAAM;MACN,GAAGP,UAAA;MACHJ;IACJ,CAAC;EACL,CAAC;AACL;AACA,IAAIS,MAAA,GAASb,UAAA,CAAWgB,MAAA,CAAO;EAC3BF,SAAA,EAAW;IACPC,IAAA,EAAM;EACV;AACJ,CAAC","ignoreList":[]}

package/dist/esm/layouts/SafeAreaWrapper/SafeAreaWrapper.stories.mjs

@@ -0,0 +1,32 @@
+import { Text, YStack } from "tamagui";
+import { SafeAreaWrapper } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Components/SafeAreaWrapper",
+  component: SafeAreaWrapper,
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var SafeAreaWrapper_stories_default = meta;
+const Default = {
+  name: "Main",
+  render: () => /* @__PURE__ */jsx(SafeAreaWrapper, {
+    backgroundColor: "$background",
+    padding: "$4",
+    children: /* @__PURE__ */jsxs(YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */jsx(Text, {
+        children: "Content inside SafeAreaWrapper"
+      }), /* @__PURE__ */jsx(Text, {
+        fontSize: "$2",
+        color: "$color10",
+        children: "On native, this respects device safe area insets. On web, it is a simple passthrough wrapper."
+      })]
+    })
+  })
+};
+export { Default, SafeAreaWrapper_stories_default as default };
+//# sourceMappingURL=SafeAreaWrapper.stories.mjs.map

package/dist/esm/layouts/SafeAreaWrapper/SafeAreaWrapper.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","YStack","SafeAreaWrapper","jsx","jsxs","meta","title","component","parameters","status","type","SafeAreaWrapper_stories_default","Default","name","render","backgroundColor","padding","children","gap","fontSize","color"],"sources":["../../../../src/layouts/SafeAreaWrapper/SafeAreaWrapper.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,IAAA,EAAMC,MAAA,QAAc;AAC7B,SAASC,eAAA,QAAuB;AAiB1B,SACEC,GAAA,EADFC,IAAA;AAfN,MAAMC,IAAA,GAAqC;EACzCC,KAAA,EAAO;EACPC,SAAA,EAAWL,eAAA;EACXM,UAAA,EAAY;IACVC,MAAA,EAAQ;MAAEC,IAAA,EAAM;IAAS;EAC3B;AACF;AAEA,IAAOC,+BAAA,GAAQN,IAAA;AAGR,MAAMO,OAAA,GAAiB;EAC5BC,IAAA,EAAM;EACNC,MAAA,EAAQA,CAAA,KACN,eAAAX,GAAA,CAACD,eAAA;IAAgBa,eAAA,EAAgB;IAAcC,OAAA,EAAQ;IACrDC,QAAA,iBAAAb,IAAA,CAACH,MAAA;MAAOiB,GAAA,EAAI;MACVD,QAAA,kBAAAd,GAAA,CAACH,IAAA;QAAKiB,QAAA;MAAA,CAA8B,GACpC,eAAAd,GAAA,CAACH,IAAA;QAAKmB,QAAA,EAAS;QAAKC,KAAA,EAAM;QAAWH,QAAA;MAAA,CAGrC;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/layouts/SafeAreaWrapper/SafeAreaWrapper.stories.native.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, YStack } from "tamagui";
+import { SafeAreaWrapper } from "./index.native.js";
+var meta = {
+  title: "Components/SafeAreaWrapper",
+  component: SafeAreaWrapper,
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var SafeAreaWrapper_stories_default = meta;
+var Default = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */_jsx(SafeAreaWrapper, {
+      backgroundColor: "$background",
+      padding: "$4",
+      children: /* @__PURE__ */_jsxs(YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Text, {
+          children: "Content inside SafeAreaWrapper"
+        }), /* @__PURE__ */_jsx(Text, {
+          fontSize: "$2",
+          color: "$color10",
+          children: "On native, this respects device safe area insets. On web, it is a simple passthrough wrapper."
+        })]
+      })
+    });
+  }
+};
+export { Default, SafeAreaWrapper_stories_default as default };
+//# sourceMappingURL=SafeAreaWrapper.stories.native.js.map

package/dist/esm/layouts/SafeAreaWrapper/SafeAreaWrapper.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Text","YStack","SafeAreaWrapper","meta","title","component","parameters","status","type","SafeAreaWrapper_stories_default","Default","name","render","backgroundColor"],"sources":["../../../../src/layouts/SafeAreaWrapper/SafeAreaWrapper.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAMC,IAAA,EAAAC,IAAA,IAAcC,KAAA;AAC7B,SAASC,IAAA,EAAAC,MAAA,iBAAuB;AAiB1B,SACEC,eADF;AAfN,IAAAC,IAAM;EACJC,KAAA,EAAO;EACPC,SAAA,EAAWH,eAAA;EACXI,UAAA,EAAY;IACVC,MAAA,EAAQ;MACVC,IAAA;IACF;EAEA;AAGO;AAAuB,IAC5BC,+BAAM,GAAAN,IAAA;AAAA,IACNO,OAAQ;EAGFC,IAAA;EAAoCC,MACpC,WAAAA,MAACA,CAAA;IAGD,OAEJ,eAAAf,IAAA,CAAAK,eAAA;MAEJW,eAAA","ignoreList":[]}