@dt-dds/react-radio 1.0.0-beta.87 → 1.0.0-beta.89

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 (7) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +11 -8
  3. package/dist/index.d.mts +13 -6
  4. package/dist/index.d.ts +13 -6
  5. package/dist/index.js +135 -55
  6. package/dist/index.mjs +135 -55
  7. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @dt-ui/react-radio
2
2
 
3
+ ## 1.0.0-beta.89
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [223664b]
8
+ - @dt-dds/react-box@1.0.0-beta.73
9
+
10
+ ## 1.0.0-beta.88
11
+
12
+ ### Minor Changes
13
+
14
+ - feat: update radio button
15
+
16
+ ### Patch Changes
17
+
18
+ - chore(react-radio): bump @dt-dds/react-typography patch
19
+ - Updated dependencies [223664b]
20
+ - @dt-dds/react-box@1.0.0-beta.72
21
+
3
22
  ## 1.0.0-beta.87
4
23
 
5
24
  ### Patch Changes
package/README.md CHANGED
@@ -21,14 +21,16 @@ export const App = () => {
21
21
 
22
22
  ### Radio
23
23
 
24
- | Property | Type | Default | Description |
25
- | ------------------ | ---------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------- |
26
- | `label` | `string` | - | A label to help users understand the scope of the radio. |
27
- | `onChange` | `(evt: ChangeEvent<HTMLInputElement>) => void` | - | The triggered function when the input change. |
28
- | `isDisabled` | `boolean` | `false` | Specifies if the element should be disabled. |
29
- | `isDefaultChecked` | `boolean` | `false` | If present, indicates that this radio button is the default selected one in the group |
30
- | `name` | `string` | 'radio-group-name' | Should represent the group name |
31
- | `value` | `string` | - | String containing the radio button's value |
24
+ | Property | Type | Default | Description |
25
+ | ------------------ | ---------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
26
+ | `label` | `string` | - | A label to help users understand the scope of the radio. |
27
+ | `onChange` | `(evt: ChangeEvent<HTMLInputElement>) => void` | - | The triggered function when the input change. |
28
+ | `isDisabled` | `boolean` | `false` | Specifies if the element should be disabled. |
29
+ | `isDefaultChecked` | `boolean` | `false` | Indicates that this default radio button is selected one in the group. |
30
+ | `isChecked` | `boolean` | `false` | Indicates that this radio button is selected one in the group. Used when the radio is controlled by another element |
31
+ | `name` | `string` | `radio-group-name` | Should represent the group name |
32
+ | `value` | `string` | - | String containing the radio button's value |
33
+ | `hasError` | `boolean` | `false` | Indicates that the radio button has an error |
32
34
 
33
35
  ### RadioGroup
34
36
 
@@ -39,6 +41,7 @@ export const App = () => {
39
41
  | `direction` | "row" \| "column" | row | Sets the flex direction of the group |
40
42
  | `name` | `string` | - | Should represent the group name |
41
43
  | `onChange` | `(evt: ChangeEvent<HTMLInputElement>) => void` | - | The triggered function when the input change. |
44
+ | `size` | `"small" \| "large" | `large` | Sets the dimensions of the radio buttons |
42
45
 
43
46
  ## Stack
44
47
 
package/dist/index.d.mts CHANGED
@@ -2,23 +2,30 @@ import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
  import { BaseProps } from '@dt-dds/react-core';
4
4
 
5
- type Direction = 'column' | 'row';
5
+ type RadioDirection = 'column' | 'row';
6
+ type RadioSize = 'large' | 'small';
6
7
  interface RadioGroupProps extends BaseProps {
7
8
  onChange: React.ChangeEventHandler<HTMLInputElement>;
8
9
  name: string;
9
- direction?: Direction;
10
+ direction?: RadioDirection;
11
+ size?: RadioSize;
10
12
  }
11
13
  interface RadioProps {
12
- label: string;
14
+ label?: string;
13
15
  value: string;
14
16
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
15
- isDefaultChecked?: boolean;
17
+ isChecked?: boolean;
16
18
  isDisabled?: boolean;
17
19
  name?: string;
20
+ hasError?: boolean;
21
+ size?: RadioSize;
22
+ dataTestId?: string;
23
+ isDefaultChecked?: boolean;
18
24
  }
19
25
 
20
- declare const RadioGroup: ({ children, onChange, dataTestId, direction, name, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
21
- declare const Radio: ({ onChange, label, isDefaultChecked, isDisabled, name, value, }: RadioProps) => react_jsx_runtime.JSX.Element;
26
+ declare const Radio: ({ onChange, label, isChecked, isDefaultChecked, isDisabled, name, value, hasError, size, dataTestId, }: RadioProps) => react_jsx_runtime.JSX.Element;
27
+
28
+ declare const RadioGroup: ({ children, onChange, dataTestId, direction, size, name, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
22
29
 
23
30
  declare module '@emotion/react' {
24
31
  interface Theme extends CustomTheme {
package/dist/index.d.ts CHANGED
@@ -2,23 +2,30 @@ import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
  import { BaseProps } from '@dt-dds/react-core';
4
4
 
5
- type Direction = 'column' | 'row';
5
+ type RadioDirection = 'column' | 'row';
6
+ type RadioSize = 'large' | 'small';
6
7
  interface RadioGroupProps extends BaseProps {
7
8
  onChange: React.ChangeEventHandler<HTMLInputElement>;
8
9
  name: string;
9
- direction?: Direction;
10
+ direction?: RadioDirection;
11
+ size?: RadioSize;
10
12
  }
11
13
  interface RadioProps {
12
- label: string;
14
+ label?: string;
13
15
  value: string;
14
16
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
15
- isDefaultChecked?: boolean;
17
+ isChecked?: boolean;
16
18
  isDisabled?: boolean;
17
19
  name?: string;
20
+ hasError?: boolean;
21
+ size?: RadioSize;
22
+ dataTestId?: string;
23
+ isDefaultChecked?: boolean;
18
24
  }
19
25
 
20
- declare const RadioGroup: ({ children, onChange, dataTestId, direction, name, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
21
- declare const Radio: ({ onChange, label, isDefaultChecked, isDisabled, name, value, }: RadioProps) => react_jsx_runtime.JSX.Element;
26
+ declare const Radio: ({ onChange, label, isChecked, isDefaultChecked, isDisabled, name, value, hasError, size, dataTestId, }: RadioProps) => react_jsx_runtime.JSX.Element;
27
+
28
+ declare const RadioGroup: ({ children, onChange, dataTestId, direction, size, name, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
22
29
 
23
30
  declare module '@emotion/react' {
24
31
  interface Theme extends CustomTheme {
package/dist/index.js CHANGED
@@ -47,124 +47,204 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
47
47
  // index.ts
48
48
  var index_exports = {};
49
49
  __export(index_exports, {
50
- Radio: () => Radio_default,
50
+ Radio: () => Radio,
51
51
  RadioGroup: () => RadioGroup
52
52
  });
53
53
  module.exports = __toCommonJS(index_exports);
54
54
 
55
55
  // src/Radio.tsx
56
- var import_react = require("react");
56
+ var import_react = require("@emotion/react");
57
57
  var import_react_box = require("@dt-dds/react-box");
58
+ var import_react_typography = require("@dt-dds/react-typography");
58
59
 
59
60
  // src/Radio.styled.tsx
60
61
  var import_styled = __toESM(require("@emotion/styled"));
62
+ var RADIO_SIZES = {
63
+ large: {
64
+ outerCircle: 24,
65
+ innerCircle: 10
66
+ },
67
+ small: {
68
+ outerCircle: 20,
69
+ innerCircle: 8
70
+ }
71
+ };
61
72
  var RadioInputStyled = import_styled.default.input`
62
- ${({ theme }) => `
73
+ ${({ theme, radioSize }) => `
63
74
  background: ${theme.palette.surface.contrast};
64
- border: 1px solid ${theme.palette.border.default};
75
+ border: 1px solid ${theme.palette.informative.default};
65
76
  border-radius: 50%;
66
- width: 24px;
67
- height: 24px;
77
+ width: ${RADIO_SIZES[radioSize].outerCircle}px;
78
+ height: ${RADIO_SIZES[radioSize].outerCircle}px;
68
79
  appearance: none;
69
-
70
- &:disabled {
71
- pointer-events: none;
72
- cursor: not-allowed;
73
- }
80
+ position: relative;
81
+ cursor: pointer;
82
+ flex-shrink: 0;
74
83
 
75
84
  &:disabled + label {
76
85
  color: ${theme.palette.content.light};
77
86
  }
78
87
 
88
+ &:hover {
89
+ background: ${theme.palette.informative.light};
90
+ }
91
+
92
+ &:checked:not(:disabled):hover {
93
+ background: ${theme.palette.informative.dark};
94
+ border-color: ${theme.palette.informative.dark};
95
+ }
96
+
79
97
  &:checked {
80
- border-width: 7px;
81
- border-color: ${theme.palette.primary.default};
98
+ background: ${theme.palette.informative.default};
82
99
  }
83
100
 
84
- &:checked:disabled {
85
- border-color: ${theme.palette.primary.medium};
101
+ &:disabled {
102
+ pointer-events: none;
103
+ cursor: not-allowed;
104
+ border-color: ${theme.palette.informative.light};
105
+ background-color: ${theme.palette.informative.light};
86
106
  }
87
107
 
88
108
  &:checked:before {
89
- content: '';
90
- height: 10px;
91
- width: 10px;
109
+ content: "";
110
+ width: ${RADIO_SIZES[radioSize].innerCircle}px;
111
+ height: ${RADIO_SIZES[radioSize].innerCircle}px;
112
+ background: ${theme.palette.surface.contrast};
92
113
  border-radius: 50%;
93
- display: block;
114
+ position: absolute;
115
+ top: 50%;
116
+ left: 50%;
117
+ transform: translate(-50%, -50%);
118
+ }
119
+
120
+ &[data-error="true"] {
121
+ border-color: ${theme.palette.error.default};
122
+ }
123
+
124
+ &[data-error="true"]:hover {
125
+ background-color: ${theme.palette.error.light};
126
+ }
127
+
128
+ &[data-error="true"]:disabled {
129
+ background-color: ${theme.palette.error.light};
130
+ border-color: ${theme.palette.error.light};
131
+ }
132
+
133
+ &[data-error="true"]:checked {
134
+ background-color: ${theme.palette.error.default};
135
+ }
136
+
137
+ &[data-error="true"]:checked:disabled {
138
+ background-color: ${theme.palette.error.light};
139
+ border-color: ${theme.palette.error.light};
140
+ }
141
+
142
+ &[data-error="true"]:checked:not(:disabled):hover {
143
+ background-color: ${theme.palette.error.dark};
144
+ border-color: ${theme.palette.error.dark};
145
+ }
146
+
147
+ &:focus-visible {
148
+ outline: 2px solid ${theme.palette.primary.default};
149
+ outline-offset: 2px;
94
150
  }
95
- `}
96
- `;
97
- var RadioLabelStyled = import_styled.default.label`
98
- ${({ theme }) => `
99
- ${theme.fontStyles.bodyMdRegular};
100
- color: ${theme.palette.content.default};
101
- cursor: inherit;
102
151
  `}
103
152
  `;
104
153
 
105
154
  // src/Radio.tsx
106
155
  var import_jsx_runtime = require("react/jsx-runtime");
107
- var RadioGroup = ({
108
- children,
109
- onChange,
110
- dataTestId,
111
- direction = "row",
112
- name
113
- }) => {
114
- const clonedChildren = (0, import_react.useMemo)(
115
- () => import_react.Children.map(children, (child) => {
116
- return child && (0, import_react.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
117
- onChange,
118
- name
119
- }));
120
- }),
121
- [children, onChange, name]
122
- );
123
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
124
- import_react_box.Box,
125
- {
126
- "data-testid": dataTestId != null ? dataTestId : "radio-group",
127
- style: { flexDirection: direction, gap: 12 },
128
- children: clonedChildren
129
- }
130
- );
131
- };
132
156
  var Radio = ({
133
157
  onChange,
134
158
  label,
159
+ isChecked,
135
160
  isDefaultChecked,
136
161
  isDisabled,
137
162
  name = "radio-group-name",
138
- value
163
+ value,
164
+ hasError,
165
+ size = "large",
166
+ dataTestId
139
167
  }) => {
140
168
  const radioId = `${value}-id`;
169
+ const theme = (0, import_react.useTheme)();
141
170
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
142
171
  import_react_box.Box,
143
172
  {
144
173
  style: {
145
174
  flexDirection: "row",
146
- gap: 8,
175
+ gap: theme.spacing.spacing_30,
147
176
  cursor: isDisabled ? "not-allowed" : "pointer"
148
177
  },
149
178
  children: [
150
179
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
151
180
  RadioInputStyled,
152
181
  {
182
+ checked: isChecked,
183
+ "data-error": hasError,
184
+ "data-testid": dataTestId,
153
185
  defaultChecked: isDefaultChecked,
154
186
  disabled: isDisabled,
155
187
  id: radioId,
156
188
  name,
157
189
  onChange,
190
+ radioSize: size,
191
+ tabIndex: isDisabled ? -1 : 0,
158
192
  type: "radio",
159
193
  value
160
194
  }
161
195
  ),
162
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioLabelStyled, { htmlFor: radioId, children: label })
196
+ label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
197
+ import_react_typography.Typography,
198
+ {
199
+ element: "label",
200
+ fontStyles: size === "large" ? "bodyLgRegular" : "bodyMdRegular",
201
+ htmlFor: radioId,
202
+ style: { cursor: isDisabled ? "not-allowed" : "pointer" },
203
+ children: label
204
+ }
205
+ ) : null
163
206
  ]
