@harjs/react-ui 1.1.5 → 1.1.6

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

@@ -0,0 +1,61 @@
+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 colorRadioUncheckedTemplate = fs.readFileSync("templates/color.radio-unchecked.template.css", "utf-8");
+const colorRadioCheckedTemplate = fs.readFileSync("templates/color.radio-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");
+
+// Checkbox
+let colorUncheckedOutput = `.har-checkbox-wrapper {> label {> input[type="checkbox"] {+ span {> .har-checkbox {${colors.map((color) => colorUncheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}}}}`;
+let colorCheckedOutput = `.har-checkbox-wrapper {> label {> input[type="checkbox"] {&:checked {+ span {> .har-checkbox {${colors.map((color) => colorCheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}}}}}`;
+// Radio
+let colorRadioUncheckedOutput = `.har-checkbox-wrapper {> label {> input[type="radio"] {+ span {> .har-checkbox {${colors.map((color) => colorRadioUncheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}}}}`;
+let colorRadioCheckedOutput = `.har-checkbox-wrapper {> label {> input[type="radio"] {&:checked {+ span {> .har-checkbox {${colors.map((color) => colorRadioCheckedTemplate.replace(/__COLOR__/g, color)).join("\n")}}}}}}}`;
+// ---
+let radiusOutput = `.har-checkbox {${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")}}`;
+
+// Checkbox
+fs.writeFileSync("color.unchecked.css", colorUncheckedOutput);
+fs.writeFileSync("color.checked.css", colorCheckedOutput);
+// Radio
+fs.writeFileSync("color.radio-unchecked.css", colorRadioUncheckedOutput);
+fs.writeFileSync("color.radio-checked.css", colorRadioCheckedOutput);
+// ---
+fs.writeFileSync("radius.css", radiusOutput);
+fs.writeFileSync("size.css", sizeOutput);
+
+try {
+  // Checkbox
+  execSync(`npx prettier --write color.unchecked.css`, { stdio: "inherit" });
+  execSync(`npx prettier --write color.checked.css`, { stdio: "inherit" });
+  // Radio
+  execSync(`npx prettier --write color.radio-unchecked.css`, { stdio: "inherit" });
+  execSync(`npx prettier --write color.radio-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/radius.css

@@ -0,0 +1,41 @@
+.har-checkbox {
+  &.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/size.css

@@ -0,0 +1,28 @@
+.har-checkbox {
+  &.xs {
+    width: 1rem;
+    height: 1rem;
+
+    + .label {
+      font-size: 0.75rem;
+    }
+  }
+
+  &.sm {
+    width: 1.25rem;
+    height: 1.25rem;
+
+    + .label {
+      font-size: 1rem;
+    }
+  }
+
+  &.md {
+    width: 1.5rem;
+    height: 1.5rem;
+
+    + .label {
+      font-size: 1.25rem;
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+@import url("./checked.css");
+@import url("./color.checked.css");
+@import url("./color.radio-checked.css");
+@import url("./color.radio-unchecked.css");
+@import url("./color.unchecked.css");
+@import url("./radius.css");
+@import url("./size.css");
+
+.har-checkbox-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: flex-start;
+  width: max-content;
+
+  > label {
+    color: var(--gray-800);
+    font-family: var(--system);
+    font-size: 1rem;
+    cursor: pointer;
+
+    > :is(input[type="checkbox"]),
+    > :is(input[type="radio"]) {
+      display: none;
+
+      + span {
+        > .har-checkbox {
+          &.disabled {
+            border: solid var(--stroke-1) var(--gray-300) !important;
+            cursor: no-drop;
+
+            + span.label {
+              color: var(--gray-500);
+              cursor: no-drop;
+            }
+
+            &:hover {
+              background-color: transparent !important;
+            }
+          }
+        }
+      }
+
+      &:checked {
+        + span {
+          > .har-checkbox {
+            z-index: 2;
+          }
+        }
+      }
+    }
+
+    > span {
+      display: flex;
+      align-items: center;
+      gap: 0 0.5rem;
+      user-select: none;
+
+      > .har-checkbox {
+        position: relative;
+        display: inline-block;
+      }
+
+      > .trace {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: inline-block;
+        content: "";
+        width: 1rem;
+        height: 1rem;
+        border-radius: var(--radius-full);
+        z-index: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,101 @@
+&.__COLOR__ {
+  &.filled {
+    background-color: var(--__COLOR__-500);
+    border: solid var(--stroke-1) var(--__COLOR__-500);
+
+    &::before {
+      border-right-color: var(--white-100);
+      border-bottom-color: var(--white-100);
+    }
+
+    &: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__-100);
+    border: solid var(--stroke-1) var(--__COLOR__-200);
+    color: var(--__COLOR__-700);
+
+    &::before {
+      border-right-color: var(--__COLOR__-700);
+      border-bottom-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__-100);
+    border: solid var(--stroke-1) transparent;
+    color: var(--__COLOR__-700);
+
+    &::before {
+      border-right-color: var(--__COLOR__-700);
+      border-bottom-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: transparent;
+    border: solid var(--stroke-1) var(--__COLOR__-500);
+    color: var(--__COLOR__-700);
+
+    &::before {
+      border-right-color: var(--__COLOR__-700);
+      border-bottom-color: var(--__COLOR__-700);
+    }
+
+    &:hover {
+      background-color: var(--__COLOR__-100);
+    }
+
+    &:active {
+      background-color: var(--__COLOR__-200);
+    }
+  }
+
+  &.dashed {
+    background-color: transparent;
+    border: dashed var(--stroke-1) var(--__COLOR__-500);
+    color: var(--__COLOR__-700);
+
+    &::before {
+      border-right-color: var(--__COLOR__-700);
+      border-bottom-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);
+    }
+  }
+}

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

@@ -0,0 +1,114 @@
+&.__COLOR__ {
+  &.filled {
+    background-color: var(--__COLOR__-500);
+    border: solid var(--stroke-1) var(--__COLOR__-500);
+
+    &::before {
+      background-color: var(--white-100);
+    }
+
+    &: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__-100);
+    border: solid var(--stroke-1) var(--__COLOR__-200);
+    color: var(--__COLOR__-700);
+
+    &::before {
+      background-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__-100);
+    border: solid var(--stroke-1) transparent;
+    color: var(--__COLOR__-700);
+
+    &::before {
+      background-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: transparent;
+    border: solid var(--stroke-1) var(--__COLOR__-500);
+    color: var(--__COLOR__-700);
+
+    &::before {
+      background-color: var(--__COLOR__-700);
+    }
+
+    &:hover {
+      background-color: var(--__COLOR__-100);
+    }
+
+    &:active {
+      background-color: var(--__COLOR__-200);
+    }
+  }
+
+  &.dashed {
+    background-color: transparent;
+    border: dashed var(--stroke-1) var(--__COLOR__-500);
+    color: var(--__COLOR__-700);
+
+    &::before {
+      background-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: transparent;
+    border: solid var(--stroke-1) transparent;
+    color: var(--__COLOR__-700);
+
+    &::before {
+      background-color: var(--__COLOR__-700);
+    }
+
+    &:hover {
+      color: var(--__COLOR__-300);
+    }
+
+    &:active {
+      color: var(--__COLOR__-700);
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+&.__COLOR__ {
+  &.filled {
+    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 {
+    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__-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 {
+    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 {
+    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);
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+&.__COLOR__ {
+  &.filled {
+    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 {
+    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__-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 {
+    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 {
+    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);
+    }
+  }
+}

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

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

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

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