musae 0.3.2 → 0.3.5

package/dist/components/upload/uploadeds.cjs

@@ -1,72 +1,132 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var relax = require('@aiszlab/relax');
+var theme = require('../theme/theme.cjs');
+var utils = require('./utils.cjs');
+var path = require('@aiszlab/fuzzy/path');
 var loading = require('../icon/icons/mock/loading.cjs');
-var clear = require('../icon/icons/content/clear.cjs');
+var attchFile = require('../icon/icons/editor/attch-file.cjs');
+var _delete = require('../icon/icons/action/delete.cjs');
 
+var _excluded = ["key"];
+var styles = {
+  item: {
+    display: "musaex-78zum5",
+    alignItems: "musaex-6s0dn4",
+    gap: "musaex-1lsrmdg",
+    $$css: true
+  }
+};
 var Uploadeds = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var uploader = _ref.uploader,
-    onError = _ref.onError;
-  var _useState = React.useState(new Map()),
-    _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
-  var _counter = React.useRef(0);
-  var loaded = relax.useEvent(function (id, status) {
-    // update uploaded list status
-    setItems(function (_items) {
-      var current = _items.get(id);
-      if (!current) return _items;
-      return new Map(_items).set(id, _objectSpread(_objectSpread({}, current), {}, {
-        status: status
-      }));
-    });
+    onError = _ref.onError,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$limit = _ref.limit,
+    limit = _ref$limit === void 0 ? Infinity : _ref$limit;
+  var _useControlledState = relax.useControlledState(value, {
+      defaultState: []
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    values = _useControlledState2[0],
+    setValues = _useControlledState2[1];
+  var _useIdentity = relax.useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 2),
+    identity = _useIdentity2[1];
+  // convert to map, for performance
+  var items = React.useMemo(function () {
+    return values.reduce(function (prev, _item) {
+      var _isControlled = utils.isControlled(_item);
+      if (_isControlled) {
+        var _item$key;
+        var _id = (_item$key = _item.key) !== null && _item$key !== void 0 ? _item$key : _item.url;
+        prev.set(_id, {
+          key: _id,
+          status: "success",
+          url: _item.url
+        });
+        return prev;
+      }
+      prev.set(_item.key, _item);
+      return prev;
+    }, new Map());
+  }, [values]);
+  // when loading status changed
+  // use this func to set new status & callback
+  var onLoaded = relax.useEvent(function (id, status, _ref2) {
+    var url = _ref2.url,
+      error = _ref2.error;
+    if (!items.has(id)) return;
+    var _items = new Map(items);
+    var _values = Array.from(_items.set(id, _objectSpread(_objectSpread({}, _items.get(id)), {}, {
+      status: status,
+      url: url,
+      error: error
+    })).values());
+    setValues(_values);
+    // change handler
+    onChange === null || onChange === void 0 || onChange(_values);
   });
   React.useImperativeHandle(ref, function () {
     return {
       add: function () {
         var _add = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
-          var hasUploader, status, id, url;
+          var _hasUploader, _isOnlyOne, _isOverLimit, _key, _values, _url;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                hasUploader = !!uploader;
-                status = hasUploader ? "loading" : "success"; // push current file
-                id = _counter.current++;
-                setItems(function (items) {
-                  return new Map(items).set(id, {
-                    file: file,
-                    status: status
-                  });
-                });
-                // call request by user provided
-                if (hasUploader) {
-                  _context.next = 6;
+                _hasUploader = !!uploader;
+                _isOnlyOne = limit === 1;
+                _isOverLimit = items.size >= limit; // over `limit`
+                if (!(_isOverLimit && !_isOnlyOne)) {
+                  _context.next = 5;
                   break;
                 }
                 return _context.abrupt("return");
-              case 6:
-                _context.next = 8;
-                return uploader(file)["catch"](function (error) {
-                  loaded(id, "error");
-                  onError === null || onError === void 0 || onError(error);
-                  return null;
-                });
-              case 8:
-                url = _context.sent;
-                if (url) {
+              case 5:
+                // show loading in `add` trigger
+                _key = identity();
+                _values = Array.from(new Map(_isOnlyOne ? [] : items).set(_key, {
+                  key: _key,
+                  file: file,
+                  status: _hasUploader ? "loading" : "success"
+                }).values());
+                setValues(_values);
+                onChange === null || onChange === void 0 || onChange(_values);
+                // when no uploader, use original file
+                if (_hasUploader) {
                   _context.next = 11;
                   break;
                 }
                 return _context.abrupt("return");
               case 11:
-                loaded(id, "success");
-              case 12:
+                _context.next = 13;
+                return uploader(file)["catch"](function (error) {
+                  return new Error(error.message);
+                });
+              case 13:
+                _url = _context.sent;
+                if (!(_url instanceof Error)) {
+                  _context.next = 18;
+                  break;
+                }
+                onLoaded(_key, "error", {
+                  error: _url
+                });
+                onError === null || onError === void 0 || onError(_url);
+                return _context.abrupt("return");
+              case 18:
+                onLoaded(_key, "success", {
+                  url: _url
+                });
+              case 19:
               case "end":
                 return _context.stop();
             }
@@ -79,33 +139,37 @@ var Uploadeds = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }()
     };
   });
-  var remove = relax.useEvent(function (id) {
-    setItems(function (_items) {
-      var next = new Map(_items);
-      next["delete"](id);
-      return next;
-    });
+  var remove = relax.useEvent(function (key) {
+    var _items = new Map(items);
+    _items["delete"](key);
+    var _values = Array.from(_items.values());
+    setValues(_values);
+    onChange === null || onChange === void 0 || onChange(_values);
   });
   var styled = {
     uploadeds: {
-      className: "musaex-78zum5 musaex-dt5ytf musaex-4ttznp"
+      className: "musaex-78zum5 musaex-dt5ytf musaex-1lsrmdg"
     },
-    item: {
-      className: "musaex-78zum5 musaex-6s0dn4 musaex-1lsrmdg"
+    item: stylex.default.props(styles.item, theme.typography.body.small),
+    filename: {
+      className: "musaex-98rzlu musaex-b3r6kr musaex-lyipyv"
     }
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styled.uploadeds.className,
     style: styled.uploadeds.style
-  }, Array.from(items.entries()).map(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      key = _ref3[0],
-      item = _ref3[1];
+  }, Array.from(items.values()).map(function (_ref3) {
+    var _item$file$name, _item$file, _item$url;
+    var key = _ref3.key,
+      item = _objectWithoutProperties(_ref3, _excluded);
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       className: styled.item.className,
       style: styled.item.style
-    }, /*#__PURE__*/React.createElement(loading.default, null), item.file.name, /*#__PURE__*/React.createElement(clear.default, {
+    }, item.status === "loading" && /*#__PURE__*/React.createElement(loading.default, null), item.status !== "loading" && /*#__PURE__*/React.createElement(attchFile.default, null), /*#__PURE__*/React.createElement("span", {
+      className: styled.filename.className,
+      style: styled.filename.style
+    }, (_item$file$name = (_item$file = item.file) === null || _item$file === void 0 ? void 0 : _item$file.name) !== null && _item$file$name !== void 0 ? _item$file$name : path.leaf((_item$url = item.url) !== null && _item$url !== void 0 ? _item$url : "")), /*#__PURE__*/React.createElement(_delete.default, {
       onClick: function onClick() {
         return remove(key);
       }

package/dist/components/upload/uploadeds.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { UploadedsProps, UploadedsRef } from "./types";
+import type { UploadedsProps, UploadedsRef } from "musae/types/upload";
 declare const Uploadeds: React.ForwardRefExoticComponent<UploadedsProps & React.RefAttributes<UploadedsRef>>;
 export default Uploadeds;

package/dist/components/upload/uploadeds.mjs

@@ -1,70 +1,130 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { forwardRef, useState, useRef, useImperativeHandle } from 'react';
-import { useEvent } from '@aiszlab/relax';
+import React, { forwardRef, useMemo, useImperativeHandle } from 'react';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useControlledState, useIdentity, useEvent } from '@aiszlab/relax';
+import { typography } from '../theme/theme.mjs';
+import { isControlled } from './utils.mjs';
+import { leaf } from '@aiszlab/fuzzy/path';
 import Loading from '../icon/icons/mock/loading.mjs';
-import Redo from '../icon/icons/content/clear.mjs';
+import AttachFile from '../icon/icons/editor/attch-file.mjs';
+import Delete from '../icon/icons/action/delete.mjs';
 
+var _excluded = ["key"];
+var styles = {
+  item: {
+    display: "musaex-78zum5",
+    alignItems: "musaex-6s0dn4",
+    gap: "musaex-1lsrmdg",
+    $$css: true
+  }
+};
 var Uploadeds = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var uploader = _ref.uploader,
-    onError = _ref.onError;
-  var _useState = useState(new Map()),
-    _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
-  var _counter = useRef(0);
-  var loaded = useEvent(function (id, status) {
-    // update uploaded list status
-    setItems(function (_items) {
-      var current = _items.get(id);
-      if (!current) return _items;
-      return new Map(_items).set(id, _objectSpread(_objectSpread({}, current), {}, {
-        status: status
-      }));
-    });
+    onError = _ref.onError,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$limit = _ref.limit,
+    limit = _ref$limit === void 0 ? Infinity : _ref$limit;
+  var _useControlledState = useControlledState(value, {
+      defaultState: []
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    values = _useControlledState2[0],
+    setValues = _useControlledState2[1];
+  var _useIdentity = useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 2),
+    identity = _useIdentity2[1];
+  // convert to map, for performance
+  var items = useMemo(function () {
+    return values.reduce(function (prev, _item) {
+      var _isControlled = isControlled(_item);
+      if (_isControlled) {
+        var _item$key;
+        var _id = (_item$key = _item.key) !== null && _item$key !== void 0 ? _item$key : _item.url;
+        prev.set(_id, {
+          key: _id,
+          status: "success",
+          url: _item.url
+        });
+        return prev;
+      }
+      prev.set(_item.key, _item);
+      return prev;
+    }, new Map());
+  }, [values]);
+  // when loading status changed
+  // use this func to set new status & callback
+  var onLoaded = useEvent(function (id, status, _ref2) {
+    var url = _ref2.url,
+      error = _ref2.error;
+    if (!items.has(id)) return;
+    var _items = new Map(items);
+    var _values = Array.from(_items.set(id, _objectSpread(_objectSpread({}, _items.get(id)), {}, {
+      status: status,
+      url: url,
+      error: error
+    })).values());
+    setValues(_values);
+    // change handler
+    onChange === null || onChange === void 0 || onChange(_values);
   });
   useImperativeHandle(ref, function () {
     return {
       add: function () {
         var _add = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
-          var hasUploader, status, id, url;
+          var _hasUploader, _isOnlyOne, _isOverLimit, _key, _values, _url;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                hasUploader = !!uploader;
-                status = hasUploader ? "loading" : "success"; // push current file
-                id = _counter.current++;
-                setItems(function (items) {
-                  return new Map(items).set(id, {
-                    file: file,
-                    status: status
-                  });
-                });
-                // call request by user provided
-                if (hasUploader) {
-                  _context.next = 6;
+                _hasUploader = !!uploader;
+                _isOnlyOne = limit === 1;
+                _isOverLimit = items.size >= limit; // over `limit`
+                if (!(_isOverLimit && !_isOnlyOne)) {
+                  _context.next = 5;
                   break;
                 }
                 return _context.abrupt("return");
-              case 6:
-                _context.next = 8;
-                return uploader(file)["catch"](function (error) {
-                  loaded(id, "error");
-                  onError === null || onError === void 0 || onError(error);
-                  return null;
-                });
-              case 8:
-                url = _context.sent;
-                if (url) {
+              case 5:
+                // show loading in `add` trigger
+                _key = identity();
+                _values = Array.from(new Map(_isOnlyOne ? [] : items).set(_key, {
+                  key: _key,
+                  file: file,
+                  status: _hasUploader ? "loading" : "success"
+                }).values());
+                setValues(_values);
+                onChange === null || onChange === void 0 || onChange(_values);
+                // when no uploader, use original file
+                if (_hasUploader) {
                   _context.next = 11;
                   break;
                 }
                 return _context.abrupt("return");
               case 11:
-                loaded(id, "success");
-              case 12:
+                _context.next = 13;
+                return uploader(file)["catch"](function (error) {
+                  return new Error(error.message);
+                });
+              case 13:
+                _url = _context.sent;
+                if (!(_url instanceof Error)) {
+                  _context.next = 18;
+                  break;
+                }
+                onLoaded(_key, "error", {
+                  error: _url
+                });
+                onError === null || onError === void 0 || onError(_url);
+                return _context.abrupt("return");
+              case 18:
+                onLoaded(_key, "success", {
+                  url: _url
+                });
+              case 19:
               case "end":
                 return _context.stop();
             }
@@ -77,33 +137,37 @@ var Uploadeds = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }()
     };
   });
-  var remove = useEvent(function (id) {
-    setItems(function (_items) {
-      var next = new Map(_items);
-      next["delete"](id);
-      return next;
-    });
+  var remove = useEvent(function (key) {
+    var _items = new Map(items);
+    _items["delete"](key);
+    var _values = Array.from(_items.values());
+    setValues(_values);
+    onChange === null || onChange === void 0 || onChange(_values);
   });
   var styled = {
     uploadeds: {
-      className: "musaex-78zum5 musaex-dt5ytf musaex-4ttznp"
+      className: "musaex-78zum5 musaex-dt5ytf musaex-1lsrmdg"
     },
-    item: {
-      className: "musaex-78zum5 musaex-6s0dn4 musaex-1lsrmdg"
+    item: _stylex.props(styles.item, typography.body.small),
+    filename: {
+      className: "musaex-98rzlu musaex-b3r6kr musaex-lyipyv"
     }
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styled.uploadeds.className,
     style: styled.uploadeds.style
-  }, Array.from(items.entries()).map(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      key = _ref3[0],
-      item = _ref3[1];
+  }, Array.from(items.values()).map(function (_ref3) {
+    var _item$file$name, _item$file, _item$url;
+    var key = _ref3.key,
+      item = _objectWithoutProperties(_ref3, _excluded);
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       className: styled.item.className,
       style: styled.item.style
-    }, /*#__PURE__*/React.createElement(Loading, null), item.file.name, /*#__PURE__*/React.createElement(Redo, {
+    }, item.status === "loading" && /*#__PURE__*/React.createElement(Loading, null), item.status !== "loading" && /*#__PURE__*/React.createElement(AttachFile, null), /*#__PURE__*/React.createElement("span", {
+      className: styled.filename.className,
+      style: styled.filename.style
+    }, (_item$file$name = (_item$file = item.file) === null || _item$file === void 0 ? void 0 : _item$file.name) !== null && _item$file$name !== void 0 ? _item$file$name : leaf((_item$url = item.url) !== null && _item$url !== void 0 ? _item$url : "")), /*#__PURE__*/React.createElement(Delete, {
       onClick: function onClick() {
         return remove(key);
       }

package/dist/components/upload/utils.cjs

@@ -0,0 +1,9 @@
+/**
+ * @description
+ * check current value is provided by user
+ */
+var isControlled = function isControlled(value) {
+  return !value.key || !value.file;
+};
+
+exports.isControlled = isControlled;

package/dist/components/upload/utils.d.ts

@@ -0,0 +1,6 @@
+import type { Value, ControlledValue } from "musae/types/upload";
+/**
+ * @description
+ * check current value is provided by user
+ */
+export declare const isControlled: (value: Value) => value is ControlledValue;

package/dist/components/upload/utils.mjs

@@ -0,0 +1,9 @@
+/**
+ * @description
+ * check current value is provided by user
+ */
+var isControlled = function isControlled(value) {
+  return !value.key || !value.file;
+};
+
+export { isControlled };

package/dist/components/visually-hidden/visually-hidden.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { VisuallyHiddenProps } from "./types";
+import type { VisuallyHiddenProps } from "musae/types/visually-hidden";
 declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => React.JSX.Element;
 export default VisuallyHidden;

package/dist/components/waterfall/sequential.d.ts

@@ -1,4 +1,4 @@
-import type { WaterfallProps } from "./types";
+import type { WaterfallProps } from "musae/types/waterfall";
 import React from "react";
 import type { RequiredIn } from "@aiszlab/relax/types";
 declare const Sequential: ({ children, columns, className, style, rowGap, }: RequiredIn<Omit<WaterfallProps, "sequential" | "gutter">, "children" | "columns"> & {

package/dist/components/waterfall/waterfall.d.ts

@@ -1,4 +1,4 @@
-import type { WaterfallProps } from "./types";
+import type { WaterfallProps } from "musae/types/waterfall";
 import React from "react";
 declare const Waterfall: ({ columns, gutter, children, sequential, className, style, }: WaterfallProps) => React.JSX.Element | null;
 export default Waterfall;

package/dist/components/watermark/hooks.d.ts

@@ -1,4 +1,4 @@
-import { WatermarkProps } from "./types";
+import type { WatermarkProps } from "musae/types/watermark";
 /**
  * @description
  * watermarks

package/dist/components/watermark/watermark.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { WatermarkProps } from "./types";
+import type { WatermarkProps } from "musae/types/watermark";
 declare const Watermark: ({ children, mark: _mark, width, height, font: { color, fontSize, fontFamily, fontStyle, fontWeight, textAlign, }, }: WatermarkProps) => React.JSX.Element;
 export default Watermark;

package/dist/hooks/use-class-names.d.ts

@@ -256,8 +256,15 @@ export declare const useClassNames: <T extends ComponentToken = ComponentToken>(
         0: string;
         1: string;
     };
-    45: {};
+    45: {
+        0: string;
+    };
     46: {
         0: string;
     };
+    47: {
+        0: string;
+        1: string;
+    };
+    48: {};
 }[T];

package/dist/hooks/use-closable.cjs

@@ -1,4 +1,3 @@
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var relax = require('@aiszlab/relax');
 var React = require('react');
 var button = require('../components/button/button.cjs');
@@ -26,18 +25,11 @@ var useClosable = function useClosable(_ref) {
   // closer react element for dialog
   var closer = React.useMemo(function () {
     if (!triggers.has("close")) return null;
-    var styled = {
-      className: "musaex-167ikqz musaex-134unf5"
-    };
     return /*#__PURE__*/React.createElement(button.Button, {
       shape: "circular",
       variant: "text",
       prefix: /*#__PURE__*/React.createElement(close.default, null),
       onClick: onClose,
-      className: styled.className,
-      style: _objectSpread(_objectSpread({}, styled.style), {}, {
-        position: "absolute"
-      }),
       size: "small"
     });
   }, [triggers, onClose]);

package/dist/hooks/use-closable.mjs

@@ -1,4 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { isUndefined, useEvent } from '@aiszlab/relax';
 import React, { useMemo } from 'react';
 import { Button } from '../components/button/button.mjs';
@@ -26,18 +25,11 @@ var useClosable = function useClosable(_ref) {
   // closer react element for dialog
   var closer = useMemo(function () {
     if (!triggers.has("close")) return null;
-    var styled = {
-      className: "musaex-167ikqz musaex-134unf5"
-    };
     return /*#__PURE__*/React.createElement(Button, {
       shape: "circular",
       variant: "text",
       prefix: /*#__PURE__*/React.createElement(Close, null),
       onClick: onClose,
-      className: styled.className,
-      style: _objectSpread(_objectSpread({}, styled.style), {}, {
-        position: "absolute"
-      }),
       size: "small"
     });
   }, [triggers, onClose]);

package/dist/hooks/use-container.d.ts

@@ -1,4 +1,4 @@
-import type { PortalProps } from "../components/portal/types";
+import type { PortalProps } from "musae/types/portal";
 /**
  * @description
  * container

package/dist/hooks/use-lazy-boolean.cjs

@@ -5,7 +5,7 @@ var React = require('react');
 var useLazyBoolean = function useLazyBoolean() {
   var _useBoolean = relax.useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
-    isTrue = _useBoolean2[0],
+    isTruthy = _useBoolean2[0],
     _useBoolean2$ = _useBoolean2[1],
     _turnOn = _useBoolean2$.turnOn,
     _turnOff = _useBoolean2$.turnOff,
@@ -52,7 +52,7 @@ var useLazyBoolean = function useLazyBoolean() {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return [isTrue, {
+  return [isTruthy, {
     turnOn: turnOn,
     turnOff: turnOff,
     toggle: toggle,

package/dist/hooks/use-lazy-boolean.mjs

@@ -5,7 +5,7 @@ import { useCallback } from 'react';
 var useLazyBoolean = function useLazyBoolean() {
   var _useBoolean = useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
-    isTrue = _useBoolean2[0],
+    isTruthy = _useBoolean2[0],
     _useBoolean2$ = _useBoolean2[1],
     _turnOn = _useBoolean2$.turnOn,
     _turnOff = _useBoolean2$.turnOff,
@@ -52,7 +52,7 @@ var useLazyBoolean = function useLazyBoolean() {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return [isTrue, {
+  return [isTruthy, {
     turnOn: turnOn,
     turnOff: turnOff,
     toggle: toggle,