164
207
  }
165
208
  );
166
209
  };
167
- var Radio_default = Radio;
210
+
211
+ // src/RadioGroup.tsx
212
+ var import_react2 = require("react");
213
+ var import_react3 = require("@emotion/react");
214
+ var import_react_box2 = require("@dt-dds/react-box");
215
+ var import_jsx_runtime2 = require("react/jsx-runtime");
216
+ var RadioGroup = ({
217
+ children,
218
+ onChange,
219
+ dataTestId,
220
+ direction = "row",
221
+ size = "large",
222
+ name
223
+ }) => {
224
+ const theme = (0, import_react3.useTheme)();
225
+ const clonedChildren = (0, import_react2.useMemo)(
226
+ () => import_react2.Children.map(children, (child) => {
227
+ return child && (0, import_react2.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
228
+ onChange,
229
+ name,
230
+ size
231
+ }));
232
+ }),
233
+ [children, onChange, name, size]
234
+ );
235
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
236
+ import_react_box2.Box,
237
+ {
238
+ "data-testid": dataTestId != null ? dataTestId : "radio-group",
239
+ style: {
240
+ flexDirection: direction,
241
+ gap: theme.spacing.spacing_40,
242
+ alignItems: direction === "row" ? "center" : "flex-start"
243
+ },
244
+ children: clonedChildren
245
+ }
246
+ );
247
+ };
168
248
  // Annotate the CommonJS export names for ESM import in node:
