@uxf/ui 11.33.0 → 11.33.2

package/button-list/button-list.js

@@ -39,7 +39,7 @@ const MenuButton = (0, react_3.forwardRef)((props, ref) => {
     const { variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
-        className: (0, cx_1.cx)("uxf-button-list__menu-button", `uxf-button-list__menu-button--variant-${variant}`, className),
+        className: (0, cx_1.cx)("uxf-button-list__menu-button", `uxf-button-list__menu-button--color-${color}`, `uxf-button-list__menu-button--variant-${variant}`, className),
     });
     return (react_3.default.createElement("a", { ref: ref, ...anchorProps },
         icon && react_3.default.createElement(icon_1.Icon, { className: "uxf-button-list__menu-button-icon", name: icon }),

package/button-list/button-list.stories.js

@@ -15,7 +15,7 @@ function Default() {
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(index_1.ButtonList, { buttons: [
                 { label: "First item" },
-                { label: "Second item" },
+                { label: "Second item", color: "negative" },
                 { label: "Third item" },
                 { label: "Fourth item", isDisabled: true },
                 { label: "Fifth item" },

package/css/button-list.css

@@ -1,17 +1,33 @@
 .uxf-button-list {
-    @apply flex items-center space-x-2;
+    align-items: center;
+    display: flex;
+    gap: theme("spacing.2");
 
     &__menu {
-        @apply relative;
-
         display: flex;
+        position: relative;
     }
 
     &__menu-items {
-        @apply z-dropdown absolute right-0 mt-2 w-40 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none;
+        background-color: theme("colors.white");
+        border-radius: theme("borderRadius.md");
+        margin-top: theme("spacing.2");
+        overflow: auto;
+        position: absolute;
+        right: 0;
+        width: theme("width.40");
+        z-index: theme("zIndex.dropdown");
+
+        &:focus-visible {
+            outline: none;
+        }
+
+        @apply divide-y divide-gray-100 shadow-lg ring-1 ring-black/5;
 
         :root .dark & {
-            @apply divide-gray-700 bg-gray-900 ring-white/10;
+            background-color: theme("colors.gray.900");
+
+            @apply divide-gray-700 ring-white/10;
         }
     }
 
@@ -24,25 +40,41 @@
     }
 
     &__menu-button {
-        @apply is-hoverable:cursor-pointer flex space-x-3 px-3 py-2 text-sm text-black hover:text-gray-800;
+        color: theme("colors.lightHigh");
+        display: flex;
+        gap: theme("spacing.3");
+        padding: theme("spacing.2") theme("spacing.3");
+
+        @apply is-hoverable:cursor-pointer is-hoverable:opacity-75 text-sm transition-opacity;
 
         :root .dark & {
-            @apply text-white hover:text-gray-200;
+            color: theme("colors.darkHigh");
         }
 
         &-icon {
-            @apply text-lightMedium w-3;
+            color: theme("colors.lightMedium");
+            width: theme("width.3");
 
             :root .dark & {
-                @apply text-darkMedium;
+                color: theme("colors.darkMedium");
             }
         }
 
         &.is-disabled {
-            @apply text-lightLow;
+            color: theme("colors.lightLow");
 
             :root .dark & {
-                @apply text-darkLow;
+                color: theme("colors.darkLow");
+            }
+        }
+
+        &--color {
+            &-negative {
+                color: theme("colors.red.500");
+
+                .uxf-button-list__menu-button-icon {
+                    color: theme("colors.red.500");
+                }
             }
         }
     }

package/message/README.md

@@ -5,6 +5,7 @@ Use component [ModalDialog](/docs/ui/modal-dialog) and method [openModal()](/doc
 ## CSS dependencies
 
 ```css
+@import url("@uxf/ui/alert-bubble/alert-bubble.css");
 @import url("@uxf/ui/message/message.css");
 @import url("@uxf/ui/dialog/dialog.css");
 @import url("@uxf/ui/button/button.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.33.0",
+  "version": "11.33.2",
   "description": "",
   "publishConfig": {
     "access": "public"