@multiplatform.one/components 0.2.16 → 0.7.0

package/dist/jsx/organize/SimpleTabs/SimpleTabs.stories.js

@@ -0,0 +1,41 @@
+import { SimpleTabs, TabContent, TabsList, Tab } from "./index";
+import { H5, SizableText } from "tamagui";
+var SimpleTabs_stories_default = {
+  title: "organize/SimpleTabs",
+  component: SimpleTabs,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  }
+};
+const horizontalTabs = () => <SimpleTabs defaultRoute="contact" fullScreen>
+  <TabsList>
+    <Tab path="home">Home</Tab>
+    <Tab path="about">About</Tab>
+    <Tab path="contact">Contact</Tab>
+    <Tab path="description"><SizableText textAlign="center">Description</SizableText></Tab>
+  </TabsList>
+  <TabContent route="home"><H5>Home</H5></TabContent>
+  <TabContent route="about"><H5>About</H5></TabContent>
+  <TabContent route="contact"><H5>Contact</H5></TabContent>
+  <TabContent route="description" jc="center" ai="center"><H5>Default</H5></TabContent>
+</SimpleTabs>;
+const verticalTabs = () => <SimpleTabs defaultRoute="about" orientation="vertical" width="100%" height="100%">
+  <TabsList fullHeight={false}>
+    <Tab path="home">Home</Tab>
+    <Tab path="about">About</Tab>
+    <Tab path="contact">Contact</Tab>
+    <Tab path="description"><SizableText textAlign="center">Description</SizableText></Tab>
+  </TabsList>
+  <TabContent route="home"><H5>Home</H5></TabContent>
+  <TabContent route="about"><H5>About</H5></TabContent>
+  <TabContent route="contact"><H5>Contact</H5></TabContent>
+  <TabContent route="description" jc="center" ai="center"><H5>Default</H5></TabContent>
+</SimpleTabs>;
+export {
+  SimpleTabs_stories_default as default,
+  horizontalTabs,
+  verticalTabs
+};
+//# sourceMappingURL=SimpleTabs.stories.js.map

package/dist/jsx/organize/SimpleTabs/SimpleTabs.stories.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/organize/SimpleTabs/SimpleTabs.stories.tsx"],
+  "mappings": "AACA,SAAS,YAAY,YAAY,UAAU,WAAW;AACtD,SAAS,IAAI,mBAAmB;AAEhC,IAAO,6BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,iBAAiB,MAC5B,CAAC,WAAW,aAAa,UAAU;AAAA,EACjC,CAAC;AAAA,IACC,CAAC,IAAI,KAAK,OAAO,IAAI,EAApB;AAAA,IACD,CAAC,IAAI,KAAK,QAAQ,KAAK,EAAtB;AAAA,IACD,CAAC,IAAI,KAAK,UAAU,OAAO,EAA1B;AAAA,IACD,CAAC,IAAI,KAAK,cACR,CAAC,YAAY,UAAU,SAAS,WAAW,EAA1C,YACH,EAFC;AAAA,EAGH,EAPC;AAAA,EAQD,CAAC,WAAW,MAAM,OAChB,CAAC,GAAG,IAAI,EAAP,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,QAChB,CAAC,GAAG,KAAK,EAAR,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,UAChB,CAAC,GAAG,OAAO,EAAV,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,cAAc,GAAG,SAAS,GAAG,SAC7C,CAAC,GAAG,OAAO,EAAV,GACH,EAFC;AAGH,EArBC;AAwBI,MAAM,eAAe,MAC1B,CAAC,WAAW,aAAa,QAAQ,YAAY,WAAW,MAAM,OAAO,OAAO;AAAA,EAC1E,CAAC,SAAS,YAAY;AAAA,IACpB,CAAC,IAAI,KAAK,OAAO,IAAI,EAApB;AAAA,IACD,CAAC,IAAI,KAAK,QAAQ,KAAK,EAAtB;AAAA,IACD,CAAC,IAAI,KAAK,UAAU,OAAO,EAA1B;AAAA,IACD,CAAC,IAAI,KAAK,cACR,CAAC,YAAY,UAAU,SAAS,WAAW,EAA1C,YACH,EAFC;AAAA,EAGH,EAPC;AAAA,EAQD,CAAC,WAAW,MAAM,OAChB,CAAC,GAAG,IAAI,EAAP,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,QAChB,CAAC,GAAG,KAAK,EAAR,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,UAChB,CAAC,GAAG,OAAO,EAAV,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,cAAc,GAAG,SAAS,GAAG,SAC7C,CAAC,GAAG,OAAO,EAAV,GACH,EAFC;AAGH,EArBC;",
+  "names": []
+}

