@assembly-js/design-system 2.4.0

package/dist/esm/components/Toast/Toaster.js

@@ -0,0 +1,45 @@
+// This file is generated by a script. Do not edit this file directly.
+'use client';
+
+var _excluded = ["id", "title", "description", "action", "actionHref"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import { Heading } from "../Typography";
+import { Body } from "../Typography/Body";
+import { Toast, ToastClose, ToastIcon, ToastProvider, ToastViewport } from "./Toast";
+import { useToast } from "./useToast";
+export function Toaster() {
+  var _useToast = useToast(),
+    toasts = _useToast.toasts;
+  return /*#__PURE__*/React.createElement(ToastProvider, null, toasts.map(function (_ref) {
+    var id = _ref.id,
+      title = _ref.title,
+      description = _ref.description,
+      action = _ref.action,
+      actionHref = _ref.actionHref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/React.createElement(Toast, _extends({
+      key: id
+    }, props), /*#__PURE__*/React.createElement("div", {
+      className: "cop-flex cop-w-full cop-items-center cop-gap-4"
+    }, props.variant && /*#__PURE__*/React.createElement(ToastIcon, {
+      className: "cop-h-7 cop-w-7",
+      variant: props.variant
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "cop-flex cop-w-full cop-flex-col cop-gap-2"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cop-flex cop-w-full cop-items-center cop-justify-between cop-text-primary"
+    }, title && /*#__PURE__*/React.createElement(Heading, {
+      size: "sm"
+    }, title), props.variant !== 'progress' && /*#__PURE__*/React.createElement(ToastClose, null)), typeof description === 'string' ? /*#__PURE__*/React.createElement("div", {
+      className: "cop-text-secondary"
+    }, /*#__PURE__*/React.createElement(Body, {
+      size: "sm"
+    }, description)) : description, /*#__PURE__*/React.createElement("a", {
+      className: "cop-text-sm cop-text-primary cop-no-underline hover:cop-cursor-pointer",
+      href: actionHref
+    }, action))));
+  }), /*#__PURE__*/React.createElement(ToastViewport, null));
+}

package/dist/esm/components/Toast/useToast.js

