@mrshmllw/smores-react 13.2.0 → 13.2.1
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,6 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
import { theme } from '../theme';
|
|
4
3
|
import { focusOutline } from '../utils/focusOutline';
|
|
5
4
|
import { visuallyHidden } from '../utils/visuallyHidden';
|
|
6
5
|
import { Box } from '../Box';
|
|
@@ -18,20 +17,24 @@ const RadioCircle = styled(Box) `
|
|
|
18
17
|
width: ${RADIO_SIZE}px;
|
|
19
18
|
height: ${RADIO_SIZE}px;
|
|
20
19
|
border-radius: ${RADIO_SIZE}px;
|
|
21
|
-
background-color: ${theme.
|
|
20
|
+
background-color: ${({ theme }) => theme.color.background['000']};
|
|
22
21
|
border: 2px solid
|
|
23
|
-
${({ $isError }) => $isError
|
|
22
|
+
${({ $isError, theme }) => $isError
|
|
23
|
+
? theme.color.feedback.negative[200]
|
|
24
|
+
: theme.color.border.contrast};
|
|
24
25
|
|
|
25
|
-
${({ $checked, $isError }) => !$checked &&
|
|
26
|
+
${({ $checked, $isError, theme }) => !$checked &&
|
|
26
27
|
!$isError &&
|
|
27
28
|
`
|
|
28
29
|
&:hover {
|
|
29
|
-
border: 2px solid ${theme.
|
|
30
|
+
border: 2px solid ${theme.color.surface.base[900]};
|
|
30
31
|
}
|
|
31
32
|
`}
|
|
32
33
|
|
|
33
|
-
${({ $checked, $isError }) => $checked &&
|
|
34
|
-
`border: 8px solid ${$isError
|
|
34
|
+
${({ $checked, $isError, theme }) => $checked &&
|
|
35
|
+
`border: 8px solid ${$isError
|
|
36
|
+
? theme.color.feedback.negative[200]
|
|
37
|
+
: theme.color.surface.base[900]};`}
|
|
35
38
|
|
|
36
39
|
${focusOutline({ selector: `${StyledInput}:focus-visible + &` })}
|
|
37
40
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAc5B,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EACE,IAAI,EACJ,EAAE,EACF,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,GAAG,WAAW,EACf,EACD,GAAG;IAEH,OAAO,CACL;QACE,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,GAAG,KAAK,EAAE,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,UAAU,GACpB;QACF,oBAAC,WAAW,gBAAW,OAAO,cAAY,OAAO,KAAM,WAAW,GAAI,CACrE,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAC5B,cAAc;CACjB,CAAA;AAED,MAAM,UAAU,GAAG,EAAE,CAAA;AAErB,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAA0C;;WAE9D,UAAU;YACT,UAAU;mBACH,UAAU;sBACP,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;;MAE5D,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CACxB,QAAQ;IACN,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;IACpC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;IAEjC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAClC,CAAC,QAAQ;IACT,CAAC,QAAQ;IACT;;0BAEsB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;GAEpD;;IAEC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAClC,QAAQ;IACR,qBACE,QAAQ;QACN,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;QACpC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAClC,GAAG;;IAEH,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,oBAAoB,EAAE,CAAC;CACjE,CAAA","sourcesContent":["import React, { FocusEvent, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { visuallyHidden } from '../utils/visuallyHidden'\n\nimport { Box } from '../Box'\nimport { BaseValueType } from './types'\n\ntype RadioElementProps = {\n name: string\n id: string\n value: BaseValueType\n checked: boolean\n onChange: (value: BaseValueType) => void\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n isError: boolean\n isDisabled?: boolean\n} & MarginProps\n\nexport const RadioElement = forwardRef<HTMLInputElement, RadioElementProps>(\n function RadioElement(\n {\n name,\n id,\n value,\n isDisabled,\n checked,\n onChange,\n onBlur,\n isError,\n ...marginProps\n },\n ref,\n ) {\n return (\n <>\n <StyledInput\n ref={ref}\n type=\"radio\"\n name={name}\n id={id}\n value={`${value}`}\n checked={checked}\n onChange={() => onChange(value)}\n onBlur={onBlur}\n disabled={isDisabled}\n />\n <RadioCircle $isError={isError} $checked={checked} {...marginProps} />\n </>\n )\n },\n)\n\nconst StyledInput = styled.input`\n ${visuallyHidden}\n`\n\nconst RADIO_SIZE = 24\n\nconst RadioCircle = styled(Box)<{ $isError: boolean; $checked: boolean }>`\n flex-shrink: 0;\n width: ${RADIO_SIZE}px;\n height: ${RADIO_SIZE}px;\n border-radius: ${RADIO_SIZE}px;\n background-color: ${({ theme }) => theme.color.background['000']};\n border: 2px solid\n ${({ $isError, theme }) =>\n $isError\n ? theme.color.feedback.negative[200]\n : theme.color.border.contrast};\n\n ${({ $checked, $isError, theme }) =>\n !$checked &&\n !$isError &&\n `\n &:hover {\n border: 2px solid ${theme.color.surface.base[900]};\n }\n `}\n\n ${({ $checked, $isError, theme }) =>\n $checked &&\n `border: 8px solid ${\n $isError\n ? theme.color.feedback.negative[200]\n : theme.color.surface.base[900]\n };`}\n\n ${focusOutline({ selector: `${StyledInput}:focus-visible + &` })}\n`\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
|
-
import { theme } from '../theme';
|
|
4
3
|
import { useUniqueId } from '../utils/id';
|
|
4
|
+
import { theme as oldTheme } from '../theme';
|
|
5
5
|
import { Box } from '../Box';
|
|
6
6
|
import { Icon } from '../Icon';
|
|
7
7
|
import { Text } from '../Text';
|
|
@@ -53,26 +53,26 @@ const Wrapper = styled.label `
|
|
|
53
53
|
flex-direction: column;
|
|
54
54
|
cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
|
|
55
55
|
opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};
|
|
56
|
-
${({ $displayType, checked, $isError, $fallbackStyle, $disabled, $itemWidth, }) => css `
|
|
56
|
+
${({ $displayType, checked, $isError, $fallbackStyle, $disabled, $itemWidth, theme, }) => css `
|
|
57
57
|
${($displayType === 'horizontal-card' ||
|
|
58
58
|
$displayType === 'vertical-card') &&
|
|
59
59
|
css `
|
|
60
60
|
border-radius: 12px;
|
|
61
61
|
background-color: ${$fallbackStyle
|
|
62
|
-
? theme.
|
|
63
|
-
: theme.
|
|
62
|
+
? theme.color.surface.base['000']
|
|
63
|
+
: theme.color.surface.base[300]};
|
|
64
64
|
padding: ${checked ? '10px' : '12px'};
|
|
65
65
|
border: ${checked &&
|
|
66
66
|
($isError
|
|
67
|
-
? `2px solid ${theme.
|
|
68
|
-
: `2px solid ${theme.
|
|
67
|
+
? `2px solid ${theme.color.feedback.negative[200]}`
|
|
68
|
+
: `2px solid ${theme.color.border.contrast}`)};
|
|
69
69
|
|
|
70
70
|
&:hover {
|
|
71
71
|
${!$disabled &&
|
|
72
72
|
css `
|
|
73
73
|
background-color: ${$fallbackStyle
|
|
74
|
-
? theme.
|
|
75
|
-
: theme.
|
|
74
|
+
? theme.color.surface.base[100]
|
|
75
|
+
: theme.color.surface.base[400]};
|
|
76
76
|
`}
|
|
77
77
|
}
|
|
78
78
|
`}
|
|
@@ -96,8 +96,8 @@ const Wrapper = styled.label `
|
|
|
96
96
|
const RadioText = styled.span `
|
|
97
97
|
line-height: 16px;
|
|
98
98
|
font-size: 16px;
|
|
99
|
-
font-weight: ${
|
|
100
|
-
color: ${({ $isError }) => $isError ? theme.
|
|
99
|
+
font-weight: ${oldTheme.font.weight.medium};
|
|
100
|
+
color: ${({ $isError, theme }) => $isError ? theme.color.feedback.negative[200] : theme.color.text.base};
|
|
101
101
|
margin-top: 4px;
|
|
102
102
|
`;
|
|
103
103
|
//# sourceMappingURL=RadioItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FocusEvent, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\nimport { theme as oldTheme } from '../theme'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Text } from '../Text'\nimport { RadioElement } from './RadioElement'\nimport { ITEM_GAP } from './constants'\nimport { BaseValueType, DisplayType, IconPosition, ItemWidth } from './types'\n\ntype RadioItemProps = {\n name: string\n visual?: string\n icon?: Icons\n iconPosition?: IconPosition\n value: BaseValueType\n label: string\n checked: boolean\n onChange: (value: BaseValueType) => void\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n displayType: DisplayType\n isError: boolean\n fallbackStyle?: boolean\n bodyCopy?: string\n disabled?: boolean\n itemWidth?: ItemWidth\n}\n\nexport const RadioItem = forwardRef<HTMLInputElement, RadioItemProps>(\n function RadioItem(\n {\n name,\n visual,\n icon,\n iconPosition = 'center',\n label,\n value,\n checked,\n onChange,\n onBlur,\n displayType,\n isError,\n fallbackStyle,\n bodyCopy,\n disabled,\n itemWidth,\n },\n ref,\n ) {\n const id = useUniqueId()\n\n return (\n <Wrapper\n htmlFor={id}\n checked={checked}\n $displayType={displayType}\n data-testid={value}\n $isError={isError}\n $fallbackStyle={fallbackStyle}\n $disabled={disabled}\n $itemWidth={itemWidth}\n >\n {visual && !icon && (\n <VisualWrapper>\n <Visual $visualUrl={visual} />\n </VisualWrapper>\n )}\n {!visual && icon && (\n <IconWrapper $iconPosition={iconPosition}>\n <Icon render={icon} size={24} />\n </IconWrapper>\n )}\n <Box flex alignItems=\"center\">\n <RadioElement\n ref={ref}\n name={name}\n id={id}\n value={value}\n checked={checked}\n onChange={onChange}\n onBlur={onBlur}\n isError={isError}\n mr=\"8px\"\n isDisabled={disabled}\n />\n <Box>\n <RadioText $isError={isError}>{label}</RadioText>\n {bodyCopy && (\n <Box>\n <Text typo=\"caption\">{bodyCopy}</Text>\n </Box>\n )}\n </Box>\n </Box>\n </Wrapper>\n )\n },\n)\n\nconst VisualWrapper = styled.div`\n width: 100%;\n max-width: 120px;\n margin: 0 auto 8px;\n`\n\nconst IconWrapper = styled.div<{ $iconPosition?: IconPosition }>`\n display: flex;\n padding-bottom: 12px;\n\n ${({ $iconPosition }) =>\n $iconPosition === 'center' &&\n css`\n justify-content: center;\n `}\n\n ${({ $iconPosition }) =>\n $iconPosition === 'start' &&\n css`\n justify-content: flex-start;\n `}\n`\n\nconst Visual = styled.div<{ $visualUrl: string }>`\n width: 100%;\n padding-top: 100%;\n background-image: url('${(p) => p.$visualUrl}');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n`\n\nconst Wrapper = styled.label<\n TransientProps<\n Pick<RadioItemProps, 'displayType' | 'isError' | 'fallbackStyle'>\n > & { checked: boolean; $disabled?: boolean; $itemWidth?: ItemWidth }\n>`\n display: flex;\n flex-direction: column;\n cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};\n opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n ${({\n $displayType,\n checked,\n $isError,\n $fallbackStyle,\n $disabled,\n $itemWidth,\n theme,\n }) => css`\n ${($displayType === 'horizontal-card' ||\n $displayType === 'vertical-card') &&\n css`\n border-radius: 12px;\n background-color: ${$fallbackStyle\n ? theme.color.surface.base['000']\n : theme.color.surface.base[300]};\n padding: ${checked ? '10px' : '12px'};\n border: ${checked &&\n ($isError\n ? `2px solid ${theme.color.feedback.negative[200]}`\n : `2px solid ${theme.color.border.contrast}`)};\n\n &:hover {\n ${!$disabled &&\n css`\n background-color: ${$fallbackStyle\n ? theme.color.surface.base[100]\n : theme.color.surface.base[400]};\n `}\n }\n `}\n ${$displayType === 'horizontal-card' &&\n css`\n justify-content: center;\n ${!$itemWidth &&\n css`\n @media (min-width: 420px) {\n width: calc(50% - ${ITEM_GAP / 2}px);\n }\n\n @media (min-width: 768px) {\n width: 201px;\n }\n `}\n `}\n width: ${$itemWidth ?? '100%'};\n `}\n`\n\nconst RadioText = styled.span<{ $isError: boolean }>`\n line-height: 16px;\n font-size: 16px;\n font-weight: ${oldTheme.font.weight.medium};\n color: ${({ $isError, theme }) =>\n $isError ? theme.color.feedback.negative[200] : theme.color.text.base};\n margin-top: 4px;\n`\n"]}
|