@agility/plenum-ui 1.3.3 → 1.3.4

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components/Button';
 export * from './components/Combobox';
 export * from './components/Dropdown';
+export * from './components/ButtonDropdown';
 export * from './components/Switch';
 export * from './components/TreeView';
 export * from './components/Avatar';

package/lib/index.esm.js

@@ -7255,22 +7255,6 @@ var Dropdown = function (_a) {
             })))));
 };
 
-/** Comment */
-var Switch = function (_a) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? "md" : _c;
-    var _d = useState(defaultValue), enabled = _d[0], setEnabled = _d[1];
-    useEffect(function () {
-        onChange && onChange(enabled);
-    }, [enabled]);
-    var switchStyles = cn("relative inline-flex flex-shrink-0", "border-2 border-transparent rounded-full cursor-pointer", "transition-colors ease-in-out duration-200 focus:outline-none", "focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75", { "bg-purple-600": enabled }, { "bg-gray-200": !enabled }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" });
-    // the circular button inside the switch
-    var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", "shadow-lg transform ring-0 transition ease-in-out duration-200", { "translate-x-9": enabled }, { "translate-x-0": !enabled }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && enabled }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !enabled });
-    return (React__default.createElement("div", { className: "text-center" },
-        React__default.createElement(ue, { checked: enabled, onChange: setEnabled, className: switchStyles },
-            React__default.createElement("span", { className: "sr-only" }, "Use setting"),
-            React__default.createElement("span", { "aria-hidden": "true", className: toggleStyles }))));
-};
-
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -7286,6 +7270,17 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+
 function __spreadArray$1(to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -7296,6 +7291,48 @@ function __spreadArray$1(to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 }
 
+/**
+ * Primary UI component for user interaction
+ */
+var ButtonDropDown = function (_a) {
+    var button = _a.button, dropDown = _a.dropDown;
+    return (React__default.createElement("div", { className: "flex items-stretch" },
+        React__default.createElement(Button, __assign$1({}, button, { className: "rounded-r-none border-r-0 hover:border-r-0 " })),
+        React__default.createElement("div", { className: cn("w-[1px]", button.type === "primary" ? "bg-purple-700" : "", button.type === "secondary" ? "bg-purple-200" : "", button.type === "alternative" ? "bg-gray-300" : "") }),
+        React__default.createElement(Dropdown, __assign$1({}, dropDown, { className: cn("border-l-none border-l-none h-[calc(100%)] border-separate rounded-l-none border border-l-0 px-2 transition-all hover:border-l-0", button.type === "primary"
+                ? "border-purple-600 bg-purple-600  text-white  hover:border-purple-700 hover:bg-purple-700 active:border-purple-800 active:bg-purple-800"
+                : "", button.type === "secondary"
+                ? "border-purple-100 bg-purple-100 text-purple-700  hover:border-purple-200 hover:bg-purple-200 active:border-purple-300 active:bg-purple-300"
+                : "", button.type === "alternative"
+                ? "border-gray-300 bg-white text-gray-600  hover:border-gray-300 hover:bg-gray-50"
+                : ""), xPosition: "right", itemsClassName: cn(button.type === "primary"
+                ? "!bg-purple-600 !divide-purple-700"
+                : "", button.type === "secondary"
+                ? "!bg-purple-100 !divide-purple-300"
+                : ""), itemClassName: cn("transition-all", button.type === "primary"
+                ? "bg-purple-600 !text-white hover:bg-purple-700 active:bg-purple-800"
+                : "", button.type === "secondary"
+                ? "bg-purple-100 !text-purple-700 hover:bg-purple-200 active:bg-purple-300"
+                : "") })),
+        React__default.createElement("div", { className: "hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200" })));
+};
+
+/** Comment */
+var Switch = function (_a) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? "md" : _c;
+    var _d = useState(defaultValue), enabled = _d[0], setEnabled = _d[1];
+    useEffect(function () {
+        onChange && onChange(enabled);
+    }, [enabled]);
+    var switchStyles = cn("relative inline-flex flex-shrink-0", "border-2 border-transparent rounded-full cursor-pointer", "transition-colors ease-in-out duration-200 focus:outline-none", "focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75", { "bg-purple-600": enabled }, { "bg-gray-200": !enabled }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" });
+    // the circular button inside the switch
+    var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", "shadow-lg transform ring-0 transition ease-in-out duration-200", { "translate-x-9": enabled }, { "translate-x-0": !enabled }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && enabled }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !enabled });
+    return (React__default.createElement("div", { className: "text-center" },
+        React__default.createElement(ue, { checked: enabled, onChange: setEnabled, className: switchStyles },
+            React__default.createElement("span", { className: "sr-only" }, "Use setting"),
+            React__default.createElement("span", { "aria-hidden": "true", className: toggleStyles }))));
+};
+
 /**
  * Create the React Context
  */ const DndContext = createContext({
@@ -12689,5 +12726,5 @@ var Checkbox = function (_a) {
             message && (React__default.createElement("p", { id: "".concat(id, "-description"), className: "text-gray-500" }, message)))));
 };
 
-export { Avatar, Button, Checkbox, Combobox, Dropdown, Placeholder, Radio, Select, Switch, _TextInput as TextInput, _TextInputAddon as TextInputAddon, TextInputSelect, _Textarea as Textarea, _TreeView as TreeView };
+export { Avatar, Button, ButtonDropDown, Checkbox, Combobox, Dropdown, Placeholder, Radio, Select, Switch, _TextInput as TextInput, _TextInputAddon as TextInputAddon, TextInputSelect, _Textarea as Textarea, _TreeView as TreeView };
 //# sourceMappingURL=index.esm.js.map