@hypen-space/web 0.2.8 → 0.2.9

package/dist/src/hypen.js

@@ -1048,6 +1048,30 @@ __export(exports_border, {
 var borderHandlers;
 var init_border = __esm(() => {
   borderHandlers = {
+    border: (el, value) => {
+      if (typeof value === "number") {
+        el.style.borderWidth = `${value}px`;
+        el.style.borderStyle = "solid";
+      } else if (typeof value === "object" && value !== null) {
+        const obj = value;
+        if (obj.width !== undefined) {
+          el.style.borderWidth = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
+        }
+        if (obj.color !== undefined) {
+          el.style.borderColor = String(obj.color);
+        }
+        if (obj.style !== undefined) {
+          el.style.borderStyle = String(obj.style);
+        } else {
+          el.style.borderStyle = "solid";
+        }
+        if (obj.radius !== undefined) {
+          el.style.borderRadius = typeof obj.radius === "number" ? `${obj.radius}px` : String(obj.radius);
+        }
+      } else if (typeof value === "string") {
+        el.style.border = value;
+      }
+    },
     borderWidth: (el, value) => {
       el.style.borderWidth = typeof value === "number" ? `${value}px` : String(value);
     },
@@ -1055,7 +1079,34 @@ var init_border = __esm(() => {
       el.style.borderStyle = String(value);
     },
     borderRadius: (el, value) => {
-      el.style.borderRadius = typeof value === "number" ? `${value}px` : String(value);
+      if (typeof value === "number") {
+        el.style.borderRadius = `${value}px`;
+      } else if (typeof value === "object" && value !== null) {
+        const obj = value;
+        const topLeft = obj.topLeft ?? obj.topStart ?? 0;
+        const topRight = obj.topRight ?? obj.topEnd ?? 0;
+        const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;
+        const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;
+        const formatValue = (v) => typeof v === "number" ? `${v}px` : String(v);
+        el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
+      } else {
+        el.style.borderRadius = String(value);
+      }
+    },
+    cornerRadius: (el, value) => {
+      if (typeof value === "number") {
+        el.style.borderRadius = `${value}px`;
+      } else if (typeof value === "object" && value !== null) {
+        const obj = value;
+        const topLeft = obj.topLeft ?? obj.topStart ?? 0;
+        const topRight = obj.topRight ?? obj.topEnd ?? 0;
+        const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;
+        const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;
+        const formatValue = (v) => typeof v === "number" ? `${v}px` : String(v);
+        el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
+      } else {
+        el.style.borderRadius = String(value);
+      }
     }
   };
 });
@@ -1085,6 +1136,43 @@ var init_size = __esm(() => {
     },
     maxHeight: (el, value) => {
       el.style.maxHeight = typeof value === "number" ? `${value}px` : String(value);
+    },
+    size: (el, value) => {
+      if (typeof value === "number") {
+        el.style.width = `${value}px`;
+        el.style.height = `${value}px`;
+      } else if (typeof value === "object" && value !== null) {
+        const obj = value;
+        if (obj.width !== undefined) {
+          el.style.width = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
+        }
+        if (obj.height !== undefined) {
+          el.style.height = typeof obj.height === "number" ? `${obj.height}px` : String(obj.height);
+        }
+      } else {
+        const size = String(value);
+        el.style.width = size;
+        el.style.height = size;
+      }
+    },
+    fillMaxWidth: (el, value) => {
+      if (value === false)
+        return;
+      const fraction = typeof value === "number" ? value : 1;
+      el.style.width = `${fraction * 100}%`;
+    },
+    fillMaxHeight: (el, value) => {
+      if (value === false)
+        return;
+      const fraction = typeof value === "number" ? value : 1;
+      el.style.height = `${fraction * 100}%`;
+    },
+    fillMaxSize: (el, value) => {
+      if (value === false)
+        return;
+      const fraction = typeof value === "number" ? value : 1;
+      el.style.width = `${fraction * 100}%`;
+      el.style.height = `${fraction * 100}%`;
     }
   };
 });
@@ -1960,6 +2048,20 @@ var init_advanced_layout = __esm(() => {
     gridTemplateRows: (el, value) => {
       el.style.gridTemplateRows = String(value);
     },
+    gridColumns: (el, value) => {
+      if (typeof value === "number") {
+        el.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
+      } else {
+        el.style.gridTemplateColumns = String(value);
+      }
+    },
+    gridRows: (el, value) => {
+      if (typeof value === "number") {
+        el.style.gridTemplateRows = `repeat(${value}, 1fr)`;
+      } else {
+        el.style.gridTemplateRows = String(value);
+      }
+    },
     gridTemplateAreas: (el, value) => {
       el.style.gridTemplateAreas = String(value);
     },
@@ -3232,4 +3334,4 @@ export {
   Hypen
 };
 
-//# debugId=7C7B1C60678C334D64756E2164756E21
+//# debugId=EABDFC08FD54D31A64756E2164756E21