@paroicms/react-ui 0.5.0 → 0.5.2

package/styles/InputText.css

@@ -1,33 +1,17 @@
 /* ========================================
    InputText Component
    ======================================== */
-.PaInputText {
+.PaTextField {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 
-  &.error .PaInputText-field {
+  &.error .PaTextInput {
     border-color: var(--color-danger);
   }
-
-  &.fullWidth {
-    width: 100%;
-  }
-}
-
-.PaInputText-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaInputText-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
 }
 
-.PaInputText-field {
+.PaTextInput {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   font-family: inherit;
@@ -41,7 +25,7 @@
     border-color var(--transition),
     box-shadow var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -50,43 +34,44 @@
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
   }
-}
 
-.PaInputText-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--color-bg-subtle);
+    opacity: 0.7;
+  }
 }
 
-.PaInputText-row {
+.PaTextField-row {
   display: flex;
   gap: var(--space-1);
 
-  .PaInputText-field {
+  .PaTextInput {
     flex: 1;
     min-width: 0;
   }
 }
 
-.PaInputText-iconWrapper {
+.PaTextField-iconWrapper {
   position: relative;
   display: flex;
 
-  .PaInputText-field {
+  .PaTextInput {
     padding-left: var(--space-10);
   }
 
-  &.iconRight .PaInputText-icon {
+  &.iconRight .PaTextField-icon {
     right: var(--space-3);
     left: auto;
   }
 
-  &.iconRight .PaInputText-field {
+  &.iconRight .PaTextInput {
     padding-right: var(--space-10);
     padding-left: var(--space-3);
   }
 }
 
-.PaInputText-icon {
+.PaTextField-icon {
   position: absolute;
   top: 50%;
   left: var(--space-3);

package/styles/MultiSelect.css

@@ -45,7 +45,7 @@
     border-color: var(--color-primary);
   }
 
-  &.open {
+  &:has(+ .PaMultiSelect-dropdown:popover-open) {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
   }
@@ -77,7 +77,11 @@
 .PaMultiSelect-chipRemove {
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
   padding: 0;
+  margin: calc(-1 * var(--space-1));
   color: var(--color-text-muted);
   cursor: pointer;
   background: transparent;
@@ -96,12 +100,11 @@
 
 .PaMultiSelect-dropdown {
   position: absolute;
-  top: calc(100% + var(--space-1));
-  right: 0;
-  left: 0;
-  z-index: var(--z-dropdown);
+  inset: auto;
+  z-index: var(--z-popover);
   max-height: 250px;
   padding: var(--space-2);
+  margin: 0;
   overflow-y: auto;
   background: var(--color-bg-elevated);
   border: 1px solid var(--color-border);
@@ -134,24 +137,6 @@
   }
 }
 
-.PaMultiSelect-checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  font-size: var(--text-xs);
-  color: var(--color-primary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-
-  .PaMultiSelect-option.selected & {
-    color: var(--color-text-inverse);
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-  }
-}
-
 .PaMultiSelect-error {
   font-size: var(--text-xs);
   color: var(--color-danger);

package/styles/PasswordInput.css

@@ -7,18 +7,6 @@
   gap: var(--space-2);
 }
 
-.PaPasswordInput-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaPasswordInput-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
-}
-
 .PaPasswordInput-inputWrapper {
   position: relative;
   display: flex;
@@ -43,7 +31,7 @@
     border-color var(--transition),
     box-shadow var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -52,6 +40,12 @@
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--color-bg-subtle);
+    opacity: 0.7;
+  }
 }
 
 .PaPasswordInput-toggle {
@@ -73,8 +67,3 @@
     color: var(--color-text);
   }
 }
-
-.PaPasswordInput-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
-}

package/styles/RadioButton.css

@@ -9,7 +9,7 @@
   user-select: none;
 }
 
-.PaRadioButton-input {
+.PaRadioInput {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -24,7 +24,7 @@
   border-radius: var(--radius-full);
   transition: all var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -54,7 +54,8 @@
   }
 }
 
-.PaRadioButton-label {
-  font-size: var(--text-sm);
-  color: var(--color-text);
+.PaRadioGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
 }

package/styles/Select.css

@@ -1,37 +1,21 @@
 /* ========================================
    Select Component
    ======================================== */
-.PaSelect {
+.PaSelectField {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 
-  &.error .PaSelect-field {
+  &.error .PaSelect {
     border-color: var(--color-danger);
   }
-
-  &.fullWidth {
-    width: 100%;
-  }
-}
-
-.PaSelect-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
 }
 
-.PaSelect-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
-}
-
-.PaSelect-fieldWrapper {
+.PaSelectField-wrapper {
   position: relative;
 }
 
-.PaSelect-field {
+.PaSelect {
   width: 100%;
   padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
   font-family: inherit;
@@ -44,7 +28,7 @@
   border-radius: var(--radius);
   transition: border-color var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -53,9 +37,15 @@
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--color-bg-subtle);
+    opacity: 0.7;
+  }
 }
 
-.PaSelect-icon {
+.PaSelectField-icon {
   position: absolute;
   top: 50%;
   right: var(--space-3);
@@ -65,8 +55,3 @@
   pointer-events: none;
   transform: translateY(-50%);
 }
-
-.PaSelect-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
-}

package/styles/SplitButton.css

@@ -68,21 +68,15 @@
 }
 
 .PaSplitBtn-menu {
-  position: absolute;
-  top: calc(100% + var(--space-1));
-  right: 0;
+  inset: auto;
   z-index: var(--z-dropdown);
-  display: none;
   min-width: 180px;
   padding: var(--space-2);
+  margin: 0;
   background: var(--color-bg-elevated);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-md);
-
-  .PaSplitBtn.open & {
-    display: block;
-  }
 }
 
 .PaSplitBtn-menuItem {

package/styles/Textarea.css

@@ -2,24 +2,6 @@
    Textarea Component
    ======================================== */
 .PaTextarea {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaTextarea-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaTextarea-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
-}
-
-.PaTextarea-field {
   width: 100%;
   min-height: 120px;
   padding: var(--space-3);
@@ -39,7 +21,7 @@
     color: var(--color-text-light);
   }
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -59,8 +41,3 @@
     border-color: var(--color-danger);
   }
 }
