@synerise/ds-switch 1.2.18 → 1.2.20

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.20](https://github.com/synerise/synerise-design/compare/@synerise/ds-switch@1.2.19...@synerise/ds-switch@1.2.20) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-switch
+
+## [1.2.19](https://github.com/synerise/synerise-design/compare/@synerise/ds-switch@1.2.18...@synerise/ds-switch@1.2.19) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-switch
+
 ## [1.2.18](https://github.com/synerise/synerise-design/compare/@synerise/ds-switch@1.2.17...@synerise/ds-switch@1.2.18) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-switch

package/README.md

@@ -23,17 +23,18 @@ Based on [Ant Design Switch](https://ant.design/components/switch/)
 | className         | additional class to Switch                        | string                                   | -         |
 | defaultChecked    | to set the initial state                          | boolean                                  | `false`   |
 | disabled          | Disable switch                                    | boolean                                  | `false`   |
-| description       | Switch description                                | string                                   | -         |
-| errorText         | Error message, when provided changes switch style | string                                   | -         |
-| label             | switch label                                      | string                                   | -         |
-| tooltip           | tooltip next to label                             | string | null                       | `null`    |
+| description       | Switch description                                | React.ReactNode                          | -         |
+| errorText         | Error message, when provided changes switch style | React.ReactNode                          | -         |
+| label             | switch label (required)                           | React.ReactNode                          | -         |
+| tooltip           | tooltip next to label                             | React.ReactNode                          | -         |
 | tooltipIcon       | icon for tooltip                                  | React.ReactNode                          | -         |
-| tooltipConfig     | configuration of tooltip                          | React.ReactNode                          | -         |
+| tooltipConfig     | configuration of tooltip                          | TooltipProps (`@synerise/ds-tooltip`)    | -         |
+| withFormElementMargin | add 16px bottom margin (standard form field spacing) | boolean                             | `false`   |
 | loading           | loading state of switch                           | boolean                                  | `false`   |
 | onChange          | trigger when the checked state is changing        | (checked: boolean, event: Event) => void | -         |
 | onClick           | trigger when clicked                              | (checked: boolean, event: Event) => void | -         |
 | unCheckedChildren | content to be shown when the state is unchecked   | string / React.ReactNode                 | -         |
-| size              | the size of the Switch,                           | `small` | `default`                 | `default` |
+| ~~size~~          | ~~the size of the Switch~~ — **not available**, always renders as `small` | —          | —         |
 
 ### Methods
 

package/dist/Switch.d.ts

@@ -1,8 +1,6 @@
-import React from 'react';
-import '@synerise/ds-core/dist/js/style';
-import './style/index.less';
-export declare const RawSwitch: React.ForwardRefExoticComponent<import("antd/lib/switch").SwitchProps & React.RefAttributes<HTMLElement>>;
-export declare const Switch: React.ForwardRefExoticComponent<Omit<import("antd/lib/switch").SwitchProps, "size"> & {
+import { default as React } from 'react';
+export declare const RawSwitch: React.ForwardRefExoticComponent<import('antd/lib/switch').SwitchProps & React.RefAttributes<HTMLElement>>;
+export declare const Switch: React.ForwardRefExoticComponent<Omit<import('antd/lib/switch').SwitchProps, "size"> & {
     errorText?: React.ReactNode;
     label: React.ReactNode;
     description?: React.ReactNode;
@@ -10,6 +8,6 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<import("antd/l
 } & {
     tooltipIcon?: React.ReactNode;
     tooltip?: React.ReactNode;
-    tooltipConfig?: import("@synerise/ds-tooltip").TooltipProps;
+    tooltipConfig?: import('@synerise/ds-tooltip').TooltipProps;
 } & React.RefAttributes<HTMLDivElement>>;
 export default Switch;

package/dist/Switch.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Switch.figma.js

@@ -0,0 +1,101 @@
+import { jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Switch, RawSwitch } from "./Switch.js";
+const FIGMA_URL = "https://www.figma.com/design/fsSZONXpVvtrDsCgtu01Jb/Synerise-Design-System?node-id=249-3688&m=dev";
+const labelProps = {
+  labelNested: figma.nestedProps("Label", {
+    text: figma.string("Text")
+  })
+};
+const descriptionProps = {
+  labelNested: figma.nestedProps("Label", {
+    text: figma.string("Text")
+  }),
+  descriptionNested: figma.nestedProps("Description", {
+    text: figma.string("Text")
+  })
+};
+figma.connect(Switch, FIGMA_URL, {
+  variant: {
+    State: "Default",
+    "Content Type": "Solo"
+  },
+  example: () => /* @__PURE__ */ jsx(RawSwitch, {})
+});
+figma.connect(Switch, FIGMA_URL, {
+  variant: {
+    State: "Default",
+    "Content Type": "Label"
+  },
+  props: labelProps,
+  example: ({
+    labelNested
+  }) => /* @__PURE__ */ jsx(Switch, { label: labelNested.text })
+});
+figma.connect(Switch, FIGMA_URL, {
+  variant: {
+    State: "Default",
+    "Content Type": "With Description"
+  },
+  props: descriptionProps,
+  example: ({
+    labelNested,
+    descriptionNested
+  }) => /* @__PURE__ */ jsx(Switch, { label: labelNested.text, description: descriptionNested.text })
+});
+figma.connect(Switch, FIGMA_URL, {
+  variant: {
+    State: "Selected",
+    "Content Type": "Solo"
+  },
+  example: () => /* @__PURE__ */ jsx(RawSwitch, { checked: true })
+});
+figma.connect(Switch, FIGMA_URL, {
+  variant: {
+    State: "Selected",
+    "Content Type": "Label"
+  },
+  props: labelProps,
+  example: ({
+    labelNested
+  }) => /* @__PURE__ */ jsx(Switch, { checked: true, label: labelNested.text })
+});
+figma.connect(Switch, FIGMA_URL, {
+  variant: {
+    State: "Selected",
+    "Content Type": "With Description"
+  },
+  props: descriptionProps,
+  example: ({
+    labelNested,
+    descriptionNested
+  }) => /* @__PURE__ */ jsx(Switch, { checked: true, label: labelNested.text, description: descriptionNested.text })
+});
+figma.connect(Switch, FIGMA_URL, {
+  variant: {
+    State: "Disabled",
+    "Content Type": "Solo"
+  },
+  example: () => /* @__PURE__ */ jsx(RawSwitch, { disabled: true })
+});
+figma.connect(Switch, FIGMA_URL, {
+  variant: {
+    State: "Disabled",
+    "Content Type": "Label"
+  },
+  props: labelProps,
+  example: ({
+    labelNested
+  }) => /* @__PURE__ */ jsx(Switch, { disabled: true, label: labelNested.text })
+});
+figma.connect(Switch, FIGMA_URL, {
+  variant: {
+    State: "Disabled",
+    "Content Type": "With Description"
+  },
+  props: descriptionProps,
+  example: ({
+    labelNested,
+    descriptionNested
+  }) => /* @__PURE__ */ jsx(Switch, { disabled: true, label: labelNested.text, description: descriptionNested.text })
+});

package/dist/Switch.js

@@ -1,57 +1,44 @@
-var _excluded = ["errorText", "label", "description", "onChange", "withFormElementMargin", "tooltipIcon", "tooltip", "className", "tooltipConfig"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import AntdSwitch from 'antd/lib/switch';
-import classnames from 'classnames';
-import React, { forwardRef, useId, useRef } from 'react';
-import '@synerise/ds-core/dist/js/style';
-import * as S from './Switch.styles';
+import { jsxs, jsx } from "react/jsx-runtime";
+import AntdSwitch from "antd/lib/switch";
+import classnames from "classnames";
+import { forwardRef, useId, useRef } from "react";
+import { SwitchWrapper, LabelSwitchWrapper, Texts, Label, DescriptionWrapper, BelowLabel, Error, Description } from "./Switch.styles.js";
 import "./style/index.css";
-
-// export RawSwitch from this file to have .less style side effects applied when only RawSwitch is used
-export var RawSwitch = AntdSwitch;
-export var Switch = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var errorText = _ref.errorText,
-    label = _ref.label,
-    description = _ref.description,
-    _onChange = _ref.onChange,
-    withFormElementMargin = _ref.withFormElementMargin,
-    tooltipIcon = _ref.tooltipIcon,
-    tooltip = _ref.tooltip,
-    className = _ref.className,
-    tooltipConfig = _ref.tooltipConfig,
-    antdSwitchProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var id = useId();
-  var switchElement = useRef(null);
-  return /*#__PURE__*/React.createElement(S.SwitchWrapper, {
-    ref: ref,
-    className: classnames(['ds-switch', className]),
-    formElementMargin: Boolean(withFormElementMargin)
-  }, /*#__PURE__*/React.createElement(S.LabelSwitchWrapper, null, /*#__PURE__*/React.createElement(RawSwitch, _extends({}, antdSwitchProps, {
-    size: "small",
-    className: errorText ? 'error' : '',
-    id: id,
-    ref: switchElement,
-    onChange: function onChange(checked, event) {
-      setTimeout(function () {
-        if (switchElement !== null && switchElement.current !== null) {
-          switchElement.current.blur();
-        }
-      }, 300);
-      _onChange && _onChange(checked, event);
-    }
-  })), /*#__PURE__*/React.createElement(S.Texts, {
-    className: "switch-texts"
-  }, /*#__PURE__*/React.createElement(S.Label, {
-    id: id,
-    className: "switch-label",
-    label: label,
-    tooltip: tooltip,
-    tooltipConfig: tooltipConfig
-  }))), (errorText || description) && /*#__PURE__*/React.createElement(S.DescriptionWrapper, null, /*#__PURE__*/React.createElement(S.Texts, {
-    className: "switch-texts"
-  }, /*#__PURE__*/React.createElement(S.BelowLabel, null, errorText && /*#__PURE__*/React.createElement(S.Error, null, errorText), description && /*#__PURE__*/React.createElement(S.Description, {
-    className: "switch-description"
-  }, description)))));
+const RawSwitch = AntdSwitch;
+const Switch = forwardRef(({
+  errorText,
+  label,
+  description,
+  onChange,
+  withFormElementMargin,
+  tooltipIcon,
+  tooltip,
+  className,
+  tooltipConfig,
+  ...antdSwitchProps
+}, ref) => {
+  const id = useId();
+  const switchElement = useRef(null);
+  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) => {
+        setTimeout(() => {
+          if (switchElement !== null && switchElement.current !== null) {
+            switchElement.current.blur();
+          }
+        }, 300);
+        onChange && onChange(checked, event);
+      } }),
+      /* @__PURE__ */ jsx(Texts, { className: "switch-texts", children: /* @__PURE__ */ jsx(Label, { id, className: "switch-label", label, tooltip, tooltipConfig }) })
+    ] }),
+    (errorText || description) && /* @__PURE__ */ jsx(DescriptionWrapper, { children: /* @__PURE__ */ jsx(Texts, { className: "switch-texts", children: /* @__PURE__ */ jsxs(BelowLabel, { children: [
+      errorText && /* @__PURE__ */ jsx(Error, { children: errorText }),
+      description && /* @__PURE__ */ jsx(Description, { className: "switch-description", children: description })
+    ] }) }) })
+  ] });
 });
