@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

package/dist/esm/elements/Toasts/Toasts.story.js

@@ -0,0 +1,115 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from "react";
+import { Flex } from "../Flex";
+import { Button } from "../Button";
+import { Text } from "../Text";
+import { TOAST_VARIANTS } from "./Toast";
+import { Toasts } from "./Toasts";
+import { ToastsProvider, useToasts } from "./useToasts";
+import { Separator } from "../Separator";
+import { Clickable } from "../Clickable";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Toasts,
+  title: "Components/Toasts",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A toast container component that manages multiple toast notifications with ToastsProvider."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Demo = {
+  render: function render() {
+    var _useToasts = useToasts(),
+      sendToast = _useToasts.sendToast,
+      retractToast = _useToasts.retractToast;
+    var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeToasts = _useState2[0],
+      setActiveToasts = _useState2[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
+      mb: 1
+    }, Object.keys(TOAST_VARIANTS).map(function (variant) {
+      var captialized = variant.charAt(0).toUpperCase() + variant.slice(1);
+      return /*#__PURE__*/React.createElement(Button, {
+        key: variant,
+        variant: "secondaryBlack",
+        size: "small",
+        mr: 1,
+        onClick: function onClick() {
+          var _sendToast = sendToast({
+              variant: variant,
+              message: "".concat(captialized, " Title"),
+              description: "This is example text.",
+              onClose: function onClose(closedID) {
+                setActiveToasts(function (activeToasts) {
+                  return activeToasts.filter(function (id) {
+                    return id !== closedID;
+                  });
+                });
+              }
+            }),
+            id = _sendToast.id;
+          setActiveToasts(function (activeToasts) {
+            return [].concat(_toConsumableArray(activeToasts), [id]);
+          });
+        }
+      }, captialized);
+    }), /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      variant: "primaryGray",
+      onClick: function onClick() {
+        var _sendToast2 = sendToast({
+            variant: "message",
+            message: "Until manually dismissed",
+            description: "This toast will hang around until it's manually dismissed.",
+            ttl: Infinity,
+            onClose: function onClose(closedID) {
+              setActiveToasts(function (activeToasts) {
+                return activeToasts.filter(function (id) {
+                  return id !== closedID;
+                });
+              });
+            }
+          }),
+          id = _sendToast2.id;
+        setActiveToasts(function (activeToasts) {
+          return [].concat(_toConsumableArray(activeToasts), [id]);
+        });
+      }
+    }, "Until manually dismissed")), /*#__PURE__*/React.createElement(Toasts, {
+      limit: 7
+    }), activeToasts.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, {
+      my: 1
+    }), /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, /*#__PURE__*/React.createElement("u", null, "Active toasts:"), activeToasts.map(function (id) {
+      return /*#__PURE__*/React.createElement(Clickable, {
+        key: id,
+        display: "block",
+        onClick: function onClick() {
+          return retractToast(id);
+        }
+      }, "Remove ", id);
+    }))));
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(ToastsProvider, null, /*#__PURE__*/React.createElement(Story, null));
+  }]
+};
+//# sourceMappingURL=Toasts.story.js.map

