@sproutsocial/seeds-react-radio 1.3.25 → 1.3.27

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.
Files changed (8) hide show
  1. package/dist/esm/index.js +164 -60
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +4 -11
  4. package/dist/index.d.ts +4 -11
  5. package/dist/index.js +165 -61
  6. package/dist/index.js.map +1 -1
  7. package/dist/radio.css +121 -0
  8. package/package.json +13 -5
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
- // src/Radio.tsx
2
- import * as React from "react";
1
+ // src/RadioHybrid.tsx
2
+ import * as React2 from "react";
3
3
 
4
4
  // src/styles.ts
5
5
  import styled, { css } from "styled-components";
@@ -103,88 +103,192 @@ var LabelText = styled(Text)`
103
103
  LabelText.displayName = "LabelText";
104
104
  var styles_default = Container;
105
105
 
106
- // src/Radio.tsx
106
+ // src/RadioTailwind.tsx
107
+ import React from "react";
107
108
  import { jsx, jsxs } from "react/jsx-runtime";
108
- var Radio = class extends React.Component {
109
- static defaultProps = {
110
- disabled: false
111
- };
112
- handleChange = (e) => {
113
- if (!!this.props.checked || this.props.disabled) {
114
- return;
115
- }
116
- this.props.onChange && this.props.onChange(e);
117
- };
118
- handleFocus = (e) => {
119
- if (this.props.onFocus) {
120
- this.props.onFocus(e);
121
- }
122
- };
123
- handleBlur = (e) => {
124
- if (this.props.onBlur) {
125
- this.props.onBlur(e);
109
+ function cn(...inputs) {
110
+ const classes = [];
111
+ for (const input of inputs) {
112
+ if (!input) continue;
113
+ if (typeof input === "string") {
114
+ classes.push(input);
115
+ } else if (typeof input === "object") {
116
+ for (const [key, value] of Object.entries(input)) {
117
+ if (value) {
118
+ classes.push(key);
119
+ }
120
+ }
126
121
  }
127
- };
128
- render() {
122
+ }
123
+ return classes.join(" ");
124
+ }
125
+ var RadioTailwind = React.forwardRef(
126
+ ({
127
+ id,
128
+ value,
129
+ name,
130
+ label,
131
+ checked,
132
+ disabled: disabled2 = false,
133
+ onChange,
134
+ onFocus,
135
+ onBlur,
136
+ ariaLabel,
137
+ qa = {},
138
+ tabIndex,
139
+ className,
140
+ // `color` is a styled-system prop; consumers passing it route to the
141
+ // styled-components path via needsStyledComponents, so it never reaches
142
+ // here. Pull it out of `rest` so it is not forwarded to the DOM as an
143
+ // invalid attribute.
144
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
145
+ color,
146
+ ...rest
147
+ }, ref) => {
148
+ const handleChange = (e) => {
149
+ if (!!checked || disabled2) {
150
+ return;
151
+ }
152
+ onChange && onChange(e);
153
+ };
154
+ const handleFocus = (e) => {
155
+ if (onFocus) {
156
+ onFocus(e);
157
+ }
158
+ };
159
+ const handleBlur = (e) => {
160
+ if (onBlur) {
161
+ onBlur(e);
162
+ }
163
+ };
164
+ const Outer = label ? "label" : "span";
165
+ const outerClass = cn(
166
+ "seeds-radio",
167
+ { "seeds-radio-disabled": disabled2 },
168
+ className
169
+ );
170
+ const wrapperClass = cn("seeds-radio-wrapper", {
171
+ "seeds-radio-checked": checked === true,
172
+ "seeds-radio-disabled": disabled2
173
+ });
174
+ return /* @__PURE__ */ jsxs(Outer, { className: outerClass, ...rest, children: [
175
+ /* @__PURE__ */ jsx("span", { className: wrapperClass, children: /* @__PURE__ */ jsx(
176
+ "input",
177
+ {
178
+ ref,
179
+ type: "radio",
180
+ className: "seeds-radio-input",
181
+ id,
182
+ tabIndex,
183
+ "aria-label": ariaLabel,
184
+ value,
185
+ name,
186
+ checked,
187
+ disabled: disabled2,
188
+ onChange: handleChange,
189
+ onFocus: handleFocus,
190
+ onBlur: handleBlur,
191
+ "data-qa-radio": name || "",
192
+ "data-qa-radio-ischecked": checked === true,
193
+ "data-qa-radio-isdisabled": disabled2 === true,
194
+ ...qa
195
+ }
196
+ ) }),
197
+ label && /* @__PURE__ */ jsx("span", { className: "seeds-radio-label", children: label })
198
+ ] });
199
+ }
200
+ );
201
+ RadioTailwind.displayName = "RadioTailwind";
202
+ var RadioTailwind_default = RadioTailwind;
203
+
204
+ // src/RadioHybrid.tsx
205
+ import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
206
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
207
+ var RadioHybrid = React2.forwardRef(
208
+ (props, ref) => {
129
209
  const {
130
210
  id,
131
211
  value,
132
212
  name,
133
213
  label,
134
214
  checked,
135
- disabled: disabled2,
136
- /* eslint-disable @typescript-eslint/no-unused-vars */
215
+ disabled: disabled2 = false,
137
216
  onChange,
138
217
  onFocus,
139
218
  onBlur,
140
- /* eslint-enable @typescript-eslint/no-unused-vars */
141
219
  ariaLabel,
142
220
  qa = {},
143
221
  color,
144
222
  tabIndex,
145
223
  ...rest
146
- } = this.props;
147
- return /* @__PURE__ */ jsxs(
148
- styles_default,
149
- {
150
- as: label && "label",
151
- color,
152
- ...rest,
153
- children: [
154
- /* @__PURE__ */ jsx(InputWrapper, { checked, disabled: disabled2, children: /* @__PURE__ */ jsx(
155
- Input,
156
- {
157
- type: "radio",
158
- id,
159
- tabIndex,
160
- "aria-label": ariaLabel,
161
- value,
162
- name,
163
- checked,
164
- disabled: disabled2,
165
- onChange: this.handleChange,
166
- onFocus: this.handleFocus,
167
- onBlur: this.handleBlur,
168
- "data-qa-radio": name || "",
169
- "data-qa-radio-ischecked": checked === true,
170
- "data-qa-radio-isdisabled": disabled2 === true,
171
- ...qa
172
- }
173
- ) }),
174
- label && /* @__PURE__ */ jsx(LabelText, { disabled: disabled2, children: label })
175
- ]
224
+ } = props;
225
+ const handleChange = (e) => {
226
+ if (!!checked || disabled2) {
227
+ return;
176
228
  }
177
- );
229
+ onChange && onChange(e);
230
+ };
231
+ const handleFocus = (e) => {
232
+ if (onFocus) {
233
+ onFocus(e);
234
+ }
235
+ };
236
+ const handleBlur = (e) => {
237
+ if (onBlur) {
238
+ onBlur(e);
239
+ }
240
+ };
241
+ if (needsStyledComponents(props)) {
242
+ return /* @__PURE__ */ jsxs2(
243
+ styles_default,
244
+ {
245
+ as: label && "label",
246
+ color,
247
+ ...rest,
248
+ children: [
249
+ /* @__PURE__ */ jsx2(InputWrapper, { checked, disabled: disabled2, children: /* @__PURE__ */ jsx2(
250
+ Input,
251
+ {
252
+ ref,
253
+ type: "radio",
254
+ id,
255
+ tabIndex,
256
+ "aria-label": ariaLabel,
257
+ value,
258
+ name,
259
+ checked,
260
+ disabled: disabled2,
261
+ onChange: handleChange,
262
+ onFocus: handleFocus,
263
+ onBlur: handleBlur,
264
+ "data-qa-radio": name || "",
265
+ "data-qa-radio-ischecked": checked === true,
266
+ "data-qa-radio-isdisabled": disabled2 === true,
267
+ ...qa
268
+ }
269
+ ) }),
270
+ label && /* @__PURE__ */ jsx2(LabelText, { disabled: disabled2, children: label })
271
+ ]
272
+ }
273
+ );
274
+ }
275
+ return /* @__PURE__ */ jsx2(RadioTailwind_default, { ...props, ref });
178
276
  }
179
- };
277
+ );
278
+ RadioHybrid.displayName = "Radio";
279
+ var RadioHybrid_default = RadioHybrid;
280
+
281
+ // src/Radio.tsx
282
+ var Radio = RadioHybrid_default;
283
+ var Radio_default = Radio;
180
284
 
181
285
  // src/RadioTypes.ts
182
286
  import "react";
183
287
 
184
288
  // src/index.ts
185
- var index_default = Radio;
289
+ var index_default = Radio_default;
186
290
  export {
187
- Radio,
291
+ Radio_default as Radio,
188
292
  index_default as default
189
293
  };
190
294
  //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map CHANGED
@@ -1 +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 tabIndex,\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 tabIndex={tabIndex}\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"]}
1
+ {"version":3,"sources":["../../src/RadioHybrid.tsx","../../src/styles.ts","../../src/RadioTailwind.tsx","../../src/Radio.tsx","../../src/RadioTypes.ts","../../src/index.ts"],"sourcesContent":["/**\n * Hybrid Radio Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Container, { Input, InputWrapper, LabelText } from \"./styles\"; // Styled-components version\nimport RadioTailwind from \"./RadioTailwind\"; // Tailwind version\nimport type { TypeRadioProps } from \"./RadioTypes\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\n\nconst RadioHybrid = React.forwardRef<HTMLInputElement, TypeRadioProps>(\n (props, ref) => {\n const {\n id,\n value,\n name,\n label,\n checked,\n disabled = false,\n onChange,\n onFocus,\n onBlur,\n ariaLabel,\n qa = {},\n color,\n tabIndex,\n ...rest\n } = props;\n\n // Mirror the class component's guarded handlers: onChange only fires for an\n // unchecked, enabled input; focus/blur are simple pass-throughs.\n const handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n if (!!checked || disabled) {\n return;\n }\n onChange && onChange(e);\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n };\n\n // Styled-components path: any styled-system prop present (incl. color) or a\n // styled(Radio) extension (which injects a `theme` prop) renders the exact\n // composition the class component rendered previously.\n if (needsStyledComponents(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 ref={ref}\n type=\"radio\"\n id={id}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n disabled={disabled}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={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 // Use Tailwind version (preferred - better performance)\n return <RadioTailwind {...props} ref={ref} />;\n }\n);\n\nRadioHybrid.displayName = \"Radio\";\nexport default RadioHybrid;\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","/**\n * Tailwind CSS implementation of Radio component\n * Uses Seeds radio CSS classes from radio.css\n */\n\nimport React from \"react\";\nimport type { TypeRadioProps } from \"./RadioTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nconst RadioTailwind = React.forwardRef<HTMLInputElement, TypeRadioProps>(\n (\n {\n id,\n value,\n name,\n label,\n checked,\n disabled = false,\n onChange,\n onFocus,\n onBlur,\n ariaLabel,\n qa = {},\n tabIndex,\n className,\n // `color` is a styled-system prop; consumers passing it route to the\n // styled-components path via needsStyledComponents, so it never reaches\n // here. Pull it out of `rest` so it is not forwarded to the DOM as an\n // invalid attribute.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n color,\n ...rest\n },\n ref\n ) => {\n // Mirror the class component's guarded handlers: onChange only fires for an\n // unchecked, enabled input; focus/blur are simple pass-throughs.\n const handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n if (!!checked || disabled) {\n return;\n }\n onChange && onChange(e);\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n };\n\n const Outer = (label ? \"label\" : \"span\") as React.ElementType;\n\n const outerClass = cn(\n \"seeds-radio\",\n { \"seeds-radio-disabled\": disabled },\n className\n );\n\n const wrapperClass = cn(\"seeds-radio-wrapper\", {\n \"seeds-radio-checked\": checked === true,\n \"seeds-radio-disabled\": disabled,\n });\n\n return (\n <Outer className={outerClass} {...rest}>\n <span className={wrapperClass}>\n <input\n ref={ref}\n type=\"radio\"\n className=\"seeds-radio-input\"\n id={id}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n disabled={disabled}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n data-qa-radio={name || \"\"}\n data-qa-radio-ischecked={checked === true}\n data-qa-radio-isdisabled={disabled === true}\n {...qa}\n />\n </span>\n {label && <span className=\"seeds-radio-label\">{label}</span>}\n </Outer>\n );\n }\n);\n\nRadioTailwind.displayName = \"RadioTailwind\";\nexport default RadioTailwind;\n","import RadioHybrid from \"./RadioHybrid\";\n\n/**\n * Primitive Radio Element. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using styled-system props or styled() extension).\n */\nconst Radio = RadioHybrid;\n\nexport default Radio;\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":["React","disabled","jsx","jsxs","disabled"]}
package/dist/index.d.mts CHANGED
@@ -1,4 +1,3 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import * as React from 'react';
3
2
  import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
4
3
 
@@ -21,16 +20,10 @@ interface TypeRadioProps extends TypeStyledComponentsCommonProps, TypeSystemComm
21
20
  }
22
21
 
23
22
  /**
24
- * Primitive Radio Element
23
+ * Primitive Radio Element. Automatically routes between the Tailwind
24
+ * implementation (preferred) and the styled-components implementation (for
25
+ * consumers using styled-system props or styled() extension).
25
26
  */
26
- declare class Radio extends React.Component<TypeRadioProps> {
27
- static defaultProps: {
28
- disabled: boolean;
29
- };
30
- handleChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
31
- handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
32
- handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
33
- render(): react_jsx_runtime.JSX.Element;
34
- }
27
+ declare const Radio: React.ForwardRefExoticComponent<Omit<TypeRadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
35
28
 
36
29
  export { Radio, type TypeRadioProps, Radio as default };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import * as React from 'react';
3
2
  import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
4
3
 
@@ -21,16 +20,10 @@ interface TypeRadioProps extends TypeStyledComponentsCommonProps, TypeSystemComm
21
20
  }
22
21
 
23
22
  /**
24
- * Primitive Radio Element
23
+ * Primitive Radio Element. Automatically routes between the Tailwind
24
+ * implementation (preferred) and the styled-components implementation (for
25
+ * consumers using styled-system props or styled() extension).
25
26
  */
26
- declare class Radio extends React.Component<TypeRadioProps> {
27
- static defaultProps: {
28
- disabled: boolean;
29
- };
30
- handleChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
31
- handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
32
- handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
33
- render(): react_jsx_runtime.JSX.Element;
34
- }
27
+ declare const Radio: React.ForwardRefExoticComponent<Omit<TypeRadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
35
28
 
36
29
  export { Radio, type TypeRadioProps, Radio as default };
package/dist/index.js CHANGED
@@ -30,13 +30,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  // src/index.ts
31
31
  var index_exports = {};
32
32
  __export(index_exports, {
33
- Radio: () => Radio,
33
+ Radio: () => Radio_default,
34
34
  default: () => index_default
35
35
  });
36
36
  module.exports = __toCommonJS(index_exports);
37
37
 
38
- // src/Radio.tsx
39
- var React = __toESM(require("react"));
38
+ // src/RadioHybrid.tsx
39
+ var React2 = __toESM(require("react"));
40
40
 
41
41
  // src/styles.ts
42
42
  var import_styled_components = __toESM(require("styled-components"));
@@ -140,86 +140,190 @@ var LabelText = (0, import_styled_components.default)(import_seeds_react_text.de
140
140
  LabelText.displayName = "LabelText";
141
141
  var styles_default = Container;
142
142
 
143
- // src/Radio.tsx
143
+ // src/RadioTailwind.tsx
144
+ var import_react = __toESM(require("react"));
144
145
  var import_jsx_runtime = require("react/jsx-runtime");
145
- var Radio = class extends React.Component {
146
- static defaultProps = {
147
- disabled: false
148
- };
149
- handleChange = (e) => {
150
- if (!!this.props.checked || this.props.disabled) {
151
- return;
152
- }
153
- this.props.onChange && this.props.onChange(e);
154
- };
155
- handleFocus = (e) => {
156
- if (this.props.onFocus) {
157
- this.props.onFocus(e);
158
- }
159
- };
160
- handleBlur = (e) => {
161
- if (this.props.onBlur) {
162
- this.props.onBlur(e);
146
+ function cn(...inputs) {
147
+ const classes = [];
148
+ for (const input of inputs) {
149
+ if (!input) continue;
150
+ if (typeof input === "string") {
151
+ classes.push(input);
152
+ } else if (typeof input === "object") {
153
+ for (const [key, value] of Object.entries(input)) {
154
+ if (value) {
155
+ classes.push(key);
156
+ }
157
+ }
163
158
  }
164
- };
165
- render() {
159
+ }
160
+ return classes.join(" ");
161
+ }
162
+ var RadioTailwind = import_react.default.forwardRef(
163
+ ({
164
+ id,
165
+ value,
166
+ name,
167
+ label,
168
+ checked,
169
+ disabled: disabled2 = false,
170
+ onChange,
171
+ onFocus,
172
+ onBlur,
173
+ ariaLabel,
174
+ qa = {},
175
+ tabIndex,
176
+ className,
177
+ // `color` is a styled-system prop; consumers passing it route to the
178
+ // styled-components path via needsStyledComponents, so it never reaches
179
+ // here. Pull it out of `rest` so it is not forwarded to the DOM as an
180
+ // invalid attribute.
181
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
182
+ color,
183
+ ...rest
184
+ }, ref) => {
185
+ const handleChange = (e) => {
186
+ if (!!checked || disabled2) {
187
+ return;
188
+ }
189
+ onChange && onChange(e);
190
+ };
191
+ const handleFocus = (e) => {
192
+ if (onFocus) {
193
+ onFocus(e);
194
+ }
195
+ };
196
+ const handleBlur = (e) => {
197
+ if (onBlur) {
198
+ onBlur(e);
199
+ }
200
+ };
201
+ const Outer = label ? "label" : "span";
202
+ const outerClass = cn(
203
+ "seeds-radio",
204
+ { "seeds-radio-disabled": disabled2 },
205
+ className
206
+ );
207
+ const wrapperClass = cn("seeds-radio-wrapper", {
208
+ "seeds-radio-checked": checked === true,
209
+ "seeds-radio-disabled": disabled2
210
+ });
211
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Outer, { className: outerClass, ...rest, children: [
212
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: wrapperClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
213
+ "input",
214
+ {
215
+ ref,
216
+ type: "radio",
217
+ className: "seeds-radio-input",
218
+ id,
219
+ tabIndex,
220
+ "aria-label": ariaLabel,
221
+ value,
222
+ name,
223
+ checked,
224
+ disabled: disabled2,
225
+ onChange: handleChange,
226
+ onFocus: handleFocus,
227
+ onBlur: handleBlur,
228
+ "data-qa-radio": name || "",
229
+ "data-qa-radio-ischecked": checked === true,
230
+ "data-qa-radio-isdisabled": disabled2 === true,
231
+ ...qa
232
+ }
233
+ ) }),
234
+ label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "seeds-radio-label", children: label })
235
+ ] });
236
+ }
237
+ );
238
+ RadioTailwind.displayName = "RadioTailwind";
239
+ var RadioTailwind_default = RadioTailwind;
240
+
241
+ // src/RadioHybrid.tsx
242
+ var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
243
+ var import_jsx_runtime2 = require("react/jsx-runtime");
244
+ var RadioHybrid = React2.forwardRef(
245
+ (props, ref) => {
166
246
  const {
167
247
  id,
168
248
  value,
169
249
  name,
170
250
  label,
171
251
  checked,
172
- disabled: disabled2,
173
- /* eslint-disable @typescript-eslint/no-unused-vars */
252
+ disabled: disabled2 = false,
174
253
  onChange,
175
254
  onFocus,
176
255
  onBlur,
177
- /* eslint-enable @typescript-eslint/no-unused-vars */
178
256
  ariaLabel,
179
257
  qa = {},
180
258
  color,
181
259
  tabIndex,
182
260
  ...rest
183
- } = this.props;
184
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
185
- styles_default,
186
- {
187
- as: label && "label",
188
- color,
189
- ...rest,
190
- children: [
191
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputWrapper, { checked, disabled: disabled2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
192
- Input,
193
- {
194
- type: "radio",
195
- id,
196
- tabIndex,
197
- "aria-label": ariaLabel,
198
- value,
199
- name,
200
- checked,
201
- disabled: disabled2,
202
- onChange: this.handleChange,
203
- onFocus: this.handleFocus,
204
- onBlur: this.handleBlur,
205
- "data-qa-radio": name || "",
206
- "data-qa-radio-ischecked": checked === true,
207
- "data-qa-radio-isdisabled": disabled2 === true,
208
- ...qa
209
- }
210
- ) }),
211
- label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelText, { disabled: disabled2, children: label })
212
- ]
261
+ } = props;
262
+ const handleChange = (e) => {
263
+ if (!!checked || disabled2) {
264
+ return;
213
265
  }
214
- );
266
+ onChange && onChange(e);
267
+ };
268
+ const handleFocus = (e) => {
269
+ if (onFocus) {
270
+ onFocus(e);
271
+ }
272
+ };
273
+ const handleBlur = (e) => {
274
+ if (onBlur) {
275
+ onBlur(e);
276
+ }
277
+ };
278
+ if ((0, import_seeds_react_system_props2.needsStyledComponents)(props)) {
279
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
280
+ styles_default,
281
+ {
282
+ as: label && "label",
283
+ color,
284
+ ...rest,
285
+ children: [
286
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InputWrapper, { checked, disabled: disabled2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
287
+ Input,
288
+ {
289
+ ref,
290
+ type: "radio",
291
+ id,
292
+ tabIndex,
293
+ "aria-label": ariaLabel,
294
+ value,
295
+ name,
296
+ checked,
297
+ disabled: disabled2,
298
+ onChange: handleChange,
299
+ onFocus: handleFocus,
300
+ onBlur: handleBlur,
301
+ "data-qa-radio": name || "",
302
+ "data-qa-radio-ischecked": checked === true,
303
+ "data-qa-radio-isdisabled": disabled2 === true,
304
+ ...qa
305
+ }
306
+ ) }),
307
+ label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LabelText, { disabled: disabled2, children: label })
308
+ ]
309
+ }
310
+ );
311
+ }
312
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadioTailwind_default, { ...props, ref });
215
313
  }
216
- };
314
+ );
315
+ RadioHybrid.displayName = "Radio";
316
+ var RadioHybrid_default = RadioHybrid;
317
+
318
+ // src/Radio.tsx
319
+ var Radio = RadioHybrid_default;
320
+ var Radio_default = Radio;
217
321
 
218
322
  // src/RadioTypes.ts
219
- var React2 = require("react");
323
+ var React3 = require("react");
220
324
 
221
325
  // src/index.ts
222
- var index_default = Radio;
326
+ var index_default = Radio_default;
223
327
  // Annotate the CommonJS export names for ESM import in node:
224
328
  0 && (module.exports = {
225
329
  Radio
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/Radio.tsx","../src/styles.ts","../src/RadioTypes.ts"],"sourcesContent":["import Radio from \"./Radio\";\n\nexport default Radio;\nexport { Radio };\nexport * from \"./RadioTypes\";\n","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 tabIndex,\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 tabIndex={tabIndex}\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"],"mappings":"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","names":["styled","Text","disabled","React"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/RadioHybrid.tsx","../src/styles.ts","../src/RadioTailwind.tsx","../src/Radio.tsx","../src/RadioTypes.ts"],"sourcesContent":["import Radio from \"./Radio\";\n\nexport default Radio;\nexport { Radio };\nexport * from \"./RadioTypes\";\n","/**\n * Hybrid Radio Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Container, { Input, InputWrapper, LabelText } from \"./styles\"; // Styled-components version\nimport RadioTailwind from \"./RadioTailwind\"; // Tailwind version\nimport type { TypeRadioProps } from \"./RadioTypes\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\n\nconst RadioHybrid = React.forwardRef<HTMLInputElement, TypeRadioProps>(\n (props, ref) => {\n const {\n id,\n value,\n name,\n label,\n checked,\n disabled = false,\n onChange,\n onFocus,\n onBlur,\n ariaLabel,\n qa = {},\n color,\n tabIndex,\n ...rest\n } = props;\n\n // Mirror the class component's guarded handlers: onChange only fires for an\n // unchecked, enabled input; focus/blur are simple pass-throughs.\n const handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n if (!!checked || disabled) {\n return;\n }\n onChange && onChange(e);\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n };\n\n // Styled-components path: any styled-system prop present (incl. color) or a\n // styled(Radio) extension (which injects a `theme` prop) renders the exact\n // composition the class component rendered previously.\n if (needsStyledComponents(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 ref={ref}\n type=\"radio\"\n id={id}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n disabled={disabled}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={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 // Use Tailwind version (preferred - better performance)\n return <RadioTailwind {...props} ref={ref} />;\n }\n);\n\nRadioHybrid.displayName = \"Radio\";\nexport default RadioHybrid;\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","/**\n * Tailwind CSS implementation of Radio component\n * Uses Seeds radio CSS classes from radio.css\n */\n\nimport React from \"react\";\nimport type { TypeRadioProps } from \"./RadioTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nconst RadioTailwind = React.forwardRef<HTMLInputElement, TypeRadioProps>(\n (\n {\n id,\n value,\n name,\n label,\n checked,\n disabled = false,\n onChange,\n onFocus,\n onBlur,\n ariaLabel,\n qa = {},\n tabIndex,\n className,\n // `color` is a styled-system prop; consumers passing it route to the\n // styled-components path via needsStyledComponents, so it never reaches\n // here. Pull it out of `rest` so it is not forwarded to the DOM as an\n // invalid attribute.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n color,\n ...rest\n },\n ref\n ) => {\n // Mirror the class component's guarded handlers: onChange only fires for an\n // unchecked, enabled input; focus/blur are simple pass-throughs.\n const handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n if (!!checked || disabled) {\n return;\n }\n onChange && onChange(e);\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e);\n }\n };\n\n const Outer = (label ? \"label\" : \"span\") as React.ElementType;\n\n const outerClass = cn(\n \"seeds-radio\",\n { \"seeds-radio-disabled\": disabled },\n className\n );\n\n const wrapperClass = cn(\"seeds-radio-wrapper\", {\n \"seeds-radio-checked\": checked === true,\n \"seeds-radio-disabled\": disabled,\n });\n\n return (\n <Outer className={outerClass} {...rest}>\n <span className={wrapperClass}>\n <input\n ref={ref}\n type=\"radio\"\n className=\"seeds-radio-input\"\n id={id}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n disabled={disabled}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n data-qa-radio={name || \"\"}\n data-qa-radio-ischecked={checked === true}\n data-qa-radio-isdisabled={disabled === true}\n {...qa}\n />\n </span>\n {label && <span className=\"seeds-radio-label\">{label}</span>}\n </Outer>\n );\n }\n);\n\nRadioTailwind.displayName = \"RadioTailwind\";\nexport default RadioTailwind;\n","import RadioHybrid from \"./RadioHybrid\";\n\n/**\n * Primitive Radio Element. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using styled-system props or styled() extension).\n */\nconst Radio = RadioHybrid;\n\nexport default Radio;\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"],"mappings":"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","names":["React","styled","Text","React","disabled","import_seeds_react_system_props","import_jsx_runtime","disabled","React"]}
package/dist/radio.css ADDED
@@ -0,0 +1,121 @@
1
+ /**
2
+ * Seeds Radio component classes
3
+ * Use these instead of writing out individual Tailwind utility classes.
4
+ *
5
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
6
+ * CSS variable definitions and dark mode support.
7
+ *
8
+ * Usage:
9
+ * <label class="seeds-radio">
10
+ * <span class="seeds-radio-wrapper seeds-radio-checked">
11
+ * <input type="radio" class="seeds-radio-input" />
12
+ * </span>
13
+ * <span class="seeds-radio-label">Label</span>
14
+ * </label>
15
+ */
16
+
17
+ @layer components {
18
+ .seeds-radio {
19
+ display: inline-flex;
20
+ align-items: center;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ .seeds-radio-wrapper {
25
+ position: relative;
26
+ width: var(--space-400);
27
+ height: var(--space-400);
28
+ cursor: pointer;
29
+ }
30
+
31
+ .seeds-radio-wrapper.seeds-radio-disabled {
32
+ opacity: 0.4;
33
+ pointer-events: none;
34
+ cursor: not-allowed;
35
+ }
36
+
37
+ .seeds-radio-input {
38
+ box-sizing: border-box;
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ width: 100%;
43
+ height: 100%;
44
+ margin: 0;
45
+ appearance: none;
46
+ cursor: pointer;
47
+ border: 1px solid var(--color-form-border-base);
48
+ border-radius: 50%;
49
+ background-color: var(--color-form-bg-base);
50
+ transition:
51
+ border-color var(--duration-fast) ease-in,
52
+ background-color var(--duration-fast) ease-in;
53
+ }
54
+
55
+ /* Focus ring mirrors button.css (the CSS form of the focusRing mixin) */
56
+ .seeds-radio-input:focus {
57
+ outline: none;
58
+ box-shadow:
59
+ 0 0 0 1px var(--color-button-primary-bg-base),
60
+ 0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
61
+ }
62
+
63
+ .seeds-radio-wrapper:before {
64
+ content: "";
65
+ position: absolute;
66
+ top: 50%;
67
+ left: 50%;
68
+ transform: translate(-50%, -50%);
69
+ width: 6px;
70
+ height: 6px;
71
+ border-radius: 50%;
72
+ opacity: 0;
73
+ transition: opacity var(--duration-fast) ease-in;
74
+ z-index: 1;
75
+ pointer-events: none;
76
+ }
77
+
78
+ /* Unchecked hover / focus: show the dot (only when NOT checked) */
79
+ .seeds-radio-wrapper:not(.seeds-radio-checked):hover .seeds-radio-input,
80
+ .seeds-radio-wrapper:not(.seeds-radio-checked):focus-within .seeds-radio-input {
81
+ border-color: var(--color-form-border-base);
82
+ background-color: var(--color-form-bg-base);
83
+ }
84
+
85
+ .seeds-radio-wrapper:not(.seeds-radio-checked):hover:before,
86
+ .seeds-radio-wrapper:not(.seeds-radio-checked):focus-within:before {
87
+ opacity: 1;
88
+ background-color: var(--color-form-bg-base);
89
+ }
90
+
91
+ /* Disabled-unchecked keeps the hover dot hidden (parity with opacity: disabled ? 0 : 1) */
92
+ .seeds-radio-wrapper.seeds-radio-disabled:not(.seeds-radio-checked):hover:before {
93
+ opacity: 0;
94
+ }
95
+
96
+ /* Checked state */
97
+ .seeds-radio-wrapper.seeds-radio-checked .seeds-radio-input {
98
+ border-color: var(--color-form-border-selected);
99
+ /* No --color-form-bg-selected token exists; form.background.selected resolves
100
+ to the same value as form.border.selected in both light and dark themes. */
101
+ background-color: var(--color-form-border-selected);
102
+ }
103
+
104
+ .seeds-radio-wrapper.seeds-radio-checked:before {
105
+ opacity: 1;
106
+ background-color: var(--color-form-bg-base);
107
+ }
108
+
109
+ .seeds-radio-label {
110
+ margin-left: var(--space-300);
111
+ font-size: var(--font-size-200);
112
+ line-height: 1;
113
+ cursor: pointer;
114
+ color: var(--color-text-headline);
115
+ }
116
+
117
+ .seeds-radio.seeds-radio-disabled .seeds-radio-label {
118
+ opacity: 0.4;
119
+ cursor: not-allowed;
120
+ }
121
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-radio",
3
- "version": "1.3.25",
3
+ "version": "1.3.27",
4
4
  "description": "Seeds React Radio",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -10,17 +10,25 @@
10
10
  "files": [
11
11
  "dist"
12
12
  ],
13
+ "exports": {
14
+ ".": {
15
+ "import": "./dist/esm/index.js",
16
+ "require": "./dist/index.js",
17
+ "types": "./dist/index.d.ts"
18
+ },
19
+ "./dist/radio.css": "./dist/radio.css"
20
+ },
13
21
  "scripts": {
14
- "build": "tsup --dts",
15
- "build:debug": "tsup --dts --metafile",
22
+ "build": "tsup --dts && cp src/radio.css dist/radio.css",
23
+ "build:debug": "tsup --dts --metafile && cp src/radio.css dist/radio.css",
16
24
  "dev": "tsup --watch --dts",
17
25
  "clean": "rm -rf .turbo dist",
18
26
  "clean:modules": "rm -rf node_modules",
19
27
  "typecheck": "tsc --noEmit"
20
28
  },
21
29
  "dependencies": {
22
- "@sproutsocial/seeds-react-system-props": "^3.1.1",
23
- "@sproutsocial/seeds-react-text": "^1.5.0",
30
+ "@sproutsocial/seeds-react-system-props": "^3.1.2",
31
+ "@sproutsocial/seeds-react-text": "^1.5.1",
24
32
  "@sproutsocial/seeds-react-mixins": "^4.3.9"
25
33
  },
26
34
  "devDependencies": {