@superdispatch/ui 0.22.1 → 0.22.2

package/dist-node/index.js

@@ -18,6 +18,7 @@ var hooks = require('@superdispatch/hooks');
 var clsx = _interopDefault(require('clsx'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
 var NumberFormat = _interopDefault(require('react-number-format'));
+var uiLab = require('@superdispatch/ui-lab');
 var createBreakpoints = _interopDefault(require('@material-ui/core/styles/createBreakpoints'));
 
 var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
@@ -1839,7 +1840,78 @@ var RadioField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") RadioField.displayName = "RadioField";
 
-var _excluded$k = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var _excluded$k = ["name", "value", "label", "caption", "disabled", "icon", "checked", "onChange"];
+var ClickableCard = /*#__PURE__*/styled__default(core.ButtonBase).withConfig({
+  displayName: "RadioFieldCard__ClickableCard",
+  componentId: "SD__sc-5etge2-0"
+})(["display:block;text-align:initial;width:100%;"]);
+var Card = /*#__PURE__*/styled__default(core.Card).withConfig({
+  displayName: "RadioFieldCard__Card",
+  componentId: "SD__sc-5etge2-1"
+})(["width:100%;opacity:", ";"], props => props.disabled ? 0.5 : 1);
+var FormControlLabel = /*#__PURE__*/styled__default(core.FormControlLabel).withConfig({
+  displayName: "RadioFieldCard__FormControlLabel",
+  componentId: "SD__sc-5etge2-2"
+})(["width:100%;"]);
+var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  var {
+    name,
+    value,
+    label,
+    caption,
+    disabled,
+    icon,
+    checked,
+    onChange
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$k);
+
+  return /*#__PURE__*/jsxRuntime.jsx(Card, {
+    disabled: disabled,
+    children: /*#__PURE__*/jsxRuntime.jsx(ClickableCard, _objectSpread(_objectSpread({
+      name: name,
+      disabled: disabled
+    }, props), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsx(uiLab.Box, {
+        borderRadius: "small",
+        borderWidth: "small",
+        padding: ['small'],
+        width: "100%",
+        borderColor: checked ? 'Blue300' : 'Silver500',
+        children: /*#__PURE__*/jsxRuntime.jsxs(Columns, {
+          space: "small",
+          children: [/*#__PURE__*/jsxRuntime.jsxs(Column, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(FormControlLabel, {
+              value: value,
+              name: name,
+              control: /*#__PURE__*/jsxRuntime.jsx(core.Radio, {
+                ref: ref,
+                checked: checked
+              }),
+              label: /*#__PURE__*/jsxRuntime.jsx(uiLab.TextBox, {
+                variant: "heading-4",
+                children: label
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(uiLab.Box, {
+              paddingLeft: "large",
+              children: /*#__PURE__*/jsxRuntime.jsx(uiLab.TextBox, {
+                color: "secondary",
+                variant: "caption",
+                children: caption
+              })
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx(Column, {
+            width: "content",
+            children: icon
+          })]
+        })
+      })
+    }))
+  }, value);
+});
+if (process.env.NODE_ENV !== "production") RadioFieldCard.displayName = "RadioFieldCard";
+
+var _excluded$l = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
 var RadioGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     name,
@@ -1852,7 +1924,7 @@ var RadioGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     FormHelperTextProps: formHelperTextProps,
     children
   } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$k);
+      formControlProps = _objectWithoutProperties(_ref, _excluded$l);
 
   return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
@@ -1902,7 +1974,7 @@ function useMinBreakpoint(minBreakpoint) {
   return minBreakpointIDX < breakpointIDX;
 }
 
-var _excluded$l = ["action", "children", "onClose", "className", "classes", "variant"],
+var _excluded$m = ["action", "children", "onClose", "className", "classes", "variant"],
     _excluded2$4 = ["icon", "closeButton", "variantError", "variantSuccess"];
 var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
@@ -1947,7 +2019,7 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     classes,
     variant = 'default'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   var _useStyles = useStyles$b({
     classes
@@ -1997,7 +2069,7 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SnackbarContent.displayName = "SnackbarContent";
 
-var _excluded$m = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
+var _excluded$n = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
 
 function SlideTransition(props) {
   return /*#__PURE__*/jsxRuntime.jsx(core.Slide, _objectSpread(_objectSpread({}, props), {}, {
@@ -2016,7 +2088,7 @@ var Snackbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hasCloseButton = onClose != null,
     TransitionComponent = SlideTransition
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$n);
 
   function handleClose(reason) {
     if (reason !== 'clickaway') {
@@ -2045,7 +2117,7 @@ var Snackbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Snackbar.displayName = "Snackbar";
 
-var _excluded$n = ["onClose", "variant", "key", "id", "autoHideDuration"];
+var _excluded$o = ["onClose", "variant", "key", "id", "autoHideDuration"];
 
 function warnContext() {
   // eslint-disable-next-line no-console
@@ -2091,7 +2163,7 @@ function SnackbarStackProvider(_ref2) {
       id = String(key),
       autoHideDuration = 5000
     } = _ref3,
-        props = _objectWithoutProperties(_ref3, _excluded$n);
+        props = _objectWithoutProperties(_ref3, _excluded$o);
 
     function removeSnackbar() {
       setStack(prev => {
@@ -2188,7 +2260,7 @@ var Stack = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Stack.displayName = "Stack";
 
-var _excluded$o = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
+var _excluded$p = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
 var useStyles$c = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     maxWidth: '100%',
@@ -2272,7 +2344,7 @@ var Tag = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     fontWeight = 'bold',
     component = 'div'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$o);
+      props = _objectWithoutProperties(_ref, _excluded$p);
 
   var styles = useStyles$c({
     classes
@@ -3824,6 +3896,7 @@ exports.InlineGrid = InlineGrid;
 exports.NumberField = NumberField;
 exports.OverflowText = OverflowText;
 exports.RadioField = RadioField;
+exports.RadioFieldCard = RadioFieldCard;
 exports.RadioGroupField = RadioGroupField;
 exports.ResponsiveContextProvider = ResponsiveContextProvider;
 exports.Snackbar = Snackbar;