@harjs/react-ui 1.0.0

package/dist/assets/css/components/data-display/tabs/tabs.css

@@ -0,0 +1,245 @@
+.ar-tabs {
+  > .tabs {
+    position: relative;
+    height: var(--input-height);
+    margin-bottom: 1.5rem;
+    padding: 0;
+    border-bottom: solid 2px var(--gray-200);
+    user-select: none;
+    overflow: hidden;
+
+    > .container {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      height: 100%;
+      overflow-x: auto;
+      scrollbar-width: none;
+      scroll-behavior: auto;
+      cursor: all-scroll !important;
+
+      > .item {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+        min-width: max-content;
+        height: 100%;
+        padding: 0 0.75rem;
+        color: var(--gray-700);
+        cursor: pointer;
+        overflow: hidden;
+
+        &:not(:last-child) {
+          &::after {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: 0;
+            content: "";
+            background-color: var(--gray-200);
+            width: 2px;
+            height: 12.5px;
+            border-radius: var(--border-radius-pill);
+          }
+        }
+
+        &.selection {
+          color: var(--primary);
+
+          &::before {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            content: "";
+            background-color: var(--primary);
+            height: 2px;
+            border-radius: var(--border-radius-pill);
+          }
+        }
+
+        > .close-button {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: rgba(var(--danger-rgb), 0.25);
+          width: 1rem;
+          height: 1rem;
+          border-radius: var(--border-radius-pill);
+          color: rgba(var(--danger-rgb), 0.5);
+          font-size: 0.75rem;
+        }
+      }
+    }
+
+    > .button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(var(--black-rgb), 0.1);
+      backdrop-filter: blur(5px);
+      width: 2rem;
+      height: 2rem;
+      border-radius: var(--border-radius-sm);
+      cursor: pointer;
+      transition:
+        visibility 0.25s,
+        opacity 0.25s ease-in-out;
+      z-index: 5;
+
+      &.left {
+        left: 0;
+      }
+
+      &.right {
+        right: 0;
+      }
+    }
+  }
+
+  &.skeleton {
+    > .tabs {
+      display: flex;
+      gap: 1rem;
+
+      > .item {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 0.5rem;
+        color: transparent;
+        min-width: 150px;
+        overflow: hidden;
+
+        > .title {
+          background-color: var(--gray-200);
+          width: 100%;
+          height: 15px;
+          border-radius: var(--border-radius-pill);
+          animation: shimmer 2.5s infinite;
+        }
+      }
+    }
+
+    > .content {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1rem;
+      overflow: hidden;
+
+      > div {
+        background-color: var(--gray-200);
+        height: 15px;
+        border-radius: var(--border-radius-pill);
+        animation: shimmer 2.5s infinite;
+
+        &:nth-child(1) {
+          width: 45%;
+        }
+
+        &:nth-child(2) {
+          width: 65%;
+        }
+
+        &:nth-child(3) {
+          width: 15%;
+        }
+      }
+    }
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-color: var(--gray-200);
+  }
+  50% {
+    background-color: var(--gray-300);
+  }
+  100% {
+    background-color: var(--gray-200);
+  }
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+/* --- [KÜÇÜK MOBİL - IPHONE SE VB.] --- */
+/* Çok dar ekranlar için özel düzeltmeler */
+@media (max-width: 375px) {
+}
+
+/* --- [MOBİL - STANDART] --- */
+/* Ekran 576px ve altına düştüğünde çalışır */
+@media (max-width: 576px) {
+}
+
+/* --- [TABLET DİKEY & BÜYÜK TELEFONLAR] --- */
+/* Ekran 768px ve altına düştüğünde çalışır */
+@media (max-width: 768px) {
+  .ar-tabs {
+    > .tabs {
+      padding: 0 2rem;
+
+      > .container {
+        > .item {
+          &:not(:last-child) {
+            &::after {
+            }
+          }
+
+          &.selection {
+            &::before {
+            }
+          }
+
+          > .close-button {
+          }
+        }
+      }
+
+      > .button {
+        &.left {
+        }
+
+        &.right {
+        }
+      }
+    }
+
+    &.skeleton {
+      > .tabs {
+        > .item {
+          > span {
+          }
+        }
+      }
+
+      > .content {
+        &::before {
+        }
+      }
+    }
+  }
+}
+
+/* --- [TABLET & KÜÇÜK LAPTOP] --- */
+/* Ekran 1024px ve altına düştüğünde çalışır */
+@media (max-width: 1024px) {
+}

