@harjs/react-ui 1.0.0

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

@@ -0,0 +1,165 @@
+.ar-notification-popup-wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+}
+.ar-notification-popup-wrapper > .ar-notification-popup-bg {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(var(--black-rgb), 0.5);
+}
+
+.ar-notification-popup {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: top;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  background-color: var(--white);
+  width: 450px;
+  padding: 2rem;
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 5px 15px -5px rgba(var(--black-rgb), 0.25);
+  overflow: hidden;
+  z-index: 1051;
+}
+.ar-notification-popup.open {
+  animation: openPopup 1s ease 0s 1 normal forwards;
+}
+.ar-notification-popup.closed {
+  animation: closedPopup ease-in-out 500ms 0s 1 normal both;
+}
+
+.ar-notification-popup > .icon {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--border-radius-pill);
+
+  &.success,
+  &.save {
+    background-color: rgba(var(--success-rgb), 0.25);
+    box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.1);
+  }
+  &.warning {
+    background-color: rgba(var(--warning-rgb), 0.25);
+    box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.1);
+  }
+  &.information {
+    background-color: rgba(var(--information-rgb), 0.25);
+    box-shadow: 0 0 0 5px rgba(var(--information-rgb), 0.1);
+  }
+  &.error,
+  &.delete {
+    background-color: rgba(var(--danger-rgb), 0.25);
+    box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.1);
+  }
+}
+
+.ar-notification-popup > .content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.75rem 0;
+  width: 100%;
+  padding: 0 1rem;
+  color: var(--gray-700);
+}
+.ar-notification-popup > .content > .title {
+  color: var(--gray-700);
+  font-size: 1.25rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.ar-notification-popup > .content > .message {
+  color: var(--gray-600);
+  text-align: center;
+}
+
+.ar-notification-popup > .footer {
+  width: 100%;
+}
+
+@media only screen and (max-width: 480px) {
+  .ar-notification.top-left {
+    inset: 1rem 1rem auto 1rem;
+  }
+  .ar-notification.top-right {
+    inset: 1rem 1rem auto 1rem;
+  }
+  .ar-notification.bottom-left {
+    inset: auto 1rem 1rem 1rem;
+  }
+  .ar-notification.bottom-right {
+    inset: auto 1rem 1rem 1rem;
+  }
+}
+
+@keyframes openPopup {
+  0% {
+    visibility: hidden;
+    opacity: 0;
+    /* animation-timing-function: ease-in;
+    transform: scale(0) translate(-50%, -50%); */
+  }
+  /* 
+  38% {
+    animation-timing-function: ease-out;
+    opacity: 1;
+    transform: scale(1) translate(-50%, -50%);
+  }
+
+  55% {
+    animation-timing-function: ease-in;
+    transform: scale(0.7) translate(-50%, -50%);
+  }
+
+  72% {
+    animation-timing-function: ease-out;
+    transform: scale(1) translate(-50%, -50%);
+  }
+
+  81% {
+    animation-timing-function: ease-in;
+    transform: scale(0.84) translate(-50%, -50%);
+  }
+
+  89% {
+    animation-timing-function: ease-out;
+    transform: scale(1) translate(-50%, -50%);
+  }
+
+  95% {
+    animation-timing-function: ease-in;
+    transform: scale(0.95) translate(-50%, -50%);
+  } */
+
+  100% {
+    visibility: visible;
+    opacity: 1;
+    /* animation-timing-function: ease-out;
+    transform: scale(1) translate(-50%, -50%); */
+  }
+}
+
+@keyframes closedPopup {
+  0% {
+    visibility: visible;
+    opacity: 1;
+  }
+  100% {
+    visibility: hidden;
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,10 @@
+@keyframes progress {
+  0% {
+    background-color: rgba(var(--white-rgb), 0.75);
+    width: 0%;
+  }
+  100% {
+    background-color: transparent;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,50 @@
+@import url("./animations.css");
+@import url("./statuses.css");
+
+.ar-progress {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0.75rem;
+}
+.ar-progress > .ar-progress-bar {
+  position: absolute;
+  inset: 0;
+  opacity: 0.1;
+}
+.ar-progress > .ar-progress-value {
+  position: absolute;
+  inset: 0;
+}
+.ar-progress > .ar-progress-value::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--border-radius-pill);
+  /* 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;
+}
+.ar-progress > .ar-progress-value > span {
+  position: absolute;
+  top: -20px;
+  right: 0;
+  background-color: var(--black);
+  width: auto;
+  height: 1rem;
+  padding: 0 0.25rem;
+  border-radius: var(--border-radius-pill);
+  color: var(--white);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  /* -webkit-text-stroke: 0.75px var(--white); */
+  z-index: 1;
+}
+.ar-progress > .ar-progress-value > span::before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: solid 2.5px transparent;
+  border-top-color: var(--black);
+}

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

@@ -0,0 +1,188 @@
+/* #region PRIMARY */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.primary {
+        background-color: var(--blue-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.primary {
+        background-color: var(--blue-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* PRIMARY */
+
+/* #region PRIMARY-LIGHT */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.primary-light {
+        background-color: var(--blue-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.primary-light {
+        background-color: var(--blue-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* PRIMARY-LIGHT */
+
+/* #region SECONDARY */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.secondary {
+        background-color: var(--blue-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.secondary {
+        background-color: var(--blue-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* SECONDARY */
+
+/* #region SUCCESS */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.success {
+        background-color: var(--green-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.success {
+        background-color: var(--green-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* SUCCESS */
+
+/* #region WARNING */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.warning {
+        background-color: var(--orange-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.warning {
+        background-color: var(--orange-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* WARNING */
+
+/* #region DANGER */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.danger {
+        background-color: var(--red-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.danger {
+        background-color: var(--red-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* DANGER */
+
+/* #region INFORMATION */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.information {
+        background-color: var(--red-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.information {
+        background-color: var(--red-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* INFORMATION */
+
+/* #region DARK */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.dark {
+        background-color: var(--red-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.dark {
+        background-color: var(--red-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* DARK */
+
+/* #region LIGHT */
+.ar-progress {
+  > .ar-progress-bar {
+    &.filled {
+      &.light {
+        background-color: var(--red-500);
+      }
+    }
+  }
+
+  > .ar-progress-value {
+    &.filled {
+      &.light {
+        background-color: var(--red-400);
+      }
+    }
+  }
+}
+/* #endregion */
+/* LIGHT */

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

@@ -0,0 +1,60 @@
+.ar-tooltip-wrapper {
+  width: max-content;
+}
+.ar-tooltip {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  background-color: var(--black);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--border-radius-sm);
+  z-index: 1052;
+}
+.ar-tooltip > span {
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+}
+.ar-tooltip > .text {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  color: var(--white);
+  font-size: 0.75rem;
+  font-family: var(--system);
+  text-wrap: nowrap;
+}
+.ar-tooltip > .text > .bullet {
+  color: var(--gray-400);
+}
+
+.ar-tooltip::before {
+  position: absolute;
+  content: "";
+  border: solid 5px transparent;
+}
+.ar-tooltip.top::before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--black);
+}
+.ar-tooltip.right::before {
+  top: 50%;
+  transform: translateY(-50%);
+  right: 100%;
+  border-right-color: var(--black);
+}
+.ar-tooltip.bottom::before {
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 100%;
+  border-bottom-color: var(--black);
+}
+.ar-tooltip.left::before {
+  top: 50%;
+  transform: translateY(-50%);
+  left: 100%;
+  border-left-color: var(--black);
+}

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

@@ -0,0 +1,37 @@
+.ar-button:is(.no-content) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 !important;
+  min-width: 2rem;
+  max-width: 2rem;
+  min-height: 2rem;
+  max-height: 2rem;
+}
+.ar-button:is(.no-content) > .text {
+  gap: 0 !important;
+}
+.ar-button:is(.icon):not(.no-content) > .text {
+  gap: 0 0.5rem;
+}
+.ar-button:is(.icon-start):not(.no-content) > .text {
+  flex-direction: row;
+}
+.ar-button:is(.icon-end):not(.no-content) > .text {
+  flex-direction: row-reverse;
+}
+
+/* Custom Symbol */
+.ar-button:is(.icon) .dotted::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translate(-50%, -50%);
+  content: "⋮";
+  width: 100%;
+  height: 100%;
+  font-size: 1.25rem;
+}

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

@@ -0,0 +1,19 @@
+.ar-button.fixed {
+  position: fixed;
+}
+.ar-button.absolute {
+  position: absolute;
+}
+
+.ar-button.top {
+  top: 0.5rem;
+}
+.ar-button.right {
+  right: 0.5rem;
+}
+.ar-button.bottom {
+  bottom: 0.5rem;
+}
+.ar-button.left {
+  left: 0.5rem;
+}

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

@@ -0,0 +1,13 @@
+.ar-button.ar-button-shape {
+  align-items: center;
+  min-width: 2rem;
+  min-height: 2rem;
+  max-width: 2rem;
+  max-height: 2rem;
+  padding: 0 !important;
+}
+.ar-button.ar-button-shape.circle {
+  border-radius: var(--border-radius-pill);
+}
+.ar-button.ar-button-shape.square {
+}

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

@@ -0,0 +1,14 @@
+.ar-button.large {
+  height: 3rem;
+  padding: 0 1.25rem;
+  font-size: 1.25rem;
+}
+.ar-button.normal {
+  height: var(--input-height);
+  padding: 0 1rem;
+}
+.ar-button.small {
+  height: 1.5rem;
+  padding: 0 0.75rem;
+  font-size: 0.75rem;
+}

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

@@ -0,0 +1,32 @@
+/* Core Css */
+@import url("./core/shape.css");
+@import url("./core/icon.css");
+@import url("./core/position.css");
+@import url("./core/size.css");
+
+.ar-button {
+  position: relative;
+  min-width: fit-content;
+  padding: 0 1rem;
+  font-family: var(--system);
+  font-size: 1rem;
+  cursor: pointer;
+  transition:
+    background-color 150ms,
+    border 150ms,
+    color 150ms ease-in-out;
+  outline: none;
+}
+.ar-button.disabled {
+  cursor: no-drop;
+}
+.ar-button.full-width {
+  min-width: 100%;
+}
+
+.ar-button > .text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-wrap: nowrap;
+}

package/dist/assets/css/components/form/button-action/styles.css

@@ -0,0 +1,24 @@
+.ar-button-action {
+  position: relative;
+}
+
+.ar-action-buttons {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--white);
+  padding: 0.25rem;
+  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);
+  z-index: 1051;
+  transition: visibility 250ms, opacity 250ms;
+}
+/* .ar-action-buttons::after {
+  position: absolute;
+  top: 0.5rem;
+  left: 100%;
+  content: "";
+  border: solid 10px transparent;
+  border-left-color: var(--gray-200);
+} */

package/dist/assets/css/components/form/button-group/styles.css

@@ -0,0 +1,26 @@
+.ar-button-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: max-content;
+}
+.ar-button-group > .ar-button,
+.ar-button-group > .ar-button:is(.ar-button-shape) {
+  border: solid 1px transparent;
+  border-right-color: rgba(var(--black-rgb), 0.1);
+  border-radius: 0;
+}
+.ar-button-group > .ar-button:first-child,
+.ar-button-group > .ar-button:is(.ar-button-shape):first-child {
+  border-top-left-radius: var(--border-radius-sm);
+  border-bottom-left-radius: var(--border-radius-sm);
+}
+.ar-button-group > .ar-button:last-child,
+.ar-button-group .ar-button:is(.ar-button-shape):last-child {
+  border: none;
+  border-top-right-radius: var(--border-radius-sm);
+  border-bottom-right-radius: var(--border-radius-sm);
+}
+
+/* @import url("./variant/filled/core.css");
+@import url("./variant/outlined/core.css"); */

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

@@ -0,0 +1,53 @@
+@import url("./core/border.css");
+
+.ar-checkbox-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: max-content;
+  height: var(--input-height);
+}
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"]) {
+  display: none;
+}
+.ar-checkbox-wrapper > label > span {
+  display: flex;
+  align-items: center;
+  gap: 0 0.5rem;
+  user-select: none;
+}
+.ar-checkbox-wrapper > label > span > .ar-checkbox {
+  position: relative;
+  display: inline-block;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"]):checked + span > .ar-checkbox {
+  z-index: 2;
+}
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"]):checked + span > .ar-checkbox::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-checkbox-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;
+}