@os-design/core 1.0.129 → 1.0.130

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Button/index.tsx"],"names":["hoverStyles","p","disabled","css","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","m","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","resetButtonStyles","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","sizeStyles","Button","ref","type","danger","left","right","loading","size","children","onMouseDown","rest","buttonColors","loadingColors","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n resetButtonStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n /**\n * Type of button styles.\n * @default primary\n */\n type?: 'primary' | 'outline' | 'ghost';\n /**\n * Sets the danger styles.\n * @default false\n */\n danger?: boolean;\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Whether the button has full width.\n * Possible values:\n * `default` – the button has full width if the screen width is less than xs;\n * `always` – the button always has full width;\n * `never` – the button never has full width (for example, it can be used in the header).\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Shows the loading status and disables the button.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the button is disabled.\n * @default false\n */\n disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n btnType: ButtonProps['type'];\n colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.colors.bgHover)};\n }\n }\n `;\n\nconst primaryStyles = (p) =>\n p.btnType === 'primary' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: ${clr(p.colors.bg)};\n ${hoverStyles(p)};\n `;\n\nconst ghostStyles = (p) =>\n p.btnType === 'ghost' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n ${hoverStyles(p)};\n `;\n\nconst outlineStyles = (p) =>\n p.btnType === 'outline' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n border: 1px solid currentColor;\n ${hoverStyles(p)};\n `;\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\nexport const StyledButton = styled(\n 'button',\n omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n ${resetButtonStyles};\n position: relative; // Because LoadingContainer has an absolute position\n cursor: pointer;\n user-select: none;\n box-sizing: border-box; // Important for LinkButton\n\n // Disable multiline\n white-space: nowrap;\n overflow: hidden;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n height: ${(p) => p.theme.buttonHeight}em;\n padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n // Do not set inline-flex, otherwise the mobile safari cuts off\n // the bottom border of the button (tested in iPhone 6)\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-weight: 500;\n line-height: 1;\n\n ${primaryStyles};\n ${outlineStyles};\n ${ghostStyles};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n children,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n return (\n <StyledButton\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/Button/index.tsx"],"names":["hoverStyles","p","disabled","css","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","m","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","resetButtonStyles","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","sizeStyles","Button","ref","type","danger","left","right","loading","size","children","onMouseDown","rest","buttonColors","loadingColors","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n resetButtonStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n /**\n * Type of button styles.\n * @default primary\n */\n type?: 'primary' | 'outline' | 'ghost';\n /**\n * Sets the danger styles.\n * @default false\n */\n danger?: boolean;\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Whether the button has full width.\n * Possible values:\n * `default` – the button has full width if the screen width is less than xs;\n * `always` – the button always has full width;\n * `never` – the button never has full width.\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Shows the loading status and disables the button.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the button is disabled.\n * @default false\n */\n disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n btnType: ButtonProps['type'];\n colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.colors.bgHover)};\n }\n }\n `;\n\nconst primaryStyles = (p) =>\n p.btnType === 'primary' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: ${clr(p.colors.bg)};\n ${hoverStyles(p)};\n `;\n\nconst ghostStyles = (p) =>\n p.btnType === 'ghost' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n ${hoverStyles(p)};\n `;\n\nconst outlineStyles = (p) =>\n p.btnType === 'outline' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n border: 1px solid currentColor;\n ${hoverStyles(p)};\n `;\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\nexport const StyledButton = styled(\n 'button',\n omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n ${resetButtonStyles};\n position: relative; // Because LoadingContainer has an absolute position\n cursor: pointer;\n user-select: none;\n box-sizing: border-box; // Important for LinkButton\n\n // Disable multiline\n white-space: nowrap;\n overflow: hidden;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n height: ${(p) => p.theme.buttonHeight}em;\n padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n // Do not set inline-flex, otherwise the mobile safari cuts off\n // the bottom border of the button (tested in iPhone 6)\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-weight: 500;\n line-height: 1;\n\n ${primaryStyles};\n ${outlineStyles};\n ${ghostStyles};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n children,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n return (\n <StyledButton\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"file":"index.js"}
@@ -19,12 +19,14 @@ var _media = require("@os-design/media");
19
19
 
20
20
  var _theming = require("@os-design/theming");
21
21
 
22
+ var _react2 = require("@emotion/react");
23
+
22
24
  var _Button = _interopRequireDefault(require("../Button"));
23
25
 
24
- var _excluded = ["options", "disabled", "value", "defaultValue", "onChange", "size"],
26
+ var _excluded = ["options", "wide", "disabled", "value", "defaultValue", "onChange", "size"],
25
27
  _excluded2 = ["title", "value", "disabled", "onClick"];
26
28
 
27
- var _templateObject, _templateObject2;
29
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
28
30
 
29
31
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
30
32
 
@@ -52,12 +54,20 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
52
54
 
53
55
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
54
56
 
55
- var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('disabled', 'size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline-flex;\n flex-wrap: wrap;\n\n border-radius: ", "em;\n overflow: hidden;\n border: 1px solid\n ", ";\n\n ", " {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ", ";\n"])), function (p) {
57
+ var wideDefaultStyles = function wideDefaultStyles(p) {
58
+ return p.wide === 'default' && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", " {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n "])), _media.m.max.xxs);
59
+ };
60
+
61
+ var wideAlwaysStyles = function wideAlwaysStyles(p) {
62
+ return p.wide === 'always' && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n & > button {\n flex: 1;\n }\n "])));
63
+ };
64
+
65
+ var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('wide', 'disabled', 'size'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-flex;\n flex-wrap: wrap;\n\n border-radius: ", "em;\n overflow: hidden;\n border: 1px solid\n ", ";\n\n ", ";\n ", ";\n ", ";\n"])), function (p) {
56
66
  return p.theme.borderRadius;
57
67
  }, function (p) {
58
68
  return p.disabled ? (0, _theming.clr)(p.theme.buttonDisabledGhostColorText) : (0, _theming.clr)(p.theme.colorPrimary);
59
- }, _media.m.max.xxs, _styles.sizeStyles);
60
- var StyledButton = (0, _styled["default"])(_Button["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-radius: 0;\n"])));
69
+ }, wideDefaultStyles, wideAlwaysStyles, _styles.sizeStyles);
70
+ var StyledButton = (0, _styled["default"])(_Button["default"])(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-radius: 0;\n"])));
61
71
  /**
62
72
  * The radio buttons that allow a user to select only one of a limited number of options.
63
73
  */
@@ -65,6 +75,8 @@ var StyledButton = (0, _styled["default"])(_Button["default"])(_templateObject2
65
75
  var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
66
76
  var _ref$options = _ref.options,
67
77
  options = _ref$options === void 0 ? [] : _ref$options,
78
+ _ref$wide = _ref.wide,
79
+ wide = _ref$wide === void 0 ? 'default' : _ref$wide,
68
80
  _ref$disabled = _ref.disabled,
69
81
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
70
82
  value = _ref.value,
@@ -84,6 +96,7 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
84
96
  setForwardedValue = _useForwardedState2[1];
85
97
 
86
98
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Container, _extends({
99
+ wide: wide,
87
100
  disabled: disabled,
88
101
  size: size
89
102
  }, rest, {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["Container","p","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","m","max","xxs","sizeStyles","StyledButton","Button","RadioGroup","ref","options","value","defaultValue","onChange","size","rest","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAMA,SAAS,GAAG,wBAChB,KADgB,EAEhB,6BAAiB,UAAjB,EAA6B,MAA7B,CAFgB,CAAH,6RAOI,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,YAAf;AAAA,CAPJ,EAUT,UAACF,CAAD;AAAA,SACAA,CAAC,CAACG,QAAF,GACI,kBAAIH,CAAC,CAACC,KAAF,CAAQG,4BAAZ,CADJ,GAEI,kBAAIJ,CAAC,CAACC,KAAF,CAAQI,YAAZ,CAHJ;AAAA,CAVS,EAeXC,SAAEC,GAAF,CAAMC,GAfK,EAsBXC,kBAtBW,CAAf;AAyBA,IAAMC,YAAY,GAAG,wBAAOC,kBAAP,CAAH,8FAAlB;AAIA;AACA;AACA;;AACA,IAAMC,UAAU,gBAAG,uBACjB,gBAUEC,GAVF,EAWK;AAAA,0BATDC,OASC;AAAA,MATDA,OASC,6BATS,EAST;AAAA,2BARDX,QAQC;AAAA,MARDA,QAQC,8BARU,KAQV;AAAA,MAPDY,KAOC,QAPDA,KAOC;AAAA,MANDC,YAMC,QANDA,YAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,YAAM,CAAE,CAKlB;AAAA,MAJDC,IAIC,QAJDA,IAIC;AAAA,MAHEC,IAGF;;AACH,2BAA4C,8BAAkB;AAC5DJ,IAAAA,KAAK,EAALA,KAD4D;AAE5DC,IAAAA,YAAY,EAAZA,YAF4D;AAG5DC,IAAAA,QAAQ,EAARA;AAH4D,GAAlB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AAMA,sBACE,0DACE,gCAAC,SAAD;AAAW,IAAA,QAAQ,EAAElB,QAArB;AAA+B,IAAA,IAAI,EAAEe;AAArC,KAA+CC,IAA/C;AAAqD,IAAA,GAAG,EAAEN;AAA1D,MACGC,OADH,aACGA,OADH,uBACGA,OAAO,CAAEQ,GAAT,CACC;AAAA,QACEC,KADF,SACEA,KADF;AAAA,QAESC,WAFT,SAEET,KAFF;AAAA,QAGYU,cAHZ,SAGEtB,QAHF;AAAA,8BAIEuB,OAJF;AAAA,QAIEA,QAJF,8BAIY,YAAM,CAAE,CAJpB;AAAA,QAKKC,UALL;;AAAA,wBAOE,gCAAC,YAAD;AACE,MAAA,GAAG,EAAEH,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAErB,QAAQ,IAAIsB,cAJxB;AAKE,MAAA,OAAO,EAAE,iBAACG,CAAD,EAAO;AACdP,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;;AACAE,QAAAA,QAAO,CAACE,CAAD,CAAP;AACD;AARH,OASMD,UATN,GAWGJ,KAXH,CAPF;AAAA,GADD,CADH,CADF,CADF;AA6BD,CAhDgB,CAAnB;AAmDAX,UAAU,CAACiB,WAAX,GAAyB,YAAzB;eAEejB,U","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n /**\n * The title of the option.\n */\n title: string;\n /**\n * The value of the option.\n */\n value: string;\n}\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n /**\n * Options of the radio group.\n * @default undefined\n */\n options?: RadioGroupOption[];\n /**\n * Whether the radio group is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Selected option.\n * @default false\n */\n value?: string;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string) => void;\n}\n\ninterface ContainerProps extends WithSize {\n disabled: boolean;\n}\nconst Container = styled(\n 'div',\n omitEmotionProps('disabled', 'size')\n)<ContainerProps>`\n display: inline-flex;\n flex-wrap: wrap;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n overflow: hidden;\n border: 1px solid\n ${(p) =>\n p.disabled\n ? clr(p.theme.buttonDisabledGhostColorText)\n : clr(p.theme.colorPrimary)};\n\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ${sizeStyles};\n`;\n\nconst StyledButton = styled(Button)`\n border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n options = [],\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <div>\n <Container disabled={disabled} size={size} {...rest} ref={ref}>\n {options?.map(\n ({\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n }) => (\n <StyledButton\n key={valueOption}\n type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n wide='never'\n disabled={disabled || disabledOption}\n onClick={(e) => {\n setForwardedValue(valueOption);\n onClick(e);\n }}\n {...buttonRest}\n >\n {title}\n </StyledButton>\n )\n )}\n </Container>\n </div>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["wideDefaultStyles","p","wide","css","m","max","xxs","wideAlwaysStyles","Container","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","sizeStyles","StyledButton","Button","RadioGroup","ref","options","value","defaultValue","onChange","size","rest","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n /**\n * The title of the option.\n */\n title: string;\n /**\n * The value of the option.\n */\n value: string;\n}\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n /**\n * Options of the radio group.\n * @default undefined\n */\n options?: RadioGroupOption[];\n /**\n * Whether the radio group has full width.\n * Possible values:\n * `default` – the radio group has full width if the screen width is less than xs;\n * `always` – the radio group always has full width;\n * `never` – the radio group never has full width.\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Whether the radio group is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Selected option.\n * @default false\n */\n value?: string;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string) => void;\n}\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n & > button {\n flex: 1;\n }\n `;\n\ntype ContainerProps = Required<Pick<RadioGroupProps, 'wide' | 'disabled'>> &\n WithSize;\nconst Container = styled(\n 'div',\n omitEmotionProps('wide', 'disabled', 'size')\n)<ContainerProps>`\n display: inline-flex;\n flex-wrap: wrap;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n overflow: hidden;\n border: 1px solid\n ${(p) =>\n p.disabled\n ? clr(p.theme.buttonDisabledGhostColorText)\n : clr(p.theme.colorPrimary)};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n ${sizeStyles};\n`;\n\nconst StyledButton = styled(Button)`\n border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n options = [],\n wide = 'default',\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <div>\n <Container\n wide={wide}\n disabled={disabled}\n size={size}\n {...rest}\n ref={ref}\n >\n {options?.map(\n ({\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n }) => (\n <StyledButton\n key={valueOption}\n type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n wide='never'\n disabled={disabled || disabledOption}\n onClick={(e) => {\n setForwardedValue(valueOption);\n onClick(e);\n }}\n {...buttonRest}\n >\n {title}\n </StyledButton>\n )\n )}\n </Container>\n </div>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Button/index.tsx"],"names":["React","forwardRef","styled","resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","css","m","useButtonColors","ButtonContent","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n resetButtonStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n /**\n * Type of button styles.\n * @default primary\n */\n type?: 'primary' | 'outline' | 'ghost';\n /**\n * Sets the danger styles.\n * @default false\n */\n danger?: boolean;\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Whether the button has full width.\n * Possible values:\n * `default` – the button has full width if the screen width is less than xs;\n * `always` – the button always has full width;\n * `never` – the button never has full width (for example, it can be used in the header).\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Shows the loading status and disables the button.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the button is disabled.\n * @default false\n */\n disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n btnType: ButtonProps['type'];\n colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.colors.bgHover)};\n }\n }\n `;\n\nconst primaryStyles = (p) =>\n p.btnType === 'primary' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: ${clr(p.colors.bg)};\n ${hoverStyles(p)};\n `;\n\nconst ghostStyles = (p) =>\n p.btnType === 'ghost' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n ${hoverStyles(p)};\n `;\n\nconst outlineStyles = (p) =>\n p.btnType === 'outline' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n border: 1px solid currentColor;\n ${hoverStyles(p)};\n `;\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\nexport const StyledButton = styled(\n 'button',\n omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n ${resetButtonStyles};\n position: relative; // Because LoadingContainer has an absolute position\n cursor: pointer;\n user-select: none;\n box-sizing: border-box; // Important for LinkButton\n\n // Disable multiline\n white-space: nowrap;\n overflow: hidden;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n height: ${(p) => p.theme.buttonHeight}em;\n padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n // Do not set inline-flex, otherwise the mobile safari cuts off\n // the bottom border of the button (tested in iPhone 6)\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-weight: 500;\n line-height: 1;\n\n ${primaryStyles};\n ${outlineStyles};\n ${ghostStyles};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n children,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n return (\n <StyledButton\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/Button/index.tsx"],"names":["React","forwardRef","styled","resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","css","m","useButtonColors","ButtonContent","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n resetButtonStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n /**\n * Type of button styles.\n * @default primary\n */\n type?: 'primary' | 'outline' | 'ghost';\n /**\n * Sets the danger styles.\n * @default false\n */\n danger?: boolean;\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Whether the button has full width.\n * Possible values:\n * `default` – the button has full width if the screen width is less than xs;\n * `always` – the button always has full width;\n * `never` – the button never has full width.\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Shows the loading status and disables the button.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the button is disabled.\n * @default false\n */\n disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n btnType: ButtonProps['type'];\n colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.colors.bgHover)};\n }\n }\n `;\n\nconst primaryStyles = (p) =>\n p.btnType === 'primary' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: ${clr(p.colors.bg)};\n ${hoverStyles(p)};\n `;\n\nconst ghostStyles = (p) =>\n p.btnType === 'ghost' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n ${hoverStyles(p)};\n `;\n\nconst outlineStyles = (p) =>\n p.btnType === 'outline' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n border: 1px solid currentColor;\n ${hoverStyles(p)};\n `;\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\nexport const StyledButton = styled(\n 'button',\n omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n ${resetButtonStyles};\n position: relative; // Because LoadingContainer has an absolute position\n cursor: pointer;\n user-select: none;\n box-sizing: border-box; // Important for LinkButton\n\n // Disable multiline\n white-space: nowrap;\n overflow: hidden;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n height: ${(p) => p.theme.buttonHeight}em;\n padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n // Do not set inline-flex, otherwise the mobile safari cuts off\n // the bottom border of the button (tested in iPhone 6)\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-weight: 500;\n line-height: 1;\n\n ${primaryStyles};\n ${outlineStyles};\n ${ghostStyles};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n children,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n return (\n <StyledButton\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"file":"index.js"}
@@ -6,8 +6,26 @@ import { omitEmotionProps, useForwardedState } from '@os-design/utils';
6
6
  import styled from '@emotion/styled';
7
7
  import { m } from '@os-design/media';
8
8
  import { clr } from '@os-design/theming';
9
+ import { css } from '@emotion/react';
9
10
  import Button from '../Button';
10
- const Container = styled('div', omitEmotionProps('disabled', 'size'))`
11
+
12
+ const wideDefaultStyles = p => p.wide === 'default' && css`
13
+ ${m.max.xxs} {
14
+ width: 100%;
15
+ & > button {
16
+ flex: 1;
17
+ }
18
+ }
19
+ `;
20
+
21
+ const wideAlwaysStyles = p => p.wide === 'always' && css`
22
+ width: 100%;
23
+ & > button {
24
+ flex: 1;
25
+ }
26
+ `;
27
+
28
+ const Container = styled('div', omitEmotionProps('wide', 'disabled', 'size'))`
11
29
  display: inline-flex;
12
30
  flex-wrap: wrap;
13
31
 
@@ -16,13 +34,8 @@ const Container = styled('div', omitEmotionProps('disabled', 'size'))`
16
34
  border: 1px solid
17
35
  ${p => p.disabled ? clr(p.theme.buttonDisabledGhostColorText) : clr(p.theme.colorPrimary)};
18
36
 
19
- ${m.max.xxs} {
20
- width: 100%;
21
- & > button {
22
- flex: 1;
23
- }
24
- }
25
-
37
+ ${wideDefaultStyles};
38
+ ${wideAlwaysStyles};
26
39
  ${sizeStyles};
27
40
  `;
28
41
  const StyledButton = styled(Button)`
@@ -34,6 +47,7 @@ const StyledButton = styled(Button)`
34
47
 
35
48
  const RadioGroup = /*#__PURE__*/forwardRef(({
36
49
  options = [],
50
+ wide = 'default',
37
51
  disabled = false,
38
52
  value,
39
53
  defaultValue,
@@ -47,6 +61,7 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
47
61
  onChange
48
62
  });
49
63
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, _extends({
64
+ wide: wide,
50
65
  disabled: disabled,
51
66
  size: size
52
67
  }, rest, {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["React","forwardRef","sizeStyles","omitEmotionProps","useForwardedState","styled","m","clr","Button","Container","p","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","max","xxs","StyledButton","RadioGroup","options","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,EAA2BC,iBAA3B,QAAoD,kBAApD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,MAAP,MAAoC,WAApC;AAiDA,MAAMC,SAAS,GAAGJ,MAAM,CACtB,KADsB,EAEtBF,gBAAgB,CAAC,UAAD,EAAa,MAAb,CAFM,CAGN;AAClB;AACA;AACA;AACA,mBAAoBO,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,YAAa;AAC/C;AACA;AACA,MAAOF,CAAD,IACAA,CAAC,CAACG,QAAF,GACIN,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQG,4BAAT,CADP,GAEIP,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQI,YAAT,CAAuB;AACpC;AACA,IAAIT,CAAC,CAACU,GAAF,CAAMC,GAAI;AACd;AACA;AACA;AACA;AACA;AACA;AACA,IAAIf,UAAW;AACf,CAvBA;AAyBA,MAAMgB,YAAY,GAAGb,MAAM,CAACG,MAAD,CAAS;AACpC;AACA,CAFA;AAIA;AACA;AACA;;AACA,MAAMW,UAAU,gBAAGlB,UAAU,CAC3B,CACE;AACEmB,EAAAA,OAAO,GAAG,EADZ;AAEEP,EAAAA,QAAQ,GAAG,KAFb;AAGEQ,EAAAA,KAHF;AAIEC,EAAAA,YAJF;AAKEC,EAAAA,QAAQ,GAAG,MAAM,CAAE,CALrB;AAMEC,EAAAA,IANF;AAOE,KAAGC;AAPL,CADF,EAUEC,GAVF,KAWK;AACH,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCxB,iBAAiB,CAAC;AAC5DiB,IAAAA,KAD4D;AAE5DC,IAAAA,YAF4D;AAG5DC,IAAAA;AAH4D,GAAD,CAA7D;AAMA,sBACE,8CACE,oBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEV,QAArB;AAA+B,IAAA,IAAI,EAAEW;AAArC,KAA+CC,IAA/C;AAAqD,IAAA,GAAG,EAAEC;AAA1D,MACGN,OAAO,EAAES,GAAT,CACC,CAAC;AACCC,IAAAA,KADD;AAECT,IAAAA,KAAK,EAAEU,WAFR;AAGClB,IAAAA,QAAQ,EAAEmB,cAHX;AAICC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAJnB;AAKC,OAAGC;AALJ,GAAD,kBAOE,oBAAC,YAAD;AACE,IAAA,GAAG,EAAEH,WADP;AAEE,IAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,IAAA,IAAI,EAAC,OAHP;AAIE,IAAA,QAAQ,EAAElB,QAAQ,IAAImB,cAJxB;AAKE,IAAA,OAAO,EAAGG,CAAD,IAAO;AACdP,MAAAA,iBAAiB,CAACG,WAAD,CAAjB;AACAE,MAAAA,OAAO,CAACE,CAAD,CAAP;AACD;AARH,KASMD,UATN,GAWGJ,KAXH,CARH,CADH,CADF,CADF;AA6BD,CAhD0B,CAA7B;AAmDAX,UAAU,CAACiB,WAAX,GAAyB,YAAzB;AAEA,eAAejB,UAAf","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n /**\n * The title of the option.\n */\n title: string;\n /**\n * The value of the option.\n */\n value: string;\n}\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n /**\n * Options of the radio group.\n * @default undefined\n */\n options?: RadioGroupOption[];\n /**\n * Whether the radio group is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Selected option.\n * @default false\n */\n value?: string;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string) => void;\n}\n\ninterface ContainerProps extends WithSize {\n disabled: boolean;\n}\nconst Container = styled(\n 'div',\n omitEmotionProps('disabled', 'size')\n)<ContainerProps>`\n display: inline-flex;\n flex-wrap: wrap;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n overflow: hidden;\n border: 1px solid\n ${(p) =>\n p.disabled\n ? clr(p.theme.buttonDisabledGhostColorText)\n : clr(p.theme.colorPrimary)};\n\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ${sizeStyles};\n`;\n\nconst StyledButton = styled(Button)`\n border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n options = [],\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <div>\n <Container disabled={disabled} size={size} {...rest} ref={ref}>\n {options?.map(\n ({\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n }) => (\n <StyledButton\n key={valueOption}\n type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n wide='never'\n disabled={disabled || disabledOption}\n onClick={(e) => {\n setForwardedValue(valueOption);\n onClick(e);\n }}\n {...buttonRest}\n >\n {title}\n </StyledButton>\n )\n )}\n </Container>\n </div>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["React","forwardRef","sizeStyles","omitEmotionProps","useForwardedState","styled","m","clr","css","Button","wideDefaultStyles","p","wide","max","xxs","wideAlwaysStyles","Container","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","StyledButton","RadioGroup","options","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n /**\n * The title of the option.\n */\n title: string;\n /**\n * The value of the option.\n */\n value: string;\n}\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n /**\n * Options of the radio group.\n * @default undefined\n */\n options?: RadioGroupOption[];\n /**\n * Whether the radio group has full width.\n * Possible values:\n * `default` – the radio group has full width if the screen width is less than xs;\n * `always` – the radio group always has full width;\n * `never` – the radio group never has full width.\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Whether the radio group is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Selected option.\n * @default false\n */\n value?: string;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string) => void;\n}\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n & > button {\n flex: 1;\n }\n `;\n\ntype ContainerProps = Required<Pick<RadioGroupProps, 'wide' | 'disabled'>> &\n WithSize;\nconst Container = styled(\n 'div',\n omitEmotionProps('wide', 'disabled', 'size')\n)<ContainerProps>`\n display: inline-flex;\n flex-wrap: wrap;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n overflow: hidden;\n border: 1px solid\n ${(p) =>\n p.disabled\n ? clr(p.theme.buttonDisabledGhostColorText)\n : clr(p.theme.colorPrimary)};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n ${sizeStyles};\n`;\n\nconst StyledButton = styled(Button)`\n border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n options = [],\n wide = 'default',\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <div>\n <Container\n wide={wide}\n disabled={disabled}\n size={size}\n {...rest}\n ref={ref}\n >\n {options?.map(\n ({\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n }) => (\n <StyledButton\n key={valueOption}\n type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n wide='never'\n disabled={disabled || disabledOption}\n onClick={(e) => {\n setForwardedValue(valueOption);\n onClick(e);\n }}\n {...buttonRest}\n >\n {title}\n </StyledButton>\n )\n )}\n </Container>\n </div>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
@@ -8,6 +8,7 @@ export interface RadioGroupOption extends Omit<ButtonProps, 'type' | 'wide' | 's
8
8
  declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'value' | 'defaultValue' | 'onChange' | 'ref'>;
9
9
  export interface RadioGroupProps extends JsxDivProps, WithSize {
10
10
  options?: RadioGroupOption[];
11
+ wide?: 'default' | 'always' | 'never';
11
12
  disabled?: boolean;
12
13
  value?: string;
13
14
  defaultValue?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAKzD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAInD,KAAK,EAAE,MAAM,CAAC;IAId,KAAK,EAAE,MAAM,CAAC;CACf;AAED,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAK5D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAK7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAqCD,QAAA,MAAM,UAAU,wFAiDf,CAAC;AAIF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAMzD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAInD,KAAK,EAAE,MAAM,CAAC;IAId,KAAK,EAAE,MAAM,CAAC;CACf;AAED,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAK5D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAS7B,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAKtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAmDD,QAAA,MAAM,UAAU,wFAwDf,CAAC;AAIF,eAAe,UAAU,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/core",
3
- "version": "1.0.129",
3
+ "version": "1.0.130",
4
4
  "license": "UNLICENSED",
5
5
  "repository": "git@gitlab.com:os-team/libs/os-design.git",
6
6
  "main": "dist/cjs/index.js",
@@ -56,5 +56,5 @@
56
56
  "react": ">=18",
57
57
  "react-dom": ">=18"
58
58
  },
59
- "gitHead": "c6ecc705e3342b142801166afb0e74ba96129942"
59
+ "gitHead": "2f0238329a10d513d707d0eb95b8547dca3f6502"
60
60
  }