-export default Switch;
+export {
+  RawSwitch,
+  Switch,
+  Switch as default
+};

package/dist/Switch.styles.d.ts

@@ -1,10 +1,10 @@
-export declare const SwitchWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const SwitchWrapper: import('styled-components').StyledComponent<"div", any, {
     formElementMargin: boolean;
 }, never>;
-export declare const Texts: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Label: import("styled-components").StyledComponent<({ id, label, tooltip, tooltipConfig, children, ...htmlAttributes }: import("@synerise/ds-form-field").FormFieldLabelProps) => React.JSX.Element, any, {}, never>;
-export declare const BelowLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LabelSwitchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Error: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Texts: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Label: import('styled-components').StyledComponent<({ id, label, tooltip, tooltipConfig, children, ...htmlAttributes }: import('@synerise/ds-form-field').FormFieldLabelProps) => React.JSX.Element, any, {}, never>;
+export declare const BelowLabel: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const LabelSwitchWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Error: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Description: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DescriptionWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Switch.styles.js

@@ -1,41 +1,45 @@
-import styled from 'styled-components';
-import { FormFieldLabel } from '@synerise/ds-form-field';
-import { macro } from '@synerise/ds-typography';
-export var SwitchWrapper = styled.div.withConfig({
+import styled from "styled-components";
+import { FormFieldLabel } from "@synerise/ds-form-field";
+import { macro } from "@synerise/ds-typography";
+const SwitchWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Switchstyles__SwitchWrapper",
   componentId: "sc-1gmh4sk-0"
-})(["display:flex;gap:3px 0;flex-direction:column;justify-content:space-between;", ";"], function (props) {
-  return props.formElementMargin ? 'margin: 0 0 16px 0' : '';
-});
-export var Texts = styled.div.withConfig({
+})(["display:flex;gap:3px 0;flex-direction:column;justify-content:space-between;", ";"], (props) => props.formElementMargin ? "margin: 0 0 16px 0" : "");
+const Texts = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Switchstyles__Texts",
   componentId: "sc-1gmh4sk-1"
 })(["margin-left:16px;display:flex;flex-direction:row;justify-content:space-between;"]);
