@harjs/react-ui 1.1.5 → 1.1.6

package/dist/assets/css/components/feedback/modal/header.css

@@ -1,56 +1,68 @@
-.ar-modal-wrapper > .ar-modal > .header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  height: 3.5rem;
-  padding: 0 2rem;
-  border-bottom: solid 1px var(--gray-200);
-}
-.ar-modal-wrapper > .ar-modal > .header > .ar-typography-title {
-  width: calc(100% - 2.75rem);
-  text-wrap: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
+.har-modal-wrapper {
+  > .har-modal {
+    > .header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      height: 3.5rem;
+      padding: 0 2rem;
+      border-bottom: solid 1px var(--gray-200);
 
-.ar-modal-wrapper > .ar-modal > .header .close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--white);
-  min-width: 2rem;
-  min-height: 2rem;
-  border: solid 1px var(--gray-300);
-  border-radius: var(--border-radius-sm);
-  cursor: pointer;
-  user-select: none;
-  transition: background 250ms, border 250ms ease-in-out;
-}
-.ar-modal-wrapper > .ar-modal > .header .close::before,
-.ar-modal-wrapper > .ar-modal > .header .close::after {
-  position: absolute;
-  content: "";
-  width: 2px;
-  height: 15px;
-  background-color: var(--gray-300);
-  transform-origin: center;
-  transform: rotate(-45deg);
-  transition: transform 250ms ease-in-out;
-}
-.ar-modal-wrapper > .ar-modal > .header .close::after {
-  transform: rotate(45deg);
-}
-.ar-modal-wrapper > .ar-modal > .header .close:hover {
-  background-color: rgba(var(--danger-rgb), 0.1);
-  border: solid 1px var(--danger);
-  color: rgba(var(--danger-rgb), 0.75);
-}
-.ar-modal-wrapper > .ar-modal > .header .close:hover::before,
-.ar-modal-wrapper > .ar-modal > .header .close:hover::after {
-  background-color: var(--danger);
-  transform: rotate(45deg);
-}
-.ar-modal-wrapper > .ar-modal > .header .close:hover::after {
-  transform: rotate(-45deg);
+      &.close {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--white-100);
+        min-width: 2rem;
+        min-height: 2rem;
+        border: solid 1px var(--gray-300);
+        border-radius: var(--radius-4);
+        cursor: pointer;
+        user-select: none;
+        transition:
+          background 250ms,
+          border 250ms ease-in-out;
+
+        &::before,
+        &::after {
+          position: absolute;
+          content: "";
+          width: 2px;
+          height: 15px;
+          background-color: var(--gray-300);
+          transform-origin: center;
+          transform: rotate(-45deg);
+          transition: transform 250ms ease-in-out;
+        }
+
+        &::after {
+          transform: rotate(45deg);
+        }
+
+        &:hover {
+          background-color: rgba(var(--danger-rgb), 0.1);
+          border: solid 1px var(--danger);
+          color: rgba(var(--danger-rgb), 0.75);
+
+          &::before,
+          &::after {
+            background-color: var(--danger);
+            transform: rotate(45deg);
+          }
+
+          &::after {
+            transform: rotate(-45deg);
+          }
+        }
+      }
+
+      > .har-typography-title {
+        width: calc(100% - 2.75rem);
+        text-wrap: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
 }

package/dist/assets/css/components/feedback/modal/radius.css

@@ -0,0 +1,43 @@
+.har-modal-wrapper {
+  > .har-modal {
+    &.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/feedback/modal/size.css

@@ -0,0 +1,27 @@
+.har-modal-wrapper {
+  > .har-modal {
+    &.xs {
+      width: 320px;
+    }
+
+    &.sm {
+      width: 384px;
+    }
+
+    &.md {
+      width: 512px;
+    }
+
+    &.lg {
+      width: 640px;
+    }
+
+    &.xl {
+      width: 896px;
+    }
+
+    &.xxl {
+      width: 1200px;
+    }
+  }
+}

package/dist/assets/css/components/feedback/modal/styles.css

@@ -1,53 +1,44 @@
-@import url("./header.css");
 @import url("./content.css");
 @import url("./footer.css");
+@import url("./header.css");
+@import url("./radius.css");
+@import url("./size.css");
 
 /* Media Queries */
-@import url("./media-queries/x-large.css");
+/* @import url("./media-queries/x-large.css");
 @import url("./media-queries/medium.css");
-@import url("./media-queries/small.css");
+@import url("./media-queries/small.css"); */
 
-.ar-modal-wrapper {
+.har-modal-wrapper {
   position: fixed;
   inset: 0;
   z-index: 1050;
-}
-.ar-modal-wrapper > .ar-modal-bg {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(var(--black-rgb), 0.5);
-}
 
-/* #region Open or Close */
-.ar-modal-wrapper.opened {
-  visibility: visible;
-  opacity: 1;
-  transition:
-    visibility 250ms,
-    opacity 250ms ease-in-out;
-}
-.ar-modal-wrapper.closed {
-  visibility: hidden;
-  opacity: 0;
-  transition:
-    visibility 250ms,
-    opacity 250ms ease-in-out;
-}
-/* #endregion */
-/* Open or Close */
+  &.opened {
+    visibility: visible;
+    opacity: 1;
+    transition:
+      visibility 250ms,
+      opacity 250ms ease-in-out;
+  }
 
-.ar-modal-wrapper > .ar-modal {
-  position: absolute;
-  background-color: var(--white);
-  border-radius: var(--border-radius-sm);
-}
+  &.closed {
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      visibility 250ms,
+      opacity 250ms ease-in-out;
+  }
 
-.ar-modal-wrapper > .ar-modal.large {
-  width: 75%;
-}
-.ar-modal-wrapper > .ar-modal.normal {
-  width: 520px;
-}
-.ar-modal-wrapper > .ar-modal.small {
-  width: 25%;
+  > .har-modal-bg {
+    position: fixed;
+    inset: 0;
+    background-color: var(--black-50);
+  }
+
+  > .har-modal {
+    position: absolute;
+    background-color: var(--white-100);
+    border-radius: var(--radius-4);
+  }
 }

package/dist/assets/css/components/feedback/modal/templates/radius.template.css

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

package/dist/assets/css/components/feedback/modal/templates/size.template.css

@@ -0,0 +1,3 @@
+&.__SIZE__ {
+  width: __SIZE_NUMBER__;
+}

package/dist/assets/css/components/feedback/notification/notification.css

@@ -5,11 +5,11 @@
   display: flex;
   flex-direction: row;
   gap: 0 0.5rem;
-  background-color: var(--white);
+  background-color: var(--white-100);
   width: 350px;
   height: 7.5rem;
-  border-radius: var(--border-radius-xl);
-  box-shadow: 0 5px 15px -5px rgba(var(--black-rgb), 0.25);
+  border-radius: var(--radius-8);
+  box-shadow: 0 5px 15px -5px var(--black-30);
   transition: all 250ms ease-in-out;
   overflow: hidden;
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
@@ -28,13 +28,13 @@
 .ar-notification-item > .icon {
   position: relative;
   min-width: 3rem;
-  border-top-left-radius: var(--border-radius-xl);
-  border-bottom-left-radius: var(--border-radius-xl);
+  border-top-left-radius: var(--radius-8);
+  border-bottom-left-radius: var(--radius-8);
   overflow: hidden;
 }
 .ar-notification-item > .icon > span {
   position: absolute;
-  border-radius: var(--border-radius-pill);
+  border-radius: var(--radius-full);
 }
 .ar-notification-item > .icon > span:nth-child(1) {
   top: 0.5rem;

package/dist/assets/css/components/feedback/popover/styles.css

@@ -12,13 +12,15 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  background-color: var(--white);
+  background-color: var(--white-100);
   width: 250px;
   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);
   z-index: 1051;
-  transition: visibility 250ms, opacity 250ms;
+  transition:
+    visibility 250ms,
+    opacity 250ms;
 }
 
 .ar-popover > .title {

package/dist/assets/css/components/feedback/popup-confirm/styles.css

@@ -6,7 +6,7 @@
 .ar-notification-popup-wrapper > .ar-notification-popup-bg {
   position: fixed;
   inset: 0;
-  background-color: rgba(var(--black-rgb), 0.5);
+  background-color: var(--black-50);
 }
 
 .ar-notification-popup {
@@ -22,11 +22,11 @@
   justify-content: center;
   align-items: center;
   gap: 1.5rem;
-  background-color: var(--white);
+  background-color: var(--white-100);
   width: 450px;
   padding: 2rem;
-  border-radius: var(--border-radius-sm);
-  box-shadow: 0 5px 15px -5px rgba(var(--black-rgb), 0.25);
+  border-radius: var(--radius-4);
+  box-shadow: 0 5px 15px -5px var(--black-30);
   overflow: hidden;
   z-index: 1051;
 }
@@ -44,7 +44,7 @@
   align-items: center;
   width: 3rem;
   height: 3rem;
-  border-radius: var(--border-radius-pill);
+  border-radius: var(--radius-full);
 
   &.success,
   &.save {

package/dist/assets/css/components/feedback/progress/progress.css

@@ -20,9 +20,10 @@
   content: "";
   position: absolute;
   inset: 0;
-  border-radius: var(--border-radius-pill);
+  border-radius: var(--radius-full);
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
-  animation: progress cubic-bezier(0.23, 1, 0.32, 1) 2.5s 0s infinite normal both;
+  animation: progress cubic-bezier(0.23, 1, 0.32, 1) 2.5s 0s infinite normal
+    both;
 }
 .ar-progress > .ar-progress-value > span {
   position: absolute;
@@ -32,11 +33,11 @@
   width: auto;
   height: 1rem;
   padding: 0 0.25rem;
-  border-radius: var(--border-radius-pill);
-  color: var(--white);
+  border-radius: var(--radius-full);
+  color: var(--white-100);
   font-size: 0.75rem;
   line-height: 1rem;
-  /* -webkit-text-stroke: 0.75px var(--white); */
+  /* -webkit-text-stroke: 0.75px var(--white-100); */
   z-index: 1;
 }
 .ar-progress > .ar-progress-value > span::before {

package/dist/assets/css/components/feedback/tooltip/styles.css

@@ -6,9 +6,9 @@
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  background-color: var(--black);
+  background-color: var(--black-100);
   padding: 0.25rem 0.5rem;
-  border-radius: var(--border-radius-sm);
+  border-radius: var(--radius-4);
   z-index: 1052;
 }
 .ar-tooltip > span {
@@ -20,7 +20,7 @@
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
-  color: var(--white);
+  color: var(--white-100);
   font-size: 0.75rem;
   font-family: var(--system);
   text-wrap: nowrap;