169
249
  0 && (module.exports = {
170
250
  Radio,
package/dist/index.mjs CHANGED
@@ -19,119 +19,199 @@ var __spreadValues = (a, b) => {
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
20
 
21
21
  // src/Radio.tsx
22
- import { Children, cloneElement, useMemo } from "react";
22
+ import { useTheme } from "@emotion/react";
23
23
  import { Box } from "@dt-dds/react-box";
24
+ import { Typography } from "@dt-dds/react-typography";
24
25
 
25
26
  // src/Radio.styled.tsx
26
27
  import styled from "@emotion/styled";
28
+ var RADIO_SIZES = {
29
+ large: {
30
+ outerCircle: 24,
31
+ innerCircle: 10
32
+ },
33
+ small: {
34
+ outerCircle: 20,
35
+ innerCircle: 8
36
+ }
37
+ };
27
38
  var RadioInputStyled = styled.input`
28
- ${({ theme }) => `
39
+ ${({ theme, radioSize }) => `
29
40
  background: ${theme.palette.surface.contrast};
30
- border: 1px solid ${theme.palette.border.default};
41
+ border: 1px solid ${theme.palette.informative.default};
31
42
  border-radius: 50%;
32
- width: 24px;
33
- height: 24px;
43
+ width: ${RADIO_SIZES[radioSize].outerCircle}px;
44
+ height: ${RADIO_SIZES[radioSize].outerCircle}px;
34
45
  appearance: none;
35
-
36
- &:disabled {
37
- pointer-events: none;
38
- cursor: not-allowed;
39
- }
46
+ position: relative;
47
+ cursor: pointer;
48
+ flex-shrink: 0;
40
49
 
41
50
  &:disabled + label {
42
51
  color: ${theme.palette.content.light};
43
52
  }
44
53
 
54
+ &:hover {
55
+ background: ${theme.palette.informative.light};
56
+ }
57
+
58
+ &:checked:not(:disabled):hover {
59
+ background: ${theme.palette.informative.dark};
60
+ border-color: ${theme.palette.informative.dark};
61
+ }
62
+
45
63
  &:checked {
46
- border-width: 7px;
47
- border-color: ${theme.palette.primary.default};
64
+ background: ${theme.palette.informative.default};
48
65
  }
49
66
 
50
- &:checked:disabled {
51
- border-color: ${theme.palette.primary.medium};
67
+ &:disabled {
68
+ pointer-events: none;
69
+ cursor: not-allowed;
70
+ border-color: ${theme.palette.informative.light};
71
+ background-color: ${theme.palette.informative.light};
52
72
  }
53
73
 
54
74
  &:checked:before {
55
- content: '';
56
- height: 10px;
57
- width: 10px;
75
+ content: "";
76
+ width: ${RADIO_SIZES[radioSize].innerCircle}px;
77
+ height: ${RADIO_SIZES[radioSize].innerCircle}px;
78
+ background: ${theme.palette.surface.contrast};
58
79
  border-radius: 50%;
59
- display: block;
80
+ position: absolute;
81
+ top: 50%;
82
+ left: 50%;
83
+ transform: translate(-50%, -50%);
84
+ }
85
+
86
+ &[data-error="true"] {
87
+ border-color: ${theme.palette.error.default};
88
+ }
89
+
90
+ &[data-error="true"]:hover {
91
+ background-color: ${theme.palette.error.light};
92
+ }
93
+
94
+ &[data-error="true"]:disabled {
95
+ background-color: ${theme.palette.error.light};
96
+ border-color: ${theme.palette.error.light};
97
+ }
98
+
99
+ &[data-error="true"]:checked {
100
+ background-color: ${theme.palette.error.default};
101
+ }
102
+
103
+ &[data-error="true"]:checked:disabled {
104
+ background-color: ${theme.palette.error.light};
105
+ border-color: ${theme.palette.error.light};
106
+ }
107
+
108
+ &[data-error="true"]:checked:not(:disabled):hover {
109
+ background-color: ${theme.palette.error.dark};
110
+ border-color: ${theme.palette.error.dark};
111
+ }
112
+
113
+ &:focus-visible {
114
+ outline: 2px solid ${theme.palette.primary.default};
115
+ outline-offset: 2px;
60
116
  }
61
- `}
62
- `;
63
- var RadioLabelStyled = styled.label`
64
- ${({ theme }) => `
65
- ${theme.fontStyles.bodyMdRegular};
66
- color: ${theme.palette.content.default};
67
- cursor: inherit;
68
117
  `}
69
118
  `;
70
119
 
71
120
  // src/Radio.tsx
72
121
  import { jsx, jsxs } from "react/jsx-runtime";
73
- var RadioGroup = ({
74
- children,
75
- onChange,
76
- dataTestId,
77
- direction = "row",
78
- name
79
- }) => {
80
- const clonedChildren = useMemo(
81
- () => Children.map(children, (child) => {
82
- return child && cloneElement(child, __spreadProps(__spreadValues({}, child.props), {
83
- onChange,
84
- name
85
- }));
86
- }),
87
- [children, onChange, name]
88
- );
89
- return /* @__PURE__ */ jsx(
90
- Box,
91
- {
92
- "data-testid": dataTestId != null ? dataTestId : "radio-group",
93
- style: { flexDirection: direction, gap: 12 },
94
- children: clonedChildren
95
- }
96
- );
97
- };
98
122
  var Radio = ({
99
123
  onChange,
100
124
  label,
125
+ isChecked,
101
126
  isDefaultChecked,
102
127
  isDisabled,
103
128
  name = "radio-group-name",
104
- value
129
+ value,
130
+ hasError,
131
+ size = "large",
132
+ dataTestId
105
133
  }) => {
106
134
  const radioId = `${value}-id`;
135
+ const theme = useTheme();
107
136
  return /* @__PURE__ */ jsxs(
108
137
  Box,
109
138
  {
110
139
  style: {
111
140
  flexDirection: "row",
112
- gap: 8,
141
+ gap: theme.spacing.spacing_30,
113
142
  cursor: isDisabled ? "not-allowed" : "pointer"
114
143
  },
115
144
  children: [
116
145
  /* @__PURE__ */ jsx(
117
146
  RadioInputStyled,
118
147
  {
148
+ checked: isChecked,
149
+ "data-error": hasError,
150
+ "data-testid": dataTestId,
119
151
  defaultChecked: isDefaultChecked,
120
152
  disabled: isDisabled,
121
153
  id: radioId,
122
154
  name,
123
155
  onChange,
156
+ radioSize: size,
157
+ tabIndex: isDisabled ? -1 : 0,
124
158
  type: "radio",
125
159
  value
126
160
  }
127
161
  ),
128
- /* @__PURE__ */ jsx(RadioLabelStyled, { htmlFor: radioId, children: label })
162
+ label ? /* @__PURE__ */ jsx(
163
+ Typography,
164
+ {
165
+ element: "label",
166
+ fontStyles: size === "large" ? "bodyLgRegular" : "bodyMdRegular",
167
+ htmlFor: radioId,
168
+ style: { cursor: isDisabled ? "not-allowed" : "pointer" },
169
+ children: label
170
+ }
171
+ ) : null
129
172
  ]
130
173
  }
131
174
  );
132
175
  };
133
- var Radio_default = Radio;
176
+
177
+ // src/RadioGroup.tsx
178
+ import { Children, cloneElement, useMemo } from "react";
179
+ import { useTheme as useTheme2 } from "@emotion/react";
180
+ import { Box as Box2 } from "@dt-dds/react-box";
181
+ import { jsx as jsx2 } from "react/jsx-runtime";
182
+ var RadioGroup = ({
183
+ children,
184
+ onChange,
185
+ dataTestId,
186
+ direction = "row",
187
+ size = "large",
188
+ name
189
+ }) => {
190
+ const theme = useTheme2();
191
+ const clonedChildren = useMemo(
192
+ () => Children.map(children, (child) => {
193
+ return child && cloneElement(child, __spreadProps(__spreadValues({}, child.props), {
194
+ onChange,
195
+ name,
196
+ size
197
+ }));
198
+ }),
199
+ [children, onChange, name, size]
200
+ );
201
+ return /* @__PURE__ */ jsx2(
202
+ Box2,
203
+ {
204
+ "data-testid": dataTestId != null ? dataTestId : "radio-group",
205
+ style: {
206
+ flexDirection: direction,
207
+ gap: theme.spacing.spacing_40,
208
+ alignItems: direction === "row" ? "center" : "flex-start"
209
+ },
210
+ children: clonedChildren
211
+ }
212
+ );
213
+ };
134
214
  export {
135
- Radio_default as Radio,
215
+ Radio,
136
216
  RadioGroup
137
217
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-radio",
3
- "version": "1.0.0-beta.87",
3
+ "version": "1.0.0-beta.89",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -21,8 +21,9 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@dt-dds/react-core": "1.0.0-beta.56",
24
- "@dt-dds/react-box": "1.0.0-beta.71",
25
- "@dt-dds/themes": "1.0.0-beta.11"
24
+ "@dt-dds/react-box": "1.0.0-beta.73",
25
+ "@dt-dds/themes": "1.0.0-beta.11",
26
+ "@dt-dds/react-typography": "1.0.0-beta.47"
26
27
  },
27
28
  "devDependencies": {
28
29
  "@babel/core": "^7.22.9",