@@ -0,0 +1,170 @@
+// This file is generated by a script. Do not edit this file directly.
+'use client';
+
+// Inspired by react-hot-toast library
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import * as React from 'react';
+var TOAST_LIMIT = 3;
+var TOAST_REMOVE_DELAY = 3000;
+var actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST'
+};
+var count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+var toastTimeouts = new Map();
+var addToRemoveQueue = function addToRemoveQueue(toastId) {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+  var timeout = setTimeout(function () {
+    toastTimeouts["delete"](toastId);
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId
+    });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+};
+export var reducer = function reducer(state, action) {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        toasts: [action.toast].concat(_toConsumableArray(state.toasts)).slice(0, TOAST_LIMIT)
+      });
+    case 'UPDATE_TOAST':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        toasts: state.toasts.map(function (t) {
+          return t.id === action.toast.id ? _objectSpread(_objectSpread({}, t), action.toast) : t;
+        })
+      });
+    case 'DISMISS_TOAST':
+      {
+        var toastId = action.toastId;
+
+        // ! Side effects ! - This could be extracted into a dismissToast() action,
+        // but I'll keep it here for simplicity
+        if (toastId) {
+          addToRemoveQueue(toastId);
+        } else {
+          state.toasts.forEach(function (toast) {
+            addToRemoveQueue(toast.id);
+          });
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          toasts: state.toasts.map(function (t) {
+            return t.id === toastId || toastId === undefined ? _objectSpread(_objectSpread({}, t), {}, {
+              open: false
+            }) : t;
+          })
+        });
+      }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          toasts: []
+        });
+      }
+      return _objectSpread(_objectSpread({}, state), {}, {
+        toasts: state.toasts.filter(function (t) {
+          return t.id !== action.toastId;
+        })
+      });
+  }
+};
+var listeners = [];
+var memoryState = {
+  toasts: []
+};
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach(function (listener) {
+    listener(memoryState);
+  });
+}
+function toast(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  var id = genId();
+  var update = function update(props) {
+    return dispatch({
+      type: 'UPDATE_TOAST',
+      toast: _objectSpread(_objectSpread({}, props), {}, {
+        id: id
+      })
+    });
+  };
+  var dismiss = function dismiss() {
+    return dispatch({
+      type: 'DISMISS_TOAST',
+      toastId: id
+    });
+  };
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: _objectSpread(_objectSpread({}, props), {}, {
+      id: id,
+      open: true,
+      onOpenChange: function onOpenChange(open) {
+        if (!open) dismiss();
+      }
+    })
+  });
+  return {
+    id: id,
+    dismiss: dismiss,
+    update: update
+  };
+}
+function useToast() {
+  var _React$useState = React.useState(memoryState),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    state = _React$useState2[0],
+    setState = _React$useState2[1];
+  React.useEffect(function () {
+    listeners.push(setState);
+    return function () {
+      var index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+  return _objectSpread(_objectSpread({}, state), {}, {
+    toast: toast,
+    dismiss: function dismiss(toastId) {
+      return dispatch({
+        type: 'DISMISS_TOAST',
+        toastId: toastId
+      });
+    },
+    update: function update(toast) {
+      return dispatch({
+        type: 'UPDATE_TOAST',
+        toast: toast
+      });
+    }
+  });
+}
+export { useToast, toast };

package/dist/esm/components/Toggle/Toggle.js

@@ -0,0 +1,84 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["label", "description", "tooltipProps", "checked", "onChange", "disabled", "size"];
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import * as React from 'react';
+import { cn } from "../../common/utils";
+import { Base } from "../Typography/Base";
+import { Icon } from "../Icon";
+import { Tooltip } from "../Tooltip/Tooltip";
+export var ToggleSize = /*#__PURE__*/function (ToggleSize) {
+  ToggleSize["DEFAULT"] = "default";
+  ToggleSize["LARGE"] = "lg";
+  return ToggleSize;
+}({});
+var getSizeClassName = function getSizeClassName(size) {
+  switch (size) {
+    case ToggleSize.DEFAULT:
+      return {
+        root: 'cop-h-4 cop-w-8',
+        dot: 'cop-h-3 cop-w-3'
+      };
+    case ToggleSize.LARGE:
+    default:
+      return {
+        root: 'cop-h-5 cop-w-10',
+        dot: 'cop-h-4 cop-w-4'
+      };
+  }
+};
+export var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var label = props.label,
+    description = props.description,
+    tooltipProps = props.tooltipProps,
+    checked = props.checked,
+    onChange = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$size = props.size,
+    size = _props$size === void 0 ? ToggleSize.DEFAULT : _props$size,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "cop-flex cop-gap-2"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "cop-cursor-pointer"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: "cop-peer cop-sr-only cop-fixed",
+    ref: ref,
+    type: "checkbox",
+    checked: checked,
+    onChange: onChange,
+    disabled: disabled
+  }, rest)), /*#__PURE__*/React.createElement("div", {
+    className: cn('cop-group cop-relative cop-rounded-full cop-outline-none peer-focus-visible:cop-outline-2 peer-focus-visible:cop-outline-[#0071E3]', _defineProperty({}, 'cop-pointer-events-none', disabled))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('cop-block cop-rounded-full cop-bg-input-gray group-hover:cop-bg-gray-300 ', getSizeClassName(size).root, _defineProperty(_defineProperty({}, '!cop-bg-[#212B36] group-hover:!cop-bg-[#36424D]', checked), '!cop-opacity-25', disabled))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('cop-absolute cop-top-[2px] cop-rounded-full cop-bg-white cop-transition', getSizeClassName(size).dot, _defineProperty(_defineProperty(_defineProperty({}, 'cop-left-[2px]', !checked), 'cop-right-[2px]', checked), 'cop-bg-[#DFE1E4]', disabled))
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "cop-flex cop-gap-1"
+  }, /*#__PURE__*/React.createElement(Base, {
+    variant: "body",
+    size: "base",
+    leading: "tight",
+    tag: "span",
+    weight: "medium"
+  }, label), tooltipProps && /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement(Icon, {
+    icon: "Info",
+    className: "cop-h-3 cop-w-3 cop-text-primary"
+  }))), description && /*#__PURE__*/React.createElement("div", {
+    className: "cop-mt-0.5 cop-text-secondary"
+  }, /*#__PURE__*/React.createElement(Base, {
+    variant: "body",
+    size: "sm",
+    leading: "normal",
+    tag: "span",
+    weight: "regular"
+  }, description)))));
+});
+Toggle.displayName = 'Toggle';

