@os-design/core 1.0.127 → 1.0.128

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.
@@ -50,7 +50,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
50
50
 
51
51
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
52
52
 
53
- var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline-flex;\n flex-wrap: wrap;\n\n ", " {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ", ";\n"])), _media.m.max.xxs, _styles.sizeStyles);
53
+ var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n\n ", " {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ", ";\n"])), _media.m.max.xxs, _styles.sizeStyles);
54
54
  var LeftButton = (0, _styled["default"])(_Button["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n"])));
55
55
  var RightButton = (0, _styled["default"])(_Button["default"])(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n"])));
56
56
  var MiddleButton = (0, _styled["default"])(_Button["default"])(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-radius: 0;\n"])));
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["Container","m","max","xxs","sizeStyles","LeftButton","Button","RightButton","MiddleButton","getButtonComponent","index","length","RadioGroup","ref","options","disabled","value","defaultValue","onChange","size","rest","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","ButtonComponent","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,IAAMA,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,MAAjB,CAAd,CAAH,4MAIXC,SAAEC,GAAF,CAAMC,GAJK,EAWXC,kBAXW,CAAf;AAcA,IAAMC,UAAU,GAAG,wBAAOC,kBAAP,CAAH,0IAAhB;AAKA,IAAMC,WAAW,GAAG,wBAAOD,kBAAP,CAAH,wIAAjB;AAKA,IAAME,YAAY,GAAG,wBAAOF,kBAAP,CAAH,8FAAlB;;AAIA,IAAMG,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgBC,MAAhB,EAAmC;AAC5D,MAAIA,MAAM,KAAK,CAAf,EAAkB,OAAOL,kBAAP;AAClB,MAAII,KAAK,KAAK,CAAd,EAAiB,OAAOL,UAAP;AACjB,MAAIK,KAAK,KAAKC,MAAM,GAAG,CAAvB,EAA0B,OAAOJ,WAAP;AAC1B,SAAOC,YAAP;AACD,CALD;AAOA;AACA;AACA;;;AACA,IAAMI,UAAU,gBAAG,uBACjB,gBAUEC,GAVF,EAWK;AAAA,0BATDC,OASC;AAAA,MATDA,OASC,6BATS,EAST;AAAA,2BARDC,QAQC;AAAA,MARDA,QAQC,8BARU,KAQV;AAAA,MAPDC,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,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAEH;AAAjB,KAA2BC,IAA3B;AAAiC,IAAA,GAAG,EAAEP;AAAtC,MACGC,OADH,aACGA,OADH,uBACGA,OAAO,CAAES,GAAT,CACC,iBAQEb,KARF,EASK;AAAA,QAPDc,KAOC,SAPDA,KAOC;AAAA,QANMC,WAMN,SANDT,KAMC;AAAA,QALSU,cAKT,SALDX,QAKC;AAAA,8BAJDY,OAIC;AAAA,QAJDA,QAIC,8BAJS,YAAM,CAAE,CAIjB;AAAA,QAHEC,UAGF;;AACH,QAAMC,eAAe,GAAGpB,kBAAkB,CAACC,KAAD,EAAQI,OAAR,aAAQA,OAAR,uBAAQA,OAAO,CAAEH,MAAjB,CAA1C;AAEA,wBACE,gCAAC,eAAD;AACE,MAAA,GAAG,EAAEc,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAEV,QAAQ,IAAIW,cAJxB;AAKE,MAAA,OAAO,EAAE,iBAACI,CAAD,EAAO;AACdR,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;;AACAE,QAAAA,QAAO,CAACG,CAAD,CAAP;AACD;AARH,OASMF,UATN,GAWGJ,KAXH,CADF;AAeD,GA5BF,CADH,CADF;AAkCD,CArDgB,CAAnB;AAwDAZ,UAAU,CAACmB,WAAX,GAAyB,YAAzB;eAEenB,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 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\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n display: inline-flex;\n flex-wrap: wrap;\n\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ${sizeStyles};\n`;\n\nconst LeftButton = styled(Button)`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n`;\n\nconst RightButton = styled(Button)`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n`;\n\nconst MiddleButton = styled(Button)`\n border-radius: 0;\n`;\n\nconst getButtonComponent = (index: number, length: number) => {\n if (length === 1) return Button;\n if (index === 0) return LeftButton;\n if (index === length - 1) return RightButton;\n return MiddleButton;\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 <Container size={size} {...rest} ref={ref}>\n {options?.map(\n (\n {\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n },\n index\n ) => {\n const ButtonComponent = getButtonComponent(index, options?.length);\n\n return (\n <ButtonComponent\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 </ButtonComponent>\n );\n }\n )}\n </Container>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["Container","m","max","xxs","sizeStyles","LeftButton","Button","RightButton","MiddleButton","getButtonComponent","index","length","RadioGroup","ref","options","disabled","value","defaultValue","onChange","size","rest","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","ButtonComponent","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,IAAMA,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,MAAjB,CAAd,CAAH,qMAIXC,SAAEC,GAAF,CAAMC,GAJK,EAWXC,kBAXW,CAAf;AAcA,IAAMC,UAAU,GAAG,wBAAOC,kBAAP,CAAH,0IAAhB;AAKA,IAAMC,WAAW,GAAG,wBAAOD,kBAAP,CAAH,wIAAjB;AAKA,IAAME,YAAY,GAAG,wBAAOF,kBAAP,CAAH,8FAAlB;;AAIA,IAAMG,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgBC,MAAhB,EAAmC;AAC5D,MAAIA,MAAM,KAAK,CAAf,EAAkB,OAAOL,kBAAP;AAClB,MAAII,KAAK,KAAK,CAAd,EAAiB,OAAOL,UAAP;AACjB,MAAIK,KAAK,KAAKC,MAAM,GAAG,CAAvB,EAA0B,OAAOJ,WAAP;AAC1B,SAAOC,YAAP;AACD,CALD;AAOA;AACA;AACA;;;AACA,IAAMI,UAAU,gBAAG,uBACjB,gBAUEC,GAVF,EAWK;AAAA,0BATDC,OASC;AAAA,MATDA,OASC,6BATS,EAST;AAAA,2BARDC,QAQC;AAAA,MARDA,QAQC,8BARU,KAQV;AAAA,MAPDC,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,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAEH;AAAjB,KAA2BC,IAA3B;AAAiC,IAAA,GAAG,EAAEP;AAAtC,MACGC,OADH,aACGA,OADH,uBACGA,OAAO,CAAES,GAAT,CACC,iBAQEb,KARF,EASK;AAAA,QAPDc,KAOC,SAPDA,KAOC;AAAA,QANMC,WAMN,SANDT,KAMC;AAAA,QALSU,cAKT,SALDX,QAKC;AAAA,8BAJDY,OAIC;AAAA,QAJDA,QAIC,8BAJS,YAAM,CAAE,CAIjB;AAAA,QAHEC,UAGF;;AACH,QAAMC,eAAe,GAAGpB,kBAAkB,CAACC,KAAD,EAAQI,OAAR,aAAQA,OAAR,uBAAQA,OAAO,CAAEH,MAAjB,CAA1C;AAEA,wBACE,gCAAC,eAAD;AACE,MAAA,GAAG,EAAEc,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAEV,QAAQ,IAAIW,cAJxB;AAKE,MAAA,OAAO,EAAE,iBAACI,CAAD,EAAO;AACdR,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;;AACAE,QAAAA,QAAO,CAACG,CAAD,CAAP;AACD;AARH,OASMF,UATN,GAWGJ,KAXH,CADF;AAeD,GA5BF,CADH,CADF;AAkCD,CArDgB,CAAnB;AAwDAZ,UAAU,CAACmB,WAAX,GAAyB,YAAzB;eAEenB,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 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\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n display: flex;\n flex-wrap: wrap;\n\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ${sizeStyles};\n`;\n\nconst LeftButton = styled(Button)`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n`;\n\nconst RightButton = styled(Button)`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n`;\n\nconst MiddleButton = styled(Button)`\n border-radius: 0;\n`;\n\nconst getButtonComponent = (index: number, length: number) => {\n if (length === 1) return Button;\n if (index === 0) return LeftButton;\n if (index === length - 1) return RightButton;\n return MiddleButton;\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 <Container size={size} {...rest} ref={ref}>\n {options?.map(\n (\n {\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n },\n index\n ) => {\n const ButtonComponent = getButtonComponent(index, options?.length);\n\n return (\n <ButtonComponent\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 </ButtonComponent>\n );\n }\n )}\n </Container>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
7
7
  import { m } from '@os-design/media';
8
8
  import Button from '../Button';
9
9
  const Container = styled('div', omitEmotionProps('size'))`
10
- display: inline-flex;
10
+ display: flex;
11
11
  flex-wrap: wrap;
12
12
 
13
13
  ${m.max.xxs} {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["React","forwardRef","sizeStyles","omitEmotionProps","useForwardedState","styled","m","Button","Container","max","xxs","LeftButton","RightButton","MiddleButton","getButtonComponent","index","length","RadioGroup","options","disabled","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","ButtonComponent","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,OAAOC,MAAP,MAAoC,WAApC;AA8CA,MAAMC,SAAS,GAAGH,MAAM,CAAC,KAAD,EAAQF,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA;AACA,IAAIG,CAAC,CAACG,GAAF,CAAMC,GAAI;AACd;AACA;AACA;AACA;AACA;AACA;AACA,IAAIR,UAAW;AACf,CAZA;AAcA,MAAMS,UAAU,GAAGN,MAAM,CAACE,MAAD,CAAS;AAClC;AACA;AACA,CAHA;AAKA,MAAMK,WAAW,GAAGP,MAAM,CAACE,MAAD,CAAS;AACnC;AACA;AACA,CAHA;AAKA,MAAMM,YAAY,GAAGR,MAAM,CAACE,MAAD,CAAS;AACpC;AACA,CAFA;;AAIA,MAAMO,kBAAkB,GAAG,CAACC,KAAD,EAAgBC,MAAhB,KAAmC;AAC5D,MAAIA,MAAM,KAAK,CAAf,EAAkB,OAAOT,MAAP;AAClB,MAAIQ,KAAK,KAAK,CAAd,EAAiB,OAAOJ,UAAP;AACjB,MAAII,KAAK,KAAKC,MAAM,GAAG,CAAvB,EAA0B,OAAOJ,WAAP;AAC1B,SAAOC,YAAP;AACD,CALD;AAOA;AACA;AACA;;;AACA,MAAMI,UAAU,gBAAGhB,UAAU,CAC3B,CACE;AACEiB,EAAAA,OAAO,GAAG,EADZ;AAEEC,EAAAA,QAAQ,GAAG,KAFb;AAGEC,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,IAAsCvB,iBAAiB,CAAC;AAC5DgB,IAAAA,KAD4D;AAE5DC,IAAAA,YAF4D;AAG5DC,IAAAA;AAH4D,GAAD,CAA7D;AAMA,sBACE,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAEC;AAAjB,KAA2BC,IAA3B;AAAiC,IAAA,GAAG,EAAEC;AAAtC,MACGP,OAAO,EAAEU,GAAT,CACC,CACE;AACEC,IAAAA,KADF;AAEET,IAAAA,KAAK,EAAEU,WAFT;AAGEX,IAAAA,QAAQ,EAAEY,cAHZ;AAIEC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAJpB;AAKE,OAAGC;AALL,GADF,EAQElB,KARF,KASK;AACH,UAAMmB,eAAe,GAAGpB,kBAAkB,CAACC,KAAD,EAAQG,OAAO,EAAEF,MAAjB,CAA1C;AAEA,wBACE,oBAAC,eAAD;AACE,MAAA,GAAG,EAAEc,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAEX,QAAQ,IAAIY,cAJxB;AAKE,MAAA,OAAO,EAAGI,CAAD,IAAO;AACdR,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;AACAE,QAAAA,OAAO,CAACG,CAAD,CAAP;AACD;AARH,OASMF,UATN,GAWGJ,KAXH,CADF;AAeD,GA5BF,CADH,CADF;AAkCD,CArD0B,CAA7B;AAwDAZ,UAAU,CAACmB,WAAX,GAAyB,YAAzB;AAEA,eAAenB,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 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\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n display: inline-flex;\n flex-wrap: wrap;\n\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ${sizeStyles};\n`;\n\nconst LeftButton = styled(Button)`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n`;\n\nconst RightButton = styled(Button)`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n`;\n\nconst MiddleButton = styled(Button)`\n border-radius: 0;\n`;\n\nconst getButtonComponent = (index: number, length: number) => {\n if (length === 1) return Button;\n if (index === 0) return LeftButton;\n if (index === length - 1) return RightButton;\n return MiddleButton;\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 <Container size={size} {...rest} ref={ref}>\n {options?.map(\n (\n {\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n },\n index\n ) => {\n const ButtonComponent = getButtonComponent(index, options?.length);\n\n return (\n <ButtonComponent\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 </ButtonComponent>\n );\n }\n )}\n </Container>\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","Button","Container","max","xxs","LeftButton","RightButton","MiddleButton","getButtonComponent","index","length","RadioGroup","options","disabled","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","ButtonComponent","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,OAAOC,MAAP,MAAoC,WAApC;AA8CA,MAAMC,SAAS,GAAGH,MAAM,CAAC,KAAD,EAAQF,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA;AACA,IAAIG,CAAC,CAACG,GAAF,CAAMC,GAAI;AACd;AACA;AACA;AACA;AACA;AACA;AACA,IAAIR,UAAW;AACf,CAZA;AAcA,MAAMS,UAAU,GAAGN,MAAM,CAACE,MAAD,CAAS;AAClC;AACA;AACA,CAHA;AAKA,MAAMK,WAAW,GAAGP,MAAM,CAACE,MAAD,CAAS;AACnC;AACA;AACA,CAHA;AAKA,MAAMM,YAAY,GAAGR,MAAM,CAACE,MAAD,CAAS;AACpC;AACA,CAFA;;AAIA,MAAMO,kBAAkB,GAAG,CAACC,KAAD,EAAgBC,MAAhB,KAAmC;AAC5D,MAAIA,MAAM,KAAK,CAAf,EAAkB,OAAOT,MAAP;AAClB,MAAIQ,KAAK,KAAK,CAAd,EAAiB,OAAOJ,UAAP;AACjB,MAAII,KAAK,KAAKC,MAAM,GAAG,CAAvB,EAA0B,OAAOJ,WAAP;AAC1B,SAAOC,YAAP;AACD,CALD;AAOA;AACA;AACA;;;AACA,MAAMI,UAAU,gBAAGhB,UAAU,CAC3B,CACE;AACEiB,EAAAA,OAAO,GAAG,EADZ;AAEEC,EAAAA,QAAQ,GAAG,KAFb;AAGEC,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,IAAsCvB,iBAAiB,CAAC;AAC5DgB,IAAAA,KAD4D;AAE5DC,IAAAA,YAF4D;AAG5DC,IAAAA;AAH4D,GAAD,CAA7D;AAMA,sBACE,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAEC;AAAjB,KAA2BC,IAA3B;AAAiC,IAAA,GAAG,EAAEC;AAAtC,MACGP,OAAO,EAAEU,GAAT,CACC,CACE;AACEC,IAAAA,KADF;AAEET,IAAAA,KAAK,EAAEU,WAFT;AAGEX,IAAAA,QAAQ,EAAEY,cAHZ;AAIEC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAJpB;AAKE,OAAGC;AALL,GADF,EAQElB,KARF,KASK;AACH,UAAMmB,eAAe,GAAGpB,kBAAkB,CAACC,KAAD,EAAQG,OAAO,EAAEF,MAAjB,CAA1C;AAEA,wBACE,oBAAC,eAAD;AACE,MAAA,GAAG,EAAEc,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAEX,QAAQ,IAAIY,cAJxB;AAKE,MAAA,OAAO,EAAGI,CAAD,IAAO;AACdR,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;AACAE,QAAAA,OAAO,CAACG,CAAD,CAAP;AACD;AARH,OASMF,UATN,GAWGJ,KAXH,CADF;AAeD,GA5BF,CADH,CADF;AAkCD,CArD0B,CAA7B;AAwDAZ,UAAU,CAACmB,WAAX,GAAyB,YAAzB;AAEA,eAAenB,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 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\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n display: flex;\n flex-wrap: wrap;\n\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ${sizeStyles};\n`;\n\nconst LeftButton = styled(Button)`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n`;\n\nconst RightButton = styled(Button)`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n`;\n\nconst MiddleButton = styled(Button)`\n border-radius: 0;\n`;\n\nconst getButtonComponent = (index: number, length: number) => {\n if (length === 1) return Button;\n if (index === 0) return LeftButton;\n if (index === length - 1) return RightButton;\n return MiddleButton;\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 <Container size={size} {...rest} ref={ref}>\n {options?.map(\n (\n {\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n },\n index\n ) => {\n const ButtonComponent = getButtonComponent(index, options?.length);\n\n return (\n <ButtonComponent\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 </ButtonComponent>\n );\n }\n )}\n </Container>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/core",
3
- "version": "1.0.127",
3
+ "version": "1.0.128",
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": "c45c0216dfeddb3a37daf515a0abe80393cac631"
59
+ "gitHead": "8e09c32a1f37907e86bb2a6467a7e45d4570bfd7"
60
60
  }