@paroicms/react-ui 0.5.11 → 0.5.13

package/dist/MenuItem.js

@@ -4,15 +4,16 @@ import { clsx } from "clsx";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { PopupMenu } from "./PopupMenu.js";
 export function MenuItem({ item, expanded, onToggle }) {
-    let { key: id, label, icon, url, command, popupMenu, className, style, active, disabled } = item;
+    let { key, label, icon, url, command, popupMenu, className, style, active, disabled } = item;
     if (disabled) {
         url = undefined;
         command = undefined;
     }
-    return (_jsxs("div", { className: clsx("PaMenuItem", { active }, className), style: style, children: [expanded !== undefined && onToggle ? (_jsx("button", { className: "PaMenuItem-left toggle", onClick: () => onToggle(!expanded), type: "button", children: expanded ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }) })) : icon ? (_jsx("div", { className: "PaMenuItem-left icon", children: icon })) : undefined, url ? (_jsx("a", { className: clsx("PaMenuItem-label", { disabled }), href: url, onClick: url && command
+    const iconWrapper = icon ? _jsx("span", { className: "PaMenuItem-icon", children: icon }) : undefined;
+    return (_jsxs("div", { className: clsx("PaMenuItem", { active }, className), style: style, children: [expanded !== undefined && onToggle && command ? (_jsx("button", { className: "PaMenuItem-left toggle", onClick: () => onToggle(!expanded), type: "button", children: expanded ? _jsx(ChevronDown, { size: 20 }) : _jsx(ChevronRight, { size: 20 }) })) : undefined, url ? (_jsxs("a", { className: clsx("PaMenuItem-label", { disabled }), href: url, onClick: url && command
                     ? (ev) => {
                         ev.preventDefault();
                         command?.();
                     }
-                    : undefined, children: label })) : command ? (_jsx("button", { className: "PaMenuItem-label", onClick: command, type: "button", disabled: disabled, children: label })) : (_jsx("span", { className: clsx("PaMenuItem-label", { disabled }), children: label })), popupMenu && _jsx(PopupMenu, { className: "PaMenuItem-popup", items: popupMenu })] }, id));
+                    : undefined, children: [iconWrapper, label] })) : command || url ? (_jsxs("button", { className: "PaMenuItem-label", onClick: command, type: "button", disabled: disabled, children: [iconWrapper, label] })) : onToggle && expanded !== undefined ? (_jsxs("button", { className: "PaMenuItem-label", onClick: () => onToggle(!expanded), type: "button", disabled: disabled, children: [_jsx("span", { className: "PaMenuItem-inlineToggle", children: expanded ? _jsx(ChevronDown, { size: 20 }) : _jsx(ChevronRight, { size: 20 }) }), iconWrapper, label] })) : (_jsxs("span", { className: clsx("PaMenuItem-label", { disabled }), children: [iconWrapper, label] })), popupMenu && _jsx(PopupMenu, { className: "PaMenuItem-popup", items: popupMenu })] }, key));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/react-ui",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",

package/styles/Dialog.css

@@ -2,7 +2,7 @@
    Dialog Component
    ======================================== */
 .PaDialog {
-  max-width: 90vw;
+  max-width: 90dvw;
   padding: 0;
   background: var(--color-bg-elevated);
   border: none;
@@ -15,7 +15,7 @@
   }
 
   &:modal {
-    max-height: 90vh;
+    max-height: 90dvh;
     margin: auto;
   }
 

package/styles/MenuItem.css

@@ -12,6 +12,7 @@
 
 .PaMenuItem-left {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 38px;
@@ -20,21 +21,15 @@
   cursor: pointer;
   background: transparent;
   border: none;
-
-  &.toggle {
-    padding: var(--space-2) var(--space-3);
-
-    /* &:hover {
-      background: var(--color-bg-subtle);
-    } */
-  }
 }
 
 .PaMenuItem-label {
   display: flex;
   flex: 1;
+  gap: var(--space-2);
   align-items: center;
   padding: var(--space-2);
+  overflow: hidden;
   font-family: inherit;
   font-size: inherit;
   color: inherit;
@@ -51,39 +46,56 @@
     cursor: not-allowed;
   }
 