package/dist/jsx/organize/SimpleTabs/SimpleTabs.stories.mjs

@@ -0,0 +1,41 @@
+import { SimpleTabs, TabContent, TabsList, Tab } from "./index";
+import { H5, SizableText } from "tamagui";
+var SimpleTabs_stories_default = {
+  title: "organize/SimpleTabs",
+  component: SimpleTabs,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  }
+};
+const horizontalTabs = () => <SimpleTabs defaultRoute="contact" fullScreen>
+  <TabsList>
+    <Tab path="home">Home</Tab>
+    <Tab path="about">About</Tab>
+    <Tab path="contact">Contact</Tab>
+    <Tab path="description"><SizableText textAlign="center">Description</SizableText></Tab>
+  </TabsList>
+  <TabContent route="home"><H5>Home</H5></TabContent>
+  <TabContent route="about"><H5>About</H5></TabContent>
+  <TabContent route="contact"><H5>Contact</H5></TabContent>
+  <TabContent route="description" jc="center" ai="center"><H5>Default</H5></TabContent>
+</SimpleTabs>;
+const verticalTabs = () => <SimpleTabs defaultRoute="about" orientation="vertical" width="100%" height="100%">
+  <TabsList fullHeight={false}>
+    <Tab path="home">Home</Tab>
+    <Tab path="about">About</Tab>
+    <Tab path="contact">Contact</Tab>
+    <Tab path="description"><SizableText textAlign="center">Description</SizableText></Tab>
+  </TabsList>
+  <TabContent route="home"><H5>Home</H5></TabContent>
+  <TabContent route="about"><H5>About</H5></TabContent>
+  <TabContent route="contact"><H5>Contact</H5></TabContent>
+  <TabContent route="description" jc="center" ai="center"><H5>Default</H5></TabContent>
+</SimpleTabs>;
+export {
+  SimpleTabs_stories_default as default,
+  horizontalTabs,
+  verticalTabs
+};
+//# sourceMappingURL=SimpleTabs.stories.mjs.map

package/dist/jsx/organize/SimpleTabs/SimpleTabs.stories.mjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/organize/SimpleTabs/SimpleTabs.stories.tsx"],
+  "mappings": "AACA,SAAS,YAAY,YAAY,UAAU,WAAW;AACtD,SAAS,IAAI,mBAAmB;AAEhC,IAAO,6BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,iBAAiB,MAC5B,CAAC,WAAW,aAAa,UAAU;AAAA,EACjC,CAAC;AAAA,IACC,CAAC,IAAI,KAAK,OAAO,IAAI,EAApB;AAAA,IACD,CAAC,IAAI,KAAK,QAAQ,KAAK,EAAtB;AAAA,IACD,CAAC,IAAI,KAAK,UAAU,OAAO,EAA1B;AAAA,IACD,CAAC,IAAI,KAAK,cACR,CAAC,YAAY,UAAU,SAAS,WAAW,EAA1C,YACH,EAFC;AAAA,EAGH,EAPC;AAAA,EAQD,CAAC,WAAW,MAAM,OAChB,CAAC,GAAG,IAAI,EAAP,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,QAChB,CAAC,GAAG,KAAK,EAAR,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,UAChB,CAAC,GAAG,OAAO,EAAV,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,cAAc,GAAG,SAAS,GAAG,SAC7C,CAAC,GAAG,OAAO,EAAV,GACH,EAFC;AAGH,EArBC;AAwBI,MAAM,eAAe,MAC1B,CAAC,WAAW,aAAa,QAAQ,YAAY,WAAW,MAAM,OAAO,OAAO;AAAA,EAC1E,CAAC,SAAS,YAAY;AAAA,IACpB,CAAC,IAAI,KAAK,OAAO,IAAI,EAApB;AAAA,IACD,CAAC,IAAI,KAAK,QAAQ,KAAK,EAAtB;AAAA,IACD,CAAC,IAAI,KAAK,UAAU,OAAO,EAA1B;AAAA,IACD,CAAC,IAAI,KAAK,cACR,CAAC,YAAY,UAAU,SAAS,WAAW,EAA1C,YACH,EAFC;AAAA,EAGH,EAPC;AAAA,EAQD,CAAC,WAAW,MAAM,OAChB,CAAC,GAAG,IAAI,EAAP,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,QAChB,CAAC,GAAG,KAAK,EAAR,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,UAChB,CAAC,GAAG,OAAO,EAAV,GACH,EAFC;AAAA,EAGD,CAAC,WAAW,MAAM,cAAc,GAAG,SAAS,GAAG,SAC7C,CAAC,GAAG,OAAO,EAAV,GACH,EAFC;AAGH,EArBC;",
+  "names": []
+}

