@harjs/react-ui 1.0.0

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

@@ -0,0 +1,184 @@
+@import url("./options.css");
+
+.ar-select-wrapper {
+  position: relative;
+  width: 100%;
+  user-select: none;
+
+  > .ar-select {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    position: relative;
+    width: 100%;
+
+    > .wrapper {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      width: 100%;
+
+      > .selections {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        width: 100%;
+        min-height: var(--input-height);
+        padding: 0.35rem 0.5rem;
+
+        > .items {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.25rem;
+          width: calc(100% - 2.75rem);
+        }
+
+        > ul {
+          display: flex;
+          flex-direction: row;
+          gap: 0.5rem;
+
+          > li {
+            background-color: var(--gray-100);
+            padding: 0 0.5rem;
+            border: solid 1px var(--gray-200);
+            border-radius: var(--border-radius-sm);
+          }
+        }
+      }
+
+      > span {
+        &.placeholder {
+          position: absolute;
+          top: calc(var(--input-height) / 2);
+          transform: translateY(-50%);
+          left: 0.55rem;
+          color: var(--dark);
+          font-size: 1rem;
+          font-weight: 400;
+          font-family: var(--system);
+          z-index: 1;
+          transition: top 250ms ease-in-out;
+
+          &.visible {
+            visibility: visible;
+            opacity: 1;
+            top: -0.5rem;
+            transform: translateY(0);
+            left: 0.55rem;
+            padding: 0 0.5rem;
+            color: var(--gray-600);
+            font-size: 0.75rem;
+            letter-spacing: 1px;
+          }
+        }
+      }
+    }
+
+    > .ar-input-wrapper {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      > .ar-input {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        > .input {
+          width: 100%;
+
+          > input {
+            width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            outline: none;
+          }
+        }
+      }
+    }
+
+    .buttons {
+      position: absolute;
+      right: 0;
+      display: flex;
+      flex-direction: row;
+
+      > .angel-down {
+        position: absolute;
+        top: calc(var(--input-height) / 2);
+        transform: translateY(-50%);
+        right: 0.5rem;
+        width: 0.75rem;
+        height: 0.75rem;
+        cursor: pointer;
+        transform-origin: center;
+        transition: transform 250ms ease-in-out;
+
+        &.opened {
+          transform: translateY(-50%) scaleY(-1);
+        }
+
+        &.closed {
+          transform: translateY(-50%) scaleY(1);
+        }
+
+        &::before {
+          display: inline-block;
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          border: 1px transparent;
+          border-top-style: dashed;
+          border-right-style: dashed;
+          border-bottom-style: solid;
+          border-left-style: solid;
+          border-top-color: rgba(var(--black-rgb), 0.1);
+          border-right-color: rgba(var(--black-rgb), 0.1);
+          border-bottom-color: rgba(var(--black-rgb), 0.5);
+          border-left-color: rgba(var(--black-rgb), 0.5);
+          transform: rotate(-45deg);
+        }
+      }
+
+      > .button-clear {
+        position: absolute;
+        top: calc(var(--input-height) / 2);
+        transform: translateY(-50%);
+        right: 2rem;
+        background-color: rgba(var(--black-rgb), 0.25);
+        backdrop-filter: blur(5px);
+        width: 1rem;
+        height: 1rem;
+        border-radius: var(--border-radius-pill);
+        text-align: center;
+        line-height: 0.7rem;
+        cursor: pointer;
+
+        &.opened {
+          visibility: visible;
+          opacity: 1;
+        }
+
+        &.closed {
+          visibility: hidden;
+          opacity: 0;
+        }
+
+        &::before {
+          content: "x";
+          color: var(--white);
+          font-size: 0.75rem;
+        }
+      }
+    }
+
+    > .validation {
+      color: var(--danger);
+      font-size: 0.8rem;
+      font-weight: 400;
+    }
+  }
+}

package/dist/assets/css/components/form/switch/core/border.css