-
-.PaTextarea-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
-}

package/styles/Tooltip.css

@@ -6,29 +6,15 @@
 }
 
 .PaTooltip {
-  position: fixed;
-  z-index: var(--z-tooltip);
+  inset: auto;
+  z-index: var(--z-popover);
   max-width: 200px;
   padding: var(--space-2) var(--space-3);
+  margin: 0;
   font-size: var(--text-xs);
   color: var(--color-text-inverse);
   pointer-events: none;
   background: var(--color-text);
+  border: none;
   border-radius: var(--radius);
-
-  &.top {
-    transform: translate(-50%, -100%);
-  }
-
-  &.bottom {
-    transform: translateX(-50%);
-  }
-
-  &.left {
-    transform: translate(-100%, -50%);
-  }
-
-  &.right {
-    transform: translateY(-50%);
-  }
 }

package/styles/Tree.css

@@ -16,6 +16,7 @@
 }
 
 .PaTree-node {
+  position: relative;
   padding: var(--space-1) 0;
   list-style: none;
 }
@@ -141,7 +142,7 @@
 .PaTree-children .PaTree-node::before {
   position: absolute;
   top: 0;
-  left: calc(-1 * var(--space-3));
+  left: calc(var(--space-2) + 11px - var(--space-6));
   height: 100%;
   content: "";
   border-left: 1.5px solid var(--color-border);
@@ -150,8 +151,8 @@
 .PaTree-children .PaTree-node::after {
   position: absolute;
   top: 1rem;
-  left: calc(-1 * var(--space-3));
-  width: var(--space-2);
+  left: calc(var(--space-2) + 11px - var(--space-6));
+  width: calc(var(--space-6));
   content: "";
   border-top: 1.5px solid var(--color-border);
 }

package/styles/theme/field.css

@@ -0,0 +1,29 @@
+/* ========================================
+   PaField - Form Field Layout Block
+   ======================================== */
+.PaField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+
+  &:not(:last-child) {
+    margin-bottom: var(--space-4);
+  }
+}
+
+.PaField-label {
+  display: block;
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+/* ========================================
+   PaFieldError - Field Error Message Block
+   ======================================== */
+.PaFieldError {
+  font-size: var(--text-xs);
+  color: var(--color-danger);
+}

package/styles/theme/index.css

@@ -13,3 +13,4 @@
 @import "./base.css" layer(base);
 @import "./common.css" layer(common);
 @import "./margins.css";
+@import "./field.css";