package/dist/jsx/organize/SimpleTabs/index.js

@@ -0,0 +1,80 @@
+import React, { useMemo } from "react";
+import { SizableText } from "tamagui";
+import { Separator } from "tamagui";
+import { Tabs } from "tamagui";
+const SimpleTabsContext = React.createContext(null);
+const TabsListContext = React.createContext(null);
+function SimpleTabs({
+  width,
+  height,
+  fullScreen,
+  defaultRoute,
+  orientation = "horizontal",
+  ...props
+}) {
+  const contextValue = useMemo(() => ({ orientation, width }), [orientation, width]);
+  return <SimpleTabsContext.Provider value={contextValue}><Tabs
+    borderRadius="$4"
+    borderWidth="$0.25"
+    overflow="hidden"
+    borderColor="$borderColor"
+    flexDirection={orientation === "vertical" ? "row" : "column"}
+    defaultValue={defaultRoute}
+    {...props}
+    width={fullScreen ? "100%" : width ?? 300}
+    height={fullScreen ? "100%" : height ?? 150}
+  >{props.children}</Tabs></SimpleTabsContext.Provider>;
+}
+function TabsList({ fullHeight = false, ...props }) {
+  const context = React.useContext(SimpleTabsContext);
+  if (!context)
+    throw new Error("TabsList must be used inside SimpleTabs");
+  const { orientation } = context;
+  const contextValue = useMemo(() => ({ fullHeight }), [fullHeight]);
+  return <TabsListContext.Provider value={contextValue}><Tabs.List
+    separator={<Separator vertical={orientation === "horizontal"} />}
+    disablePassBorderRadius={orientation === "horizontal" ? "bottom" : "end"}
+    aria-label="Manage your account"
+    flex={0}
+    style={orientation === "vertical" ? { display: "flex", flexDirection: "column" } : {}}
+    {...props}
+  >{props.children}</Tabs.List></TabsListContext.Provider>;
+}
+function TabContent({ route, ...props }) {
+  return <Tabs.Content
+    backgroundColor="$background"
+    key={route}
+    padding="$2"
+    flex={1}
+    borderColor="$background"
+    borderRadius="$2"
+    borderTopLeftRadius={0}
+    borderTopRightRadius={0}
+    borderWidth="$2"
+    value={route}
+    {...props}
+  >{props.children}</Tabs.Content>;
+}
+function Tab({ path, ...props }) {
+  const context = React.useContext(SimpleTabsContext);
+  const listContext = React.useContext(TabsListContext);
+  if (!context)
+    throw new Error("Tab must be used inside TabList");
+  const { orientation } = context;
+  if (!listContext)
+    throw new Error("Tab must be used inside TabList");
+  const { fullHeight } = listContext;
+  return <Tabs.Tab
+    key={path}
+    f={orientation === "horizontal" || orientation === "vertical" && fullHeight ? 1 : 0}
+    value={path}
+    {...props}
+  >{typeof props.children === "string" ? <SizableText>{props.children}</SizableText> : props.children}</Tabs.Tab>;
+}
+export {
+  SimpleTabs,
+  Tab,
+  TabContent,
+  TabsList
+};
+//# sourceMappingURL=index.js.map

