@harjs/react-ui 1.1.4 → 1.1.6

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

@@ -0,0 +1,177 @@
+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-input-wrapper {${colors.map((color) => colorTemplate.replace(/__COLOR__/g, color)).join("\n")}}`;
+let radiusOutput = `.har-input-wrapper {${radiuses.map((radius) => radiusTemplate.replace(/__RADIUS__/g, radius)).join("\n")}}`;
+let sizeOutput = `.har-input-wrapper {${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);
+}
+
+// const fs = require("fs");
+// const path = require("path");
+// const { execSync } = require("child_process");
+
+// let colorCSSContent = `.har-input-wrapper {`;
+// let borderCSSContent = `.har-input-wrapper {`;
+// let sizeCSSContent = `.har-input-wrapper {`;
+
+// const colorFile = path.join(__dirname, "color.css");
+// fs.writeFileSync(colorFile, "");
+// //-------
+// const borderFile = path.join(__dirname, "border.css");
+// fs.writeFileSync(borderFile, "");
+// //-------
+// const sizeFile = path.join(__dirname, "size.css");
+// fs.writeFileSync(sizeFile, "");
+
+// const variants = ["filled", "surface-borderless", "outlined", "dashed", "borderless"];
+// const colors = ["blue", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan", "gray"];
+// const borders = ["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" },
+// ];
+
+// colors.map((color) => {
+//   const styles = {
+//     filled: `
+//           background-color: var(--${color}-100);
+//           border: var(--stroke-1) solid var(--${color}-300);
+//           &:focus { border: var(--stroke-1) solid var(--${color}-500); }`,
+//     "surface-borderless": `
+//           background-color: var(--${color}-100);
+//           &:focus { background-color: transparent; box-shadow: 0 0 0 2.5px var(--${color}-200); }`,
+//     outlined: `
+//           background-color: transparent;
+//           border: var(--stroke-1) solid var(--${color}-300);
+//           &:focus { box-shadow: 0 0 0 2.5px var(--${color}-200); }`,
+//     dashed: `
+//           background-color: transparent;
+//           border: var(--stroke-1) dashed var(--${color}-300);
+//           &:focus { box-shadow: 0 0 0 2.5px var(--${color}-200); }`,
+//     borderless: `
+//           background-color: transparent;
+//           border: var(--stroke-1) solid transparent;`,
+//   };
+
+//   colorCSSContent += `&.${color} {`;
+
+//   variants.map((variant) => {
+//     colorCSSContent += `&.${variant} {
+//                         > .har-input {
+//                             > label { color: var(--${color}-500); }
+//                             > .input {
+//                                 > input {
+//                                     ${styles[variant]}
+//                                     &::placeholder { color: var(--${color}-400); }
+//                                 }
+//                             }
+//                         }
+//                     }
+//     `;
+//   });
+
+//   colorCSSContent += `}`;
+// });
+
+// borders.map((border) => {
+//   borderCSSContent += `
+//                       &:has(> .addon-before),
+//                       &:has(> .addon-after) {
+//                         &.radius-${border} {
+//                           > .addon-before {
+//                             border-top-left-radius: var(--radius-${border});
+//                             border-bottom-left-radius: var(--radius-${border});
+//                           }
+
+//                           > .addon-after {
+//                             border-top-right-radius: var(--radius-${border});
+//                             border-bottom-right-radius: var(--radius-${border});
+//                           }
+//                         }
+//                       }
+
+//                       &.radius-${border} {
+//                         > .har-input {
+//                           > .input {
+//                             > input { border-radius: var(--radius-${border}); }
+//                           }
+//                         }
+//                       }
+//     `;
+// });
+
+// sizes.map((size) => {
+//   sizeCSSContent += `&.${size.name} {
+//                         > .addon-before,
+//                         > .addon-after {
+//                           height: ${size.height}; font-size: ${size.fontSize};
+//                         }
+
+//                         > .har-input {
+//                           > .input {
+//                               > input {
+//                                   height: ${size.height}; font-size: ${size.fontSize};
+//                               }
+//                           }
+//                         }
+//                     }
+//     `;
+// });
+
+// colorCSSContent += `}`;
+// borderCSSContent += `}`;
+// sizeCSSContent += `}`;
+
+// fs.appendFileSync(colorFile, colorCSSContent);
+// fs.appendFileSync(borderFile, borderCSSContent);
+// fs.appendFileSync(sizeFile, sizeCSSContent);
+
+// try {
+//   execSync(`npx prettier --write "${colorFile}"`, { stdio: "inherit" });
+//   execSync(`npx prettier --write "${borderFile}"`, { stdio: "inherit" });
+//   execSync(`npx prettier --write "${sizeFile}"`, { 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/input/icon.css

