@semcore/radio 16.0.0 → 16.0.1-prerelease.3
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.
- package/CHANGELOG.md +7 -1
- package/lib/cjs/Radio.js +15 -15
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/es6/Radio.js +15 -15
- package/lib/es6/index.d.js.map +1 -1
- package/lib/esm/Radio.mjs +16 -16
- package/lib/types/index.d.ts +40 -42
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [16.0.1] - 2025-05-30
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [16.0.0 ~> 16.0.1], `@semcore/base-components` [16.0.0 ~> 16.0.1]).
|
|
10
|
+
|
|
5
11
|
## [16.0.0] - 2025-05-19
|
|
6
12
|
|
|
7
13
|
### Break
|
|
8
14
|
|
|
9
|
-
- `keyboardFocusEnhance`
|
|
15
|
+
- replaced `keyboardFocusEnhance` with `:focus-visible` CSS pseudo-class.
|
|
10
16
|
|
|
11
17
|
## [6.43.4] - 2025-05-13
|
|
12
18
|
|
package/lib/cjs/Radio.js
CHANGED
|
@@ -34,23 +34,23 @@ var _typography = require("@semcore/typography");
|
|
|
34
34
|
var _excluded = ["size", "state", "theme", "keyboardFocused", "value", "tag", "disabled", "includeInputProps", "resolveColor"],
|
|
35
35
|
_excluded2 = ["children", "Children"];
|
|
36
36
|
/*!__reshadow-styles__:"./style/radio.shadow.css"*/
|
|
37
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
37
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SRadio_42mct_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_42mct_gg_ .___SText_42mct_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-primary, #191b23)}.___SRadio_42mct_gg_ .___SText_42mct_gg_.__color_42mct_gg_{color:var(--color_42mct)}.___SRadio_42mct_gg_.__disabled_42mct_gg_{pointer-events:none}.___SText_42mct_gg_._size_m_42mct_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_42mct_gg_._size_l_42mct_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SValue_42mct_gg_{position:relative;flex-shrink:0;padding:0;outline:0;z-index:0;margin-top:var(--intergalactic-spacing-05x, 2px)}.___SValue_42mct_gg_::after,.___SValue_42mct_gg_::before{content:\"\";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SValue_42mct_gg_::before{top:0;left:0;border:1px solid;transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___SValue_42mct_gg_::after{top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0}.___SValue_42mct_gg_.__disabled_42mct_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SValue_42mct_gg_._size_m_42mct_gg_{width:16px;height:16px}.___SValue_42mct_gg_._size_m_42mct_gg_ .___SInvalidPattern_42mct_gg_:before{width:14px;height:14px}.___SValue_42mct_gg_._size_l_42mct_gg_{width:20px;height:20px}.___SValue_42mct_gg_._size_l_42mct_gg_ .___SInvalidPattern_42mct_gg_:before{width:18px;height:18px}.___SValue_42mct_gg_._state_normal_42mct_gg_::before{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SValue_42mct_gg_._state_invalid_42mct_gg_::before{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SControl_42mct_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_::before{border-color:var(--intergalactic-control-primary-info, #008ff8);background-color:var(--intergalactic-control-primary-info, #008ff8)}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_._size_m_42mct_gg_::after{width:6px;height:6px}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_._size_l_42mct_gg_::after{width:8px;height:8px}.___SControl_42mct_gg_:focus-visible+.___SValue_42mct_gg_._state_normal_42mct_gg_::before{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));border-color:var(--intergalactic-border-info-active, #006dca)}.___SControl_42mct_gg_:focus-visible+.___SValue_42mct_gg_._state_invalid_42mct_gg_::before{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_.__theme_42mct_gg_::before{border-color:var(--theme_42mct);background-color:var(--theme_42mct)}.___SValue_42mct_gg_._state_normal_42mct_gg_.__theme_42mct_gg_::before{border-color:var(--theme_42mct)}.___SInvalidPattern_42mct_gg_{background:0 0;overflow:hidden}.___SInvalidPattern_42mct_gg_:before{content:\"\";position:absolute;top:1px;left:1px;border-radius:50%;background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}", /*__inner_css_end__*/"42mct_gg_"),
|
|
38
38
|
/*__reshadow_css_end__*/
|
|
39
39
|
{
|
|
40
|
-
"__SRadio": "
|
|
41
|
-
"_disabled": "
|
|
42
|
-
"__SText": "
|
|
43
|
-
"_size_m": "
|
|
44
|
-
"_size_l": "
|
|
45
|
-
"__SValue": "
|
|
46
|
-
"_state_normal": "
|
|
47
|
-
"_state_invalid": "
|
|
48
|
-
"__SControl": "
|
|
49
|
-
"_theme": "
|
|
50
|
-
"--theme": "--
|
|
51
|
-
"_color": "
|
|
52
|
-
"--color": "--
|
|
53
|
-
"__SInvalidPattern": "
|
|
40
|
+
"__SRadio": "___SRadio_42mct_gg_",
|
|
41
|
+
"_disabled": "__disabled_42mct_gg_",
|
|
42
|
+
"__SText": "___SText_42mct_gg_",
|
|
43
|
+
"_size_m": "_size_m_42mct_gg_",
|
|
44
|
+
"_size_l": "_size_l_42mct_gg_",
|
|
45
|
+
"__SValue": "___SValue_42mct_gg_",
|
|
46
|
+
"_state_normal": "_state_normal_42mct_gg_",
|
|
47
|
+
"_state_invalid": "_state_invalid_42mct_gg_",
|
|
48
|
+
"__SControl": "___SControl_42mct_gg_",
|
|
49
|
+
"_theme": "__theme_42mct_gg_",
|
|
50
|
+
"--theme": "--theme_42mct",
|
|
51
|
+
"_color": "__color_42mct_gg_",
|
|
52
|
+
"--color": "--color_42mct",
|
|
53
|
+
"__SInvalidPattern": "___SInvalidPattern_42mct_gg_"
|
|
54
54
|
});
|
|
55
55
|
var RadioGroupRoot = /*#__PURE__*/function (_Component) {
|
|
56
56
|
(0, _inherits2["default"])(RadioGroupRoot, _Component);
|
package/lib/cjs/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps, Flex } from '@semcore/flex-box';\nimport {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps, Flex } from '@semcore/flex-box';\nimport { Text } from '@semcore/typography';\n\nexport type RadioSize = 'm' | 'l';\nexport type RadioState = 'normal' | 'invalid';\nexport type RadioValue = string | number | boolean;\n\n/** @deprecated */\nexport interface IRadioProps extends RadioProps, UnknownProperties {}\nexport type RadioProps = BoxProps & {\n /** Radio item value **/\n value?: RadioValue;\n\n /** Radio item checked flag **/\n checked?: boolean;\n\n /**\n * The value displaying the state of the component\n * @default normal\n */\n state?: RadioState;\n /**\n * Radio button size\n * @default m\n **/\n size?: RadioSize;\n /** The theme of the radio button that you can send your color to */\n theme?: string;\n /** Radio item text **/\n label?: string;\n /** Blocks access and changes to the radio item **/\n disabled?: boolean;\n};\n\n/** @deprecated */\nexport interface IRadioGroupProps extends RadioGroupProps, UnknownProperties {\n /**\n * HTML tag name for the displayed item\n */\n tag?: React.ElementType | string;\n}\nexport type RadioGroupProps<T extends RadioValue = RadioValue> = {\n /** Radio group name */\n name?: string;\n /** Active default value */\n defaultValue?: T;\n /** Active value */\n value?: T;\n /** Called when the selected element is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLInputElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Radio button size */\n size?: RadioSize;\n /** The theme of the radio button that you can send your color to */\n theme?: string;\n /** Blocks access and changes to the form field */\n disabled?: boolean;\n};\n\n/** @deprecated */\nexport interface IRadioValueProps extends RadioValueProps, UnknownProperties {}\nexport type RadioValueProps = BoxProps & {\n /** List of elements that can be put on a hidden input */\n includeInputProps?: string[];\n /**\n * @deprecated set `state` on root Radio instead\n * The value displaying the state of the component\n * @default normal\n */\n state?: RadioState;\n /**\n * @deprecated\n * The theme of the radio button that you can send your color to\n */\n theme?: string;\n /**\n * @deprecated set `size` on root RadioGroup instead\n * Radio button size\n */\n size?: RadioSize;\n /**\n * @deprecated set `value` on root Radio instead\n * The element value is required for RadioGroup\n */\n value?: RadioValue;\n /**\n * @deprecated set `defaultValue` on root RadioGroup instead\n * Default value if `value` property is not provided\n */\n defaultValue?: RadioValue;\n /**\n * @deprecated set `onChange` on root RadioGroup instead\n * Called when the value changes\n */\n onChange?: (value: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;\n /**\n * @deprecated set `disabled` on root Radio instead\n * Blocks access and changes to the form field\n */\n disabled?: boolean;\n};\n\n/** @deprecated */\nexport interface IRadioCtx extends RadioCtx, UnknownProperties {}\nexport type RadioCtx = {\n getValueProps: PropGetterFn;\n getTextProps: PropGetterFn;\n};\n\ntype IntergalacticRadioGroupComponent<PropsExtending = {}> = (<\n Value extends RadioValue,\n Tag extends Intergalactic.Tag = typeof Flex,\n>(\n props: Intergalactic.InternalTypings.ComponentProps<Tag, typeof Flex, RadioGroupProps<Value>> &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', typeof Flex, RadioGroupProps>;\n\nexport type RadioValueControlProps = {};\nexport type RadioValueMarkProps = {};\n\ndeclare const RadioGroup: IntergalacticRadioGroupComponent;\n\nexport { RadioGroup };\n\ndeclare const Radio: Intergalactic.Component<'label', RadioProps, RadioCtx> & {\n Value: Intergalactic.Component<'input', RadioValueProps> & {\n Control: Intergalactic.Component<'input', RadioValueControlProps>;\n RadioMark: Intergalactic.Component<typeof Box, RadioValueMarkProps>;\n };\n Text: typeof Text;\n};\n\ndeclare const wrapRadioGroup: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticRadioGroupComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticRadioGroupComponent<PropsExtending>;\nexport { wrapRadioGroup };\n\nexport default Radio;\n"],"mappings":""}
|
package/lib/es6/Radio.js
CHANGED
|
@@ -23,23 +23,23 @@ import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEn
|
|
|
23
23
|
import getInputProps, { inputProps } from '@semcore/core/lib/utils/inputProps';
|
|
24
24
|
import { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';
|
|
25
25
|
/*!__reshadow-styles__:"./style/radio.shadow.css"*/
|
|
26
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
26
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SRadio_42mct_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_42mct_gg_ .___SText_42mct_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-primary, #191b23)}.___SRadio_42mct_gg_ .___SText_42mct_gg_.__color_42mct_gg_{color:var(--color_42mct)}.___SRadio_42mct_gg_.__disabled_42mct_gg_{pointer-events:none}.___SText_42mct_gg_._size_m_42mct_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_42mct_gg_._size_l_42mct_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SValue_42mct_gg_{position:relative;flex-shrink:0;padding:0;outline:0;z-index:0;margin-top:var(--intergalactic-spacing-05x, 2px)}.___SValue_42mct_gg_::after,.___SValue_42mct_gg_::before{content:\"\";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SValue_42mct_gg_::before{top:0;left:0;border:1px solid;transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___SValue_42mct_gg_::after{top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0}.___SValue_42mct_gg_.__disabled_42mct_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SValue_42mct_gg_._size_m_42mct_gg_{width:16px;height:16px}.___SValue_42mct_gg_._size_m_42mct_gg_ .___SInvalidPattern_42mct_gg_:before{width:14px;height:14px}.___SValue_42mct_gg_._size_l_42mct_gg_{width:20px;height:20px}.___SValue_42mct_gg_._size_l_42mct_gg_ .___SInvalidPattern_42mct_gg_:before{width:18px;height:18px}.___SValue_42mct_gg_._state_normal_42mct_gg_::before{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SValue_42mct_gg_._state_invalid_42mct_gg_::before{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SControl_42mct_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_::before{border-color:var(--intergalactic-control-primary-info, #008ff8);background-color:var(--intergalactic-control-primary-info, #008ff8)}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_._size_m_42mct_gg_::after{width:6px;height:6px}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_._size_l_42mct_gg_::after{width:8px;height:8px}.___SControl_42mct_gg_:focus-visible+.___SValue_42mct_gg_._state_normal_42mct_gg_::before{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));border-color:var(--intergalactic-border-info-active, #006dca)}.___SControl_42mct_gg_:focus-visible+.___SValue_42mct_gg_._state_invalid_42mct_gg_::before{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_.__theme_42mct_gg_::before{border-color:var(--theme_42mct);background-color:var(--theme_42mct)}.___SValue_42mct_gg_._state_normal_42mct_gg_.__theme_42mct_gg_::before{border-color:var(--theme_42mct)}.___SInvalidPattern_42mct_gg_{background:0 0;overflow:hidden}.___SInvalidPattern_42mct_gg_:before{content:\"\";position:absolute;top:1px;left:1px;border-radius:50%;background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}", /*__inner_css_end__*/"42mct_gg_"),
|
|
27
27
|
/*__reshadow_css_end__*/
|
|
28
28
|
{
|
|
29
|
-
"__SRadio": "
|
|
30
|
-
"_disabled": "
|
|
31
|
-
"__SText": "
|
|
32
|
-
"_size_m": "
|
|
33
|
-
"_size_l": "
|
|
34
|
-
"__SValue": "
|
|
35
|
-
"_state_normal": "
|
|
36
|
-
"_state_invalid": "
|
|
37
|
-
"__SControl": "
|
|
38
|
-
"_theme": "
|
|
39
|
-
"--theme": "--
|
|
40
|
-
"_color": "
|
|
41
|
-
"--color": "--
|
|
42
|
-
"__SInvalidPattern": "
|
|
29
|
+
"__SRadio": "___SRadio_42mct_gg_",
|
|
30
|
+
"_disabled": "__disabled_42mct_gg_",
|
|
31
|
+
"__SText": "___SText_42mct_gg_",
|
|
32
|
+
"_size_m": "_size_m_42mct_gg_",
|
|
33
|
+
"_size_l": "_size_l_42mct_gg_",
|
|
34
|
+
"__SValue": "___SValue_42mct_gg_",
|
|
35
|
+
"_state_normal": "_state_normal_42mct_gg_",
|
|
36
|
+
"_state_invalid": "_state_invalid_42mct_gg_",
|
|
37
|
+
"__SControl": "___SControl_42mct_gg_",
|
|
38
|
+
"_theme": "__theme_42mct_gg_",
|
|
39
|
+
"--theme": "--theme_42mct",
|
|
40
|
+
"_color": "__color_42mct_gg_",
|
|
41
|
+
"--color": "--color_42mct",
|
|
42
|
+
"__SInvalidPattern": "___SInvalidPattern_42mct_gg_"
|
|
43
43
|
});
|
|
44
44
|
import logger from '@semcore/core/lib/utils/logger';
|
|
45
45
|
import { Text as TypographyText } from '@semcore/typography';
|
package/lib/es6/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps, Flex } from '@semcore/flex-box';\nimport {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps, Flex } from '@semcore/flex-box';\nimport { Text } from '@semcore/typography';\n\nexport type RadioSize = 'm' | 'l';\nexport type RadioState = 'normal' | 'invalid';\nexport type RadioValue = string | number | boolean;\n\n/** @deprecated */\nexport interface IRadioProps extends RadioProps, UnknownProperties {}\nexport type RadioProps = BoxProps & {\n /** Radio item value **/\n value?: RadioValue;\n\n /** Radio item checked flag **/\n checked?: boolean;\n\n /**\n * The value displaying the state of the component\n * @default normal\n */\n state?: RadioState;\n /**\n * Radio button size\n * @default m\n **/\n size?: RadioSize;\n /** The theme of the radio button that you can send your color to */\n theme?: string;\n /** Radio item text **/\n label?: string;\n /** Blocks access and changes to the radio item **/\n disabled?: boolean;\n};\n\n/** @deprecated */\nexport interface IRadioGroupProps extends RadioGroupProps, UnknownProperties {\n /**\n * HTML tag name for the displayed item\n */\n tag?: React.ElementType | string;\n}\nexport type RadioGroupProps<T extends RadioValue = RadioValue> = {\n /** Radio group name */\n name?: string;\n /** Active default value */\n defaultValue?: T;\n /** Active value */\n value?: T;\n /** Called when the selected element is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLInputElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Radio button size */\n size?: RadioSize;\n /** The theme of the radio button that you can send your color to */\n theme?: string;\n /** Blocks access and changes to the form field */\n disabled?: boolean;\n};\n\n/** @deprecated */\nexport interface IRadioValueProps extends RadioValueProps, UnknownProperties {}\nexport type RadioValueProps = BoxProps & {\n /** List of elements that can be put on a hidden input */\n includeInputProps?: string[];\n /**\n * @deprecated set `state` on root Radio instead\n * The value displaying the state of the component\n * @default normal\n */\n state?: RadioState;\n /**\n * @deprecated\n * The theme of the radio button that you can send your color to\n */\n theme?: string;\n /**\n * @deprecated set `size` on root RadioGroup instead\n * Radio button size\n */\n size?: RadioSize;\n /**\n * @deprecated set `value` on root Radio instead\n * The element value is required for RadioGroup\n */\n value?: RadioValue;\n /**\n * @deprecated set `defaultValue` on root RadioGroup instead\n * Default value if `value` property is not provided\n */\n defaultValue?: RadioValue;\n /**\n * @deprecated set `onChange` on root RadioGroup instead\n * Called when the value changes\n */\n onChange?: (value: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;\n /**\n * @deprecated set `disabled` on root Radio instead\n * Blocks access and changes to the form field\n */\n disabled?: boolean;\n};\n\n/** @deprecated */\nexport interface IRadioCtx extends RadioCtx, UnknownProperties {}\nexport type RadioCtx = {\n getValueProps: PropGetterFn;\n getTextProps: PropGetterFn;\n};\n\ntype IntergalacticRadioGroupComponent<PropsExtending = {}> = (<\n Value extends RadioValue,\n Tag extends Intergalactic.Tag = typeof Flex,\n>(\n props: Intergalactic.InternalTypings.ComponentProps<Tag, typeof Flex, RadioGroupProps<Value>> &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', typeof Flex, RadioGroupProps>;\n\nexport type RadioValueControlProps = {};\nexport type RadioValueMarkProps = {};\n\ndeclare const RadioGroup: IntergalacticRadioGroupComponent;\n\nexport { RadioGroup };\n\ndeclare const Radio: Intergalactic.Component<'label', RadioProps, RadioCtx> & {\n Value: Intergalactic.Component<'input', RadioValueProps> & {\n Control: Intergalactic.Component<'input', RadioValueControlProps>;\n RadioMark: Intergalactic.Component<typeof Box, RadioValueMarkProps>;\n };\n Text: typeof Text;\n};\n\ndeclare const wrapRadioGroup: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticRadioGroupComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticRadioGroupComponent<PropsExtending>;\nexport { wrapRadioGroup };\n\nexport default Radio;\n"],"mappings":""}
|
package/lib/esm/Radio.mjs
CHANGED
|
@@ -23,25 +23,25 @@ var style = (
|
|
|
23
23
|
/*__reshadow_css_start__*/
|
|
24
24
|
(sstyled.insert(
|
|
25
25
|
/*__inner_css_start__*/
|
|
26
|
-
'.
|
|
26
|
+
'.___SRadio_42mct_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_42mct_gg_ .___SText_42mct_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-primary, #191b23)}.___SRadio_42mct_gg_ .___SText_42mct_gg_.__color_42mct_gg_{color:var(--color_42mct)}.___SRadio_42mct_gg_.__disabled_42mct_gg_{pointer-events:none}.___SText_42mct_gg_._size_m_42mct_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_42mct_gg_._size_l_42mct_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SValue_42mct_gg_{position:relative;flex-shrink:0;padding:0;outline:0;z-index:0;margin-top:var(--intergalactic-spacing-05x, 2px)}.___SValue_42mct_gg_::after,.___SValue_42mct_gg_::before{content:"";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SValue_42mct_gg_::before{top:0;left:0;border:1px solid;transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___SValue_42mct_gg_::after{top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0}.___SValue_42mct_gg_.__disabled_42mct_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SValue_42mct_gg_._size_m_42mct_gg_{width:16px;height:16px}.___SValue_42mct_gg_._size_m_42mct_gg_ .___SInvalidPattern_42mct_gg_:before{width:14px;height:14px}.___SValue_42mct_gg_._size_l_42mct_gg_{width:20px;height:20px}.___SValue_42mct_gg_._size_l_42mct_gg_ .___SInvalidPattern_42mct_gg_:before{width:18px;height:18px}.___SValue_42mct_gg_._state_normal_42mct_gg_::before{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SValue_42mct_gg_._state_invalid_42mct_gg_::before{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SControl_42mct_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_::before{border-color:var(--intergalactic-control-primary-info, #008ff8);background-color:var(--intergalactic-control-primary-info, #008ff8)}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_._size_m_42mct_gg_::after{width:6px;height:6px}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_._size_l_42mct_gg_::after{width:8px;height:8px}.___SControl_42mct_gg_:focus-visible+.___SValue_42mct_gg_._state_normal_42mct_gg_::before{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));border-color:var(--intergalactic-border-info-active, #006dca)}.___SControl_42mct_gg_:focus-visible+.___SValue_42mct_gg_._state_invalid_42mct_gg_::before{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SControl_42mct_gg_:checked~.___SValue_42mct_gg_.__theme_42mct_gg_::before{border-color:var(--theme_42mct);background-color:var(--theme_42mct)}.___SValue_42mct_gg_._state_normal_42mct_gg_.__theme_42mct_gg_::before{border-color:var(--theme_42mct)}.___SInvalidPattern_42mct_gg_{background:0 0;overflow:hidden}.___SInvalidPattern_42mct_gg_:before{content:"";position:absolute;top:1px;left:1px;border-radius:50%;background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}',
|
|
27
27
|
/*__inner_css_end__*/
|
|
28
|
-
"
|
|
28
|
+
"42mct_gg_"
|
|
29
29
|
), /*__reshadow_css_end__*/
|
|
30
30
|
{
|
|
31
|
-
"__SRadio": "
|
|
32
|
-
"_disabled": "
|
|
33
|
-
"__SText": "
|
|
34
|
-
"_size_m": "
|
|
35
|
-
"_size_l": "
|
|
36
|
-
"__SValue": "
|
|
37
|
-
"_state_normal": "
|
|
38
|
-
"_state_invalid": "
|
|
39
|
-
"__SControl": "
|
|
40
|
-
"_theme": "
|
|
41
|
-
"--theme": "--
|
|
42
|
-
"_color": "
|
|
43
|
-
"--color": "--
|
|
44
|
-
"__SInvalidPattern": "
|
|
31
|
+
"__SRadio": "___SRadio_42mct_gg_",
|
|
32
|
+
"_disabled": "__disabled_42mct_gg_",
|
|
33
|
+
"__SText": "___SText_42mct_gg_",
|
|
34
|
+
"_size_m": "_size_m_42mct_gg_",
|
|
35
|
+
"_size_l": "_size_l_42mct_gg_",
|
|
36
|
+
"__SValue": "___SValue_42mct_gg_",
|
|
37
|
+
"_state_normal": "_state_normal_42mct_gg_",
|
|
38
|
+
"_state_invalid": "_state_invalid_42mct_gg_",
|
|
39
|
+
"__SControl": "___SControl_42mct_gg_",
|
|
40
|
+
"_theme": "__theme_42mct_gg_",
|
|
41
|
+
"--theme": "--theme_42mct",
|
|
42
|
+
"_color": "__color_42mct_gg_",
|
|
43
|
+
"--color": "--color_42mct",
|
|
44
|
+
"__SInvalidPattern": "___SInvalidPattern_42mct_gg_"
|
|
45
45
|
})
|
|
46
46
|
);
|
|
47
47
|
var RadioGroupRoot = /* @__PURE__ */ function(_Component) {
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
3
3
|
import { Box, BoxProps, Flex } from '@semcore/flex-box';
|
|
4
|
-
import { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
|
|
5
4
|
import { Text } from '@semcore/typography';
|
|
6
5
|
|
|
7
6
|
export type RadioSize = 'm' | 'l';
|
|
@@ -63,47 +62,46 @@ export type RadioGroupProps<T extends RadioValue = RadioValue> = {
|
|
|
63
62
|
|
|
64
63
|
/** @deprecated */
|
|
65
64
|
export interface IRadioValueProps extends RadioValueProps, UnknownProperties {}
|
|
66
|
-
export type RadioValueProps = BoxProps &
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
};
|
|
65
|
+
export type RadioValueProps = BoxProps & {
|
|
66
|
+
/** List of elements that can be put on a hidden input */
|
|
67
|
+
includeInputProps?: string[];
|
|
68
|
+
/**
|
|
69
|
+
* @deprecated set `state` on root Radio instead
|
|
70
|
+
* The value displaying the state of the component
|
|
71
|
+
* @default normal
|
|
72
|
+
*/
|
|
73
|
+
state?: RadioState;
|
|
74
|
+
/**
|
|
75
|
+
* @deprecated
|
|
76
|
+
* The theme of the radio button that you can send your color to
|
|
77
|
+
*/
|
|
78
|
+
theme?: string;
|
|
79
|
+
/**
|
|
80
|
+
* @deprecated set `size` on root RadioGroup instead
|
|
81
|
+
* Radio button size
|
|
82
|
+
*/
|
|
83
|
+
size?: RadioSize;
|
|
84
|
+
/**
|
|
85
|
+
* @deprecated set `value` on root Radio instead
|
|
86
|
+
* The element value is required for RadioGroup
|
|
87
|
+
*/
|
|
88
|
+
value?: RadioValue;
|
|
89
|
+
/**
|
|
90
|
+
* @deprecated set `defaultValue` on root RadioGroup instead
|
|
91
|
+
* Default value if `value` property is not provided
|
|
92
|
+
*/
|
|
93
|
+
defaultValue?: RadioValue;
|
|
94
|
+
/**
|
|
95
|
+
* @deprecated set `onChange` on root RadioGroup instead
|
|
96
|
+
* Called when the value changes
|
|
97
|
+
*/
|
|
98
|
+
onChange?: (value: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
99
|
+
/**
|
|
100
|
+
* @deprecated set `disabled` on root Radio instead
|
|
101
|
+
* Blocks access and changes to the form field
|
|
102
|
+
*/
|
|
103
|
+
disabled?: boolean;
|
|
104
|
+
};
|
|
107
105
|
|
|
108
106
|
/** @deprecated */
|
|
109
107
|
export interface IRadioCtx extends RadioCtx, UnknownProperties {}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/radio",
|
|
3
3
|
"description": "Semrush Radio Component",
|
|
4
|
-
"version": "16.0.
|
|
4
|
+
"version": "16.0.1-prerelease.3",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/flex-box": "16.0.
|
|
18
|
-
"@semcore/typography": "16.
|
|
17
|
+
"@semcore/flex-box": "16.0.1-prerelease.3",
|
|
18
|
+
"@semcore/typography": "16.1.1-prerelease.3"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
-
"@semcore/base-components": "^16.0.
|
|
21
|
+
"@semcore/base-components": "^16.0.1-prerelease.3"
|
|
22
22
|
},
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|