-  /* Only apply hover to clickable elements (a, button) */
-  /* &:is(a, button):hover {
-    background: var(--color-bg-subtle);
-  } */
-
-  /* Non-clickable span elements */
   &:is(span) {
     cursor: default;
   }
 }
 
 .PaMenuItem-popup {
+  flex-shrink: 0;
   align-self: center;
   margin-left: auto;
 }
 
+.PaMenuItem-icon {
+  display: flex;
+}
+
+.PaMenuItem-inlineToggle {
+  display: flex;
+}
+
 /* ========================================
    MenuItem in Sidebar Context
    ======================================== */
 ._paSidebar {
-  & .PaMenuItem {
-    padding: 0 var(--space-2);
+  .PaMenuItem-left {
+    width: 45px;
+    padding-left: var(--space-5);
   }
 
-  /* Dark Sidebar */
-  &.dark .PaMenuItem {
-    color: var(--color-text-sidebar-muted);
+  .PaMenuItem-label {
+    padding: var(--space-3) var(--space-2);
 
-    & .PaMenuItem-label {
-      padding: var(--space-3) var(--space-2);
+    &:first-child {
+      padding-left: var(--space-5);
     }
 
-    &:not(.disabled) .PaMenuItem-label:is(a, button):hover {
+    &:last-child {
+      padding-right: var(--space-5);
+    }
+  }
+
+  .PaMenuItem-icon {
+    margin-right: var(--space-2);
+  }
+
+  /* Dark Sidebar */
+  &._dark .PaMenuItem {
+    color: var(--color-text-sidebar-muted);
+
+    &:not(.disabled) .PaMenuItem-label:is(a, button):hover,
+    &:not(.disabled) .PaMenuItem-popup:is(a, button):hover {
       color: #fff;
       background: var(--color-hover-sidebar-dark);
     }
@@ -99,7 +111,8 @@
       background: var(--color-primary);
     }
 
-    &.active:not(.disabled) .PaMenuItem-label:is(a, button):hover {
+    &.active:not(.disabled) .PaMenuItem-label:is(a, button):hover,
+    &.active:not(.disabled) .PaMenuItem-popup:is(a, button):hover {
       color: var(--color-text-inverse);
       background: var(--color-primary-hover);
     }
@@ -111,14 +124,15 @@
   }
 
   /* Light Sidebar */
-  &.light .PaMenuItem {
+  &._light .PaMenuItem {
     color: var(--color-text-muted);
 
-    & .PaMenuItem-label {
-      padding: var(--space-3) var(--space-2);
+    &:not(.disabled) .PaMenuItem-popup:is(a, button) {
+      color: #eee;
     }
 
-    &:not(.disabled) .PaMenuItem-label:is(a, button):hover {
+    &:not(.disabled) .PaMenuItem-label:is(a, button):hover,
+    &:not(.disabled) .PaMenuItem-popup:is(a, button):hover {
       color: var(--color-text);
       background: var(--color-hover-sidebar-light);
     }
@@ -134,7 +148,8 @@
       background: var(--color-primary);
     }
 
-    &.active:not(.disabled) .PaMenuItem-label:is(a, button):hover {
+    &.active:not(.disabled) .PaMenuItem-label:is(a, button):hover,
+    &.active:not(.disabled) .PaMenuItem-popup:is(a, button):hover {
       color: var(--color-text-inverse);
       background: var(--color-primary-hover);
     }

package/styles/PasswordInput.css

@@ -11,6 +11,7 @@
   position: relative;
   display: flex;
   align-self: flex-start;
+  width: 100%;
 
   &.error .PaPasswordInput-input {
     border-color: var(--color-danger);

package/styles/PopupMenu.css

@@ -4,7 +4,7 @@
 .PaPopupMenu {
   z-index: var(--z-popover);
   min-width: 160px;
-  padding: var(--space-2);
+  overflow: hidden;
   background: var(--color-bg-elevated);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);

package/styles/theme/tokens.css

@@ -222,7 +222,7 @@
 /* ========================================
    Dark Mode (for sidebar)
    ======================================== */
-.dark {
+._dark {
   --color-text: #e2e8f0;
   --color-text-light: #94a3b8;
   --color-text-muted: #cbd5e1;