package/dist/jsx/organize/SimpleTabs/index.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/organize/SimpleTabs/index.tsx"],
+  "mappings": "AACA,OAAO,SAAS,eAAe;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAmBrB,MAAM,oBAAoB,MAAM,cAA6C,IAAI;AAEjF,MAAM,kBAAkB,MAAM,cAA0C,IAAI;AAErE,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAoB;AAClB,QAAM,eAAe,QAAQ,OAAO,EAAE,aAAa,MAAM,IAAI,CAAC,aAAa,KAAK,CAAC;AAEjF,SACE,CAAC,kBAAkB,SAAS,OAAO,cACjC,CAAC;AAAA,IACC,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe,gBAAgB,aAAa,QAAQ;AAAA,IACpD,cAAc;AAAA,QACV;AAAA,IACJ,OAAO,aAAa,SAAS,SAAS;AAAA,IACtC,QAAQ,aAAa,SAAS,UAAU;AAAA,IAEvC,MAAM,SACT,EAZC,KAaH,EAdC,kBAAkB;AAgBvB;AAEO,SAAS,SAAS,EAAE,aAAa,OAAO,GAAG,MAAM,GAAc;AACpE,QAAM,UAAU,MAAM,WAAW,iBAAiB;AAClD,MAAI,CAAC;AAAS,UAAM,IAAI,MAAM,yCAAyC;AACvE,QAAM,EAAE,YAAY,IAAI;AACxB,QAAM,eAAe,QAAQ,OAAO,EAAE,WAAW,IAAI,CAAC,UAAU,CAAC;AAEjE,SACE,CAAC,gBAAgB,SAAS,OAAO,cAC/B,CAAC,KAAK;AAAA,IACJ,WAAW,CAAC,UAAU,UAAU,gBAAgB,cAAc;AAAA,IAC9D,yBAAyB,gBAAgB,eAAe,WAAW;AAAA,IACnE,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO,gBAAgB,aAAa,EAAE,SAAS,QAAQ,eAAe,SAAS,IAAI,CAAC;AAAA,QAChF;AAAA,IAEH,MAAM,SACT,EATC,KAAK,KAUR,EAXC,gBAAgB;AAarB;AAEO,SAAS,WAAW,EAAE,OAAO,GAAG,MAAM,GAAiB;AAC5D,SACE,CAAC,KAAK;AAAA,IACJ,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,QACH;AAAA,IAEH,MAAM,SACT,EAdC,KAAK;AAgBV;AAEO,SAAS,IAAI,EAAE,MAAM,GAAG,MAAM,GAAa;AAChD,QAAM,UAAU,MAAM,WAAW,iBAAiB;AAClD,QAAM,cAAc,MAAM,WAAW,eAAe;AACpD,MAAI,CAAC;AAAS,UAAM,IAAI,MAAM,iCAAiC;AAC/D,QAAM,EAAE,YAAY,IAAI;AACxB,MAAI,CAAC;AAAa,UAAM,IAAI,MAAM,iCAAiC;AACnE,QAAM,EAAE,WAAW,IAAI;AAEvB,SACE,CAAC,KAAK;AAAA,IACJ,KAAK;AAAA,IACL,GAAG,gBAAgB,gBAAiB,gBAAgB,cAAc,aAAc,IAAI;AAAA,IACpF,OAAO;AAAA,QACH;AAAA,IAEH,OAAO,MAAM,aAAa,WAAW,CAAC,aAAa,MAAM,SAAS,EAA5B,eAA6C,MAAM,SAC5F,EAPC,KAAK;AASV;",
+  "names": []
+}

package/dist/jsx/organize/SimpleTabs/index.mjs