@@ -0,0 +1,208 @@
+/* #region Border Color -> BLUE */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.blue {
+        background-color: var(--blue-500);
+      }
+
+      &.checked {
+        + .span.blue {
+          background-color: var(--blue-500);
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> BLUE */
+
+/* #region Border Color -> PURPLE */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.purple {
+        background-color: var(--purple-500);
+      }
+
+      &.checked {
+        + .span.purple {
+          background-color: var(--purple-500);
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> PURPLE */
+
+/* #region Border Color -> PINK */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.pink {
+        background-color: var(--pink-500);
+      }
+
+      &.checked {
+        + .span.pink {
+          background-color: var(--pink-500);
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> PINK */
+
+/* #region Border Color -> RED */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.red {
+        background-color: var(--red-500);
+      }
+
+      &.checked {
+        + .span.red {
+          background-color: var(--red-500);
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> RED */
+
+/* #region Border Color -> ORANGE */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.orange {
+        background-color: var(--orange-500);
+      }
+
+      &.checked {
+        + .span.orange {
+          background-color: var(--orange-500);
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> ORANGE */
+
+/* #region Border Color -> YELLOW */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.yellow {
+        background-color: var(--yellow-500);
+      }
+
+      &.checked {
+        + .span.yellow {
+          background-color: var(--yellow-500);
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> YELLOW */
+
+/* #region Border Color -> GREEN */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.green {
+        background-color: var(--green-500);
+      }
+
+      &.checked {
+        + .span.green {
+          background-color: var(--green-500);
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> GREEN */
+
+/* #region Border Color -> TEAL */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.teal {
+        background-color: var(--teal-500);
+      }
+
+      &.checked {
+        + .span.teal {
+          background-color: var(--teal-500);
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> TEAL */
+
+/* #region Border Color -> CYAN */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.cyan {
+        background-color: var(--cyan-500);
+      }
+
+      &.checked {
+        + .span.cyan {
+          background-color: var(--cyan-500);
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> CYAN */
+
+/* #region Border Color -> GRAY */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.gray {
+        background-color: var(--gray-500);
+      }
+
+      &.checked {
+        + .span.gray {
+          background-color: var(--gray-500);
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> GRAY */
+
+/* #region Border Color -> LIGHT */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.light {
+        background-color: var(--light-500);
+      }
+
+      &.checked {
+        + .span.light {
+          background-color: var(--light-500);
+        }
+      }
+    }
+  }
+}
+/* #endregion */
+/* Border Color -> LIGHT */

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

@@ -0,0 +1,61 @@
+@import url("./core/border.css");
+
+.ar-switch-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+  height: var(--input-height);
+
+  > label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0 0.5rem;
+    font-weight: 400;
+    user-select: none;
+
+    > input[type="checkbox"] {
+      display: none;
+
+      + .ar-switch {
+        > .handle {
+          position: absolute;
+          top: 50%;
+          left: 0;
+          transform: translateY(-50%);
+          display: inline-block;
+          content: "";
+          background-color: var(--white);
+          width: 1rem;
+          height: 1rem;
+          border: solid 1px var(--gray-300);
+          box-shadow: 0 0 0 0 rgba(var(--black-rgb), 0.2);
+          transition:
+            left 150ms,
+            width 150ms 150ms,
+            height 150ms 150ms,
+            box-shadow 150ms 150ms ease-in-out;
+        }
+      }
+
+      &.checked {
+        + .ar-switch {
+          > .handle {
+            left: calc(2.25rem - 1rem);
+            border: none;
+            box-shadow: 0 0 0 5px rgba(var(--black-rgb), 0.2);
+          }
+        }
+      }
+    }
+
+    > .ar-switch {
+      position: relative;
+      display: inline-block;
+      width: 2.25rem;
+      height: 1rem;
+      transition: box-shadow 250ms ease-in-out;
+    }
+  }
+}

package/dist/assets/css/components/form/text-editor/styles.css

@@ -0,0 +1,130 @@
+.ar-text-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+
+  > label {
+    position: absolute;
+    top: 1.5rem;
+    left: 0.85rem;
+    display: block;
+    padding: 0 0.5rem;
+    color: var(--gray-500);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.visible {
+      visibility: visible;
+      opacity: 1;
+      display: block;
+      top: 0.25rem;
+      left: 1.25rem;
+      padding: 0 0.5rem;
+      font-size: 0.75rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  > iframe {
+    width: 100%;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  > .toolbar {
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+    margin-top: -1px;
+    border: solid 1px transparent;
+    border-left-color: var(--gray-300);
+    border-right-color: var(--gray-300);
+    border-bottom-color: var(--gray-300);
+  }
+
+  > .resize {
+    position: relative;
+    background-color: var(--gray-100);
+    width: 100%;
+    height: 1.5rem;
+    border: solid 1px transparent;
+    border-left-color: var(--gray-300);
+    border-right-color: var(--gray-300);
+    border-bottom-color: var(--gray-300);
+    border-bottom-left-radius: var(--border-radius-sm);
+    border-bottom-right-radius: var(--border-radius-sm);
+    cursor: ns-resize;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: var(--gray-500);
+      width: 1.5rem;
+      height: 0.1rem;
+      box-shadow:
+        0px -5px 0 0px var(--gray-500),
+        0px 5px 0 0px var(--gray-500);
+    }
+  }
+
+  > .validation {
+    color: var(--danger);
+    font-size: 0.8rem;
+    font-weight: 400;
+  }
+}
+
+.ar-alias-panel {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  background-color: var(--white);
+  width: 200px;
+  max-height: 250px;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-lg);
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-shadow: 0 10px 15px -5px rgba(var(--black-rgb), 0.1);
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: opened ease-in-out 250ms 0s 1 normal both;
+
+  > ul {
+    > li {
+      display: flex;
+      align-items: center;
+      gap: 0 0.5rem;
+      padding: 0 1rem;
+      height: var(--input-height);
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--gray-100);
+      }
+    }
+  }
+}
+
+.ar-text-editor--block-item {
+  position: absolute;
+  inset: 0;
+  cursor: ns-resize;
+}
+
+@keyframes opened {
+  from {
+    visibility: hidden;
+    opacity: 0;
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+  }
+}