@synerise/ds-radio 1.1.16 → 1.1.18

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+**Note:** Version bump only for package @synerise/ds-radio
+
+## [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)
+
+**Note:** Version bump only for package @synerise/ds-radio
+
 ## [1.1.16](https://github.com/synerise/synerise-design/compare/@synerise/ds-radio@1.1.15...@synerise/ds-radio@1.1.16) (2026-06-17)
 
 **Note:** Version bump only for package @synerise/ds-radio

package/CLAUDE.md

@@ -0,0 +1,109 @@
+# Radio (`@synerise/ds-radio`)
+
+> 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.
+
+## Package structure
+
+```
+src/
+ Radio.tsx — assembles Radio (= RadioBase) + .Group + .Button
+ Radio.types.ts — RadioProps, RadioGroupProps, RadioButtonProps, RadioChangeEvent, RadioValueType
+ Radio.styles.tsx — styled-components (RadioLabel = radio-dot visual; RadioGroupWrapper = layout + segmented buttons)
+ RadioGroup.tsx — DS-native Radio.Group (single-select context provider)
+ RadioContext.ts — group context (value + onChange)
+ components/
+   RadioBase.tsx — the radio input (DOM + group consumption + event synthesis)
+   RadioButton.tsx — segmented button-style radio
+ index.ts — public exports
+ __specs__/Radio.spec.tsx — Vitest tests
+```
+
+No LESS, no antd — antd's base + `radio.mixin.less` were inlined into `Radio.styles.tsx`.
+
+## Public exports
+
+### `Radio` (default export)
+
+Compound component: `Radio` + `Radio.Group` + `Radio.Button`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `ReactNode` | `undefined` | Renders label text via `FormFieldLabel`. Takes precedence over `children` |
+| `description` | `ReactNode` | `undefined` | Additional text rendered below the radio in small grey text |
+| `children` | `ReactNode` | `undefined` | **@deprecated** — use `label` instead. Only rendered when `label` is not provided |
+| `checked` | `boolean` | `undefined` | Controlled checked state |
+| `defaultChecked` | `boolean` | `undefined` | Initial uncontrolled checked state |
+| `disabled` | `boolean` | `undefined` | Disables the radio; also dims `label` and `description` to 40% opacity |
+| `value` | `any` | `undefined` | Value used by `Radio.Group` for comparison |
+| `autoFocus` | `boolean` | `undefined` | Focuses the input on mount |
+| `value`, `name`, `id`, `autoFocus`, `tabIndex`, `onChange` | — | — | DS-native props (no antd inheritance). `onChange` receives a `RadioChangeEvent` (`target.value`, `target.checked`). |
+
+### `Radio.Group`
+
+Wraps `AntdRadio.Group` with two additional layout props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fullWidth` | `boolean` | `undefined` | Makes the group `display: flex; width: 100%` — each radio button gets `flex: 1` |
+| `big` | `boolean` | `undefined` | When combined with `fullWidth`, sets button height to `48px` instead of `32px` |
+| `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | Segmented `Radio.Button` height: `small` 24px · `middle` 32px · `large` 40px |
+| + DS `RadioGroupProps` | — | — | `value`, `defaultValue`, `onChange`, `options`, `optionType`, `buttonStyle`, `disabled`, `name` (DS-native, no antd inheritance) |
+
+### `Radio.Button`
+
+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).
+
+### Types exported
+
+| Type | Description |
+|------|-------------|
+| `RadioProps` | Props for `Radio` |
+| `RadioGroupProps` | Props for `Radio.Group` |
+| `Props` | **@deprecated** alias for `RadioProps` |
+
+## Usage patterns
+
+```tsx
+import Radio from '@synerise/ds-radio';
+
+// Basic radio with label and description
+<Radio.Group value={selected} onChange={(e) => setSelected(e.target.value)}>
+ <Radio value="a" label="Option A" description="Some extra context" />
+ <Radio value="b" label="Option B" />
+</Radio.Group>
+
+// Full-width button group
+<Radio.Group value={tab} onChange={(e) => setTab(e.target.value)} fullWidth big>
+ <Radio.Button value="list">List</Radio.Button>
+ <Radio.Button value="grid">Grid</Radio.Button>
+</Radio.Group>
+
+// Shorthand options
+<Radio.Group options={['A', 'B', 'C']} value={val} onChange={handleChange} />
+```
+
+## Styling
+
+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:
+- `grey-600` — `Description` text colour; `opacity: 0.4` applied on `disabled` to `Label`/`Description`/`RadioText`
+- `Label` extends `FormFieldLabel` from `@synerise/ds-form-field`
+- 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`).
+- 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.
+- `RadioGroupWrapper` is `inline-block` (vertical stacking) and, with `fullWidth`, switches to flex and stretches `${RadioLabel}`/`${RadioButtonLabel}` (`big` → 48px height).
+- `AdditionalData` is the margin wrapper for `Description`
+
+All styling is in `Radio.styles.tsx` (no LESS).
+
+## Key dependencies
+
+- DS-native (no antd) — radio + `Radio.Group` (context) + `Radio.Button` reimplemented in `src/`
+- `@synerise/ds-form-field` — `FormFieldLabel` used for the `label` prop rendering
+- `@synerise/ds-typography` — `macro.small` applied to `Description` font size
+
+## Implementation notes
+
+- **`label` vs `children`**: `label` takes precedence — if `label` is set, `children` is ignored entirely. `children` is marked `@deprecated` in the type file.
+- **`Radio.Button` is DS-native**: reads `RadioContext` for checked state; the segment visual (connected borders, checked, focus, `buttonStyle` solid/outline) is styled by `RadioGroupWrapper`.
+- **`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`).
+- **`AdditionalData` styled-component** is marked `@deprecated` in its source comment but is still the live wrapper div for `Description` — the comment is misleading.
+- **Uses Vitest** for testing.

package/dist/Radio.d.ts

@@ -1,7 +1,9 @@
-import { default as React } from 'react';
-import { RadioGroupProps, RadioProps } from './Radio.types';
-declare const Radio: (({ description, label, children, ...antdRadioButtonProps }: RadioProps) => React.JSX.Element) & {
-    Group: ({ children, fullWidth, big, ...props }: RadioGroupProps) => React.JSX.Element;
-    Button: React.ForwardRefExoticComponent<import('antd/lib/radio/radioButton').RadioButtonProps & React.RefAttributes<any>>;
+/**
+ * DS-native, antd-free radio. `Radio` (radio + label + description) with `Radio.Group` (single-select
+ * context) and `Radio.Button` (segmented control) attached as static members.
+ */
+declare const Radio: (({ value, checked, defaultChecked, disabled, name, id, autoFocus, tabIndex, onChange, onClick, label, description, children, className, style, ...rest }: import('./Radio.types').RadioProps) => import("react").JSX.Element) & {
+    Group: ({ value, defaultValue, onChange, options, optionType, buttonStyle, size, disabled, name, fullWidth, big, children, className, style, }: import('./Radio.types').RadioGroupProps) => import("react").JSX.Element;
+    Button: ({ value, disabled, children, className, checked, onChange, onClick, style, ...rest }: import('./Radio.types').RadioButtonProps) => import("react").JSX.Element;
 };
 export default Radio;

package/dist/Radio.js

@@ -1,29 +1,9 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Radio as Radio$1 } from "antd";
-import { RadioWrapper, AntRadio, Label, AdditionalData, Description, AntRadioGroup } from "./Radio.styles.js";
-import "./style/index.css";
-const Group = ({
-  children,
-  fullWidth,
-  big,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(AntRadioGroup, { fullWidth, big, ...props, children });
-};
-const RadioComponent = ({
-  description,
-  label,
-  children,
-  ...antdRadioButtonProps
-}) => {
-  return /* @__PURE__ */ jsxs(RadioWrapper, { children: [
-    /* @__PURE__ */ jsx(AntRadio, { ...antdRadioButtonProps, children: label ? /* @__PURE__ */ jsx(Label, { disabled: antdRadioButtonProps.disabled, children: label }) : children }),
-    description && /* @__PURE__ */ jsx(AdditionalData, { children: /* @__PURE__ */ jsx(Description, { disabled: antdRadioButtonProps.disabled, children: description }) })
-  ] });
-};
-const Radio = Object.assign(RadioComponent, {
-  Group,
-  Button: Radio$1.Button
+import RadioGroup from "./RadioGroup.js";
+import { RadioBase } from "./components/RadioBase.js";
+import { RadioButton } from "./components/RadioButton.js";
+const Radio = Object.assign(RadioBase, {
+  Group: RadioGroup,
+  Button: RadioButton
 });
 export {
   Radio as default

package/dist/Radio.styles.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 export declare const RadioWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const Description: import('styled-components').StyledComponent<"div", any, {
     disabled?: boolean;
@@ -7,8 +6,31 @@ export declare const Label: import('styled-components').StyledComponent<({ id, l
     disabled?: boolean;
 }, never>;
 export declare const AdditionalData: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const AntRadio: import('styled-components').StyledComponent<({ ...rest }: any) => React.JSX.Element, any, {}, never>;
-export declare const AntRadioGroup: import('styled-components').StyledComponent<React.MemoExoticComponent<React.ForwardRefExoticComponent<import('antd').RadioGroupProps & React.RefAttributes<HTMLDivElement>>>, any, {
+export declare const RadioInput: import('styled-components').StyledComponent<"input", any, {}, never>;
+export declare const RadioInner: import('styled-components').StyledComponent<"span", any, {
+    $checked?: boolean;
+    $disabled?: boolean;
+}, never>;
+export declare const RadioText: import('styled-components').StyledComponent<"span", any, {
+    $checked?: boolean;
+    $disabled?: boolean;
+}, never>;
+export declare const RadioBox: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const RadioLabel: import('styled-components').StyledComponent<"label", any, {
+    $checked?: boolean;
+    $disabled?: boolean;
+}, never>;
+export declare const RadioButtonInput: import('styled-components').StyledComponent<"input", any, {}, never>;
+export declare const RadioButtonLabel: import('styled-components').StyledComponent<"label", any, {
+    $checked?: boolean;
+    $disabled?: boolean;
+    $solid?: boolean;
+    $size?: "small" | "middle" | "large";
+}, never>;
+/**
+ * The `Radio.Group` container. Lays out the children and owns the `fullWidth`/`big` layout.
+ */
+export declare const RadioGroupWrapper: import('styled-components').StyledComponent<"div", any, {
     fullWidth?: boolean;
     big?: boolean;
 }, never>;

package/dist/Radio.styles.js

@@ -1,39 +1,70 @@
-import { jsx } from "react/jsx-runtime";
-import { Radio } from "antd";
 import styled, { css } from "styled-components";
 import { FormFieldLabel } from "@synerise/ds-form-field";
 import { macro } from "@synerise/ds-typography";
 const RadioWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Radiostyles__RadioWrapper",
   componentId: "sc-137n5jf-0"
-})(["&{display:block;margin-bottom:15px;}"]);
+})(["display:block;margin-bottom:15px;"]);
 const Description = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Radiostyles__Description",
   componentId: "sc-137n5jf-1"
-})(["color:", ";", " ", ""], (props) => props.theme.palette["grey-600"], (props) => props.disabled ? `opacity: 0.4;` : "", macro.small);
+})(["color:", ";", " ", ""], (props) => props.theme.palette["grey-600"], (props) => props.disabled ? "opacity: 0.4;" : "", macro.small);
 const Label = /* @__PURE__ */ styled(FormFieldLabel).withConfig({
   displayName: "Radiostyles__Label",
   componentId: "sc-137n5jf-2"
-})(["", ""], (props) => props.disabled ? `opacity: 0.4;` : "");
+})(["", ""], (props) => props.disabled ? "opacity: 0.4;" : "");
 const AdditionalData = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Radiostyles__AdditionalData",
   componentId: "sc-137n5jf-3"
 })(["margin:4px 8px 15px 28px;"]);
-const AntRadio = /* @__PURE__ */ styled(({
-  ...rest
-}) => /* @__PURE__ */ jsx(Radio, { ...rest })).withConfig({
-  displayName: "Radiostyles__AntRadio",
+const RadioInput = /* @__PURE__ */ styled.input.withConfig({
+  displayName: "Radiostyles__RadioInput",
   componentId: "sc-137n5jf-4"
-})([".ant-radio{height:16px;top:0;}.ant-radio + span{flex-grow:1;}"]);
-const AntRadioGroup = /* @__PURE__ */ styled(Radio.Group).withConfig({
-  displayName: "Radiostyles__AntRadioGroup",
+})(["position:absolute;inset:0;width:16px;height:16px;margin:0;padding:0;opacity:0;cursor:pointer;z-index:1;"]);
+const RadioInner = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Radiostyles__RadioInner",
   componentId: "sc-137n5jf-5"
-})(["", ""], (props) => props.fullWidth && css(["&&{display:flex;width:100%;label{flex:1;height:", ";display:flex;align-items:center;justify-content:center;font-weight:500;}}"], props.big ? "48px" : "32px"));
+})(["position:relative;display:block;width:16px;height:16px;box-sizing:border-box;background-color:", ";border:1px solid ", ";border-radius:50%;&::after{content:'';position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background-color:", ";transform:scale(0);transition:transform 0.2s ease;}", " ", ""], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-300"], (props) => props.theme.palette["blue-600"], (props) => props.$checked && css(["border-color:", ";border-width:2px;&::after{transform:scale(1);}"], props.theme.palette["blue-600"]), (props) => props.$disabled && css(["border-color:", " !important;background-color:", " !important;&::after{background-color:", ";}"], props.theme.palette["grey-200"], props.theme.palette["grey-050"], props.theme.palette["grey-400"]));
+const RadioText = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Radiostyles__RadioText",
+  componentId: "sc-137n5jf-6"
+})(["flex-grow:1;margin:0 12px;padding:0;font-weight:500;color:", ";", ""], (props) => props.$checked ? props.theme.palette["grey-800"] : props.theme.palette["grey-700"], (props) => props.$disabled && css(["color:", ";opacity:0.4;"], props.theme.palette["grey-600"]));
+const RadioBox = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Radiostyles__RadioBox",
+  componentId: "sc-137n5jf-7"
+})(["position:relative;top:0;display:inline-flex;flex:none;height:16px;cursor:pointer;"]);
+const RadioLabel = /* @__PURE__ */ styled.label.withConfig({
+  displayName: "Radiostyles__RadioLabel",
+  componentId: "sc-137n5jf-8"
+})(["display:flex;align-items:flex-start;margin:0 8px 0 0;cursor:pointer;white-space:normal;", ":hover + ", "{border-color:", ";}", ":focus + ", "{border-color:", ";background-color:", ";border-width:2px;}", ""], RadioInput, RadioInner, (props) => props.theme.palette["grey-400"], RadioInput, RadioInner, (props) => props.theme.palette["blue-600"], (props) => props.$checked ? props.theme.palette.white : props.theme.palette["blue-050"], (props) => props.$disabled && css(["cursor:not-allowed;", ",", "{cursor:not-allowed;}"], RadioBox, RadioInput));
+const RadioButtonInput = /* @__PURE__ */ styled.input.withConfig({
+  displayName: "Radiostyles__RadioButtonInput",
+  componentId: "sc-137n5jf-9"
+})(["position:absolute;inset:0;opacity:0;cursor:pointer;"]);
+const BUTTON_HEIGHT = {
+  small: "24px",
+  middle: "32px",
+  large: "40px"
+};
+const RadioButtonLabel = /* @__PURE__ */ styled.label.withConfig({
+  displayName: "Radiostyles__RadioButtonLabel",
+  componentId: "sc-137n5jf-10"
+})(["position:relative;display:inline-flex;align-items:center;justify-content:center;height:", ";margin:0;padding:0 16px;color:", ";background-color:", ";border:1px solid ", ";border-left-width:0;cursor:pointer;&:first-child{border-left:1px solid ", ";border-radius:3px 0 0 3px;}&:last-child{border-radius:0 3px 3px 0;}&:hover{background-color:", ";}&:focus-within{border-color:", ";box-shadow:inset 0 0 0 1px ", ";z-index:2;}", " ", " ", ""], (props) => BUTTON_HEIGHT[props.$size ?? "middle"], (props) => props.theme.palette["grey-700"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-300"], (props) => props.theme.palette["grey-300"], (props) => props.theme.palette.white, (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"], (props) => props.$checked && css(["&&{color:", ";border-color:", ";box-shadow:-1px 0 0 0 ", ";z-index:1;}"], props.theme.palette["blue-600"], props.theme.palette["blue-600"], props.theme.palette["blue-600"]), (props) => props.$disabled && css(["color:", ";opacity:0.4;cursor:not-allowed;", "{cursor:not-allowed;}"], props.theme.palette["grey-700"], RadioButtonInput), (props) => props.$solid && props.$checked && !props.$disabled && css(["&&{color:", ";background-color:", ";border-color:", ";&:hover{background-color:", ";border-color:", ";box-shadow:-1px 0 0 0 ", ";}}"], props.theme.palette.white, props.theme.palette["blue-600"], props.theme.palette["blue-600"], props.theme.palette["blue-500"], props.theme.palette["blue-500"], props.theme.palette["blue-500"]));
+const RadioGroupWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Radiostyles__RadioGroupWrapper",
+  componentId: "sc-137n5jf-11"
+})(["display:inline-block;", ""], (props) => props.fullWidth && css(["&&{display:flex;width:100%;", ",", "{flex:1;height:", ";display:flex;align-items:center;justify-content:center;font-weight:500;}}"], RadioLabel, RadioButtonLabel, props.big ? "48px" : "32px"));
 export {
   AdditionalData,
-  AntRadio,
-  AntRadioGroup,
   Description,
   Label,
+  RadioBox,
+  RadioButtonInput,
+  RadioButtonLabel,
+  RadioGroupWrapper,
+  RadioInner,
+  RadioInput,
+  RadioLabel,
+  RadioText,
   RadioWrapper
 };

package/dist/Radio.types.d.ts

@@ -1,18 +1,74 @@
-import { RadioGroupProps as AntdRadioGroupProps, RadioProps as AntdRadioProps } from 'antd';
-import { ReactNode } from 'react';
-export type RadioProps = AntdRadioProps & {
-    description?: ReactNode;
+import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import { DataAttributes } from '@synerise/ds-utils';
+export type RadioValueType = string | number | boolean;
+/** antd-compatible radio change event. */
+export type RadioChangeEventTarget = {
+    value?: RadioValueType;
+    checked: boolean;
+    name?: string;
+    [key: string]: unknown;
+};
+export type RadioChangeEvent = {
+    target: RadioChangeEventTarget;
+    stopPropagation: () => void;
+    preventDefault: () => void;
+    nativeEvent: Event;
+};
+export type RadioProps = {
+    value?: RadioValueType;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    autoFocus?: boolean;
+    tabIndex?: number;
+    onChange?: (event: RadioChangeEvent) => void;
+    /** Label text (rendered via `FormFieldLabel`). Takes precedence over `children`. */
     label?: ReactNode;
-    /**
-     * @deprecated, use label instead
-     */
+    /** Helper text rendered below the radio. */
+    description?: ReactNode;
+    /** @deprecated use `label` instead */
     children?: ReactNode;
-};
-/**
- * @deprecated, use RadioProps instead
- */
+    className?: string;
+    style?: CSSProperties;
+    onClick?: MouseEventHandler<HTMLElement>;
+} & DataAttributes;
+/** @deprecated use `RadioProps` instead */
 export type Props = RadioProps;
-export type RadioGroupProps = AntdRadioGroupProps & {
+export type RadioOptionType = {
+    label: ReactNode;
+    value: RadioValueType;
+    disabled?: boolean;
+};
+export type RadioGroupProps = {
+    value?: RadioValueType;
+    defaultValue?: RadioValueType;
+    onChange?: (event: RadioChangeEvent) => void;
+    options?: (RadioValueType | RadioOptionType)[];
+    optionType?: 'default' | 'button';
+    buttonStyle?: 'outline' | 'solid';
+    /** Segmented-button height: `small` 24px · `middle` (default) 32px · `large` 40px. */
+    size?: 'small' | 'middle' | 'large';
+    disabled?: boolean;
+    name?: string;
+    /** Group laid out full-width with equal-flex buttons. */
     fullWidth?: boolean;
+    /** With `fullWidth`, taller (48px) buttons. */
     big?: boolean;
-};
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+} & DataAttributes;
+export type RadioButtonProps = {
+    value?: RadioValueType;
+    disabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+    /** Override the group-derived checked state (e.g. when used standalone). */
+    checked?: boolean;
+    /** Fired on selection, in addition to the group's `onChange`. */
+    onChange?: (event: RadioChangeEvent) => void;
+    onClick?: MouseEventHandler<HTMLElement>;
+    style?: CSSProperties;
+} & DataAttributes;

package/dist/RadioContext.d.ts

@@ -0,0 +1,17 @@
+import { RadioValueType } from './Radio.types';
+export type RadioGroupContextValue = {
+    /** Currently selected value (single). */
+    value?: RadioValueType;
+    /** Select a value; the group builds the change event + calls the consumer onChange. */
+    onChange: (value: RadioValueType, nativeEvent: Event) => void;
+    disabled?: boolean;
+    name?: string;
+    /** `'button'` makes the group render segmented `Radio.Button`s. */
+    optionType?: 'default' | 'button';
+    /** Button visual when `optionType === 'button'`. */
+    buttonStyle?: 'outline' | 'solid';
+    /** Segmented-button height (`small`/`middle`/`large`). */
+    size?: 'small' | 'middle' | 'large';
+};
+/** Provided by `Radio.Group`; consumed by child `Radio`/`Radio.Button`. `null` when standalone. */
+export declare const RadioGroupContext: import('react').Context<RadioGroupContextValue | null>;

package/dist/RadioContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const RadioGroupContext = createContext(null);
+export {
+  RadioGroupContext
+};

package/dist/RadioGroup.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { RadioGroupProps } from './Radio.types';
+/**
+ * DS-native `Radio.Group`. Provides a single-value selection context that child `Radio`/`Radio.Button`s
+ * read, and emits `onChange(RadioChangeEvent)` (`target.value` = the selected value). Controlled via
+ * `value`, uncontrolled via `defaultValue`. `optionType="button"` renders segmented `Radio.Button`s.
+ */
+declare const RadioGroup: ({ value, defaultValue, onChange, options, optionType, buttonStyle, size, disabled, name, fullWidth, big, children, className, style, }: RadioGroupProps) => React.JSX.Element;
+export default RadioGroup;

package/dist/RadioGroup.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { RadioGroupWrapper } from "./Radio.styles.js";
+import { RadioGroupContext } from "./RadioContext.js";
+import { RadioBase } from "./components/RadioBase.js";
+import { RadioButton } from "./components/RadioButton.js";
+const cx = (...classes) => classes.filter(Boolean).join(" ");
+const RadioGroup = ({
+  value,
+  defaultValue,
+  onChange,
+  options,
+  optionType = "default",
+  buttonStyle = "outline",
+  size,
+  disabled,
+  name,
+  fullWidth,
+  big,
+  children,
+  className,
+  style
+}) => {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const resolvedValue = isControlled ? value : internalValue;
+  const handleChange = useCallback((newValue, nativeEvent) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    const event = {
+      target: {
+        value: newValue,
+        checked: true,
+        name
+      },
+      stopPropagation: () => nativeEvent.stopPropagation?.(),
+      preventDefault: () => nativeEvent.preventDefault?.(),
+      nativeEvent
+    };
+    onChange?.(event);
+  }, [isControlled, name, onChange]);
+  const contextValue = useMemo(() => ({
+    value: resolvedValue,
+    onChange: handleChange,
+    disabled,
+    name,
+    optionType,
+    buttonStyle,
+    size
+  }), [resolvedValue, handleChange, disabled, name, optionType, buttonStyle, size]);
+  const normalizedOptions = options?.map((option) => typeof option === "object" ? option : {
+    label: String(option),
+    value: option
+  });
+  const renderOptions = () => normalizedOptions?.map((option) => optionType === "button" ? /* @__PURE__ */ jsx(RadioButton, { value: option.value, disabled: option.disabled, children: option.label }, String(option.value)) : /* @__PURE__ */ jsx(RadioBase, { value: option.value, disabled: option.disabled, label: option.label }, String(option.value)));
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(RadioGroupWrapper, { className: cx("ant-radio-group", `ant-radio-group-${buttonStyle}`, "ds-radio-group", className), style, fullWidth, big, children: normalizedOptions ? renderOptions() : children }) });
+};
+export {
+  RadioGroup as default
+};

package/dist/components/RadioBase.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { RadioProps } from '../Radio.types';
+export declare const RadioBase: ({ value, checked, defaultChecked, disabled, name, id, autoFocus, tabIndex, onChange, onClick, label, description, children, className, style, ...rest }: RadioProps) => React.JSX.Element;

package/dist/components/RadioBase.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext, useState } from "react";
+import { RadioWrapper, RadioLabel, RadioBox, RadioInput, RadioInner, RadioText, Label, AdditionalData, Description } from "../Radio.styles.js";
+import { RadioGroupContext } from "../RadioContext.js";
+const cx = (...classes) => classes.filter(Boolean).join(" ");
+const RadioBase = ({
+  value,
+  checked,
+  defaultChecked,
+  disabled,
+  name,
+  id,
+  autoFocus,
+  tabIndex,
+  onChange,
+  onClick,
+  label,
+  description,
+  children,
+  className,
+  style,
+  // forward data-*/aria-* (e.g. data-testid) to the input, as antd's rc-checkbox did
+  ...rest
+}) => {
+  const group = useContext(RadioGroupContext);
+  const isControlled = checked !== void 0;
+  const [internalChecked, setInternalChecked] = useState(Boolean(defaultChecked));
+  const isChecked = group ? group.value === value : isControlled ? Boolean(checked) : internalChecked;
+  const isDisabled = Boolean(disabled ?? group?.disabled);
+  const handleChange = (event) => {
+    if (isDisabled) {
+      return;
+    }
+    if (group) {
+      group.onChange(value, event.nativeEvent);
+      return;
+    }
+    if (!isControlled) {
+      setInternalChecked(true);
+    }
+    const changeEvent = {
+      target: {
+        value,
+        checked: true,
+        name
+      },
+      stopPropagation: () => event.stopPropagation(),
+      preventDefault: () => event.preventDefault(),
+      nativeEvent: event.nativeEvent
+    };
+    onChange?.(changeEvent);
+  };
+  return /* @__PURE__ */ jsxs(RadioWrapper, { className: cx("ds-radio-field", className), style, children: [
+    /* @__PURE__ */ jsxs(RadioLabel, { className: cx("ant-radio-wrapper", "ds-radio", isChecked && "ant-radio-wrapper-checked", isDisabled && "ant-radio-wrapper-disabled"), $checked: isChecked, $disabled: isDisabled, onClick, children: [
+      /* @__PURE__ */ jsxs(RadioBox, { className: cx("ant-radio", "ds-radio-box", isChecked && "ant-radio-checked", isDisabled && "ant-radio-disabled"), children: [
+        /* @__PURE__ */ jsx(RadioInput, { type: "radio", className: "ant-radio-input ds-radio-input", checked: isChecked, disabled: isDisabled, name: name ?? group?.name, id, autoFocus, tabIndex, value: value === void 0 ? void 0 : String(value), onChange: handleChange, ...rest }),
+        /* @__PURE__ */ jsx(RadioInner, { className: "ant-radio-inner ds-radio-inner", $checked: isChecked, $disabled: isDisabled })
+      ] }),
+      /* @__PURE__ */ jsx(RadioText, { $checked: isChecked, $disabled: isDisabled, children: label ? /* @__PURE__ */ jsx(Label, { disabled: isDisabled, children: label }) : children })
+    ] }),
+    description && /* @__PURE__ */ jsx(AdditionalData, { children: /* @__PURE__ */ jsx(Description, { disabled: isDisabled, children: description }) })
+  ] });
+};
+export {
+  RadioBase
+};

package/dist/components/RadioButton.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { RadioButtonProps } from '../Radio.types';
+/**
+ * Segmented button-style radio (`Radio.Button`). Reproduces antd's `ant-radio-button-wrapper` DOM
+ * (class names kept as hooks only); the segment visual lives in the `RadioButtonLabel`
+ * styled-component, driven by checked/disabled/solid `$`-props read from the group context. When
+ * standalone (no group) `checked` applies directly; inside a group the group's value wins (antd
+ * parity). `onChange`/`onClick`/`style` always pass through.
+ */
+export declare const RadioButton: ({ value, disabled, children, className, checked, onChange, onClick, style, ...rest }: RadioButtonProps) => React.JSX.Element;

package/dist/components/RadioButton.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { RadioButtonLabel, RadioButtonInput } from "../Radio.styles.js";
+import { RadioGroupContext } from "../RadioContext.js";
+const cx = (...classes) => classes.filter(Boolean).join(" ");
+const RadioButton = ({
+  value,
+  disabled,
+  children,
+  className,
+  checked,
+  onChange,
+  onClick,
+  style,
+  // forward data-*/aria-* (e.g. data-testid) to the input, as antd's rc-checkbox did
+  ...rest
+}) => {
+  const group = useContext(RadioGroupContext);
+  const isChecked = group ? group.value === value : Boolean(checked);
+  const isDisabled = Boolean(disabled ?? group?.disabled);
+  const handleChange = (event) => {
+    if (isDisabled) {
+      return;
+    }
+    if (group) {
+      group.onChange(value, event.nativeEvent);
+    }
+    if (onChange) {
+      const changeEvent = {
+        target: {
+          value,
+          checked: true,
+          name: group?.name
+        },
+        stopPropagation: () => event.stopPropagation(),
+        preventDefault: () => event.preventDefault(),
+        nativeEvent: event.nativeEvent
+      };
+      onChange(changeEvent);
+    }
+  };
+  return /* @__PURE__ */ jsxs(RadioButtonLabel, { className: cx("ant-radio-button-wrapper", "ds-radio-button", isChecked && "ant-radio-button-wrapper-checked", isDisabled && "ant-radio-button-wrapper-disabled", className), style, onClick, $checked: isChecked, $disabled: isDisabled, $solid: group?.buttonStyle === "solid", $size: group?.size, children: [
+    /* @__PURE__ */ jsx("span", { className: cx("ant-radio-button", isChecked && "ant-radio-button-checked", isDisabled && "ant-radio-button-disabled"), children: /* @__PURE__ */ jsx(RadioButtonInput, { type: "radio", className: "ant-radio-button-input ds-radio-button-input", checked: isChecked, disabled: isDisabled, name: group?.name, value: value === void 0 ? void 0 : String(value), onChange: handleChange, ...rest }) }),
+    /* @__PURE__ */ jsx("span", { children })
+  ] });
+};
+export {
+  RadioButton
+};

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioBase } from './RadioBase';
+export { RadioButton } from './RadioButton';

package/dist/components/index.js

@@ -0,0 +1,6 @@
+import { RadioBase } from "./RadioBase.js";
+import { RadioButton } from "./RadioButton.js";
+export {
+  RadioBase,
+  RadioButton
+};

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Radio';
-export type { RadioProps, RadioGroupProps } from './Radio.types';
+export type { RadioProps, RadioGroupProps, RadioButtonProps, RadioChangeEvent, RadioValueType, Props, } from './Radio.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-radio",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "Radio UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -17,6 +17,7 @@
   "files": [
     "/dist",
     "CHANGELOG.md",
+    "CLAUDE.md",
     "README.md",
     "package.json",
     "LICENSE.md"
@@ -41,15 +42,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-form-field": "^1.3.23",
-    "@synerise/ds-typography": "^1.1.26"
+    "@synerise/ds-form-field": "^1.3.24",
+    "@synerise/ds-typography": "^1.1.27",
+    "@synerise/ds-utils": "^1.10.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
+  "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
 }

package/dist/style/index.css

@@ -1,3 +0,0 @@
-.ant-radio-group{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';display:inline-block;font-size:0}.ant-radio-group .ant-badge-count{z-index:1}.ant-radio-group>.ant-badge:not(:first-child)>.ant-radio-button-wrapper{border-left:none}.ant-radio-wrapper{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;display:inline-flex;align-items:baseline;margin-right:8px;cursor:pointer}.ant-radio-wrapper-disabled{cursor:not-allowed}.ant-radio-wrapper::after{display:inline-block;width:0;overflow:hidden;content:'\a0'}.ant-radio-wrapper.ant-radio-wrapper-in-form-item input[type=radio]{width:14px;height:14px}.ant-radio{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;top:.2em;display:inline-block;outline:0;cursor:pointer}.ant-radio-input:focus+.ant-radio-inner,.ant-radio-wrapper:hover .ant-radio,.ant-radio:hover .ant-radio-inner{border-color:#0b68ff}.ant-radio-input:focus+.ant-radio-inner{box-shadow:0 0 0 3px #85b4ff}.ant-radio-checked::after{position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid #0b68ff;border-radius:50%;visibility:hidden;animation:antRadioEffect .36s ease-in-out;animation-fill-mode:both;content:''}.ant-radio-wrapper:hover .ant-radio::after,.ant-radio:hover::after{visibility:visible}.ant-radio-inner{position:relative;top:0;left:0;display:block;width:16px;height:16px;background-color:#fff;border-color:#dbe0e3;border-style:solid;border-width:1px;border-radius:50%;transition:all .3s}.ant-radio-inner::after{position:absolute;top:50%;left:50%;display:block;width:16px;height:16px;margin-top:-8px;margin-left:-8px;background-color:#0b68ff;border-top:0;border-left:0;border-radius:16px;transform:scale(0);opacity:0;transition:all .3s cubic-bezier(.78, .14, .15, .86);content:' '}.ant-radio-input{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;cursor:pointer;opacity:0}.ant-radio.ant-radio-disabled .ant-radio-inner{border-color:#dbe0e3}.ant-radio-checked .ant-radio-inner{border-color:#0b68ff}.ant-radio-checked .ant-radio-inner::after{transform:scale(.5);opacity:1;transition:all .3s cubic-bezier(.78, .14, .15, .86)}.ant-radio-disabled{cursor:not-allowed}.ant-radio-disabled .ant-radio-inner{background-color:#f9fafb;cursor:not-allowed}.ant-radio-disabled .ant-radio-inner::after{background-color:rgba(0,0,0,.2)}.ant-radio-disabled .ant-radio-input{cursor:not-allowed}.ant-radio-disabled+span{color:#b5bdc3;cursor:not-allowed}span.ant-radio+*{padding-right:8px;padding-left:8px}.ant-radio-button-wrapper{position:relative;display:inline-block;height:32px;margin:0;padding:0 15px;color:#6a7580;font-size:13px;line-height:30px;background:#fff;border:1px solid #dbe0e3;border-top-width:1.02px;border-left-width:0;cursor:pointer;transition:color .3s,background .3s,border-color .3s,box-shadow .3s}.ant-radio-button-wrapper a{color:#6a7580}.ant-radio-button-wrapper>.ant-radio-button{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%}.ant-radio-group-large .ant-radio-button-wrapper{height:48px;font-size:13px;line-height:46px}.ant-radio-group-small .ant-radio-button-wrapper{height:24px;padding:0 7px;line-height:22px}.ant-radio-button-wrapper:not(:first-child)::before{position:absolute;top:-1px;left:-1px;display:block;box-sizing:content-box;width:1px;height:100%;padding:1px 0;background-color:#dbe0e3;transition:background-color .3s;content:''}.ant-radio-button-wrapper:first-child{border-left:1px solid #dbe0e3;border-radius:3px 0 0 3px}.ant-radio-button-wrapper:last-child{border-radius:0 3px 3px 0}.ant-radio-button-wrapper:first-child:last-child{border-radius:3px}.ant-radio-button-wrapper:hover{position:relative;color:#0b68ff}.ant-radio-button-wrapper:focus-within{box-shadow:0 0 0 3px #85b4ff}.ant-radio-button-wrapper .ant-radio-inner,.ant-radio-button-wrapper input[type=checkbox],.ant-radio-button-wrapper input[type=radio]{width:0;height:0;opacity:0;pointer-events:none}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){z-index:1;color:#0b68ff;background:#f9fafb;border-color:#0b68ff}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before{background-color:#0b68ff}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child{border-color:#0b68ff}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:#38f;border-color:#38f}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before{background-color:#38f}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active{color:#004cd9;border-color:#004cd9}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active::before{background-color:#004cd9}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within{box-shadow:0 0 0 3px #85b4ff}.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){color:#fff;background:#0b68ff;border-color:#0b68ff}.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:#fff;background:#38f;border-color:#38f}.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active{color:#fff;background:#004cd9;border-color:#004cd9}.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within{box-shadow:0 0 0 3px #85b4ff}.ant-radio-button-wrapper-disabled{color:#b5bdc3;background-color:#f9fafb;border-color:#dbe0e3;cursor:not-allowed}.ant-radio-button-wrapper-disabled:first-child,.ant-radio-button-wrapper-disabled:hover{color:#b5bdc3;background-color:#f9fafb;border-color:#dbe0e3}.ant-radio-button-wrapper-disabled:first-child{border-left-color:#dbe0e3}.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked{color:#b5bdc3;background-color:#e6e6e6;border-color:#dbe0e3;box-shadow:none}@keyframes antRadioEffect{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}.ant-radio-group.ant-radio-group-rtl{direction:rtl}.ant-radio-wrapper.ant-radio-wrapper-rtl{margin-right:0;margin-left:8px;direction:rtl}.ant-radio-button-wrapper.ant-radio-button-wrapper-rtl{border-right-width:0;border-left-width:1px}.ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper:not(:first-child)::before{right:-1px;left:0}.ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper:first-child{border-right:1px solid #dbe0e3;border-radius:0 3px 3px 0}.ant-radio-button-wrapper-checked:not([class*=' ant-radio-button-wrapper-disabled']).ant-radio-button-wrapper:first-child{border-right-color:#38f}.ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper:last-child{border-radius:3px 0 0 3px}.ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper-disabled:first-child{border-right-color:#dbe0e3}.ant-radio-wrapper{display:flex;white-space:normal}.ant-radio+span{padding:0;color:#57616d;font-weight:500;margin:0 12px 0 12px;position:relative}.ant-radio-checked+span{color:#384350}.ant-radio-wrapper-disabled .ant-radio+span{color:#6a7580;opacity:.4}.ant-radio-wrapper{align-items:unset}.ant-radio-wrapper::after{display:none}.ant-radio-input:hover+.ant-radio-inner{border-color:#b5bdc3}.ant-radio-input:focus+.ant-radio-inner{border-color:#0b68ff;background-color:#f4faff;border-width:2px}.ant-radio-input:focus+.ant-radio-inner{box-shadow:none}.ant-radio-checked .ant-radio-inner{border-color:#0b68ff;border-width:2px}.ant-radio-button-wrapper{background-color:#f9fafb;color:#57616d}.ant-radio-button-wrapper:hover{background-color:#fff;color:#57616d}.ant-radio-button-wrapper:focus{border:2px solid #0b68ff;z-index:2;margin-left:-1px;top:1px}.ant-radio-button-wrapper:focus span+span{top:-2px}.ant-radio-button-wrapper:not(:focus){top:0}.ant-radio-button-wrapper:not(:first-child)::before{display:none}.ant-radio-button-wrapper:not(:first-child):not(:focus)::before{position:absolute;top:0;left:-1px;display:block;width:1px;height:100%;background-color:#dbe0e3;content:''}.ant-radio-button-wrapper-checked:not( .ant-radio-button-wrapper-disabled){box-shadow:-1px 0 0 0 #0b68ff}.ant-radio-button-wrapper span+span{position:relative;top:-1px}.ant-radio-button-wrapper-disabled{color:#57616d;opacity:.4}.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(
-.ant-radio-button-wrapper-disabled
-):hover{color:#fff;background:#238afe;border-color:#238afe;box-shadow:-1px 0 0 0 #238afe}