@synerise/ds-checkbox 1.2.34 → 1.2.36

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.2.36](https://github.com/synerise/synerise-design/compare/@synerise/ds-checkbox@1.2.35...@synerise/ds-checkbox@1.2.36) (2026-07-23)
+
+**Note:** Version bump only for package @synerise/ds-checkbox
+
+## [1.2.35](https://github.com/synerise/synerise-design/compare/@synerise/ds-checkbox@1.2.34...@synerise/ds-checkbox@1.2.35) (2026-06-27)
+
+**Note:** Version bump only for package @synerise/ds-checkbox
+
 ## [1.2.34](https://github.com/synerise/synerise-design/compare/@synerise/ds-checkbox@1.2.33...@synerise/ds-checkbox@1.2.34) (2026-06-17)
 
 **Note:** Version bump only for package @synerise/ds-checkbox

package/CLAUDE.md

@@ -0,0 +1,139 @@
+# Checkbox (`@synerise/ds-checkbox`)
+
+> DS-native, antd-free checkbox with DS-specific extras (description, error text, error styling, padding control), a `Checkbox.Group`, and a three-state mode (unchecked → checked → indeterminate → unchecked) via the `tristate` prop.
+
+## Package structure
+
+```
+src/
+  Checkbox.tsx              — router: delegates to CheckboxBase or CheckboxTristate; attaches .Group
+  Checkbox.types.ts         — CheckboxProps union, CheckboxGroupProps, event types, CheckboxValueType
+  Checkbox.styles.ts        — CheckboxLabel (full visual), CheckboxWrapper, AdditionalData
+  CheckboxGroup.tsx         — DS-native Checkbox.Group (context provider)
+  CheckboxContext.ts        — group context (value + toggle + register)
+  index.ts                  — public exports
+  components/
+    CheckboxBase.tsx        — DS-native checkbox input (DOM + group consumption + event synthesis)
+    CheckboxTristate.tsx    — three-state stateful layer on top of CheckboxBase
+  utils/
+    isTristateCheckbox.ts   — type guard: checks props.tristate === true
+    nextCheckedValues.ts    — state machine: (checked, indeterminate) → [nextChecked, nextIndeterminate]
+    checkedValue.ts         — maps (checked, indeterminate) → boolean | undefined for event payload
+```
+
+No LESS, no antd — the antd base + `checkbox.mixin.less` + styled overrides were inlined into `Checkbox.styles.ts`.
+
+## Public exports
+
+### `Checkbox` (default)
+
+Smart router component. If `tristate={true}`, renders `CheckboxTristate`; otherwise renders `CheckboxBase`. Attaches `Checkbox.Group` as a static property.
+
+#### DS-specific props (from `BaseCheckboxProps`)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `description` | `ReactNode` | `undefined` | Helper text rendered below the checkbox with `ds-typography` `Description`. Respects `disabled` state (greyed out). |
+| `errorText` | `ReactNode` | `undefined` | Error message rendered below. Also triggers the error visual on the checkbox box. |
+| `hasError` | `boolean` | `undefined` | Error visual (red border) without an error text message. |
+| `withoutPadding` | `boolean` | `undefined` | Removes the default `4px 12px 8px 8px` padding from the wrapper div. |
+
+#### Mode-selector prop
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tristate` | `true` | `undefined` | Switches to tristate mode. Changes the `onChange` event signature (see below). Cannot be `false` — omit the prop entirely for standard mode. |
+
+Standard checkbox props are supported: `checked`, `defaultChecked`, `disabled`, `indeterminate`, `autoFocus`, `onChange`, `children`, `value`, `name`, `id`, `tabIndex`. (DS-native types — no antd inheritance.)
+
+#### `onChange` event in tristate mode
+
+When `tristate={true}`, `onChange` receives a `CheckboxTristateChangeEvent` instead of the standard Ant Design `CheckboxChangeEvent`. The key difference: `event.target.checked` is `boolean | undefined` — `undefined` means the indeterminate state.
+
+#### `Checkbox.Group`
+
+DS-native group (`CheckboxGroup`) — a context provider that child `Checkbox`es read for their checked state and toggle through. Supports `value`/`defaultValue` (controlled/uncontrolled), `onChange(checkedValues)` (ordered by child mount order, or `options` order), `options`, `disabled`, `name`. Replaces the former antd `Checkbox.Group` re-export.
+
+### Utility functions (exported)
+
+| Export | Signature | Description |
+|--------|-----------|-------------|
+| `isTristateCheckbox` | `(props) => props is CheckboxTristateProps` | Type guard: returns `true` when `props.tristate === true`. |
+| `nextCheckedValues` | `(checked, indeterminate) => [boolean, boolean]` | Computes the next `[checked, indeterminate]` state in the tristate cycle. |
+| `checkedValue` | `(checked, indeterminate) => boolean \| undefined` | Converts internal state to the external checked value (`undefined` = indeterminate). |
+
+### Types (exported)
+
+| Export | Description |
+|--------|-------------|
+| `CheckboxProps` | `CheckboxBaseProps \| CheckboxTristateProps` — main union |
+| `CheckboxBaseProps` | Ant `CheckboxProps` + `BaseCheckboxProps`, with standard `onChange` |
+| `CheckboxTristateProps` | Ant `CheckboxProps` + `BaseCheckboxProps`, with `tristate: true` and tristate `onChange` |
+| `BaseCheckboxProps` | DS-only additions: `description`, `errorText`, `hasError`, `withoutPadding` |
+| `CheckboxTristateChangeEvent` | Tristate event type: `target.checked` is `boolean \| undefined` |
+| `CheckboxTristateChangeEventTarget` | The `target` shape inside `CheckboxTristateChangeEvent` |
+
+## Usage patterns
+
+```tsx
+import Checkbox from '@synerise/ds-checkbox';
+
+// Standard checkbox
+<Checkbox onChange={handleChange}>Label</Checkbox>
+
+// With error and description
+<Checkbox
+  hasError
+  errorText="This field is required"
+  description="Choose at least one option"
+>
+  Accept terms
+</Checkbox>
+
+// Tristate (uncontrolled — cycles false → true → indeterminate)
+<Checkbox
+  tristate
+  onChange={(e) => {
+    // e.target.checked: true | false | undefined (undefined = indeterminate)
+    console.log(e.target.checked);
+  }}
+>
+  Select all
+</Checkbox>
+
+// Tristate (controlled)
+<Checkbox
+  tristate
+  checked={someState} // boolean | undefined
+  onChange={(e) => setSomeState(e.target.checked)}
+>
+  Select all
+</Checkbox>
+
+// Group (Ant Design pass-through)
+<Checkbox.Group options={['A', 'B', 'C']} onChange={handleGroupChange} />
+```
+
+## Styling
+
+`Checkbox.styles.ts` is pure styled-components (theme tokens). **Each element is its own styled-component and owns its styles** — the `.ant-checkbox-*` / `ds-checkbox-*` 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 by `CheckboxBase`:
+- `CheckboxWrapper` — flex column container; `withoutPadding` removes default spacing.
+- `CheckboxBox` — the `.ant-checkbox` span (positioning).
+- `CheckboxInput` — the visually-hidden `<input>` overlaying the box.
+- `CheckboxInner` — the visible box: `grey-300` border, white-tick check (inline SVG data URL) when `$checked`, 2px white bar when `$indeterminate`, `$error` border, `$disabled` greys. 
+- `CheckboxText` — the label text; `$checked`/`$disabled` drive its colour/opacity.
+- `CheckboxLabel` — the `<label>`; layout + the **cross-element** rules (hover-preview, indeterminate hover, focus ring, disabled cursor) that reference the child styled-components (`&:hover ${CheckboxInner}`, `${CheckboxInput}:focus + ${CheckboxInner}`). The hover-preview rule is only emitted when `!$checked && !$indeterminate && !$disabled`, so checked/disabled states never fight it.
+- `AdditionalData` — left-aligns `errorText` and `description` below the checkbox box (28px left indent to align with label text).
+
+## Implementation notes
+
+- **Tristate state machine** — the cycle is: `false` (unchecked) → `true` (checked) → `indeterminate` (represented as `undefined` to consumers) → `false`. Implemented in `nextCheckedValues`:
+  - `checked=false` → `[true, false]`
+  - `checked=true, !indeterminate` → `[true, true]`
+  - anything else → `[false, false]`
+- **`tristate` as discriminated union discriminant** — `tristate?: never | false | undefined` in `OnChangeBaseProps` vs `tristate: true` in `OnChangeTristateProps`. This means TypeScript narrows `onChange` type correctly, but `tristate={false}` is technically forbidden by the type (use omission instead).
+- **Controlled tristate** — the `useEffect` in `CheckboxTristate` syncs external `checked` to internal state. If `checked === undefined` externally, sets `indeterminate=true` and internal `checked=false`. If `checked` is boolean, sets `indeterminate=false`.
+- **`CheckboxBase` and `CheckboxTristate` are NOT re-exported** from the main `index.ts` — they are internal components. Import `Checkbox` and use the `tristate` prop instead.
+- **`$solo` transient prop** — `CheckboxLabel` receives `$solo={!children && !errorText && !description}`. When true, adds `padding: 4px` to keep the bare checkbox box from being flush against its container.
+- **`Checkbox.Group`** is a DS-native context provider (`CheckboxGroup`). Child `Checkbox`es read the group's `value`/`toggleOption` from `CheckboxContext`; `options`-mode renders `CheckboxBase` directly (avoids a `Checkbox` ↔ `CheckboxGroup` import cycle).
+- **`onChange` event is synthesised** in `CheckboxBase` from the native input change: `{ target: { value, name, checked }, stopPropagation, preventDefault, nativeEvent }` — antd-compatible shape.

package/dist/Checkbox.d.ts

@@ -2,6 +2,6 @@ import { default as React } from 'react';
 import { CheckboxProps } from './Checkbox.types';
 export declare const Checkbox: {
     (props: CheckboxProps): React.JSX.Element;
-    Group: React.MemoExoticComponent<React.ForwardRefExoticComponent<import('antd/lib/checkbox').CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>>;
+    Group: ({ value, defaultValue, onChange, options, disabled, name, children, className, style, }: import('./Checkbox.types').CheckboxGroupProps) => React.JSX.Element;
 };
 export default Checkbox;

package/dist/Checkbox.js

@@ -1,16 +1,15 @@
 import { jsx } from "react/jsx-runtime";
-import { AntdCheckbox } from "./Checkbox.styles.js";
+import CheckboxGroup from "./CheckboxGroup.js";
 import { CheckboxBase } from "./components/CheckboxBase.js";
 import { CheckboxTristate } from "./components/CheckboxTristate.js";
 import { isTristateCheckbox } from "./utils/isTristateCheckbox.js";
-import "./style/index.css";
 const Checkbox = (props) => {
   if (isTristateCheckbox(props)) {
     return /* @__PURE__ */ jsx(CheckboxTristate, { ...props });
   }
   return /* @__PURE__ */ jsx(CheckboxBase, { ...props });
 };
-Checkbox.Group = AntdCheckbox.Group;
+Checkbox.Group = CheckboxGroup;
 export {
   Checkbox,
   Checkbox as default

package/dist/Checkbox.styles.d.ts

@@ -1,15 +1,23 @@
-import { Checkbox as BaseAntCheckbox, CheckboxProps } from 'antd';
-/**
- * error TS4023: Exported variable 'AntdCheckbox' has or is using name 'CompoundedComponent' from external module "/Users/biedronne/Documents/Work/DS2/synerise-design/node_modules/antd/lib/checkbox/index" but cannot be named.
- */
-type CompoundedComponent = React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> & {
-    Group: typeof BaseAntCheckbox.Group;
-};
-export declare const AntdCheckbox: import('styled-components').StyledComponent<CompoundedComponent, any, {
-    $solo: boolean;
-}, never>;
-export declare const AdditionalData: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const CheckboxWrapper: import('styled-components').StyledComponent<"div", any, {
     withoutPadding: boolean;
 }, never>;
-export {};
+export declare const AdditionalData: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CheckboxInput: import('styled-components').StyledComponent<"input", any, {}, never>;
+export declare const CheckboxInner: import('styled-components').StyledComponent<"span", any, {
+    $checked?: boolean;
+    $indeterminate?: boolean;
+    $disabled?: boolean;
+    $error?: boolean;
+}, never>;
+export declare const CheckboxText: import('styled-components').StyledComponent<"span", any, {
+    $checked?: boolean;
+    $disabled?: boolean;
+}, never>;
+export declare const CheckboxBox: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const CheckboxLabel: import('styled-components').StyledComponent<"label", any, {
+    $solo?: boolean;
+    $checked?: boolean;
+    $indeterminate?: boolean;
+    $disabled?: boolean;
+    $error?: boolean;
+}, never>;

package/dist/Checkbox.styles.js

@@ -1,25 +1,43 @@
-import { Checkbox } from "antd";
 import styled, { css } from "styled-components";
 const checkSvgWithCustomColor = (color) => {
   const colorValueForSvg = color.replace(/#/, "%23");
-  const iconWithColor = `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18' >/><path fill='none' d='M0 0h24v24H0z' /><path style='fill: ${colorValueForSvg};' stroke-width='1' stroke='${colorValueForSvg}' d='M10.61 15.744a.75.75 0 01-.535-.224l-3.11-3.162a.75.75 0 011.07-1.052l2.575 2.618 5.355-5.444a.75.75 0 111.07 1.052l-5.89 5.988a.75.75 0 01-.535.224z'/></svg>`;
-  return iconWithColor;
+  return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18" >/><path fill="none" d="M0 0h24v24H0z" /><path style="fill: ${colorValueForSvg};" stroke-width="1" stroke="${colorValueForSvg}" d="M10.61 15.744a.75.75 0 01-.535-.224l-3.11-3.162a.75.75 0 011.07-1.052l2.575 2.618 5.355-5.444a.75.75 0 111.07 1.052l-5.89 5.988a.75.75 0 01-.535.224z"/></svg>`;
 };
 const soloCss = /* @__PURE__ */ css(["padding:4px;"]);