package/dist/esm/elements/Toasts/Toasts.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toasts.story.js","names":["React","useState","Flex","Button","Text","TOAST_VARIANTS","Toasts","ToastsProvider","useToasts","Separator","Clickable","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Demo","render","_useToasts","sendToast","retractToast","_useState","_useState2","_slicedToArray","activeToasts","setActiveToasts","createElement","Fragment","mb","Object","keys","map","variant","captialized","charAt","toUpperCase","slice","key","size","mr","onClick","_sendToast","message","concat","onClose","closedID","filter","id","_toConsumableArray","_sendToast2","ttl","Infinity","limit","length","my","display","decorators","Story"],"sources":["../../../../src/elements/Toasts/Toasts.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Flex } from \"../Flex\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { ToastVariant, TOAST_VARIANTS } from \"./Toast\"\nimport { Toasts } from \"./Toasts\"\nimport { ToastsProvider, useToasts } from \"./useToasts\"\nimport { Separator } from \"../Separator\"\nimport { Clickable } from \"../Clickable\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Toasts,\n  title: \"Components/Toasts\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A toast container component that manages multiple toast notifications with ToastsProvider.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Demo = {\n  render: () => {\n    const { sendToast, retractToast } = useToasts()\n\n    const [activeToasts, setActiveToasts] = useState<string[]>([])\n\n    return (\n      <>\n        <Flex mb={1}>\n          {(Object.keys(TOAST_VARIANTS) as ToastVariant[]).map((variant) => {\n            const captialized =\n              variant.charAt(0).toUpperCase() + variant.slice(1)\n\n            return (\n              <Button\n                key={variant}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                mr={1}\n                onClick={() => {\n                  const { id } = sendToast({\n                    variant,\n                    message: `${captialized} Title`,\n                    description: \"This is example text.\",\n                    onClose: (closedID) => {\n                      setActiveToasts((activeToasts) => {\n                        return activeToasts.filter((id) => id !== closedID)\n                      })\n                    },\n                  })\n\n                  setActiveToasts((activeToasts) => [...activeToasts, id])\n                }}\n              >\n                {captialized}\n              </Button>\n            )\n          })}\n\n          <Button\n            size=\"small\"\n            variant=\"primaryGray\"\n            onClick={() => {\n              const { id } = sendToast({\n                variant: \"message\",\n                message: \"Until manually dismissed\",\n                description:\n                  \"This toast will hang around until it's manually dismissed.\",\n                ttl: Infinity,\n                onClose: (closedID) => {\n                  setActiveToasts((activeToasts) => {\n                    return activeToasts.filter((id) => id !== closedID)\n                  })\n                },\n              })\n\n              setActiveToasts((activeToasts) => [...activeToasts, id])\n            }}\n          >\n            Until manually dismissed\n          </Button>\n        </Flex>\n\n        <Toasts limit={7} />\n\n        {activeToasts.length > 0 && (\n          <>\n            <Separator my={1} />\n\n            <Text variant=\"xs\">\n              <u>Active toasts:</u>\n\n              {activeToasts.map((id) => {\n                return (\n                  <Clickable\n                    key={id}\n                    display=\"block\"\n                    onClick={() => retractToast(id)}\n                  >\n                    Remove {id}\n                  </Clickable>\n                )\n              })}\n            </Text>\n          </>\n        )}\n      </>\n    )\n  },\n  decorators: [\n    (Story) => (\n      <ToastsProvider>\n        <Story />\n      </ToastsProvider>\n    ),\n  ],\n}\n"],"mappings":"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"}

package/dist/esm/elements/Toasts/index.js

@@ -0,0 +1,4 @@
+export * from "./Toast";
+export * from "./Toasts";
+export * from "./useToasts";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Toasts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Toasts/index.ts"],"sourcesContent":["export * from \"./Toast\"\nexport * from \"./Toasts\"\nexport * from \"./useToasts\"\n"],"mappings":"AAAA;AACA;AACA"}

package/dist/esm/elements/Toasts/useToasts.js

