@synerise/ds-switch 1.2.32 → 1.2.33

package/CHANGELOG.md

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

package/dist/RawSwitch.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+/**
+ * DS-native bare toggle (antd-free replacement for the former `RawSwitch = antd Switch`). Renders a
+ * `<button role="switch">` — keyboard (space/enter) toggling works natively. Controlled via `checked`,
+ * uncontrolled via `defaultChecked`. Native button attributes + `data-*` are forwarded so React-Final-Form
+ * `{...input}` spreads keep working. The `ds-switch-*` / `ant-switch-*` class hooks are kept on the element
+ * (the `ant-*` ones temporarily, for ui-tests / external CSS).
+ */
+declare const RawSwitch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onChange" | "onClick" | "value"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    loading?: boolean;
+    size?: import('./Switch.types').SwitchSize;
+    onChange?: import('./Switch.types').SwitchChangeHandler;
+    onClick?: import('./Switch.types').SwitchChangeHandler;
+} & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLButtonElement>>;
+export default RawSwitch;

package/dist/RawSwitch.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { forwardRef, useState } from "react";
+import { Toggle, Handle, Spinner } from "./RawSwitch.styles.js";
+const RawSwitch = forwardRef(({
+  checked,
+  defaultChecked,
+  disabled,
+  loading,
+  size: _size,
+  className,
+  onChange,
+  onClick,
+  ...rest
+}, ref) => {
+  const isControlled = checked !== void 0;
+  const [internalChecked, setInternalChecked] = useState(Boolean(defaultChecked));
+  const isChecked = isControlled ? Boolean(checked) : internalChecked;
+  const isDisabled = Boolean(disabled || loading);
+  const hasError = (className ?? "").split(/\s+/).includes("error");
+  const handleClick = (event) => {
+    if (isDisabled) {
+      return;
+    }
+    const next = !isChecked;
+    if (!isControlled) {
+      setInternalChecked(next);
+    }
+    onClick?.(next, event);
+    onChange?.(next, event);
+  };
+  return /* @__PURE__ */ jsx(Toggle, { ...rest, ref, type: "button", role: "switch", "aria-checked": isChecked, disabled: isDisabled, $checked: isChecked, $error: hasError, $loading: loading, onClick: handleClick, className: classNames("ant-switch ds-switch-toggle", {
+    "ant-switch-checked ds-switch-checked": isChecked,
+    "ant-switch-disabled ds-switch-disabled": isDisabled,
+    "ant-switch-loading ds-switch-loading": loading
+  }, className), children: /* @__PURE__ */ jsx(Handle, { $checked: isChecked, children: loading && /* @__PURE__ */ jsx(Spinner, {}) }) });
+});
+export {
+  RawSwitch as default
+};

package/dist/RawSwitch.styles.d.ts

@@ -0,0 +1,11 @@
+type ToggleProps = {
+    $checked?: boolean;
+    $error?: boolean;
+    $loading?: boolean;
+};
+export declare const Toggle: import('styled-components').StyledComponent<"button", any, ToggleProps, never>;
+export declare const Handle: import('styled-components').StyledComponent<"span", any, {
+    $checked?: boolean;
+}, never>;
+export declare const Spinner: import('styled-components').StyledComponent<"span", any, {}, never>;
+export {};

package/dist/RawSwitch.styles.js

