@superdispatch/ui 0.22.1 → 0.23.0

package/dist-src/index.js

@@ -25,6 +25,7 @@ export * from "./props/CollapseProp.js";
 export * from "./props/ResponsiveProp.js";
 export * from "./props/SpaceProp.js";
 export * from "./radio/RadioField.js";
+export * from "./radio/RadioFieldCard.js";
 export * from "./radio/RadioGroupField.js";
 export * from "./responsive/CollapseBreakpoint.js";
 export * from "./responsive/MinBreakpoint.js";

package/dist-src/radio/RadioFieldCard.js

@@ -0,0 +1,88 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "value", "label", "caption", "disabled", "icon", "checked", "onChange"];
+import { ButtonBase, Card as MuiCard, FormControlLabel as MuiFormControlLabel, Radio, Typography } from '@material-ui/core';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Column } from "../columns/Column.js";
+import { Columns } from "../columns/Columns.js";
+import { Color } from "../theme/Color.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ClickableCard = /*#__PURE__*/styled(ButtonBase).withConfig({
+  displayName: "RadioFieldCard__ClickableCard",
+  componentId: "SD__sc-5etge2-0"
+})(["display:block;text-align:initial;width:100%;"]);
+var Card = /*#__PURE__*/styled(MuiCard).withConfig({
+  displayName: "RadioFieldCard__Card",
+  componentId: "SD__sc-5etge2-1"
+})(["width:100%;opacity:", ";"], props => props.disabled ? 0.5 : 1);
+var FormControlLabel = /*#__PURE__*/styled(MuiFormControlLabel).withConfig({
+  displayName: "RadioFieldCard__FormControlLabel",
+  componentId: "SD__sc-5etge2-2"
+})(["width:100%;"]);
+var Content = /*#__PURE__*/styled.div.withConfig({
+  displayName: "RadioFieldCard__Content",
+  componentId: "SD__sc-5etge2-3"
+})(["padding:16px;width:100%;border-radius:4px;border:1px solid ", ";"], _ref => {
+  var {
+    active
+  } = _ref;
+  return active ? Color.Blue300 : Color.Silver500;
+});
+var Caption = /*#__PURE__*/styled.div.withConfig({
+  displayName: "RadioFieldCard__Caption",
+  componentId: "SD__sc-5etge2-4"
+})(["padding-left:32px;"]);
+export var RadioFieldCard = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    name,
+    value,
+    label,
+    caption,
+    disabled,
+    icon,
+    checked,
+    onChange
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/_jsx(Card, {
+    disabled: disabled,
+    children: /*#__PURE__*/_jsx(ClickableCard, _objectSpread(_objectSpread({
+      name: name,
+      disabled: disabled
+    }, props), {}, {
+      children: /*#__PURE__*/_jsx(Content, {
+        active: checked,
+        children: /*#__PURE__*/_jsxs(Columns, {
+          space: "small",
+          children: [/*#__PURE__*/_jsxs(Column, {
+            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+              value: value,
+              name: name,
+              control: /*#__PURE__*/_jsx(Radio, {
+                ref: ref,
+                checked: checked
+              }),
+              label: /*#__PURE__*/_jsx(Typography, {
+                variant: "h4",
+                children: label
+              })
+            }), /*#__PURE__*/_jsx(Caption, {
+              children: /*#__PURE__*/_jsx(Typography, {
+                color: "textSecondary",
+                variant: "caption",
+                children: caption
+              })
+            })]
+          }), /*#__PURE__*/_jsx(Column, {
+            width: "content",
+            children: icon
+          })]
+        })
+      })
+    }))
+  }, value);
+});
+if (process.env.NODE_ENV !== "production") RadioFieldCard.displayName = "RadioFieldCard";

package/dist-types/index.d.ts

@@ -263,6 +263,19 @@ interface RadioFieldProps extends Omit<RadioProps, 'onBlur' | 'onChange'>, Pick<
 }
 declare const RadioField: ForwardRefExoticComponent<RadioFieldProps>;
 
