@onesy/ui-react 1.0.163 → 1.0.165

package/esm/Surface/Surface.js

@@ -565,197 +565,274 @@ const useStyle = styleMethod(theme => ({
 });
 const Surface = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySurface?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySurface?.props?.default), props_);
   const {
     classes
   } = useStyle();
   const {
-      tonal = true,
-      color: color_ = 'default',
-      version = 'filled',
+      tonal: t0,
+      color: t1,
+      version: t2,
       elevation,
       backgroundOpacity,
       noBackground,
       noOutline,
       AdditionalProps,
-      Component = 'div',
+      Component: t3,
       className,
       style,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color_ = t1 === undefined ? "default" : t1;
+  const version = t2 === undefined ? "filled" : t2;
+  const Component = t3 === undefined ? "div" : t3;
   const styles = {
     root: {},
     children: {}
   };
   let color = color_;
   let palette;
-  if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
+  if (!theme.palette.color[color] && !["themed", "inverted", "default", "inherit"].includes(color)) {
     palette = theme.methods.color(color);
     if (tonal) {
       styles.root.color = theme.methods.palette.color.value(color, 10, true, palette);
-      if (version === 'filled') styles.root.backgroundColor = tonal === true ? palette[theme.palette.light ? 80 : 30] : theme.methods.palette.color.value(color, 70, true, palette);
-      if (version === 'outlined') {
-        styles.root.color = theme.methods.palette.color.value(color, tonal === 'secondary' ? 10 : 5, true, palette);
-        styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === 'secondary' ? 95 : 99, true, palette);
-        styles.root.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, tonal === 'secondary' ? 20 : 10, true, palette)}`;
+      if (version === "filled") {
+        styles.root.backgroundColor = tonal === true ? palette[theme.palette.light ? 80 : 30] : theme.methods.palette.color.value(color, 70, true, palette);
       }
-      if (version === 'outlined-without-background') {
-        styles.root.color = theme.methods.palette.color.value(color, tonal === 'secondary' ? 30 : 40, true, palette);
-        styles.root.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, tonal === 'secondary' ? 20 : 30, true, palette)}`;
+      if (version === "outlined") {
+        styles.root.color = theme.methods.palette.color.value(color, tonal === "secondary" ? 10 : 5, true, palette);
+        styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === "secondary" ? 95 : 99, true, palette);
+        styles.root.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, tonal === "secondary" ? 20 : 10, true, palette)}`;
+      }
+      if (version === "outlined-without-background") {
+        styles.root.color = theme.methods.palette.color.value(color, tonal === "secondary" ? 30 : 40, true, palette);
+        styles.root.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, tonal === "secondary" ? 20 : 30, true, palette)}`;
         delete styles.root.backgroundColor;
       }
