@harjs/react-ui 1.0.0

package/dist/assets/css/components/form/input/core/button.css

@@ -0,0 +1,34 @@
+/* #region Border Radius -> SM */
+.ar-input-wrapper > .ar-button.border-radius-sm {
+  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
+}
+/* #endregion */
+/* Border Radius -> SM */
+
+/* #region Border Radius -> LG */
+.ar-input-wrapper > .ar-button.border-radius-lg {
+  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+}
+/* #endregion */
+/* Border Radius -> LG */
+
+/* #region Border Radius -> XL */
+.ar-input-wrapper > .ar-button.border-radius-xl {
+  border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0;
+}
+/* #endregion */
+/* Border Radius -> XL */
+
+/* #region Border Radius -> XXL */
+.ar-input-wrapper > .ar-button.border-radius-xxl {
+  border-radius: 0 var(--border-radius-xxl) var(--border-radius-xxl) 0;
+}
+/* #endregion */
+/* Border Radius -> XXL */
+
+/* #region Border Radius -> PILL */
+.ar-input-wrapper > .ar-button.border-radius-pill {
+  border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0;
+}
+/* #endregion */
+/* Border Radius -> PILL */

package/dist/assets/css/components/form/input/core/icon.css

@@ -0,0 +1,22 @@
+.ar-input-wrapper > .ar-input:is(.icon) > .icon-element {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+}
+.ar-input-wrapper > .ar-input:is(.icon.icon-start) > .icon-element {
+  left: 0.5rem;
+}
+.ar-input-wrapper > .ar-input:is(.icon.icon-end) > .icon-element {
+  right: 0.5rem;
+}
+.ar-input-wrapper > .ar-input:is(.icon.icon-start) > input {
+  padding-left: 2rem;
+}
+.ar-input-wrapper > .ar-input:is(.icon.icon-end) > input {
+  padding-right: 2rem;
+}

package/dist/assets/css/components/form/input/otp/styles.css

