@harjs/react-ui 1.1.5 → 1.1.6

package/dist/assets/css/components/form/checkbox-card/css.cjs

@@ -0,0 +1,44 @@
+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", "w/h": "1rem", fontSize: "0.75rem" },
+//   { name: "sm", "w/h": "1.25rem", fontSize: "1rem" },
+//   { name: "md", "w/h": "1.5rem", fontSize: "1.25rem" },
+// ];
+
+const colorUncheckedTemplate = fs.readFileSync("templates/color.unchecked.template.css", "utf-8");
+const colorCheckedTemplate = fs.readFileSync("templates/color.checked.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 colorUncheckedOutput = `.har-checkbox-card-wrapper { > .har-checkbox-card {${colors.map((color) => colorUncheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}`;
+let colorCheckedOutput = `.har-checkbox-card-wrapper { > .har-checkbox-card { &.checked {${colors.map((color) => colorCheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}}`;
+let radiusOutput = `.har-checkbox-card-wrapper { > .har-checkbox-card {${radiuses.map((radius) => radiusTemplate.replace(/__RADIUS__/g, radius)).join("\n")}}}`;
+// let sizeOutput = `.har-checkbox {${sizes
+//   .map((size) =>
+//     sizeTemplate
+//       .replace(/__SIZE__/g, size.name)
+//       .replace(/__SIZE_NUMBER__/g, size["w/h"])
+//       .replace(/__FONT_SIZE__/g, size.fontSize),
+//   )
+//   .join("\n")}}`;
+
+fs.writeFileSync("color.unchecked.css", colorUncheckedOutput);
+fs.writeFileSync("color.checked.css", colorCheckedOutput);
+fs.writeFileSync("radius.css", radiusOutput);
+// fs.writeFileSync("size.css", sizeOutput);
+
+try {
+  execSync(`npx prettier --write color.unchecked.css`, { stdio: "inherit" });
+  execSync(`npx prettier --write color.checked.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/checkbox-card/radius.css

@@ -0,0 +1,43 @@
+.har-checkbox-card-wrapper {
+  > .har-checkbox-card {
+    &.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/checkbox-card/styles.css

@@ -0,0 +1,14 @@
+@import url("./color.checked.css");
+@import url("./color.unchecked.css");
+@import url("./radius.css");
+
+.har-checkbox-card-wrapper {
+  width: 100%;
+  height: 100%;
+
+  > .har-checkbox-card {
+    display: grid;
+    height: 100%;
+    padding: var(--space-12) var(--space-20);
+  }
+}

package/dist/assets/css/components/form/checkbox-card/templates/color.checked.template.css

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

package/dist/assets/css/components/form/checkbox-card/templates/color.unchecked.template.css

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

package/dist/assets/css/components/form/checkbox-card/templates/radius.template.css

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

package/dist/assets/css/components/form/checkbox-card/templates/size.template.css

@@ -0,0 +1,8 @@
+&.__SIZE__ {
+  width: __SIZE_NUMBER__;
+  height: __SIZE_NUMBER__;
+
+  + .label {
+    font-size: __FONT_SIZE__;
+  }
+}

package/dist/assets/css/components/form/date-picker/calendar/calendar.css

@@ -4,11 +4,13 @@
   position: absolute;
   top: 0;
   left: 0;
-  background-color: var(--white);
+  background-color: var(--white-100);
   width: 20rem;
   border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-sm);
-  box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
+  border-radius: var(--radius-4);
+  box-shadow: 0 0 10px -5px var(--black-30);
   z-index: 1051;
-  transition: visibility 250ms, opacity 250ms ease-in-out;
+  transition:
+    visibility 250ms,
+    opacity 250ms ease-in-out;
 }

package/dist/assets/css/components/form/date-picker/calendar/content.css

@@ -47,16 +47,24 @@
   align-content: center;
   width: 75%;
   height: 75%;
-  border-radius: var(--border-radius-sm);
+  border-radius: var(--radius-4);
 }
-.ar-date-picker > .calendar-wrapper > .content > .calendar > .days > span:not(.empty-day) > span:hover {
+.ar-date-picker
+  > .calendar-wrapper
+  > .content
+  > .calendar
+  > .days
+  > span:not(.empty-day)
+  > span:hover {
   background-color: var(--gray-200);
   color: var(--gray-700);
 }
 .ar-date-calendar > .content > .calendar > .days > span.selection-day > span {
   background-color: var(--primary);
-  color: var(--white);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary);
+  color: var(--white-100);
+  box-shadow:
+    0 0 0 2px var(--white-100),
+    0 0 0 4px var(--primary);
 }
 /* #endregion Days */
 /* Days */

package/dist/assets/css/components/form/date-picker/clock/clock.css

@@ -4,11 +4,11 @@
   right: -8rem;
   display: flex;
   flex-direction: column;
-  background-color: var(--white);
+  background-color: var(--white-100);
   width: 7.5rem;
   border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-sm);
-  box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
+  border-radius: var(--radius-4);
+  box-shadow: 0 0 10px -5px var(--black-30);
   z-index: 1051;
   user-select: none;
 }

package/dist/assets/css/components/form/date-picker/clock/content.css

@@ -35,14 +35,23 @@
   align-content: center;
   width: 100%;
   height: 75%;
-  border-radius: var(--border-radius-sm);
-}
-.ar-date-picker > .calendar-wrapper > .clock > .content > ul > li:not(.selection-time) > span > span:hover {
+  border-radius: var(--radius-4);
+}
+.ar-date-picker
+  > .calendar-wrapper
+  > .clock
+  > .content
+  > ul
+  > li:not(.selection-time)
+  > span
+  > span:hover {
   background-color: var(--gray-200);
   color: var(--gray-700);
 }
 .ar-date-calendar > .clock > .content > ul > li.selection-time > span > span {
   background-color: var(--success);
-  color: var(--white);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success);
+  color: var(--white-100);
+  box-shadow:
+    0 0 0 2px var(--white-100),
+    0 0 0 4px var(--success);
 }

package/dist/assets/css/components/form/input/addon.css

@@ -0,0 +1,131 @@
+.har-input-wrapper {
+  &:has(> .addon-before),
+  &:has(> .addon-after) {
+    > .addon-before,
+    > .addon-after {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--gray-100);
+      height: var(--input-height);
+      padding: 0 0.5rem;
+      color: var(--gray-500);
+      font-family: var(--system);
+
+      &:has(input, select, button, textarea) {
+        position: relative;
+        background-color: transparent;
+        padding: 0 !important;
+        margin-inline: -1px;
+        z-index: 10;
+      }
+
+      + .addon-before {
+        border-radius: var(--radius-0) !important;
+
+        &::before {
+          position: absolute;
+          left: 0;
+          content: "";
+          background-color: rgba(0, 0, 0, 0.1);
+          width: 1px;
+          height: 65%;
+        }
+      }
+
+      &:has(+ .addon-after) {
+        border-radius: var(--radius-0) !important;
+      }
+
+      + .addon-after {
+        &::before {
+          position: absolute;
+          left: 0;
+          content: "";
+          background-color: rgba(0, 0, 0, 0.1);
+          width: 1px;
+          height: 65%;
+        }
+      }
+    }
+  }
+
+  &:has(> .addon-before) {
+    > .addon-before {
+      &.first {
+        input,
+        button {
+          border-top-right-radius: var(--radius-0) !important;
+          border-bottom-right-radius: var(--radius-0) !important;
+        }
+      }
+
+      &.middle {
+        input,
+        button {
+          border-radius: var(--radius-0) !important;
+        }
+      }
+
+      &.last {
+        input,
+        button {
+          border-radius: var(--radius-0) !important;
+        }
+      }
+    }
+
+    > .har-input {
+      > .input {
+        > input {
+          border-top-left-radius: var(--radius-0) !important;
+          border-bottom-left-radius: var(--radius-0) !important;
+        }
+      }
+    }
+  }
+
+  &:has(> .addon-after) {
+    > .addon-after {
+      &.first {
+        input,
+        button {
+          border-top-left-radius: var(--radius-0) !important;
+          border-bottom-left-radius: var(--radius-0) !important;
+        }
+      }
+
+      &.n-first {
+        input,
+        button {
+          border-radius: var(--radius-0) !important;
+        }
+      }
+
+      &.middle {
+        input,
+        button {
+          border-radius: var(--radius-0) !important;
+        }
+      }
+
+      &.last {
+        input,
+        button {
+          border-top-left-radius: var(--radius-0) !important;
+          border-bottom-left-radius: var(--radius-0) !important;
+        }
+      }
+    }
+
+    > .har-input {
+      > .input {
+        > input {
+          border-top-right-radius: var(--radius-0) !important;
+          border-bottom-right-radius: var(--radius-0) !important;
+        }
+      }
+    }
+  }
+}