@harjs/react-ui 1.0.0

package/dist/assets/css/components/layout/media-queries/medium.css

@@ -0,0 +1,19 @@
+/* Medium (Tablet Dikey & Büyük Telefonlar) */
+@media (min-width: 576px) and (max-width: 767px) {
+  .ar-layout > aside.ar-aside.right {
+    width: 100%;
+  }
+
+  .ar-layout > main {
+    width: 100%;
+  }
+  .ar-layout > main > header {
+    height: 5rem;
+    padding: 0 2.5rem;
+  }
+
+  .ar-layout > main > section:not(.full-width) {
+    max-width: none;
+    padding: 2.5rem;
+  }
+}

package/dist/assets/css/components/layout/media-queries/small.css

@@ -0,0 +1,19 @@
+/* Small (Küçük Telefonlar) */
+@media (max-width: 575px) {
+  .ar-layout > aside.ar-aside.right {
+    width: 100%;
+  }
+
+  .ar-layout > main {
+    width: 100%;
+  }
+  .ar-layout > main > header {
+    height: 5rem;
+    padding: 0 2.5rem;
+  }
+
+  .ar-layout > main > section:not(.full-width) {
+    max-width: none;
+    padding: 2.5rem;
+  }
+}

package/dist/assets/css/components/layout/media-queries/x-large.css

@@ -0,0 +1,19 @@
+/* X-Large (Standart Laptop & Küçük Desktop) */
+@media (min-width: 992px) and (max-width: 1199px) {
+  .ar-layout > aside.ar-aside.right {
+    width: 100%;
+  }
+
+  .ar-layout > main {
+    width: 100%;
+  }
+  .ar-layout > main > header {
+    height: 5rem;
+    padding: 0 2.5rem;
+  }
+
+  .ar-layout > main > section:not(.full-width) {
+    max-width: 960px;
+    padding: 2.5rem;
+  }
+}

package/dist/assets/css/components/layout/media-queries/x-small.css

@@ -0,0 +1,3 @@
+/* X-Small (Ekstra Küçük Telefonlar, Saat vb.) */
+@media (max-width: 320px) {
+}

package/dist/assets/css/components/layout/media-queries/xx-large.css

@@ -0,0 +1,19 @@
+/* XX-Large (Laptop & Büyük Desktop Ekranlar) */
+@media (min-width: 1200px) and (max-width: 1399px) {
+  .ar-layout > aside.ar-aside.right {
+    width: 100%;
+  }
+
+  .ar-layout > main {
+    width: 100%;
+  }
+  .ar-layout > main > header {
+    height: 5rem;
+    padding: 0 2.5rem;
+  }
+
+  .ar-layout > main > section:not(.full-width) {
+    max-width: 1140px;
+    padding: 2.5rem;
+  }
+}

package/dist/assets/css/components/layout/media-queries/xxx-large.css

@@ -0,0 +1,20 @@
+/* XXX-Large (Büyük Ekranlar: TV, Ultra Geniş Monitörler) */
+
+@media (min-width: 1400px) {
+  .ar-layout > aside.ar-aside.right {
+    width: 100%;
+  }
+
+  .ar-layout > main {
+    width: 100%;
+  }
+  .ar-layout > main > header {
+    height: 5rem;
+    padding: 0 2.5rem;
+  }
+
+  .ar-layout > main > section:not(.full-width) {
+    max-width: 1340px;
+    padding: 2.5rem;
+  }
+}

package/dist/assets/css/components/navigation/menu/core/open-or-close.css

@@ -0,0 +1,12 @@
+.ar-menu > ul li ul {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: 250ms ease-in-out;
+}
+.ar-menu > ul li ul > div {
+  overflow: hidden;
+  margin-left: 1rem;
+}
+.ar-menu > ul li ul.opened {
+  grid-template-rows: 1fr;
+}

package/dist/assets/css/components/navigation/menu/styles.css

