@harjs/react-ui 1.1.4 → 1.1.6

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

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

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

@@ -0,0 +1,38 @@
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+
+const radiuses = ["0", "2", "4", "6", "8", "12", "16", "20", "40", "full"];
+const sizes = [
+  { name: "xs", height: "320px" },
+  { name: "sm", height: "384px" },
+  { name: "md", height: "512px" },
+  { name: "lg", height: "640px" },
+  { name: "xl", height: "896px" },
+  { name: "xxl", height: "1200px" },
+];
+
+const radiusTemplate = fs.readFileSync("templates/radius.template.css", "utf-8");
+const sizeTemplate = fs.readFileSync("templates/size.template.css", "utf-8");
+
+let radiusOutput = `.har-drawer-wrapper { > .har-drawer {${radiuses.map((radius) => radiusTemplate.replace(/__RADIUS__/g, radius)).join("\n")}}}`;
+let sizeOutput = `.har-drawer-wrapper { > .har-drawer {${sizes
+  .map((size) =>
+    sizeTemplate
+      .replace(/__SIZE__/g, size.name)
+      .replace(/__SIZE_NUMBER__/g, size.height)
+      .replace(/__FONT_SIZE__/g, size.fontSize),
+  )
+  .join("\n")}}}`;
+
+fs.writeFileSync("radius.css", radiusOutput);
+fs.writeFileSync("size.css", sizeOutput);
+
+try {
+  execSync(`npx prettier --write radius.css`, { stdio: "inherit" });
+  execSync(`npx prettier --write size.css`, { stdio: "inherit" });
+
+  execSync("npm run no-css-build", { stdio: "inherit" });
+} catch (err) {
+  console.error("⚠️ Prettier çalıştırılamadı:", err.message);
+}

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

@@ -1,56 +1,72 @@
-.ar-drawer-wrapper > .ar-drawer > .header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  height: 3.5rem;
-  padding: 0 2rem;
-  border-bottom: solid 1px var(--gray-200);
-}
-.ar-drawer-wrapper > .ar-drawer > .header > .ar-typography-title {
-  width: calc(100% - 2.75rem);
-  text-wrap: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
+.har-drawer-wrapper {
+  > .har-drawer {
+    > .header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      height: 3.5rem;
+      padding: 0 2rem;
+      border-bottom: solid 1px var(--gray-200);
 
-.ar-drawer-wrapper > .ar-drawer > .header > .close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--white);
-  min-width: 2rem;
-  min-height: 2rem;
-  border: solid 1px var(--gray-300);
-  border-radius: var(--border-radius-sm);
-  cursor: pointer;
-  user-select: none;
-  transition: background 250ms, border 250ms ease-in-out;
-}
-.ar-drawer-wrapper > .ar-drawer > .header > .close::before,
-.ar-drawer-wrapper > .ar-drawer > .header > .close::after {
-  position: absolute;
-  content: "";
-  width: 2px;
-  height: 15px;
-  background-color: var(--gray-300);
-  transform-origin: center;
-  transform: rotate(-45deg);
-  transition: transform 250ms ease-in-out;
-}
-.ar-drawer-wrapper > .ar-drawer > .header > .close::after {
-  transform: rotate(45deg);
-}
-.ar-drawer-wrapper > .ar-drawer > .header > .close:hover {
-  background-color: rgba(var(--danger-rgb), 0.1);
-  border: solid 1px var(--danger);
-  color: rgba(var(--danger-rgb), 0.75);
-}
-.ar-drawer-wrapper > .ar-drawer > .header > .close:hover::before,
-.ar-drawer-wrapper > .ar-drawer > .header > .close:hover::after {
-  background-color: var(--danger);
-  transform: rotate(45deg);
+      > .har-typography-title {
+        width: calc(100% - 2.75rem);
+        text-wrap: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      > .close {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--white-100);
+        min-width: 2rem;
+        min-height: 2rem;
+        border: solid 1px var(--gray-300);
+        border-radius: var(--radius-4);
+        cursor: pointer;
+        user-select: none;
+        transition:
+          background 250ms,
+          border 250ms ease-in-out;
+
+        &:hover {
+          background-color: rgba(var(--danger-rgb), 0.1);
+          border: solid 1px var(--danger);
+          color: rgba(var(--danger-rgb), 0.75);
+
+          &::before,
+          &::after {
+            background-color: var(--danger);
+            transform: rotate(45deg);
+          }
+
+          &::after {
+            transform: rotate(-45deg);
+          }
+        }
+
+        &::before,
+        &::after {
+          position: absolute;
+          content: "";
+          width: 2px;
+          height: 15px;
+          background-color: var(--gray-300);
+          transform-origin: center;
+          transform: rotate(-45deg);
+          transition: transform 250ms ease-in-out;
+        }
+
+        &::after {
+          transform: rotate(45deg);
+        }
+      }
+    }
+  }
 }