@@ -0,0 +1,80 @@
+import React, { useMemo } from "react";
+import { SizableText } from "tamagui";
+import { Separator } from "tamagui";
+import { Tabs } from "tamagui";
+const SimpleTabsContext = React.createContext(null);
+const TabsListContext = React.createContext(null);
+function SimpleTabs({
+  width,
+  height,
+  fullScreen,
+  defaultRoute,
+  orientation = "horizontal",
+  ...props
+}) {
+  const contextValue = useMemo(() => ({ orientation, width }), [orientation, width]);
+  return <SimpleTabsContext.Provider value={contextValue}><Tabs
+    borderRadius="$4"
+    borderWidth="$0.25"
+    overflow="hidden"
+    borderColor="$borderColor"
+    flexDirection={orientation === "vertical" ? "row" : "column"}
+    defaultValue={defaultRoute}
+    {...props}
+    width={fullScreen ? "100%" : width ?? 300}
+    height={fullScreen ? "100%" : height ?? 150}
+  >{props.children}</Tabs></SimpleTabsContext.Provider>;
+}
+function TabsList({ fullHeight = false, ...props }) {
+  const context = React.useContext(SimpleTabsContext);
+  if (!context)
+    throw new Error("TabsList must be used inside SimpleTabs");
+  const { orientation } = context;
+  const contextValue = useMemo(() => ({ fullHeight }), [fullHeight]);
+  return <TabsListContext.Provider value={contextValue}><Tabs.List
+    separator={<Separator vertical={orientation === "horizontal"} />}
+    disablePassBorderRadius={orientation === "horizontal" ? "bottom" : "end"}
+    aria-label="Manage your account"
+    flex={0}
+    style={orientation === "vertical" ? { display: "flex", flexDirection: "column" } : {}}
+    {...props}
+  >{props.children}</Tabs.List></TabsListContext.Provider>;
+}
+function TabContent({ route, ...props }) {
+  return <Tabs.Content
+    backgroundColor="$background"
+    key={route}
+    padding="$2"
+    flex={1}
+    borderColor="$background"
+    borderRadius="$2"
+    borderTopLeftRadius={0}
+    borderTopRightRadius={0}
+    borderWidth="$2"
+    value={route}
+    {...props}
+  >{props.children}</Tabs.Content>;
+}
+function Tab({ path, ...props }) {
+  const context = React.useContext(SimpleTabsContext);
+  const listContext = React.useContext(TabsListContext);
+  if (!context)
+    throw new Error("Tab must be used inside TabList");
+  const { orientation } = context;
+  if (!listContext)
+    throw new Error("Tab must be used inside TabList");
+  const { fullHeight } = listContext;
+  return <Tabs.Tab
+    key={path}
+    f={orientation === "horizontal" || orientation === "vertical" && fullHeight ? 1 : 0}
+    value={path}
+    {...props}
+  >{typeof props.children === "string" ? <SizableText>{props.children}</SizableText> : props.children}</Tabs.Tab>;
+}
+export {
+  SimpleTabs,
+  Tab,
+  TabContent,
+  TabsList
+};
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/organize/SimpleTabs/index.mjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/organize/SimpleTabs/index.tsx"],
+  "mappings": "AACA,OAAO,SAAS,eAAe;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAmBrB,MAAM,oBAAoB,MAAM,cAA6C,IAAI;AAEjF,MAAM,kBAAkB,MAAM,cAA0C,IAAI;AAErE,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAoB;AAClB,QAAM,eAAe,QAAQ,OAAO,EAAE,aAAa,MAAM,IAAI,CAAC,aAAa,KAAK,CAAC;AAEjF,SACE,CAAC,kBAAkB,SAAS,OAAO,cACjC,CAAC;AAAA,IACC,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe,gBAAgB,aAAa,QAAQ;AAAA,IACpD,cAAc;AAAA,QACV;AAAA,IACJ,OAAO,aAAa,SAAS,SAAS;AAAA,IACtC,QAAQ,aAAa,SAAS,UAAU;AAAA,IAEvC,MAAM,SACT,EAZC,KAaH,EAdC,kBAAkB;AAgBvB;AAEO,SAAS,SAAS,EAAE,aAAa,OAAO,GAAG,MAAM,GAAc;AACpE,QAAM,UAAU,MAAM,WAAW,iBAAiB;AAClD,MAAI,CAAC;AAAS,UAAM,IAAI,MAAM,yCAAyC;AACvE,QAAM,EAAE,YAAY,IAAI;AACxB,QAAM,eAAe,QAAQ,OAAO,EAAE,WAAW,IAAI,CAAC,UAAU,CAAC;AAEjE,SACE,CAAC,gBAAgB,SAAS,OAAO,cAC/B,CAAC,KAAK;AAAA,IACJ,WAAW,CAAC,UAAU,UAAU,gBAAgB,cAAc;AAAA,IAC9D,yBAAyB,gBAAgB,eAAe,WAAW;AAAA,IACnE,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO,gBAAgB,aAAa,EAAE,SAAS,QAAQ,eAAe,SAAS,IAAI,CAAC;AAAA,QAChF;AAAA,IAEH,MAAM,SACT,EATC,KAAK,KAUR,EAXC,gBAAgB;AAarB;AAEO,SAAS,WAAW,EAAE,OAAO,GAAG,MAAM,GAAiB;AAC5D,SACE,CAAC,KAAK;AAAA,IACJ,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,QACH;AAAA,IAEH,MAAM,SACT,EAdC,KAAK;AAgBV;AAEO,SAAS,IAAI,EAAE,MAAM,GAAG,MAAM,GAAa;AAChD,QAAM,UAAU,MAAM,WAAW,iBAAiB;AAClD,QAAM,cAAc,MAAM,WAAW,eAAe;AACpD,MAAI,CAAC;AAAS,UAAM,IAAI,MAAM,iCAAiC;AAC/D,QAAM,EAAE,YAAY,IAAI;AACxB,MAAI,CAAC;AAAa,UAAM,IAAI,MAAM,iCAAiC;AACnE,QAAM,EAAE,WAAW,IAAI;AAEvB,SACE,CAAC,KAAK;AAAA,IACJ,KAAK;AAAA,IACL,GAAG,gBAAgB,gBAAiB,gBAAgB,cAAc,aAAc,IAAI;AAAA,IACpF,OAAO;AAAA,QACH;AAAA,IAEH,OAAO,MAAM,aAAa,WAAW,CAAC,aAAa,MAAM,SAAS,EAA5B,eAA6C,MAAM,SAC5F,EAPC,KAAK;AASV;",
+  "names": []
+}