package/dist/assets/css/components/data-display/typography/paragraph/align.css

@@ -0,0 +1,13 @@
+.ar-typography-paragraph {
+  &.left {
+    text-align: left;
+  }
+
+  &.center {
+    text-align: center;
+  }
+
+  &.right {
+    text-align: right;
+  }
+}

package/dist/assets/css/components/data-display/typography/paragraph/color.css

@@ -0,0 +1,51 @@
+.ar-typography-paragraph.gray-100 {
+  color: var(--gray-100);
+}
+.ar-typography-paragraph.gray-200 {
+  color: var(--gray-200);
+}
+.ar-typography-paragraph.gray-300 {
+  color: var(--gray-300);
+}
+.ar-typography-paragraph.gray-400 {
+  color: var(--gray-400);
+}
+.ar-typography-paragraph.gray-500 {
+  color: var(--gray-500);
+}
+.ar-typography-paragraph.gray-600 {
+  color: var(--gray-600);
+}
+.ar-typography-paragraph.gray-700 {
+  color: var(--gray-700);
+}
+.ar-typography-paragraph.gray-800 {
+  color: var(--gray-800);
+}
+.ar-typography-paragraph.gray-900 {
+  color: var(--gray-900);
+}
+.ar-typography-paragraph.primary {
+  color: var(--primary);
+}
+.ar-typography-paragraph.secondary {
+  color: var(--secondary);
+}
+.ar-typography-paragraph.success {
+  color: var(--success);
+}
+.ar-typography-paragraph.danger {
+  color: var(--danger);
+}
+.ar-typography-paragraph.warning {
+  color: var(--warning);
+}
+.ar-typography-paragraph.information {
+  color: var(--information);
+}
+.ar-typography-paragraph.dark {
+  color: var(--dark);
+}
+.ar-typography-paragraph.light {
+  color: var(--light);
+}

package/dist/assets/css/components/data-display/typography/paragraph/core.css

@@ -0,0 +1,6 @@
+.ar-typography-paragraph {
+  margin-bottom: 0.25rem;
+  color: var(--gray-900);
+  font-family: var(--system);
+  white-space: wrap;
+}

package/dist/assets/css/components/data-display/typography/paragraph/size.css

@@ -0,0 +1,13 @@
+.ar-typography-paragraph {
+  &.large {
+    font-size: 1.25rem;
+  }
+
+  &.normal {
+    font-size: 1rem;
+  }
+
+  &.small {
+    font-size: 0.75rem;
+  }
+}

package/dist/assets/css/components/data-display/typography/title/align.css

@@ -0,0 +1,13 @@
+.ar-typography-title {
+  &.left {
+    text-align: left;
+  }
+
+  &.center {
+    text-align: center;
+  }
+
+  &.right {
+    text-align: right;
+  }
+}

package/dist/assets/css/components/data-display/typography/title/core.css

@@ -0,0 +1,5 @@
+.ar-typography-title {
+  color: var(--gray-700);
+  font-family: var(--system);
+  font-weight: 400;
+}

package/dist/assets/css/components/data-display/typography/title/size.css

