@superdispatch/ui 0.13.0 → 0.16.0-alpha.0

package/dist-src/v5/button/ButtonOverrides.js

@@ -0,0 +1,238 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { loadingButtonClasses } from '@mui/lab';
+import { buttonClasses } from '@mui/material';
+import { Color } from "../theme/Color.js";
+
+function outlineShadow() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Color.Transparent;
+  return "0 0 0 ".concat(size, "px ").concat(color);
+}
+
+function textVariant(text, outline, background, progress) {
+  return {
+    '&': {
+      color: text,
+      boxShadow: outlineShadow(),
+      backgroundColor: Color.Transparent
+    },
+    '&:hover': {
+      backgroundColor: background
+    },
+    '&[aria-expanded="true"]': {
+      backgroundColor: background
+    },
+    '&:focus': {
+      backgroundColor: background,
+      boxShadow: outlineShadow(2, outline)
+    },
+    ["&.".concat(buttonClasses.disabled)]: {
+      color: outline,
+      boxShadow: outlineShadow(),
+      backgroundColor: Color.Transparent,
+      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
+        color: progress
+      }
+    }
+  };
+}
+
+function outlinedBorder(borderColor) {
+  var outlineColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Color.Transparent;
+  return "inset 0 0 0 1px ".concat(borderColor, ", 0 0 0 2px ").concat(outlineColor);
+}
+
+function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, activeText, activeBorder, activeOutline, activeBackground, progress, backgroundColor) {
+  return {
+    backgroundColor,
+    color: staleText,
+    border: 0,
+    boxShadow: outlinedBorder(staleBorder),
+    '&:hover': {
+      color: activeText,
+      border: 0,
+      backgroundColor: activeBackground,
+      boxShadow: outlinedBorder(activeBorder)
+    },
+    '&[aria-expanded="true"]': {
+      color: activeText,
+      backgroundColor: activeBackground,
+      boxShadow: outlinedBorder(activeBorder)
+    },
+    '&:focus': {
+      boxShadow: outlinedBorder(activeBorder, activeOutline)
+    },
+    ["&.".concat(buttonClasses.disabled)]: {
+      backgroundColor,
+      color: disabledText,
+      boxShadow: outlinedBorder(disabledBorder),
+      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
+        color: progress
+      }
+    }
+  };
+}
+
+function containedVariant(text, backgroundColor, outline, active, disabledText, disabledBackground) {
+  return {
+    color: text,
+    backgroundColor,
+    boxShadow: outlineShadow(),
+    '&:hover': {
+      backgroundColor: active
+    },
+    '&[aria-expanded="true"]': {
+      backgroundColor: active
+    },
+    '&:focus': {
+      boxShadow: outlineShadow(3, outline)
+    },
+    ["&.".concat(buttonClasses.disabled)]: {
+      color: disabledText,
+      boxShadow: outlineShadow(),
+      backgroundColor: disabledBackground,
+      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
+        color: disabledText
+      }
+    }
+  };
+}
+
+function sizeSmall(theme) {
+  var sm = theme.breakpoints.up('sm');
+  return _objectSpread(_objectSpread({}, theme.typography.button), {}, {
+    padding: theme.spacing(0.5, 3),
+    [sm]: {
+      padding: theme.spacing(0.25, 2)
+    }
+  });
+}
+
+function sizeLarge(theme) {
+  var sm = theme.breakpoints.up('sm');
+  return _objectSpread(_objectSpread({}, theme.typography.button), {}, {
+    fontSize: '18px',
+    lineHeight: '28px',
+    padding: theme.spacing(1.75, 8),
+    [sm]: {
+      fontSize: '16px',
+      lineHeight: '24px',
+      padding: theme.spacing(1, 4)
+    }
+  });
+}
+
+export function overrideButton(theme) {
+  var sm = theme.breakpoints.up('sm');
+  theme.components.MuiLoadingButton = {
+    defaultProps: {
+      variant: 'outlined'
+    },
+    styleOverrides: {
+      loadingIndicator: {
+        color: 'inherit',
+        fontSize: theme.spacing(2),
+        [".".concat(buttonClasses.sizeLarge, " &")]: {
+          fontSize: theme.spacing(3)
+        }
+      }
+    }
+  };
+  theme.components.MuiButton = {
+    defaultProps: {
+      color: 'primary',
+      variant: 'outlined',
+      disableFocusRipple: true
+    },
+    styleOverrides: {
+      root: {
+        minWidth: theme.spacing(6),
+        transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color']),
+        padding: theme.spacing(1.25, 3),
+        [sm]: {
+          padding: theme.spacing(0.75, 2)
+        },
+        '&:hover': {
+          backgroundColor: 'initial',
+          ["&.".concat(buttonClasses.disabled)]: {
+            backgroundColor: 'initial'
+          },
+          '@media (hover: none)': {
+            backgroundColor: 'initial'
+          }
+        },
+        ["&.".concat(buttonClasses.disabled)]: {
+          color: 'initial'
+        },
+        '& > .MuiSvgIcon-root': {
+          fontSize: '24px',
+          [sm]: {
+            fontSize: '20px'
+          },
+          [".".concat(buttonClasses.sizeLarge, "&")]: {
+            fontSize: '28px',
+            [sm]: {
+              fontSize: '24px'
+            }
+          }
+        }
+      },
+      sizeSmall: sizeSmall(theme),
+      sizeLarge: sizeLarge(theme),
+      text: {
+        padding: 'initial',
+        '&[data-color="error"]': textVariant(Color.Red300, Color.Red100, Color.Red50, Color.Red200),
+        '&[data-color="success"]': textVariant(Color.Green300, Color.Green100, Color.Green50, Color.Green200),
+        '&[data-color="white"]': textVariant(Color.White, Color.White50, Color.White10, Color.White50)
+      },
+      textPrimary: textVariant(Color.Blue300, Color.Blue100, Color.Blue50, Color.Blue200),
+      textSizeSmall: sizeSmall(theme),
+      textSizeLarge: sizeLarge(theme),
+      outlined: {
+        border: 'none',
+        padding: 'initial',
+        ["&.".concat(buttonClasses.disabled)]: {
+          border: 'none'
+        },
+        '&[data-color="error"]': outlinedVariant(Color.Red300, Color.Red300, Color.Red100, Color.Red100, Color.Red300, Color.Red300, Color.Red100, Color.Red50, Color.Red300, Color.White),
+        '&[data-color="success"]': outlinedVariant(Color.Green300, Color.Green300, Color.Green100, Color.Green100, Color.Green300, Color.Green300, Color.Green100, Color.Green50, Color.Green300, Color.White),
+        '&[data-color="white"]': outlinedVariant(Color.White, Color.White50, Color.White50, Color.White40, Color.White, Color.White50, Color.White40, Color.White10, Color.White50, Color.Transparent)
+      },
+      outlinedPrimary: outlinedVariant(Color.Dark500, Color.Silver500, Color.Silver500, Color.Silver400, Color.Blue300, Color.Blue300, Color.Blue100, Color.Blue50, Color.Dark200, Color.White),
+      outlinedSizeSmall: sizeSmall(theme),
+      outlinedSizeLarge: sizeLarge(theme),
+      contained: {
+        boxShadow: 'none',
+        backgroundColor: 'initial',
+        '&:hover': {
+          boxShadow: 'none',
+          backgroundColor: 'initial',
+          ["&.".concat(buttonClasses.disabled)]: {
+            backgroundColor: 'none'
+          },
+          '@media (hover: none)': {
+            boxShadow: 'none',
+            backgroundColor: 'none'
+          }
+        },
+        '&:active': {
+          boxShadow: 'none'
+        },
+        ["&.".concat(buttonClasses.focusVisible)]: {
+          boxShadow: 'none'
+        },
+        ["&.".concat(buttonClasses.disabled)]: {
+          color: 'initial',
+          boxShadow: 'none',
+          backgroundColor: 'initial'
+        },
+        '&[data-color="error"]': containedVariant(Color.White, Color.Red300, Color.Red100, Color.Red500, Color.White, Color.Red100),
+        '&[data-color="success"]': containedVariant(Color.White, Color.Green300, Color.Green100, Color.Green500, Color.White, Color.Green100),
+        '&[data-color="white"]': containedVariant(Color.White, Color.White20, Color.White40, Color.White40, Color.White50, Color.White08)
+      },
+      containedPrimary: containedVariant(Color.White, Color.Blue300, Color.Blue100, Color.Blue500, Color.White, Color.Blue100),
+      containedSizeSmall: sizeSmall(theme),
+      containedSizeLarge: sizeLarge(theme)
+    }
+  };
+}