-const AntdCheckbox = /* @__PURE__ */ styled(Checkbox).withConfig({
-  displayName: "Checkboxstyles__AntdCheckbox",
+const CheckboxWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Checkboxstyles__CheckboxWrapper",
   componentId: "sc-10i9aa0-0"
-})(["&&{display:flex;align-items:center;line-height:1;", ";.ant-checkbox{top:0;}}.ant-checkbox-input:focus + .ant-checkbox-inner{border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";}&& > .ant-checkbox-disabled.ant-checkbox-checked > span.ant-checkbox-inner{background-image:", ";}&& > .ant-checkbox-checked > span.ant-checkbox-inner{background-image:", ";::after{display:none;}:focus{border:none;}}&&{> .ant-checkbox-indeterminate,.ant-checkbox-indeterminate.ant-checkbox-checked{> span.ant-checkbox-inner{background-color:", ";border:1px solid ", ";background-image:none;::after{background:#fff;height:2px;display:table;left:50%;}}}:hover{> .ant-checkbox-indeterminate,.ant-checkbox-indeterminate.ant-checkbox-checked{> span.ant-checkbox-inner{background-color:", ";}}}}&&:hover > .ant-checkbox:not(.ant-checkbox-checked):not( .ant-checkbox-indeterminate ):not(.ant-checkbox-disabled) > span.ant-checkbox-inner{border-width:1px;border-style:solid;border-color:", " !important;outline:none;background-image:", ";}"], (props) => props.$solo && soloCss, (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"], (props) => `url("${checkSvgWithCustomColor(props.theme.palette["grey-400"])}")`, (props) => `url("${checkSvgWithCustomColor(props.theme.palette.white)}")`, (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-500"], (props) => props.theme.palette["blue-600"], (props) => `url("${checkSvgWithCustomColor(props.theme.palette["blue-600"])}")`);
+})(["display:flex;padding:", ";flex-direction:column;"], (props) => props.withoutPadding ? "0" : "4px 12px 8px 8px");
 const AdditionalData = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Checkboxstyles__AdditionalData",
   componentId: "sc-10i9aa0-1"
 })(["margin:2px 12px 0px 28px;"]);
-const CheckboxWrapper = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Checkboxstyles__CheckboxWrapper",
+const CheckboxInput = /* @__PURE__ */ styled.input.withConfig({
+  displayName: "Checkboxstyles__CheckboxInput",
   componentId: "sc-10i9aa0-2"
-})(["display:flex;padding:", ";flex-direction:column;"], (props) => props.withoutPadding ? "0" : "4px 12px 8px 8px");
+})(["position:absolute;inset:0;width:16px;height:16px;margin:0;padding:0;opacity:0;cursor:pointer;z-index:1;"]);
+const CheckboxInner = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Checkboxstyles__CheckboxInner",
+  componentId: "sc-10i9aa0-3"
+})(["position:relative;display:block;width:16px;height:16px;box-sizing:border-box;background-color:", ";border:1px solid ", ";border-radius:3px;background-repeat:no-repeat;background-position:center;background-size:contain;", " ", " ", " ", " ", ""], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-300"], (props) => props.$checked && css(["background-color:", ";border-color:", ";background-image:url('", "');"], props.theme.palette["blue-600"], props.theme.palette["blue-600"], checkSvgWithCustomColor(props.theme.palette.white)), (props) => props.$indeterminate && css(["background-color:", ";border-color:", ";background-image:none;&::after{content:'';position:absolute;top:50%;left:50%;width:8px;height:2px;background:", ";border-radius:2px;transform:translate(-50%,-50%);}"], props.theme.palette["blue-600"], props.theme.palette["blue-600"], props.theme.palette.white), (props) => props.$error && css(["border-color:", ";border-width:2px;"], props.theme.palette["red-600"]), (props) => props.$error && props.$checked && css(["border-color:", ";"], props.theme.palette["blue-600"]), (props) => props.$disabled && css(["border-color:", " !important;background-color:", " !important;", ""], props.theme.palette["grey-200"], props.theme.palette["grey-050"], props.$checked && `background-image: url('${checkSvgWithCustomColor(props.theme.palette["grey-400"])}');`));
+const CheckboxText = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Checkboxstyles__CheckboxText",
+  componentId: "sc-10i9aa0-4"
+})(["margin:0;padding-left:12px;font-size:14px;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 CheckboxBox = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Checkboxstyles__CheckboxBox",
+  componentId: "sc-10i9aa0-5"
+})(["position:relative;top:0;display:inline-flex;flex:none;cursor:pointer;"]);
+const CheckboxLabel = /* @__PURE__ */ styled.label.withConfig({
+  displayName: "Checkboxstyles__CheckboxLabel",
+  componentId: "sc-10i9aa0-6"
+})(["display:flex;align-items:center;line-height:1;margin:0;cursor:pointer;", ";&:hover ", "{color:", ";}", " ", " ", ":focus + ", "{border-color:", ";box-shadow:inset 0 0 0 1px ", ";}", " ", ""], (props) => props.$solo && soloCss, CheckboxText, (props) => props.theme.palette["grey-800"], (props) => !props.$checked && !props.$indeterminate && !props.$disabled && css(["&:hover ", "{border-color:", ";background-image:url('", "');}"], CheckboxInner, props.theme.palette["blue-600"], checkSvgWithCustomColor(props.theme.palette["blue-600"])), (props) => props.$indeterminate && css(["&:hover ", "{background-color:", ";}"], CheckboxInner, props.theme.palette["blue-500"]), CheckboxInput, CheckboxInner, (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"], (props) => props.$error && css(["", ":focus + ", "{box-shadow:0 0 0 1px ", ";}"], CheckboxInput, CheckboxInner, props.theme.palette["red-600"]), (props) => props.$disabled && css(["cursor:not-allowed;", ",", "{cursor:not-allowed;}"], CheckboxBox, CheckboxInput));
 export {
   AdditionalData,
-  AntdCheckbox,
+  CheckboxBox,
+  CheckboxInner,
+  CheckboxInput,
+  CheckboxLabel,
+  CheckboxText,
   CheckboxWrapper
 };

package/dist/Checkbox.types.d.ts

@@ -1,30 +1,76 @@
-import { AbstractCheckboxProps, CheckboxProps as AntCheckboxProps } from 'antd/lib/checkbox/Checkbox';
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+export type CheckboxValueType = string | number | boolean;
 export type BaseCheckboxProps = {
     description?: ReactNode;
-    errorText?: string;
+    errorText?: ReactNode;
     hasError?: boolean;
     withoutPadding?: boolean;
 };
-export type CheckboxTristateChangeEventTarget = CheckboxTristateProps & {
+/** antd-compatible change event shape (`target.checked` is a boolean for the base checkbox). */
+export type CheckboxChangeEventTarget = {
+    type: 'checkbox';
+    checked: boolean;
+    value?: CheckboxValueType;
+    name?: string;
+    [key: string]: unknown;
+};
+export type CheckboxChangeEvent = {
+    target: CheckboxChangeEventTarget;
+    stopPropagation: () => void;
+    preventDefault: () => void;
+    nativeEvent: Event;
+};
+/** Tristate event — `target.checked` may be `undefined` (the indeterminate state). */
+export type CheckboxTristateChangeEventTarget = Omit<CheckboxChangeEventTarget, 'checked'> & {
     checked: boolean | undefined;
-    onChange?: (e: CheckboxTristateChangeEvent) => void;
 };
 export type CheckboxTristateChangeEvent = {
     target: CheckboxTristateChangeEventTarget;
     stopPropagation: () => void;
     preventDefault: () => void;
-    nativeEvent: MouseEvent;
+    nativeEvent: Event;
+};
+type CommonCheckboxProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    value?: CheckboxValueType;
+    name?: string;
+    id?: string;
+    autoFocus?: boolean;
+    tabIndex?: number;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    /** Forwarded to the underlying <input> (e.g. data-testid), matching antd's rc-checkbox. */
+    [dataAttr: `data-${string}`]: string;
 };
 type OnChangeBaseProps = {
     tristate?: never | false | undefined;
-    onChange?: AntCheckboxProps['onChange'];
+    onChange?: (event: CheckboxChangeEvent) => void;
 };
 type OnChangeTristateProps = {
     tristate: true;
-    onChange?: AbstractCheckboxProps<CheckboxTristateChangeEvent>['onChange'];
+    onChange?: (event: CheckboxTristateChangeEvent) => void;
 };
-export type CheckboxBaseProps = Omit<AntCheckboxProps, 'onChange'> & BaseCheckboxProps & OnChangeBaseProps;
-export type CheckboxTristateProps = Omit<AntCheckboxProps, 'onChange'> & BaseCheckboxProps & OnChangeTristateProps;
+export type CheckboxBaseProps = CommonCheckboxProps & BaseCheckboxProps & OnChangeBaseProps;
+export type CheckboxTristateProps = CommonCheckboxProps & BaseCheckboxProps & OnChangeTristateProps;
 export type CheckboxProps = CheckboxBaseProps | CheckboxTristateProps;
+export type CheckboxOptionType = {
+    label: ReactNode;
+    value: CheckboxValueType;
+    disabled?: boolean;
+};
+export type CheckboxGroupProps = {
+    value?: CheckboxValueType[];
+    defaultValue?: CheckboxValueType[];
+    onChange?: (checkedValues: CheckboxValueType[]) => void;
+    options?: (CheckboxValueType | CheckboxOptionType)[];
+    disabled?: boolean;
+    name?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+};
 export {};

package/dist/CheckboxContext.d.ts

@@ -0,0 +1,15 @@
+import { CheckboxValueType } from './Checkbox.types';
+export type CheckboxGroupContextValue = {
+    /** Currently checked values. */
+    value: CheckboxValueType[];
+    /** Toggle a value in/out of the checked set. */
+    toggleOption: (value: CheckboxValueType) => void;
+    /** Register a child value (in mount order) so onChange keeps child order. */
+    registerValue: (value: CheckboxValueType) => void;
+    /** Unregister a child value on unmount. */
+    unregisterValue: (value: CheckboxValueType) => void;
+    disabled?: boolean;
+    name?: string;
+};
+/** Provided by `Checkbox.Group`; consumed by child `Checkbox`es. `null` when standalone. */
+export declare const CheckboxGroupContext: import('react').Context<CheckboxGroupContextValue | null>;

package/dist/CheckboxContext.js

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

package/dist/CheckboxGroup.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { CheckboxGroupProps } from './Checkbox.types';
+/**
+ * DS-native replacement for antd's `Checkbox.Group`. Provides a context that child `Checkbox`es read
+ * (checked state + toggle) and emits `onChange` with the checked values ordered by child mount order
+ * (or `options` order). Controlled via `value`, uncontrolled via `defaultValue`.
+ */
+declare const CheckboxGroup: ({ value, defaultValue, onChange, options, disabled, name, children, className, style, }: CheckboxGroupProps) => React.JSX.Element;
+export default CheckboxGroup;

package/dist/CheckboxGroup.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useMemo } from "react";
+import styled from "styled-components";
+import { CheckboxGroupContext } from "./CheckboxContext.js";
+import { CheckboxBase } from "./components/CheckboxBase.js";
+import { cx } from "./utils/cx.js";
+const GroupWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "CheckboxGroup__GroupWrapper",
+  componentId: "sc-1a8ubty-0"
+})(["display:inline-block;"]);
+const CheckboxGroup = ({
+  value,
+  defaultValue = [],
+  onChange,
+  options,
+  disabled,
+  name,
+  children,
+  className,
+  style
+}) => {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const resolvedValue = isControlled ? value : internalValue;
+  const registeredRef = useRef([]);
+  const registerValue = useCallback((optionValue) => {
+    if (!registeredRef.current.includes(optionValue)) {
+      registeredRef.current = [...registeredRef.current, optionValue];
+    }
+  }, []);
+  const unregisterValue = useCallback((optionValue) => {
+    registeredRef.current = registeredRef.current.filter((registered) => registered !== optionValue);
+  }, []);
+  const toggleOption = useCallback((optionValue) => {
+    const isCurrentlyChecked = resolvedValue.includes(optionValue);
+    const nextSet = isCurrentlyChecked ? resolvedValue.filter((v) => v !== optionValue) : [...resolvedValue, optionValue];
+    const order = options ? options.map((option) => typeof option === "object" ? option.value : option) : registeredRef.current;
+    const ordered = order.filter((v) => nextSet.includes(v));
+    const extras = nextSet.filter((v) => !order.includes(v));
+    const result = [...ordered, ...extras];
+    if (!isControlled) {
+      setInternalValue(result);
+    }
+    onChange?.(result);
+  }, [resolvedValue, isControlled, onChange, options]);
+  const contextValue = useMemo(() => ({
+    value: resolvedValue,
+    toggleOption,
+    registerValue,
+    unregisterValue,
+    disabled,
+    name
+  }), [resolvedValue, toggleOption, registerValue, unregisterValue, disabled, name]);
+  const normalizedOptions = options?.map((option) => typeof option === "object" ? option : {
+    label: String(option),
+    value: option
+  });
+  return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(GroupWrapper, { className: cx("ant-checkbox-group", "ds-checkbox-group", className), style, children: normalizedOptions ? normalizedOptions.map((option) => /* @__PURE__ */ jsx(CheckboxBase, { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))) : children }) });
+};
+export {
+  CheckboxGroup as default
+};