@@ -0,0 +1,20 @@
+.ar-input-otp-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  > span {
+    > .ar-input-wrapper {
+      > .ar-input {
+        > .input {
+          > input {
+            text-align: center !important;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/assets/css/components/form/input/phone/styles.css

@@ -0,0 +1,50 @@
+.ar-input-phone-wrapper {
+  display: flex;
+  flex-direction: row;
+
+  > .ar-select-wrapper {
+    flex: 0 0 20%;
+
+    > .ar-select {
+      > .ar-input-wrapper {
+        > .ar-input {
+          > .input {
+            > input {
+              border-right: none;
+              border-radius: 0;
+              border-top-left-radius: var(--border-radius-sm);
+              border-bottom-left-radius: var(--border-radius-sm);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  > .ar-input-wrapper {
+    flex: 1;
+
+    > .ar-input {
+      > .input {
+        > input {
+          border-radius: 0;
+          border-top-right-radius: var(--border-radius-sm);
+          border-bottom-right-radius: var(--border-radius-sm);
+        }
+      }
+    }
+  }
+
+  /* @media (max-width: 600px) {
+    flex-direction: column;
+
+    .ar-select-wrapper,
+    .ar-input-wrapper {
+      flex: 1 1 100%;
+
+      .ar-input .input input {
+        border-radius: var(--border-radius-sm);
+      }
+    }
+  } */
+}

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

@@ -0,0 +1,120 @@
+/* PHONE */
+@import url("./phone/styles.css");
+/* OTP */
+@import url("./otp/styles.css");
+
+/* Core Css */
+@import url("./core/icon.css");
+@import url("./core/border.css");
+@import url("./core/button.css");
+@import url("./core/addon.css");
+
+.ar-input-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  > .ar-input {
+    position: relative;
+    width: 100%;
+
+    > label {
+      visibility: hidden;
+      opacity: 0;
+      position: absolute;
+      top: 0.5rem;
+      left: 0.55rem;
+      color: var(--gray-600);
+      letter-spacing: 1px;
+      transition: top 250ms ease-in-out;
+      z-index: 1;
+
+      &.visible {
+        visibility: visible;
+        opacity: 1;
+        top: -0.5rem;
+        left: 0.55rem;
+        padding: 0 0.5rem;
+        font-size: 0.75rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+      }
+    }
+
+    > .input {
+      position: relative;
+      user-select: none;
+      transition: box-shadow 250ms ease-in-out;
+
+      &:hover {
+        > .handle-number-button {
+          visibility: visible;
+          opacity: 1;
+          width: 1rem;
+        }
+      }
+
+      > input {
+        background-color: transparent;
+        width: 100%;
+        height: var(--input-height);
+        padding: 0 0.5rem;
+        font-family: var(--system);
+        font-size: 1rem;
+        outline: none;
+        box-sizing: border-box;
+        transition:
+          background 250ms,
+          border 250ms,
+          box-shadow 250ms ease-in-out;
+      }
+
+      .handle-number-button {
+        visibility: hidden;
+        opacity: 0;
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        background-color: var(--gray-200);
+        width: 0rem;
+        height: calc(100% - 2px);
+        border-left: solid 1px var(--gray-300);
+        border-top-right-radius: 0.18rem;
+        border-bottom-right-radius: 0.18rem;
+        overflow: hidden;
+        transition: width 250ms ease-in-out;
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          background-color: var(--gray-300);
+          width: 100%;
+          height: 1px;
+        }
+
+        > span {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          height: 50%;
+          cursor: pointer;
+        }
+      }
+    }
+
+    > .validation {
+      color: var(--danger);
+      font-size: 0.8rem;
+      font-weight: 400;
+    }
+  }
+}

package/dist/assets/css/components/form/radio/core/border.css

@@ -0,0 +1,252 @@
+/* #region Border Color -> BLUE */
+.ar-radio-wrapper {
+  > label {
+    > input[type="radio"] {
+      &:checked {
+        + span {
+          > .ar-radio.filled.blue::before {
+            border-right-color: var(--white);
+            border-bottom-color: var(--white);
+          }
+
+          > .ar-radio.filled.blue {
+            background-color: var(--blue-500);
+            box-shadow: 0 0 0 3.5px var(--blue-100);
+          }
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> BLUE */
+
+/* #region Border Color -> PURPLE */
+.ar-radio-wrapper {
+  > label {
+    > input[type="radio"] {
+      &:checked {
+        + span {
+          > .ar-radio.filled.purple::before {
+            border-right-color: var(--white);
+            border-bottom-color: var(--white);
+          }
+
+          > .ar-radio.filled.purple {
+            background-color: var(--purple-500);
+            box-shadow: 0 0 0 3.5px var(--purple-100);
+          }
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> PURPLE */
+
+/* #region Border Color -> PINK */
+.ar-radio-wrapper {
+  > label {
+    > input[type="radio"] {
+      &:checked {
+        + span {
+          > .ar-radio.filled.pink::before {
+            border-right-color: var(--white);
+            border-bottom-color: var(--white);
+          }
+
+          > .ar-radio.filled.pink {
+            background-color: var(--pink-500);
+            box-shadow: 0 0 0 3.5px var(--pink-100);
+          }
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> PINK */
+
+/* #region Border Color -> RED */
+.ar-radio-wrapper {
+  > label {
+    > input[type="radio"] {
+      &:checked {
+        + span {
+          > .ar-radio.filled.red::before {
+            border-right-color: var(--white);
+            border-bottom-color: var(--white);
+          }
+
+          > .ar-radio.filled.red {
+            background-color: var(--red-500);
+            box-shadow: 0 0 0 3.5px var(--red-100);
+          }
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> RED */
+
+/* #region Border Color -> ORANGE */
+.ar-radio-wrapper {
+  > label {
+    > input[type="radio"] {
+      &:checked {
+        + span {
+          > .ar-radio.filled.orange::before {
+            border-right-color: var(--white);
+            border-bottom-color: var(--white);
+          }
+
+          > .ar-radio.filled.orange {
+            background-color: var(--orange-500);
+            box-shadow: 0 0 0 3.5px var(--orange-100);
+          }
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> ORANGE */
+
+/* #region Border Color -> YELLOW */
+.ar-radio-wrapper {
+  > label {
+    > input[type="radio"] {
+      &:checked {
+        + span {
+          > .ar-radio.filled.yellow::before {
+            border-right-color: var(--white);
+            border-bottom-color: var(--white);
+          }
+
+          > .ar-radio.filled.yellow {
+            background-color: var(--yellow-500);
+            box-shadow: 0 0 0 3.5px var(--yellow-100);
+          }
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> YELLOW */
+
+/* #region Border Color -> GREEN */
+.ar-radio-wrapper {
+  > label {
+    > input[type="radio"] {
+      &:checked {
+        + span {
+          > .ar-radio.filled.green::before {
+            border-right-color: var(--white);
+            border-bottom-color: var(--white);
+          }
+
+          > .ar-radio.filled.green {
+            background-color: var(--green-500);
+            box-shadow: 0 0 0 3.5px var(--green-100);
+          }
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> GREEN */
+
+/* #region Border Color -> TEAL */
+.ar-radio-wrapper {
+  > label {
+    > input[type="radio"] {
+      &:checked {
+        + span {
+          > .ar-radio.filled.teal::before {
+            border-right-color: var(--white);
+            border-bottom-color: var(--white);
+          }
+
+          > .ar-radio.filled.teal {
+            background-color: var(--teal-500);
+            box-shadow: 0 0 0 3.5px var(--teal-100);
+          }
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> TEAL */
+
+/* #region Border Color -> CYAN */
+.ar-radio-wrapper {
+  > label {
+    > input[type="radio"] {
+      &:checked {
+        + span {
+          > .ar-radio.filled.cyan::before {
+            border-right-color: var(--white);
+            border-bottom-color: var(--white);
+          }
+
+          > .ar-radio.filled.cyan {
+            background-color: var(--cyan-500);
+            box-shadow: 0 0 0 3.5px var(--cyan-100);
+          }
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> CYAN */
+
+/* #region Border Color -> GRAY */
+.ar-radio-wrapper {
+  > label {
+    > input[type="radio"] {
+      &:checked {
+        + span {
+          > .ar-radio.filled.gray::before {
+            border-right-color: var(--white);
+            border-bottom-color: var(--white);
+          }
+
+          > .ar-radio.filled.gray {
+            background-color: var(--gray-500);
+            box-shadow: 0 0 0 3.5px var(--gray-100);
+          }
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> GRAY */
+
+/* #region Border Color -> LIGHT */
+.ar-radio-wrapper {
+  > label {
+    > input[type="radio"] {
+      &:checked {
+        + span {
+          > .ar-radio.filled.light::before {
+            border-right-color: var(--white);
+            border-bottom-color: var(--white);
+          }
+
+          > .ar-radio.filled.light {
+            background-color: var(--light-500);
+            box-shadow: 0 0 0 3.5px var(--light-100);
+          }
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> LIGHT */

package/dist/assets/css/components/form/radio/radio.css

@@ -0,0 +1,69 @@
+@import url("./core/border.css");
+
+.ar-radio-wrapper {
+  display: flex;
+  align-items: center;
+  height: var(--input-height);
+}
+.ar-radio-wrapper > label > :is(input[type="radio"]) {
+  display: none;
+}
+.ar-radio-wrapper > label > span {
+  display: flex;
+  align-items: center;
+  gap: 0 0.5rem;
+  user-select: none;
+}
+.ar-radio-wrapper > label > span > .ar-radio {
+  position: relative;
+  display: inline-block;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+.ar-radio-wrapper > label > :is(input[type="radio"]):checked + span > .ar-radio {
+  z-index: 2;
+}
+.ar-radio-wrapper > label > :is(input[type="radio"]):checked + span > .ar-radio::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  display: inline-block;
+  content: "";
+  width: 0.25rem;
+  height: 0.5rem;
+  border: solid 1px transparent;
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+
+.ar-radio-wrapper > label > span > .trace {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-block;
+  content: "";
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--border-radius-pill);
+  z-index: 1;
+}
+.ar-radio-wrapper > label > span > .past-trace {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-block;
+  content: "";
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--border-radius-pill);
+  z-index: 1;
+}
+
+.ar-radio-wrapper > label > .validation {
+  color: var(--danger);
+  font-size: 0.8rem;
+  font-weight: 400;
+}

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

@@ -0,0 +1,117 @@
+.ar-select-options {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  background-color: var(--white);
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
+  overflow: hidden;
+  z-index: 1052;
+  transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
+}
+.ar-select-options.top {
+  box-shadow: 0 5px 15px -2.5px rgba(var(--black-rgb), 0.1);
+}
+.ar-select-options.bottom {
+  box-shadow: 0 -5px 15px -2.5px rgba(var(--black-rgb), 0.1);
+}
+
+.ar-select-options > .search-field {
+  padding: 0.5rem;
+  border-bottom: solid 1px var(--gray-200);
+}
+
+.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);
+}
+
+.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(--border-radius-sm);
+  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(--border-radius-pill);
+  color: var(--white);
+  text-align: center;
+  line-height: 1rem;
+}
+
+/* .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;
+}
+
+.ar-select-options.top:is(.opened, .closed),
+.ar-select-options.top:is(.opened, .closed) {
+  transform-origin: top;
+}
+.ar-select-options.bottom:is(.opened, .closed),
+.ar-select-options.bottom:is(.opened, .closed) {
+  transform-origin: bottom;
+} */