@@ -0,0 +1,33 @@
+import styled, { css, keyframes } from "styled-components";
+const trackBackground = (props, hovered) => {
+  const {
+    theme,
+    $checked,
+    $error
+  } = props;
+  if ($error) {
+    return theme.palette["red-600"];
+  }
+  if ($checked) {
+    return theme.palette[hovered ? "green-500" : "green-600"];
+  }
+  return theme.palette[hovered ? "grey-500" : "grey-400"];
+};
+const spin = /* @__PURE__ */ keyframes(["from{transform:rotate(0deg);}to{transform:rotate(360deg);}"]);
+const Toggle = /* @__PURE__ */ styled.button.withConfig({
+  displayName: "RawSwitchstyles__Toggle",
+  componentId: "sc-1ducz2x-0"
+})(["position:relative;box-sizing:border-box;min-width:28px;width:28px;height:16px;padding:0;border:2px solid transparent;border-radius:8px;background-color:", ";cursor:pointer;vertical-align:middle;outline:none;transition:background-color 0.2s ease,border-color 0.2s ease;&:hover:not(:disabled){background-color:", ";}&:focus-visible{border-color:", ";}&:disabled{cursor:not-allowed;opacity:0.4;}", ""], (props) => trackBackground(props, false), (props) => trackBackground(props, true), (props) => props.theme.palette["blue-600"], (props) => !!props.$loading && css(["cursor:default;"]));
+const Handle = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "RawSwitchstyles__Handle",
+  componentId: "sc-1ducz2x-1"
+})(["position:absolute;top:0;left:", ";width:12px;height:12px;border-radius:50%;background-color:", ";transition:left 0.2s ease;"], (props) => props.$checked ? "calc(100% - 12px)" : "0", (props) => props.theme.palette.white);
+const Spinner = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "RawSwitchstyles__Spinner",
+  componentId: "sc-1ducz2x-2"
+})(["position:absolute;top:1px;left:1px;width:10px;height:10px;border:1.5px solid ", ";border-top-color:", ";border-radius:50%;animation:", " 0.8s linear infinite;"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["green-600"], spin);
+export {
+  Handle,
+  Spinner,
+  Toggle
+};

package/dist/Switch.d.ts

@@ -1,13 +1,21 @@
 import { default as React } from 'react';
-export declare const RawSwitch: React.ForwardRefExoticComponent<import('antd').SwitchProps & React.RefAttributes<HTMLElement>>;
-export declare const Switch: React.ForwardRefExoticComponent<Omit<import('antd').SwitchProps, "size"> & {
-    errorText?: React.ReactNode;
+import { default as RawSwitch } from './RawSwitch';
+export { RawSwitch };
+export declare const Switch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onChange" | "onClick" | "value"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    loading?: boolean;
+    size?: import('./Switch.types').SwitchSize;
+    onChange?: import('./Switch.types').SwitchChangeHandler;
+    onClick?: import('./Switch.types').SwitchChangeHandler;
+} & import('@synerise/ds-utils').DataAttributes & {
     label: React.ReactNode;
     description?: React.ReactNode;
+    errorText?: React.ReactNode;
     withFormElementMargin?: boolean;
-} & {
     tooltipIcon?: React.ReactNode;
     tooltip?: React.ReactNode;
     tooltipConfig?: import('@synerise/ds-tooltip').TooltipProps;
+    style?: React.CSSProperties;
 } & React.RefAttributes<HTMLDivElement>>;
 export default Switch;

package/dist/Switch.js

@@ -1,10 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Switch as Switch$1 } from "antd";
-import classnames from "classnames";
+import classNames from "classnames";
 import { forwardRef, useId, useRef } from "react";
+import RawSwitch from "./RawSwitch.js";
 import { SwitchWrapper, LabelSwitchWrapper, Texts, Label, DescriptionWrapper, BelowLabel, Error, Description } from "./Switch.styles.js";
