npm - @jsenv/navi - Versions diffs - 0.5.1 → 0.5.2 - Mend

@jsenv/navi 0.5.1 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/jsenv_navi.js +16 -32
package/package.json +1 -1
package/src/components/props_composition/demos/demo_with_props_style.html +136 -0
package/src/components/svg/font_sized_svg.jsx +22 -10

package/dist/jsenv_navi.js CHANGED Viewed

@@ -27749,28 +27749,17 @@ const useSignalSync = (value, initialValue = value) => {
   return signal;
 };
-/**
- * FontSizedSvg component
- *
- * This component wraps an SVG element to make it inherit the current font size.
- * It creates a container that's exactly 1em × 1em in size, allowing the SVG to scale
- * proportionally with the surrounding text.
- *
- * Usage:
- * ```jsx
- * <FontSizedSvg>
- *   <svg width="100%" height="100%" viewBox="...">
- *     <path d="..." />
- *    </svg>
- * </FontSizedSvg>
- * ```
- *
- * Notes:
- * - The wrapped SVG should use width="100%" and height="100%" to fill the container
- * - This ensures SVG icons match the current text size without additional styling
- * - Useful for inline icons that should respect the parent's font-size
- */
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_font_sized_svg {
+    display: flex;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    align-items: center;
+    justify-self: center;
+    line-height: 1em;
+  }
+`;
 const FontSizedSvg = ({
   width = "1em",
   height = "1em",
@@ -27780,16 +27769,11 @@ const FontSizedSvg = ({
 }) => {
   return jsx("span", {
     ...props,
-    style: {
-      ...style,
-      display: "flex",
-      alignItems: "center",
-      width,
-      height,
-      justifySelf: "center",
-      lineHeight: "1em",
-      flexShrink: 0
-    },
+    className: "navi_font_sized_svg",
+    style: withPropsStyle({
+      width: width === "1em" ? undefined : width,
+      height: height === "1em" ? undefined : height
+    }, style),
     children: children
   });
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",

package/src/components/props_composition/demos/demo_with_props_style.html ADDED Viewed

@@ -0,0 +1,136 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>withPropsStyle Demo - Simple</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" jsenv-type="module/jsx">
+      /* eslint-disable no-unused-vars */
+      import { render } from "preact";
+      import { withPropsStyle } from "../with_props_style.js";
+      // Simple button component
+      const Button = ({ style, children, ...rest }) => (
+        <button
+          style={withPropsStyle(
+            {
+              padding: "12px 20px",
+              borderRadius: "4px",
+              border: "1px solid #ccc",
+              backgroundColor: "#f8f9fa",
+              cursor: "pointer",
+              fontFamily: "system-ui, sans-serif",
+            },
+            style,
+          )}
+          {...rest}
+        >
+          {children}
+        </button>
+      );
+      // Component using CSS variables
+      const ThemedBox = ({ style, children, ...rest }) => (
+        <div
+          style={withPropsStyle(
+            {
+              padding: "20px",
+              borderRadius: "8px",
+              backgroundColor: "var(--box-color, #e3f2fd)",
+              border: "2px solid var(--border-color, #90caf9)",
+              color: "var(--text-color, #1565c0)",
+            },
+            style,
+          )}
+          {...rest}
+        >
+          {children}
+        </div>
+      );
+      const Demo = () => {
+        return (
+          <div
+            style={{
+              padding: "20px",
+              fontFamily: "system-ui, sans-serif",
+              maxWidth: "600px",
+            }}
+          >
+            <h1>withPropsStyle Demo</h1>
+            <section style={{ marginBottom: "30px" }}>
+              <h2>Background Color Control</h2>
+              <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+                <Button>Default Button</Button>
+                <Button style={{ backgroundColor: "#007bff" }}>
+                  Object: Blue
+                </Button>
+                <Button style="background-color: #28a745;">
+                  String: Green
+                </Button>
+                <Button style={{ backgroundColor: "#dc3545", color: "white" }}>
+                  Object: Red + White Text
+                </Button>
+                <Button style="background-color: #ffc107; color: black;">
+                  String: Yellow + Black Text
+                </Button>
+              </div>
+            </section>
+            <section>
+              <h2>CSS Variables Control</h2>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "15px",
+                }}
+              >
+                <ThemedBox>Default themed box with CSS variables</ThemedBox>
+                <ThemedBox
+                  style={{
+                    "--box-color": "#ffebee",
+                    "--border-color": "#f44336",
+                    "--text-color": "#c62828",
+                  }}
+                >
+                  Object: Red theme via CSS variables
+                </ThemedBox>
+                <ThemedBox style="--box-color: #e8f5e8; --border-color: #4caf50; --text-color: #2e7d32;">
+                  String: Green theme via CSS variables
+                </ThemedBox>
+                <ThemedBox
+                  style={{
+                    "--box-color": "#fff3e0",
+                    "--border-color": "#ff9800",
+                    "padding": "30px",
+                  }}
+                >
+                  Object: Orange theme + custom padding override
+                </ThemedBox>
+                <ThemedBox style="--box-color: #f3e5f5; --border-color: #9c27b0; --text-color: #6a1b9a; border-radius: 16px;">
+                  String: Purple theme + border-radius override
+                </ThemedBox>
+              </div>
+            </section>
+          </div>
+        );
+      };
+      render(<Demo />, document.getElementById("app"));
+    </script>
+  </body>
+</html>

package/src/components/svg/font_sized_svg.jsx CHANGED Viewed

@@ -20,6 +20,20 @@
  * - Useful for inline icons that should respect the parent's font-size
  */
+import { withPropsStyle } from "../props_composition/with_props_style.js";
+import.meta.css = /* css */ `
+  .navi_font_sized_svg {
+    display: flex;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    align-items: center;
+    justify-self: center;
+    line-height: 1em;
+  }
+`;
 export const FontSizedSvg = ({
   width = "1em",
   height = "1em",
@@ -30,16 +44,14 @@ export const FontSizedSvg = ({
   return (
     <span
       {...props}
-      style={{
-        ...style,
-        display: "flex",
-        alignItems: "center",
-        width,
-        height,
-        justifySelf: "center",
-        lineHeight: "1em",
-        flexShrink: 0,
-      }}
+      className="navi_font_sized_svg"
+      style={withPropsStyle(
+        {
+          width: width === "1em" ? undefined : width,
+          height: height === "1em" ? undefined : height,
+        },
+        style,
+      )}
     >
       {children}
     </span>