-      if (version === 'text') styles.root.color = theme.methods.palette.color.value(color, tonal === 'secondary' ? 30 : 40, true, palette);
+      if (version === "text") {
+        styles.root.color = theme.methods.palette.color.value(color, tonal === "secondary" ? 30 : 40, true, palette);
+      }
     } else {
-      styles.root.color = theme.methods.palette.color.text(palette.main, true, 'light');
-      if (['outlined', 'filled'].includes(version)) styles.root.backgroundColor = palette.main;
-      if (version === 'outlined') styles.root.boxShadow = `inset 0px 0px 0px 1px ${palette[10]}`;
-      if (version === 'outlined-without-background') {
+      styles.root.color = theme.methods.palette.color.text(palette.main, true, "light");
+      if (["outlined", "filled"].includes(version)) {
+        styles.root.backgroundColor = palette.main;
+      }
+      if (version === "outlined") {
+        styles.root.boxShadow = `inset 0px 0px 0px 1px ${palette[10]}`;
+      }
+      if (version === "outlined-without-background") {
         styles.root.color = palette[40];
         styles.root.boxShadow = `inset 0px 0px 0px 1px ${palette[30]}`;
       }
-      if (version === 'text') styles.root.color = palette.main;
+      if (version === "text") {
+        styles.root.color = palette.main;
+      }
     }
     styles.children.backgroundColor = styles.root.backgroundColor;
   } else {
-    if (version === 'filled') {
-      if (color === 'themed') {
+    if (version === "filled") {
+      if (color === "themed") {
         styles.children.backgroundColor = theme.palette.light ? theme.palette.background.default.primary : theme.palette.background.default.quaternary;
-        styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, 'light');
-      } else if (color === 'inverted') {
-        styles.children.backgroundColor = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
-        styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, 'light');
-      } else if (color === 'default') {
-        styles.children.backgroundColor = theme.palette.background.default.primary;
-        styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, 'light');
-      } else if (color === 'inherit') {
-        styles.children.color = 'inherit';
+        styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, "light");
       } else {
-        if (!tonal) {
-          styles.children.color = theme.methods.palette.color.text(theme.palette.color[color].main, true, 'light');
-          styles.children.backgroundColor = theme.palette.color[color].main;
-        } else if (tonal === 'secondary') {
-          styles.children.color = theme.methods.palette.color.value(color, 10);
-          styles.children.backgroundColor = theme.methods.palette.color.value(color, 80);
+        if (color === "inverted") {
+          styles.children.backgroundColor = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
+          styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, "light");
         } else {
-          styles.children.color = theme.methods.palette.color.value(color, 10);
-          styles.children.backgroundColor = theme.methods.palette.color.value(color, 90);
+          if (color === "default") {
+            styles.children.backgroundColor = theme.palette.background.default.primary;
+            styles.children.color = theme.methods.palette.color.text(styles.children.backgroundColor, true, "light");
+          } else {
+            if (color === "inherit") {
+              styles.children.color = "inherit";
+            } else {
+              if (!tonal) {
+                styles.children.color = theme.methods.palette.color.text(theme.palette.color[color].main, true, "light");
+                styles.children.backgroundColor = theme.palette.color[color].main;
+              } else {
+                if (tonal === "secondary") {
+                  styles.children.color = theme.methods.palette.color.value(color, 10);
+                  styles.children.backgroundColor = theme.methods.palette.color.value(color, 80);
+                } else {
+                  styles.children.color = theme.methods.palette.color.value(color, 10);
+                  styles.children.backgroundColor = theme.methods.palette.color.value(color, 90);
+                }
+              }
+            }
+          }
         }
       }
-    } else if (version === 'text') {
-      if (color === 'themed') {
-        styles.children.color = theme.palette.light ? theme.palette.text.default.primary : theme.palette.text.default.secondary;
-      } else if (color === 'inverted') {
-        styles.children.color = theme.palette.background.default.primary;
-      } else if (color === 'default') {
-        styles.children.color = theme.palette.text.default.primary;
-      } else if (color === 'inherit') {
-        styles.children.color = 'inherit';
-      } else {
-        if (!tonal) {
-          styles.children.color = theme.palette.color[color].main;
-        } else if (tonal === 'secondary') {
-          styles.children.color = theme.methods.palette.color.value(color, 30);
-        } else {
-          styles.children.color = theme.methods.palette.color.value(color, 40);
-        }
-      }
-    } else if (version === 'outlined') {
-      if (color === 'themed') {
-        styles.children.color = theme.palette.text.default.primary;
-        styles.children.backgroundColor = theme.palette.light ? theme.palette.background.default.primary : theme.palette.background.default.quaternary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
-      } else if (color === 'inverted') {
-        styles.children.color = theme.palette.background.default.primary;
-        styles.children.backgroundColor = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 60 : 40]}`;
-      } else if (color === 'default') {
-        styles.children.color = theme.palette.text.default.primary;
-        styles.children.backgroundColor = theme.palette.background.default.primary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
-      } else if (color === 'inherit') {
-        styles.children.color = 'inherit';
-        styles.children.boxShadow = `inset 0px 0px 0px 1px currentColor`;
-      } else {
-        if (!tonal) {
-          styles.children.color = theme.methods.palette.color.text(theme.palette.color.neutral.main, true, 'light');
-          styles.children.backgroundColor = theme.palette.color.neutral.main;
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[10]}`;
-        } else if (tonal === 'secondary') {
-          styles.children.color = theme.methods.palette.color.value(color, 10);
-          styles.children.backgroundColor = theme.methods.palette.color.value(color, 95);
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 10)}`;
+    } else {
+      if (version === "text") {
+        if (color === "themed") {
+          styles.children.color = theme.palette.light ? theme.palette.text.default.primary : theme.palette.text.default.secondary;
         } else {
-          styles.children.color = theme.methods.palette.color.value(color, 5);
-          styles.children.backgroundColor = theme.methods.palette.color.value(color, 99);
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 10)}`;
+          if (color === "inverted") {
+            styles.children.color = theme.palette.background.default.primary;
+          } else {
+            if (color === "default") {
+              styles.children.color = theme.palette.text.default.primary;
+            } else {
+              if (color === "inherit") {
+                styles.children.color = "inherit";
+              } else {
+                if (!tonal) {
+                  styles.children.color = theme.palette.color[color].main;
+                } else {
+                  if (tonal === "secondary") {
+                    styles.children.color = theme.methods.palette.color.value(color, 30);
+                  } else {
+                    styles.children.color = theme.methods.palette.color.value(color, 40);
+                  }
+                }
+              }
+            }
+          }
         }