package/dist/esm/components/Toolbar/SlashMenu.js

@@ -0,0 +1,141 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from "react";
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useToolbar } from "./ToolbarContext";
+import { cn } from "../../common/utils";
+import { Icon } from "../Icon";
+var containerStyles = cn('cop-flex cop-w-[256px] cop-flex-col cop-bg-white', 'cop-rounded cop-border cop-border-solid cop-border-secondary', 'cop-py-1 cop-shadow-popover-50');
+var menuItemStyles = cn('cop-flex  cop-cursor-pointer cop-items-center cop-gap-2', 'cop-border-none cop-bg-white', 'cop-px-2 cop-py-1.5 cop-outline-none', 'hover:!cop-bg-gray-100');
+var menuItemFocusedStyles = '!cop-bg-gray-100';
+var menuItemIconStyles = cn('cop-h-4 cop-w-4 cop-text-gray-700');
+var menuItemLabelStyles = cn('cop-text-base');
+
+// Filter config based on overrideActions
+function filterConfig(config, overrideActions) {
+  if (!overrideActions) {
+    return config;
+  }
+  var actionSet = new Set(overrideActions);
+  return config.map(function (item) {
+    if (item.type === 'group') {
+      var filteredActions = item.actions.filter(function (action) {
+        return actionSet.has(action.id);
+      });
+      if (filteredActions.length === 0) return null;
+      return _objectSpread(_objectSpread({}, item), {}, {
+        actions: filteredActions
+      });
+    }
+    return null;
+  }).filter(Boolean);
+}
+
+// Get all action items from filtered config
+function getAllActions(config) {
+  return config.flatMap(function (item) {
+    if (item.type === 'group') {
+      return item.actions.filter(function (action) {
+        return action.type === 'action';
+      });
+    }
+    return [];
+  });
+}
+export var SlashMenu = function SlashMenu(_ref) {
+  var className = _ref.className,
+    onClose = _ref.onClose,
+    overrideActions = _ref.overrideActions;
+  var _useToolbar = useToolbar(),
+    config = _useToolbar.config,
+    onAction = _useToolbar.onAction;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusedIndex = _useState2[0],
+    setFocusedIndex = _useState2[1];
+  var buttonRefs = useRef([]);
+  var filteredConfig = filterConfig(config, overrideActions);
+  var allActions = getAllActions(filteredConfig);
+  useEffect(function () {
+    var _buttonRefs$current$f;
+    (_buttonRefs$current$f = buttonRefs.current[focusedIndex]) === null || _buttonRefs$current$f === void 0 || _buttonRefs$current$f.focus();
+  }, [focusedIndex]);
+  var handleSelect = useCallback(function (action) {
+    onAction({
+      id: action.id,
+      action: action.action
+    });
+    onClose === null || onClose === void 0 || onClose();
+  }, [onAction, onClose]);
+  var handleKeyDown = useCallback(function (e) {
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setFocusedIndex(function (prev) {
+          return (prev + 1) % allActions.length;
+        });
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setFocusedIndex(function (prev) {
+          return (prev - 1 + allActions.length) % allActions.length;
+        });
+        break;
+      case 'Enter':
+      case ' ':
+        {
+          var action = allActions[focusedIndex];
+          if (action) {
+            e.preventDefault();
+            handleSelect(action);
+          }
+          break;
+        }
+      case 'Escape':
+        e.preventDefault();
+        onClose === null || onClose === void 0 || onClose();
+        break;
+    }
+  }, [allActions, focusedIndex, handleSelect, onClose]);
+  useEffect(function () {
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(containerStyles, className),
+    role: "menu",
+    "aria-label": "Text formatting options"
+  }, allActions.map(function (action, index) {
+    return /*#__PURE__*/React.createElement("button", {
+      key: action.id,
+      ref: function ref(el) {
+        buttonRefs.current[index] = el;
+      },
+      type: "button",
+      className: cn(menuItemStyles, index === focusedIndex && menuItemFocusedStyles),
+      role: "menuitem",
+      tabIndex: index === focusedIndex ? 0 : -1,
+      onClick: function onClick() {
+        return handleSelect(action);
+      }
+    }, action.icon && /*#__PURE__*/React.createElement(Icon, {
+      className: menuItemIconStyles,
+      icon: action.icon
+    }), /*#__PURE__*/React.createElement("span", {
+      className: menuItemLabelStyles
+    }, action.label));
+  }));
+};