@@ -0,0 +1,41 @@
+& {
+  &.xx-small {
+    font-size: 0.8rem; /* 12.8px (0.8 * 16) */
+  }
+
+  &.x-small {
+    font-size: 1rem; /* 16px */
+  }
+
+  &.small {
+    font-size: 1.3rem; /* 20.8px (1.3 * 16) */
+  }
+
+  &.medium {
+    font-size: 1.6rem; /* 25.6px (1.6 * 16) */
+  }
+
+  &.large {
+    font-size: 2rem; /* 32px (2 * 16) */
+  }
+
+  &.x-large {
+    font-size: 2.5rem; /* 40px (2.5 * 16) */
+  }
+
+  &.xx-large {
+    font-size: 3rem; /* 48px (3 * 16) */
+  }
+
+  &.xxx-large {
+    font-size: 4rem; /* 64px (4 * 16) */
+  }
+
+  &.smaller {
+    font-size: smaller;
+  }
+
+  &.larger {
+    font-size: larger;
+  }
+}

package/dist/assets/css/components/data-display/typography/typography.css

@@ -0,0 +1,11 @@
+/* Title Css */
+@import url("./title/core.css");
+@import url("./title/color.css");
+@import url("./title/align.css");
+@import url("./title/size.css");
+
+/* Paragraph Css */
+@import url("./paragraph/core.css");
+@import url("./paragraph/color.css");
+@import url("./paragraph/align.css");
+@import url("./paragraph/size.css");

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

@@ -0,0 +1,224 @@
+/* #region PRIMARY */
+.ar-alert {
+  &.filled {
+    &.primary {
+      background-color: var(--blue-100);
+      color: var(--blue-700);
+    }
+  }
+  &.surface {
+    &.primary {
+      background-color: var(--blue-100);
+      border: solid 1px var(--blue-300);
+      color: var(--blue-700);
+    }
+  }
+  &.dashed {
+    &.primary {
+      border: dashed 1px var(--blue-300);
+      color: var(--blue-700);
+    }
+  }
+}
+/* #endregion */
+/* PRIMARY */
+
+/* #region PRIMARY-LIGHT */
+.ar-alert {
+  &.filled {
+    &.primary-light {
+      background-color: var(--blue-100);
+      color: var(--blue-700);
+    }
+  }
+  &.surface {
+    &.primary-light {
+      background-color: var(--blue-100);
+      border: solid 1px var(--blue-300);
+      color: var(--blue-700);
+    }
+  }
+  &.dashed {
+    &.primary-light {
+      border: dashed 1px var(--blue-300);
+      color: var(--blue-700);
+    }
+  }
+}
+/* #endregion */
+/* PRIMARY-LIGHT */
+
+/* #region SECONDARY */
+.ar-alert {
+  &.filled {
+    &.secondary {
+      background-color: var(--blue-100);
+      color: var(--blue-700);
+    }
+  }
+  &.surface {
+    &.secondary {
+      background-color: var(--blue-100);
+      border: solid 1px var(--blue-300);
+      color: var(--blue-700);
+    }
+  }
+  &.dashed {
+    &.secondary {
+      border: dashed 1px var(--blue-300);
+      color: var(--blue-700);
+    }
+  }
+}
+/* #endregion */
+/* SECONDARY */
+
+/* #region SUCCESS */
+.ar-alert {
+  &.filled {
+    &.success {
+      background-color: var(--green-100);
+      color: var(--green-700);
+    }
+  }
+  &.surface {
+    &.success {
+      background-color: var(--green-100);
+      border: solid 1px var(--green-300);
+      color: var(--green-700);
+    }
+  }
+  &.dashed {
+    &.success {
+      border: dashed 1px var(--green-300);
+      color: var(--green-700);
+    }
+  }
+}
+/* #endregion */
+/* SUCCESS */
+
+/* #region WARNING */
+.ar-alert {
+  &.filled {
+    &.warning {
+      background-color: var(--orange-100);
+      color: var(--orange-700);
+    }
+  }
+  &.surface {
+    &.warning {
+      background-color: var(--orange-100);
+      border: solid 1px var(--orange-300);
+      color: var(--orange-700);
+    }
+  }
+  &.dashed {
+    &.warning {
+      border: dashed 1px var(--orange-300);
+      color: var(--orange-700);
+    }
+  }
+}
+/* #endregion */
+/* WARNING */
+
+/* #region DANGER */
+.ar-alert {
+  &.filled {
+    &.danger {
+      background-color: var(--red-100);
+      color: var(--red-700);
+    }
+  }
+  &.surface {
+    &.danger {
+      background-color: var(--red-100);
+      border: solid 1px var(--red-300);
+      color: var(--red-700);
+    }
+  }
+  &.dashed {
+    &.danger {
+      border: dashed 1px var(--red-300);
+      color: var(--red-700);
+    }
+  }
+}
+/* #endregion */
+/* DANGER */
+
+/* #region INFORMATION */
+.ar-alert {
+  &.filled {
+    &.information {
+      background-color: var(--red-100);
+      color: var(--red-700);
+    }
+  }
+  &.surface {
+    &.information {
+      background-color: var(--red-100);
+      border: solid 1px var(--red-300);
+      color: var(--red-700);
+    }
+  }
+  &.dashed {
+    &.information {
+      border: dashed 1px var(--red-300);
+      color: var(--red-700);
+    }
+  }
+}
+/* #endregion */
+/* INFORMATION */
+
+/* #region DARK */
+.ar-alert {
+  &.filled {
+    &.dark {
+      background-color: var(--red-100);
+      color: var(--red-700);
+    }
+  }
+  &.surface {
+    &.dark {
+      background-color: var(--red-100);
+      border: solid 1px var(--red-300);
+      color: var(--red-700);
+    }
+  }
+  &.dashed {
+    &.dark {
+      border: dashed 1px var(--red-300);
+      color: var(--red-700);
+    }
+  }
+}
+/* #endregion */
+/* DARK */
+
+/* #region LIGHT */
+.ar-alert {
+  &.filled {
+    &.light {
+      background-color: var(--red-100);
+      color: var(--red-700);
+    }
+  }
+  &.surface {
+    &.light {
+      background-color: var(--red-100);
+      border: solid 1px var(--red-300);
+      color: var(--red-700);
+    }
+  }
+  &.dashed {
+    &.light {
+      border: dashed 1px var(--red-300);
+      color: var(--red-700);
+    }
+  }
+}
+/* #endregion */
+/* LIGHT */

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

