@paroicms/react-ui 0.5.2 → 0.5.4

package/styles/DataTable.css

@@ -2,7 +2,6 @@
    Data Table
    ======================================== */
 .PaDataTable {
-  width: 100%;
   overflow: hidden;
   border-spacing: 0;
   border-collapse: separate;
@@ -29,9 +28,15 @@
   cursor: pointer;
   transition: color var(--transition);
 
-  &:hover {
+  &:hover:not(.disabled) {
     color: var(--color-text);
   }
+
+  &.disabled {
+    color: var(--color-text-light);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 }
 
 .PaDataTable-row {
@@ -43,18 +48,20 @@
 
   &.clickable {
     cursor: pointer;
-    &:hover {
+
+    &:hover:not(.disabled):not(.unselectable) {
       background: var(--color-primary-light);
     }
+
+    &.disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+    }
   }
 
   &.unselectable {
     cursor: not-allowed;
-
-    &,
-    &:hover {
-      background-color: var(--color-bg-muted);
-    }
+    background-color: var(--color-bg-muted);
 
     & .PaDataTable-cell {
       color: var(--color-text-muted);
@@ -150,6 +157,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 40px;
+  height: 40px;
   padding: var(--space-1) var(--space-2);
   cursor: pointer;
   background: var(--color-bg);
@@ -161,8 +170,9 @@
   }
 
   &:disabled {
+    color: var(--color-text-muted);
     cursor: not-allowed;
-    opacity: 0.5;
+    background: var(--color-bg-muted);
   }
 }
 

package/styles/DateInput.css

@@ -1,6 +1,9 @@
 /* ========================================
    DateInput Component
    ======================================== */
+._paForm input[type="date"],
+._paForm input[type="datetime-local"],
+._paForm input[type="time"],
 .PaDateTimeInput {
   padding: var(--space-2) var(--space-3);
   font-family: inherit;

package/styles/Dialog.css

@@ -69,10 +69,16 @@
   border-radius: var(--radius);
   transition: all var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: var(--color-text);
     background: var(--color-bg-subtle);
   }
+
+  &:disabled {
+    color: var(--color-text-light);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 }
 
 .PaDialog-content {

package/styles/Inplace.css

@@ -9,10 +9,17 @@
     border-radius: var(--radius);
     transition: all var(--transition);
 
-    &:hover {
+    &:hover:not(:disabled):not(.disabled) {
       background: var(--color-bg-subtle);
       border-color: var(--color-border);
     }
+
+    &:disabled,
+    &.disabled {
+      color: var(--color-text-muted);
+      pointer-events: none;
+      cursor: not-allowed;
+    }
   }
 
   &.active {
@@ -37,8 +44,14 @@
   border-radius: var(--radius);
   transition: all var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: var(--color-text);
     background: var(--color-bg-subtle);
   }
+
+  &:disabled {
+    color: var(--color-text-light);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 }

package/styles/InputNumber.css

@@ -1,8 +1,8 @@
 /* ========================================
    InputNumber Component
    ======================================== */
+._paForm input[type="number"],
 .PaNumberInput {
-  width: 100%;
   padding: var(--space-2) var(--space-3);
   font-family: inherit;
   font-size: var(--text-base);
@@ -26,9 +26,10 @@
   }
 
   &:disabled {
+    color: var(--color-text-muted);
     cursor: not-allowed;
-    background: var(--color-bg-subtle);
-    opacity: 0.7;
+    background: var(--color-bg-muted);
+    border-color: var(--color-border-light);
   }
 
   &.error {

package/styles/{Switch.css → InputSwitch.css}

@@ -1,7 +1,7 @@
 /* ========================================
    Switch Component
    ======================================== */
-.PaSwitch {
+.PaInputSwitch {
   display: inline-flex;
   gap: var(--space-3);
   align-items: center;
@@ -9,14 +9,14 @@
   user-select: none;
 }
 
-.PaSwitch-input {
+.PaInputSwitch-input {
   position: absolute;
   width: 0;
   height: 0;
   opacity: 0;
 }
 
-.PaSwitch-track {
+.PaInputSwitch-track {
   position: relative;
   width: 42px;
   height: 22px;
@@ -24,21 +24,21 @@
   border-radius: var(--radius-full);
   transition: background-color var(--transition);
 
-  .PaSwitch-input:checked + & {
+  .PaInputSwitch-input:checked + & {
     background: var(--color-primary);
   }
 
-  .PaSwitch-input:focus + & {
+  .PaInputSwitch-input:focus + & {
     box-shadow: 0 0 0 3px var(--color-primary-light);
   }
 
-  .PaSwitch-input:disabled + & {
+  .PaInputSwitch-input:disabled + & {
     cursor: not-allowed;
-    opacity: 0.5;
+    background: var(--color-border-disabled);
   }
 }
 
-.PaSwitch-thumb {
+.PaInputSwitch-thumb {
   position: absolute;
   top: 2px;
   left: 2px;
@@ -49,12 +49,12 @@
   box-shadow: var(--shadow-xs);
   transition: transform var(--transition);
 
-  .PaSwitch-input:checked + .PaSwitch-track & {
+  .PaInputSwitch-input:checked + .PaInputSwitch-track & {
     transform: translateX(20px);
   }
 }
 
-.PaSwitch-label {
+.PaInputSwitch-label {
   font-size: var(--text-sm);
   color: var(--color-text);
 }

package/styles/InputText.css

@@ -11,8 +11,22 @@
   }
 }
 
+.PaTextField-row {
+  display: flex;
+  gap: var(--space-1);
+
+  .PaTextInput {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+._paForm input[type="text"],
+._paForm input[type="email"],
+._paForm input[type="url"],
+._paForm input[type="search"],
+._paForm input[type="tel"],
 .PaTextInput {
-  width: 100%;
   padding: var(--space-2) var(--space-3);
   font-family: inherit;
   font-size: var(--text-base);
@@ -36,19 +50,10 @@
   }
 
   &:disabled {
+    color: var(--color-text-muted);
     cursor: not-allowed;
-    background: var(--color-bg-subtle);
-    opacity: 0.7;
-  }
-}
-
-.PaTextField-row {
-  display: flex;
-  gap: var(--space-1);
-
-  .PaTextInput {
-    flex: 1;
-    min-width: 0;
+    background: var(--color-bg-muted);
+    border-color: var(--color-border-light);
   }
 }
 

package/styles/MenuItem.css

@@ -8,11 +8,6 @@
   &.active {
     background: var(--color-bg-subtle);
   }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
 }
 
 .PaMenuItem-left {
@@ -49,6 +44,13 @@
   background: transparent;
   border: none;
 
+  &:disabled,
+  &.disabled {
+    color: var(--color-text-muted);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
   /* Only apply hover to clickable elements (a, button) */
   /* &:is(a, button):hover {
     background: var(--color-bg-subtle);
@@ -79,14 +81,14 @@
 
     & .PaMenuItem-label {
       padding: var(--space-3) var(--space-2);
+    }
 
-      &:is(a, button):hover {
-        color: #fff;
-        background: var(--color-hover-sidebar-dark);
-      }
+    &:not(.disabled) .PaMenuItem-label:is(a, button):hover {
+      color: #fff;
+      background: var(--color-hover-sidebar-dark);
     }
 
-    & .PaMenuItem-left.toggle:hover {
+    &:not(.disabled) .PaMenuItem-left.toggle:hover {
       color: #fff;
       background: var(--color-hover-sidebar-dark);
     }
@@ -101,23 +103,23 @@
     &.active {
       color: var(--color-text-inverse);
       background: var(--color-primary);
+    }
 
-      & .PaMenuItem-label:is(a, button):hover {
-        color: var(--color-text-inverse);
-        background: var(--color-primary-hover);
-      }
-
-      & .PaMenuItem-left.toggle:hover {
-        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);
-      } */
+    &.active:not(.disabled) .PaMenuItem-label:is(a, button):hover {
+      color: var(--color-text-inverse);
+      background: var(--color-primary-hover);
+    }
+
+    &.active:not(.disabled) .PaMenuItem-left.toggle:hover {
+      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 */
@@ -126,14 +128,14 @@
 
     & .PaMenuItem-label {
       padding: var(--space-3) var(--space-2);
+    }
 
-      &:is(a, button):hover {
-        color: var(--color-text);
-        background: var(--color-hover-sidebar-light);
-      }
+    &:not(.disabled) .PaMenuItem-label:is(a, button):hover {
+      color: var(--color-text);
+      background: var(--color-hover-sidebar-light);
     }
 
-    & .PaMenuItem-left.toggle:hover {
+    &:not(.disabled) .PaMenuItem-left.toggle:hover {
       color: var(--color-text);
       background: var(--color-hover-sidebar-light);
     }
@@ -148,22 +150,22 @@
     &.active {
       color: var(--color-text-inverse);
       background: var(--color-primary);
+    }
 
-      & .PaMenuItem-label:is(a, button):hover {
-        color: var(--color-text-inverse);
-        background: var(--color-primary-hover);
-      }
-
-      & .PaMenuItem-left.toggle:hover {
-        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);
-      } */
+    &.active:not(.disabled) .PaMenuItem-label:is(a, button):hover {
+      color: var(--color-text-inverse);
+      background: var(--color-primary-hover);
+    }
+
+    &.active:not(.disabled) .PaMenuItem-left.toggle:hover {
+      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/MultiSelect.css

@@ -13,7 +13,12 @@
 
   &.disabled {
     cursor: not-allowed;
-    opacity: 0.5;
+
+    .PaMultiSelect-control {
+      color: var(--color-text-muted);
+      background: var(--color-bg-muted);
+      border-color: var(--color-border-light);
+    }
   }
 }
 
@@ -41,7 +46,7 @@
   border-radius: var(--radius);
   transition: border-color var(--transition);
 
-  &:hover {
+  .PaMultiSelect:not(.disabled) &:hover {
     border-color: var(--color-primary);
   }
 
@@ -88,7 +93,7 @@
   border: none;
   transition: color var(--transition);
 
-  &:hover {
+  .PaMultiSelect:not(.disabled) &:hover {
     color: var(--color-danger);
   }
 }
@@ -122,7 +127,7 @@
   border-radius: var(--radius);
   transition: background-color var(--transition);
 
-  &:hover {
+  &:hover:not(.disabled) {
     background: var(--color-bg-subtle);
   }
 
@@ -132,8 +137,9 @@
   }
 
   &.disabled {
+    color: var(--color-text-muted);
     cursor: not-allowed;
-    opacity: 0.5;
+    background: var(--color-bg-muted);
   }
 }
 

package/styles/Panel.css

@@ -17,9 +17,16 @@
     cursor: pointer;
     transition: background-color var(--transition);
 
-    &:hover {
+    &:hover:not(:disabled):not(.disabled) {
       background: var(--color-bg-subtle);
     }
+
+    &:disabled,
+    &.disabled {
+      color: var(--color-text-muted);
+      pointer-events: none;
+      cursor: not-allowed;
+    }
   }
 }
 

package/styles/PasswordInput.css

@@ -16,10 +16,10 @@
   }
 }
 
+._paForm input[type="password"],
 .PaPasswordInput-input {
   flex: 1;
-  width: 100%;
-  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
+  padding: var(--space-2) var(--space-3);
   font-family: inherit;
   font-size: var(--text-base);
   line-height: var(--leading-normal);
@@ -42,12 +42,18 @@
   }
 
   &:disabled {
+    color: var(--color-text-muted);
     cursor: not-allowed;
-    background: var(--color-bg-subtle);
-    opacity: 0.7;
+    background: var(--color-bg-muted);
+    border-color: var(--color-border-light);
   }
 }
 
+/* Override padding for component wrapper with toggle button */
+.PaPasswordInput-input {
+  padding-right: var(--space-8);
+}
+
 .PaPasswordInput-toggle {
   position: absolute;
   top: 50%;
@@ -63,7 +69,13 @@
   transform: translateY(-50%);
   transition: color var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: var(--color-text);
   }
+
+  &:disabled {
+    color: var(--color-text-light);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 }

package/styles/PopupMenu.css

@@ -22,6 +22,13 @@
   border-radius: var(--radius);
   transition: background-color var(--transition);
 
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   /* &:hover {
     background: var(--color-bg-subtle);
   } */
@@ -35,3 +42,15 @@
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-md);
 }
+
+.PaPopupMenu-separator {
+  height: 1px;
+  margin: var(--space-1) 0;
+  background: var(--color-border-light);
+}
+
+.PaPopupMenu-footer {
+  padding-top: var(--space-2);
+  margin-top: var(--space-2);
+  border-top: 1px solid var(--color-border-light);
+}

package/styles/RadioButton.css

@@ -9,6 +9,7 @@
   user-select: none;
 }
 
+._paForm input[type="radio"],
 .PaRadioInput {
   display: flex;
   flex-shrink: 0;
@@ -50,7 +51,8 @@
 
   &:disabled {
     cursor: not-allowed;
-    opacity: 0.5;
+    background: var(--color-bg-muted);
+    border-color: var(--color-border-light);
   }
 }
 

package/styles/Select.css

@@ -15,13 +15,12 @@
   position: relative;
 }
 
+._paForm select,
 .PaSelect {
-  width: 100%;
-  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
+  padding: var(--space-2) var(--space-3);
   font-family: inherit;
   font-size: var(--text-base);
   color: var(--color-text);
-  appearance: none;
   cursor: pointer;
   background-color: var(--color-bg);
   border: 1px solid var(--color-border);
@@ -39,12 +38,24 @@
   }
 
   &:disabled {
+    color: var(--color-text-muted);
     cursor: not-allowed;
-    background: var(--color-bg-subtle);
-    opacity: 0.7;
+    background: var(--color-bg-muted);
+    border-color: var(--color-border-light);
   }
 }
 
+/* Native select: show browser chevron */
+._paForm select {
+  appearance: menulist-button;
+}
+
+/* Component select: custom chevron icon, extra padding */
+.PaSelect {
+  padding-right: var(--space-8);
+  appearance: none;
+}
+
 .PaSelectField-icon {
   position: absolute;
   top: 50%;

package/styles/Spinner.css

@@ -3,8 +3,6 @@
    ======================================== */
 .PaSpinner {
   display: inline-block;
-  width: 24px;
-  height: 24px;
   border: 3px solid var(--color-primary-light);
   border-top-color: var(--color-primary);
   border-radius: 50%;
@@ -16,9 +14,15 @@
     border-width: 2px;
   }
 
+  &.medium {
+    width: 32px;
+    height: 32px;
+    border-width: 3px;
+  }
+
   &.large {
-    width: 44px;
-    height: 44px;
+    width: 50px;
+    height: 50px;
     border-width: 4px;
   }
 }