+interface RadioCardItemProps {
+    value: string;
+    label: string;
+    name?: string;
+    caption?: string;
+    icon?: React.ReactNode;
+}
+interface RadioCardProps extends Omit<ButtonBaseProps, 'name' | 'value'>, RadioCardItemProps {
+    disabled?: boolean;
+    checked?: boolean;
+}
+declare const RadioFieldCard: ForwardRefExoticComponent<RadioCardProps>;
+
 interface RadioGroupFieldProps extends Omit<FormControlProps, 'hiddenLabel' | 'onChange'>, Pick<RadioGroupProps, 'name' | 'value' | 'onChange'> {
     RadioGroupProps?: Omit<RadioGroupProps, 'value' | 'onChange' | 'children'>;
     label?: ReactNode;
@@ -503,4 +516,4 @@ interface VisibilityObserverProps extends VisibilityObserverOptions {
 }
 declare function VisibilityObserver({ render, onChange, ...options }: VisibilityObserverProps): null | ReactElement;
 
-export { AdaptiveToolbar, AdaptiveToolbarDropdownItem, AdaptiveToolbarItem, AdaptiveToolbarProps, AdaptiveVerticalToolbar, AdaptiveVerticalToolbarItem, AdaptiveVerticalToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, DropdownButton, ElementVisibility, ExitTransitionPlaceholder, GridStack, GridStackProps, HorizontalAlign, InfoCard, InfoCardClassKey, InfoCardProps, InfoTooltip, Inline, InlineGrid, InlineGridProps, InlineProps, MinBreakpoint, NegativeSpaceProp, NumberField, NumberFieldProps, OverflowText, OverflowTextProps, PartialResponsivePropRecord, RadioField, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
+export { AdaptiveToolbar, AdaptiveToolbarDropdownItem, AdaptiveToolbarItem, AdaptiveToolbarProps, AdaptiveVerticalToolbar, AdaptiveVerticalToolbarItem, AdaptiveVerticalToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, DropdownButton, ElementVisibility, ExitTransitionPlaceholder, GridStack, GridStackProps, HorizontalAlign, InfoCard, InfoCardClassKey, InfoCardProps, InfoTooltip, Inline, InlineGrid, InlineGridProps, InlineProps, MinBreakpoint, NegativeSpaceProp, NumberField, NumberFieldProps, OverflowText, OverflowTextProps, PartialResponsivePropRecord, RadioCardItemProps, RadioField, RadioFieldCard, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };

package/dist-web/index.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Button as Button$1, CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, ButtonBase, Avatar, FormControl, FormControlLabel, Checkbox, FormHelperText, FormLabel, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, Card, CardContent, IconButton, TextField, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, Portal, Snackbar as Snackbar$1, Slide, CssBaseline, createTheme, createGenerateClassName } from '@material-ui/core';
+import { Button as Button$1, CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, ButtonBase, Avatar, FormControl, FormControlLabel as FormControlLabel$1, Checkbox, FormHelperText, FormLabel, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, Card as Card$1, CardContent, IconButton, TextField, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, Portal, Snackbar as Snackbar$1, Slide, CssBaseline, createTheme, createGenerateClassName } from '@material-ui/core';
 import { MoreHoriz, Info, Close, Warning, CheckCircle } from '@material-ui/icons';
 import { makeStyles, StylesProvider, ThemeProvider as ThemeProvider$1 } from '@material-ui/styles';
 import { forwardRef, useState, useRef, useLayoutEffect, cloneElement, useMemo, useContext, createContext, Children, useCallback, useEffect } from 'react';
@@ -800,7 +800,7 @@ var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   return /*#__PURE__*/jsxs(FormControl, {
     error: error,
-    children: [/*#__PURE__*/jsx(FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
+    children: [/*#__PURE__*/jsx(FormControlLabel$1, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
       checked: checked,
       onBlur: onBlur,
@@ -1640,7 +1640,7 @@ var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
   var [rootNode, setRootNode] = useState(null);
   var clientRect = rootNode === null || rootNode === void 0 ? void 0 : rootNode.getBoundingClientRect();
   var isFullWidth = (clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) === window.innerWidth;
-  return /*#__PURE__*/jsx(Card, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(Card$1, _objectSpread(_objectSpread({}, props), {}, {
     ref: node => {
       assignRef(_ref2, node);
       setRootNode(node);
@@ -1818,7 +1818,7 @@ var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   return /*#__PURE__*/jsxs(FormControl, {
     error: error,
-    children: [/*#__PURE__*/jsx(FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
+    children: [/*#__PURE__*/jsx(FormControlLabel$1, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
       checked: checked,
       onBlur: onBlur,
@@ -1834,7 +1834,86 @@ var RadioField = /*#__PURE__*/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(ButtonBase).withConfig({
+  displayName: "RadioFieldCard__ClickableCard",
+  componentId: "SD__sc-5etge2-0"
+})(["display:block;text-align:initial;width:100%;"]);
+var Card = /*#__PURE__*/styled(Card$1).withConfig({
+  displayName: "RadioFieldCard__Card",
+  componentId: "SD__sc-5etge2-1"
+})(["width:100%;opacity:", ";"], props => props.disabled ? 0.5 : 1);
+var FormControlLabel = /*#__PURE__*/styled(FormControlLabel$1).withConfig({
+  displayName: "RadioFieldCard__FormControlLabel",
+  componentId: "SD__sc-5etge2-2"
+})(["width:100%;"]);
+var Content = /*#__PURE__*/styled.div.withConfig({
+  displayName: "RadioFieldCard__Content",
+  componentId: "SD__sc-5etge2-3"
+})(["padding:16px;width:100%;border-radius:4px;border:1px solid ", ";"], _ref => {
+  var {
+    active
+  } = _ref;
+  return active ? Color.Blue300 : Color.Silver500;
+});
+var Caption = /*#__PURE__*/styled.div.withConfig({
+  displayName: "RadioFieldCard__Caption",
+  componentId: "SD__sc-5etge2-4"
+})(["padding-left:32px;"]);
+var RadioFieldCard = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    name,
+    value,
+    label,
+    caption,
+    disabled,
+    icon,
+    checked,
+    onChange
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded$k);
+
+  return /*#__PURE__*/jsx(Card, {
+    disabled: disabled,
+    children: /*#__PURE__*/jsx(ClickableCard, _objectSpread(_objectSpread({
+      name: name,
+      disabled: disabled
+    }, props), {}, {
+      children: /*#__PURE__*/jsx(Content, {
+        active: checked,
+        children: /*#__PURE__*/jsxs(Columns, {
+          space: "small",
+          children: [/*#__PURE__*/jsxs(Column, {
+            children: [/*#__PURE__*/jsx(FormControlLabel, {
+              value: value,
+              name: name,
+              control: /*#__PURE__*/jsx(Radio, {
+                ref: ref,
+                checked: checked
+              }),
+              label: /*#__PURE__*/jsx(Typography, {
+                variant: "h4",
+                children: label
+              })
+            }), /*#__PURE__*/jsx(Caption, {
+              children: /*#__PURE__*/jsx(Typography, {
+                color: "textSecondary",
+                variant: "caption",
+                children: caption
+              })
+            })]
+          }), /*#__PURE__*/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__*/forwardRef((_ref, ref) => {
   var {
     name,
@@ -1847,7 +1926,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
     FormHelperTextProps: formHelperTextProps,
     children
   } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$k);
+      formControlProps = _objectWithoutProperties(_ref, _excluded$l);
 
   return /*#__PURE__*/jsxs(FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
@@ -1897,7 +1976,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__*/makeStyles(theme => ({
   root: {
@@ -1942,7 +2021,7 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     classes,
     variant = 'default'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   var _useStyles = useStyles$b({
     classes
@@ -1992,7 +2071,7 @@ var SnackbarContent = /*#__PURE__*/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__*/jsx(Slide, _objectSpread(_objectSpread({}, props), {}, {
@@ -2011,7 +2090,7 @@ var Snackbar = /*#__PURE__*/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') {
@@ -2040,7 +2119,7 @@ var Snackbar = /*#__PURE__*/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
@@ -2086,7 +2165,7 @@ function SnackbarStackProvider(_ref2) {
       id = String(key),
       autoHideDuration = 5000
     } = _ref3,
-        props = _objectWithoutProperties(_ref3, _excluded$n);
+        props = _objectWithoutProperties(_ref3, _excluded$o);
 
     function removeSnackbar() {
       setStack(prev => {
@@ -2183,7 +2262,7 @@ var Stack = /*#__PURE__*/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__*/makeStyles(theme => ({
   root: {
     maxWidth: '100%',
@@ -2267,7 +2346,7 @@ var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontWeight = 'bold',
     component = 'div'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$o);
+      props = _objectWithoutProperties(_ref, _excluded$p);
 
   var styles = useStyles$c({
     classes
@@ -3794,5 +3873,5 @@ function ExitTransitionPlaceholder(_ref) {
   return renderChildren(children);
 }
 
-export { AdaptiveToolbar, AdaptiveVerticalToolbar, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, DropdownButton, ExitTransitionPlaceholder, GridStack, InfoCard, InfoTooltip, Inline, InlineGrid, NumberField, OverflowText, RadioField, RadioGroupField, ResponsiveContextProvider, Snackbar, SnackbarContent, SnackbarStackConsumer, SnackbarStackProvider, Stack, Tag, ThemeProvider, Tiles, VisibilityObserver, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
+export { AdaptiveToolbar, AdaptiveVerticalToolbar, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, DropdownButton, ExitTransitionPlaceholder, GridStack, InfoCard, InfoTooltip, Inline, InlineGrid, NumberField, OverflowText, RadioField, RadioFieldCard, RadioGroupField, ResponsiveContextProvider, Snackbar, SnackbarContent, SnackbarStackConsumer, SnackbarStackProvider, Stack, Tag, ThemeProvider, Tiles, VisibilityObserver, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
 //# sourceMappingURL=index.js.map