-export var Label = styled(FormFieldLabel).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);
-export var BelowLabel = styled.div.withConfig({
+const BelowLabel = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Switchstyles__BelowLabel",
   componentId: "sc-1gmh4sk-3"
 })([""]);
-export var LabelSwitchWrapper = 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;"]);
-export var Error = styled.div.withConfig({
+const Error = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Switchstyles__Error",
   componentId: "sc-1gmh4sk-5"
-})(["color:", ";margin-bottom:4px;"], function (props) {
-  return props.theme.palette['red-600'];
-});
-export var Description = styled.div.withConfig({
+})(["color:", ";margin-bottom:4px;"], (props) => props.theme.palette["red-600"]);
+const Description = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Switchstyles__Description",
   componentId: "sc-1gmh4sk-6"
-})(["color:", ";transition:0.3s ease;"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var DescriptionWrapper = styled.div.withConfig({
+})(["color:", ";transition:0.3s ease;"], (props) => props.theme.palette["grey-600"]);
+const DescriptionWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Switchstyles__DescriptionWrapper",
   componentId: "sc-1gmh4sk-7"
-})(["justify-content:space-between;padding-left:28px;"]);
+})(["justify-content:space-between;padding-left:28px;"]);
+export {
+  BelowLabel,
+  Description,
+  DescriptionWrapper,
+  Error,
+  Label,
+  LabelSwitchWrapper,
+  SwitchWrapper,
+  Texts
+};

package/dist/Switch.types.d.ts

@@ -1,6 +1,6 @@
-import { type SwitchProps as AntdSwitchProps } from 'antd/lib/switch';
-import { type ReactNode } from 'react';
-import { type TooltipProps as DsTooltipProps } from '@synerise/ds-tooltip';
+import { SwitchProps as AntdSwitchProps } from 'antd/lib/switch';
+import { ReactNode } from 'react';
+import { TooltipProps as DsTooltipProps } from '@synerise/ds-tooltip';
 type TooltipProps = {
     tooltipIcon?: ReactNode;
     tooltip?: ReactNode;

package/dist/Switch.types.js

@@ -1 +1 @@
-export {};
+

package/dist/index.js

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

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-switch",
-  "version": "1.2.18",
+  "version": "1.2.20",
   "description": "Switch UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,12 +35,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-form-field": "^1.3.8",
-    "@synerise/ds-typography": "^1.1.11",
+    "@synerise/ds-form-field": "^1.3.10",
+    "@synerise/ds-typography": "^1.1.13",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
-    "@synerise/ds-tooltip": "^1.4.8"
+    "@synerise/ds-tooltip": "^1.4.10"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -48,5 +48,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }