@harjs/react-ui 1.1.9 → 1.1.11

package/dist/assets/css/components/form/checkbox/css.cjs

@@ -18,17 +18,17 @@ const radiusTemplate = fs.readFileSync("templates/radius.template.css", "utf-8")
 const sizeTemplate = fs.readFileSync("templates/size.template.css", "utf-8");
 
 // Checkbox
-let colorUncheckedOutput = `.har-checkbox-wrapper {> label {> input[type="checkbox"] {+ span {> .har-checkbox {${colors.map((color) => colorUncheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}}}}`;
-let colorCheckedOutput = `.har-checkbox-wrapper {> label {> input[type="checkbox"] {&:checked {+ span {> .har-checkbox {${colors.map((color) => colorCheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}}}}}`;
+let colorUncheckedOutput = `.har-checkbox {${colors.map((color) => colorUncheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}`;
+let colorCheckedOutput = `input[type="checkbox"] {&:checked {+ span {> .har-checkbox {${colors.map((color) => colorCheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}}}`;
 // Radio
-let colorRadioUncheckedOutput = `.har-checkbox-wrapper {> label {> input[type="radio"] {+ span {> .har-checkbox {${colors.map((color) => colorRadioUncheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}}}}`;
-let colorRadioCheckedOutput = `.har-checkbox-wrapper {> label {> input[type="radio"] {&:checked {+ span {> .har-checkbox {${colors.map((color) => colorRadioCheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}}}}}`;
+let colorRadioUncheckedOutput = `.har-checkbox {${colors.map((color) => colorRadioUncheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}`;
+let colorRadioCheckedOutput = `input[type="radio"] {&:checked {+ span {> .har-checkbox {${colors.map((color) => colorRadioCheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}}}`;
 // ---
 let radiusOutput = `.har-checkbox {${radiuses.map((radius) => radiusTemplate.replace(/__RADIUS__/g, radius)).join("\n")}}`;
 let sizeOutput = `.har-checkbox {${sizes
   .map((size) =>
     sizeTemplate
-      .replace(/__SIZE__/g, size.name)
+      .replace(/__SIZE__/g, `size-${size.name}`)
       .replace(/__SIZE_NUMBER__/g, size["w/h"])
       .replace(/__FONT_SIZE__/g, size.fontSize),
   )

package/dist/assets/css/components/form/checkbox/size.css

@@ -1,5 +1,5 @@
 .har-checkbox {
-  &.xs {
+  &.size-xs {
     width: 1rem;
     height: 1rem;
 
@@ -8,7 +8,7 @@
     }
   }
 
-  &.sm {
+  &.size-sm {
     width: 1.25rem;
     height: 1.25rem;
 
@@ -17,7 +17,7 @@
     }
   }
 
-  &.md {
+  &.size-md {
     width: 1.5rem;
     height: 1.5rem;
 

package/dist/assets/css/components/form/input/addon.css

@@ -17,20 +17,22 @@
         position: relative;
         background-color: transparent;
         padding: 0 !important;
-        margin-inline: -1px;
+        /* margin-inline: -1px; */
         z-index: 10;
       }
 
       + .addon-before {
         border-radius: var(--radius-0) !important;
 
-        &::before {
-          position: absolute;
-          left: 0;
-          content: "";
-          background-color: rgba(0, 0, 0, 0.1);
-          width: 1px;
-          height: 65%;
+        &:not(:has(input, select, button, textarea)) {
+          &::before {
+            position: absolute;
+            left: 0;
+            content: "";
+            background-color: rgba(0, 0, 0, 0.1);
+            width: 1px;
+            height: 65%;
+          }
         }
       }
 
@@ -39,13 +41,15 @@
       }
 
       + .addon-after {
-        &::before {
-          position: absolute;
-          left: 0;
-          content: "";
-          background-color: rgba(0, 0, 0, 0.1);
-          width: 1px;
-          height: 65%;
+        &:not(:has(input, select, button, textarea)) {
+          &::before {
+            position: absolute;
+            left: 0;
+            content: "";
+            background-color: rgba(0, 0, 0, 0.1);
+            width: 1px;
+            height: 65%;
+          }
         }
       }
     }

package/dist/assets/css/components/form/input/color.addon.css

@@ -0,0 +1,511 @@
+.har-input-wrapper {
+  &.blue {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--blue-100);
+          border: var(--stroke-1) solid var(--blue-300);
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--blue-100);
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--blue-300);
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--blue-300);
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+      }
+    }
+  }
+
+  &.purple {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--purple-100);
+          border: var(--stroke-1) solid var(--purple-300);
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--purple-100);
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--purple-300);
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--purple-300);
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+      }
+    }
+  }
+
+  &.pink {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--pink-100);
+          border: var(--stroke-1) solid var(--pink-300);
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--pink-100);
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--pink-300);
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--pink-300);
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+      }
+    }
+  }
+
+  &.red {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--red-100);
+          border: var(--stroke-1) solid var(--red-300);
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--red-100);
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--red-300);
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--red-300);
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+      }
+    }
+  }
+
+  &.orange {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--orange-100);
+          border: var(--stroke-1) solid var(--orange-300);
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--orange-100);
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--orange-300);
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--orange-300);
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+      }
+    }
+  }
+
+  &.yellow {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--yellow-100);
+          border: var(--stroke-1) solid var(--yellow-300);
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--yellow-100);
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--yellow-300);
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--yellow-300);
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+      }
+    }
+  }
+
+  &.green {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--green-100);
+          border: var(--stroke-1) solid var(--green-300);
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--green-100);
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--green-300);
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--green-300);
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+      }
+    }
+  }
+
+  &.teal {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--teal-100);
+          border: var(--stroke-1) solid var(--teal-300);
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--teal-100);
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--teal-300);
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--teal-300);
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+      }
+    }
+  }
+
+  &.cyan {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--cyan-100);
+          border: var(--stroke-1) solid var(--cyan-300);
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--cyan-100);
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--cyan-300);
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--cyan-300);
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+      }
+    }
+  }
+
+  &.gray {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--gray-100);
+          border: var(--stroke-1) solid var(--gray-300);
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--gray-100);
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--gray-300);
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--gray-300);
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+      }
+    }
+  }
+}