@multiplatform.one/components 1.0.1 → 1.0.2

package/dist/jsx/layouts/Debug/DebugLayout.stories.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/layouts/Debug/DebugLayout.stories.tsx"],
-  "mappings": "AACA,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,uBAAuB;AAEhC,IAAO,8BAAQ;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AAAA,IACV,QAAQ,EAAE,MAAM,OAAO;AAAA,EACzB;AACF;AAEA,MAAM,OAAO,gBAAgB,MAAM,CAAC,OAAO,SAAS,OAAO,SAAS,GAAG,aAAa,EAAhD,OAAyD,GAChF,OAAO,MAAM,CAAC,KAAK;",
-  "names": []
+  "sources": ["../../../../src/layouts/Debug/Users/clayrisser/Projects/.bitspur/multiplatform.one/packages/components/src/layouts/Debug/DebugLayout.stories.tsx"],
+  "mappings": ";AAAA,OAAkB;AAClB,SAASA,cAAc;AACvB,SAASC,cAAc;AACvB,SAASC,uBAAuB;AAEhC,IAAA,8BAAe;EACbC,OAAO;EACPC,YAAY;IACVC,QAAQ;MAAEC,MAAM;IAAO;EACzB;AACF,GAEMC,OAAOL,gBAAgB,WAAA;SAAM,qBAACF,QAAAA;IAAOQ,SAASP,OAAO,SAAA;cAAY;;IAC1DQ,OAAO,WAAA;SAAM,qBAACF,MAAAA,CAAAA,CAAAA;;",
+  "names": ["Button", "action", "withDebugLayout", "title", "parameters", "status", "type", "Main", "onPress", "main"]
 }

package/dist/jsx/layouts/Debug/index.js

@@ -1,79 +1,104 @@
 import { Select, YStack, XStack, Adapt, Popover, Circle } from "tamagui";
 import { SelectSimple } from "../../forms/SelectSimple";
-import { createWithLayout, useLocale, useSupportedLocales } from "multiplatform.one";
+import { createWithLayout } from "multiplatform.one";
+import { useLocale, useSupportedLocales } from "@multiplatform.one/locales";
+import { useTheme } from "multiplatform.one/theme";
+import { useTint } from "../../tints";
 import { config } from "app/config";
-import { useThemeState } from "app/state/theme";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function DebugLayout({
   children,
   debugView,
   debugViewProps,
-  rootThemeNames,
-  size,
-  subThemeNames
+  rootThemeNames = ["system", "light", "dark"],
+  size = 12,
+  subThemeNames = ["blue", "gray", "green", "orange", "pink", "purple", "red", "yellow"]
 }) {
-  const DebugView = debugView, [locale, setLocale] = useLocale(), themeState = useThemeState(), supportedLocales = useSupportedLocales();
+  const { familiesNames, setFamily, name } = useTint(), DebugView = debugView, [theme, setTheme] = useTheme(), [locale, setLocale] = useLocale(), supportedLocales = useSupportedLocales();
   function handleSubThemeChange(subTheme) {
-    themeState.setSub(subTheme);
+    setTheme({ sub: subTheme });
   }
   function handleRootThemeChange(rootTheme) {
-    themeState.setRoot(rootTheme);
+    setTheme({ root: rootTheme });
   }
   function renderSubThemeItems() {
-    return (subThemeNames || []).map((name, i) => <Select.Item key={i + name} index={i} value={name}><Select.ItemText>{name}</Select.ItemText></Select.Item>);
+    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((name, i) => <Select.Item key={i + name} index={i} value={name}><Select.ItemText>{name}</Select.ItemText></Select.Item>);
+    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 (supportedLocales || []).map((name, i) => <Select.Item key={i + name} index={i} value={name}><Select.ItemText>{name}</Select.ItemText></Select.Item>);
+    return (supportedLocales || []).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));
   }
   function renderDebug() {
-    return <XStack space m="$4" width={size} height={size}><Popover placement="right" size="$5">
-      <Popover.Trigger><Circle cursor="pointer" backgroundColor="$color9" width={size} height={size} /></Popover.Trigger>
-      <Adapt><Popover.Sheet modal dismissOnSnapToBottom>
-        <Popover.Sheet.Frame padding="$4"><Adapt.Contents /></Popover.Sheet.Frame>
-        <Popover.Sheet.Overlay />
-      </Popover.Sheet></Adapt>
-      <Popover.Content borderWidth={1} borderColor="$borderColor" elevate>
-        <XStack space>
-          <SelectSimple
-            id="root-theme"
-            placeholder={themeState.root}
-            width={96}
-            value={themeState.root}
-            onValueChange={handleRootThemeChange}
-          >{renderRootThemeItems()}</SelectSimple>
-          <SelectSimple
-            id="sub-theme"
-            placeholder={themeState.sub}
-            width={96}
-            backgroundColor="$color5"
-            value={themeState.sub}
-            onValueChange={handleSubThemeChange}
-          >{renderSubThemeItems()}</SelectSimple>
-          <SelectSimple
-            id="locales"
-            width={96}
-            placeholder={locale}
-            backgroundColor="$color10"
-            value={locale}
-            onValueChange={setLocale}
-          >{renderLocaleItems()}</SelectSimple>
-        </XStack>
-        {DebugView && <DebugView {...debugViewProps} />}
-      </Popover.Content>
-    </Popover></XStack>;
+    return /* @__PURE__ */ jsx(XStack, { gap: !0, m: "$4", width: size, height: size, 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__ */ jsxs(XStack, { gap: !0, children: [
+          /* @__PURE__ */ jsx(
+            SelectSimple,
+            {
+              id: "root-theme",
+              placeholder: theme.root,
+              width: 96,
+              value: theme.root || "system",
+              onValueChange: handleRootThemeChange,
+              children: renderRootThemeItems()
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectSimple,
+            {
+              id: "sub-theme",
+              placeholder: theme.sub,
+              width: 96,
+              backgroundColor: "$color5",
+              value: theme.sub?.toString(),
+              onValueChange: handleSubThemeChange,
+              children: renderSubThemeItems()
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectSimple,
+            {
+              id: "locales",
+              width: 96,
+              placeholder: locale,
+              backgroundColor: "$color10",
+              value: locale,
+              onValueChange: setLocale,
+              children: renderLocaleItems()
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectSimple,
+            {
+              id: "tint-families",
+              width: 96,
+              placeholder: name.toString(),
+              backgroundColor: "$color10",
+              value: name.toString(),
+              onValueChange: setFamily,
+              children: renderTintFamilyItems()
+            }
+          )
+        ] }),
+        DebugView && /* @__PURE__ */ jsx(DebugView, { ...debugViewProps })
+      ] })
+    ] }) });
   }