package/dist/esm/components/Toolbar/Toolbar.js

@@ -0,0 +1,143 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from "react";
+import { cva } from 'cva';
+import { useToolbar } from "./ToolbarContext";
+import { cn } from "../../common/utils";
+import { Icon } from "../Icon";
+var toolbarVariants = cva({
+  base: cn('cop-inline-flex cop-items-center cop-gap-0.5 cop-p-1'),
+  variants: {
+    variant: {
+      highlight: 'cop-rounded-lg cop-border cop-border-solid cop-border-gray-200 cop-shadow-sm cop-bg-white',
+      sticky: 'cop-bg-gray-100'
+    }
+  },
+  defaultVariants: {
+    variant: 'highlight'
+  }
+});
+var buttonVariants = cva({
+  base: cn('cop-flex cop-items-center cop-justify-center', 'cop-h-6 cop-w-6 cop-rounded', 'cop-border-none cop-cursor-pointer', 'hover:cop-bg-gray-150 active:cop-bg-gray-200'),
+  variants: {
+    variant: {
+      highlight: 'cop-bg-white',
+      sticky: 'cop-bg-gray-100'
+    },
+    isActive: {
+      "true": '!cop-bg-gray-200',
+      "false": ''
+    }
+  },
+  defaultVariants: {
+    variant: 'highlight',
+    isActive: false
+  }
+});
+var iconStyles = cn('cop-flex cop-items-center cop-justify-center cop-h-4 cop-w-4 cop-text-gray-700');
+var groupStyles = cn('cop-flex cop-items-center cop-gap-0.5');
+
+// Filter config based on overrideActions
+function filterConfig(config, overrideActions) {
+  if (!overrideActions) {
+    return config;
+  }
+  var actionSet = new Set(overrideActions);
+  return config.map(function (item) {
+    if (item.type === 'group') {
+      var filteredActions = item.actions.filter(function (action) {
+        return actionSet.has(action.id);
+      });
+      if (filteredActions.length === 0) return null;
+      return _objectSpread(_objectSpread({}, item), {}, {
+        actions: filteredActions
+      });
+    }
+    return null;
+  }).filter(Boolean);
+}
+var ToolbarButton = function ToolbarButton(_ref) {
+  var action = _ref.action,
+    variant = _ref.variant;
+  var _useToolbar = useToolbar(),
+    onAction = _useToolbar.onAction,
+    getActionState = _useToolbar.getActionState;
+  var _getActionState = getActionState(action.id),
+    isActive = _getActionState.isActive,
+    isDisabled = _getActionState.isDisabled;
+  var handleClick = function handleClick() {
+    onAction({
+      id: action.id,
+      action: action.action
+    });
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: cn(buttonVariants({
+      variant: variant,
+      isActive: isActive
+    })),
+    onClick: handleClick,
+    disabled: isDisabled,
+    "aria-label": action.label,
+    "aria-pressed": isActive
+  }, action.icon && /*#__PURE__*/React.createElement(Icon, {
+    className: iconStyles,
+    icon: action.icon
+  }));
+};
+var ToolbarGroup = function ToolbarGroup(_ref2) {
+  var group = _ref2.group,
+    variant = _ref2.variant;
+  return /*#__PURE__*/React.createElement("div", {
+    className: groupStyles,
+    role: "group"
+  }, group.actions.map(function (action) {
+    if (action.type === 'action') {
+      return /*#__PURE__*/React.createElement(ToolbarButton, {
+        key: action.id,
+        action: action,
+        variant: variant
+      });
+    }
+    // For now, only simple actions are supported
+    return null;
+  }));
+};
+var ToolbarSeparator = function ToolbarSeparator() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cop-mx-1 cop-h-4 cop-w-px cop-self-center cop-bg-gray-200",
+    role: "separator",
+    "aria-hidden": true
+  });
+};
+export var Toolbar = function Toolbar(_ref3) {
+  var _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? 'highlight' : _ref3$variant,
+    className = _ref3.className,
+    overrideActions = _ref3.overrideActions;
+  var _useToolbar2 = useToolbar(),
+    config = _useToolbar2.config;
+  var filteredConfig = filterConfig(config, overrideActions);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(toolbarVariants({
+      variant: variant
+    }), className),
+    role: "toolbar",
+    "aria-label": "Formatting toolbar"
+  }, filteredConfig.map(function (item, index) {
+    if (item.type === 'group') {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarGroup, {
+        key: item.id,
+        group: item,
+        variant: variant
+      }), filteredConfig.length > 1 && index < filteredConfig.length - 1 && /*#__PURE__*/React.createElement(ToolbarSeparator, null));
+    }
+    return null;
+  }));
+};

