@bunnix/components 0.10.1 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnix/components",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Bunnix components: a set of bunnix ready components for modern web apps.",
   "keywords": [
     "bunnix",

package/src/core/buttons.css

@@ -5,6 +5,8 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
   justify-content: center;
   cursor: pointer;
   border-radius: var(--radius-md);
@@ -68,6 +70,7 @@
   align-items: center;
   cursor: pointer;
   border-radius: var(--radius-md);
+  padding: 0;
   user-select: none;
   -webkit-user-select: none;
   background: none;

package/src/core/core-mobile.css

@@ -0,0 +1,69 @@
+.safe-insets {
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+@media (max-width: 720px) {
+  :root {
+    --font-size-xlarge: 20px;
+    --font-size-large: 18px;
+    --font-size-default: 16px;
+    --font-size-small: 14px;
+    --font-size-xsmall: 12px;
+
+    --padding-sm: 10px;
+    --padding-md: 12px;
+    --padding-lg: 16px;
+  }
+
+  .grid {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .table {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .table thead {
+    display: none;
+  }
+
+  .table tbody tr {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid var(--color-border-primary);
+  }
+
+  .table tbody tr:last-child {
+    border-bottom: none;
+  }
+
+  .table tbody td {
+    display: grid;
+    grid-template-columns: minmax(0.1fr, 0.3fr) 0.5fr;
+    border-bottom: none;
+    padding-top: var(--padding-md);
+    padding-bottom: 0;
+    row-gap: 0;
+  }
+
+  .table tbody td:last-child {
+    padding-bottom: var(--padding-md);
+  }
+
+  .table tbody td[data-label]::before {
+    content: attr(data-label) ": ";
+    font-weight: var(--font-weight-heavier);
+    font-size: var(--font-size-default);
+    color: var(--color-fg-tertiary);
+  }
+
+  .checkbox {
+    width: 28px;
+    height: 28px;
+  }
+}

package/src/core/core.css

@@ -61,7 +61,7 @@
   --font-size-large: 16px;
   --font-size-default: 14px;
   --font-size-small: 12px;
-  --font-size-xmall: 10px;
+  --font-size-xsmall: 10px;
   --font-weight-default: 400;
   --font-weight-heavy: 500;
   --font-weight-heavier: 600;
@@ -397,6 +397,27 @@ body {
   flex-shrink: 0;
 }
 
+/* Layout positioning */
+.sticky-top {
+  position: sticky;
+  top: 0;
+}
+
+.sticky-bottom {
+  position: sticky;
+  bottom: 0;
+}
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+}
+
+.fixed-bottom {
+  position: fixed;
+  bottom: 0;
+}
+
 /* Spacing: padding */
 .padding-none,
 [padding="none"] {
@@ -610,6 +631,10 @@ body {
 }
 
 /* Effects */
+.drop-shadow {
+  filter: drop-shadow(0px 1px 2px #00000033);
+}
+
 @media (prefers-color-scheme: dark) {
   .dark-color-inverted,
   [dark-color="inverted"],
@@ -618,3 +643,6 @@ body {
     filter: brightness(0) invert(1);
   }
 }
+
+/* Mobile overrides - must be imported last to properly override desktop values */
+@import "./core-mobile.css";

package/src/core/input.css

@@ -34,6 +34,10 @@
   place-content: center;
   margin: 0;
   flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  aspect-ratio: 1 / 1;
+  object-fit: contain;
 }
 
 .checkbox:checked {

package/src/core/inputs.mjs

@@ -233,7 +233,7 @@ export const TextInput = withNormalizedArgs((props, ...children) =>
 export const Select = withNormalizedArgs((props, ...children) =>
   withExtractedStyles((finalProps, ...children) =>
     SelectCore(finalProps, ...children),
-  )({ height: 32, textSize: "1rem", ...props }, ...children),
+  )({ minHeight: 32, textSize: "1rem", ...props }, ...children),
 );
 
 /**
@@ -255,5 +255,5 @@ export const Select = withNormalizedArgs((props, ...children) =>
 export const CheckBox = withNormalizedArgs((props, ...children) =>
   withExtractedStyles((finalProps, ...children) =>
     CheckBoxCore(finalProps, ...children),
-  )({ size: 20, textSize: "1rem", ...props }, ...children),
+  )({ textSize: "1rem", ...props }, ...children),
 );

package/src/core/layout.css

@@ -18,3 +18,18 @@
   flex-grow: 1;
   flex-shrink: 1;
 }
+
+/* Grid Base Styles */
+.grid {
+  --grid-gap: var(--gap-md);
+  display: grid;
+  column-gap: var(--grid-gap);
+  row-gap: var(--grid-gap);
+}
+
+.grid.flow {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: var(--grid-gap);
+}

package/src/core/layout.mjs

@@ -101,28 +101,16 @@ export const Spacer = withNormalizedArgs((props = {}, ...children) => {
 const GridCore = (props, ...children) => {
   let layout = props.layout ?? "fixed";
   let columns = props.columns ?? [];
-  let gap = props.gridGap ?? "var(--gap-md)";
+  let gap = props.gridGap;
 
   delete props.layout;
   delete props.columns;
   delete props.gridGap;
 
-  gap = (typeof gap === "number") ? `${gap}px` : gap;
+  let style = {};
 
-  let style = {
-    display: "grid",
-    "column-gap": gap,
-    "row-gap": gap,
-  };
-
-  if (layout === "flow") {
-    style = {
-      ...style,
-      "display": "flex",
-      "flex-wrap": "wrap",
-      "flex-direction": "row",
-      "gap": gap
-    }
+  if (gap !== undefined) {
+    style["--grid-gap"] = (typeof gap === "number") ? `${gap}px` : gap;
   }
 
   if (layout === "fixed") {
@@ -132,14 +120,13 @@ const GridCore = (props, ...children) => {
       return col.size ?? "1fr";
     }).join(" ");
 
-    style = {
-      ...style,
-      "grid-template-columns": columnsTemplate,
+    if (columnsTemplate) {
+      style["grid-template-columns"] = columnsTemplate;
     }
   }
 
   return div(
-    { ...props, class: `grid ${props.class ?? ""}`, style },
+    { ...props, class: `grid ${layout} ${props.class ?? ""}`, style },
     children
   )
 };

package/src/core/menu.css

@@ -7,9 +7,6 @@
 
 .menu-items {
   position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
   background-color: var(--color-bg-primary);
   border: 1px solid var(--color-border-primary);
   border-radius: var(--radius-md);
@@ -19,6 +16,31 @@
   padding: 4px;
 }
 
+/* Anchor positions */
+.menu-items--bottomLeft {
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+}
+
+.menu-items--bottomRight {
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+}
+
+.menu-items--topLeft {
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+}
+
+.menu-items--topRight {
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 4px;
+}
+
 .menu-divider {
   height: 1px;
   background-color: var(--color-border-primary);

package/src/core/menu.mjs

@@ -34,8 +34,12 @@ const MenuCore = (props, ...children) => {
   // Resolve trigger
   let trigger = props.trigger || "Menu";
   
+  // Resolve anchor position
+  let anchor = props.anchor || "bottomLeft";
+  
   delete props.items;
   delete props.trigger;
+  delete props.anchor;
   
   // Click outside handler
   useEffect(() => {
@@ -79,7 +83,7 @@ const MenuCore = (props, ...children) => {
     // Menu
     Show(isOpen, (open) => 
       open && div(
-        { class: "menu-items" },
+        { class: `menu-items menu-items--${anchor}` },
         Column(
           { gap: 0 },
           ...items.map((item) => {
@@ -117,6 +121,7 @@ const MenuCore = (props, ...children) => {
  * @param {Function} [props.items[].action] - Optional action to run on click
  * @param {boolean} [props.items[].divider] - If true, renders a divider
  * @param {*} [props.trigger] - Trigger element or function that receives {isOpen, toggle}
+ * @param {string} [props.anchor="bottomLeft"] - Menu anchor position: "topLeft" | "topRight" | "bottomLeft" | "bottomRight"
  * @param {string} [props.class] - Additional CSS classes
  * @param {...*} children - Children elements
  * @returns {*} Menu component

package/src/core/table.css

@@ -9,13 +9,13 @@
 
 .table thead td,
 .table th {
-  font-weight: var(--font-weight-heavy);
-  padding: var(--padding-sm) var(--padding-md);
+  font-weight: var(--font-weight-heavier);
+  padding: calc(var(--padding-md) * 0.75) var(--padding-md);
   border-bottom: 1px solid var(--color-border-primary);
 }
 
 .table td {
-  padding: var(--padding-sm) var(--padding-md);
+  padding: calc(var(--padding-md) * 0.5) var(--padding-md);
   border-bottom: 1px solid var(--color-border-primary);
 }
 

package/src/core/table.mjs

@@ -32,7 +32,7 @@ const TableCore = withNormalizedArgs((props, ...children) => {
         headers.map((h) => {
           if (!h.key) return td("");
           if (!(h.key in r)) return td("");
-          return td(r[h.key]);
+          return td({ "data-label": h.content }, r[h.key]);
         }),
       ),
     );
@@ -52,7 +52,7 @@ const TableCore = withNormalizedArgs((props, ...children) => {
 // Apply default Table props at export
 /**
  * Data table component with column headers and row rendering.
- * 
+ *
  * @param {Object} props - Component props
  * @param {Array<{content: *, key: string, size?: number}>} props.headers - Column definitions with content, key for data mapping, and optional size
  * @param {Array<Object>} props.rows - Array of data objects to render as rows (keys should match header keys)
@@ -60,7 +60,7 @@ const TableCore = withNormalizedArgs((props, ...children) => {
  * @param {string} [props.class] - Additional CSS classes
  * @param {...*} children - Child elements
  * @returns {*} Table component
- * 
+ *
  * @example
  * Table({
  *   headers: [

package/src/core/utils.mjs

@@ -161,6 +161,70 @@ export function withExtractedStyles(fn) {
       delete finalProps.marginY;
     }
 
+    if ("marginLeft" in props) {
+      style.marginLeft =
+        typeof props.marginLeft === "number"
+          ? `${props.marginLeft}px`
+          : props.marginLeft;
+      delete finalProps.marginLeft;
+    }
+
+    if ("marginRight" in props) {
+      style.marginRight =
+        typeof props.marginRight === "number"
+          ? `${props.marginRight}px`
+          : props.marginRight;
+      delete finalProps.marginRight;
+    }
+
+    if ("marginTop" in props) {
+      style.marginTop =
+        typeof props.marginTop === "number"
+          ? `${props.marginTop}px`
+          : props.marginTop;
+      delete finalProps.marginTop;
+    }
+
+    if ("marginBottom" in props) {
+      style.marginBottom =
+        typeof props.marginBottom === "number"
+          ? `${props.marginBottom}px`
+          : props.marginBottom;
+      delete finalProps.marginBottom;
+    }
+
+    if ("top" in props) {
+      style.top =
+        typeof props.top === "number"
+          ? `${props.top}px`
+          : props.top;
+      delete finalProps.top;
+    }
+
+    if ("bottom" in props) {
+      style.bottom =
+        typeof props.bottom === "number"
+          ? `${props.bottom}px`
+          : props.bottom;
+      delete finalProps.bottom;
+    }
+
+    if ("left" in props) {
+      style.left =
+        typeof props.left === "number"
+          ? `${props.left}px`
+          : props.left;
+      delete finalProps.left;
+    }
+
+    if ("right" in props) {
+      style.right =
+        typeof props.right === "number"
+          ? `${props.right}px`
+          : props.right;
+      delete finalProps.right;
+    }
+
     if ("flexGrow" in props) {
       style.flexGrow = props.flexGrow;
       delete finalProps.flexGrow;