package/dist/jsx/panels/SimpleToast/SimpleToast.stories.js

@@ -0,0 +1,25 @@
+import { SimpleToast } from "./index";
+import { useToastController } from "@tamagui/toast";
+import { YStack, Button } from "tamagui";
+var SimpleToast_stories_default = {
+  title: "panels/SimpleToast",
+  component: SimpleToast,
+  parameters: {
+    status: {
+      type: "code"
+    }
+  }
+};
+const Main = () => {
+  const toastState = useToastController();
+  return <YStack>
+    <SimpleToast />
+    <Button onPress={() => toastState.show(JSON.stringify({ title: "Hello", message: "World" }))}>Add Toast</Button>
+  </YStack>;
+};
+const Default = () => <Main />;
+export {
+  Default,
+  SimpleToast_stories_default as default
+};
+//# sourceMappingURL=SimpleToast.stories.js.map

package/dist/jsx/panels/SimpleToast/SimpleToast.stories.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/panels/SimpleToast/SimpleToast.stories.tsx"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,QAAQ,cAAc;AAE/B,IAAO,8BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,MAAM,OAAO,MAAM;AACjB,QAAM,aAAa,mBAAmB;AAEtC,SACE,CAAC;AAAA,IACC,CAAC,YAAY;AAAA,IACb,CAAC,OAAO,SAAS,MAAM,WAAW,KAAK,KAAK,UAAU,EAAE,OAAO,SAAS,SAAS,QAAQ,CAAC,CAAC,GAAG,SAAS,EAAtG;AAAA,EACH,EAHC;AAKL;AAEO,MAAM,UAAU,MAAM,CAAC,KAAK;",
+  "names": []
+}

package/dist/jsx/panels/SimpleToast/SimpleToast.stories.mjs

@@ -0,0 +1,25 @@
+import { SimpleToast } from "./index";
+import { useToastController } from "@tamagui/toast";
+import { YStack, Button } from "tamagui";
+var SimpleToast_stories_default = {
+  title: "panels/SimpleToast",
+  component: SimpleToast,
+  parameters: {
+    status: {
+      type: "code"
+    }
+  }
+};
+const Main = () => {
+  const toastState = useToastController();
+  return <YStack>
+    <SimpleToast />
+    <Button onPress={() => toastState.show(JSON.stringify({ title: "Hello", message: "World" }))}>Add Toast</Button>
+  </YStack>;
+};
+const Default = () => <Main />;
+export {
+  Default,
+  SimpleToast_stories_default as default
+};
+//# sourceMappingURL=SimpleToast.stories.mjs.map

package/dist/jsx/panels/SimpleToast/SimpleToast.stories.mjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/panels/SimpleToast/SimpleToast.stories.tsx"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,QAAQ,cAAc;AAE/B,IAAO,8BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,MAAM,OAAO,MAAM;AACjB,QAAM,aAAa,mBAAmB;AAEtC,SACE,CAAC;AAAA,IACC,CAAC,YAAY;AAAA,IACb,CAAC,OAAO,SAAS,MAAM,WAAW,KAAK,KAAK,UAAU,EAAE,OAAO,SAAS,SAAS,QAAQ,CAAC,CAAC,GAAG,SAAS,EAAtG;AAAA,EACH,EAHC;AAKL;AAEO,MAAM,UAAU,MAAM,CAAC,KAAK;",
+  "names": []
+}

package/dist/jsx/panels/SimpleToast/index.js

@@ -0,0 +1,24 @@
+import { YStack } from "tamagui";
+import { Toast, useToastState } from "@tamagui/toast";
+function SimpleToast() {
+  const currentToast = useToastState();
+  if (!currentToast || currentToast.isHandledNatively)
+    return null;
+  return <Toast
+    key={currentToast.id}
+    duration={currentToast.duration}
+    enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
+    exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+    y={0}
+    opacity={1}
+    scale={1}
+    viewportName={currentToast.viewportName}
+  ><YStack>
+    <Toast.Title>{currentToast.title}</Toast.Title>
+    {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
+  </YStack></Toast>;
+}
+export {
+  SimpleToast
+};
+//# sourceMappingURL=index.js.map

package/dist/jsx/panels/SimpleToast/index.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/panels/SimpleToast/index.tsx"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,OAAO,qBAAqB;AAG9B,SAAS,cAAc;AAC5B,QAAM,eAAe,cAAc;AAEnC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE,CAAC;AAAA,IACC,KAAK,aAAa;AAAA,IAClB,UAAU,aAAa;AAAA,IACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,IAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,IAC1C,GAAG;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,IAEP,cAAc,aAAa;AAAA,GAE3B,CAAC;AAAA,IACC,CAAC,MAAM,OAAO,aAAa,MAAM,EAAhC,MAAM;AAAA,KACN,CAAC,CAAC,aAAa,WAAW,CAAC,MAAM,aAAa,aAAa,QAAQ,EAAxC,MAAM;AAAA,EACpC,EAHC,OAIH,EAfC;AAiBL;",
+  "names": []
+}

