@paroicms/react-ui 0.5.8 → 0.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/react-ui",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",
@@ -25,7 +25,7 @@
     "dev": "tsc --watch --preserveWatchOutput"
   },
   "dependencies": {
-    "@paroicms/public-anywhere-lib": "0.41.2",
+    "@paroicms/public-anywhere-lib": "0.41.3",
     "clsx": "~2.1.1",
     "lucide-react": "~0.562.0",
     "react-sortablejs": "~6.1.4",
@@ -36,7 +36,7 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@types/react": "~19.2.8",
+    "@types/react": "~19.2.9",
     "@types/react-dom": "~19.2.3",
     "@types/sortablejs": "^1.15.9",
     "react": "~19.2.3",

package/styles/Breadcrumb.css

@@ -31,10 +31,6 @@
   }
 }
 
-._mobile .PaNavbar-item {
-  padding: 0 var(--space-2);
-}
-
 .PaBreadcrumb-link:is(a, button) {
   cursor: pointer;
   transition: color var(--transition);

package/styles/MenuItem.css

@@ -70,7 +70,7 @@
 /* ========================================
    MenuItem in Sidebar Context
    ======================================== */
-.PaSidebar {
+._paSidebar {
   & .PaMenuItem {
     padding: 0 var(--space-2);
   }
@@ -93,12 +93,6 @@
       background: var(--color-hover-sidebar-dark);
     }
 
-    /* & .PaMenuItem-popup .PaBtn.secondary.outlined:hover {
-      color: var(--color-text-sidebar);
-      background: var(--color-hover-sidebar-dark);
-      border-color: var(--color-hover-sidebar-dark);
-    } */
-
     /* Active state - self-contained with explicit hover */
     &.active {
       color: var(--color-text-inverse);
@@ -114,12 +108,6 @@
       color: var(--color-text-inverse);
       background: var(--color-primary-hover);
     }
-
-    /* & .PaMenuItem-popup .PaBtn.secondary.outlined:hover {
-      color: var(--color-text-inverse);
-      background: var(--color-primary-hover);
-      border-color: var(--color-primary-hover);
-    } */
   }
 
   /* Light Sidebar */
@@ -140,12 +128,6 @@
       background: var(--color-hover-sidebar-light);
     }
 
-    /* & .PaMenuItem-popup .PaBtn.secondary.outlined:hover {
-      color: var(--color-text);
-      background: var(--color-hover-sidebar-light);
-      border-color: var(--color-hover-sidebar-light);
-    } */
-
     /* Active state - self-contained with explicit hover */
     &.active {
       color: var(--color-text-inverse);
@@ -161,11 +143,5 @@
       color: var(--color-text-inverse);
       background: var(--color-primary-hover);
     }
-
-    /* & .PaMenuItem-popup .PaBtn.secondary.outlined:hover {
-      color: var(--color-text-inverse);
-      background: var(--color-primary-hover);
-      border-color: var(--color-primary-hover);
-    } */
   }
 }

package/styles/theme/field.css