@@ -0,0 +1,61 @@
+@import url("./statuses.css");
+
+.ar-alert {
+  padding: 1rem;
+  border-radius: var(--border-radius-sm);
+  border: solid 1px transparent;
+  font-family: var(--system);
+  font-weight: 400;
+}
+
+.ar-alert > p > .ar-alert-tag {
+  background-color: var(--gray-100);
+  padding: 0 0.25rem;
+  border: solid 1px var(--gray-400);
+  border-radius: var(--border-radius-sm);
+}
+
+.ar-alert ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem 0;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+.ar-alert ul li {
+  position: relative;
+  padding-left: 1rem;
+}
+.ar-alert > ul > li:not(:has(> ul))::before {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  content: "";
+  background-color: rgba(var(--black-rgb), 0.1);
+  width: 0.5rem;
+  height: 0.5rem;
+  border: solid 1px transparent;
+  border-radius: var(--border-radius-lg);
+}
+.ar-alert ul li:is(.sub-message):not(:has(> ul))::before {
+  position: absolute;
+  top: -5px;
+  left: 0;
+  content: "";
+  width: 0.75rem;
+  height: 1rem;
+  border: solid 1px transparent;
+  border-left-color: rgba(var(--black-rgb), 0.25);
+  border-bottom-color: rgba(var(--black-rgb), 0.25);
+}
+.ar-alert ul li .ar-alert-tag {
+  background-color: var(--white);
+  padding: 0 0.25rem;
+  border: solid 1px var(--gray-400);
+  border-radius: var(--border-radius-sm);
+}
+.ar-alert ul li ul {
+  margin-left: 0.1rem;
+}

package/dist/assets/css/components/feedback/drawer/content.css

@@ -0,0 +1,7 @@
+.ar-drawer-wrapper > .ar-drawer > .content {
+  position: relative;
+  padding: 2rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: calc(100% - 3.5rem);
+}