@harjs/react-ui 1.1.4 → 1.1.6

package/dist/assets/css/components/form/button/css.cjs

@@ -0,0 +1,43 @@
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+
+const colors = ["blue", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan", "gray"];
+const radiuses = ["0", "2", "4", "6", "8", "12", "16", "20", "40", "full"];
+const sizes = [
+  { name: "xs", height: "2rem", fontSize: "0.75rem" },
+  { name: "sm", height: "2.25rem", fontSize: "0.875rem" },
+  { name: "md", height: "2.5rem", fontSize: "0.875rem" },
+  { name: "lg", height: "2.75rem", fontSize: "1rem" },
+  { name: "xl", height: "3rem", fontSize: "1rem" },
+  { name: "xxl", height: "3.25rem", fontSize: "1.25rem" },
+];
+
+const colorTemplate = fs.readFileSync("templates/color.template.css", "utf-8");
+const radiusTemplate = fs.readFileSync("templates/radius.template.css", "utf-8");
+const sizeTemplate = fs.readFileSync("templates/size.template.css", "utf-8");
+
+let colorOutput = `.har-button {${colors.map((color) => colorTemplate.replace(/__COLOR__/g, color)).join("\n")}}`;
+let radiusOutput = `.har-button {${radiuses.map((radius) => radiusTemplate.replace(/__RADIUS__/g, radius)).join("\n")}}`;
+let sizeOutput = `.har-button {${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("color.css", colorOutput);
+fs.writeFileSync("radius.css", radiusOutput);
+fs.writeFileSync("size.css", sizeOutput);
+
+try {
+  execSync(`npx prettier --write color.css`, { stdio: "inherit" });
+  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/form/button/icon.css

@@ -0,0 +1,47 @@
+.har-button {
+  &:is(.no-content) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 !important;
+
+    > .text {
+      gap: 0 !important;
+    }
+  }
+
+  &:is(.icon) {
+    &:not(.no-content) {
+      > .text {
+        gap: 0 0.5rem;
+      }
+    }
+  }
+
+  &:is(.icon-start) {
+    &:not(.no-content) {
+      > .text {
+        flex-direction: row;
+      }
+    }
+  }
+
+  &:is(.icon-end) {
+    &:not(.no-content) {
+      > .text {
+        flex-direction: row-reverse !important;
+      }
+    }
+  }
+}
+
+/* Custom Symbol */
+.har-button:is(.icon) .dotted::after {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  content: "⋮";
+  width: 100%;
+  height: 100%;
+  font-size: 1.25rem;
+}

package/dist/assets/css/components/form/button/position.css

@@ -0,0 +1,21 @@
+.har-button {
+  &.fixed {
+    position: fixed;
+  }
+  &.absolute {
+    position: absolute;
+  }
+
+  &.top {
+    top: 0.5rem;
+  }
+  &.right {
+    right: 0.5rem;
+  }
+  &.bottom {
+    bottom: 0.5rem;
+  }
+  &.left {
+    left: 0.5rem;
+  }
+}

package/dist/assets/css/components/form/button/radius.css

@@ -0,0 +1,41 @@
+.har-button {
+  &.radius-0 {
+    border-radius: var(--radius-0);
+  }
+
+  &.radius-2 {
+    border-radius: var(--radius-2);
+  }
+
+  &.radius-4 {
+    border-radius: var(--radius-4);
+  }
+
+  &.radius-6 {
+    border-radius: var(--radius-6);
+  }
+
+  &.radius-8 {
+    border-radius: var(--radius-8);
+  }
+
+  &.radius-12 {
+    border-radius: var(--radius-12);
+  }
+
+  &.radius-16 {
+    border-radius: var(--radius-16);
+  }
+
+  &.radius-20 {
+    border-radius: var(--radius-20);
+  }
+
+  &.radius-40 {
+    border-radius: var(--radius-40);
+  }
+
+  &.radius-full {
+    border-radius: var(--radius-full);
+  }
+}

package/dist/assets/css/components/form/button/shape.css

@@ -0,0 +1,8 @@
+.har-button {
+  &.circle {
+    border-radius: var(--radius-full);
+  }
+
+  .square {
+  }
+}

package/dist/assets/css/components/form/button/size.css

@@ -0,0 +1,67 @@
+.har-button {
+  &.xs {
+    height: 2rem;
+    font-size: 0.75rem;
+
+    &.shape {
+      width: 2rem;
+      aspect-ratio: 1;
+      padding: 0;
+    }
+  }
+
+  &.sm {
+    height: 2.25rem;
+    font-size: 0.875rem;
+
+    &.shape {
+      width: 2.25rem;
+      aspect-ratio: 1;
+      padding: 0;
+    }
+  }
+
+  &.md {
+    height: 2.5rem;
+    font-size: 0.875rem;
+
+    &.shape {
+      width: 2.5rem;
+      aspect-ratio: 1;
+      padding: 0;
+    }
+  }
+
+  &.lg {
+    height: 2.75rem;
+    font-size: 1rem;
+
+    &.shape {
+      width: 2.75rem;
+      aspect-ratio: 1;
+      padding: 0;
+    }
+  }
+
+  &.xl {
+    height: 3rem;
+    font-size: 1rem;
+
+    &.shape {
+      width: 3rem;
+      aspect-ratio: 1;
+      padding: 0;
+    }
+  }
+
+  &.xxl {
+    height: 3.25rem;
+    font-size: 1.25rem;
+
+    &.shape {
+      width: 3.25rem;
+      aspect-ratio: 1;
+      padding: 0;
+    }
+  }
+}

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

@@ -1,10 +1,12 @@
 /* Core Css */
-@import url("./core/shape.css");
-@import url("./core/icon.css");
-@import url("./core/position.css");
-@import url("./core/size.css");
+@import url("./color.css");
+@import url("./icon.css");
+@import url("./position.css");
+@import url("./radius.css");
+@import url("./shape.css");
+@import url("./size.css");
 
-.ar-button {
+.har-button {
   position: relative;
   min-width: fit-content;
   padding: 0 1rem;
@@ -16,17 +18,29 @@
     border 150ms,
     color 150ms ease-in-out;
   outline: none;
-}
-.ar-button.disabled {
-  cursor: no-drop;
-}
-.ar-button.full-width {
-  min-width: 100%;
-}
 
-.ar-button > .text {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-wrap: nowrap;
+  &.full-width {
+    min-width: 100%;
+  }
+
+  &.disabled {
+    color: var(--gray-500) !important;
+    cursor: no-drop;
+
+    &:hover {
+      background-color: var(--gray-100) !important;
+    }
+
+    &:active {
+      background-color: var(--gray-100) !important;
+      border: solid var(--stroke-1) var(--gray-100) !important;
+    }
+  }
+
+  > .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-wrap: nowrap;
+  }
 }

package/dist/assets/css/components/form/button/templates/color.template.css

@@ -0,0 +1,107 @@
+&.__COLOR__ {
+  &.filled {
+    background-color: var(--__COLOR__-500);
+    color: var(--white-100);
+
+    border: solid var(--stroke-1) var(--__COLOR__-500);
+
+    &:hover {
+      background-color: var(--__COLOR__-400);
+      border: solid var(--stroke-1) var(--__COLOR__-400);
+    }
+
+    &:active {
+      background-color: var(--__COLOR__-600);
+      border: solid var(--stroke-1) var(--__COLOR__-600);
+    }
+  }
+
+  &.surface {
+    background-color: var(--__COLOR__-500);
+    color: var(--white-100);
+
+    background-color: var(--__COLOR__-100);
+    border: solid var(--stroke-1) var(--__COLOR__-200);
+    color: var(--__COLOR__-700);
+
+    &:hover {
+      background-color: var(--__COLOR__-200);
+    }
+
+    &:active {
+      background-color: var(--__COLOR__-300);
+      border: solid var(--stroke-1) var(--__COLOR__-300);
+    }
+  }
+
+  &.surface-borderless {
+    background-color: var(--__COLOR__-500);
+    color: var(--white-100);
+
+    background-color: var(--__COLOR__-100);
+    border: solid var(--stroke-1) transparent;
+    color: var(--__COLOR__-700);
+
+    &:hover {
+      background-color: var(--__COLOR__-200);
+    }
+
+    &:active {
+      background-color: var(--__COLOR__-300);
+      border: solid var(--stroke-1) var(--__COLOR__-300);
+    }
+  }
+
+  &.outlined {
+    background-color: var(--__COLOR__-500);
+    color: var(--white-100);
+
+    background-color: transparent;
+    border: solid var(--stroke-1) var(--__COLOR__-500);
+    color: var(--__COLOR__-700);
+
+    &:hover {
+      background-color: var(--__COLOR__-100);
+    }
+
+    &:active {
+      background-color: var(--__COLOR__-200);
+    }
+  }
+
+  &.dashed {
+    background-color: var(--__COLOR__-500);
+    color: var(--white-100);
+
+    background-color: transparent;
+    border: dashed var(--stroke-1) var(--__COLOR__-500);
+    color: var(--__COLOR__-700);
+
+    &:hover {
+      border: dashed var(--stroke-1) var(--__COLOR__-300);
+      color: var(--__COLOR__-300);
+    }
+
+    &:active {
+      border: dashed var(--stroke-1) var(--__COLOR__-500);
+      color: var(--__COLOR__-700);
+    }
+  }
+
+  &.borderless {
+    background-color: var(--__COLOR__-500);
+    color: var(--white-100);
+
+    background-color: transparent;
+    border: solid var(--stroke-1) transparent;
+    color: var(--__COLOR__-700);
+
+    &:hover {
+      color: var(--__COLOR__-300);
+    }
+
+    &:active {
+      color: var(--__COLOR__-700);
+    }
+  }
+}

package/dist/assets/css/components/form/button/templates/radius.template.css

@@ -0,0 +1,3 @@
+&.radius-__RADIUS__ {
+  border-radius: var(--radius-__RADIUS__);
+}

package/dist/assets/css/components/form/button/templates/size.template.css

@@ -0,0 +1,10 @@
+&.__SIZE__ {
+  height: __SIZE_NUMBER__;
+  font-size: __FONT_SIZE__;
+
+  &.shape {
+    width: __SIZE_NUMBER__;
+    aspect-ratio: 1;
+    padding: 0;
+  }
+}

package/dist/assets/css/components/form/button-action/styles.css

@@ -1,24 +1,27 @@
-.ar-button-action {
+.har-button-action {
   position: relative;
 }
 
-.ar-action-buttons {
-  position: absolute;
+.har-action-buttons {
+  position: fixed;
+  opacity: 0;
+  visibility: hidden;
+  top: 0;
+  left: 0;
   display: flex;
   flex-direction: column;
-  background-color: var(--white);
+  background-color: var(--white-100);
   padding: 0.25rem;
   border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-sm);
-  box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
+  border-radius: var(--radius-4);
+  box-shadow: 0 0 15px -2.5px var(--black-10);
   z-index: 1051;
-  transition: visibility 250ms, opacity 250ms;
+  transition:
+    visibility 250ms,
+    opacity 250ms;
+
+  > .har-button {
+    display: flex;
+    justify-content: flex-start;
+  }
 }
-/* .ar-action-buttons::after {
-  position: absolute;
-  top: 0.5rem;
-  left: 100%;
-  content: "";
-  border: solid 10px transparent;
-  border-left-color: var(--gray-200);
-} */

package/dist/assets/css/components/form/button-group/styles.css

@@ -1,26 +1,5 @@
-.ar-button-group {
+.har-button-group {
   display: flex;
   flex-direction: row;
-  flex-wrap: nowrap;
-  width: max-content;
+  gap: 0.5rem;
 }
-.ar-button-group > .ar-button,
-.ar-button-group > .ar-button:is(.ar-button-shape) {
-  border: solid 1px transparent;
-  border-right-color: rgba(var(--black-rgb), 0.1);
-  border-radius: 0;
-}
-.ar-button-group > .ar-button:first-child,
-.ar-button-group > .ar-button:is(.ar-button-shape):first-child {
-  border-top-left-radius: var(--border-radius-sm);
-  border-bottom-left-radius: var(--border-radius-sm);
-}
-.ar-button-group > .ar-button:last-child,
-.ar-button-group .ar-button:is(.ar-button-shape):last-child {
-  border: none;
-  border-top-right-radius: var(--border-radius-sm);
-  border-bottom-right-radius: var(--border-radius-sm);
-}
-
-/* @import url("./variant/filled/core.css");
-@import url("./variant/outlined/core.css"); */

package/dist/assets/css/components/form/checkbox/checked.css

@@ -0,0 +1,78 @@
+.har-checkbox-wrapper {
+  > label {
+    > :is(input[type="checkbox"]) {
+      + span {
+        > .har-checkbox {
+          &::before {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -60%) rotate(45deg);
+            display: inline-block;
+            content: "";
+            width: 0.25rem;
+            height: 0.5rem;
+            border: solid 1px transparent;
+          }
+        }
+      }
+
+      &:checked {
+        + span {
+          > .har-checkbox {
+            &::before {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -60%) rotate(35deg);
+              display: inline-block;
+              content: "";
+              width: 0.35rem;
+              height: 0.5rem;
+              border: solid 1.5px transparent;
+              border-bottom-right-radius: 1px;
+            }
+          }
+        }
+      }
+    }
+
+    > :is(input[type="radio"]) {
+      + span {
+        > .har-checkbox {
+          &::before {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(45deg);
+            display: inline-block;
+            content: "";
+            background-color: transparent;
+            width: 0.5rem;
+            height: 0.5rem;
+            border-radius: var(--radius-full);
+          }
+        }
+      }
+
+      &:checked {
+        + span {
+          > .har-checkbox {
+            &::before {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%) rotate(45deg);
+              display: inline-block;
+              content: "";
+              background-color: transparent;
+              width: 0.5rem;
+              height: 0.5rem;
+              border-radius: var(--radius-full);
+            }
+          }
+        }
+      }
+    }
+  }
+}