package/dist-src/v5/card/CardOverrides.js

@@ -0,0 +1,16 @@
+export function overrideCard(theme) {
+  theme.components.MuiCard = {
+    defaultProps: {
+      variant: 'outlined'
+    }
+  };
+  theme.components.MuiCardContent = {
+    styleOverrides: {
+      root: {
+        '&:last-child': {
+          paddingBottom: '16px'
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/card-button/CardButton.js

@@ -0,0 +1,135 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
+import { ButtonBase, styled, Typography } from '@mui/material';
+import { forwardRef } from 'react';
+import { Color } from "../theme/Color.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var StyledButton = /*#__PURE__*/styled(ButtonBase)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    backgroundColor: Color.White,
+    border: '1px dashed',
+    borderRadius: theme.spacing(0.5),
+    padding: theme.spacing(1.5),
+    minHeight: theme.spacing(13),
+    transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color']),
+    '&[data-disabled="true"]': {
+      color: Color.Dark200,
+      borderColor: Color.Silver500,
+      backgroundColor: Color.Silver100
+    },
+    '&[data-primary="true"]': {
+      color: Color.Blue300,
+      borderColor: Color.Silver500,
+      '&:focus': {
+        backgroundColor: Color.Blue50
+      },
+      '&:hover, &:active': {
+        borderColor: Color.Blue300,
+        backgroundColor: Color.Blue50
+      }
+    },
+    '&[data-error="true"]': {
+      color: Color.Red300,
+      borderColor: Color.Red300,
+      backgroundColor: Color.Red50,
+      '&:focus': {
+        backgroundColor: Color.Red75
+      }
+    },
+    '&[data-size="small"]': {
+      minHeight: theme.spacing(6)
+    },
+    '&[data-size="large"]': {
+      minHeight: theme.spacing(17.5)
+    }
+  };
+});
+var Label = /*#__PURE__*/styled(Typography)({
+  display: 'flex',
+  alignItems: 'center'
+});
+var Hint = /*#__PURE__*/styled(Typography)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    marginTop: theme.spacing(0.5)
+  };
+});
+var Icon = /*#__PURE__*/styled('span')(_ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return {
+    display: 'flex',
+    '& svg': {
+      fontSize: theme.spacing(3),
+      [theme.breakpoints.up('sm')]: {
+        fontSize: theme.spacing(2.5)
+      }
+    },
+    '&[data-placement="start"]': {
+      marginRight: theme.spacing(1),
+      marginLeft: theme.spacing(-0.5)
+    },
+    '&[data-placement="end"]': {
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(-0.5)
+    }
+  };
+});
+export var CardButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  var {
+    hint,
+    size,
+    error,
+    classes,
+    className,
+    children,
+    endIcon,
+    startIcon,
+    disabled
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded);
+
+  return /*#__PURE__*/_jsx(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    disabled: disabled,
+    "data-size": size,
+    "data-disabled": !!disabled,
+    "data-error": !disabled && !!error,
+    "data-primary": !disabled && !error,
+    children: error ? /*#__PURE__*/_jsx(Label, {
+      variant: "h4",
+      color: "inherit",
+      children: error
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Label, {
+        variant: "h4",
+        color: "inherit",
+        children: [!!startIcon && /*#__PURE__*/_jsx(Icon, {
+          "data-placement": "start",
+          children: startIcon
+        }), children, !!endIcon && /*#__PURE__*/_jsx(Icon, {
+          "data-placement": "end",
+          children: endIcon
+        })]
+      }), !!hint && /*#__PURE__*/_jsx(Hint, {
+        color: "textSecondary",
+        children: hint
+      })]
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") CardButton.displayName = "CardButton";

package/dist-src/v5/checkbox/CheckboxField.js

@@ -0,0 +1,37 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+import { Checkbox, FormControl, FormControlLabel, FormHelperText } from '@mui/material';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    label,
+    error,
+    checked,
+    onBlur,
+    onChange,
+    helperText,
+    FormControlLabelProps: formControlLabelProps
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsxs(FormControl, {
+    error: error,
+    children: [/*#__PURE__*/_jsx(FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
+      label: label,
+      checked: checked,
+      onBlur: onBlur,
+      onChange: onChange,
+      control: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
+        ref: ref,
+        color: "primary",
+        disableRipple: true
+      }, props))
+    })), helperText && /*#__PURE__*/_jsx(FormHelperText, {
+      children: helperText
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") CheckboxField.displayName = "CheckboxField";

package/dist-src/v5/checkbox/CheckboxGroudField.js

@@ -0,0 +1,32 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+import { FormControl, FormGroup, FormHelperText, FormLabel } from '@mui/material';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    FormGroupProps: formGroupProps,
+    label,
+    FormLabelProps: formLabelProps,
+    helperText,
+    FormHelperTextProps: formHelperTextProps,
+    children
+  } = _ref,
+      formControlProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsxs(FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
+    hiddenLabel: !label,
+    children: [!!label && /*#__PURE__*/_jsx(FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
+      children: label
+    })), /*#__PURE__*/_jsx(FormGroup, _objectSpread(_objectSpread({
+      ref: ref
+    }, formGroupProps), {}, {
+      children: children
+    })), !!helperText && /*#__PURE__*/_jsx(FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
+      children: helperText
+    }))]
+  }));
+});
+if (process.env.NODE_ENV !== "production") CheckboxGroupField.displayName = "CheckboxGroupField";

