@paroicms/react-ui 0.5.2 → 0.5.4

package/styles/SplitButton.css

@@ -28,43 +28,148 @@
   height: 14px;
 }
 
-.PaSplitBtn.primary .PaSplitBtn-toggle {
+/* ========================================
+   Toggle Button Severity Variants (Filled)
+   ======================================== */
+
+.PaSplitBtn-toggle.primary {
   color: var(--color-text-inverse);
   background: var(--color-primary);
+
+  &:hover:not(:disabled) {
+    background: var(--color-primary-hover);
+  }
+
+  &:disabled {
+    color: var(--color-primary-disabled);
+    background: var(--color-primary-bg-disabled);
+  }
 }
 
-.PaSplitBtn.primary .PaSplitBtn-toggle:hover {
-  background: var(--color-primary-hover);
+.PaSplitBtn-toggle.danger {
+  color: var(--color-text-inverse);
+  background: var(--color-danger);
+
+  &:hover:not(:disabled) {
+    background: var(--color-danger-dark);
+  }
+
+  &:disabled {
+    color: var(--color-danger-disabled);
+    background: var(--color-danger-bg-disabled);
+  }
 }
 
-.PaSplitBtn.secondary .PaSplitBtn-main.PaBtn,
-.PaSplitBtn.secondary .PaSplitBtn-toggle {
+.PaSplitBtn-toggle.warning {
+  color: var(--color-yellow);
+  background: transparent;
+  border: 2px solid var(--color-yellow);
+  border-left: none;
+
+  &:hover:not(:disabled) {
+    background: var(--color-yellow-light);
+  }
+
+  &:disabled {
+    color: var(--color-warning-disabled);
+    border-color: var(--color-warning-disabled);
+  }
+}
+
+.PaSplitBtn-toggle.secondary {
   color: var(--color-text-muted);
   background: transparent;
   border: 1px solid var(--color-border);
+  border-left: 1px solid var(--color-border);
+
+  &:hover:not(:disabled) {
+    color: var(--color-text);
+    background: var(--color-bg-subtle);
+    border-color: var(--color-text-muted);
+  }
+
+  &:disabled {
+    color: var(--color-text-disabled);
+    background: var(--color-bg-disabled);
+    border-color: var(--color-border-disabled);
+  }
 }
 
-.PaSplitBtn.secondary .PaSplitBtn-main.PaBtn {
-  border-radius: var(--radius) 0 0 var(--radius);
+.PaSplitBtn-toggle.ghost {
+  color: var(--color-text-muted);
+  background: transparent;
+
+  &:hover:not(:disabled) {
+    color: var(--color-text);
+    background: var(--color-bg-subtle);
+  }
+
+  &:disabled {
+    color: var(--color-text-disabled);
+  }
 }
 
-.PaSplitBtn.secondary .PaSplitBtn-toggle {
-  border-left: 1px solid var(--color-border);
+/* ========================================
+   Toggle Button Severity Variants (Outlined)
+   ======================================== */
+
+.PaSplitBtn.outlined .PaSplitBtn-toggle.primary {
+  color: var(--color-primary);
+  background: transparent;
+  border: 1px solid var(--color-primary);
+  border-left: none;
+
+  &:hover:not(:disabled) {
+    background: var(--color-primary-light);
+  }
+
+  &:disabled {
+    color: var(--color-primary-disabled);
+    border-color: var(--color-primary-disabled);
+  }
 }
 
-.PaSplitBtn.secondary .PaSplitBtn-main.PaBtn:hover,
-.PaSplitBtn.secondary .PaSplitBtn-toggle:hover {
-  color: var(--color-text);
-  background: var(--color-bg-subtle);
-  border-color: var(--color-text-muted);
+.PaSplitBtn.outlined .PaSplitBtn-toggle.danger {
+  color: var(--color-danger);
+  background: transparent;
+  border: 1px solid var(--color-danger);
+  border-left: none;
+
+  &:hover:not(:disabled) {
+    background: var(--color-danger-light);
+  }
+
+  &:disabled {
+    color: var(--color-danger-disabled);
+    border-color: var(--color-danger-disabled);
+  }
 }
 
-/* Disabled state */
+.PaSplitBtn.outlined .PaSplitBtn-toggle.secondary {
+  color: var(--color-text-muted);
+  background: transparent;
+  border: 1px solid var(--color-border);
+  border-left: none;
+
+  &:hover:not(:disabled) {
+    color: var(--color-text);
+    background: var(--color-bg-subtle);
+    border-color: var(--color-text-muted);
+  }
+
+  &:disabled {
+    color: var(--color-text-disabled);
+    border-color: var(--color-border-disabled);
+  }
+}
+
+/* ========================================
+   Default Disabled State (fallback)
+   ======================================== */
+
 .PaSplitBtn-toggle:disabled {
   pointer-events: none;
   cursor: not-allowed;
-  opacity: 0.6;
-  filter: grayscale(40%);
 }
 
 .PaSplitBtn-menu {
@@ -90,7 +195,7 @@
   border-radius: var(--radius);
   transition: all var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: var(--color-primary);
     background: var(--color-primary-light);
   }
@@ -101,37 +206,24 @@
   height: 16px;
   color: var(--color-text-muted);
 
-  .PaSplitBtn-menuItem:hover & {
+  .PaSplitBtn-menuItem:hover:not(:disabled) & {
     color: var(--color-primary);
   }
 
-  .PaSplitBtn-menuItem.danger:hover & {
+  .PaSplitBtn-menuItem.danger:hover:not(:disabled) & {
     color: var(--color-danger);
   }
 }
 
 .PaSplitBtn-menuItem.danger {
-  &:hover {
+  &:hover:not(:disabled) {
     color: var(--color-danger);
     background: var(--color-danger-light);
   }
 }
 
-.PaSplitBtn-menuItem.disabled {
+.PaSplitBtn-menuItem:disabled {
   color: var(--color-text-muted);
   cursor: not-allowed;
-  opacity: 0.5;
-
-  &:hover {
-    color: var(--color-text-muted);
-    background: transparent;
-  }
-
-  & .PaSplitBtn-menuIcon {
-    color: var(--color-text-muted);
-  }
-
-  &:hover .PaSplitBtn-menuIcon {
-    color: var(--color-text-muted);
-  }
+  background: var(--color-bg-muted);
 }

package/styles/Tabs.css

@@ -31,7 +31,7 @@
   transition: all var(--transition);
 
   &:focus,
-  &:hover {
+  &:hover:not(:disabled):not(.disabled) {
     color: var(--color-text);
     background: var(--color-bg-subtle);
   }
@@ -41,6 +41,14 @@
     border-bottom-color: var(--color-primary);
   }
 
+  &:disabled,
+  &.disabled {
+    color: var(--color-text-disabled);
+    pointer-events: none;
+    cursor: not-allowed;
+    background: var(--color-bg-muted);
+  }
+
   /* Tab inside stretch variant */
   .PaTabs.stretch & {
     display: flex;
@@ -62,7 +70,7 @@
     border: none;
     border-radius: var(--radius);
 
-    &:hover {
+    &:hover:not(:disabled) {
       color: var(--color-text);
       background: var(--color-bg-subtle);
     }
@@ -76,7 +84,7 @@
       color: var(--color-text-light);
       border: 1px dashed var(--color-danger-light2);
 
-      &:hover {
+      &:hover:not(:disabled) {
         color: var(--color-primary);
         border-color: var(--color-primary);
       }

package/styles/Textarea.css

@@ -1,8 +1,8 @@
 /* ========================================
    Textarea Component
    ======================================== */
+._paForm textarea,
 .PaTextarea {
-  width: 100%;
   min-height: 120px;
   padding: var(--space-3);
   font-family: inherit;
@@ -32,9 +32,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/ToggleButton.css

@@ -10,27 +10,141 @@
   font-family: inherit;
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
-  color: var(--color-text-muted);
   cursor: pointer;
-  background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   transition: all var(--transition);
 
-  &:hover:not(.disabled) {
-    color: var(--color-text);
-    background: var(--color-bg-subtle);
-    border-color: var(--color-text-muted);
+  /* Primary severity (default) */
+  &.primary {
+    color: var(--color-text-muted);
+    background: var(--color-bg);
+
+    &:hover:not(:disabled) {
+      color: var(--color-text);
+      background: var(--color-bg-subtle);
+      border-color: var(--color-text-muted);
+    }
+
+    &.active {
+      color: var(--color-text-inverse);
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+    }
+  }
+
+  /* Secondary severity */
+  &.secondary {
+    color: var(--color-text-muted);
+    background: var(--color-bg);
+
+    &:hover:not(:disabled) {
+      color: var(--color-text);
+      background: var(--color-bg-subtle);
+      border-color: var(--color-text-muted);
+    }
+
+    &.active {
+      color: var(--color-text);
+      background: var(--color-bg-subtle);
+      border-color: var(--color-text-muted);
+    }
+  }
+
+  /* Warning severity */
+  &.warning {
+    color: var(--color-text-muted);
+    background: var(--color-bg);
+
+    &:hover:not(:disabled) {
+      color: var(--color-text);
+      background: var(--color-bg-subtle);
+      border-color: var(--color-text-muted);
+    }
+
+    &.active {
+      color: var(--color-yellow-dark);
+      background: var(--color-yellow-light);
+      border-color: var(--color-yellow);
+    }
+  }
+
+  /* Danger severity */
+  &.danger {
+    color: var(--color-text-muted);
+    background: var(--color-bg);
+
+    &:hover:not(:disabled) {
+      color: var(--color-text);
+      background: var(--color-bg-subtle);
+      border-color: var(--color-text-muted);
+    }
+
+    &.active {
+      color: var(--color-text-inverse);
+      background: var(--color-danger);
+      border-color: var(--color-danger);
+    }
   }
 
-  &.active {
-    color: var(--color-text-inverse);
-    background: var(--color-primary);
-    border-color: var(--color-primary);
+  /* Ghost severity */
+  &.ghost {
+    color: var(--color-text-muted);
+    background: transparent;
+    border-color: transparent;
+
+    &:hover:not(:disabled) {
+      color: var(--color-text);
+      background: var(--color-bg-subtle);
+      border-color: transparent;
+    }
+
+    &.active {
+      color: var(--color-text);
+      background: var(--color-bg-subtle);
+      border-color: transparent;
+    }
   }
 
-  &.disabled {
+  &:disabled {
+    color: var(--color-text-disabled);
+    pointer-events: none;
     cursor: not-allowed;
-    opacity: 0.5;
+    background: var(--color-bg-disabled);
+    border-color: var(--color-border-disabled);
+
+    &.primary.active {
+      color: var(--color-primary-disabled);
+      background: var(--color-primary-bg-disabled);
+      border-color: var(--color-primary-bg-disabled);
+    }
+
+    &.secondary.active {
+      color: var(--color-text-disabled);
+      background: var(--color-bg-disabled);
+      border-color: var(--color-border-disabled);
+    }
+
+    &.danger.active {
+      color: var(--color-danger-disabled);
+      background: var(--color-danger-bg-disabled);
+      border-color: var(--color-danger-bg-disabled);
+    }
+
+    &.warning.active {
+      color: var(--color-warning-disabled);
+      background: transparent;
+      border-color: var(--color-warning-disabled);
+    }
+
+    &.ghost {
+      background: transparent;
+      border-color: transparent;
+
+      &.active {
+        background: transparent;
+        border-color: transparent;
+      }
+    }
   }
 }

package/styles/ToggleGroup.css

@@ -8,9 +8,8 @@
   margin: 0;
   border: none;
 
-  &.disabled {
+  &:disabled {
     cursor: not-allowed;
-    opacity: 0.5;
   }
 }
 
@@ -37,7 +36,7 @@
     border-left: none;
   }
 
-  &:hover:not(.disabled):not(.active) {
+  &:hover:not(:disabled):not(.active) {
     color: var(--color-text);
     background: var(--color-primary-light);
     border-color: var(--color-primary-light);
@@ -49,7 +48,10 @@
     border-color: var(--color-primary);
   }
 
-  &.disabled {
+  &:disabled {
+    color: var(--color-text-disabled);
     cursor: not-allowed;
+    background: var(--color-bg-disabled);
+    border-color: var(--color-border-disabled);
   }
 }

package/styles/Tree.css

@@ -50,9 +50,15 @@
   border: none;
   transition: color var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: var(--color-text);
   }
+
+  &:disabled {
+    color: var(--color-text-light);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 }
 
 .PaTree-togglePlaceholder {

package/styles/theme/common.css

@@ -142,6 +142,10 @@
   overflow-y: auto;
 }
 
+._mobile .PaSidebar-nav {
+  padding: 0 0 var(--space-2);
+}
+
 .PaSidebar-footer {
   flex-shrink: 0;
   padding-top: var(--space-3);
@@ -324,10 +328,6 @@
   align-items: center;
   height: 100%;
   padding: 0 var(--space-6);
-
-  &.alignBottom {
-    align-items: flex-end;
-  }
 }
 
 .PaNavbar-item.withBorder,

package/styles/theme/tokens.css

@@ -50,8 +50,21 @@
   --color-text: #1e293b;
   --color-text-light: #64748b;
   --color-text-muted: #475569;
+  --color-text-disabled: #868b92;
   --color-text-inverse: #ffffff;
 
+  /* Disabled state colors */
+  --color-bg-disabled: #e8eaed;
+  --color-border-disabled: #c8ccd2;
+
+  /* Semantic disabled colors (desaturated variants) */
+  --color-primary-disabled: #7da8a4;
+  --color-primary-bg-disabled: #e0eeec;
+  --color-danger-disabled: #c9929d;
+  --color-danger-bg-disabled: #f5e4e7;
+  --color-warning-disabled: #c9a96b;
+  --color-warning-bg-disabled: #f9f3e3;
+
   /* ========================================
      Background Colors
      Warm sunny palette - like morning light
@@ -72,7 +85,7 @@
   --color-bg-sidebar-hover: #334155;
   --color-text-sidebar: #e2e8f0;
   --color-text-sidebar-muted: #94a3b8;
-  --color-bg-muted: #fafafa;
+  --color-bg-muted: #eee;
 
   /* Sidebar hover colors - light green tints */
   --color-hover-sidebar-dark: #40a59d;

package/dist/Switch.d.ts

@@ -1,9 +0,0 @@
-import type { ChangeEvent, InputHTMLAttributes } from "react";
-import "../styles/Switch.css";
-export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
-    checked: boolean;
-    onChange?: (checked: boolean, ev: ChangeEvent<HTMLInputElement>) => void;
-    label?: string;
-    className?: string;
-}
-export declare function Switch({ checked, onChange, label, className, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Switch.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import "../styles/Switch.css";
-export function Switch({ checked, onChange, label, className, ...rest }) {
-    const handleChange = (e) => {
-        onChange?.(e.target.checked, e);
-    };
-    if (label) {
-        return (_jsxs("label", { className: clsx("PaSwitch", className), children: [_jsx("input", { className: "PaSwitch-input", type: "checkbox", checked: checked, onChange: handleChange, ...rest }), _jsx("span", { className: "PaSwitch-track", children: _jsx("span", { className: "PaSwitch-thumb" }) }), _jsx("span", { className: "PaSwitch-label", children: label })] }));
-    }
-    return (_jsxs("span", { className: clsx("PaSwitch", className), children: [_jsx("input", { className: "PaSwitch-input", type: "checkbox", checked: checked, onChange: handleChange, ...rest }), _jsx("span", { className: "PaSwitch-track", children: _jsx("span", { className: "PaSwitch-thumb" }) })] }));
-}