-      }
-    } else if (version === 'outlined-without-background') {
-      if (color === 'themed') {
-        styles.children.color = theme.palette.light ? theme.palette.text.default.primary : theme.palette.background.default.secondary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.light ? theme.palette.text.default.primary : theme.palette.background.default.secondary}`;
-      } else if (color === 'inverted') {
-        styles.children.color = theme.palette.background.default.primary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.background.default.primary}`;
-      } else if (color === 'default') {
-        styles.children.color = theme.palette.text.default.primary;
-        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
-      } else if (color === 'inherit') {
-        styles.children.color = 'inherit';
-        styles.children.boxShadow = `inset 0px 0px 0px 1px currentColor`;
       } else {
-        if (!tonal) {
-          styles.children.color = theme.palette.text.default.primary;
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.text.default.primary}`;
-        } else if (tonal === 'secondary') {
-          styles.children.color = theme.methods.palette.color.value(color, 30);
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 20)}`;
+        if (version === "outlined") {
+          if (color === "themed") {
+            styles.children.color = theme.palette.text.default.primary;
+            styles.children.backgroundColor = theme.palette.light ? theme.palette.background.default.primary : theme.palette.background.default.quaternary;
+            styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
+          } else {
+            if (color === "inverted") {
+              styles.children.color = theme.palette.background.default.primary;
+              styles.children.backgroundColor = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
+              styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 60 : 40]}`;
+            } else {
+              if (color === "default") {
+                styles.children.color = theme.palette.text.default.primary;
+                styles.children.backgroundColor = theme.palette.background.default.primary;
+                styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
+              } else {
+                if (color === "inherit") {
+                  styles.children.color = "inherit";
+                  styles.children.boxShadow = "inset 0px 0px 0px 1px currentColor";
+                } else {
+                  if (!tonal) {
+                    styles.children.color = theme.methods.palette.color.text(theme.palette.color.neutral.main, true, "light");
+                    styles.children.backgroundColor = theme.palette.color.neutral.main;
+                    styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[10]}`;
+                  } else {
+                    if (tonal === "secondary") {
+                      styles.children.color = theme.methods.palette.color.value(color, 10);
+                      styles.children.backgroundColor = theme.methods.palette.color.value(color, 95);
+                      styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 10)}`;
+                    } else {
+                      styles.children.color = theme.methods.palette.color.value(color, 5);
+                      styles.children.backgroundColor = theme.methods.palette.color.value(color, 99);
+                      styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 10)}`;
+                    }
+                  }
+                }
+              }
+            }
+          }
         } else {
-          styles.children.color = theme.methods.palette.color.value(color, 40);
-          styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 30)}`;
+          if (version === "outlined-without-background") {
+            if (color === "themed") {
+              styles.children.color = theme.palette.light ? theme.palette.text.default.primary : theme.palette.background.default.secondary;
+              styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.light ? theme.palette.text.default.primary : theme.palette.background.default.secondary}`;
+            } else {
+              if (color === "inverted") {
+                styles.children.color = theme.palette.background.default.primary;
+                styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.background.default.primary}`;
+              } else {
+                if (color === "default") {
+                  styles.children.color = theme.palette.text.default.primary;
+                  styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.color.neutral[theme.palette.light ? 40 : 60]}`;
+                } else {
+                  if (color === "inherit") {
+                    styles.children.color = "inherit";
+                    styles.children.boxShadow = "inset 0px 0px 0px 1px currentColor";
+                  } else {
+                    if (!tonal) {
+                      styles.children.color = theme.palette.text.default.primary;
+                      styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.palette.text.default.primary}`;
+                    } else {
+                      if (tonal === "secondary") {
+                        styles.children.color = theme.methods.palette.color.value(color, 30);
+                        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 20)}`;
+                      } else {
+                        styles.children.color = theme.methods.palette.color.value(color, 40);
+                        styles.children.boxShadow = `inset 0px 0px 0px 1px ${theme.methods.palette.color.value(color, 30)}`;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
       }
     }
     palette = theme.palette.color[color];
   }
   if (backgroundOpacity !== undefined) {
-    if (color === 'themed') color = theme.palette.light ? theme.palette.background.default.primary : theme.palette.background.default.quaternary;
-    if (color === 'inverted') color = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
-    if (color === 'default') color = theme.palette.background.default.primary;
-    if (color === 'inherit') color = theme.palette.background.default.primary;
+    if (color === "themed") {
+      color = theme.palette.light ? theme.palette.background.default.primary : theme.palette.background.default.quaternary;
+    }
+    if (color === "inverted") {
+      color = theme.palette.light ? theme.palette.background.dark.primary : theme.palette.background.light.primary;
+    }
+    if (color === "default") {
+      color = theme.palette.background.default.primary;
+    }
+    if (color === "inherit") {
+      color = theme.palette.background.default.primary;
+    }
     palette = theme.methods.color(color);
     if (tonal) {
-      if (version === 'filled') styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === 'secondary' ? 80 : 90, true, palette);
-      if (version === 'outlined') {
-        styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === 'secondary' ? 95 : 99, true, palette);
+      if (version === "filled") {
+        styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === "secondary" ? 80 : 90, true, palette);
+      }
+      if (version === "outlined") {
+        styles.root.backgroundColor = theme.methods.palette.color.value(color, tonal === "secondary" ? 95 : 99, true, palette);
       }
     } else {
-      if (['outlined', 'filled'].includes(version)) styles.root.backgroundColor = theme.methods.palette.color.value(color, 'main', true, palette);
+      if (["outlined", "filled"].includes(version)) {
+        styles.root.backgroundColor = theme.methods.palette.color.value(color, "main", true, palette);
+      }
+    }
+    if (styles.root.backgroundColor) {
+      styles.root.backgroundColor = theme.methods.palette.color.colorToRgb(styles.root.backgroundColor, backgroundOpacity);
     }