@@ -0,0 +1,52 @@
+.har-input-wrapper {
+  > .har-input {
+    > .icon-element {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+      > .icon {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1rem;
+        height: 1rem;
+        z-index: 1;
+
+        &.start {
+          left: 7.5px;
+          right: auto;
+        }
+
+        &.end {
+          right: 7.5px;
+          left: auto;
+        }
+
+        &.cursor-pointer {
+          cursor: pointer;
+        }
+
+        &.cursor-text {
+          cursor: text;
+        }
+      }
+    }
+
+    &:has(> .icon-element > .start) {
+      > .input {
+        > input {
+          padding-left: 1.75rem !important;
+        }
+      }
+    }
+
+    &:has(> .icon-element > .end) {
+      > .input {
+        > input {
+          padding-right: 1.75rem !important;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,251 @@
+.har-input-wrapper {
+  &:has(> .addon-before),
+  &:has(> .addon-after) {
+    &.radius-0 {
+      > .addon-before {
+        border-top-left-radius: var(--radius-0);
+        border-bottom-left-radius: var(--radius-0);
+      }
+
+      > .addon-after {
+        border-top-right-radius: var(--radius-0);
+        border-bottom-right-radius: var(--radius-0);
+      }
+    }
+  }
+
+  &.radius-0 {
+    > .har-input {
+      > .input {
+        > input {
+          border-radius: var(--radius-0);
+        }
+      }
+    }
+  }
+
+  &:has(> .addon-before),
+  &:has(> .addon-after) {
+    &.radius-2 {
+      > .addon-before {
+        border-top-left-radius: var(--radius-2);
+        border-bottom-left-radius: var(--radius-2);
+      }
+
+      > .addon-after {
+        border-top-right-radius: var(--radius-2);
+        border-bottom-right-radius: var(--radius-2);
+      }
+    }
+  }
+
+  &.radius-2 {
+    > .har-input {
+      > .input {
+        > input {
+          border-radius: var(--radius-2);
+        }
+      }
+    }
+  }
+
+  &:has(> .addon-before),
+  &:has(> .addon-after) {
+    &.radius-4 {
+      > .addon-before {
+        border-top-left-radius: var(--radius-4);
+        border-bottom-left-radius: var(--radius-4);
+      }
+
+      > .addon-after {
+        border-top-right-radius: var(--radius-4);
+        border-bottom-right-radius: var(--radius-4);
+      }
+    }
+  }
+
+  &.radius-4 {
+    > .har-input {
+      > .input {
+        > input {
+          border-radius: var(--radius-4);
+        }
+      }
+    }
+  }
+
+  &:has(> .addon-before),
+  &:has(> .addon-after) {
+    &.radius-6 {
+      > .addon-before {
+        border-top-left-radius: var(--radius-6);
+        border-bottom-left-radius: var(--radius-6);
+      }
+
+      > .addon-after {
+        border-top-right-radius: var(--radius-6);
+        border-bottom-right-radius: var(--radius-6);
+      }
+    }
+  }
+
+  &.radius-6 {
+    > .har-input {
+      > .input {
+        > input {
+          border-radius: var(--radius-6);
+        }
+      }
+    }
+  }
+
+  &:has(> .addon-before),
+  &:has(> .addon-after) {
+    &.radius-8 {
+      > .addon-before {
+        border-top-left-radius: var(--radius-8);
+        border-bottom-left-radius: var(--radius-8);
+      }
+
+      > .addon-after {
+        border-top-right-radius: var(--radius-8);
+        border-bottom-right-radius: var(--radius-8);
+      }
+    }
+  }
+
+  &.radius-8 {
+    > .har-input {
+      > .input {
+        > input {
+          border-radius: var(--radius-8);
+        }
+      }
+    }
+  }
+
+  &:has(> .addon-before),
+  &:has(> .addon-after) {
+    &.radius-12 {
+      > .addon-before {
+        border-top-left-radius: var(--radius-12);
+        border-bottom-left-radius: var(--radius-12);
+      }
+
+      > .addon-after {
+        border-top-right-radius: var(--radius-12);
+        border-bottom-right-radius: var(--radius-12);
+      }
+    }
+  }
+
+  &.radius-12 {
+    > .har-input {
+      > .input {
+        > input {
+          border-radius: var(--radius-12);
+        }
+      }
+    }
+  }
+
+  &:has(> .addon-before),
+  &:has(> .addon-after) {
+    &.radius-16 {
+      > .addon-before {
+        border-top-left-radius: var(--radius-16);
+        border-bottom-left-radius: var(--radius-16);
+      }
+
+      > .addon-after {
+        border-top-right-radius: var(--radius-16);
+        border-bottom-right-radius: var(--radius-16);
+      }
+    }
+  }
+
+  &.radius-16 {
+    > .har-input {
+      > .input {
+        > input {
+          border-radius: var(--radius-16);
+        }
+      }
+    }
+  }
+
+  &:has(> .addon-before),
+  &:has(> .addon-after) {
+    &.radius-20 {
+      > .addon-before {
+        border-top-left-radius: var(--radius-20);
+        border-bottom-left-radius: var(--radius-20);
+      }
+
+      > .addon-after {
+        border-top-right-radius: var(--radius-20);
+        border-bottom-right-radius: var(--radius-20);
+      }
+    }
+  }
+
+  &.radius-20 {
+    > .har-input {
+      > .input {
+        > input {
+          border-radius: var(--radius-20);
+        }
+      }
+    }
+  }
+
+  &:has(> .addon-before),
+  &:has(> .addon-after) {
+    &.radius-40 {
+      > .addon-before {
+        border-top-left-radius: var(--radius-40);
+        border-bottom-left-radius: var(--radius-40);
+      }
+
+      > .addon-after {
+        border-top-right-radius: var(--radius-40);
+        border-bottom-right-radius: var(--radius-40);
+      }
+    }
+  }
+
+  &.radius-40 {
+    > .har-input {
+      > .input {
+        > input {
+          border-radius: var(--radius-40);
+        }
+      }
+    }
+  }
+
+  &:has(> .addon-before),
+  &:has(> .addon-after) {
+    &.radius-full {
+      > .addon-before {
+        border-top-left-radius: var(--radius-full);
+        border-bottom-left-radius: var(--radius-full);
+      }
+
+      > .addon-after {
+        border-top-right-radius: var(--radius-full);
+        border-bottom-right-radius: var(--radius-full);
+      }
+    }
+  }
+
+  &.radius-full {
+    > .har-input {
+      > .input {
+        > input {
+          border-radius: var(--radius-full);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,133 @@
+.har-input-wrapper {
+  &.xs {
+    > .addon-before,
+    > .addon-after {
+      height: 2rem;
+      font-size: 0.75rem;
+    }
+
+    > .har-input {
+      > .input {
+        > input {
+          height: 2rem;
+          font-size: 0.75rem;
+        }
+      }
+    }
+
+    &.pin-input {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+
+  &.sm {
+    > .addon-before,
+    > .addon-after {
+      height: 2.25rem;
+      font-size: 0.875rem;
+    }
+
+    > .har-input {
+      > .input {
+        > input {
+          height: 2.25rem;
+          font-size: 0.875rem;
+        }
+      }
+    }
+
+    &.pin-input {
+      width: 2.25rem;
+      height: 2.25rem;
+    }
+  }
+
+  &.md {
+    > .addon-before,
+    > .addon-after {
+      height: 2.5rem;
+      font-size: 0.875rem;
+    }
+
+    > .har-input {
+      > .input {
+        > input {
+          height: 2.5rem;
+          font-size: 0.875rem;
+        }
+      }
+    }
+
+    &.pin-input {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+  }
+
+  &.lg {
+    > .addon-before,
+    > .addon-after {
+      height: 2.75rem;
+      font-size: 1rem;
+    }
+
+    > .har-input {
+      > .input {
+        > input {
+          height: 2.75rem;
+          font-size: 1rem;
+        }
+      }
+    }
+
+    &.pin-input {
+      width: 2.75rem;
+      height: 2.75rem;
+    }
+  }
+
+  &.xl {
+    > .addon-before,
+    > .addon-after {
+      height: 3rem;
+      font-size: 1rem;
+    }
+
+    > .har-input {
+      > .input {
+        > input {
+          height: 3rem;
+          font-size: 1rem;
+        }
+      }
+    }
+
+    &.pin-input {
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+
+  &.xxl {
+    > .addon-before,
+    > .addon-after {
+      height: 3.25rem;
+      font-size: 1.25rem;
+    }
+
+    > .har-input {
+      > .input {
+        > input {
+          height: 3.25rem;
+          font-size: 1.25rem;
+        }
+      }
+    }
+
+    &.pin-input {
+      width: 3.25rem;
+      height: 3.25rem;
+    }
+  }
+}