package/dist/components/CheckboxBase.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { CheckboxBaseProps } from '../Checkbox.types';
-export declare const CheckboxBase: ({ description, errorText, children, withoutPadding, hasError, ...antdCheckboxProps }: CheckboxBaseProps) => React.JSX.Element;
+export declare const CheckboxBase: ({ description, errorText, children, withoutPadding, hasError, checked, defaultChecked, indeterminate, disabled, onChange, tristate, value, name, id, autoFocus, tabIndex, className, style, ...rest }: CheckboxBaseProps) => React.JSX.Element;

package/dist/components/CheckboxBase.js

@@ -1,19 +1,90 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext, useRef, useState, useEffect } from "react";
 import { ErrorText, Description } from "@synerise/ds-typography";
-import { CheckboxWrapper, AntdCheckbox, AdditionalData } from "../Checkbox.styles.js";
+import { CheckboxWrapper, CheckboxLabel, CheckboxBox, CheckboxInput, CheckboxInner, CheckboxText, AdditionalData } from "../Checkbox.styles.js";
+import { CheckboxGroupContext } from "../CheckboxContext.js";
+import { cx } from "../utils/cx.js";
 const CheckboxBase = ({
   description,
   errorText,
   children,
   withoutPadding,
   hasError,
-  ...antdCheckboxProps
+  checked,
+  defaultChecked,
+  indeterminate,
+  disabled,
+  onChange,
+  // discriminant for the tristate union — consumed here so it never leaks onto the input via ...rest
+  tristate,
+  value,
+  name,
+  id,
+  autoFocus,
+  tabIndex,
+  className,
+  style,
+  // forward data-*/aria-* (e.g. data-testid) to the input, as antd's rc-checkbox did
+  ...rest
 }) => {
-  return /* @__PURE__ */ jsxs(CheckboxWrapper, { className: "ds-checkbox", withoutPadding: Boolean(withoutPadding), children: [
-    /* @__PURE__ */ jsx(AntdCheckbox, { ...antdCheckboxProps, className: hasError || errorText ? "error" : void 0, $solo: !children && !errorText && !description, children }),
+  const group = useContext(CheckboxGroupContext);
+  const inputRef = useRef(null);
+  const isControlled = checked !== void 0;
+  const [internalChecked, setInternalChecked] = useState(Boolean(defaultChecked));
+  const isChecked = group ? group.value.includes(value) : isControlled ? Boolean(checked) : internalChecked;
+  const isDisabled = Boolean(disabled ?? group?.disabled);
+  const hasErr = Boolean(hasError || errorText);
+  const isSolo = !children && !errorText && !description;
+  useEffect(() => {
+    if (!group || value === void 0) {
+      return void 0;
+    }
+    group.registerValue(value);
+    return () => group.unregisterValue(value);
+  }, [value]);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = Boolean(indeterminate);
+    }
+  }, [indeterminate]);
+  const handleChange = (event) => {
+    if (isDisabled) {
+      return;
+    }
+    const nextChecked = event.target.checked;
+    if (!group && !isControlled) {
+      setInternalChecked(nextChecked);
+    }
+    if (group && value !== void 0) {
+      group.toggleOption(value);
+    }
+    const changeEvent = {
+      // `type: 'checkbox'` mirrors antd/rc-checkbox's event target — consumers that read
+      // `event.target.type` (e.g. react-final-form's getValue) need it to treat the value as a
+      // boolean from `checked`; without it they fall back to `target.value` and the field never updates.
+      target: {
+        type: "checkbox",
+        value,
+        name: name ?? group?.name,
+        checked: nextChecked
+      },
+      stopPropagation: () => event.stopPropagation(),
+      preventDefault: () => event.preventDefault(),
+      nativeEvent: event.nativeEvent
+    };
+    onChange?.(changeEvent);
+  };
+  return /* @__PURE__ */ jsxs(CheckboxWrapper, { className: cx("ds-checkbox", className), style, withoutPadding: Boolean(withoutPadding), children: [
+    /* @__PURE__ */ jsxs(CheckboxLabel, { className: cx("ant-checkbox-wrapper", "ds-checkbox-wrapper", hasErr && "error", isDisabled && "ant-checkbox-wrapper-disabled", isDisabled && "ds-checkbox-disabled"), $solo: isSolo, $checked: isChecked, $indeterminate: Boolean(indeterminate), $disabled: isDisabled, $error: hasErr, children: [
+      /* @__PURE__ */ jsxs(CheckboxBox, { className: cx("ant-checkbox", "ds-checkbox-box", isChecked && "ant-checkbox-checked", indeterminate && "ant-checkbox-indeterminate", isDisabled && "ant-checkbox-disabled"), children: [
+        /* @__PURE__ */ jsx(CheckboxInput, { ref: inputRef, type: "checkbox", className: "ant-checkbox-input ds-checkbox-input", checked: isChecked, disabled: isDisabled, name: name ?? group?.name, id, autoFocus, tabIndex, onChange: handleChange, ...rest }),
+        /* @__PURE__ */ jsx(CheckboxInner, { className: "ant-checkbox-inner ds-checkbox-inner", $checked: isChecked, $indeterminate: Boolean(indeterminate), $disabled: isDisabled, $error: hasErr })
+      ] }),
+      children !== void 0 && children !== null && children !== false && /* @__PURE__ */ jsx(CheckboxText, { $checked: isChecked, $disabled: isDisabled, children })
+    ] }),
     (errorText || description) && /* @__PURE__ */ jsxs(AdditionalData, { children: [
       errorText && /* @__PURE__ */ jsx(ErrorText, { children: errorText }),
-      description && /* @__PURE__ */ jsx(Description, { disabled: antdCheckboxProps.disabled, children: description })
+      description && /* @__PURE__ */ jsx(Description, { disabled: isDisabled, children: description })
     ] })
   ] });
 };