@@ -0,0 +1,132 @@
+var _excluded = ["ttl", "onClose"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { createContext, useContext, useReducer, useCallback, useRef, useEffect } from "react";
+var reducer = function reducer(state, action) {
+  switch (action.type) {
+    case "SEND":
+      return _objectSpread(_objectSpread({}, state), {}, {
+        toasts: [].concat(_toConsumableArray(state.toasts), [action.payload])
+      });
+    case "RETRACT":
+      return _objectSpread(_objectSpread({}, state), {}, {
+        toasts: state.toasts.filter(function (_ref) {
+          var id = _ref.id;
+          return id !== action.payload.id;
+        })
+      });
+  }
+};
+export var ToastsContext = /*#__PURE__*/createContext({
+  state: {
+    toasts: []
+  },
+  sendToast: function sendToast() {
+    return {
+      id: "",
+      handleClose: function handleClose() {
+        // NOOP
+      }
+    };
+  },
+  retractToast: function retractToast() {
+    // NOOP
+  }
+});
+export var ToastsProvider = function ToastsProvider(_ref2) {
+  var children = _ref2.children;
+  var _useReducer = useReducer(reducer, {
+      toasts: []
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var activeToasts = useRef(new Map());
+  var retractToast = useCallback(function (id) {
+    var _toast$onClose;
+    var toast = activeToasts.current.get(id);
+    if (!toast) return;
+    clearTimeout(toast.timeout);
+    activeToasts.current.delete(id);
+    dispatch({
+      type: "RETRACT",
+      payload: {
+        id: id
+      }
+    });
+    (_toast$onClose = toast.onClose) === null || _toast$onClose === void 0 ? void 0 : _toast$onClose.call(toast, id);
+  }, []);
+  var sendToast = useCallback(function (_ref3) {
+    var _ref3$ttl = _ref3.ttl,
+      ttl = _ref3$ttl === void 0 ? 6000 : _ref3$ttl,
+      onClose = _ref3.onClose,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+    var id = generateId();
+    var handleClose = function handleClose() {
+      retractToast(id);
+    };
+    dispatch({
+      type: "SEND",
+      payload: _objectSpread(_objectSpread({}, rest), {}, {
+        id: id,
+        ttl: ttl,
+        onClose: handleClose
+      })
+    });
+    activeToasts.current.set(id, {
+      timeout: ttl !== Infinity ? window.setTimeout(handleClose, ttl) : -1,
+      onClose: onClose
+    });
+    return {
+      id: id,
+      handleClose: handleClose
+    };
+  }, [retractToast]);
+  useEffect(function () {
+    var toasts = activeToasts.current;
+    return function () {
+      toasts.forEach(function (toast) {
+        return clearTimeout(toast.timeout);
+      });
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(ToastsContext.Provider, {
+    value: {
+      state: state,
+      sendToast: sendToast,
+      retractToast: retractToast
+    }
+  }, children);
+};
+ToastsProvider.displayName = "ToastsProvider";
+export var useToasts = function useToasts() {
+  var _useContext = useContext(ToastsContext),
+    toasts = _useContext.state.toasts,
+    sendToast = _useContext.sendToast,
+    retractToast = _useContext.retractToast;
+  return {
+    toasts: toasts,
+    sendToast: sendToast,
+    retractToast: retractToast
+  };
+};
+var generateId = function generateId() {
+  return Math.random().toString(26).slice(2);
+};
+//# sourceMappingURL=useToasts.js.map

package/dist/esm/elements/Toasts/useToasts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToasts.js","names":["React","createContext","useContext","useReducer","useCallback","useRef","useEffect","reducer","state","action","type","_objectSpread","toasts","concat","_toConsumableArray","payload","filter","_ref","id","ToastsContext","sendToast","handleClose","retractToast","ToastsProvider","_ref2","children","_useReducer","_useReducer2","_slicedToArray","dispatch","activeToasts","Map","_toast$onClose","toast","current","get","clearTimeout","timeout","delete","onClose","call","_ref3","_ref3$ttl","ttl","rest","_objectWithoutProperties","_excluded","generateId","set","Infinity","window","setTimeout","forEach","createElement","Provider","value","displayName","useToasts","_useContext","Math","random","toString","slice"],"sources":["../../../../src/elements/Toasts/useToasts.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useReducer,\n  useCallback,\n  useRef,\n  useEffect,\n} from \"react\"\nimport { ToastProps } from \"./Toast\"\n\ninterface Toast extends ToastProps {\n  id: string\n  ttl: number\n  onClose(id: string): void\n}\n\ntype Payload = Omit<Toast, \"id\" | \"ttl\" | \"onClose\"> & {\n  ttl?: number\n  onClose?(id: string): void\n}\n\ntype State = { toasts: Toast[] }\n\ntype Action =\n  | { type: \"SEND\"; payload: Toast }\n  | { type: \"RETRACT\"; payload: { id: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"SEND\":\n      return { ...state, toasts: [...state.toasts, action.payload] }\n\n    case \"RETRACT\":\n      return {\n        ...state,\n        toasts: state.toasts.filter(({ id }) => {\n          return id !== action.payload.id\n        }),\n      }\n  }\n}\n\nexport const ToastsContext = createContext<{\n  state: State\n  sendToast(toast: Payload): { id: string; handleClose: () => void }\n  retractToast(id: string): void\n}>({\n  state: { toasts: [] },\n  sendToast: () => {\n    return {\n      id: \"\",\n      handleClose: () => {\n        // NOOP\n      },\n    }\n  },\n  retractToast: () => {\n    // NOOP\n  },\n})\n\nexport const ToastsProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {\n  const [state, dispatch] = useReducer(reducer, { toasts: [] })\n\n  const activeToasts = useRef<\n    Map<\n      string,\n      {\n        timeout: number\n        onClose?: (id: string) => void\n      }\n    >\n  >(new Map())\n\n  const retractToast = useCallback((id: string) => {\n    const toast = activeToasts.current.get(id)\n\n    if (!toast) return\n\n    clearTimeout(toast.timeout)\n\n    activeToasts.current.delete(id)\n\n    dispatch({ type: \"RETRACT\", payload: { id } })\n\n    toast.onClose?.(id)\n  }, [])\n\n  const sendToast = useCallback(\n    ({ ttl = 6000, onClose, ...rest }: Payload) => {\n      const id = generateId()\n\n      const handleClose = () => {\n        retractToast(id)\n      }\n\n      dispatch({\n        type: \"SEND\",\n        payload: { ...rest, id, ttl, onClose: handleClose },\n      })\n\n      activeToasts.current.set(id, {\n        timeout: ttl !== Infinity ? window.setTimeout(handleClose, ttl) : -1,\n        onClose,\n      })\n\n      return { id, handleClose }\n    },\n    [retractToast]\n  )\n\n  useEffect(() => {\n    const toasts = activeToasts.current\n\n    return () => {\n      toasts.forEach((toast) => clearTimeout(toast.timeout))\n    }\n  }, [])\n\n  return (\n    <ToastsContext.Provider value={{ state, sendToast, retractToast }}>\n      {children}\n    </ToastsContext.Provider>\n  )\n}\n\nexport const useToasts = () => {\n  const {\n    state: { toasts },\n    sendToast,\n    retractToast,\n  } = useContext(ToastsContext)\n\n  return { toasts, sendToast, retractToast }\n}\n\nconst generateId = () => Math.random().toString(26).slice(2)\n"],"mappings":"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"}

package/dist/esm/elements/Toggle/Toggle.js

@@ -0,0 +1,62 @@
+var _excluded = ["selected", "disabled", "hover", "onSelect", "onClick"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from "react";
+import styled, { css } from "styled-components";
+import { Box } from "../Box";
+import { SWITCH_STATES, TOGGLE_STATES } from "./tokens";
+import { themeGet } from "@styled-system/theme-get";
+/** A toggle */
+export var Toggle = function Toggle(_ref) {
+  var _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    disabled = _ref.disabled,
+    hover = _ref.hover,
+    onSelect = _ref.onSelect,
+    onClick = _ref.onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var isSelectable = !disabled && onSelect !== undefined;
+  var handleClick = function handleClick(event) {
+    if (isSelectable && onSelect) {
+      onSelect(!selected);
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  var handleKeyPress = function handleKeyPress(event) {
+    if (event.key === " " && isSelectable && onSelect) {
+      event.preventDefault();
+      onSelect(!selected);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    display: "flex",
+    alignItems: "center",
+    onClick: handleClick,
+    tabIndex: disabled ? -1 : 0,
+    onKeyPress: handleKeyPress,
+    role: "toggle",
+    "aria-checked": selected,
+    selected: selected,
+    disabled: disabled,
+    hover: hover
+  }, rest), /*#__PURE__*/React.createElement(Switch, {
+    selected: selected
+  }));
+};
+Toggle.displayName = "Toggle";
+var Switch = styled(Box).withConfig({
+  displayName: "Toggle__Switch",
+  componentId: "sc-1yxwor4-0"
+})(["width:26px;height:26px;margin:3px;border-radius:50%;transition:transform 0.3s;box-shadow:", ";", ""], themeGet("effects.dropShadow"), function (props) {
+  return css(["", ""], props.selected ? SWITCH_STATES.selected : SWITCH_STATES.default);
+});
+var Container = styled(Box).withConfig({
+  displayName: "Toggle__Container",
+  componentId: "sc-1yxwor4-1"
+})(["user-select:none;border-radius:100px;width:51px;height:31px;flex-shrink:0;", ""], function (props) {
+  return css(["", " ", " ", " &:hover{", "}"], props.selected ? TOGGLE_STATES.selected : TOGGLE_STATES.default, props.hover && TOGGLE_STATES.hover, props.disabled && (props.selected ? TOGGLE_STATES.disabled.selected : TOGGLE_STATES.disabled.default), TOGGLE_STATES.hover);
+});
+//# sourceMappingURL=Toggle.js.map

package/dist/esm/elements/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":["React","styled","css","Box","SWITCH_STATES","TOGGLE_STATES","themeGet","Toggle","_ref","_ref$selected","selected","disabled","hover","onSelect","onClick","rest","_objectWithoutProperties","_excluded","isSelectable","undefined","handleClick","event","handleKeyPress","key","preventDefault","createElement","Container","_extends","display","alignItems","tabIndex","onKeyPress","role","Switch","displayName","withConfig","componentId","props","default"],"sources":["../../../../src/elements/Toggle/Toggle.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { SWITCH_STATES, TOGGLE_STATES } from \"./tokens\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ToggleProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable toggle interactions */\n  disabled?: boolean\n  /** Select the toggle on render */\n  selected?: boolean\n  /** Used to force the toggle into the visual hover state */\n  hover?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A toggle */\nexport const Toggle: React.FC<React.PropsWithChildren<ToggleProps>> = ({\n  selected = false,\n  disabled,\n  hover,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"toggle\"\n      aria-checked={selected}\n      selected={selected}\n      disabled={disabled}\n      hover={hover}\n      {...rest}\n    >\n      <Switch selected={selected} />\n    </Container>\n  )\n}\n\nconst Switch = styled(Box)<{ selected: boolean }>`\n  width: 26px;\n  height: 26px;\n  margin: 3px;\n  border-radius: 50%;\n  transition: transform 0.3s;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n\n  ${(props) => {\n    return css`\n      ${props.selected ? SWITCH_STATES.selected : SWITCH_STATES.default}\n    `\n  }}\n`\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  disabled?: boolean\n}>`\n  user-select: none;\n  border-radius: 100px;\n  width: 51px;\n  height: 31px;\n  flex-shrink: 0;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? TOGGLE_STATES.selected : TOGGLE_STATES.default}\n      ${props.hover && TOGGLE_STATES.hover}\n      ${props.disabled &&\n      (props.selected\n        ? TOGGLE_STATES.disabled.selected\n        : TOGGLE_STATES.disabled.default)}\n\n      &:hover {\n        ${TOGGLE_STATES.hover}\n      }\n    `\n  }}\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,GAAG;AACZ,SAASC,aAAa,EAAEC,aAAa;AACrC,SAASC,QAAQ,QAAQ,0BAA0B;AAenD;AACA,OAAO,IAAMC,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAO7D;EAAA,IAAAC,aAAA,GAAAD,IAAA,CANJE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAChBE,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,OAAO,GAAAN,IAAA,CAAPM,OAAO;IACJC,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAEP,IAAMC,YAAY,GAAG,CAACP,QAAQ,IAAIE,QAAQ,KAAKM,SAAS;EAExD,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAAmD,EAAK;IAC3E,IAAIH,YAAY,IAAIL,QAAQ,EAAE;MAC5BA,QAAQ,CAAC,CAACH,QAAQ,CAAC;IACrB;IAEA,IAAII,OAAO,EAAE;MACXA,OAAO,CAACO,KAAK,CAAC;IAChB;EACF,CAAC;EAED,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAID,KAA0C,EAAK;IACrE,IAAIA,KAAK,CAACE,GAAG,KAAK,GAAG,IAAIL,YAAY,IAAIL,QAAQ,EAAE;MACjDQ,KAAK,CAACG,cAAc,EAAE;MACtBX,QAAQ,CAAC,CAACH,QAAQ,CAAC;IACrB;EACF,CAAC;EAED,oBACEV,KAAA,CAAAyB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,OAAO,EAAC,MAAM;IACdC,UAAU,EAAC,QAAQ;IACnBf,OAAO,EAAEM,WAAY;IACrBU,QAAQ,EAAEnB,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;IAC5BoB,UAAU,EAAET,cAAe;IAC3BU,IAAI,EAAC,QAAQ;IACb,gBAActB,QAAS;IACvBA,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA;EAAM,GACTG,IAAI,gBAERf,KAAA,CAAAyB,aAAA,CAACQ,MAAM;IAACvB,QAAQ,EAAEA;EAAS,EAAG,CACpB;AAEhB,CAAC;AA5CYH,MAAsD,CAAA2B,WAAA;AA8CnE,IAAMD,MAAM,GAAGhC,MAAM,CAACE,GAAG,CAAC,CAAAgC,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,2GAMV9B,QAAQ,CAAC,oBAAoB,CAAC,EAE1C,UAAC+B,KAAK,EAAK;EACX,OAAOnC,GAAG,WACNmC,KAAK,CAAC3B,QAAQ,GAAGN,aAAa,CAACM,QAAQ,GAAGN,aAAa,CAACkC,OAAO;AAErE,CAAC,CACF;AAED,IAAMZ,SAAS,GAAGzB,MAAM,CAACE,GAAG,CAAC,CAAAgC,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,uFAWzB,UAACC,KAAK,EAAK;EACX,OAAOnC,GAAG,mCACNmC,KAAK,CAAC3B,QAAQ,GAAGL,aAAa,CAACK,QAAQ,GAAGL,aAAa,CAACiC,OAAO,EAC/DD,KAAK,CAACzB,KAAK,IAAIP,aAAa,CAACO,KAAK,EAClCyB,KAAK,CAAC1B,QAAQ,KACf0B,KAAK,CAAC3B,QAAQ,GACXL,aAAa,CAACM,QAAQ,CAACD,QAAQ,GAC/BL,aAAa,CAACM,QAAQ,CAAC2B,OAAO,CAAC,EAG/BjC,aAAa,CAACO,KAAK;AAG3B,CAAC,CACF"}

package/dist/esm/elements/Toggle/Toggle.story.js

@@ -0,0 +1,108 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React from "react";
+import { Toggle } from "./Toggle";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Toggle,
+  title: "Components/Toggle",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A toggle switch component for binary on/off states with hover and disabled states."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  render: function render(args) {
+    var _args$selected;
+    var _React$useState = React.useState((_args$selected = args.selected) !== null && _args$selected !== void 0 ? _args$selected : false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selected = _React$useState2[0],
+      setSelected = _React$useState2[1];
+    return /*#__PURE__*/React.createElement(Toggle, _extends({}, args, {
+      selected: selected,
+      onSelect: function onSelect() {
+        return setSelected(!selected);
+      }
+    }));
+  },
+  args: {
+    selected: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic toggle in off state."
+      }
+    }
+  }
+};
+export var Selected = {
+  render: function render(args) {
+    var _args$selected2;
+    var _React$useState3 = React.useState((_args$selected2 = args.selected) !== null && _args$selected2 !== void 0 ? _args$selected2 : true),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selected = _React$useState4[0],
+      setSelected = _React$useState4[1];
+    return /*#__PURE__*/React.createElement(Toggle, _extends({}, args, {
+      selected: selected,
+      onSelect: function onSelect() {
+        return setSelected(!selected);
+      }
+    }));
+  },
+  args: {
+    selected: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Toggle in selected/on state."
+      }
+    }
+  }
+};
+export var Disabled = {
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement(Toggle, args);
+  },
+  args: {
+    disabled: true,
+    selected: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled toggle that cannot be interacted with."
+      }
+    }
+  }
+};
+export var DisabledSelected = {
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement(Toggle, args);
+  },
+  args: {
+    disabled: true,
+    selected: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled toggle in selected state."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Toggle.story.js.map

package/dist/esm/elements/Toggle/Toggle.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.story.js","names":["React","Toggle","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","render","args","_args$selected","_React$useState","useState","selected","_React$useState2","_slicedToArray","setSelected","createElement","_extends","onSelect","story","Selected","_args$selected2","_React$useState3","_React$useState4","Disabled","disabled","DisabledSelected"],"sources":["../../../../src/elements/Toggle/Toggle.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Toggle } from \"./Toggle\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Toggle,\n  title: \"Components/Toggle\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A toggle switch component for binary on/off states with hover and disabled states.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  render: (args) => {\n    const [selected, setSelected] = React.useState(args.selected ?? false)\n    return (\n      <Toggle\n        {...args}\n        selected={selected}\n        onSelect={() => setSelected(!selected)}\n      />\n    )\n  },\n  args: {\n    selected: false,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic toggle in off state.\",\n      },\n    },\n  },\n}\n\nexport const Selected = {\n  render: (args) => {\n    const [selected, setSelected] = React.useState(args.selected ?? true)\n    return (\n      <Toggle\n        {...args}\n        selected={selected}\n        onSelect={() => setSelected(!selected)}\n      />\n    )\n  },\n  args: {\n    selected: true,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Toggle in selected/on state.\",\n      },\n    },\n  },\n}\n\nexport const Disabled = {\n  render: (args) => <Toggle {...args} />,\n  args: {\n    disabled: true,\n    selected: false,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Disabled toggle that cannot be interacted with.\",\n      },\n    },\n  },\n}\n\nexport const DisabledSelected = {\n  render: (args) => <Toggle {...args} />,\n  args: {\n    disabled: true,\n    selected: true,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Disabled toggle in selected state.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Toggle/index.js

