@harjs/react-ui 1.1.4 → 1.1.6

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

@@ -1,22 +1,19 @@
-/* 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");
+@import url("./addon.css");
+@import url("./color.css");
+@import url("./icon.css");
+@import url("./radius.css");
+@import url("./size.css");
 
-.ar-input-wrapper {
+.har-input-wrapper {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
+  font-family: var(--system);
 
-  > .ar-input {
+  > .har-input {
     position: relative;
     width: 100%;
 
@@ -54,7 +51,7 @@
         > .handle-number-button {
           visibility: visible;
           opacity: 1;
-          width: 1rem;
+          width: 2rem;
         }
       }
 
@@ -63,6 +60,7 @@
         width: 100%;
         height: var(--input-height);
         padding: 0 0.5rem;
+        border: solid 1px transparent;
         font-family: var(--system);
         font-size: 1rem;
         outline: none;
@@ -71,6 +69,10 @@
           background 250ms,
           border 250ms,
           box-shadow 250ms ease-in-out;
+
+        &::placeholder {
+          font-weight: 300;
+        }
       }
 
       .handle-number-button {
@@ -81,7 +83,7 @@
         position: absolute;
         top: 1px;
         right: 1px;
-        background-color: var(--gray-200);
+        /* background-color: var(--gray-200); */
         width: 0rem;
         height: calc(100% - 2px);
         border-left: solid 1px var(--gray-300);
@@ -96,7 +98,7 @@
           top: 50%;
           transform: translateY(-50%);
           background-color: var(--gray-300);
-          width: 100%;
+          width: 50px;
           height: 1px;
         }
 
@@ -104,17 +106,33 @@
           display: flex;
           justify-content: center;
           align-items: center;
-
           height: 50%;
           cursor: pointer;
+
+          &:active {
+            background-color: var(--gray-100);
+          }
+        }
+      }
+    }
+
+    &.disabled {
+      > .input {
+        > input {
+          background-color: var(--gray-100) !important;
+          cursor: no-drop;
         }
       }
     }
+  }
 
-    > .validation {
-      color: var(--danger);
-      font-size: 0.8rem;
-      font-weight: 400;
+  &.pin-input {
+    > .har-input {
+      > .input {
+        > input {
+          text-align: center;
+        }
+      }
     }
   }
 }

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