package/dist-src/v5/checkbox/CheckboxOverrides.js

@@ -0,0 +1,71 @@
+import { checkboxClasses, SvgIcon } from '@mui/material';
+import { Color } from "../theme/Color.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function overrideCheckbox(theme) {
+  theme.components.MuiCheckbox = {
+    defaultProps: {
+      color: 'primary',
+      icon: /*#__PURE__*/_jsx(SvgIcon, {
+        children: /*#__PURE__*/_jsx("rect", {
+          width: "17",
+          height: "17",
+          x: "3.5",
+          y: "3.5",
+          fill: Color.White,
+          stroke: "currentColor",
+          rx: "1.5"
+        })
+      }),
+      checkedIcon: /*#__PURE__*/_jsxs(SvgIcon, {
+        children: [/*#__PURE__*/_jsx("rect", {
+          width: "18",
+          height: "18",
+          x: "3",
+          y: "3",
+          fill: "currentColor",
+          rx: "2"
+        }), /*#__PURE__*/_jsx("path", {
+          fill: Color.White,
+          d: "M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
+        })]
+      }),
+      indeterminateIcon: /*#__PURE__*/_jsxs(SvgIcon, {
+        children: [/*#__PURE__*/_jsx("rect", {
+          width: "18",
+          height: "18",
+          x: "3",
+          y: "3",
+          fill: "currentIcon",
+          rx: "2"
+        }), /*#__PURE__*/_jsx("path", {
+          fill: Color.White,
+          d: "M7 11h10v2H7v-2z"
+        })]
+      })
+    },
+    styleOverrides: {
+      root: {
+        color: Color.Dark100,
+        marginTop: theme.spacing(-0.625),
+        marginBottom: theme.spacing(-0.625)
+      },
+      indeterminate: {
+        ["&:not(.".concat(checkboxClasses.checked, ")")]: {
+          color: Color.Dark100
+        },
+        ["&.".concat(checkboxClasses.disabled)]: {
+          color: Color.Silver400
+        }
+      },
+      colorPrimary: {
+        ["&.".concat(checkboxClasses.checked, ".").concat(checkboxClasses.disabled)]: {
+          color: Color.Silver500
+        },
+        ["&:hover:not(.".concat(checkboxClasses.checked, ")")]: {
+          color: Color.Dark100
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/chip/ChipOverrides.js

@@ -0,0 +1,106 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { chipClasses, SvgIcon } from '@mui/material';
+import { Color } from "../theme/Color.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function overrideChip(theme) {
+  var sm = theme.breakpoints.up('sm');
+  theme.components.MuiChip = {
+    defaultProps: {
+      size: 'small',
+      deleteIcon: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(SvgIcon, {
+          children: /*#__PURE__*/_jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M13.239 12L17 8.239 15.761 7 12 10.761 8.239 7 7 8.239 10.761 12 7 15.761 8.239 17 12 13.239 15.761 17 17 15.761 13.239 12z",
+            fill: "currentColor"
+          })
+        })
+      })
+    },
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        color: 'unset',
+        height: 'unset',
+        borderRadius: 4,
+        backgroundColor: Color.Silver200,
+        ["&.".concat(chipClasses.disabled)]: {
+          opacity: 1,
+          color: Color.Dark100
+        }
+      }),
+      sizeSmall: {
+        height: 'unset'
+      },
+      labelSmall: {
+        paddingLeft: 6,
+        paddingRight: 6,
+        [sm]: {
+          paddingLeft: 4,
+          paddingRight: 4
+        }
+      },
+      clickable: {
+        '&:hover, &:focus': {
+          backgroundColor: Color.Silver200
+        },
+        '&:active': {
+          boxShadow: 'unset'
+        },
+        '&:focus': {
+          boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+        },
+        '&:active, &:hover': {
+          backgroundColor: Color.Silver300
+        }
+      },
+      deletable: {
+        '&:focus': {
+          backgroundColor: Color.Silver200,
+          boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+        }
+      },
+      deleteIcon: {
+        width: 'unset',
+        height: 'unset',
+        display: 'flex',
+        fontSize: 14,
+        transition: theme.transitions.create('background-color'),
+        '&:active, &:hover, &:focus': {
+          '& > svg': {
+            backgroundColor: Color.Silver400
+          }
+        },
+        '& > svg': {
+          borderRadius: '50%',
+          color: Color.Dark200,
+          fontSize: '1em'
+        }
+      },
+      deleteIconSmall: {
+        width: 'unset',
+        height: 'unset',
+        padding: theme.spacing(0.5),
+        marginLeft: theme.spacing(-0.5),
+        marginRight: theme.spacing(0.25),
+        [sm]: {
+          marginRight: 0
+        }
+      },
+      icon: {
+        color: Color.Dark100,
+        fontSize: '1em',
+        marginRight: 'unset'
+      },
+      iconSmall: {
+        width: 'unset',
+        height: 'unset',
+        marginLeft: 8,
+        marginRight: 'unset',
+        [sm]: {
+          marginLeft: 4
+        }
+      }
+    }
+  };
+}