@jsenv/navi 0.5.3 → 0.6.0

package/dist/jsenv_navi.js

@@ -18506,6 +18506,162 @@ const useConstraints = (elementRef, constraints, targetSelector) => {
   }, constraints);
 };
 
+/**
+ * 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) {
+      // CSS custom properties (starting with --) should NOT be converted to camelCase
+      if (property.startsWith("--")) {
+        style[property] = value;
+      } else {
+        // 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;
+};
+
+const getStyleForSpacingProps = ({
+  margin,
+  marginX,
+  marginY,
+  marginLeft,
+  marginTop,
+  marginBottom,
+  marginRight,
+  padding,
+  paddingX,
+  paddingY,
+  paddingLeft,
+  paddingTop,
+  paddingBottom,
+  paddingRight
+}) => {
+  const style = {};
+  if (margin !== undefined) {
+    style.margin = margin;
+  }
+  const effectiveMarginLeft = marginLeft ?? marginX;
+  const effectiveMarginRight = marginRight ?? marginX;
+  const effectiveMarginTop = marginTop ?? marginY;
+  const effectiveMarginBottom = marginBottom ?? marginY;
+  if (effectiveMarginLeft !== undefined) {
+    style.marginLeft = effectiveMarginLeft;
+  }
+  if (effectiveMarginRight !== undefined) {
+    style.marginRight = effectiveMarginRight;
+  }
+  if (effectiveMarginTop !== undefined) {
+    style.marginTop = effectiveMarginTop;
+  }
+  if (effectiveMarginBottom !== undefined) {
+    style.marginBottom = effectiveMarginBottom;
+  }
+  if (padding !== undefined) {
+    style.padding = padding;
+  }
+  const effectivePaddingLeft = paddingLeft ?? paddingX;
+  const effectivePaddingRight = paddingRight ?? paddingX;
+  const effectivePaddingTop = paddingTop ?? paddingY;
+  const effectivePaddingBottom = paddingBottom ?? paddingY;
+  if (effectivePaddingLeft !== undefined) {
+    style.paddingLeft = effectivePaddingLeft;
+  }
+  if (effectivePaddingRight !== undefined) {
+    style.paddingRight = effectivePaddingRight;
+  }
+  if (effectivePaddingTop !== undefined) {
+    style.paddingTop = effectivePaddingTop;
+  }
+  if (effectivePaddingBottom !== undefined) {
+    style.paddingBottom = effectivePaddingBottom;
+  }
+  return style;
+};
+const Spacing = ({
+  style,
+  children,
+  ...rest
+}) => {
+  const styleForSpacing = getStyleForSpacingProps(rest);
+  return jsx("div", {
+    style: withPropsStyle(styleForSpacing, style),
+    children: children
+  });
+};
+
 const useNetworkSpeed = () => {
   return networkSpeedSignal.value;
 };
@@ -20057,16 +20213,17 @@ const NaviCheckbox = ({
   useLayoutEffect(() => {
     return initCustomField(ref.current, inputRef.current);
   }, []);
+  const innerStyle = withPropsStyle({
+    ...(accentColor ? {
+      "--accent-color": accentColor
+    } : {}),
+    ...getStyleForSpacingProps(rest)
+  }, style);
   return jsxs("div", {
     ...rest,
     ref: ref,
     className: "navi_checkbox",
-    style: {
-      ...(accentColor ? {
-        "--accent-color": accentColor
-      } : {}),
-      ...style
-    },
+    style: innerStyle,
     "data-readonly": readOnly ? "" : undefined,
     "data-disabled": disabled ? "" : undefined,
     children: [children, jsx("div", {
@@ -20481,16 +20638,17 @@ const NaviRadio = ({
   useLayoutEffect(() => {
     return initCustomField(ref.current, inputRef.current);
   }, []);
+  const innerStyle = withPropsStyle({
+    ...(accentColor ? {
+      "--accent-color": accentColor
+    } : {}),
+    ...getStyleForSpacingProps(rest)
+  }, style);
   return jsxs("span", {
     ...rest,
     ref: ref,
     className: "navi_radio",
-    style: {
-      ...(accentColor ? {
-        "--accent-color": accentColor
-      } : {}),
-      ...style
-    },
+    style: innerStyle,
     "data-readonly": readOnly ? "" : undefined,
     "data-disabled": disabled ? "" : undefined,
     children: [children, jsx("span", {
@@ -20566,93 +20724,6 @@ const withPropsClassName = (baseClassName, classNameFromProps) => {
   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) {
-      // CSS custom properties (starting with --) should NOT be converted to camelCase
-      if (property.startsWith("--")) {
-        style[property] = value;
-      } else {
-        // 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 {
@@ -20788,15 +20859,17 @@ const InputTextualBasic = forwardRef((props, ref) => {
     autoSelect
   });
   useConstraints(innerRef, constraints);
-  const innerStyle = {
+  const innerClassName = withPropsClassName(appearance === "navi" ? "navi_input" : undefined, className);
+  const innerStyle = withPropsStyle({
     width,
-    height
-  };
+    height,
+    ...getStyleForSpacingProps(rest)
+  }, style);
   const inputTextual = jsx("input", {
     ...rest,
     ref: innerRef,
-    className: withPropsClassName(appearance === "navi" ? "navi_input" : undefined, className),
-    style: withPropsStyle(innerStyle, style),
+    className: innerClassName,
+    style: innerStyle,
     type: type,
     "data-value": uiState,
     value: innerValue,
@@ -21401,7 +21474,6 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     /* Active */
     .navi_button[data-active] .navi_button_content {
       --outline-color: var(--border-color-active);
-      --background-color: none;
       transform: scale(0.9);
     }
     .navi_button[data-active] .navi_button_shadow {
@@ -21514,6 +21586,7 @@ const ButtonBasic = forwardRef((props, ref) => {
     buttonChildren = children;
   }
   const innerStyle = {
+    ...getStyleForSpacingProps(rest),
     "align-self": alignXMapping[alignX]
   };
   return jsx("button", {
@@ -27956,11 +28029,24 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
 `;
 const Text = ({
   children,
+  color,
+  bold,
+  italic,
+  underline,
+  style,
   ...rest
 }) => {
+  const innerStyle = withPropsStyle({
+    color,
+    fontWeight: bold ? "bold" : undefined,
+    fontStyle: italic ? "italic" : undefined,
+    textDecoration: underline ? "underline" : undefined,
+    ...getStyleForSpacingProps(rest)
+  }, style);
   return jsx("span", {
     ...rest,
     className: "navi_text",
+    style: innerStyle,
     children: children
   });
 };
@@ -28098,4 +28184,4 @@ const useDependenciesDiff = (inputs) => {
   return diffRef.current;
 };
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Button, Checkbox, CheckboxList, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FontSizedSvg, Form, Icon, IconAndText, Input, Label, Link, LinkWithIcon, Overflow, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, SummaryMarker, Tab, TabList, Table, TableCell, Tbody, Text, TextAndCount, Thead, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, defineRoutes, enableDebugActions, enableDebugOnDocumentLoading, goBack, goForward, goTo, isCellSelected, isColumnSelected, isRowSelected, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, valueInLocalStorage };
+export { ActionRenderer, ActiveKeyboardShortcuts, Button, Checkbox, CheckboxList, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FontSizedSvg, Form, Icon, IconAndText, Input, Label, Link, LinkWithIcon, Overflow, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, Spacing, SummaryMarker, Tab, TabList, Table, TableCell, Tbody, Text, TextAndCount, Thead, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, defineRoutes, enableDebugActions, enableDebugOnDocumentLoading, goBack, goForward, goTo, isCellSelected, isColumnSelected, isRowSelected, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, valueInLocalStorage };

package/index.js

@@ -92,6 +92,8 @@ export { Icon, Text } from "./src/components/text/text.jsx";
 export { TextAndCount } from "./src/components/text/text_and_count.jsx";
 // Callout, dialogs, ...
 export { openCallout } from "./src/components/callout/callout.js";
+// Layout
+export { Spacing } from "./src/components/layout/spacing.jsx";
 
 // Validation
 export { createUniqueValueConstraint } from "./src/validation/constraints/create_unique_value_constraint.js";

package/package.json

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

package/src/components/field/button.jsx

@@ -14,6 +14,7 @@ import { FormActionContext } from "../action_execution/form_context.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useAction } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
+import { getStyleForSpacingProps } from "../layout/spacing.jsx";
 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";
@@ -125,7 +126,6 @@ import.meta.css = /* css */ `
     /* Active */
     .navi_button[data-active] .navi_button_content {
       --outline-color: var(--border-color-active);
-      --background-color: none;
       transform: scale(0.9);
     }
     .navi_button[data-active] .navi_button_shadow {
@@ -242,6 +242,7 @@ const ButtonBasic = forwardRef((props, ref) => {
   }
 
   const innerStyle = {
+    ...getStyleForSpacingProps(rest),
     "align-self": alignXMapping[alignX],
   };
 

package/src/components/field/input_checkbox.jsx

@@ -13,10 +13,12 @@ import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
+import { getStyleForSpacingProps } from "../layout/spacing.jsx";
 import {
   LoadableInlineElement,
   LoaderBackground,
 } from "../loader/loader_background.jsx";
+import { withPropsStyle } from "../props_composition/with_props_style.js";
 import { useAutoFocus } from "../use_auto_focus.js";
 import { initCustomField } from "./custom_field.js";
 import {
@@ -331,15 +333,20 @@ const NaviCheckbox = ({
     return initCustomField(ref.current, inputRef.current);
   }, []);
 
+  const innerStyle = withPropsStyle(
+    {
+      ...(accentColor ? { "--accent-color": accentColor } : {}),
+      ...getStyleForSpacingProps(rest),
+    },
+    style,
+  );
+
   return (
     <div
       {...rest}
       ref={ref}
       className="navi_checkbox"
-      style={{
-        ...(accentColor ? { "--accent-color": accentColor } : {}),
-        ...style,
-      }}
+      style={innerStyle}
       data-readonly={readOnly ? "" : undefined}
       data-disabled={disabled ? "" : undefined}
     >

package/src/components/field/input_radio.jsx

@@ -8,10 +8,12 @@ import {
 
 import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
+import { getStyleForSpacingProps } from "../layout/spacing.jsx";
 import {
   LoadableInlineElement,
   LoaderBackground,
 } from "../loader/loader_background.jsx";
+import { withPropsStyle } from "../props_composition/with_props_style.js";
 import { useAutoFocus } from "../use_auto_focus.js";
 import { initCustomField } from "./custom_field.js";
 import {
@@ -370,15 +372,20 @@ const NaviRadio = ({
     return initCustomField(ref.current, inputRef.current);
   }, []);
 
+  const innerStyle = withPropsStyle(
+    {
+      ...(accentColor ? { "--accent-color": accentColor } : {}),
+      ...getStyleForSpacingProps(rest),
+    },
+    style,
+  );
+
   return (
     <span
       {...rest}
       ref={ref}
       className="navi_radio"
-      style={{
-        ...(accentColor ? { "--accent-color": accentColor } : {}),
-        ...style,
-      }}
+      style={innerStyle}
       data-readonly={readOnly ? "" : undefined}
       data-disabled={disabled ? "" : undefined}
     >

package/src/components/field/input_textual.jsx

@@ -31,6 +31,7 @@ import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
+import { getStyleForSpacingProps } from "../layout/spacing.jsx";
 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";
@@ -194,19 +195,24 @@ const InputTextualBasic = forwardRef((props, ref) => {
   });
   useConstraints(innerRef, constraints);
 
-  const innerStyle = {
-    width,
-    height,
-  };
+  const innerClassName = withPropsClassName(
+    appearance === "navi" ? "navi_input" : undefined,
+    className,
+  );
+  const innerStyle = withPropsStyle(
+    {
+      width,
+      height,
+      ...getStyleForSpacingProps(rest),
+    },
+    style,
+  );
   const inputTextual = (
     <input
       {...rest}
       ref={innerRef}
-      className={withPropsClassName(
-        appearance === "navi" ? "navi_input" : undefined,
-        className,
-      )}
-      style={withPropsStyle(innerStyle, style)}
+      className={innerClassName}
+      style={innerStyle}
       type={type}
       data-value={uiState}
       value={innerValue}

package/src/components/layout/spacing.jsx

@@ -0,0 +1,68 @@
+import { withPropsStyle } from "../props_composition/with_props_style.js";
+
+export const getStyleForSpacingProps = ({
+  margin,
+  marginX,
+  marginY,
+  marginLeft,
+  marginTop,
+  marginBottom,
+  marginRight,
+  padding,
+  paddingX,
+  paddingY,
+  paddingLeft,
+  paddingTop,
+  paddingBottom,
+  paddingRight,
+}) => {
+  const style = {};
+
+  if (margin !== undefined) {
+    style.margin = margin;
+  }
+  const effectiveMarginLeft = marginLeft ?? marginX;
+  const effectiveMarginRight = marginRight ?? marginX;
+  const effectiveMarginTop = marginTop ?? marginY;
+  const effectiveMarginBottom = marginBottom ?? marginY;
+
+  if (effectiveMarginLeft !== undefined) {
+    style.marginLeft = effectiveMarginLeft;
+  }
+  if (effectiveMarginRight !== undefined) {
+    style.marginRight = effectiveMarginRight;
+  }
+  if (effectiveMarginTop !== undefined) {
+    style.marginTop = effectiveMarginTop;
+  }
+  if (effectiveMarginBottom !== undefined) {
+    style.marginBottom = effectiveMarginBottom;
+  }
+
+  if (padding !== undefined) {
+    style.padding = padding;
+  }
+  const effectivePaddingLeft = paddingLeft ?? paddingX;
+  const effectivePaddingRight = paddingRight ?? paddingX;
+  const effectivePaddingTop = paddingTop ?? paddingY;
+  const effectivePaddingBottom = paddingBottom ?? paddingY;
+  if (effectivePaddingLeft !== undefined) {
+    style.paddingLeft = effectivePaddingLeft;
+  }
+  if (effectivePaddingRight !== undefined) {
+    style.paddingRight = effectivePaddingRight;
+  }
+  if (effectivePaddingTop !== undefined) {
+    style.paddingTop = effectivePaddingTop;
+  }
+  if (effectivePaddingBottom !== undefined) {
+    style.paddingBottom = effectivePaddingBottom;
+  }
+
+  return style;
+};
+
+export const Spacing = ({ style, children, ...rest }) => {
+  const styleForSpacing = getStyleForSpacingProps(rest);
+  return <div style={withPropsStyle(styleForSpacing, style)}>{children}</div>;
+};

package/src/components/text/demos/demo_text_and_icon.html

@@ -160,20 +160,6 @@
                     <SearchIcon />
                   </Icon>
                 </Text>
-
-                <Text>
-                  Favorites
-                  <Icon>
-                    <StarIcon />
-                  </Icon>
-                </Text>
-
-                <Text>
-                  Liked
-                  <Icon>
-                    <HeartIcon />
-                  </Icon>
-                </Text>
               </div>
             </section>
 
@@ -205,6 +191,32 @@
                   </Icon>
                   Two on the left
                 </Text>
+
+                <Text>
+                  Two on the right
+                  <Icon>
+                    <StarIcon />
+                  </Icon>
+                  <Icon>
+                    <HeartIcon />
+                  </Icon>
+                </Text>
+
+                <Text>
+                  <Icon>
+                    <HomeIcon />
+                  </Icon>
+                  <Icon>
+                    <UserIcon />
+                  </Icon>
+                  Two on the left and right
+                  <Icon>
+                    <StarIcon />
+                  </Icon>
+                  <Icon>
+                    <HeartIcon />
+                  </Icon>
+                </Text>
               </div>
             </section>
 
@@ -312,44 +324,6 @@
                     Search Files
                   </Text>
                 </button>
-
-                <button
-                  style={{
-                    padding: "10px 15px",
-                    border: "none",
-                    borderRadius: "4px",
-                    background: "#007bff",
-                    color: "white",
-                    cursor: "pointer",
-                    fontSize: "14px",
-                  }}
-                >
-                  <Text>
-                    <Icon>
-                      <UserIcon />
-                    </Icon>
-                    Create Account
-                  </Text>
-                </button>
-
-                <button
-                  style={{
-                    padding: "10px 15px",
-                    border: "1px solid #dc3545",
-                    borderRadius: "4px",
-                    background: "transparent",
-                    color: "#dc3545",
-                    cursor: "pointer",
-                    fontSize: "14px",
-                  }}
-                >
-                  <Text>
-                    <Icon>
-                      <HeartIcon />
-                    </Icon>
-                    Add to Favorites
-                  </Text>
-                </button>
               </div>
             </section>
 
@@ -369,20 +343,6 @@
                     gap: "15px",
                   }}
                 >
-                  <Text
-                    style={{
-                      cursor: "pointer",
-                      padding: "8px 12px",
-                      borderRadius: "4px",
-                      transition: "background-color 0.2s",
-                    }}
-                  >
-                    <Icon>
-                      <HomeIcon />
-                    </Icon>
-                    Dashboard
-                  </Text>
-
                   <Text
                     style={{
                       cursor: "pointer",
@@ -397,19 +357,6 @@
                     </Icon>
                     Users
                   </Text>
-
-                  <Text
-                    style={{
-                      cursor: "pointer",
-                      padding: "8px 12px",
-                      borderRadius: "4px",
-                    }}
-                  >
-                    <Icon>
-                      <SettingsIcon />
-                    </Icon>
-                    Settings
-                  </Text>
                 </div>
               </nav>
             </section>
@@ -418,41 +365,50 @@
               <h2>Inline Text with Icons</h2>
               <p style={{ fontSize: "16px", lineHeight: "1.6" }}>
                 Welcome to our platform! Click on the{" "}
-                <Text>
+                <Text bold>
                   <Icon>
                     <HomeIcon />
                   </Icon>
                   home
                 </Text>{" "}
                 button to return to the dashboard, or visit your{" "}
-                <Text>
+                <Text italic>
                   <Icon>
                     <UserIcon />
                   </Icon>
                   profile
                 </Text>{" "}
                 to update your settings. Don't forget to{" "}
-                <Text>
+                <Text underline>
                   <Icon>
                     <StarIcon />
                   </Icon>
                   star
                 </Text>{" "}
                 your favorite items and{" "}
-                <Text>
+                <Text bold italic>
                   <Icon>
                     <HeartIcon />
                   </Icon>
                   like
                 </Text>{" "}
                 the content you enjoy. Use the{" "}
-                <Text>
+                <Text bold underline>
                   <Icon>
                     <SearchIcon />
                   </Icon>
                   search
                 </Text>{" "}
-                feature to find what you're looking for quickly.
+                feature to find what you're looking for quickly. You can also
+                combine{" "}
+                <Text italic underline>
+                  multiple styles
+                </Text>{" "}
+                together for{" "}
+                <Text bold italic underline>
+                  maximum emphasis
+                </Text>
+                !
               </p>
             </section>
           </div>

package/src/components/text/text.jsx

@@ -1,3 +1,6 @@
+import { getStyleForSpacingProps } from "../layout/spacing.jsx";
+import { withPropsStyle } from "../props_composition/with_props_style.js";
+
 import.meta.css = /* css */ `
   :root {
     --navi-icon-align-y: center;
@@ -21,9 +24,28 @@ import.meta.css = /* css */ `
   }
 `;
 
-export const Text = ({ children, ...rest }) => {
+export const Text = ({
+  children,
+  color,
+  bold,
+  italic,
+  underline,
+  style,
+  ...rest
+}) => {
+  const innerStyle = withPropsStyle(
+    {
+      color,
+      fontWeight: bold ? "bold" : undefined,
+      fontStyle: italic ? "italic" : undefined,
+      textDecoration: underline ? "underline" : undefined,
+      ...getStyleForSpacingProps(rest),
+    },
+    style,
+  );
+
   return (
-    <span {...rest} className="navi_text">
+    <span {...rest} className="navi_text" style={innerStyle}>
       {children}
     </span>
   );