@@ -0,0 +1,2 @@
+export * from "./Toggle";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Toggle/index.tsx"],"sourcesContent":["export * from \"./Toggle\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Toggle/tokens.js

@@ -0,0 +1,16 @@
+import { themeGet } from "@styled-system/theme-get";
+import { css } from "styled-components";
+export var SWITCH_STATES = {
+  selected: css(["background-color:white;transform:translateX(19px);"]),
+  default: css(["background-color:white;"])
+};
+export var TOGGLE_STATES = {
+  default: css(["background-color:", ";"], themeGet("colors.mono30")),
+  selected: css(["background-color:", ";"], themeGet("colors.blue100")),
+  hover: css(["cursor:pointer;"]),
+  disabled: {
+    default: css(["background-color:", ";pointer-events:none;"], themeGet("colors.mono10")),
+    selected: css(["background-color:", ";pointer-events:none;"], themeGet("colors.blue10"))
+  }
+};
+//# sourceMappingURL=tokens.js.map

package/dist/esm/elements/Toggle/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["themeGet","css","SWITCH_STATES","selected","default","TOGGLE_STATES","hover","disabled"],"sources":["../../../../src/elements/Toggle/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const SWITCH_STATES = {\n  selected: css`\n    background-color: white;\n    transform: translateX(19px);\n  `,\n  default: css`\n    background-color: white;\n  `,\n} as const\n\nexport const TOGGLE_STATES = {\n  default: css`\n    background-color: ${themeGet(\"colors.mono30\")};\n  `,\n  selected: css`\n    background-color: ${themeGet(\"colors.blue100\")};\n  `,\n  hover: css`\n    cursor: pointer;\n  `,\n  disabled: {\n    default: css`\n      background-color: ${themeGet(\"colors.mono10\")};\n      pointer-events: none;\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.blue10\")};\n      pointer-events: none;\n    `,\n  },\n} as const\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AAEvC,OAAO,IAAMC,aAAa,GAAG;EAC3BC,QAAQ,EAAEF,GAAG,wDAGZ;EACDG,OAAO,EAAEH,GAAG;AAGd,CAAU;AAEV,OAAO,IAAMI,aAAa,GAAG;EAC3BD,OAAO,EAAEH,GAAG,6BACUD,QAAQ,CAAC,eAAe,CAAC,CAC9C;EACDG,QAAQ,EAAEF,GAAG,6BACSD,QAAQ,CAAC,gBAAgB,CAAC,CAC/C;EACDM,KAAK,EAAEL,GAAG,qBAET;EACDM,QAAQ,EAAE;IACRH,OAAO,EAAEH,GAAG,iDACUD,QAAQ,CAAC,eAAe,CAAC,CAE9C;IACDG,QAAQ,EAAEF,GAAG,iDACSD,QAAQ,CAAC,eAAe,CAAC;EAGjD;AACF,CAAU"}