@harjs/react-ui 1.1.8 → 1.1.10

package/dist/assets/css/components/data-display/chip/css.cjs

@@ -10,7 +10,7 @@ const sizes = [
   { 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" },
+  { name: "2xl", height: "3.25rem", fontSize: "1.25rem" },
 ];
 
 const colorTemplate = fs.readFileSync("templates/color.template.css", "utf-8");
@@ -22,7 +22,7 @@ let radiusOutput = `.har-chip {${radiuses.map((radius) => radiusTemplate.replace
 let sizeOutput = `.har-chip {${sizes
   .map((size) =>
     sizeTemplate
-      .replace(/__SIZE__/g, size.name)
+      .replace(/__SIZE__/g, `size-${size.name}`)
       .replace(/__SIZE_NUMBER__/g, size.height)
       .replace(/__FONT_SIZE__/g, size.fontSize),
   )

package/dist/assets/css/components/data-display/chip/size.css

@@ -1,30 +1,30 @@
 .har-chip {
-  &.xs {
+  &.size-xs {
     height: 2rem;
     font-size: 0.75rem;
   }
 
-  &.sm {
+  &.size-sm {
     height: 2.25rem;
     font-size: 0.875rem;
   }
 
-  &.md {
+  &.size-md {
     height: 2.5rem;
     font-size: 0.875rem;
   }
 
-  &.lg {
+  &.size-lg {
     height: 2.75rem;
     font-size: 1rem;
   }
 
-  &.xl {
+  &.size-xl {
     height: 3rem;
     font-size: 1rem;
   }
 
-  &.xxl {
+  &.size-2xl {
     height: 3.25rem;
     font-size: 1.25rem;
   }

package/dist/assets/css/components/data-display/typography/paragraph/css.cjs

@@ -20,7 +20,7 @@ const sizes = [
   { name: "md", fontSize: "16px", lineHeight: "24px" },
   { name: "lg", fontSize: "18px", lineHeight: "28px" },
   { name: "xl", fontSize: "20px", lineHeight: "30px" },
-  { name: "xxl", fontSize: "24px", lineHeight: "36px" },
+  { name: "2xl", fontSize: "24px", lineHeight: "36px" },
 ];
 
 const colorTemplate = fs.readFileSync("templates/color.template.css", "utf-8");
@@ -42,7 +42,7 @@ ${colors
 let sizeOutput = `.har-typography-paragraph {${sizes
   .map((size) =>
     sizeTemplate
-      .replace(/__SIZE__/g, size.name)
+      .replace(/__SIZE__/g, `size-${size.name}`)
       .replace(/__FONT_SIZE__/g, size.fontSize)
       .replace(/__LINE_HEIGHT__/g, size.lineHeight),
   )

package/dist/assets/css/components/data-display/typography/paragraph/size.css

@@ -1,30 +1,30 @@
 .har-typography-paragraph {
-  &.xs {
+  &.size-xs {
     font-size: 12px;
     line-height: 18px;
   }
 
-  &.sm {
+  &.size-sm {
     font-size: 14px;
     line-height: 20px;
   }
 
-  &.md {
+  &.size-md {
     font-size: 16px;
     line-height: 24px;
   }
 
-  &.lg {
+  &.size-lg {
     font-size: 18px;
     line-height: 28px;
   }
 
-  &.xl {
+  &.size-xl {
     font-size: 20px;
     line-height: 30px;
   }
 
-  &.xxl {
+  &.size-2xl {
     font-size: 24px;
     line-height: 36px;
   }

package/dist/assets/css/components/data-display/typography/title/core.css

@@ -1,4 +1,4 @@
-.ar-typography-title {
+.har-typography-title {
   font-family: var(--system);
   font-weight: 400;
 }

package/dist/assets/css/components/data-display/typography/typography.css

@@ -2,7 +2,6 @@
 @import url("./title/core.css");
 @import url("./title/color.css");
 @import url("./title/align.css");
-@import url("./title/size.css");
 
 /* Paragraph Css */
 @import url("./paragraph/core.css");

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

@@ -4,12 +4,17 @@ 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" },
+  { name: "xs", width: "320px" },
+  { name: "sm", width: "384px" },
+  { name: "md", width: "512px" },
+  { name: "lg", width: "640px" },
+  { name: "xl", width: "896px" },
+  { name: "2xl", width: "1200px" },
+  { name: "3xl", width: "80%" },
+  { name: "4xl", width: "85%" },
+  { name: "5xl", width: "90%" },
+  { name: "6xl", width: "95%" },
+  { name: "full", width: "100%" },
 ];
 
 const radiusTemplate = fs.readFileSync("templates/radius.template.css", "utf-8");
@@ -19,8 +24,8 @@ let radiusOutput = `.har-drawer-wrapper { > .har-drawer {${radiuses.map((radius)
 let sizeOutput = `.har-drawer-wrapper { > .har-drawer {${sizes
   .map((size) =>
     sizeTemplate
-      .replace(/__SIZE__/g, size.name)
-      .replace(/__SIZE_NUMBER__/g, size.height)
+      .replace(/__SIZE__/g, `size-${size.name}`)
+      .replace(/__SIZE_NUMBER__/g, size.width)
       .replace(/__FONT_SIZE__/g, size.fontSize),
   )
   .join("\n")}}}`;

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

@@ -1,33 +1,58 @@
 .har-drawer-wrapper {
   > .har-drawer {
-    &.xs {
+    &.size-xs {
       right: -320px;
       width: 320px;
     }
 
-    &.sm {
+    &.size-sm {
       right: -384px;
       width: 384px;
     }
 
-    &.md {
+    &.size-md {
       right: -512px;
       width: 512px;
     }
 
-    &.lg {
+    &.size-lg {
       right: -640px;
       width: 640px;
     }
 
-    &.xl {
+    &.size-xl {
       right: -896px;
       width: 896px;
     }
 
-    &.xxl {
+    &.size-2xl {
       right: -1200px;
       width: 1200px;
     }
+
+    &.size-3xl {
+      right: -80%;
+      width: 80%;
+    }
+
+    &.size-4xl {
+      right: -85%;
+      width: 85%;
+    }
+
+    &.size-5xl {
+      right: -90%;
+      width: 90%;
+    }
+
+    &.size-6xl {
+      right: -95%;
+      width: 95%;
+    }
+
+    &.size-full {
+      right: -100%;
+      width: 100%;
+    }
   }
 }

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

@@ -9,20 +9,17 @@ const sizes = [
   { name: "md", height: "512px" },
   { name: "lg", height: "640px" },
   { name: "xl", height: "896px" },
-  { name: "xxl", height: "1200px" },
+  { name: "2xl", height: "1200px" },
 ];
 
-const radiusTemplate = fs.readFileSync(
-  "templates/radius.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 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__/g, `size-${size.name}`)
       .replace(/__SIZE_NUMBER__/g, size.height)
       .replace(/__FONT_SIZE__/g, size.fontSize),
   )

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

@@ -1,26 +1,26 @@
 .har-modal-wrapper {
   > .har-modal {
-    &.xs {
+    &.size-xs {
       width: 320px;
     }
 
-    &.sm {
+    &.size-sm {
       width: 384px;
     }
 
-    &.md {
+    &.size-md {
       width: 512px;
     }
 
-    &.lg {
+    &.size-lg {
       width: 640px;
     }
 
-    &.xl {
+    &.size-xl {
       width: 896px;
     }
 
-    &.xxl {
+    &.size-2xl {
       width: 1200px;
     }
   }

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

@@ -10,7 +10,7 @@ const sizes = [
   { 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" },
+  { name: "2xl", height: "3.25rem", fontSize: "1.25rem" },
 ];
 
 const colorTemplate = fs.readFileSync("templates/color.template.css", "utf-8");
@@ -22,7 +22,7 @@ let radiusOutput = `.har-button {${radiuses.map((radius) => radiusTemplate.repla
 let sizeOutput = `.har-button {${sizes
   .map((size) =>
     sizeTemplate
-      .replace(/__SIZE__/g, size.name)
+      .replace(/__SIZE__/g, `size-${size.name}`)
       .replace(/__SIZE_NUMBER__/g, size.height)
       .replace(/__FONT_SIZE__/g, size.fontSize),
   )

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

@@ -1,5 +1,5 @@
 .har-button {
-  &.xs {
+  &.size-xs {
     height: 2rem;
     font-size: 0.75rem;
 
@@ -10,7 +10,7 @@
     }
   }
 
-  &.sm {
+  &.size-sm {
     height: 2.25rem;
     font-size: 0.875rem;
 
@@ -21,7 +21,7 @@
     }
   }
 
-  &.md {
+  &.size-md {
     height: 2.5rem;
     font-size: 0.875rem;
 
@@ -32,7 +32,7 @@
     }
   }
 
-  &.lg {
+  &.size-lg {
     height: 2.75rem;
     font-size: 1rem;
 
@@ -43,7 +43,7 @@
     }
   }
 
-  &.xl {
+  &.size-xl {
     height: 3rem;
     font-size: 1rem;
 
@@ -54,7 +54,7 @@
     }
   }
 
-  &.xxl {
+  &.size-2xl {
     height: 3.25rem;
     font-size: 1.25rem;
 

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

@@ -28,7 +28,7 @@ let radiusOutput = `.har-checkbox {${radiuses.map((radius) => radiusTemplate.rep
 let sizeOutput = `.har-checkbox {${sizes
   .map((size) =>
     sizeTemplate
-      .replace(/__SIZE__/g, size.name)
+      .replace(/__SIZE__/g, `size-${size.name}`)
       .replace(/__SIZE_NUMBER__/g, size["w/h"])
       .replace(/__FONT_SIZE__/g, size.fontSize),
   )

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

@@ -1,5 +1,5 @@
 .har-checkbox {
-  &.xs {
+  &.size-xs {
     width: 1rem;
     height: 1rem;
 
@@ -8,7 +8,7 @@
     }
   }
 
-  &.sm {
+  &.size-sm {
     width: 1.25rem;
     height: 1.25rem;
 
@@ -17,7 +17,7 @@
     }
   }
 
-  &.md {
+  &.size-md {
     width: 1.5rem;
     height: 1.5rem;
 

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

@@ -10,7 +10,7 @@ const sizes = [
   { 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" },
+  { name: "2xl", height: "3.25rem", fontSize: "1.25rem" },
 ];
 
 const colorTemplate = fs.readFileSync("templates/color.template.css", "utf-8");
@@ -22,7 +22,7 @@ let radiusOutput = `.har-input-wrapper {${radiuses.map((radius) => radiusTemplat
 let sizeOutput = `.har-input-wrapper {${sizes
   .map((size) =>
     sizeTemplate
-      .replace(/__SIZE__/g, size.name)
+      .replace(/__SIZE__/g, `size-${size.name}`)
       .replace(/__SIZE_NUMBER__/g, size.height)
       .replace(/__FONT_SIZE__/g, size.fontSize),
   )
@@ -41,137 +41,3 @@ try {
 } 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/size.css

@@ -1,5 +1,5 @@
 .har-input-wrapper {
-  &.xs {
+  &.size-xs {
     > .addon-before,
     > .addon-after {
       height: 2rem;
@@ -21,7 +21,7 @@
     }
   }
 
-  &.sm {
+  &.size-sm {
     > .addon-before,
     > .addon-after {
       height: 2.25rem;
@@ -43,7 +43,7 @@
     }
   }
 
-  &.md {
+  &.size-md {
     > .addon-before,
     > .addon-after {
       height: 2.5rem;
@@ -65,7 +65,7 @@
     }
   }
 
-  &.lg {
+  &.size-lg {
     > .addon-before,
     > .addon-after {
       height: 2.75rem;
@@ -87,7 +87,7 @@
     }
   }
 
-  &.xl {
+  &.size-xl {
     > .addon-before,
     > .addon-after {
       height: 3rem;
@@ -109,7 +109,7 @@
     }
   }
 
-  &.xxl {
+  &.size-2xl {
     > .addon-before,
     > .addon-after {
       height: 3.25rem;