@superdispatch/ui 0.15.0 → 0.16.0-alpha.0

package/dist-src/v5/theme/Color.js

@@ -0,0 +1,77 @@
+export var Color;
+
+(function (Color) {
+  Color["White"] = "#fff";
+  Color["White50"] = "rgba(255, 255, 255, 0.5)";
+  Color["White40"] = "rgba(255, 255, 255, 0.4)";
+  Color["White20"] = "rgba(255, 255, 255, 0.2)";
+  Color["White10"] = "rgba(255, 255, 255, 0.1)";
+  Color["White08"] = "rgba(255, 255, 255, 0.08)";
+  Color["Transparent"] = "rgba(0, 0, 0, 0)";
+  Color["Black"] = "#000";
+  Color["Black50"] = "rgba(0, 0, 0, 0.5)";
+  Color["Black20"] = "rgba(0, 0, 0, 0.2)";
+  Color["Grey100"] = "#8F949E";
+  Color["Grey200"] = "#6A707C";
+  Color["Grey300"] = "#5B6371";
+  Color["Grey400"] = "#323C4E";
+  Color["Grey450"] = "#222F44";
+  Color["Grey500"] = "#192334";
+  Color["Dark100"] = "#8F949E";
+  Color["Dark200"] = "#6A707C";
+  Color["Dark300"] = "#5B6371";
+  Color["Dark400"] = "#323C4E";
+  Color["Dark450"] = "#222F44";
+  Color["Dark500"] = "#192334";
+  Color["Silver100"] = "#F6F7F8";
+  Color["Silver200"] = "#F3F5F8";
+  Color["Silver300"] = "#E8ECF0";
+  Color["Silver400"] = "#E1E5EA";
+  Color["Silver500"] = "#C4CDD5";
+  Color["Blue50"] = "#EBF4FF";
+  Color["Blue75"] = "#CCE5FF";
+  Color["Blue100"] = "#A8D1FF";
+  Color["Blue200"] = "#66ADFF";
+  Color["Blue300"] = "#0075FF";
+  Color["Blue400"] = "#0063DB";
+  Color["Blue500"] = "#0050B2";
+  Color["Green50"] = "#ECF9EF";
+  Color["Green75"] = "#C8F4D1";
+  Color["Green100"] = "#90EAAE";
+  Color["Green200"] = "#5DDA87";
+  Color["Green300"] = "#1FA84D";
+  Color["Green400"] = "#1E8F46";
+  Color["Green500"] = "#19803D";
+  Color["Purple50"] = "#EFEEFC";
+  Color["Purple75"] = "#DCDBF5";
+  Color["Purple100"] = "#CBC8EE";
+  Color["Purple200"] = "#A7A1E8";
+  Color["Purple300"] = "#6559CF";
+  Color["Purple400"] = "#473ABB";
+  Color["Purple500"] = "#3A2F9D";
+  Color["Red50"] = "#FFEDEB";
+  Color["Red75"] = "#FDD9D3";
+  Color["Red100"] = "#FDC2BA";
+  Color["Red200"] = "#FE988B";
+  Color["Red300"] = "#EE3017";
+  Color["Red400"] = "#D9210D";
+  Color["Red500"] = "#C31909";
+  Color["Teal50"] = "#E3F6FC";
+  Color["Teal75"] = "#BEEDF9";
+  Color["Teal100"] = "#91E3F8";
+  Color["Teal200"] = "#61D3EF";
+  Color["Teal300"] = "#00A0CC";
+  Color["Teal400"] = "#008DB8";
+  Color["Teal500"] = "#007DA3";
+  Color["Yellow50"] = "#FFF9E5";
+  Color["Yellow75"] = "#FFF1C2";
+  Color["Yellow100"] = "#FFE494";
+  Color["Yellow200"] = "#FFDC6B";
+  Color["Yellow300"] = "#FFCB47";
+  Color["Yellow400"] = "#FFA91F";
+  Color["Yellow500"] = "#DB7500";
+})(Color || (Color = {}));
+
+export function isColorProp(name) {
+  return typeof name == 'string' && Object.prototype.hasOwnProperty.call(Color, name);
+}

package/dist-src/v5/theme/CssBaselineOverrides.js