package/dist/esm/components/Toolbar/ToolbarContext.js

@@ -0,0 +1,58 @@
+// This file is generated by a script. Do not edit this file directly.
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import React from "react";
+import { createContext, useContext, useMemo } from 'react';
+import clsx from 'clsx';
+var defaultActionState = {
+  isActive: false,
+  isDisabled: false
+};
+var ToolbarContext = /*#__PURE__*/createContext(null);
+var Styles = function Styles(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('[&_h1]:!cop-m-0 [&_h1]:cop-text-lg [&_h1]:cop-font-medium',
+    // styles for h1
+    '[&_h2]:!cop-m-0 [&_h2]:!cop-text-base [&_h2]:!cop-font-semibold',
+    // styles for h2
+    '[&_h3]:!cop-m-0 [&_h3]:!cop-text-base [&_h3]:!cop-font-medium',
+    // styles for h3
+    '[&_p]:!cop-m-0 [&_p]:!cop-text-base [&_p]:!cop-leading-6 [&_p]:!cop-font-normal', // styles for p
+    String.raw(_templateObject || (_templateObject = _taggedTemplateLiteral(["[&_p:empty::before]:content-[\"a0\"]"], ["[&_p:empty::before]:content-[\"\\a0\"]"]))),
+    // add a non breaking space inside each empty p so they take up a line
+    '[&_li]:!cop-my-1 [&_li]:!cop-text-base [&_li]:!cop-leading-6 [&_li]:!cop-font-normal',
+    // styles for li
+    '[&_ul]:!cop-px-3 [&_ul]:!cop-mr-3 [&_ul]:!cop-ml-1',
+    // styles for ul
+    '[&_ol]:!cop-px-3 [&_ol]:!cop-mr-3 [&_ol]:!cop-ml-1' // styles for ol
+    )
+  }, children);
+};
+export var ToolbarProvider = function ToolbarProvider(_ref2) {
+  var config = _ref2.config,
+    onAction = _ref2.onAction,
+    getActionState = _ref2.getActionState,
+    editor = _ref2.editor,
+    children = _ref2.children;
+  var value = useMemo(function () {
+    return {
+      config: config,
+      onAction: onAction,
+      getActionState: getActionState !== null && getActionState !== void 0 ? getActionState : function () {
+        return defaultActionState;
+      },
+      editor: editor
+    };
+  }, [config, onAction, getActionState, editor]);
+  return /*#__PURE__*/React.createElement(ToolbarContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(Styles, null, children));
+};
+export var useToolbar = function useToolbar() {
+  var context = useContext(ToolbarContext);
+  if (!context) {
+    throw new Error('useToolbar must be used within a ToolbarProvider');
+  }
+  return context;
+};

package/dist/esm/components/Toolbar/index.js

@@ -0,0 +1,5 @@
+// This file is generated by a script. Do not edit this file directly.
+import React from "react";
+export { Toolbar } from "./Toolbar";
+export { SlashMenu } from "./SlashMenu";
+export { ToolbarProvider, useToolbar } from "./ToolbarContext";

package/dist/esm/components/Toolbar/types.js

@@ -0,0 +1,2 @@
+// This file is generated by a script. Do not edit this file directly.
+export {};