@wq/material-native 2.0.0-alpha.2 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wq/material-native",
-    "version": "2.0.0-alpha.2",
+    "version": "2.0.0",
     "description": "React Native and Expo bindings for @wq/material",
     "type": "module",
     "main": "src/index.js",
@@ -28,7 +28,7 @@
     },
     "homepage": "https://wq.io/@wq/material",
     "dependencies": {
-        "@wq/react": "^2.0.0-alpha.2",
+        "@wq/react": "^2.0.0",
         "date-fns": "^2.30.0"
     },
     "peerDependencies": {

package/src/App.js

@@ -1,11 +1,20 @@
 import React, { useMemo } from "react";
 import { App as DefaultApp, usePlugin } from "@wq/react";
 import {
-    DefaultTheme,
-    DarkTheme,
+    MD2LightTheme,
+    MD3LightTheme,
+    MD2DarkTheme,
+    MD3DarkTheme,
     Provider as PaperProvider,
 } from "react-native-paper";
 
+const THEMES = {
+    "light-2": MD2LightTheme,
+    "light-3": MD3LightTheme,
+    "dark-2": MD2DarkTheme,
+    "dark-3": MD3DarkTheme,
+};
+
 export default function App() {
     const { theme: configTheme } = usePlugin("material").config,
         theme = useMemo(() => createTheme(configTheme), [configTheme]),
@@ -26,9 +35,18 @@ export default function App() {
     );
 }
 
-function createTheme({ type, primary, secondary, background }) {
+function createTheme({
+    type = "light",
+    version = 3,
+    primary,
+    secondary,
+    background,
+}) {
     const colors = {},
-        base = type === "dark" ? DarkTheme : DefaultTheme;
+        base = THEMES[`${type}-${version}`];
+    if (!base) {
+        console.warn(`Unknown base theme type=${type} version=${version}`);
+    }
     if (primary) {
         colors.primary = primary;
     }
@@ -41,7 +59,7 @@ function createTheme({ type, primary, secondary, background }) {
     return {
         ...base,
         colors: {
-            ...base.colors,
+            ...(base || {}).colors,
             ...colors,
         },
     };

package/src/components/IconButton.js

@@ -18,7 +18,7 @@ export default function IconButton({ icon, onClick, onPress, color, ...rest }) {
         <PaperIconButton
             icon={Icon}
             onPress={onPress}
-            color={color}
+            iconColor={color}
             {...rest}
         />
     );

package/src/components/Img.js

@@ -93,7 +93,7 @@ export default function Img({ src, onPress, onClick, style, ...props }) {
 }
 
 Img.propTypes = {
-    src: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     width: PropTypes.number,
     height: PropTypes.number,
     onPress: PropTypes.func,

package/src/components/index.js

@@ -47,10 +47,6 @@ import TablePagination from "./TablePagination.js";
 
 import FormRoot from "./FormRoot.js";
 import FormError from "./FormError.js";
-import Fieldset from "./Fieldset.js";
-import FlatFieldset from "./FlatFieldset.js";
-import FieldsetArray from "./FieldsetArray.js";
-import FileArray from "./FileArray.js";
 import CancelButton from "./CancelButton.js";
 import SubmitButton from "./SubmitButton.js";
 import IconSubmitButton from "./IconSubmitButton.js";
@@ -121,10 +117,6 @@ export {
 export {
     FormRoot,
     FormError,
-    Fieldset,
-    FlatFieldset,
-    FieldsetArray,
-    FileArray,
     CancelButton,
     SubmitButton,
     IconSubmitButton,

package/src/inputs/index.js

@@ -8,6 +8,10 @@ import Radio from "./Radio.js";
 import Toggle from "./Toggle.js";
 import Hidden from "./Hidden.js";
 import HelperText from "./HelperText.js";
+import Fieldset from "./Fieldset.js";
+import FlatFieldset from "./FlatFieldset.js";
+import FieldsetArray from "./FieldsetArray.js";
+import FileArray from "./FileArray.js";
 
 const Date = DateTime;
 const Time = DateTime;
@@ -27,4 +31,8 @@ export {
     Toggle,
     Hidden,
     HelperText,
+    Fieldset,
+    FlatFieldset,
+    FieldsetArray,
+    FileArray,
 };