-.ar-drawer-wrapper > .ar-drawer > .header > .close:hover::after {
+
+.har-drawer-wrapper > .har-drawer > .header > .close:hover::after {
   transform: rotate(-45deg);
 }

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

@@ -0,0 +1,53 @@
+.har-drawer-wrapper {
+  > .har-drawer {
+    &.radius-0 {
+      border-top-left-radius: var(--radius-0);
+      border-bottom-left-radius: var(--radius-0);
+    }
+
+    &.radius-2 {
+      border-top-left-radius: var(--radius-2);
+      border-bottom-left-radius: var(--radius-2);
+    }
+
+    &.radius-4 {
+      border-top-left-radius: var(--radius-4);
+      border-bottom-left-radius: var(--radius-4);
+    }
+
+    &.radius-6 {
+      border-top-left-radius: var(--radius-6);
+      border-bottom-left-radius: var(--radius-6);
+    }
+
+    &.radius-8 {
+      border-top-left-radius: var(--radius-8);
+      border-bottom-left-radius: var(--radius-8);
+    }
+
+    &.radius-12 {
+      border-top-left-radius: var(--radius-12);
+      border-bottom-left-radius: var(--radius-12);
+    }
+
+    &.radius-16 {
+      border-top-left-radius: var(--radius-16);
+      border-bottom-left-radius: var(--radius-16);
+    }
+
+    &.radius-20 {
+      border-top-left-radius: var(--radius-20);
+      border-bottom-left-radius: var(--radius-20);
+    }
+
+    &.radius-40 {
+      border-top-left-radius: var(--radius-40);
+      border-bottom-left-radius: var(--radius-40);
+    }
+
+    &.radius-full {
+      border-top-left-radius: var(--radius-full);
+      border-bottom-left-radius: var(--radius-full);
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+.har-drawer-wrapper {
+  > .har-drawer {
+    &.xs {
+      right: -320px;
+      width: 320px;
+    }
+
+    &.sm {
+      right: -384px;
+      width: 384px;
+    }
+
+    &.md {
+      right: -512px;
+      width: 512px;
+    }
+
+    &.lg {
+      right: -640px;
+      width: 640px;
+    }
+
+    &.xl {
+      right: -896px;
+      width: 896px;
+    }
+
+    &.xxl {
+      right: -1200px;
+      width: 1200px;
+    }
+  }
+}

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

@@ -1,85 +1,80 @@
-@import url("./header.css");
 @import url("./content.css");
+@import url("./header.css");
+@import url("./radius.css");
+@import url("./size.css");
 
-.ar-drawer-wrapper {
+.har-drawer-wrapper {
   position: fixed;
   inset: 0;
   z-index: 1050;
-}
-.ar-drawer-wrapper > .ar-drawer-bg {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(var(--black-rgb), 0.5);
-}
 
-/* #region Open or Close */
-.ar-drawer-wrapper.opened {
-  visibility: visible;
-  opacity: 1;
-  z-index: 100;
-}
-.ar-drawer-wrapper.closed {
-  visibility: hidden;
-  opacity: 0;
-  z-index: 99;
-}
-/* #endregion */
-/* Open or Close */
+  &.opened {
+    visibility: visible;
+    opacity: 1;
 
-.ar-drawer-wrapper > .ar-drawer {
-  position: absolute;
-  right: -85%;
-  background-color: var(--white);
-  width: 85%;
-  height: 100%;
-  border-top-left-radius: var(--border-radius-sm);
-  border-bottom-left-radius: var(--border-radius-sm);
-}
-.ar-drawer-wrapper.opened > .ar-drawer {
-  animation: open 1s ease 0s 1 normal forwards;
-}
+    z-index: 100;
 
-.ar-drawer-wrapper > .ar-drawer > .tabs {
-  position: absolute;
-  right: 100%;
-  top: 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.5rem;
-  user-select: none;
-}
-.ar-drawer-wrapper > .ar-drawer > .tabs > .item {
-  position: relative;
-  background-color: var(--gray-300);
-  width: fit-content;
-  padding: 0.5rem 1rem;
-  border-top-left-radius: var(--border-radius-sm);
-  border-bottom-left-radius: var(--border-radius-sm);
-  cursor: pointer;
-}
-.ar-drawer-wrapper > .ar-drawer > .tabs > .item.selection {
-  background-color: var(--white);
-  border-right: solid 2.5px var(--primary);
-}
-.ar-drawer-wrapper > .ar-drawer > .tabs > .item.selection::before {
-  position: absolute;
-  top: 50%;
-  left: 100%;
-  transform: translateY(-50%);
-  content: "";
-  border: solid 10px transparent;
-  border-left-color: var(--primary);
-}
-.ar-drawer-wrapper > .ar-drawer > .tabs > .item > span {
-  text-wrap: nowrap;
-}
+    > .har-drawer {
+      right: 0;
+    }
+  }
+
+  &.closed {
+    visibility: hidden;
+    opacity: 0;
+    z-index: 99;
+  }
 
-@keyframes open {
-  0% {
-    right: -75%;
+  > .har-drawer-bg {
+    position: fixed;
+    inset: 0;
+    background-color: var(--black-50);
   }
-  100% {
-    right: 0px;
+
+  > .har-drawer {
+    position: absolute;
+    background-color: var(--white-100);
+    height: 100%;
+    transition: right 250ms ease-in-out;
+
+    > .tabs {
+      position: absolute;
+      right: 100%;
+      top: 100px;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 0.5rem;
+      user-select: none;
+
+      > .item {
+        position: relative;
+        background-color: var(--gray-300);
+        width: fit-content;
+        padding: 0.5rem 1rem;
+        border-top-left-radius: var(--radius-4);
+        border-bottom-left-radius: var(--radius-4);
+        cursor: pointer;
+
+        > span {
+          text-wrap: nowrap;
+        }
+      }
+
+      > .item.selection {
+        background-color: var(--white-100);
+        border-right: solid 2.5px var(--primary);
+
+        ::before {
+          position: absolute;
+          top: 50%;
+          left: 100%;
+          transform: translateY(-50%);
+          content: "";
+          border: solid 10px transparent;
+          border-left-color: var(--primary);
+        }
+      }
+    }
   }
 }

package/dist/assets/css/components/feedback/drawer/templates/radius.template.css

@@ -0,0 +1,4 @@
+&.radius-__RADIUS__ {
+  border-top-left-radius: var(--radius-__RADIUS__);
+  border-bottom-left-radius: var(--radius-__RADIUS__);
+}

package/dist/assets/css/components/feedback/drawer/templates/size.template.css

@@ -0,0 +1,4 @@
+&.__SIZE__ {
+  right: -__SIZE_NUMBER__;
+  width: __SIZE_NUMBER__;
+}

package/dist/assets/css/components/feedback/loading/loading.css

@@ -4,7 +4,7 @@
   align-items: center;
   position: fixed;
   inset: 0;
-  background-color: rgba(var(--black-rgb), 0.5);
+  background-color: var(--black-50);
   animation: background 250ms linear 0s 1 normal both;
   z-index: 1051;
 }
@@ -12,7 +12,7 @@
   content: "";
   width: 1rem;
   height: 1rem;
-  border-radius: var(--border-radius-pill);
+  border-radius: var(--radius-full);
   transform: rotate(-135deg);
   animation: spin 1s linear 0s infinite normal both;
 }
@@ -30,23 +30,35 @@
 
 @keyframes spin {
   0% {
-    background-color: var(--white);
+    background-color: var(--white-100);
   }
   20% {
-    box-shadow: -1.25rem -1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem -1.25rem 0 0 rgba(var(--white-rgb), 0.75),
-      -1.25rem 1.25rem 0 0 rgba(var(--white-rgb), 0.75), 1.25rem 1.25rem 0 0 rgba(var(--white-rgb), 0.75);
+    box-shadow:
+      -1.25rem -1.25rem 0 0 rgba(var(--warning-rgb), 0.75),
+      1.25rem -1.25rem 0 0 rgba(var(--white-rgb), 0.75),
+      -1.25rem 1.25rem 0 0 rgba(var(--white-rgb), 0.75),
+      1.25rem 1.25rem 0 0 rgba(var(--white-rgb), 0.75);
   }
   40% {
-    box-shadow: -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem -1.25rem 0 0 rgba(var(--white-rgb), 0.75),
-      -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem 1.25rem 0 0 rgba(var(--white-rgb), 0.75);
+    box-shadow:
+      -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75),
+      1.25rem -1.25rem 0 0 rgba(var(--white-rgb), 0.75),
+      -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75),
+      1.25rem 1.25rem 0 0 rgba(var(--white-rgb), 0.75);
   }
   60% {
-    box-shadow: -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem -1.25rem 0 0 rgba(var(--white-rgb), 0.75),
-      1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75);
+    box-shadow:
+      -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75),
+      1.25rem -1.25rem 0 0 rgba(var(--white-rgb), 0.75),
+      1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75),
+      1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75);
   }
   80% {
-    box-shadow: -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem -1.25rem 0 0 rgba(var(--warning-rgb), 0.75),
-      1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75), 1.25rem -1.25rem 0 0 rgba(var(--warning-rgb), 0.75);
+    box-shadow:
+      -1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75),
+      1.25rem -1.25rem 0 0 rgba(var(--warning-rgb), 0.75),
+      1.25rem 1.25rem 0 0 rgba(var(--warning-rgb), 0.75),
+      1.25rem -1.25rem 0 0 rgba(var(--warning-rgb), 0.75);
   }
   100% {
     background-color: var(--warning);

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

@@ -1,6 +1,16 @@
-.ar-modal-wrapper > .ar-modal > .content {
-  max-height: calc(100vh - 180px - 3.5rem - 4rem - 2rem);
-  padding: 2rem;
-  overflow-x: auto;
-  overflow-y: auto;
+.har-modal-wrapper {
+  > .har-modal {
+    > .content {
+      max-height: calc(100vh - 180px - 3.5rem - 4rem - 2rem);
+      padding: 2rem;
+      overflow-x: auto;
+      overflow-y: auto;
+
+      &.fit {
+        overflow: visible;
+        max-height: none;
+        padding: 0;
+      }
+    }
+  }
 }

package/dist/assets/css/components/feedback/modal/css.cjs

@@ -0,0 +1,41 @@
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+
+const radiuses = ["0", "2", "4", "6", "8", "12", "16", "20", "40", "full"];
+const sizes = [
+  { name: "xs", height: "320px" },
+  { name: "sm", height: "384px" },
+  { name: "md", height: "512px" },
+  { name: "lg", height: "640px" },
+  { name: "xl", height: "896px" },
+  { name: "xxl", height: "1200px" },
+];
+
+const radiusTemplate = fs.readFileSync(
+  "templates/radius.template.css",
+  "utf-8",
+);
+const sizeTemplate = fs.readFileSync("templates/size.template.css", "utf-8");
+
+let radiusOutput = `.har-modal-wrapper { > .har-modal {${radiuses.map((radius) => radiusTemplate.replace(/__RADIUS__/g, radius)).join("\n")}}}`;
+let sizeOutput = `.har-modal-wrapper { > .har-modal {${sizes
+  .map((size) =>
+    sizeTemplate
+      .replace(/__SIZE__/g, size.name)
+      .replace(/__SIZE_NUMBER__/g, size.height)
+      .replace(/__FONT_SIZE__/g, size.fontSize),
+  )
+  .join("\n")}}}`;
+
+fs.writeFileSync("radius.css", radiusOutput);
+fs.writeFileSync("size.css", sizeOutput);
+
+try {
+  execSync(`npx prettier --write radius.css`, { stdio: "inherit" });
+  execSync(`npx prettier --write size.css`, { stdio: "inherit" });
+
+  execSync("npm run no-css-build", { stdio: "inherit" });
+} catch (err) {
+  console.error("⚠️ Prettier çalıştırılamadı:", err.message);
+}

package/dist/assets/css/components/feedback/modal/footer.css

@@ -1,9 +1,13 @@
-.ar-modal-wrapper > .ar-modal > .footer {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
-  gap: 0 0.5rem;
-  padding: 1rem 2rem;
-  border-top: solid 1px var(--gray-200);
+.har-modal-wrapper {
+  > .har-modal {
+    > .footer {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-end;
+      gap: 0 0.5rem;
+      padding: 1rem 2rem;
+      border-top: solid 1px var(--gray-200);
+    }
+  }
 }