@@ -0,0 +1,8 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+export function overrideCssBaseline(theme) {
+  theme.components.MuiCssBaseline = {
+    styleOverrides: {
+      body: _objectSpread({}, theme.typography.body2)
+    }
+  };
+}

package/dist-src/v5/theme/SuperDispatchTheme.js

@@ -0,0 +1,2 @@
+export {};
+export {};

package/dist-src/v5/theme/ThemeProvider.js

@@ -0,0 +1,142 @@
+import { createTheme, CssBaseline, ThemeProvider as MaterialThemeProvider } from '@mui/material';
+import { createGenerateClassName, StylesProvider } from '@mui/styles';
+import { createBreakpoints } from '@mui/system';
+import { useConstant } from '@superdispatch/hooks';
+import { overrideAppBar } from "../app-bar/AppBarOverrides.js";
+import { overrideAutocomplete } from "../autocomplete/AutocompleteOverrides.js";
+import { overrideAvatar } from "../avatar/AvatarOverrides.js";
+import { overrideButton } from "../button/ButtonOverrides.js";
+import { overrideCard } from "../card/CardOverrides.js";
+import { overrideCheckbox } from "../checkbox/CheckboxOverrides.js";
+import { overrideChip } from "../chip/ChipOverrides.js";
+import { overrideDialog } from "../dialog/DialogOverrides.js";
+import { overrideDrawer } from "../drawer/DrawerOverrides.js";
+import { overrideIconButton } from "../icon-button/IconButtonOverrides.js";
+import { overrideLink } from "../link/LinkOverrides.js";
+import { overrideList } from "../list/ListOverrides.js";
+import { overrideMenu } from "../menu/MenuOverrides.js";
+import { overridePagination } from "../pagination/PaginationOverrides.js";
+import { overridePaper } from "../paper/PaperOverrides.js";
+import { overrideRadio } from "../radio/RadioOverrides.js";
+import { ResponsiveContextProvider } from "../responsive/ResponsiveContext.js";
+import { overrideSnackbar } from "../snackbar/SnackbarOverrides.js";
+import { SnackbarStackProvider } from "../snackbar/SnackbarStack.js";
+import { overrideSvgIcon } from "../svg-icon/SvgIconOverrides.js";
+import { overrideSwitch } from "../switch/SwitchOverrides.js";
+import { overrideTabs } from "../tabs/TabsOverrides.js";
+import { overrideTextField } from "../text-field/TextFieldOverrides.js";
+import { overrideToolbar } from "../toolbar/ToolbarOverrides.js";
+import { overrideTooltip } from "../tooltip/TooltipOverrides.js";
+import { createTypographyOptions, overrideTypography } from "../typography/TypographyOverrides.js";
+import { Color } from "./Color.js";
+import { overrideCssBaseline } from "./CssBaselineOverrides.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+function createSuperDispatchTheme() {
+  var breakpoints = createBreakpoints({});
+  var theme = createTheme({
+    breakpoints,
+    palette: {
+      primary: {
+        main: Color.Blue300
+      },
+      error: {
+        main: Color.Red300
+      },
+      action: {
+        hover: Color.Silver100,
+        selected: Color.Silver300,
+        disabled: Color.Silver400
+      },
+      text: {
+        primary: Color.Dark500,
+        secondary: Color.Dark200,
+        // hint: Color.Dark100, todo
+        disabled: Color.Dark100
+      },
+      divider: Color.Silver400
+    },
+    typography: createTypographyOptions(breakpoints),
+    components: {}
+  });
+  overrideCard(theme);
+  overrideButton(theme);
+  overrideAppBar(theme);
+  overridePaper(theme);
+  overrideTooltip(theme);
+  overrideSvgIcon(theme);
+  overrideToolbar(theme);
+  overrideIconButton(theme);
+  overrideTypography(theme);
+  overrideMenu(theme);
+  overrideAvatar(theme);
+  overrideTextField(theme);
+  overrideAutocomplete(theme);
+  overrideCssBaseline(theme);
+  overrideCheckbox(theme);
+  overrideRadio(theme);
+  overrideSwitch(theme);
+  overrideChip(theme);
+  overrideDialog(theme);
+  overrideDrawer(theme);
+  overridePagination(theme);
+  overrideList(theme);
+  overrideLink(theme);
+  overrideSnackbar(theme);
+  overrideTabs(theme);
+  return theme;
+}
+
+var generateMaterialClassName = /*#__PURE__*/createGenerateClassName();
+
+function generateClassName(rule, sheet) {
+  var {
+    meta,
+    link
+  } = (sheet === null || sheet === void 0 ? void 0 : sheet.options) || {};
+
+  if (meta && rule.type === 'style') {
+    if (meta.startsWith('SD-')) {
+      return "".concat(meta, "-").concat(rule.key);
+    }
+
+    if (meta.startsWith('Mui')) {
+      var isPseudoClass = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected'].includes(rule.key);
+
+      if (isPseudoClass) {
+        return "Mui-".concat(rule.key);
+      }
+
+      if (!link) {
+        return "".concat(meta, "-").concat(rule.key);
+      }
+    }
+  }
+
+  return generateMaterialClassName(rule, sheet);
+}
+
+export function ThemeProvider(_ref) {
+  var {
+    modifier,
+    children,
+    injectFirst = true
+  } = _ref;
+  var theme = useConstant(() => {
+    var nextTheme = createSuperDispatchTheme();
+    return !modifier ? nextTheme : modifier(nextTheme);
+  });
+  return /*#__PURE__*/_jsx(StylesProvider, {
+    injectFirst: injectFirst,
+    generateClassName: generateClassName,
+    children: /*#__PURE__*/_jsxs(MaterialThemeProvider, {
+      theme: theme,
+      children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(ResponsiveContextProvider, {
+        children: /*#__PURE__*/_jsx(SnackbarStackProvider, {
+          children: children
+        })
+      })]
+    })
+  });
+}

