@harjs/react-ui 1.0.0

package/dist/assets/css/components/data-display/kanban-board/styles.css

@@ -0,0 +1,371 @@
+.ar-kanban-board {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  min-width: 100%;
+  border-radius: var(--border-radius-lg);
+  overflow-x: auto;
+  overflow-y: auto;
+
+  /* width */
+  &::-webkit-scrollbar {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: var(--gray-300);
+    border-radius: var(--border-radius-pill);
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--gray-500);
+  }
+
+  > .buttons {
+    position: absolute;
+    top: 150px;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 2.5rem;
+    z-index: 5;
+
+    > .button {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(var(--black-rgb), 0.1);
+      backdrop-filter: blur(5px);
+      width: 2rem;
+      height: 5rem;
+      border-radius: var(--border-radius-sm);
+      cursor: pointer;
+
+      &.left {
+        left: -10px;
+      }
+
+      &.right {
+        right: 0;
+      }
+    }
+  }
+
+  > .titles {
+    position: sticky;
+    top: 0;
+    left: auto;
+    right: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 1.5rem;
+    width: 100%;
+    z-index: 5;
+
+    > .title {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 0.5rem;
+      background-color: var(--white);
+      max-width: 350px;
+      min-width: 350px;
+      margin-bottom: 1rem;
+      padding: 0.5rem 1rem;
+      border-radius: var(--border-radius-lg);
+      color: var(--gray-700);
+      font-family: var(--system);
+      font-size: 0.85rem;
+      font-weight: 700;
+      box-shadow: 0px 5px 5px -2px rgba(var(--black-rgb), 0.1);
+
+      > h4 {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+        color: var(--gray-500);
+
+        > span {
+          position: relative;
+          width: 5px;
+          height: 20px;
+          border-radius: var(--border-radius-pill);
+
+          &::after {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            left: 100%;
+            content: "";
+            border: solid 5px transparent;
+            border-left-color: inherit;
+          }
+        }
+      }
+
+      > span {
+        color: var(--gray-400);
+        font-weight: 400;
+      }
+    }
+  }
+
+  > .columns {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 1.5rem;
+    width: 100%;
+    height: max-content;
+    z-index: 4;
+
+    > .column {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      gap: 0.75rem;
+      flex-shrink: 0;
+      max-width: 350px;
+      min-width: 350px;
+      user-select: none;
+
+      > .items {
+        position: relative;
+        background-color: var(--white);
+        padding: 1rem;
+        height: 100%;
+        border: dashed 0 transparent;
+        border-radius: var(--border-radius-lg);
+        transition:
+          transform 250ms,
+          border 250ms ease-in-out;
+
+        &:has(> .no-item) {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        &.dragging {
+          border: dashed 2.5px var(--blue-200);
+          border-radius: var(--border-radius-lg);
+          transform: scaleX(1) scaleY(1);
+          overflow: hidden;
+
+          /* &::before {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            top: 1rem;
+            left: 50%;
+            transform: translateX(-50%);
+            content: "\F488";
+            color: var(--blue-100);
+            font-family: "bootstrap-icons" !important;
+            font-size: 4rem;
+            text-shadow: 2px 2px var(--blue-200);
+            z-index: 5;
+          } */
+        }
+
+        > .no-item {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          &::after {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 23px;
+            content: "";
+            background-color: var(--gray-200);
+            width: 70px;
+            height: 16px;
+            border-radius: 100%;
+          }
+
+          > span {
+            color: var(--gray-500);
+            font-family: var(--system);
+          }
+        }
+      }
+    }
+  }
+}
+
+.filters {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+  background-color: var(--white);
+  margin-bottom: 1rem;
+  border-radius: var(--border-radius-lg);
+  z-index: 6;
+
+  > :first-child {
+    flex: 1;
+  }
+
+  > ul {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+
+    > li {
+      position: relative;
+      padding: 0.5rem;
+      cursor: pointer;
+      user-select: none;
+
+      &.active {
+        background-color: var(--gray-100);
+
+        > ul {
+          animation: dropdownOpen 250ms ease-in-out;
+        }
+      }
+
+      > div {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        > span {
+          color: var(--gray-500);
+          font-weight: 500;
+        }
+      }
+
+      > ul {
+        list-style: none;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        background-color: var(--gray-100);
+        width: max-content;
+        padding: 1rem;
+        border-bottom-left-radius: var(--border-radius-sm);
+        border-bottom-right-radius: var(--border-radius-sm);
+        box-shadow: 0px 5px 5px -2px rgba(var(--black-rgb), 0.1);
+
+        > li {
+          cursor: auto;
+        }
+      }
+    }
+  }
+}
+
+@keyframes dropdownOpen {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* --- [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-kanban-board {
+    /* width */
+    &::-webkit-scrollbar {
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+    }
+
+    > .buttons {
+      display: none;
+
+      > .button {
+        &.left {
+        }
+
+        &.right {
+        }
+      }
+    }
+
+    > .titles {
+      > .title {
+        > h4 {
+          > span {
+            &::after {
+            }
+          }
+        }
+
+        > span {
+        }
+      }
+    }
+
+    > .columns {
+      > .column {
+        > .items {
+          &:has(> .no-item) {
+          }
+
+          &.dragging {
+          }
+
+          > .no-item {
+            &::after {
+            }
+
+            > span {
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* --- [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/paper/styles.css

@@ -0,0 +1,49 @@
+.ar-paper {
+  background-color: var(--white);
+  padding: 1rem;
+  border-radius: var(--border-radius-lg);
+  box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
+
+  > .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background-color: transparent;
+    margin-bottom: 0.75rem;
+  }
+}
+
+/* --- [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-paper {
+    border-radius: 0;
+    box-shadow: none;
+
+    > .header {
+    }
+  }
+}
+
+/* --- [TABLET DİKEY & BÜYÜK TELEFONLAR] --- */
+/* Ekran 768px ve altına düştüğünde çalışır */
+@media (max-width: 768px) {
+  .ar-paper {
+    border-radius: 0;
+    box-shadow: none;
+
+    > .header {
+    }
+  }
+}
+
+/* --- [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/syntax-highlighter/core/jsx.template.css

@@ -0,0 +1,65 @@
+.ar-jsx-language {
+  color: var(--color);
+}
+.ar-jsx-language .ar-jsx-tag {
+  color: var(--tag-color);
+}
+.ar-jsx-language > .ar-jsx-sub-item {
+  display: inherit;
+}
+.ar-jsx-language .ar-jsx-custom-tag {
+  color: var(--custom-tag-color);
+}
+
+.ar-jsx-language .ar-jsx-attributes > .ar-jsx-attribute > .ar-jsx-curly-brackets {
+  color: var(--curly-bracket-color);
+}
+.ar-jsx-language .ar-jsx-attributes.type-column,
+.ar-jsx-language .ar-jsx-attributes .ar-jsx-object-value.type-column {
+  display: flex;
+  flex-direction: column;
+  margin-left: 1rem;
+}
+
+.ar-jsx-language .ar-jsx-attributes .ar-jsx-attribute-key {
+  color: var(--attribute-key-color);
+}
+
+/* String Value */
+.ar-jsx-language .ar-jsx-attributes .ar-jsx-string-value {
+  color: var(--string-value-color);
+}
+.ar-jsx-language .ar-jsx-attributes .ar-jsx-number-value {
+  color: var(--number-value-color);
+}
+
+/* Boolean Value */
+.ar-jsx-language .ar-jsx-attributes .ar-jsx-boolean-value {
+  color: var(--boolean-value-color);
+}
+.ar-jsx-language .ar-jsx-attributes .ar-jsx-boolean-value > span:not([class]) {
+  color: var(--curly-bracket-color);
+}
+
+/* Object Value */
+.ar-jsx-language .ar-jsx-attributes .ar-jsx-object-value {
+  color: var(--object-value-color);
+}
+.ar-jsx-language .ar-jsx-attributes .ar-jsx-object-value > .ar-jsx-comma {
+  color: var(--object-value-color);
+}
+
+.ar-jsx-language
+  .ar-jsx-attributes
+  .ar-jsx-object-value
+  > .ar-jsx-attribute
+  > :is(.ar-jsx-child-open-tag, .ar-jsx-child-close-tag) {
+  color: var(--color);
+}
+.ar-jsx-language
+  .ar-jsx-attributes
+  .ar-jsx-object-value
+  > .ar-jsx-attribute
+  > .ar-jsx-child-curly-bracket {
+  color: var(--child-curly-bracket-color);
+}

package/dist/assets/css/components/data-display/syntax-highlighter/syntax-highlighter.css

@@ -0,0 +1,58 @@
+@import url("./core/jsx.template.css");
+
+.ar-syntax {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius-lg);
+}
+
+.ar-syntax > .preview {
+  position: relative;
+  gap: 1rem;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+  padding: 1rem;
+}
+.ar-syntax > .preview.left {
+  justify-content: left;
+}
+.ar-syntax > .preview.center {
+  justify-content: center;
+}
+.ar-syntax > .preview.right {
+  justify-content: right;
+}
+
+.ar-syntax > .ar-syntax-button-group {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0.5rem;
+  border: solid 1px transparent;
+  border-top-color: var(--gray-200);
+}
+
+.ar-syntax > .pre {
+  background-color: var(--gray-900);
+  margin: 0;
+
+  border-top: solid 2.5px var(--custom-tag-color);
+  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
+  overflow: hidden;
+}
+.ar-syntax > .pre.hidden {
+  display: none;
+}
+.ar-syntax > .pre.visible {
+  display: block;
+}
+.ar-syntax > .pre > code {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem 0;
+  padding: 1rem;
+  font-family: var(--jetBrainsMonoRegular) !important;
+  font-size: 0.9rem;
+  overflow-x: auto;
+}

package/dist/assets/css/components/data-display/table/filter-popup.css

@@ -0,0 +1,11 @@
+.ar-table-filter-popup {
+  position: absolute;
+  background-color: var(--white);
+  width: 225px;
+  max-height: 300px;
+  padding: 1rem;
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
+  transition: top 350ms, left 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+  z-index: 1052;
+}

package/dist/assets/css/components/data-display/table/properties-popup.css

@@ -0,0 +1,42 @@
+.ar-table-properties-popup {
+  position: absolute;
+  background-color: var(--white);
+  width: 225px;
+  padding: 0.5rem 0;
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
+  transition:
+    top 350ms,
+    left 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+  z-index: 1052;
+
+  > ul {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+
+    > li {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      width: 100%;
+      padding: 0.5rem;
+      cursor: pointer;
+      transition: background 250ms ease-in-out;
+      user-select: none;
+
+      &:hover {
+        background-color: var(--gray-100);
+      }
+
+      > span {
+        position: relative;
+
+        &:first-child {
+          top: 2.5px;
+        }
+      }
+    }
+  }
+}