@harjs/react-ui 1.0.0

package/dist/assets/css/components/form/upload/dropzone.css

@@ -0,0 +1,166 @@
+.ar-upload-button {
+  > .button.dropzone {
+    > .preview {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      width: 100%;
+      height: 100%;
+
+      > .selected-image {
+        background-color: var(--black);
+        height: 100%;
+        object-fit: contain;
+        object-position: center;
+      }
+
+      > .informations {
+        visibility: visible;
+        opacity: 1;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        gap: 0.5rem;
+        position: absolute;
+        inset: auto 0 0 0;
+        background-color: rgba(var(--black-rgb), 0.75);
+        padding: 0.5rem;
+        transition:
+          visibility 250ms,
+          opacity 250ms ease-in-out;
+        font-family: var(--system);
+
+        > .file-name {
+          color: var(--white);
+          font-size: 0.75rem;
+          font-weight: 700;
+        }
+
+        > div {
+          display: flex;
+          gap: 0.25rem;
+
+          > .file-size {
+            background-color: var(--primary);
+            padding: 0.25rem 0 0.25rem 0.25rem;
+            border-radius: var(--border-radius-sm);
+            color: var(--white);
+            font-size: 0.75rem;
+            font-weight: 700;
+
+            > .size-type {
+              background-color: rgba(var(--black-rgb), 0.5);
+              margin-left: 0.25rem;
+              border-top-right-radius: var(--border-radius-sm);
+              border-bottom-right-radius: var(--border-radius-sm);
+              padding: 0.25rem;
+              color: var(--primary);
+              font-weight: 700;
+            }
+          }
+
+          > .file-type {
+            background-color: var(--warning);
+            padding: 0.25rem;
+            border-radius: var(--border-radius-sm);
+            color: var(--black);
+            font-size: 0.75rem;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+
+    > .items {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      background-color: var(--primary);
+      backdrop-filter: blur(5px);
+      width: 10rem;
+      height: 12.5rem;
+      border-left: solid 1px rgba(var(--black-rgb), 0.75);
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      > .item {
+        --size: 5rem;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        min-width: var(--size);
+        min-height: var(--size);
+        height: var(--size);
+        border-bottom: solid 1px rgba(var(--black-rgb), 0.75);
+        overflow: hidden;
+
+        > .buttons {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          &::before {
+            position: absolute;
+            inset: 0;
+            content: "";
+            background-color: transparent;
+            z-index: 1;
+            transition: background-color 250ms ease-in-out;
+          }
+
+          &:hover {
+            &::before {
+              background-color: rgba(var(--black-rgb), 0.75);
+            }
+
+            div {
+              visibility: visible;
+              opacity: 1;
+            }
+          }
+
+          > div {
+            display: flex;
+            flex-direction: row;
+            visibility: hidden;
+            opacity: 0;
+            z-index: 2;
+            transition:
+              visibility 250ms,
+              opacity 250ms ease-in-out;
+          }
+        }
+
+        > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: top;
+        }
+
+        .error {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 0.5rem;
+          background-color: rgba(var(--danger-rgb), 0.75);
+          color: var(--white);
+          font-size: 0.75rem;
+          font-weight: 700;
+          text-align: center;
+          z-index: 5;
+        }
+      }
+    }
+  }
+}

package/dist/assets/css/components/form/upload/list-and-gird.css

@@ -0,0 +1,183 @@
+.ar-upload {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 0.75rem;
+  width: 100%;
+  height: 100%;
+
+  > button {
+    width: max-content !important;
+  }
+
+  > ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+
+    &.list {
+      flex-direction: column;
+
+      &.row,
+      &.column {
+        margin: 0;
+
+        > li {
+          width: 100%;
+        }
+      }
+    }
+
+    &.grid {
+      flex-direction: row;
+
+      &.row {
+        margin: 0;
+
+        > li {
+          max-width: calc(100% / 4);
+        }
+      }
+
+      &.column {
+        > li {
+          width: 100%;
+        }
+      }
+    }
+
+    > li {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 0.5rem;
+      border: solid 1px var(--gray-300);
+      border-radius: var(--border-radius-sm);
+      overflow: hidden;
+
+      &::before {
+        position: absolute;
+        inset: 0;
+        content: "";
+        background-color: transparent;
+        z-index: 1;
+        transition: background-color 250ms ease-in-out;
+      }
+
+      &:hover {
+        border: solid 1px transparent;
+      }
+      &:hover::before {
+        background-color: rgba(var(--black-rgb), 0.25);
+      }
+
+      &:has(> .error) {
+        border: solid 1px var(--danger);
+      }
+
+      .error {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+        background-color: rgba(var(--danger-rgb), 0.75);
+        color: var(--white);
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-align: center;
+        z-index: 5;
+      }
+
+      .buttons {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:hover {
+          div {
+            visibility: visible;
+            opacity: 1;
+          }
+        }
+
+        &::before {
+          position: absolute;
+          inset: 0;
+          content: "";
+          background-color: transparent;
+          z-index: 1;
+          transition: background-color 250ms ease-in-out;
+        }
+
+        &:hover::before {
+          background-color: rgba(var(--black-rgb), 0.75);
+        }
+
+        > div {
+          display: flex;
+          flex-direction: row;
+          visibility: hidden;
+          opacity: 0;
+          z-index: 2;
+          transition:
+            visibility 250ms,
+            opacity 250ms ease-in-out;
+        }
+      }
+
+      > .file-name {
+        width: 100%;
+        color: var(--gray-700);
+        font-size: 0.75rem;
+        font-weight: 700;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      > div {
+        display: flex;
+        gap: 0.25rem;
+
+        > .file-size {
+          background-color: var(--primary);
+          padding: 0.25rem 0 0.25rem 0.25rem;
+          border-radius: var(--border-radius-sm);
+          color: var(--white);
+          font-size: 0.65rem;
+          font-weight: 700;
+          text-wrap: nowrap;
+
+          > .size-type {
+            background-color: rgba(var(--black-rgb), 0.5);
+            margin-left: 0.25rem;
+            border-top-right-radius: var(--border-radius-sm);
+            border-bottom-right-radius: var(--border-radius-sm);
+            padding: 0.25rem;
+            color: var(--primary);
+            font-size: 0.65rem;
+            font-weight: 700;
+            text-wrap: nowrap;
+          }
+        }
+
+        > .file-type {
+          background-color: var(--warning);
+          padding: 0.25rem;
+          border-radius: var(--border-radius-sm);
+          color: var(--black);
+          font-size: 0.65rem;
+          font-weight: 700;
+          text-wrap: nowrap;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,215 @@
+@import url("./list-and-gird.css");
+@import url("./dropzone.css");
+
+.ar-upload {
+  position: relative;
+
+  > input {
+    display: none;
+  }
+
+  > .ar-upload-button {
+    &.selected-files {
+      list-style: none;
+
+      > li {
+        display: flex;
+        flex-direction: row;
+        gap: 0 0.5rem;
+
+        > span {
+          &:first-child {
+            font-size: 0.15rem;
+          }
+        }
+      }
+    }
+
+    > .button {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 1rem;
+      height: 8.5rem;
+      border: dashed 1px var(--gray-300);
+      border-radius: var(--border-radius-sm);
+      cursor: pointer;
+      user-select: none;
+      transition:
+        border 250ms,
+        box-shadow 250ms ease-in-out;
+
+      &:has(.preview > img) {
+        padding: 0;
+        border: solid 1px rgba(var(--black-rgb), 0.75);
+        overflow: hidden;
+      }
+
+      &:not(.dropzone) {
+        &:hover {
+          .preview {
+            > .informations {
+              visibility: hidden;
+              opacity: 0;
+            }
+          }
+        }
+
+        &:has(.preview > img) {
+          &:hover {
+            border: solid 1px transparent !important;
+          }
+        }
+      }
+
+      &.dropzone {
+        height: 12.5rem !important;
+      }
+
+      &.has-file {
+        flex-direction: row !important;
+        justify-content: flex-end !important;
+        gap: 0 !important;
+        align-items: flex-start !important;
+      }
+
+      &.dragging {
+        box-shadow: 0 0 0 2.5px rgba(var(--primary-rgb), 0.75);
+      }
+
+      > .preview {
+        > .buttons {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          &::before {
+            position: absolute;
+            inset: 0;
+            content: "";
+            background-color: transparent;
+            z-index: 1;
+            transition: background-color 250ms ease-in-out;
+          }
+
+          &:hover {
+            &::before {
+              background-color: rgba(var(--black-rgb), 0.75);
+            }
+
+            div {
+              visibility: visible;
+              opacity: 1;
+            }
+          }
+
+          > div {
+            display: flex;
+            flex-direction: row;
+            visibility: hidden;
+            opacity: 0;
+            z-index: 2;
+            transition:
+              visibility 250ms,
+              opacity 250ms ease-in-out;
+          }
+        }
+
+        > img {
+          width: 100%;
+          height: 100%;
+          object-fit: fill;
+          object-position: top;
+        }
+
+        > .informations {
+          visibility: visible;
+          opacity: 1;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          align-items: center;
+          gap: 0.5rem;
+          position: absolute;
+          inset: auto 0 0 0;
+          background-color: rgba(var(--black-rgb), 0.75);
+          padding: 0.5rem;
+          transition:
+            visibility 250ms,
+            opacity 250ms ease-in-out;
+
+          > .file-name {
+            width: 100%;
+            color: var(--white);
+            font-size: 0.75rem;
+            font-weight: 700;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          > div {
+            display: flex;
+            gap: 0.25rem;
+
+            > .file-size {
+              background-color: var(--primary);
+              padding: 0.25rem 0 0.25rem 0.25rem;
+              border-radius: var(--border-radius-sm);
+              color: var(--white);
+              font-size: 0.75rem;
+              font-weight: 700;
+
+              > .size-type {
+                background-color: rgba(var(--black-rgb), 0.5);
+                margin-left: 0.25rem;
+                border-top-right-radius: var(--border-radius-sm);
+                border-bottom-right-radius: var(--border-radius-sm);
+                padding: 0.25rem;
+                color: var(--primary);
+                font-weight: 700;
+              }
+            }
+
+            > .file-type {
+              background-color: var(--warning);
+              padding: 0.25rem;
+              border-radius: var(--border-radius-sm);
+              color: var(--black);
+              font-size: 0.75rem;
+              font-weight: 700;
+            }
+          }
+        }
+      }
+
+      > .upload {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+
+        > .properies {
+          display: flex;
+          flex-direction: row;
+          gap: 0.5rem;
+          font-size: 0.85rem;
+
+          > .max-size {
+            color: var(--gray-500);
+          }
+
+          > .allow-types {
+            color: var(--gray-500);
+          }
+        }
+      }
+    }
+  }
+}

package/dist/assets/css/components/layout/layout.css

@@ -0,0 +1,130 @@
+/* Media Queries */
+/* .... */
+@import url("./media-queries/xxx-large.css");
+@import url("./media-queries/xx-large.css");
+@import url("./media-queries/x-large.css");
+@import url("./media-queries/large.css");
+@import url("./media-queries/medium.css");
+@import url("./media-queries/small.css");
+@import url("./media-queries/x-small.css");
+
+.ar-layout {
+  display: flex;
+  flex-direction: row;
+
+  > aside.ar-aside {
+    position: sticky;
+    top: 0;
+    background-color: var(--gray-100);
+    height: 100vh;
+    box-sizing: border-box;
+  }
+
+  > aside.ar-aside.left {
+    position: sticky;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    min-width: 280px;
+    max-width: 280px;
+    border-right: solid 1px var(--gray-200);
+    user-select: none;
+    transition: all 250ms ease-in-out;
+    z-index: 11;
+
+    &.un-locked {
+      position: absolute;
+      min-width: 4.85rem;
+      max-width: 4.85rem;
+
+      &:hover {
+        min-width: 280px;
+        max-width: 280px;
+      }
+
+      + main {
+        > section {
+          &.full-width {
+            padding-left: 7.5rem;
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    > .button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: calc(2.5rem - (1.75rem / 2));
+      right: -0.875rem;
+      background-color: var(--white);
+      width: 1.75rem;
+      height: 1.75rem;
+      border-radius: var(--border-radius-lg);
+      color: var(--gray-400);
+      cursor: pointer;
+      box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
+      z-index: 1;
+    }
+
+    > .logo {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: 5rem;
+
+      &::after {
+        position: absolute;
+        top: 100%;
+        content: "";
+        background-color: rgba(var(--black-rgb), 0.1);
+        width: 100%;
+        height: 1px;
+      }
+    }
+
+    > footer {
+      position: fixed;
+      bottom: 1rem;
+    }
+  }
+
+  > aside.ar-aside.right {
+  }
+
+  > main {
+    display: flex;
+    flex-direction: column;
+
+    > header {
+      display: flex;
+      align-items: center;
+      position: sticky;
+      top: 0;
+      background-color: rgba(var(--white-rgb), 0.5);
+      backdrop-filter: blur(5px);
+      box-shadow: 0 10px 10px -15px rgba(var(--black-rgb), 0.25);
+      z-index: 10;
+
+      > .actions {
+        margin-left: auto;
+      }
+    }
+
+    > section {
+      width: 100%;
+      height: fit-content;
+      margin-left: auto;
+      margin-right: auto;
+      padding: 2.5rem;
+
+      &.full-width {
+        width: 100%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+/* Large (Tablet Yatay & Büyük Tablet) */
+@media (min-width: 768px) and (max-width: 991px) {
+  .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;
+  }
+}