-import "./style/index.css";
-const RawSwitch = Switch$1;
 const Switch = forwardRef(({
   errorText,
   label,
@@ -15,13 +13,13 @@ const Switch = forwardRef(({
   tooltip,
   className,
   tooltipConfig,
-  ...antdSwitchProps
+  ...rawSwitchProps
 }, ref) => {
   const id = useId();
   const switchElement = useRef(null);
-  return /* @__PURE__ */ jsxs(SwitchWrapper, { ref, className: classnames(["ds-switch", className]), formElementMargin: Boolean(withFormElementMargin), children: [
+  return /* @__PURE__ */ jsxs(SwitchWrapper, { ref, className: classNames(["ds-switch", className]), formElementMargin: Boolean(withFormElementMargin), children: [
     /* @__PURE__ */ jsxs(LabelSwitchWrapper, { children: [
-      /* @__PURE__ */ jsx(RawSwitch, { ...antdSwitchProps, size: "small", className: errorText ? "error" : "", id, ref: switchElement, onChange: (checked, event) => {
+      /* @__PURE__ */ jsx(RawSwitch, { ...rawSwitchProps, size: "small", className: errorText ? "error" : "", id, ref: switchElement, onChange: (checked, event) => {
         setTimeout(() => {
           if (switchElement !== null && switchElement.current !== null) {
             switchElement.current.blur();

package/dist/Switch.styles.js

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { FormFieldLabel } from "@synerise/ds-form-field";
 import { macro } from "@synerise/ds-typography";
+import { Toggle } from "./RawSwitch.styles.js";
 const SwitchWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Switchstyles__SwitchWrapper",
   componentId: "sc-1gmh4sk-0"
@@ -12,7 +13,7 @@ const Texts = /* @__PURE__ */ styled.div.withConfig({
 const Label = /* @__PURE__ */ styled(FormFieldLabel).withConfig({
   displayName: "Switchstyles__Label",
   componentId: "sc-1gmh4sk-2"
-})(["", ";cursor:pointer;transition:0.3s ease;width:100%;display:flex;align-items:center;"], macro.heading);
+})(["", ";color:", ";cursor:pointer;transition:0.3s ease;width:100%;display:flex;align-items:center;"], macro.heading, (props) => props.theme.palette["grey-700"]);
 const BelowLabel = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Switchstyles__BelowLabel",
   componentId: "sc-1gmh4sk-3"
@@ -20,7 +21,7 @@ const BelowLabel = /* @__PURE__ */ styled.div.withConfig({
 const LabelSwitchWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Switchstyles__LabelSwitchWrapper",
   componentId: "sc-1gmh4sk-4"
-})(["display:flex;flex-direction:row;justify-content:flex-start;align-items:center;"]);
+})(["display:flex;flex-direction:row;justify-content:flex-start;align-items:center;", ":hover:not(:disabled) + .switch-texts .switch-label{color:", ";}", ":disabled + .switch-texts .switch-label{color:", ";opacity:0.4;}"], Toggle, (props) => props.theme.palette["grey-800"], Toggle, (props) => props.theme.palette["grey-600"]);
 const Error = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Switchstyles__Error",
   componentId: "sc-1gmh4sk-5"

package/dist/Switch.types.d.ts

@@ -1,15 +1,32 @@
-import { SwitchProps as AntdSwitchProps } from 'antd';
-import { ReactNode } from 'react';
+import { ButtonHTMLAttributes, CSSProperties, MouseEvent, ReactNode } from 'react';
 import { TooltipProps as DsTooltipProps } from '@synerise/ds-tooltip';
-type TooltipProps = {
-    tooltipIcon?: ReactNode;
-    tooltip?: ReactNode;
-    tooltipConfig?: DsTooltipProps;
+import { DataAttributes } from '@synerise/ds-utils';
+export type SwitchSize = 'small' | 'default';
+export type SwitchChangeHandler = (checked: boolean, event: MouseEvent<HTMLButtonElement>) => void;
+/** antd-Switch-style controls (kept back-compatible). */
+type SwitchControlProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    loading?: boolean;
+    /** Accepted for API compatibility — the DS switch renders at a single fixed size. */
+    size?: SwitchSize;
+    onChange?: SwitchChangeHandler;
+    onClick?: SwitchChangeHandler;
 };
-export type Props = Omit<AntdSwitchProps, 'size'> & {
-    errorText?: ReactNode;
+/**
+ * Bare DS toggle (the `RawSwitch` export). A `<button role="switch">` that also forwards native
+ * button attributes (name, onBlur/onFocus, etc.) + `data-*` so React-Final-Form `{...input}` spreads
+ * keep working. `disabled`, `id`, `className`, `style`, `title`, `tabIndex` come from the native attrs.
+ */
+export type RawSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onClick' | 'type' | 'value'> & SwitchControlProps & DataAttributes;
+export type Props = RawSwitchProps & {
     label: ReactNode;
     description?: ReactNode;
+    errorText?: ReactNode;
     withFormElementMargin?: boolean;
-} & TooltipProps;
+    tooltipIcon?: ReactNode;
+    tooltip?: ReactNode;
+    tooltipConfig?: DsTooltipProps;
+    style?: CSSProperties;
+};
 export {};

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { default, RawSwitch } from './Switch';
-export type { Props as SwitchProps } from './Switch.types';
+export type { Props as SwitchProps, RawSwitchProps } from './Switch.types';

package/dist/index.js

@@ -1,5 +1,6 @@
-import { RawSwitch, Switch } from "./Switch.js";
+import { Switch } from "./Switch.js";
+import { default as default2 } from "./RawSwitch.js";
 export {
-  RawSwitch,
+  default2 as RawSwitch,
   Switch as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-switch",
-  "version": "1.2.32",
+  "version": "1.2.33",
   "description": "Switch UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -41,19 +41,19 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-form-field": "^1.3.22",
-    "@synerise/ds-typography": "^1.1.25",
+    "@synerise/ds-form-field": "^1.3.23",
+    "@synerise/ds-typography": "^1.1.26",
+    "@synerise/ds-utils": "^1.10.1",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
-    "@synerise/ds-tooltip": "^1.5.2"
+    "@synerise/ds-tooltip": "^1.5.3"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "fe3379f50afdce6d8c61a2222ebbf03324107c95"
+  "gitHead": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
 }

package/dist/style/index.css

@@ -1 +0,0 @@
-.ant-switch{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-block;box-sizing:border-box;min-width:44px;height:22px;line-height:22px;vertical-align:middle;background-color:#b5bdc3;border:0;border-radius:100px;cursor:pointer;transition:all .2s;user-select:none}.ant-switch:focus{outline:0;box-shadow:0 0 0 2px rgba(181,189,195,.1)}.ant-switch-checked:focus{box-shadow:0 0 0 2px #e6f4ff}.ant-switch:focus:hover{box-shadow:none}.ant-switch-checked{background-color:#54cb0b}.ant-switch-disabled,.ant-switch-loading{cursor:not-allowed;opacity:.4}.ant-switch-disabled *,.ant-switch-loading *{box-shadow:none;cursor:not-allowed}.ant-switch-inner{display:block;margin:0 7px 0 25px;color:#fff;font-size:11px;transition:margin .2s}.ant-switch-checked .ant-switch-inner{margin:0 25px 0 7px}.ant-switch-handle{position:absolute;top:2px;left:2px;width:18px;height:18px;transition:all .2s ease-in-out}.ant-switch-handle::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;border-radius:9px;box-shadow:0 2px 4px 0 rgba(0,35,11,.2);transition:all .2s ease-in-out;content:''}.ant-switch-checked .ant-switch-handle{left:calc(100% - 18px - 2px)}.ant-switch:not(.ant-switch-disabled):active .ant-switch-handle::before{right:-30%;left:0}.ant-switch:not(.ant-switch-disabled):active.ant-switch-checked .ant-switch-handle::before{right:0;left:-30%}.ant-switch-loading-icon.anticon{position:relative;top:2.5px;color:rgba(0,0,0,.65);vertical-align:top}.ant-switch-checked .ant-switch-loading-icon{color:#54cb0b}.ant-switch-small{min-width:28px;height:16px;line-height:16px}.ant-switch-small .ant-switch-inner{margin:0 5px 0 18px;font-size:11px}.ant-switch-small .ant-switch-handle{width:12px;height:12px}.ant-switch-small .ant-switch-loading-icon{top:1.5px;font-size:9px}.ant-switch-small.ant-switch-checked .ant-switch-inner{margin:0 18px 0 5px}.ant-switch-small.ant-switch-checked .ant-switch-handle{left:calc(100% - 12px - 2px)}.ant-switch-rtl{direction:rtl}.ant-switch-rtl .ant-switch-inner{margin:0 25px 0 7px}.ant-switch-rtl .ant-switch-handle{right:2px;left:auto}.ant-switch-rtl:not(.ant-switch-rtl-disabled):active .ant-switch-handle::before{right:0;left:-30%}.ant-switch-rtl:not(.ant-switch-rtl-disabled):active.ant-switch-checked .ant-switch-handle::before{right:-30%;left:0}.ant-switch-rtl.ant-switch-checked .ant-switch-inner{margin:0 7px 0 25px}.ant-switch-rtl.ant-switch-checked .ant-switch-handle{right:calc(100% - 18px - 2px)}.ant-switch-rtl.ant-switch-small.ant-switch-checked .ant-switch-handle{right:calc(100% - 12px - 2px)}.ant-switch{min-width:unset;width:28px;height:16px;border:2px solid transparent}.ant-switch:not(.ant-switch-disabled):active::after,.ant-switch:not(.ant-switch-disabled):active::before{width:12px}.ant-switch+.switch-texts .switch-label{color:#57616d}.ant-switch.ant-switch.error{background-color:#f52922}.ant-switch:hover{background-color:#949ea6}.ant-switch:hover+.switch-texts .switch-label{color:#384350}.ant-switch .ant-switch-handle{width:12px;height:12px;top:0;left:0}.ant-switch .ant-switch-handle::before{box-shadow:none}.ant-switch.ant-switch .ant-click-animating-node{display:none}.ant-switch-checked:hover{background-color:#76dc25}.ant-switch-checked+.switch-texts .switch-label{color:#57616d}.ant-switch-checked+.switch-texts .switch-label:hover{color:#384350}.ant-switch-checked.ant-switch-checked .ant-switch-handle{left:calc(100% - 12px)}.ant-switch:focus{box-shadow:none;border:2px solid #0b68ff}.ant-switch-checked::after{margin-left:0}.ant-switch:not(.ant-switch-checked)::after{left:0}.ant-switch-disabled+.switch-texts .switch-label{color:#6a7580;opacity:.4}.ant-switch-disabled+.switch-texts .switch-description{color:#6a7580;opacity:.4}