-    if (styles.root.backgroundColor) styles.root.backgroundColor = theme.methods.palette.color.colorToRgb(styles.root.backgroundColor, backgroundOpacity);
   }
   if (!palette) {
     let paletteColor = theme.palette.text.default.primary;
-    if (['default', 'inherit'].includes(color)) paletteColor = theme.palette.text.default.primary;
-    if (['themed'].includes(color)) paletteColor = theme.palette.text.default.secondary;
-    if (['inverted'].includes(color)) paletteColor = theme.palette.background.default.primary;
+    if (["default", "inherit"].includes(color)) {
+      paletteColor = theme.palette.text.default.primary;
+    }
+    if (["themed"].includes(color)) {
+      paletteColor = theme.palette.text.default.secondary;
+    }
+    if (["inverted"].includes(color)) {
+      paletteColor = theme.palette.background.default.primary;
+    }
     palette = theme.methods.color(paletteColor);
   }
-  if (is('function', children)) return children(_objectSpread(_objectSpread({}, styles.children), {}, {
-    palette
-  }));
+  if (is("function", children)) {
+    return children(_objectSpread(_objectSpread({}, styles.children), {}, {
+      palette
+    }));
+  }
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref
   }, AdditionalProps, {
-    className: classNames([staticClassName('Surface', theme) && ['onesy-Surface-root'], AdditionalProps?.className, className, classes.root, classes[`version_${version}`], classes[`version_${version}_color_${color}`], classes[`elevation_${elevation}`], tonal && classes[`version_${version}_tonal_${is('string', tonal) ? `${tonal}_` : ''}color_${color}`], noBackground && classes.noBackground, noOutline && classes.noOutline]),
+    className: classNames([staticClassName("Surface", theme) && ["onesy-Surface-root"], AdditionalProps?.className, className, classes.root, classes[`version_${version}`], classes[`version_${version}_color_${color}`], classes[`elevation_${elevation}`], tonal && classes[`version_${version}_tonal_${is("string", tonal) ? `${tonal}_` : ""}color_${color}`], noBackground && classes.noBackground, noOutline && classes.noOutline]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), children && React.Children.toArray(children).filter(Boolean).map((item, index) => {
-    if (is('simple', item)) return item;
-    return /*#__PURE__*/React.cloneElement(item, {
-      key: `${item.key || ''}${index}`
-    });
-  }));
+  }, other), children && React.Children.toArray(children).filter(Boolean).map(_temp));
 });
 Surface.displayName = 'onesy-Surface';
-export default Surface;
+export default Surface;
+function _temp(item, index) {
+  if (is("simple", item)) {
+    return item;
+  }
+  return /*#__PURE__*/React.cloneElement(item, {
+    key: `${item.key || ""}${index}`
+  });
+}