@jsenv/navi 0.5.0 → 0.5.2

package/dist/jsenv_navi.js

@@ -20528,6 +20528,126 @@ const InputRadioWithAction = () => {
 };
 const InputRadioInsideForm = InputRadio;
 
+/**
+ * Merges a component's base className with className received from props.
+ *
+ * ```jsx
+ * const MyButton = ({ className, children }) => (
+ *   <button className={withPropsClassName("btn", className)}>
+ *     {children}
+ *   </button>
+ * );
+ *
+ * // Usage:
+ * <MyButton className="primary large" /> // Results in "btn primary large"
+ * <MyButton /> // Results in "btn"
+ * ```
+ *
+ * @param {string} baseClassName - The component's base CSS class name
+ * @param {string} [classNameFromProps] - Additional className from props (optional)
+ * @returns {string} The merged className string
+ */
+const withPropsClassName = (baseClassName, classNameFromProps) => {
+  if (!classNameFromProps) {
+    return baseClassName;
+  }
+
+  // Trim and normalize whitespace from the props className
+  const trimmedPropsClassName = classNameFromProps.trim();
+  if (!trimmedPropsClassName) {
+    return baseClassName;
+  }
+
+  // Normalize multiple spaces to single spaces and combine
+  const normalizedPropsClassName = trimmedPropsClassName.replace(/\s+/g, " ");
+  if (!baseClassName) {
+    return normalizedPropsClassName;
+  }
+  return `${baseClassName} ${normalizedPropsClassName}`;
+};
+
+/**
+ * Merges a component's base style with style received from props.
+ *
+ * ```jsx
+ * const MyButton = ({ style, children }) => (
+ *   <button style={withPropsStyle({ padding: '10px' }, style)}>
+ *     {children}
+ *   </button>
+ * );
+ *
+ * // Usage:
+ * <MyButton style={{ color: 'red', fontSize: '14px' }} />
+ * <MyButton style="color: blue; margin: 5px;" />
+ * <MyButton /> // Just base styles
+ * ```
+ *
+ * @param {string|object} baseStyle - The component's base style (string or object)
+ * @param {string|object} [styleFromProps] - Additional style from props (optional)
+ * @returns {object} The merged style object
+ */
+const withPropsStyle = (baseStyle, styleFromProps) => {
+  if (!styleFromProps) {
+    return baseStyle;
+  }
+  if (!baseStyle) {
+    return styleFromProps;
+  }
+
+  // Parse base style to object if it's a string
+  const parsedBaseStyle =
+    typeof baseStyle === "string"
+      ? parseStyleString(baseStyle)
+      : baseStyle || {};
+  // Parse props style to object if it's a string
+  const parsedPropsStyle =
+    typeof styleFromProps === "string"
+      ? parseStyleString(styleFromProps)
+      : styleFromProps;
+  // Merge styles with props taking priority
+  return { ...parsedBaseStyle, ...parsedPropsStyle };
+};
+
+/**
+ * Parses a CSS style string into a style object.
+ * Handles CSS properties with proper camelCase conversion.
+ *
+ * @param {string} styleString - CSS style string like "color: red; font-size: 14px;"
+ * @returns {object} Style object with camelCase properties
+ */
+const parseStyleString = (styleString) => {
+  const style = {};
+
+  if (!styleString || typeof styleString !== "string") {
+    return style;
+  }
+
+  // Split by semicolon and process each declaration
+  const declarations = styleString.split(";");
+
+  for (let declaration of declarations) {
+    declaration = declaration.trim();
+    if (!declaration) continue;
+
+    const colonIndex = declaration.indexOf(":");
+    if (colonIndex === -1) continue;
+
+    const property = declaration.slice(0, colonIndex).trim();
+    const value = declaration.slice(colonIndex + 1).trim();
+
+    if (property && value) {
+      // Convert kebab-case to camelCase (e.g., "font-size" -> "fontSize")
+      const camelCaseProperty = property.replace(/-([a-z])/g, (match, letter) =>
+        letter.toUpperCase(),
+      );
+
+      style[camelCaseProperty] = value;
+    }
+  }
+
+  return style;
+};
+
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
     .navi_input {
@@ -20641,11 +20761,13 @@ const InputTextualBasic = forwardRef((props, ref) => {
     autoFocus,
     autoFocusVisible,
     autoSelect,
+    // visual
     appearance = "navi",
     accentColor,
-    style,
     width,
     height,
+    className,
+    style,
     ...rest
   } = props;
   const innerRef = useRef();
@@ -20662,19 +20784,14 @@ const InputTextualBasic = forwardRef((props, ref) => {
   });
   useConstraints(innerRef, constraints);
   const innerStyle = {
-    ...style
+    width,
+    height
   };
-  if (width !== undefined) {
-    innerStyle.width = width;
-  }
-  if (height !== undefined) {
-    innerStyle.height = height;
-  }
   const inputTextual = jsx("input", {
     ...rest,
     ref: innerRef,
-    className: appearance === "navi" ? "navi_input" : undefined,
-    style: innerStyle,
+    className: withPropsClassName(appearance === "navi" ? "navi_input" : undefined, className),
+    style: withPropsStyle(innerStyle, style),
     type: type,
     "data-value": uiState,
     value: innerValue,
@@ -21350,6 +21467,11 @@ const Button = forwardRef((props, ref) => {
     WithActionInsideForm: ButtonWithActionInsideForm
   });
 });
+const alignXMapping = {
+  start: undefined,
+  center: "center",
+  end: "flex-end"
+};
 const ButtonBasic = forwardRef((props, ref) => {
   const contextLoading = useContext(LoadingContext);
   const contextLoadingElement = useContext(LoadingElementContext);
@@ -21361,10 +21483,12 @@ const ButtonBasic = forwardRef((props, ref) => {
     loading,
     constraints = [],
     autoFocus,
+    // visual
     appearance = "navi",
     alignX = "start",
-    style,
     discrete,
+    className,
+    style,
     children,
     ...rest
   } = props;
@@ -21385,16 +21509,13 @@ const ButtonBasic = forwardRef((props, ref) => {
     buttonChildren = children;
   }
   const innerStyle = {
-    ...style
+    "align-self": alignXMapping[alignX]
   };
-  if (alignX !== "start") {
-    innerStyle["align-self"] = alignX === "center" ? "center" : "flex-end";
-  }
   return jsx("button", {
     ...rest,
     ref: innerRef,
-    className: appearance === "navi" ? "navi_button" : undefined,
-    style: innerStyle,
+    className: withPropsClassName(appearance === "navi" ? "navi_button" : undefined, className),
+    style: withPropsStyle(innerStyle, style),
     disabled: innerDisabled,
     "data-discrete": discrete ? "" : undefined,
     "data-readonly": innerReadOnly ? "" : undefined,
@@ -27628,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",
@@ -27659,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

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

package/src/components/field/button.jsx

@@ -15,6 +15,8 @@ import { renderActionableComponent } from "../action_execution/render_actionable
 import { useAction } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
 import { LoaderBackground } from "../loader/loader_background.jsx";
+import { withPropsClassName } from "../props_composition/with_props_class_name.js";
+import { withPropsStyle } from "../props_composition/with_props_style.js";
 import { useAutoFocus } from "../use_auto_focus.js";
 import { initCustomField } from "./custom_field.js";
 import { useActionEvents } from "./use_action_events.js";
@@ -195,6 +197,11 @@ export const Button = forwardRef((props, ref) => {
   });
 });
 
+const alignXMapping = {
+  start: undefined,
+  center: "center",
+  end: "flex-end",
+};
 const ButtonBasic = forwardRef((props, ref) => {
   const contextLoading = useContext(LoadingContext);
   const contextLoadingElement = useContext(LoadingElementContext);
@@ -206,10 +213,14 @@ const ButtonBasic = forwardRef((props, ref) => {
     loading,
     constraints = [],
     autoFocus,
+
+    // visual
     appearance = "navi",
     alignX = "start",
-    style,
     discrete,
+    className,
+    style,
+
     children,
     ...rest
   } = props;
@@ -230,17 +241,19 @@ const ButtonBasic = forwardRef((props, ref) => {
     buttonChildren = children;
   }
 
-  const innerStyle = { ...style };
-  if (alignX !== "start") {
-    innerStyle["align-self"] = alignX === "center" ? "center" : "flex-end";
-  }
+  const innerStyle = {
+    "align-self": alignXMapping[alignX],
+  };
 
   return (
     <button
       {...rest}
       ref={innerRef}
-      className={appearance === "navi" ? "navi_button" : undefined}
-      style={innerStyle}
+      className={withPropsClassName(
+        appearance === "navi" ? "navi_button" : undefined,
+        className,
+      )}
+      style={withPropsStyle(innerStyle, style)}
       disabled={innerDisabled}
       data-discrete={discrete ? "" : undefined}
       data-readonly={innerReadOnly ? "" : undefined}

package/src/components/field/input_textual.jsx

@@ -32,6 +32,8 @@ import { renderActionableComponent } from "../action_execution/render_actionable
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
 import { LoadableInlineElement } from "../loader/loader_background.jsx";
+import { withPropsClassName } from "../props_composition/with_props_class_name.js";
+import { withPropsStyle } from "../props_composition/with_props_style.js";
 import { useAutoFocus } from "../use_auto_focus.js";
 import { initCustomField } from "./custom_field.js";
 import { ReportReadOnlyOnLabelContext } from "./label.jsx";
@@ -163,11 +165,15 @@ const InputTextualBasic = forwardRef((props, ref) => {
     autoFocus,
     autoFocusVisible,
     autoSelect,
+
+    // visual
     appearance = "navi",
     accentColor,
-    style,
     width,
     height,
+    className,
+    style,
+
     ...rest
   } = props;
   const innerRef = useRef();
@@ -188,19 +194,19 @@ const InputTextualBasic = forwardRef((props, ref) => {
   });
   useConstraints(innerRef, constraints);
 
-  const innerStyle = { ...style };
-  if (width !== undefined) {
-    innerStyle.width = width;
-  }
-  if (height !== undefined) {
-    innerStyle.height = height;
-  }
+  const innerStyle = {
+    width,
+    height,
+  };
   const inputTextual = (
     <input
       {...rest}
       ref={innerRef}
-      className={appearance === "navi" ? "navi_input" : undefined}
-      style={innerStyle}
+      className={withPropsClassName(
+        appearance === "navi" ? "navi_input" : undefined,
+        className,
+      )}
+      style={withPropsStyle(innerStyle, style)}
       type={type}
       data-value={uiState}
       value={innerValue}

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

@@ -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/props_composition/with_props_class_name.js

@@ -0,0 +1,37 @@
+/**
+ * Merges a component's base className with className received from props.
+ *
+ * ```jsx
+ * const MyButton = ({ className, children }) => (
+ *   <button className={withPropsClassName("btn", className)}>
+ *     {children}
+ *   </button>
+ * );
+ *
+ * // Usage:
+ * <MyButton className="primary large" /> // Results in "btn primary large"
+ * <MyButton /> // Results in "btn"
+ * ```
+ *
+ * @param {string} baseClassName - The component's base CSS class name
+ * @param {string} [classNameFromProps] - Additional className from props (optional)
+ * @returns {string} The merged className string
+ */
+export const withPropsClassName = (baseClassName, classNameFromProps) => {
+  if (!classNameFromProps) {
+    return baseClassName;
+  }
+
+  // Trim and normalize whitespace from the props className
+  const trimmedPropsClassName = classNameFromProps.trim();
+  if (!trimmedPropsClassName) {
+    return baseClassName;
+  }
+
+  // Normalize multiple spaces to single spaces and combine
+  const normalizedPropsClassName = trimmedPropsClassName.replace(/\s+/g, " ");
+  if (!baseClassName) {
+    return normalizedPropsClassName;
+  }
+  return `${baseClassName} ${normalizedPropsClassName}`;
+};

package/src/components/props_composition/with_props_style.js

@@ -0,0 +1,81 @@
+/**
+ * Merges a component's base style with style received from props.
+ *
+ * ```jsx
+ * const MyButton = ({ style, children }) => (
+ *   <button style={withPropsStyle({ padding: '10px' }, style)}>
+ *     {children}
+ *   </button>
+ * );
+ *
+ * // Usage:
+ * <MyButton style={{ color: 'red', fontSize: '14px' }} />
+ * <MyButton style="color: blue; margin: 5px;" />
+ * <MyButton /> // Just base styles
+ * ```
+ *
+ * @param {string|object} baseStyle - The component's base style (string or object)
+ * @param {string|object} [styleFromProps] - Additional style from props (optional)
+ * @returns {object} The merged style object
+ */
+export const withPropsStyle = (baseStyle, styleFromProps) => {
+  if (!styleFromProps) {
+    return baseStyle;
+  }
+  if (!baseStyle) {
+    return styleFromProps;
+  }
+
+  // Parse base style to object if it's a string
+  const parsedBaseStyle =
+    typeof baseStyle === "string"
+      ? parseStyleString(baseStyle)
+      : baseStyle || {};
+  // Parse props style to object if it's a string
+  const parsedPropsStyle =
+    typeof styleFromProps === "string"
+      ? parseStyleString(styleFromProps)
+      : styleFromProps;
+  // Merge styles with props taking priority
+  return { ...parsedBaseStyle, ...parsedPropsStyle };
+};
+
+/**
+ * Parses a CSS style string into a style object.
+ * Handles CSS properties with proper camelCase conversion.
+ *
+ * @param {string} styleString - CSS style string like "color: red; font-size: 14px;"
+ * @returns {object} Style object with camelCase properties
+ */
+const parseStyleString = (styleString) => {
+  const style = {};
+
+  if (!styleString || typeof styleString !== "string") {
+    return style;
+  }
+
+  // Split by semicolon and process each declaration
+  const declarations = styleString.split(";");
+
+  for (let declaration of declarations) {
+    declaration = declaration.trim();
+    if (!declaration) continue;
+
+    const colonIndex = declaration.indexOf(":");
+    if (colonIndex === -1) continue;
+
+    const property = declaration.slice(0, colonIndex).trim();
+    const value = declaration.slice(colonIndex + 1).trim();
+
+    if (property && value) {
+      // Convert kebab-case to camelCase (e.g., "font-size" -> "fontSize")
+      const camelCaseProperty = property.replace(/-([a-z])/g, (match, letter) =>
+        letter.toUpperCase(),
+      );
+
+      style[camelCaseProperty] = value;
+    }
+  }
+
+  return style;
+};

package/src/components/svg/font_sized_svg.jsx

@@ -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>