@sproutsocial/seeds-react-radio 1.0.1 → 1.2.0
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/dist/esm/index.js +35 -4490
- package/dist/esm/index.js.map +1 -0
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +41 -4468
- package/dist/index.js.map +1 -0
- package/package.json +14 -6
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Radio.tsx","../../src/styles.ts","../../src/RadioTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, { Input, InputWrapper, LabelText } from \"./styles\";\nimport type { TypeRadioProps } from \"./RadioTypes\";\n\n/**\n * Primitive Radio Element\n */\nexport default class Radio extends React.Component<TypeRadioProps> {\n static defaultProps = {\n disabled: false,\n };\n\n handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n if (!!this.props.checked || this.props.disabled) {\n return;\n }\n\n this.props.onChange && this.props.onChange(e);\n };\n\n handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(e);\n }\n };\n\n handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onBlur) {\n this.props.onBlur(e);\n }\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n checked,\n disabled,\n /* eslint-disable @typescript-eslint/no-unused-vars */\n onChange,\n onFocus,\n onBlur,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n ariaLabel,\n qa = {},\n color,\n ...rest\n } = this.props;\n return (\n <Container\n as={label && \"label\"}\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n {...rest}\n >\n <InputWrapper checked={checked} disabled={disabled}>\n <Input\n type=\"radio\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n disabled={disabled}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n data-qa-radio={name || \"\"}\n data-qa-radio-ischecked={checked === true}\n data-qa-radio-isdisabled={disabled === true}\n {...qa}\n />\n </InputWrapper>\n {label && <LabelText disabled={disabled}>{label}</LabelText>}\n </Container>\n );\n }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport Text from \"@sproutsocial/seeds-react-text\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\n\nContainer.displayName = \"Radio\";\n\nexport const Input = styled.input`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 50%;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n\n &:focus {\n ${focusRing}\n }\n`;\n\nInput.displayName = \"Input\";\n\nexport const InputWrapper = styled.span<{\n checked?: boolean;\n disabled?: boolean;\n}>`\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n ${(props) => props.disabled && disabled}\n\n &:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 6px;\n height: 6px;\n border-radius: 50%;\n opacity: 0;\n transition: opacity ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n z-index: 1;\n pointer-events: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ${Input} {\n border-color: ${props.theme.colors.form.border.base};\n background-color: ${props.theme.colors.form.background.base};\n }\n\n &:before {\n opacity: ${props.disabled ? 0 : 1};\n background-color: ${props.theme.colors.form.background.base};\n }\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ${Input} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n &:before {\n opacity: 1;\n background-color: ${props.theme.colors.form.background.base};\n }\n `}\n`;\n\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const LabelText = styled(Text)<{ disabled?: boolean }>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\n\nLabelText.displayName = \"LabelText\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeQaProps = object;\n\nexport interface TypeRadioProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, keyof TypeSystemCommonProps> {\n /** ID of the form element, should match the \"for\" value of the associated label */\n id: string;\n name: string;\n\n /** Label text to display next to the radio input */\n label?: string;\n\n /** Label used to describe the input if not used with an accompanying visual label */\n ariaLabel?: string;\n value?: string;\n checked?: boolean;\n disabled?: boolean;\n qa?: TypeQaProps;\n onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n}\n","import Radio from \"./Radio\";\n\nexport default Radio;\nexport { Radio };\nexport * from \"./RadioTypes\";\n"],"mappings":"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","names":["disabled"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
3
4
|
|
|
@@ -29,7 +30,7 @@ declare class Radio extends React.Component<TypeRadioProps> {
|
|
|
29
30
|
handleChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
30
31
|
handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
31
32
|
handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
32
|
-
render():
|
|
33
|
+
render(): react_jsx_runtime.JSX.Element;
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
export { Radio, type TypeRadioProps, Radio as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
3
4
|
|
|
@@ -29,7 +30,7 @@ declare class Radio extends React.Component<TypeRadioProps> {
|
|
|
29
30
|
handleChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
30
31
|
handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
31
32
|
handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
32
|
-
render():
|
|
33
|
+
render(): react_jsx_runtime.JSX.Element;
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
export { Radio, type TypeRadioProps, Radio as default };
|