@synerise/ds-radio 1.1.17 → 1.1.18

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 (3) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/CLAUDE.md +109 -0
  3. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.1.18](https://github.com/synerise/synerise-design/compare/@synerise/ds-radio@1.1.17...@synerise/ds-radio@1.1.18) (2026-07-23)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-radio
9
+
6
10
  ## [1.1.17](https://github.com/synerise/synerise-design/compare/@synerise/ds-radio@1.1.16...@synerise/ds-radio@1.1.17) (2026-06-27)
7
11
 
8
12
  **Note:** Version bump only for package @synerise/ds-radio
package/CLAUDE.md ADDED
@@ -0,0 +1,109 @@
1
+ # Radio (`@synerise/ds-radio`)
2
+
3
+ > DS-native, antd-free radio: a `label` prop (renders via `FormFieldLabel`), a `description` below the radio, a context-based `Radio.Group`, a segmented `Radio.Button`, and group-level `fullWidth`/`big` layout variants.
4
+
5
+ ## Package structure
6
+
7
+ ```
8
+ src/
9
+ Radio.tsx — assembles Radio (= RadioBase) + .Group + .Button
10
+ Radio.types.ts — RadioProps, RadioGroupProps, RadioButtonProps, RadioChangeEvent, RadioValueType
11
+ Radio.styles.tsx — styled-components (RadioLabel = radio-dot visual; RadioGroupWrapper = layout + segmented buttons)
12
+ RadioGroup.tsx — DS-native Radio.Group (single-select context provider)
13
+ RadioContext.ts — group context (value + onChange)
14
+ components/
15
+ RadioBase.tsx — the radio input (DOM + group consumption + event synthesis)
16
+ RadioButton.tsx — segmented button-style radio
17
+ index.ts — public exports
18
+ __specs__/Radio.spec.tsx — Vitest tests
19
+ ```
20
+
21
+ No LESS, no antd — antd's base + `radio.mixin.less` were inlined into `Radio.styles.tsx`.
22
+
23
+ ## Public exports
24
+
25
+ ### `Radio` (default export)
26
+
27
+ Compound component: `Radio` + `Radio.Group` + `Radio.Button`.
28
+
29
+ | Prop | Type | Default | Description |
30
+ |------|------|---------|-------------|
31
+ | `label` | `ReactNode` | `undefined` | Renders label text via `FormFieldLabel`. Takes precedence over `children` |
32
+ | `description` | `ReactNode` | `undefined` | Additional text rendered below the radio in small grey text |
33
+ | `children` | `ReactNode` | `undefined` | **@deprecated** — use `label` instead. Only rendered when `label` is not provided |
34
+ | `checked` | `boolean` | `undefined` | Controlled checked state |
35
+ | `defaultChecked` | `boolean` | `undefined` | Initial uncontrolled checked state |
36
+ | `disabled` | `boolean` | `undefined` | Disables the radio; also dims `label` and `description` to 40% opacity |
37
+ | `value` | `any` | `undefined` | Value used by `Radio.Group` for comparison |
38
+ | `autoFocus` | `boolean` | `undefined` | Focuses the input on mount |
39
+ | `value`, `name`, `id`, `autoFocus`, `tabIndex`, `onChange` | — | — | DS-native props (no antd inheritance). `onChange` receives a `RadioChangeEvent` (`target.value`, `target.checked`). |
40
+
41
+ ### `Radio.Group`
42
+
43
+ Wraps `AntdRadio.Group` with two additional layout props:
44
+
45
+ | Prop | Type | Default | Description |
46
+ |------|------|---------|-------------|
47
+ | `fullWidth` | `boolean` | `undefined` | Makes the group `display: flex; width: 100%` — each radio button gets `flex: 1` |
48
+ | `big` | `boolean` | `undefined` | When combined with `fullWidth`, sets button height to `48px` instead of `32px` |
49
+ | `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | Segmented `Radio.Button` height: `small` 24px · `middle` 32px · `large` 40px |
50
+ | + DS `RadioGroupProps` | — | — | `value`, `defaultValue`, `onChange`, `options`, `optionType`, `buttonStyle`, `disabled`, `name` (DS-native, no antd inheritance) |
51
+
52
+ ### `Radio.Button`
53
+
54
+ DS-native segmented button-style radio (replaces the former `AntdRadio.Button` re-export). Reads the `Radio.Group` context; styled by the group as a connected segment. Use for segmented/toggle-button radio groups (`optionType="button"` or explicit `<Radio.Button>` children).
55
+
56
+ ### Types exported
57
+
58
+ | Type | Description |
59
+ |------|-------------|
60
+ | `RadioProps` | Props for `Radio` |
61
+ | `RadioGroupProps` | Props for `Radio.Group` |
62
+ | `Props` | **@deprecated** alias for `RadioProps` |
63
+
64
+ ## Usage patterns
65
+
66
+ ```tsx
67
+ import Radio from '@synerise/ds-radio';
68
+
69
+ // Basic radio with label and description
70
+ <Radio.Group value={selected} onChange={(e) => setSelected(e.target.value)}>
71
+ <Radio value="a" label="Option A" description="Some extra context" />
72
+ <Radio value="b" label="Option B" />
73
+ </Radio.Group>
74
+
75
+ // Full-width button group
76
+ <Radio.Group value={tab} onChange={(e) => setTab(e.target.value)} fullWidth big>
77
+ <Radio.Button value="list">List</Radio.Button>
78
+ <Radio.Button value="grid">Grid</Radio.Button>
79
+ </Radio.Group>
80
+
81
+ // Shorthand options
82
+ <Radio.Group options={['A', 'B', 'C']} value={val} onChange={handleChange} />
83
+ ```
84
+
85
+ ## Styling
86
+
87
+ Styles live in `Radio.styles.tsx`. **Each element is its own styled-component and owns its styles** — the `.ant-radio-*` / `ds-radio-*` class names are kept on the elements purely as hooks (ui-tests / interim external CSS), never used as styling selectors; state is passed in as transient `$`-props. Uses `@synerise/ds-core` theme tokens:
88
+ - `grey-600` — `Description` text colour; `opacity: 0.4` applied on `disabled` to `Label`/`Description`/`RadioText`
89
+ - `Label` extends `FormFieldLabel` from `@synerise/ds-form-field`
90
+ - radio dot: `RadioBox` / `RadioInput` / `RadioInner` / `RadioText`. `RadioInner` is the 16px circle (`grey-300` border, blue-600 dot scaled in on `$checked`, greyed on `$disabled`); `RadioLabel` holds the cross-element hover-preview + focus-ring rules (`${RadioInput}:focus + ${RadioInner}`, white centre once `$checked`).
91
+ - segmented button: `RadioButtonLabel` (+ `RadioButtonInput`) owns the full segment visual including the connected-border `:first-child`/`:last-child` rules and the `$solid`/`$checked`/`$disabled` variants — driven by `$`-props read from the group context, not by group-level `.ant-radio-button-*` selectors.
92
+ - `RadioGroupWrapper` is `inline-block` (vertical stacking) and, with `fullWidth`, switches to flex and stretches `${RadioLabel}`/`${RadioButtonLabel}` (`big` → 48px height).
93
+ - `AdditionalData` is the margin wrapper for `Description`
94
+
95
+ All styling is in `Radio.styles.tsx` (no LESS).
96
+
97
+ ## Key dependencies
98
+
99
+ - DS-native (no antd) — radio + `Radio.Group` (context) + `Radio.Button` reimplemented in `src/`
100
+ - `@synerise/ds-form-field` — `FormFieldLabel` used for the `label` prop rendering
101
+ - `@synerise/ds-typography` — `macro.small` applied to `Description` font size
102
+
103
+ ## Implementation notes
104
+
105
+ - **`label` vs `children`**: `label` takes precedence — if `label` is set, `children` is ignored entirely. `children` is marked `@deprecated` in the type file.
106
+ - **`Radio.Button` is DS-native**: reads `RadioContext` for checked state; the segment visual (connected borders, checked, focus, `buttonStyle` solid/outline) is styled by `RadioGroupWrapper`.
107
+ - **`RadioChangeEvent`** is synthesised from the native input change (`{ target: { value, checked, name }, stopPropagation, preventDefault, nativeEvent }`); `target.value` is `RadioValueType` (consumers needing a narrower type cast it — antd typed it `any`).
108
+ - **`AdditionalData` styled-component** is marked `@deprecated` in its source comment but is still the live wrapper div for `Description` — the comment is misleading.
109
+ - **Uses Vitest** for testing.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-radio",
3
- "version": "1.1.17",
3
+ "version": "1.1.18",
4
4
  "description": "Radio UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -17,6 +17,7 @@
17
17
  "files": [
18
18
  "/dist",
19
19
  "CHANGELOG.md",
20
+ "CLAUDE.md",
20
21
  "README.md",
21
22
  "package.json",
22
23
  "LICENSE.md"
@@ -41,9 +42,9 @@
41
42
  ],
42
43
  "types": "dist/index.d.ts",
43
44
  "dependencies": {
44
- "@synerise/ds-form-field": "^1.3.23",
45
- "@synerise/ds-typography": "^1.1.26",
46
- "@synerise/ds-utils": "^1.10.1"
45
+ "@synerise/ds-form-field": "^1.3.24",
46
+ "@synerise/ds-typography": "^1.1.27",
47
+ "@synerise/ds-utils": "^1.10.2"
47
48
  },
48
49
  "peerDependencies": {
49
50
  "@synerise/ds-core": "*",
@@ -51,5 +52,5 @@
51
52
  "styled-components": "^5.3.3",
52
53
  "vitest": "4"
53
54
  },
54
- "gitHead": "dfd892acc1d02abebcf661db3fb32f0fc4b6c354"
55
+ "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
55
56
  }