@synerise/ds-switch 1.2.33 → 1.2.34

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 +87 -0
  3. package/package.json +7 -6
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.2.34](https://github.com/synerise/synerise-design/compare/@synerise/ds-switch@1.2.33...@synerise/ds-switch@1.2.34) (2026-07-23)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-switch
9
+
6
10
  ## [1.2.33](https://github.com/synerise/synerise-design/compare/@synerise/ds-switch@1.2.32...@synerise/ds-switch@1.2.33) (2026-06-17)
7
11
 
8
12
  **Note:** Version bump only for package @synerise/ds-switch
package/CLAUDE.md ADDED
@@ -0,0 +1,87 @@
1
+ # Switch (`@synerise/ds-switch`)
2
+
3
+ > A DS-native toggle switch (label, description, error state, tooltip). **antd-free** — `RawSwitch` is
4
+ > a DS `<button role="switch">` (formerly a re-export of antd's Switch).
5
+
6
+ ## Package structure
7
+
8
+ ```
9
+ src/
10
+ Switch.tsx — DS wrapper (Switch + re-exports RawSwitch); label/description/error/tooltip
11
+ RawSwitch.tsx — DS-native bare toggle (<button role="switch">), controlled/uncontrolled
12
+ RawSwitch.styles.ts — styled track (Toggle) + Handle + loading Spinner
13
+ Switch.types.ts — RawSwitchProps, Props (SwitchProps), SwitchSize
14
+ Switch.styles.ts — wrapper/label/texts + switch↔label state styling
15
+ Switch.figma.tsx — Figma Code Connect mappings
16
+ index.ts — public exports
17
+ ```
18
+
19
+ > No `style/` LESS — the antd switch LESS base + mixin were reimplemented in `RawSwitch.styles.ts`.
20
+
21
+ ## Public exports
22
+
23
+ ```ts
24
+ export { default, RawSwitch } from './Switch';
25
+ export type { Props as SwitchProps, RawSwitchProps } from './Switch.types';
26
+ ```
27
+
28
+ - `Switch` — default export, `forwardRef<HTMLDivElement, Props>`, the full wrapped component.
29
+ - `RawSwitch` — DS-native bare toggle (`forwardRef<HTMLButtonElement, RawSwitchProps>`); use when you
30
+ need just the toggle without the DS label/description markup. Back-compatible with the antd-Switch
31
+ surface that was actually used.
32
+ - `SwitchProps`, `RawSwitchProps` — type exports.
33
+
34
+ ### `Switch`
35
+
36
+ | Prop | Type | Default | Description |
37
+ |------|------|---------|-------------|
38
+ | `label` | `ReactNode` | — | **Required.** Label next to the toggle; the accessible label (via `id` linkage). |
39
+ | `description` | `ReactNode` | — | Secondary text below the label. |
40
+ | `errorText` | `ReactNode` | — | Error message; adds the `"error"` class to the toggle (turns it red). |
41
+ | `tooltip` / `tooltipIcon` / `tooltipConfig` | — | — | Tooltip via `FormFieldLabel`; `tooltip={null}` suppresses the trigger. |
42
+ | `withFormElementMargin` | `boolean` | `false` | Adds `margin: 0 0 16px` to the wrapper. |
43
+ | `className` | `string` | — | Appended to the outer wrapper (always gets `"ds-switch"`). |
44
+ | _(all `RawSwitchProps`)_ | — | — | Forwarded to the toggle; `size` is forced to `"small"`. |
45
+
46
+ ### `RawSwitch` (`RawSwitchProps`)
47
+
48
+ DS-native `<button role="switch">`. Keyboard (space/enter) toggling works natively.
49
+
50
+ | Prop | Type | Description |
51
+ |------|------|-------------|
52
+ | `checked` | `boolean` | Controlled checked state. |
53
+ | `defaultChecked` | `boolean` | Initial state when uncontrolled. |
54
+ | `disabled` | `boolean` | Disables interaction. |
55
+ | `loading` | `boolean` | Shows a spinner in the handle and blocks interaction. |
56
+ | `size` | `'small' \| 'default'` | Accepted for compatibility; the DS toggle is a single fixed size (28×16). |
57
+ | `onChange` / `onClick` | `(checked: boolean, event) => void` | Fired with the **next** checked value. |
58
+ | _(native `<button>` attrs)_ | — | `id`, `name`, `onBlur`, `onFocus`, `style`, `title`, `tabIndex`, `data-*`, … are forwarded (so React-Final-Form `{...input}` spreads keep working). |
59
+
60
+ > Dropped from the antd surface (zero usage across puib/portal-next/universal-list): `checkedChildren`,
61
+ > `unCheckedChildren`, `autoFocus`.
62
+
63
+ ## Styling
64
+
65
+ - Toggle: 28×16 track, 8px radius, 12×12 white handle. Unchecked `grey-400` (hover `grey-500`), checked
66
+ `green-600` (hover `green-500`), error `red-600`, focus-visible border `blue-600`, disabled `opacity 0.4`.
67
+ Driven by transient `$checked` / `$error` / `$loading` props (no class selectors).
68
+ - Class hooks kept on the toggle for the interim: `ant-switch` / `ant-switch-checked` / `ant-switch-disabled`
69
+ / `ant-switch-loading` **and** `ds-switch-toggle` / `ds-switch-checked` / … (the `ant-*` ones removed later).
70
+ - Label (`S.Label`, `FormFieldLabel` + `macro.heading`) is `grey-700`, `grey-800` on toggle hover, faded
71
+ when disabled (sibling selectors on the styled `Toggle`).
72
+
73
+ ## Key dependencies
74
+
75
+ - `@synerise/ds-form-field` (`FormFieldLabel`), `@synerise/ds-typography` (`macro.heading`),
76
+ `@synerise/ds-utils` (`DataAttributes`), `@synerise/ds-tooltip` (dev — `TooltipProps`), `classnames`.
77
+
78
+ ## Implementation notes
79
+
80
+ - **No antd.** `RawSwitch` is a DS `<button role="switch" aria-checked>`; controlled when `checked` is
81
+ passed, otherwise internal state seeded by `defaultChecked`.
82
+ - `size="small"` is always passed by `Switch`; `size` does not change the toggle dimensions (fixed 28×16).
83
+ - Error: `Switch` adds the `error` class; `RawSwitch` derives its red `$error` styling from that class.
84
+ - After `onChange`, `Switch` blurs the toggle after a 300ms `setTimeout`.
85
+ - `Switch`'s `forwardRef` points at the outer wrapper `<div>`; the internal toggle ref is an
86
+ `HTMLButtonElement`.
87
+ - Tests: Vitest (`src/__specs__/Switch.spec.tsx`).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-switch",
3
- "version": "1.2.33",
3
+ "version": "1.2.34",
4
4
  "description": "Switch 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,13 +42,13 @@
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
  "classnames": "^2.5.1"
48
49
  },
49
50
  "devDependencies": {
50
- "@synerise/ds-tooltip": "^1.5.3"
51
+ "@synerise/ds-tooltip": "^1.5.4"
51
52
  },
52
53
  "peerDependencies": {
53
54
  "@synerise/ds-core": "*",
@@ -55,5 +56,5 @@
55
56
  "styled-components": "^5.3.3",
56
57
  "vitest": "4"
57
58
  },
58
- "gitHead": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
59
+ "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
59
60
  }