@simplybusiness/mobius 5.19.1 → 5.20.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 5.20.0
+
+### Minor Changes
+
+- 80c483e: Add Switch atom
+
 ## 5.19.1
 
 ### Patch Changes

package/dist/cjs/components/Switch/Switch.js

@@ -0,0 +1,62 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Switch", {
+    enumerable: true,
+    get: function() {
+        return Switch;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+const _VisuallyHidden = require("../VisuallyHidden");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const Switch = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { checked = false, className, onChange, ...otherProps } = props;
+    const [enabled, setEnabled] = (0, _react.useState)(checked);
+    (0, _react.useEffect)(()=>{
+        setEnabled(checked);
+    }, [
+        checked
+    ]);
+    const classes = (0, _dedupe.default)("mobius", "mobius-switch", {
+        "mobius-switch--checked": enabled
+    }, className);
+    const handleChange = (event)=>{
+        setEnabled(!enabled);
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
+        ref: ref,
+        className: classes,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    children: enabled ? "On" : "Off"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                type: "checkbox",
+                role: "switch",
+                checked: enabled,
+                onChange: handleChange,
+                ...otherProps
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "mobius-switch__slider"
+            })
+        ]
+    });
+});
+Switch.displayName = "Switch";
+
+//# sourceMappingURL=Switch.js.map

package/dist/cjs/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEvent,\n  type Ref,\n  type RefAttributes,\n  forwardRef,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nexport type SwitchElementType = HTMLLabelElement;\n\nexport interface SwitchProps\n  extends DOMProps,\n    RefAttributes<SwitchElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  checked?: boolean;\n  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport type SwitchRef = Ref<SwitchElementType>;\n\nconst Switch = forwardRef<HTMLLabelElement, SwitchProps>((props, ref) => {\n  const { checked = false, className, onChange, ...otherProps } = props;\n  const [enabled, setEnabled] = useState<boolean>(checked);\n\n  useEffect(() => {\n    setEnabled(checked);\n  }, [checked]);\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-switch\",\n    {\n      \"mobius-switch--checked\": enabled,\n    },\n    className,\n  );\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setEnabled(!enabled);\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  return (\n    <label ref={ref} className={classes}>\n      <VisuallyHidden>\n        <span>{enabled ? \"On\" : \"Off\"}</span>\n      </VisuallyHidden>\n      <input\n        type=\"checkbox\"\n        role=\"switch\"\n        checked={enabled}\n        onChange={handleChange}\n        {...otherProps}\n      />\n      <span className=\"mobius-switch__slider\"></span>\n    </label>\n  );\n});\n\nSwitch.displayName = \"Switch\";\nexport { Switch };\n"],"names":["Switch","forwardRef","props","ref","checked","className","onChange","otherProps","enabled","setEnabled","useState","useEffect","classes","classNames","handleChange","event","label","VisuallyHidden","span","input","type","role","displayName"],"mappings":"AAAA;;;;;+BAqESA;;;eAAAA;;;;uBA5DF;+DACgB;gCAEQ;;;;;;AAe/B,MAAMA,uBAASC,IAAAA,iBAAU,EAAgC,CAACC,OAAOC;IAC/D,MAAM,EAAEC,UAAU,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,YAAY,GAAGL;IAChE,MAAM,CAACM,SAASC,WAAW,GAAGC,IAAAA,eAAQ,EAAUN;IAEhDO,IAAAA,gBAAS,EAAC;QACRF,WAAWL;IACb,GAAG;QAACA;KAAQ;IAEZ,MAAMQ,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA;QACE,0BAA0BL;IAC5B,GACAH;IAGF,MAAMS,eAAe,CAACC;QACpBN,WAAW,CAACD;QACZ,IAAIF,UAAU;YACZA,SAASS;QACX;IACF;IAEA,qBACE,sBAACC;QAAMb,KAAKA;QAAKE,WAAWO;;0BAC1B,qBAACK,8BAAc;0BACb,cAAA,qBAACC;8BAAMV,UAAU,OAAO;;;0BAE1B,qBAACW;gBACCC,MAAK;gBACLC,MAAK;gBACLjB,SAASI;gBACTF,UAAUQ;gBACT,GAAGP,UAAU;;0BAEhB,qBAACW;gBAAKb,WAAU;;;;AAGtB;AAEAL,OAAOsB,WAAW,GAAG"}