@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
+  align-items: flex-start;
   width: 100%;
 
   &:not(:last-child) {

package/styles/theme/index.css

@@ -11,6 +11,5 @@
 @import "./reset.css" layer(reset);
 @import "./tokens.css" layer(tokens);
 @import "./base.css" layer(base);
-@import "./common.css" layer(common);
 @import "./utilities.css";
 @import "./field.css";

package/styles/theme/tokens.css

@@ -70,9 +70,7 @@
      Warm sunny palette - like morning light
      ======================================== */
   --color-bg: #ffffff;
-  /* --color-bg-app: #f7f5e8; */
-  /* --color-bg-app: #fbffdf; */
-  --color-bg-app: #fff;
+  --color-bg-app: #f4faf4;
   /* #ffffe0 */
   --color-bg-section: #f6f3eb;
   /* Lighter warm */

package/styles/theme/common.css

@@ -1,410 +0,0 @@
-/* ========================================
-   ParoiCMS Design System - Common Styles
-   Layout and infrastructure styles
-   Used by Admin-UI and shared across components
-   ======================================== */
-
-/* ========================================
-   Icon Wrapper (utility)
-   ======================================== */
-.PaIcon {
-  display: inline-flex;
-  flex-shrink: 0;
-  width: 1em;
-  height: 1em;
-
-  & svg {
-    width: 100%;
-    height: 100%;
-    fill: currentColor;
-  }
-}
-
-/* ========================================
-   Context Utility Class
-   ======================================== */
-
-/* ========================================
-   App Shell
-   ======================================== */
-.PaApp {
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-  background: var(--color-bg-app);
-}
-
-.PaMainContent {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-  overflow: hidden;
-}
-
-/* ========================================
-   Sidebar
-   ======================================== */
-.PaSidebar {
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-  overflow-x: hidden;
-}
-
-.PaSidebar.dark {
-  color: var(--color-text-sidebar);
-  background: var(--color-bg-sidebar);
-}
-
-.PaSidebar.light {
-  width: var(--sidebar-secondary-width);
-  color: var(--color-text);
-  background: var(--color-bg-elevated);
-  border-right: 1px solid var(--color-border);
-}
-
-.PaSidebar-header {
-  display: flex;
-  flex-shrink: 0;
-  gap: var(--space-3);
-  align-items: center;
-  padding: var(--space-4) var(--space-5);
-}
-
-.PaSidebar.dark .PaSidebar-header {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.PaSidebar.light .PaSidebar-header {
-  background: var(--color-bg-subtle);
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.PaSidebar-logo {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  overflow: hidden;
-  font-size: var(--text-lg);
-  font-weight: var(--font-bold);
-  color: var(--color-text-inverse);
-  background: var(--color-primary);
-  border-radius: var(--radius);
-}
-
-.PaSidebar-logo img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.PaSidebar-title {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: var(--text-base);
-  font-weight: var(--font-semibold);
-  white-space: nowrap;
-}
-
-.PaSidebar-viewSiteBtn {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  color: rgba(255, 255, 255, 0.7);
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
-
-  &:hover {
-    color: rgba(255, 255, 255, 1);
-    background: rgba(255, 255, 255, 0.1);
-  }
-}
-
-.PaSidebar-nav {
-  flex: 1;
-  padding: var(--space-4) 0;
-  overflow-y: auto;
-}
-
-._mobile .PaSidebar-nav {
-  padding: 0 0 var(--space-2);
-}
-
-.PaSidebar-footer {
-  flex-shrink: 0;
-  padding-top: var(--space-3);
-}
-
-.PaSidebar-userSection {
-  padding: var(--space-3) var(--space-5) var(--space-2);
-}
-
-.PaSidebar.dark .PaSidebar-footer {
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.PaSidebar.light .PaSidebar-footer {
-  border-top: 1px solid var(--color-border-light);
-}
-
-.PaSidebar-separator {
-  margin: var(--space-3) var(--space-5);
-}
-
-.PaSidebar.dark .PaSidebar-separator {
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.PaSidebar.light .PaSidebar-separator {
-  border-top: 1px solid var(--color-border-light);
-}
-
-.PaSidebar-version {
-  margin-top: var(--space-3);
-  font-size: var(--text-xs);
-  font-style: italic;
-  opacity: 0.6;
-}
-
-.PaSidebar.dark .PaSidebar-version {
-  color: var(--color-text-sidebar-muted);
-}
-
-/* User menu in sidebar */
-.UserMenu-trigger {
-  display: flex;
-  gap: var(--space-3);
-  align-items: center;
-  width: 100%;
-  padding: var(--space-2) 0;
-  font-size: var(--text-sm);
-  color: var(--color-text-sidebar);
-  text-align: left;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  transition: all var(--transition);
-}
-
-.UserMenu-trigger:hover {
-  color: var(--color-text-sidebar);
-  background: var(--color-bg-sidebar-hover);
-  border-radius: var(--radius);
-}
-
-.UserMenu-icon {
-  flex-shrink: 0;
-  opacity: 0.7;
-}
-
-.UserMenu-name {
-  font-weight: var(--font-medium);
-}
-
-/* ========================================
-   Side Menu Item
-   ======================================== */
-.PaSideMenuItem {
-  display: flex;
-  gap: var(--space-3);
-  align-items: center;
-  padding: var(--space-3) var(--space-5);
-  font-size: var(--text-sm);
-  cursor: pointer;
-  border-radius: 0;
-  transition: all var(--transition);
-}
-
-/* Dark sidebar context */
-.PaSidebar.dark .PaSideMenuItem {
-  color: var(--color-text-sidebar-muted);
-}
-
-.PaSidebar.dark .PaSideMenuItem:hover {
-  color: var(--color-text-sidebar);
-  background: var(--color-hover-sidebar-dark);
-}
-
-.PaSidebar.dark .PaSideMenuItem.active {
-  color: var(--color-text-inverse);
-  background: var(--color-primary);
-}
-
-/* Light sidebar context */
-.PaSidebar.light .PaSideMenuItem {
-  color: var(--color-text-muted);
-}
-
-.PaSidebar.light .PaSideMenuItem:hover {
-  color: var(--color-text);
-  background: var(--color-hover-sidebar-light);
-}
-
-.PaSidebar.light .PaSideMenuItem.active {
-  color: var(--color-primary-dark);
-  background: var(--color-primary-light);
-}
-
-.PaSideMenuItem-icon {
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  opacity: 0.7;
-}
-
-.PaSideMenuItem.active .PaSideMenuItem-icon {
-  opacity: 1;
-}
-
-.PaSideMenuItem-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.PaSideMenuItem-badge {
-  padding: var(--space-1) var(--space-2);
-  font-size: var(--text-xs);
-  font-weight: var(--font-medium);
-  border-radius: var(--radius-full);
-}
-
-.PaSidebar.dark .PaSideMenuItem-badge {
-  background: rgba(255, 255, 255, 0.15);
-}
-
-.PaSidebar.light .PaSideMenuItem-badge {
-  background: var(--color-bg-subtle);
-  border: 1px solid var(--color-border);
-}
-
-.PaSideMenuItem.child {
-  padding-left: var(--space-8);
-}
-
-.PaSideMenuItem.child .PaSideMenuItem-icon {
-  width: 16px;
-  height: 16px;
-}
-
-/* ========================================
-   Navbar
-   ======================================== */
-.PaNavbar {
-  z-index: var(--z-sticky);
-  display: flex;
-  flex-shrink: 0;
-  justify-content: space-between;
-  height: var(--navbar-height);
-  background: var(--color-bg-elevated);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.PaNavbar-group {
-  display: flex;
-  align-items: center;
-  /* gap: var(--space-4); */
-}
-
-.PaNavbar-item {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding: 0 var(--space-6);
-}
-
-.PaNavbar-item.withBorder,
-.PaNavbar-group .PaNavbar-item:first-child {
-  /* padding-right: var(--space-4);
-  margin-right: -8px; */
-  border-right: 1px solid var(--color-border-light);
-}
-
-.PaNavbar-item:last-child {
-  border-right: none;
-}
-
-/* ========================================
-   Control Bar
-   ======================================== */
-.PaControlBar {
-  display: flex;
-  gap: var(--space-3);
-  align-items: center;
-  justify-content: space-between;
-  height: var(--control-bar-height);
-  padding: 0 var(--space-5);
-  background: var(--color-bg-elevated);
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.PaControlBar-left {
-  display: flex;
-  flex: 1;
-  gap: var(--space-3);
-  align-items: center;
-  min-width: 0;
-}
-
-.PaControlBar-right {
-  display: flex;
-  flex-shrink: 0;
-  gap: var(--space-2);
-  align-items: center;
-}
-
-.PaControlBar-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: var(--text-lg);
-  font-weight: var(--font-semibold);
-  white-space: nowrap;
-}
-
-.PaControlBar-subtitle {
-  font-size: var(--text-sm);
-  color: var(--color-text-muted);
-}
-
-/* ========================================
-   Field Panel
-   ======================================== */
-.PaFieldPanel {
-  flex: 1;
-  padding: var(--space-6);
-  overflow-y: auto;
-}
-
-.PaFieldPanel-section {
-  margin-bottom: var(--space-6);
-}
-
-.PaFieldPanel-section:last-child {
-  margin-bottom: 0;
-}
-
-.PaFieldPanel-sectionTitle {
-  margin-bottom: var(--space-4);
-  font-size: var(--text-xs);
-  font-weight: var(--font-semibold);
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}