package/dist/index.js

@@ -1,9 +1,11 @@
 import { Checkbox } from "./Checkbox.js";
 import { checkedValue } from "./utils/checkedValue.js";
+import { cx } from "./utils/cx.js";
 import { isTristateCheckbox } from "./utils/isTristateCheckbox.js";
 import { nextCheckedValues } from "./utils/nextCheckedValues.js";
 export {
   checkedValue,
+  cx,
   Checkbox as default,
   isTristateCheckbox,
   nextCheckedValues

package/dist/utils/cx.d.ts

@@ -0,0 +1 @@
+export declare const cx: (...classes: (string | false | undefined)[]) => string;

package/dist/utils/cx.js

@@ -0,0 +1,4 @@
+const cx = (...classes) => classes.filter(Boolean).join(" ");
+export {
+  cx
+};

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { checkedValue } from './checkedValue';
+export { cx } from './cx';
 export { isTristateCheckbox } from './isTristateCheckbox';
 export { nextCheckedValues } from './nextCheckedValues';

package/dist/utils/index.js

@@ -1,8 +1,10 @@
 import { checkedValue } from "./checkedValue.js";
+import { cx } from "./cx.js";
 import { isTristateCheckbox } from "./isTristateCheckbox.js";
 import { nextCheckedValues } from "./nextCheckedValues.js";
 export {
   checkedValue,
+  cx,
   isTristateCheckbox,
   nextCheckedValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-checkbox",
-  "version": "1.2.34",
+  "version": "1.2.36",
   "description": "Checkbox 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"
@@ -40,16 +41,15 @@
     "*.less"
   ],
   "dependencies": {
-    "@synerise/ds-typography": "^1.1.26"
+    "@synerise/ds-typography": "^1.1.27"
   },
   "devDependencies": {
     "vitest": "4"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
+  "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
 }

package/dist/style/index.css

@@ -1 +0,0 @@
-@keyframes antCheckboxEffect{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}.ant-checkbox{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;line-height:1;white-space:nowrap;outline:0;cursor:pointer}.ant-checkbox-input:focus+.ant-checkbox-inner,.ant-checkbox-wrapper:hover .ant-checkbox-inner,.ant-checkbox:hover .ant-checkbox-inner{border-color:#0b68ff}.ant-checkbox-checked::after{position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid #0b68ff;border-radius:3px;visibility:hidden;animation:antCheckboxEffect .36s ease-in-out;animation-fill-mode:backwards;content:''}.ant-checkbox-wrapper:hover .ant-checkbox::after,.ant-checkbox:hover::after{visibility:visible}.ant-checkbox-inner{position:relative;top:0;left:0;display:block;width:16px;height:16px;direction:ltr;background-color:#fff;border:1px solid #dbe0e3;border-radius:3px;border-collapse:separate;transition:all .3s}.ant-checkbox-inner::after{position:absolute;top:50%;left:21.5%;display:table;width:5.71428571px;height:9.14285714px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg) scale(0) translate(-50%,-50%);opacity:0;transition:all .1s cubic-bezier(.71, -.46, .88, .6),opacity .1s;content:' '}.ant-checkbox-input{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;height:100%;cursor:pointer;opacity:0}.ant-checkbox-checked .ant-checkbox-inner::after{position:absolute;display:table;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg) scale(1) translate(-50%,-50%);opacity:1;transition:all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;content:' '}.ant-checkbox-checked .ant-checkbox-inner{background-color:#0b68ff;border-color:#0b68ff}.ant-checkbox-disabled{cursor:not-allowed}.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after{border-color:#b5bdc3;animation-name:none}.ant-checkbox-disabled .ant-checkbox-input{cursor:not-allowed;pointer-events:none}.ant-checkbox-disabled .ant-checkbox-inner{background-color:#f9fafb;border-color:#dbe0e3!important}.ant-checkbox-disabled .ant-checkbox-inner::after{border-color:#f9fafb;border-collapse:separate;animation-name:none}.ant-checkbox-disabled+span{color:#b5bdc3;cursor:not-allowed}.ant-checkbox-disabled:hover::after,.ant-checkbox-wrapper:hover .ant-checkbox-disabled::after{visibility:hidden}.ant-checkbox-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';display:inline-flex;align-items:baseline;line-height:unset;cursor:pointer}.ant-checkbox-wrapper::after{display:inline-block;width:0;overflow:hidden;content:'\a0'}.ant-checkbox-wrapper.ant-checkbox-wrapper-disabled{cursor:not-allowed}.ant-checkbox-wrapper+.ant-checkbox-wrapper{margin-left:8px}.ant-checkbox-wrapper.ant-checkbox-wrapper-in-form-item input[type=checkbox]{width:14px;height:14px}.ant-checkbox+span{padding-right:8px;padding-left:8px}.ant-checkbox-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}.ant-checkbox-group-item{margin-right:8px}.ant-checkbox-group-item:last-child{margin-right:0}.ant-checkbox-group-item+.ant-checkbox-group-item{margin-left:0}.ant-checkbox-indeterminate .ant-checkbox-inner{background-color:#fff;border-color:#dbe0e3}.ant-checkbox-indeterminate .ant-checkbox-inner::after{top:50%;left:50%;width:8px;height:8px;background-color:#0b68ff;border:0;transform:translate(-50%,-50%) scale(1);opacity:1;content:' '}.ant-checkbox-indeterminate.ant-checkbox-disabled .ant-checkbox-inner::after{background-color:#b5bdc3;border-color:#b5bdc3}.ant-checkbox-rtl{direction:rtl}.ant-checkbox-group-rtl .ant-checkbox-group-item{margin-right:0;margin-left:8px}.ant-checkbox-group-rtl .ant-checkbox-group-item:last-child{margin-left:0!important}.ant-checkbox-group-rtl .ant-checkbox-group-item+.ant-checkbox-group-item{margin-left:8px}.ant-checkbox-inner.ant-checkbox-inner{transition:unset}.ant-checkbox-inner.ant-checkbox-inner:after{transition:unset}.ant-checkbox-wrapper{transition:unset}.ant-checkbox-wrapper *{transition:unset}.ant-checkbox+span{margin:0;padding-left:12px;font-size:14px;color:#57616d;font-weight:500;position:relative}.ant-checkbox-wrapper:hover .ant-checkbox+span{color:#384350}.ant-checkbox-wrapper:after{display:none}.ant-checkbox-wrapper.error .ant-checkbox-inner{border-color:#f52922!important;border-width:2px;box-shadow:0 2px 4px 0 rgba(181,189,195,.2)}.ant-checkbox-wrapper.error .ant-checkbox-input:focus+.ant-checkbox-inner{box-shadow:0 0 0 1px #f52922}.ant-checkbox-wrapper.error .ant-checkbox-checked .ant-checkbox-inner{border-color:#0b68ff!important}.ant-checkbox-wrapper.error .ant-checkbox-checked .ant-checkbox-input:hover+.ant-checkbox-inner{border-color:#238afe;background-color:#238afe}.ant-checkbox-wrapper.error .ant-checkbox-checked .ant-checkbox-input:focus+.ant-checkbox-inner{border-color:#0b68ff;background-color:#238afe;box-shadow:0 0 0 1px #0b68ff}.ant-checkbox-wrapper.error .ant-checkbox-checked .ant-checkbox-input:focus+.ant-checkbox-inner:after{left:20%}.ant-checkbox-input:hover+.ant-checkbox-inner{border-color:#b5bdc3}.ant-checkbox-input:focus+.ant-checkbox-inner{border-color:#0b68ff;background-color:#f4faff;border-width:2px}.ant-checkbox-wrapper-disabled .ant-checkbox+span{color:#6a7580;opacity:.4}.ant-checkbox-disabled .ant-checkbox-inner{border-color:#e9edee!important;background-color:#f9fafb!important}.ant-checkbox-checked .ant-checkbox-input:hover+.ant-checkbox-inner{border-color:#238afe;background-color:#238afe}.ant-checkbox-checked .ant-checkbox-input:focus+.ant-checkbox-inner{border-color:#0b68ff;background-color:#238afe}.ant-checkbox-checked .ant-checkbox-input:focus+.ant-checkbox-inner:after{left:20%}.ant-checkbox-checked+span{color:#384350}.ant-checkbox-indeterminate .ant-checkbox-inner::after{border-radius:2px}