@@ -0,0 +1,112 @@
+&.__COLOR__ {
+  &.filled {
+    > .har-input {
+      > label {
+        color: var(--__COLOR__-500);
+      }
+
+      > .input {
+        > input {
+          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 {
+    > .har-input {
+      > label {
+        color: var(--__COLOR__-500);
+      }
+
+      > .input {
+        > input {
+          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 {
+    > .har-input {
+      > label {
+        color: var(--__COLOR__-500);
+      }
+
+      > .input {
+        > input {
+          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 {
+    > .har-input {
+      > label {
+        color: var(--__COLOR__-500);
+      }
+
+      > .input {
+        > input {
+          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 {
+    > .har-input {
+      > label {
+        color: var(--__COLOR__-500);
+      }
+
+      > .input {
+        > input {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+
+          &::placeholder {
+            color: var(--__COLOR__-400);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+&:has(> .addon-before),
+&:has(> .addon-after) {
+  &.radius-__RADIUS__ {
+    > .addon-before {
+      border-top-left-radius: var(--radius-__RADIUS__);
+      border-bottom-left-radius: var(--radius-__RADIUS__);
+    }
+
+    > .addon-after {
+      border-top-right-radius: var(--radius-__RADIUS__);
+      border-bottom-right-radius: var(--radius-__RADIUS__);
+    }
+  }
+}
+
+&.radius-__RADIUS__ {
+  > .har-input {
+    > .input {
+      > input {
+        border-radius: var(--radius-__RADIUS__);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+&.__SIZE__ {
+  > .addon-before,
+  > .addon-after {
+    height: __SIZE_NUMBER__;
+    font-size: __FONT_SIZE__;
+  }
+
+  > .har-input {
+    > .input {
+      > input {
+        height: __SIZE_NUMBER__;
+        font-size: __FONT_SIZE__;
+      }
+    }
+  }
+
+  &.pin-input {
+    width: __SIZE_NUMBER__;
+    height: __SIZE_NUMBER__;
+  }
+}

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

@@ -3,19 +3,22 @@
   opacity: 0;
   position: absolute;
   top: 0;
-  background-color: var(--white);
+  background-color: var(--white-100);
   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);
+  border-radius: var(--radius-4);
+  box-shadow: 0 0 15px -2.5px var(--black-10);
   overflow: hidden;
   z-index: 1052;
-  transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
+  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);
+  box-shadow: 0 5px 15px -2.5px var(--black-10);
 }
 .ar-select-options.bottom {
-  box-shadow: 0 -5px 15px -2.5px rgba(var(--black-rgb), 0.1);
+  box-shadow: 0 -5px 15px -2.5px var(--black-10);
 }
 
 .ar-select-options > .search-field {
@@ -66,7 +69,7 @@
   position: relative;
   background-color: rgba(var(--primary-rgb), 0.05);
   padding: 0.25rem 0.5rem;
-  border-radius: var(--border-radius-sm);
+  border-radius: var(--radius-4);
   border-left: solid 2px var(--primary);
   color: var(--primary);
   cursor: pointer;
@@ -89,8 +92,8 @@
   min-width: 1rem;
   height: 1rem;
   margin-right: 0.25rem;
-  border-radius: var(--border-radius-pill);
-  color: var(--white);
+  border-radius: var(--radius-full);
+  color: var(--white-100);
   text-align: center;
   line-height: 1rem;
 }

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

@@ -44,7 +44,7 @@
             background-color: var(--gray-100);
             padding: 0 0.5rem;
             border: solid 1px var(--gray-200);
-            border-radius: var(--border-radius-sm);
+            border-radius: var(--radius-4);
           }
         }
       }
@@ -135,10 +135,10 @@
           border-right-style: dashed;
           border-bottom-style: solid;
           border-left-style: solid;
-          border-top-color: rgba(var(--black-rgb), 0.1);
-          border-right-color: rgba(var(--black-rgb), 0.1);
-          border-bottom-color: rgba(var(--black-rgb), 0.5);
-          border-left-color: rgba(var(--black-rgb), 0.5);
+          border-top-color: var(--black-10);
+          border-right-color: var(--black-10);
+          border-bottom-color: var(--black-50);
+          border-left-color: var(--black-50);
           transform: rotate(-45deg);
         }
       }
@@ -148,11 +148,11 @@
         top: calc(var(--input-height) / 2);
         transform: translateY(-50%);
         right: 2rem;
-        background-color: rgba(var(--black-rgb), 0.25);
+        background-color: var(--black-30);
         backdrop-filter: blur(5px);
         width: 1rem;
         height: 1rem;
-        border-radius: var(--border-radius-pill);
+        border-radius: var(--radius-full);
         text-align: center;
         line-height: 0.7rem;
         cursor: pointer;
@@ -169,16 +169,10 @@
 
         &::before {
           content: "x";
-          color: var(--white);
+          color: var(--white-100);
           font-size: 0.75rem;
         }
       }
     }
-
-    > .validation {
-      color: var(--danger);
-      font-size: 0.8rem;
-      font-weight: 400;
-    }
   }
 }

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

@@ -26,11 +26,11 @@
           transform: translateY(-50%);
           display: inline-block;
           content: "";
-          background-color: var(--white);
+          background-color: var(--white-100);
           width: 1rem;
           height: 1rem;
           border: solid 1px var(--gray-300);
-          box-shadow: 0 0 0 0 rgba(var(--black-rgb), 0.2);
+          box-shadow: 0 0 0 0 var(--black-20);
           transition:
             left 150ms,
             width 150ms 150ms,
@@ -44,7 +44,7 @@
           > .handle {
             left: calc(2.25rem - 1rem);
             border: none;
-            box-shadow: 0 0 0 5px rgba(var(--black-rgb), 0.2);
+            box-shadow: 0 0 0 5px var(--black-20);
           }
         }
       }

package/dist/assets/css/components/form/text-editor/styles.css

@@ -55,8 +55,8 @@
     border-left-color: var(--gray-300);
     border-right-color: var(--gray-300);
     border-bottom-color: var(--gray-300);
-    border-bottom-left-radius: var(--border-radius-sm);
-    border-bottom-right-radius: var(--border-radius-sm);
+    border-bottom-left-radius: var(--radius-4);
+    border-bottom-right-radius: var(--radius-4);
     cursor: ns-resize;
 
     &::before {
@@ -73,26 +73,20 @@
         0px 5px 0 0px var(--gray-500);
     }
   }
-
-  > .validation {
-    color: var(--danger);
-    font-size: 0.8rem;
-    font-weight: 400;
-  }
 }
 
 .ar-alias-panel {
   visibility: hidden;
   opacity: 0;
   position: absolute;
-  background-color: var(--white);
+  background-color: var(--white-100);
   width: 200px;
   max-height: 250px;
   border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--radius-4);
   overflow-y: auto;
   overflow-x: hidden;
-  box-shadow: 0 10px 15px -5px rgba(var(--black-rgb), 0.1);
+  box-shadow: 0 10px 15px -5px var(--black-10);
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: opened ease-in-out 250ms 0s 1 normal both;
 

package/dist/assets/css/components/form/upload/dropzone.css

@@ -26,7 +26,7 @@
         gap: 0.5rem;
         position: absolute;
         inset: auto 0 0 0;
-        background-color: rgba(var(--black-rgb), 0.75);
+        background-color: var(--black-80);
         padding: 0.5rem;
         transition:
           visibility 250ms,
@@ -34,7 +34,7 @@
         font-family: var(--system);
 
         > .file-name {
-          color: var(--white);
+          color: var(--white-100);
           font-size: 0.75rem;
           font-weight: 700;
         }
@@ -46,16 +46,16 @@
           > .file-size {
             background-color: var(--primary);
             padding: 0.25rem 0 0.25rem 0.25rem;
-            border-radius: var(--border-radius-sm);
-            color: var(--white);
+            border-radius: var(--radius-4);
+            color: var(--white-100);
             font-size: 0.75rem;
             font-weight: 700;
 
             > .size-type {
-              background-color: rgba(var(--black-rgb), 0.5);
+              background-color: var(--black-50);
               margin-left: 0.25rem;
-              border-top-right-radius: var(--border-radius-sm);
-              border-bottom-right-radius: var(--border-radius-sm);
+              border-top-right-radius: var(--radius-4);
+              border-bottom-right-radius: var(--radius-4);
               padding: 0.25rem;
               color: var(--primary);
               font-weight: 700;
@@ -65,7 +65,7 @@
           > .file-type {
             background-color: var(--warning);
             padding: 0.25rem;
-            border-radius: var(--border-radius-sm);
+            border-radius: var(--radius-4);
             color: var(--black);
             font-size: 0.75rem;
             font-weight: 700;
@@ -82,7 +82,7 @@
       backdrop-filter: blur(5px);
       width: 10rem;
       height: 12.5rem;
-      border-left: solid 1px rgba(var(--black-rgb), 0.75);
+      border-left: solid 1px var(--black-80);
       overflow-x: hidden;
       overflow-y: auto;
 
@@ -96,7 +96,7 @@
         min-width: var(--size);
         min-height: var(--size);
         height: var(--size);
-        border-bottom: solid 1px rgba(var(--black-rgb), 0.75);
+        border-bottom: solid 1px var(--black-80);
         overflow: hidden;
 
         > .buttons {
@@ -117,7 +117,7 @@
 
           &:hover {
             &::before {
-              background-color: rgba(var(--black-rgb), 0.75);
+              background-color: var(--black-80);
             }
 
             div {
@@ -154,7 +154,7 @@
           align-items: center;
           gap: 0.5rem;
           background-color: rgba(var(--danger-rgb), 0.75);
-          color: var(--white);
+          color: var(--white-100);
           font-size: 0.75rem;
           font-weight: 700;
           text-align: center;

package/dist/assets/css/components/form/upload/list-and-gird.css

@@ -54,7 +54,7 @@
       gap: 0.5rem;
       padding: 0.5rem;
       border: solid 1px var(--gray-300);
-      border-radius: var(--border-radius-sm);
+      border-radius: var(--radius-4);
       overflow: hidden;
 
       &::before {
@@ -70,7 +70,7 @@
         border: solid 1px transparent;
       }
       &:hover::before {
-        background-color: rgba(var(--black-rgb), 0.25);
+        background-color: var(--black-30);
       }
 
       &:has(> .error) {
@@ -86,7 +86,7 @@
         align-items: center;
         gap: 0.5rem;
         background-color: rgba(var(--danger-rgb), 0.75);
-        color: var(--white);
+        color: var(--white-100);
         font-size: 0.75rem;
         font-weight: 700;
         text-align: center;
@@ -117,7 +117,7 @@
         }
 
         &:hover::before {
-          background-color: rgba(var(--black-rgb), 0.75);
+          background-color: var(--black-80);
         }
 
         > div {
@@ -149,17 +149,17 @@
         > .file-size {
           background-color: var(--primary);
           padding: 0.25rem 0 0.25rem 0.25rem;
-          border-radius: var(--border-radius-sm);
-          color: var(--white);
+          border-radius: var(--radius-4);
+          color: var(--white-100);
           font-size: 0.65rem;
           font-weight: 700;
           text-wrap: nowrap;
 
           > .size-type {
-            background-color: rgba(var(--black-rgb), 0.5);
+            background-color: var(--black-50);
             margin-left: 0.25rem;
-            border-top-right-radius: var(--border-radius-sm);
-            border-bottom-right-radius: var(--border-radius-sm);
+            border-top-right-radius: var(--radius-4);
+            border-bottom-right-radius: var(--radius-4);
             padding: 0.25rem;
             color: var(--primary);
             font-size: 0.65rem;
@@ -171,7 +171,7 @@
         > .file-type {
           background-color: var(--warning);
           padding: 0.25rem;
-          border-radius: var(--border-radius-sm);
+          border-radius: var(--radius-4);
           color: var(--black);
           font-size: 0.65rem;
           font-weight: 700;

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

@@ -34,7 +34,7 @@
       gap: 1rem;
       height: 8.5rem;
       border: dashed 1px var(--gray-300);
-      border-radius: var(--border-radius-sm);
+      border-radius: var(--radius-4);
       cursor: pointer;
       user-select: none;
       transition:
@@ -43,7 +43,7 @@
 
       &:has(.preview > img) {
         padding: 0;
-        border: solid 1px rgba(var(--black-rgb), 0.75);
+        border: solid 1px var(--black-80);
         overflow: hidden;
       }
 
@@ -98,7 +98,7 @@
 
           &:hover {
             &::before {
-              background-color: rgba(var(--black-rgb), 0.75);
+              background-color: var(--black-80);
             }
 
             div {
@@ -137,7 +137,7 @@
           gap: 0.5rem;
           position: absolute;
           inset: auto 0 0 0;
-          background-color: rgba(var(--black-rgb), 0.75);
+          background-color: var(--black-80);
           padding: 0.5rem;
           transition:
             visibility 250ms,
@@ -145,7 +145,7 @@
 
           > .file-name {
             width: 100%;
-            color: var(--white);
+            color: var(--white-100);
             font-size: 0.75rem;
             font-weight: 700;
             white-space: nowrap;
@@ -160,16 +160,16 @@
             > .file-size {
               background-color: var(--primary);
               padding: 0.25rem 0 0.25rem 0.25rem;
-              border-radius: var(--border-radius-sm);
-              color: var(--white);
+              border-radius: var(--radius-4);
+              color: var(--white-100);
               font-size: 0.75rem;
               font-weight: 700;
 
               > .size-type {
-                background-color: rgba(var(--black-rgb), 0.5);
+                background-color: var(--black-50);
                 margin-left: 0.25rem;
-                border-top-right-radius: var(--border-radius-sm);
-                border-bottom-right-radius: var(--border-radius-sm);
+                border-top-right-radius: var(--radius-4);
+                border-bottom-right-radius: var(--radius-4);
                 padding: 0.25rem;
                 color: var(--primary);
                 font-weight: 700;
@@ -179,7 +179,7 @@
             > .file-type {
               background-color: var(--warning);
               padding: 0.25rem;
-              border-radius: var(--border-radius-sm);
+              border-radius: var(--radius-4);
               color: var(--black);
               font-size: 0.75rem;
               font-weight: 700;