package/dist/jsx/panels/SimpleToast/index.mjs

@@ -0,0 +1,24 @@
+import { YStack } from "tamagui";
+import { Toast, useToastState } from "@tamagui/toast";
+function SimpleToast() {
+  const currentToast = useToastState();
+  if (!currentToast || currentToast.isHandledNatively)
+    return null;
+  return <Toast
+    key={currentToast.id}
+    duration={currentToast.duration}
+    enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
+    exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+    y={0}
+    opacity={1}
+    scale={1}
+    viewportName={currentToast.viewportName}
+  ><YStack>
+    <Toast.Title>{currentToast.title}</Toast.Title>
+    {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
+  </YStack></Toast>;
+}
+export {
+  SimpleToast
+};
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/panels/SimpleToast/index.mjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/panels/SimpleToast/index.tsx"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,OAAO,qBAAqB;AAG9B,SAAS,cAAc;AAC5B,QAAM,eAAe,cAAc;AAEnC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE,CAAC;AAAA,IACC,KAAK,aAAa;AAAA,IAClB,UAAU,aAAa;AAAA,IACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,IAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,IAC1C,GAAG;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,IAEP,cAAc,aAAa;AAAA,GAE3B,CAAC;AAAA,IACC,CAAC,MAAM,OAAO,aAAa,MAAM,EAAhC,MAAM;AAAA,KACN,CAAC,CAAC,aAAa,WAAW,CAAC,MAAM,aAAa,aAAa,QAAQ,EAAxC,MAAM;AAAA,EACpC,EAHC,OAIH,EAfC;AAiBL;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "0.2.16",
+  "version": "0.7.0",
   "sideEffects": [
     "*.css"
   ],
@@ -40,18 +40,20 @@
   "dependencies": {
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@tamagui/font-inter": "^1.30.23",
-    "@tamagui/logo": "^1.30.23",
-    "@tamagui/react-native-media-driver": "^1.30.23",
-    "@tamagui/shorthands": "^1.30.23",
-    "@tamagui/themes": "^1.30.23",
-    "expo-asset": "^8.9.2",
-    "fast-xml-parser": "^4.2.4",
+    "@tamagui/font-inter": "^1.35.8",
+    "@tamagui/logo": "^1.35.8",
+    "@tamagui/react-native-media-driver": "^1.35.8",
+    "@tamagui/shorthands": "^1.35.8",
+    "@tamagui/themes": "^1.35.8",
+    "burnt": "^0.11.7",
+    "expo-asset": "^8.10.0",
+    "expo-image": "^1.3.0",
+    "fast-xml-parser": "^4.2.5",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "^8.0.4",
     "immer": "^10.0.2",
     "parse-numeric-range": "^1.3.0",
-    "react-hook-form": "^7.44.3",
+    "react-hook-form": "^7.45.0",
     "react-native-svg": "13.9.0",
     "refractor": "^4.8.1",
     "rehype-autolink-headings": "^6.1.1",
@@ -59,7 +61,7 @@
     "rehype-slug": "^5.1.0",
     "remark-frontmatter": "^4.0.1",
     "remark-mdx-frontmatter": "^3.0.0",
-    "tamagui": "^1.30.23",
+    "tamagui": "^1.35.8",
     "unist-util-visit": "^4.1.2"
   },
   "peerDependencies": {
@@ -68,11 +70,11 @@
     "solito": "^3.2.6"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.30.23",
+    "@tamagui/build": "^1.35.8",
     "moti": "^0.25.3",
     "react-native-reanimated": "2.14.4",
-    "solito": "^3.2.6",
-    "ui": "*"
+    "solito": "^3.2.9",
+    "ui": "workspace:^"
   },
   "jest": {
     "testRegex": "((/(tests|__tests__)((/|/[^_.\n][^/\n]*(/[^_.\n][^/\n]+)*/)[^_.\n][^/\n]*))|((/|/.*/)(([^_.\n][^/\n]*.(spec|test))|(spec|test)))).[jt]sx?$",

package/src/forms/FormCheckBox/FormCheckBox.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormCheckBox } from './index';
-import { Text } from 'tamagui';
+import { YStack } from 'tamagui';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'forms/FormCheckBox',
@@ -9,7 +10,26 @@ export default {
 };
 
 export const main = () => (
-  <FormCheckBox name="checkbox" label="checkbox" checkBoxElement={{ label: 'checkbox', value: 'checkbox' }}>
-    <Text>Hello this is from FormCheckBox</Text>
-  </FormCheckBox>
+  <YStack>
+    <FormCheckBox
+      name="checkbox"
+      checkBoxElement={{ label: 'mango', value: 'mango' }}
+      onCheckedChange={action('onCheckedChange')}
+    />
+    <FormCheckBox
+      name="checkbox"
+      checkBoxElement={{ label: 'orange', value: 'orange' }}
+      onCheckedChange={action('onCheckedChange')}
+    />
+    <FormCheckBox
+      name="checkbox"
+      checkBoxElement={{ label: 'banana', value: 'banana' }}
+      onCheckedChange={action('onCheckedChange')}
+    />
+    <FormCheckBox
+      name="checkbox"
+      checkBoxElement={{ label: 'lemon', value: 'lemon' }}
+      onCheckedChange={action('onCheckedChange')}
+    />
+  </YStack>
 );

package/src/forms/FormProgress/FormProgress.stories.tsx

@@ -0,0 +1,16 @@
+import { FormProgress } from './index';
+import React from 'react';
+
+export default {
+  title: 'forms/FormProgress',
+  component: FormProgress,
+  parameters: {
+    status: {
+      type: 'beta',
+    },
+  },
+};
+
+export const vertical = (args) => <FormProgress value={80} size={3} width={20} vertical name="progress" {...args} />;
+
+export const horizontal = (args) => <FormProgress value={80} size={3} width={20} name="progress" {...args} />;

package/src/forms/FormProgress/index.tsx

@@ -0,0 +1,74 @@
+import React, { useId } from 'react';
+import type { ProgressProps, SizeTokens } from 'tamagui';
+import { Progress } from 'tamagui';
+import { useFormContext, Controller } from 'react-hook-form';
+import type { FormFieldProps } from '../FormField';
+import { FormField } from '../FormField';
+import type { FormControllerProps } from '../types';
+
+export type FormProgressProps = ProgressProps &
+  FormControllerProps & { vertical?: boolean } & {
+    fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+
+export function FormProgress({
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  rules,
+  size,
+  vertical,
+  ...progressProps
+}: FormProgressProps) {
+  const formContext = useFormContext();
+  const id = useId();
+  const propSize = typeof size === 'number' ? (`$${size}` as SizeTokens) : (size as SizeTokens);
+  if (!formContext) {
+    console.log('FormProgress', progressProps);
+    return (
+      <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}>
+        <Progress
+          mt={vertical ? 86 : undefined}
+          ml={vertical ? -80 : undefined}
+          rotate={vertical ? '270deg' : undefined}
+          {...progressProps}
+          size={propSize}
+        >
+          <Progress.Indicator animation="bouncy" />
+        </Progress>
+      </FormField>
+    );
+  }
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { value }, fieldState: { error } }) => (
+        <FormField
+          id={id}
+          error={!!error}
+          helperText={error ? error.message : helperText}
+          label={label}
+          required={required}
+          {...fieldProps}
+        >
+          <Progress
+            mt={vertical ? 86 : undefined}
+            ml={vertical ? -80 : undefined}
+            rotate={vertical ? '270deg' : undefined}
+            {...progressProps}
+            size={propSize}
+            value={value ?? 0}
+          />
+        </FormField>
+      )}
+    />
+  );
+}

package/src/forms/FormRadioGroup/FormRadioGroup.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormRadioGroup } from './index';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'forms/FormRadioGroup',
@@ -18,5 +19,6 @@ export const main = () => (
       { label: 'option 2', value: 'option2' },
       { label: 'option 3', value: 'option3' },
     ]}
+    onValueChange={action('onValueChange')}
   />
 );

package/src/forms/FormSlider/FormSlider.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormSlider } from './index';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'forms/FormSlider',
@@ -9,4 +10,4 @@ export default {
   },
 };
 
-export const main = () => <FormSlider name="FormSlider" />;
+export const main = () => <FormSlider name="FormSlider" onValueChange={action(`onValueChange`)} />;