-  return config.get("DEBUG") !== "1" ? <>{children}</> : <YStack fullscreen>
-    {children}
-    <YStack position="absolute">{renderDebug()}</YStack>
-  </YStack>;
+  return config.get("DEBUG") !== "1" ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsxs(YStack, { fullscreen: !0, children: [
+    children,
+    /* @__PURE__ */ jsx(YStack, { position: "absolute", children: renderDebug() })
+  ] });
 }
-DebugLayout.defaultProps = {
-  rootThemeNames: ["light", "dark"],
-  size: 12,
-  subThemeNames: ["blue", "gray", "green", "orange", "pink", "purple", "red", "yellow"]
-};
 function createWithDebugLayout(extraLayouts, debugLayoutProps = {}) {
   return createWithLayout(DebugLayout, extraLayouts, debugLayoutProps);
 }

package/dist/jsx/layouts/Debug/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/Debug/index.tsx"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["name"]
 }

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

@@ -0,0 +1,156 @@
+import { Select, YStack, XStack, Adapt, Popover, Circle } from "tamagui";
+import { SelectSimple } from "../../forms/SelectSimple/index.mjs";
+import { createWithLayout } from "multiplatform.one";
+import { useLocale, useSupportedLocales } from "@multiplatform.one/locales";
+import { useTheme } from "multiplatform.one/theme";
+import { useTint } from "../../tints.mjs";
+import { config } from "app/config";
+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"]
+}) {
+  const {
+      familiesNames,
+      setFamily,
+      name
+    } = useTint(),
+    DebugView = debugView,
+    [theme, setTheme] = useTheme(),
+    [locale, setLocale] = useLocale(),
+    supportedLocales = useSupportedLocales();
+  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 (supportedLocales || []).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));
+  }
+  function renderDebug() {
+    return /* @__PURE__ */jsx(XStack, {
+      gap: !0,
+      m: "$4",
+      width: size,
+      height: size,
+      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__ */jsxs(XStack, {
+            gap: !0,
+            children: [/* @__PURE__ */jsx(SelectSimple, {
+              id: "root-theme",
+              placeholder: theme.root,
+              width: 96,
+              value: theme.root || "system",
+              onValueChange: handleRootThemeChange,
+              children: renderRootThemeItems()
+            }), /* @__PURE__ */jsx(SelectSimple, {
+              id: "sub-theme",
+              placeholder: theme.sub,
+              width: 96,
+              backgroundColor: "$color5",
+              value: theme.sub?.toString(),
+              onValueChange: handleSubThemeChange,
+              children: renderSubThemeItems()
+            }), /* @__PURE__ */jsx(SelectSimple, {
+              id: "locales",
+              width: 96,
+              placeholder: locale,
+              backgroundColor: "$color10",
+              value: locale,
+              onValueChange: setLocale,
+              children: renderLocaleItems()
+            }), /* @__PURE__ */jsx(SelectSimple, {
+              id: "tint-families",
+              width: 96,
+              placeholder: name.toString(),
+              backgroundColor: "$color10",
+              value: name.toString(),
+              onValueChange: setFamily,
+              children: renderTintFamilyItems()
+            })]
+          }), DebugView && /* @__PURE__ */jsx(DebugView, {
+            ...debugViewProps
+          })]
+        })]
+      })
+    });
+  }
+  return config.get("DEBUG") !== "1" ? /* @__PURE__ */jsx(Fragment, {
+    children
+  }) : /* @__PURE__ */jsxs(YStack, {
+    fullscreen: !0,
+    children: [children, /* @__PURE__ */jsx(YStack, {
+      position: "absolute",
+      children: renderDebug()
+    })]
+  });
+}
+function createWithDebugLayout(extraLayouts, debugLayoutProps = {}) {
+  return createWithLayout(DebugLayout, extraLayouts, debugLayoutProps);
+}
+const withDebugLayout = createWithDebugLayout();
+export { DebugLayout, createWithDebugLayout, withDebugLayout };