@harjs/react-ui 1.1.9 → 1.1.11

package/dist/assets/css/components/form/select/options.css

@@ -1,4 +1,4 @@
-.ar-select-options {
+.har-select-options {
   visibility: hidden;
   opacity: 0;
   position: absolute;
@@ -13,108 +13,129 @@
     visibility 250ms,
     opacity 250ms,
     transform 250ms ease-in-out;
-}
-.ar-select-options.top {
-  box-shadow: 0 5px 15px -2.5px var(--black-10);
-}
-.ar-select-options.bottom {
-  box-shadow: 0 -5px 15px -2.5px var(--black-10);
-}
 
-.ar-select-options > .search-field {
-  padding: 0.5rem;
-  border-bottom: solid 1px var(--gray-200);
-}
+  &.top {
+    box-shadow: 0 5px 15px -2.5px var(--black-10);
+  }
 
-.ar-select-options > ul {
-  width: 100%;
-  max-height: calc(var(--input-height) * 5);
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.ar-select-options > ul > li {
-  display: flex;
-  align-items: center;
-  gap: 0 0.5rem;
-  padding: 0 1rem;
-  height: var(--input-height);
-  cursor: pointer;
-}
-.ar-select-options > ul > li:hover {
-  background-color: var(--gray-200);
-}
-.ar-select-options > ul > li.selectedItem {
-  /* background-color: rgba(var(--success-rgb), 0.1); */
-}
-.ar-select-options > ul > li.navigate-with-arrow-keys {
-  background-color: var(--gray-100);
-}
+  &.bottom {
+    box-shadow: 0 -5px 15px -2.5px var(--black-10);
+  }
 
-.ar-select-options > .no-options-field,
-.ar-select-options > ul > li > .no-options-field {
-  width: 100%;
-  padding: 0.5rem 1rem;
-}
-.ar-select-options > ul > li > .no-options-field {
-  padding: 0 !important;
-}
-.ar-select-options > .no-options-field > .text,
-.ar-select-options > ul > li > .no-options-field > .text {
-  color: var(--gray-500);
-}
-.ar-select-options > .no-options-field > .add-item,
-.ar-select-options > ul > li > .no-options-field > .add-item {
-  display: flex;
-  align-items: center;
-  position: relative;
-  background-color: rgba(var(--primary-rgb), 0.05);
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--radius-4);
-  border-left: solid 2px var(--primary);
-  color: var(--primary);
-  cursor: pointer;
-}
-.ar-select-options > .no-options-field > .add-item::before,
-.ar-select-options > ul > li > .no-options-field > .add-item::before {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 0;
-  content: "";
-  border: solid 5px transparent;
-  border-left-color: var(--primary);
-}
-.ar-select-options > .no-options-field > .add-item > .plus,
-.ar-select-options > ul > li > .no-options-field > .add-item > .plus {
-  display: inline-block;
-  position: relative;
-  background-color: var(--primary);
-  min-width: 1rem;
-  height: 1rem;
-  margin-right: 0.25rem;
-  border-radius: var(--radius-full);
-  color: var(--white-100);
-  text-align: center;
-  line-height: 1rem;
-}
+  > .search-field {
+    padding: 0.5rem;
+    border-bottom: solid 1px var(--gray-200);
+  }
 
-/* .ar-select-options:is(.opened) {
-  visibility: visible;
-  opacity: 1;
-  transform: scaleY(1);
-}
-.ar-select-options:is(.closed) {
-  visibility: hidden;
-  opacity: 0;
-  transform: scaleY(0.8);
-  height: 0;
-}
+  > .no-options-field {
+    width: 100%;
+    padding: 0.5rem 1rem;
+
+    > .text {
+      color: var(--gray-500);
+    }
+
+    > .add-item {
+      display: flex;
+      align-items: center;
+      position: relative;
+      background-color: rgba(var(--primary-rgb), 0.05);
+      padding: 0.25rem 0.5rem;
+      border-radius: var(--radius-4);
+      border-left: solid 2px var(--primary);
+      color: var(--primary);
+      cursor: pointer;
+
+      &::before {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        content: "";
+        border: solid 5px transparent;
+        border-left-color: var(--primary);
+      }
+
+      > .plus {
+        display: inline-block;
+        position: relative;
+        background-color: var(--primary);
+        min-width: 1rem;
+        height: 1rem;
+        margin-right: 0.25rem;
+        border-radius: var(--radius-full);
+        color: var(--white-100);
+        text-align: center;
+        line-height: 1rem;
+      }
+    }
+  }
+
+  > ul {
+    width: 100%;
+    max-height: calc(var(--input-height) * 5);
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    > li {
+      display: flex;
+      align-items: center;
+      gap: 0 0.5rem;
+      padding: 0 1rem;
+      height: var(--input-height);
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--gray-200);
+      }
+
+      &.navigate-with-arrow-keys {
+        background-color: var(--gray-100);
+      }
+
+      > .no-options-field {
+        width: 100%;
+        padding: 0;
+
+        > .text {
+          color: var(--gray-500);
+        }
+
+        > .add-item {
+          display: flex;
+          align-items: center;
+          position: relative;
+          background-color: rgba(var(--primary-rgb), 0.05);
+          padding: 0.25rem 0.5rem;
+          border-radius: var(--radius-4);
+          border-left: solid 2px var(--primary);
+          color: var(--primary);
+          cursor: pointer;
+
+          &::before {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            left: 0;
+            content: "";
+            border: solid 5px transparent;
+            border-left-color: var(--primary);
+          }
 
-.ar-select-options.top:is(.opened, .closed),
-.ar-select-options.top:is(.opened, .closed) {
-  transform-origin: top;
+          > .plus {
+            display: inline-block;
+            position: relative;
+            background-color: var(--primary);
+            min-width: 1rem;
+            height: 1rem;
+            margin-right: 0.25rem;
+            border-radius: var(--radius-full);
+            color: var(--white-100);
+            text-align: center;
+            line-height: 1rem;
+          }
+        }
+      }
+    }
+  }
 }
-.ar-select-options.bottom:is(.opened, .closed),
-.ar-select-options.bottom:is(.opened, .closed) {
-  transform-origin: bottom;
-} */

package/dist/assets/css/components/form/select/radius.css

@@ -0,0 +1,45 @@
+.har-select {
+  > .wrapper {
+    > .selections {
+      &.radius-0 {
+        border-radius: var(--radius-0);
+      }
+
+      &.radius-2 {
+        border-radius: var(--radius-2);
+      }
+
+      &.radius-4 {
+        border-radius: var(--radius-4);
+      }
+
+      &.radius-6 {
+        border-radius: var(--radius-6);
+      }
+
+      &.radius-8 {
+        border-radius: var(--radius-8);
+      }
+
+      &.radius-12 {
+        border-radius: var(--radius-12);
+      }
+
+      &.radius-16 {
+        border-radius: var(--radius-16);
+      }
+
+      &.radius-20 {
+        border-radius: var(--radius-20);
+      }
+
+      &.radius-40 {
+        border-radius: var(--radius-40);
+      }
+
+      &.radius-full {
+        border-radius: var(--radius-full);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+.har-select {
+  > .wrapper {
+    > .selections {
+      &.size-xs {
+        min-height: 2rem !important;
+        font-size: 0.75rem;
+      }
+
+      &.size-sm {
+        min-height: 2.25rem !important;
+        font-size: 0.875rem;
+      }
+
+      &.size-md {
+        min-height: 2.5rem !important;
+        font-size: 0.875rem;
+      }
+
+      &.size-lg {
+        min-height: 2.75rem !important;
+        font-size: 1rem;
+      }
+
+      &.size-xl {
+        min-height: 3rem !important;
+        font-size: 1rem;
+      }
+
+      &.size-2xl {
+        min-height: 3.25rem !important;
+        font-size: 1.25rem;
+      }
+    }
+  }
+}

package/dist/assets/css/components/form/select/styles.css

@@ -1,11 +1,14 @@
+@import url("./color.css");
 @import url("./options.css");
+@import url("./radius.css");
+@import url("./size.css");
 
-.ar-select-wrapper {
+.har-select-wrapper {
   position: relative;
   width: 100%;
   user-select: none;
 
-  > .ar-select {
+  > .har-select {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
@@ -77,11 +80,11 @@
       }
     }
 
-    > .ar-input-wrapper {
+    > .har-input-wrapper {
       white-space: nowrap;
       text-overflow: ellipsis;
 
-      > .ar-input {
+      > .har-input {
         white-space: nowrap;
         text-overflow: ellipsis;
 
@@ -148,7 +151,6 @@
         top: calc(var(--input-height) / 2);
         transform: translateY(-50%);
         right: 2rem;
-        background-color: var(--black-30);
         backdrop-filter: blur(5px);
         width: 1rem;
         height: 1rem;
@@ -169,7 +171,7 @@
 
         &::before {
           content: "x";
-          color: var(--white-100);
+          color: var(--red-500);
           font-size: 0.75rem;
         }
       }

package/dist/assets/css/components/form/select/templates/color.template.css

@@ -0,0 +1,62 @@
+&.__COLOR__ {
+  &.filled {
+    background-color: var(--__COLOR__-100);
+    border: var(--stroke-1) solid var(--__COLOR__-300);
+
+    &:focus {
+      border: var(--stroke-1) solid var(--__COLOR__-500);
+    }
+
+    &::placeholder {
+      color: var(--__COLOR__-400);
+    }
+  }
+
+  &.surface-borderless {
+    background-color: var(--__COLOR__-100);
+
+    &:focus {
+      background-color: transparent;
+      box-shadow: 0 0 0 2.5px var(--__COLOR__-200);
+    }
+
+    &::placeholder {
+      color: var(--__COLOR__-400);
+    }
+  }
+
+  &.outlined {
+    background-color: transparent;
+    border: var(--stroke-1) solid var(--__COLOR__-300);
+
+    &:focus {
+      box-shadow: 0 0 0 2.5px var(--__COLOR__-200);
+    }
+
+    &::placeholder {
+      color: var(--__COLOR__-400);
+    }
+  }
+
+  &.dashed {
+    background-color: transparent;
+    border: var(--stroke-1) dashed var(--__COLOR__-300);
+
+    &:focus {
+      box-shadow: 0 0 0 2.5px var(--__COLOR__-200);
+    }
+
+    &::placeholder {
+      color: var(--__COLOR__-400);
+    }
+  }
+
+  &.borderless {
+    background-color: transparent;
+    border: var(--stroke-1) solid transparent;
+
+    &::placeholder {
+      color: var(--__COLOR__-400);
+    }
+  }
+}

package/dist/assets/css/components/form/select/templates/radius.template.css

@@ -0,0 +1,3 @@
+&.radius-__RADIUS__ {
+  border-radius: var(--radius-__RADIUS__);
+}

package/dist/assets/css/components/form/select/templates/size.template.css

@@ -0,0 +1,4 @@
+&.__SIZE__ {
+  min-height: __SIZE_NUMBER__ !important;
+  font-size: __FONT_SIZE__;
+}