package/dist-src/v5/tiles/Tiles.js

@@ -0,0 +1,94 @@
+import { makeStyles } from '@mui/styles';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+import { useResponsivePropRecord } from "../props/ResponsiveProp.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+var PREVENT_COLLAPSE = 1;
+
+function spaceVariant(theme, space) {
+  var gap = theme.spacing(space);
+  var parsedGap = parseInt(gap);
+  return {
+    '&:before': {
+      marginTop: -parsedGap - PREVENT_COLLAPSE
+    },
+    '& > $container': {
+      marginLeft: -parsedGap,
+      '& > $child > $childContainer': {
+        marginTop: gap,
+        marginLeft: gap
+      }
+    }
+  };
+}
+
+function columnVariant(columns) {
+  return {
+    flex: "0 0 ".concat(100 / columns, "%")
+  };
+}
+
+var useStyles = /*#__PURE__*/makeStyles(theme => ({
+  root: {
+    paddingTop: PREVENT_COLLAPSE,
+    '&:before': {
+      content: '""',
+      display: 'block',
+      marginTop: -PREVENT_COLLAPSE
+    }
+  },
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap'
+  },
+  child: {
+    minWidth: 0
+  },
+  childContainer: {
+    height: '100%'
+  },
+  space1: spaceVariant(theme, 1),
+  space2: spaceVariant(theme, 2),
+  space3: spaceVariant(theme, 3),
+  space4: spaceVariant(theme, 4),
+  space5: spaceVariant(theme, 5),
+  space6: spaceVariant(theme, 6),
+  space7: spaceVariant(theme, 7),
+  space8: spaceVariant(theme, 8),
+  space9: spaceVariant(theme, 9),
+  space10: spaceVariant(theme, 10),
+  columns1: columnVariant(1),
+  columns2: columnVariant(2),
+  columns3: columnVariant(3),
+  columns4: columnVariant(4),
+  columns5: columnVariant(5),
+  columns6: columnVariant(6)
+}), {
+  name: 'SD-Tiles'
+});
+export var Tiles = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    children,
+    space: spaceProp = 1,
+    columns: columnsProp = 1
+  } = _ref;
+  var styles = useStyles({});
+  var space = useResponsivePropRecord(spaceProp);
+  var columns = useResponsivePropRecord(columnsProp);
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: clsx(styles.root, space === 1 && styles.space1, space === 2 && styles.space2, space === 3 && styles.space3, space === 4 && styles.space4, space === 5 && styles.space5, space === 6 && styles.space6, space === 7 && styles.space7, space === 8 && styles.space8, space === 9 && styles.space9, space === 10 && styles.space10),
+    children: /*#__PURE__*/_jsx("div", {
+      className: styles.container,
+      children: flattenChildren(children).map((child, idx) => /*#__PURE__*/_jsx("div", {
+        className: clsx(styles.child, columns === 1 && styles.columns1, columns === 2 && styles.columns2, columns === 3 && styles.columns3, columns === 4 && styles.columns4, columns === 5 && styles.columns5, columns === 6 && styles.columns6),
+        children: /*#__PURE__*/_jsx("div", {
+          className: styles.childContainer,
+          children: child
+        })
+      }, idx))
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") Tiles.displayName = "Tiles";

package/dist-src/v5/toolbar/ToolbarOverrides.js

@@ -0,0 +1,15 @@
+export function overrideToolbar(theme) {
+  theme.components.MuiToolbar = {
+    styleOverrides: {
+      regular: {
+        minHeight: theme.spacing(8)
+      },
+      gutters: {
+        [theme.breakpoints.up('sm')]: {
+          paddingLeft: theme.spacing(2),
+          paddingRight: theme.spacing(2)
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/tooltip/TooltipOverrides.js

@@ -0,0 +1,42 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { tooltipClasses } from '@mui/material';
+import { Color } from "../theme/Color.js";
+export function overrideTooltip(theme) {
+  theme.components.MuiTooltip = {
+    defaultProps: {
+      arrow: true
+    },
+    styleOverrides: {
+      tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        padding: theme.spacing(1, 1.5),
+        backgroundColor: Color.Dark400
+      }),
+      popperArrow: {
+        ["&[data-popper-placement*=\"top\"] .".concat(tooltipClasses.arrow)]: {
+          '&::before': {
+            borderBottomRightRadius: 2
+          }
+        },
+        ["&[data-popper-placement*=\"left\"] .".concat(tooltipClasses.arrow)]: {
+          '&::before': {
+            borderTopRightRadius: 2
+          }
+        },
+        ["&[data-popper-placement*=\"right\"] .".concat(tooltipClasses.arrow)]: {
+          '&::before': {
+            borderBottomLeftRadius: 2
+          }
+        },
+        ["&[data-popper-placement*=\"bottom\"] .".concat(tooltipClasses.arrow)]: {
+          '&::before': {
+            borderTopLeftRadius: 2
+          }
+        }
+      },
+      arrow: {
+        color: Color.Dark400,
+        fontSize: theme.spacing(1)
+      }
+    }
+  };
+}

package/dist-src/v5/typography/TypographyOverrides.js

@@ -0,0 +1,121 @@
+import '@mui/material';
+
+function createCSSVarName(component, property) {
+  return "--mui-".concat(component, "-").concat(property);
+}
+
+export var typographyVars = {
+  color: /*#__PURE__*/createCSSVarName('typography', 'color'),
+  backgroundImage: /*#__PURE__*/createCSSVarName('typography', 'backgroundImage')
+};
+export function createTypographyOptions(breakpoints) {
+  var xsOnly = breakpoints.only('xs');
+  return {
+    fontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
+    fontFamily: '"Inter", sans-serif',
+    h1: {
+      fontSize: '32px',
+      lineHeight: '40px',
+      fontWeight: 700,
+      [xsOnly]: {
+        fontSize: '28px',
+        lineHeight: '36px'
+      }
+    },
+    h2: {
+      fontSize: '24px',
+      lineHeight: '28px',
+      fontWeight: 500,
+      [xsOnly]: {
+        fontSize: '22px',
+        lineHeight: '26px'
+      }
+    },
+    h3: {
+      fontSize: '20px',
+      lineHeight: '28px',
+      fontWeight: 500,
+      [xsOnly]: {
+        fontSize: '20px',
+        lineHeight: '26px'
+      }
+    },
+    h4: {
+      fontSize: '16px',
+      lineHeight: '24px',
+      fontWeight: 500,
+      [xsOnly]: {
+        fontSize: '17px',
+        lineHeight: '26px'
+      }
+    },
+    h5: {
+      fontSize: '14px',
+      lineHeight: '20px',
+      fontWeight: 600,
+      [xsOnly]: {
+        fontSize: '16px',
+        lineHeight: '24px'
+      }
+    },
+    h6: {
+      fontSize: '12px',
+      lineHeight: '16px',
+      fontWeight: 700,
+      letterSpacing: '0.1em',
+      textTransform: 'uppercase',
+      [xsOnly]: {
+        fontSize: '14px',
+        lineHeight: '20px'
+      }
+    },
+    body1: {
+      fontSize: '14px',
+      lineHeight: '20px',
+      fontWeight: 600,
+      [xsOnly]: {
+        fontSize: '16px',
+        lineHeight: '24px'
+      }
+    },
+    body2: {
+      fontSize: '14px',
+      lineHeight: '20px',
+      fontWeight: 400,
+      [xsOnly]: {
+        fontSize: '16px',
+        lineHeight: '24px'
+      }
+    },
+    caption: {
+      fontSize: '12px',
+      lineHeight: '16px',
+      fontWeight: 400,
+      [xsOnly]: {
+        fontSize: '14px',
+        lineHeight: '20px'
+      }
+    },
+    button: {
+      fontSize: '14px',
+      lineHeight: '20px',
+      fontWeight: 600,
+      textTransform: undefined,
+      [xsOnly]: {
+        fontSize: '16px',
+        lineHeight: '24px'
+      }
+    }
+  };
+}
+export function overrideTypography(theme) {
+  theme.components.MuiTypography = {
+    defaultProps: {
+      variant: 'body2'
+    }
+  };
+}

package/dist-src/v5/utils/VisibilityObserver.js

@@ -0,0 +1,53 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["render", "onChange"];
+import { useValueObserver } from '@superdispatch/hooks';
+import { useLayoutEffect, useState } from 'react';
+import { renderChildren } from "./renderChildren.js";
+export function useVisibilityObserver(node) {
+  var {
+    threshold = 0,
+    marginTop = '0px',
+    marginLeft = '0px',
+    marginRight = '0px',
+    marginBottom = '0px'
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var [state, setState] = useState('undetermined');
+  var rootMargin = "".concat(marginTop, " ").concat(marginRight, " ").concat(marginBottom, " ").concat(marginLeft);
+  useLayoutEffect(() => {
+    if (!node || !('IntersectionObserver' in window)) {
+      setState('undetermined');
+      return;
+    }
+
+    var observer = new IntersectionObserver(_ref => {
+      var [entry] = _ref;
+      setState(entry !== null && entry !== void 0 && entry.isIntersecting ? 'visible' : 'invisible');
+    }, {
+      rootMargin,
+      threshold
+    });
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+    };
+  }, [node, threshold, rootMargin]);
+  return state;
+}
+export function VisibilityObserver(_ref2) {
+  var {
+    render,
+    onChange
+  } = _ref2,
+      options = _objectWithoutProperties(_ref2, _excluded);
+
+  var [node, setNode] = useState(null);
+  var visibility = useVisibilityObserver(node, options);
+  var children = render({
+    ref: setNode,
+    visibility
+  });
+  useValueObserver(visibility, () => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(visibility);
+  });
+  return renderChildren(children);
+}

package/dist-src/v5/utils/isEmptyReactNode.js

@@ -0,0 +1,3 @@
+export function isEmptyReactNode(node) {
+  return node == null || typeof node == 'boolean' || typeof node == 'string' && node.length === 0;
+}

package/dist-src/v5/utils/mergeRefs.js

@@ -0,0 +1,20 @@
+export function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return node => {
+    refs.forEach(ref => {
+      assignRef(ref, node);
+    });
+  };
+}
+export function assignRef(ref, value) {
+  if (ref) {
+    if (typeof ref === 'function') {
+      ref(value);
+    } else {
+      ref.current = value;
+    }
+  }
+}

package/dist-src/v5/utils/renderChildren.js

@@ -0,0 +1,8 @@
+export function renderChildren(node) {
+  if (node == null || typeof node == 'boolean') {
+    return null;
+  } // Workaround for https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
+
+
+  return node;
+}

package/dist-src/v5/utils/useUID.js

@@ -0,0 +1,6 @@
+import { useMemo } from 'react';
+var current = 0;
+export function useUID(defaultID) {
+  var uid = useMemo(() => "uid_".concat(current += 1), []);
+  return defaultID || uid;
+}