@@ -0,0 +1,163 @@
+.ar-menu {
+  width: 100%;
+  padding: 0 0.25rem;
+  font-family: var(--system);
+
+  > ul {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+    li {
+      list-style: none;
+      height: auto;
+
+      > ul.submenu {
+        display: grid;
+        grid-template-rows: 0fr;
+        margin-left: 1.5rem;
+        opacity: 0;
+        transform: translateY(-4px);
+        transition:
+          grid-template-rows 250ms ease,
+          opacity 200ms ease,
+          transform 200ms ease;
+        overflow: hidden;
+
+        > .submenu-inner {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        &.opened {
+          grid-template-rows: 1fr;
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .item-render {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        width: 100%;
+        height: 2rem; /* DÜZELTİLMEDİ: inherit yerine ana eleman yüksekliği buraya sabitlendi */
+        padding: 0.3rem;
+        white-space: nowrap;
+        cursor: pointer;
+
+        &.align-center {
+          justify-content: center;
+        }
+
+        &.align-left {
+          justify-content: flex-start;
+        }
+
+        > hr {
+          width: 100%;
+          border: none;
+          border-bottom: 1px solid currentColor;
+          margin: 0.5rem 0;
+        }
+
+        > .icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-width: 2rem;
+          min-height: 2rem;
+          border-radius: var(--border-radius-pill);
+
+          svg {
+            color: var(--light);
+          }
+
+          > .no-icon::before {
+            display: inline-block;
+            content: "";
+            width: 0.75rem;
+            height: 0.75rem;
+            border: dashed 2px transparent;
+            border-top-color: var(--light);
+            border-right-color: var(--light);
+            border-left-color: rgba(var(--black-rgb), 0.1);
+            border-bottom-color: rgba(var(--black-rgb), 0.1);
+            transform: rotate(45deg);
+          }
+        }
+
+        > .item {
+          width: 100%;
+          height: inherit;
+
+          > * {
+            display: flex;
+            align-items: center;
+            height: inherit;
+          }
+        }
+
+        > .angel-down {
+          position: absolute;
+          right: 0.5rem;
+          width: 0.75rem;
+          height: 0.75rem;
+
+          &::before {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border: 1px transparent;
+            border-top-style: solid;
+            border-right-style: solid;
+            border-bottom-style: dashed;
+            border-left-style: dashed;
+            border-top-color: rgba(var(--black-rgb), 0.5);
+            border-right-color: rgba(var(--black-rgb), 0.5);
+            border-left-color: rgba(var(--black-rgb), 0.1);
+            border-bottom-color: rgba(var(--black-rgb), 0.1);
+            transform: rotate(45deg);
+            transition: transform 200ms ease-in-out;
+          }
+
+          &.opened::before {
+            transform: rotate(135deg);
+          }
+        }
+      }
+
+      &.divider {
+        color: var(--black);
+      }
+
+      &.selected {
+        color: var(--selected-icon-bg-color);
+
+        .icon {
+          background-color: var(--selected-icon-bg-color);
+          box-shadow: 0 0 0 5px var(--selected-icon-bg-color-rgb);
+          color: var(--white);
+
+          svg {
+            color: var(--white);
+          }
+        }
+
+        .no-icon::before {
+          border: solid 2px transparent;
+          border-top-color: var(--light);
+          border-right-color: var(--light);
+          border-left-color: rgba(var(--black-rgb), 0.1);
+          border-bottom-color: rgba(var(--black-rgb), 0.1);
+        }
+      }
+    }
+  }
+}

package/dist/assets/css/components/navigation/menu/variant/horizontal.css

@@ -0,0 +1,3 @@
+.ar-menu-list.horizontal {
+  flex-direction: row;
+}

package/dist/assets/css/components/navigation/menu/variant/vertical.css

@@ -0,0 +1,3 @@
+.ar-menu-list.vertical {
+  flex-direction: column;
+}

package/dist/assets/css/components/navigation/pagination/styles.css

@@ -0,0 +1,169 @@
+.ar-pagination {
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+  gap: 0 0.5rem;
+
+  > ul {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    list-style: none;
+    gap: 0 0.5rem;
+    height: 1.75rem;
+
+    > li {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 1.75rem;
+      height: 100%;
+      border-radius: var(--border-radius-pill);
+      box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.1);
+      transform: scale(1);
+      color: var(--gray-700);
+      font-weight: 400;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        background-color: var(--gray-300);
+      }
+
+      &:is(.selection-page) {
+        background-color: var(--primary);
+        box-shadow: 0 0 0 3.5px rgba(var(--primary-rgb), 0.1);
+        color: var(--white);
+        font-size: 0.9rem;
+        transform: scale(1.15);
+        transition:
+          transform 250ms,
+          box-shadow 250ms 250ms ease-in-out;
+      }
+
+      &:is(.passive) {
+        color: var(--gray-300);
+        cursor: no-drop;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+
+      &:is(:nth-child(2)) {
+        margin-right: 1rem;
+      }
+
+      &:is(:nth-last-child(2)) {
+        margin-left: 1rem;
+      }
+
+      &:is(:nth-child(1), :nth-child(2), :nth-last-child(1), :nth-last-child(2)) {
+        > span {
+          position: relative;
+          top: -2px;
+          font-size: 1.5rem;
+        }
+      }
+
+      &:is(.start-ellipsis, .end-ellipsis),
+      &:is(.start-ellipsis, .end-ellipsis):hover {
+        background-color: transparent;
+        cursor: no-drop;
+      }
+    }
+  }
+}
+
+/* --- [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) {
+  .ar-pagination {
+    > ul {
+      > li {
+        min-width: 1rem;
+        height: 1rem;
+
+        &:hover {
+        }
+
+        &:is(.selection-page) {
+        }
+
+        &:is(.passive) {
+          &:hover {
+          }
+        }
+
+        &:is(:nth-child(2)) {
+          margin-right: 0.5rem;
+        }
+
+        &:is(:nth-last-child(2)) {
+          margin-left: 0.5rem;
+        }
+
+        &:is(:nth-child(1), :nth-child(2), :nth-last-child(1), :nth-last-child(2)) {
+          > span {
+          }
+        }
+
+        &:is(.start-ellipsis, .end-ellipsis),
+        &:is(.start-ellipsis, .end-ellipsis):hover {
+        }
+      }
+    }
+  }
+}
+
+/* --- [TABLET DİKEY & BÜYÜK TELEFONLAR] --- */
+/* Ekran 768px ve altına düştüğünde çalışır */
+@media (max-width: 768px) {
+  .ar-pagination {
+    > ul {
+      > li {
+        min-width: 1rem;
+        height: 1rem;
+
+        &:hover {
+        }
+
+        &:is(.selection-page) {
+        }
+
+        &:is(.passive) {
+          &:hover {
+          }
+        }
+
+        &:is(:nth-child(2)) {
+          margin-right: 0.5rem;
+        }
+
+        &:is(:nth-last-child(2)) {
+          margin-left: 0.5rem;
+        }
+
+        &:is(:nth-child(1), :nth-child(2), :nth-last-child(1), :nth-last-child(2)) {
+          > span {
+          }
+        }
+
+        &:is(.start-ellipsis, .end-ellipsis),
+        &:is(.start-ellipsis, .end-ellipsis):hover {
+        }
+      }
+    }
+  }
+}
+
+/* --- [TABLET & KÜÇÜK LAPTOP] --- */
+/* Ekran 1024px ve altına düştüğünde çalışır */
+@media (max-width: 1024px) {
+}

package/dist/assets/css/components/navigation/steps/animation.css

@@ -0,0 +1,8 @@
+@keyframes in-progress {
+  0% {
+    transform: rotate(0turn);
+  }
+  100% {
+    transform: rotate(1turn);
+  }
+}

package/dist/assets/css/components/navigation/steps/styles.css

@@ -0,0 +1,146 @@
+@import url("./animation.css");
+
+.ar-steps > .steps {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-bottom: 2.5rem;
+  padding-bottom: 2.5rem;
+  border-bottom: solid 4px var(--gray-100);
+}
+.ar-steps > .steps > .item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: flex-start;
+  gap: 1rem 0;
+}
+.ar-steps > .steps > .item > .item-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.ar-steps > .steps > .item:not(:last-child) > .item-icon.pending::after,
+.ar-steps > .steps > .item:not(:last-child) > .item-icon.in-progress::after,
+.ar-steps > .steps > .item > .item-icon.completed::after {
+  position: absolute;
+  left: calc(50% + 1.25rem);
+  transform: translateX(-50%);
+  content: "";
+  width: 70%;
+  height: 4px;
+  border-radius: var(--border-radius-pill);
+}
+.ar-steps > .steps > .item:not(:last-child) > .item-icon.pending::after {
+  background-color: var(--gray-300);
+}
+.ar-steps > .steps > .item:not(:last-child) > .item-icon.in-progress::after {
+  background: var(--gray-300);
+  background: linear-gradient(90deg, var(--primary) 50%, var(--gray-300) 50%);
+  background-color: var(--primary);
+}
+.ar-steps > .steps > .item > .item-icon.completed::after {
+  background-color: var(--success);
+}
+
+.ar-steps > .steps > .item > .item-icon > span {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--border-radius-pill);
+}
+
+.ar-steps > .steps > .item > .item-icon > .pending {
+  position: relative;
+  background-color: var(--white);
+  border: solid 1px var(--gray-500);
+}
+.ar-steps > .steps > .item > .item-icon > .pending::before {
+  display: inline-block;
+  content: "";
+  background-color: transparent;
+  width: 1rem;
+  height: 1rem;
+  border: dotted 3.5px var(--gray-500);
+}
+.ar-steps > .steps > .item > .item-icon > .pending::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-block;
+  content: "";
+  background-color: var(--primary);
+  width: 3.5px;
+  height: 3.5px;
+  border-radius: var(--border-radius-pill);
+}
+
+.ar-steps > .steps > .item > .item-icon > .in-progress {
+  background-color: var(--primary);
+  box-shadow:
+    0 0 0 4px var(--white),
+    0 0 0 5px rgba(var(--primary-rgb), 0.5);
+}
+.ar-steps > .steps > .item > .item-icon > .in-progress::before {
+  display: inline-block;
+  content: "";
+  background-color: transparent;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: dashed 2.5px transparent;
+  border-top-color: rgba(var(--white-rgb), 1);
+  border-right-color: rgba(var(--white-rgb), 0.75);
+  border-bottom-color: rgba(var(--white-rgb), 0.25);
+  border-left-color: rgba(var(--white-rgb), 0.1);
+  border-radius: var(--border-radius-pill);
+  animation: in-progress 1s linear 0s infinite normal both;
+}
+
+.ar-steps > .steps > .item > .item-icon > .completed {
+  background-color: var(--success);
+  box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.1);
+}
+.ar-steps > .steps > .item > .item-icon > .completed::before {
+  display: inline-block;
+  content: "";
+  background-color: transparent;
+  width: 1rem;
+  height: 0.55rem;
+  border: solid 2.5px transparent;
+  border-left-color: var(--white);
+  border-bottom-color: var(--white);
+  border-bottom-left-radius: var(--border-radius-sm);
+  transform: rotate(-45deg) translate(1px, -1px);
+}
+
+.ar-steps > .steps > .item > .item-informations {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem 0;
+  cursor: pointer;
+}
+.ar-steps > .steps > .item > .item-informations > .step {
+  color: var(--gray-500);
+  font-size: 0.75rem;
+  letter-spacing: 1px;
+}
+.ar-steps > .steps > .item > .item-informations > .title {
+  font-size: 1.1rem;
+  letter-spacing: 1px;
+}
+
+.ar-steps > .content > .buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 0 1rem;
+  margin-top: 2.5rem;
+  padding-top: 2.5rem;
+  border-top: solid 4px var(--gray-100);
+}