package/dist/cjs/components/Switch/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./Switch"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}
+
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Switch/index.tsx"],"sourcesContent":["export * from \"./Switch\";\n"],"names":[],"mappings":";;;;qBAAc"}

package/dist/cjs/components/index.js

@@ -38,6 +38,7 @@ _export_star(require("./Select"), exports);
 _export_star(require("./Slider"), exports);
 _export_star(require("./Stack"), exports);
 _export_star(require("./SVG"), exports);
+_export_star(require("./Switch"), exports);
 _export_star(require("./Table"), exports);
 _export_star(require("./Text"), exports);
 _export_star(require("./TextArea"), exports);

package/dist/cjs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.tsx"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./AddressLookup\";\nexport * from \"./Alert\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Checkbox\";\nexport * from \"./Combobox\";\nexport * from \"./Container\";\nexport * from \"./Divider\";\nexport * from \"./Drawer\";\nexport * from \"./DropdownMenu\";\nexport * from \"./ErrorMessage\";\nexport * from \"./Fieldset\";\nexport * from \"./Flex\";\nexport * from \"./Grid\";\nexport * from \"./Icon\";\nexport * from \"./Image\";\nexport * from \"./Label\";\nexport * from \"./Link\";\nexport * from \"./LinkButton\";\nexport * from \"./List\";\nexport * from \"./LoadingIndicator\";\nexport * from \"./Logo\";\nexport * from \"./Modal\";\nexport * from \"./NumberField\";\nexport * from \"./Option\";\nexport * from \"./PasswordField\";\nexport * from \"./Popover\";\nexport * from \"./Progress\";\nexport * from \"./Radio\";\nexport * from \"./Segment\";\nexport * from \"./Select\";\nexport * from \"./Slider\";\nexport * from \"./Stack\";\nexport * from \"./SVG\";\nexport * from \"./Table\";\nexport * from \"./Text\";\nexport * from \"./TextArea\";\nexport * from \"./TextAreaInput\";\nexport * from \"./TextField\";\nexport * from \"./Title\";\nexport * from \"./Trust\";\nexport * from \"./VisuallyHidden\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}
+{"version":3,"sources":["../../../src/components/index.tsx"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./AddressLookup\";\nexport * from \"./Alert\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Checkbox\";\nexport * from \"./Combobox\";\nexport * from \"./Container\";\nexport * from \"./Divider\";\nexport * from \"./Drawer\";\nexport * from \"./DropdownMenu\";\nexport * from \"./ErrorMessage\";\nexport * from \"./Fieldset\";\nexport * from \"./Flex\";\nexport * from \"./Grid\";\nexport * from \"./Icon\";\nexport * from \"./Image\";\nexport * from \"./Label\";\nexport * from \"./Link\";\nexport * from \"./LinkButton\";\nexport * from \"./List\";\nexport * from \"./LoadingIndicator\";\nexport * from \"./Logo\";\nexport * from \"./Modal\";\nexport * from \"./NumberField\";\nexport * from \"./Option\";\nexport * from \"./PasswordField\";\nexport * from \"./Popover\";\nexport * from \"./Progress\";\nexport * from \"./Radio\";\nexport * from \"./Segment\";\nexport * from \"./Select\";\nexport * from \"./Slider\";\nexport * from \"./Stack\";\nexport * from \"./SVG\";\nexport * from \"./Switch\";\nexport * from \"./Table\";\nexport * from \"./Text\";\nexport * from \"./TextArea\";\nexport * from \"./TextAreaInput\";\nexport * from \"./TextField\";\nexport * from \"./Title\";\nexport * from \"./Trust\";\nexport * from \"./VisuallyHidden\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}