@jsenv/navi 0.4.2 → 0.5.1

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,
@@ -21196,11 +21313,15 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
     .navi_button {
       position: relative;
-      display: inline-block;
+      display: inline-flex;
+      width: fit-content;
+      height: fit-content;
       padding: 0;
       background: none;
       border: none;
+      border-radius: inherit;
       outline: none;
+      cursor: pointer;
 
       --border-width: 1px;
       --outline-width: 1px;
@@ -21294,6 +21415,9 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       --color: var(--color-readonly);
     }
     /* Disabled */
+    .navi_button[data-disabled] {
+      cursor: default;
+    }
     .navi_button[data-disabled] .navi_button_content {
       --border-color: var(--border-color-disabled);
       --background-color: var(--background-color-disabled);
@@ -21343,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);
@@ -21354,8 +21483,12 @@ const ButtonBasic = forwardRef((props, ref) => {
     loading,
     constraints = [],
     autoFocus,
+    // visual
     appearance = "navi",
+    alignX = "start",
     discrete,
+    className,
+    style,
     children,
     ...rest
   } = props;
@@ -21375,10 +21508,15 @@ const ButtonBasic = forwardRef((props, ref) => {
   } else {
     buttonChildren = children;
   }
+  const innerStyle = {
+    "align-self": alignXMapping[alignX]
+  };
   return jsx("button", {
     ...rest,
     ref: innerRef,
-    className: appearance === "navi" ? "navi_button" : undefined,
+    className: withPropsClassName(appearance === "navi" ? "navi_button" : undefined, className),
+    style: withPropsStyle(innerStyle, style),
+    disabled: innerDisabled,
     "data-discrete": discrete ? "" : undefined,
     "data-readonly": innerReadOnly ? "" : undefined,
     "data-readonly-silent": innerLoading ? "" : undefined,
@@ -27636,12 +27774,14 @@ const useSignalSync = (value, initialValue = value) => {
 const FontSizedSvg = ({
   width = "1em",
   height = "1em",
+  style,
   children,
   ...props
 }) => {
   return jsx("span", {
     ...props,
     style: {
+      ...style,
       display: "flex",
       alignItems: "center",
       width,
@@ -27803,6 +27943,63 @@ const Overflow = ({
   });
 };
 
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  :root {
+    --navi-icon-align-y: center;
+  }
+
+  .navi_text {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.1em;
+  }
+
+  .navi_icon {
+    --align-y: var(--navi-icon-align-y, center);
+
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    align-self: var(--align-y);
+    line-height: 1em;
+  }
+`;
+const Text = ({
+  children,
+  ...rest
+}) => {
+  return jsx("span", {
+    ...rest,
+    className: "navi_text",
+    children: children
+  });
+};
+const alignYMapping = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+const Icon = ({
+  alignY,
+  style,
+  children,
+  ...rest
+}) => {
+  const innerStyle = {
+    ...style
+  };
+  if (alignY !== "center") {
+    innerStyle["--align-y"] = alignYMapping[alignY];
+  }
+  return jsx("span", {
+    ...rest,
+    className: "navi_icon",
+    style: innerStyle,
+    children: children
+  });
+};
+
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   .text_and_count {
     display: flex;
@@ -27912,4 +28109,4 @@ const useDependenciesDiff = (inputs) => {
   return diffRef.current;
 };
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Button, Checkbox, CheckboxList, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FontSizedSvg, Form, IconAndText, Input, Label, Link, LinkWithIcon, Overflow, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, SummaryMarker, Tab, TabList, Table, TableCell, Tbody, 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, 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

@@ -88,6 +88,7 @@ export { FontSizedSvg } from "./src/components/svg/font_sized_svg.jsx";
 export { IconAndText } from "./src/components/svg/icon_and_text.jsx";
 export { SVGMaskOverlay } from "./src/components/svg/svg_mask_overlay.jsx";
 export { Overflow } from "./src/components/text/overflow.jsx";
+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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "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";
@@ -40,11 +42,15 @@ import.meta.css = /* css */ `
   @layer navi {
     .navi_button {
       position: relative;
-      display: inline-block;
+      display: inline-flex;
+      width: fit-content;
+      height: fit-content;
       padding: 0;
       background: none;
       border: none;
+      border-radius: inherit;
       outline: none;
+      cursor: pointer;
 
       --border-width: 1px;
       --outline-width: 1px;
@@ -138,6 +144,9 @@ import.meta.css = /* css */ `
       --color: var(--color-readonly);
     }
     /* Disabled */
+    .navi_button[data-disabled] {
+      cursor: default;
+    }
     .navi_button[data-disabled] .navi_button_content {
       --border-color: var(--border-color-disabled);
       --background-color: var(--background-color-disabled);
@@ -188,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);
@@ -199,8 +213,14 @@ const ButtonBasic = forwardRef((props, ref) => {
     loading,
     constraints = [],
     autoFocus,
+
+    // visual
     appearance = "navi",
+    alignX = "start",
     discrete,
+    className,
+    style,
+
     children,
     ...rest
   } = props;
@@ -221,11 +241,20 @@ const ButtonBasic = forwardRef((props, ref) => {
     buttonChildren = children;
   }
 
+  const innerStyle = {
+    "align-self": alignXMapping[alignX],
+  };
+
   return (
     <button
       {...rest}
       ref={innerRef}
-      className={appearance === "navi" ? "navi_button" : undefined}
+      className={withPropsClassName(
+        appearance === "navi" ? "navi_button" : undefined,
+        className,
+      )}
+      style={withPropsStyle(innerStyle, style)}
+      disabled={innerDisabled}
       data-discrete={discrete ? "" : undefined}
       data-readonly={innerReadOnly ? "" : undefined}
       data-readonly-silent={innerLoading ? "" : 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/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

@@ -23,6 +23,7 @@
 export const FontSizedSvg = ({
   width = "1em",
   height = "1em",
+  style,
   children,
   ...props
 }) => {
@@ -30,6 +31,7 @@ export const FontSizedSvg = ({
     <span
       {...props}
       style={{
+        ...style,
         display: "flex",
         alignItems: "center",
         width,

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

@@ -0,0 +1,465 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Text and Icon Demo</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "preact": "https://esm.sh/preact@10.22.0",
+          "preact/": "https://esm.sh/preact@10.22.0/"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      /* eslint-disable no-unused-vars */
+      import { Text, Icon } from "../text.jsx";
+
+      // Sample SVG icons
+      const HomeIcon = () => (
+        <svg
+          viewBox="0 0 24 24"
+          width="100%"
+          height="100%"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor" />
+        </svg>
+      );
+
+      const UserIcon = () => (
+        <svg
+          viewBox="0 0 24 24"
+          width="100%"
+          height="100%"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+
+      const SettingsIcon = () => (
+        <svg
+          viewBox="0 0 24 24"
+          width="100%"
+          height="100%"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+
+      const SearchIcon = () => (
+        <svg
+          viewBox="0 0 24 24"
+          width="100%"
+          height="100%"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+
+      const StarIcon = () => (
+        <svg
+          viewBox="0 0 24 24"
+          width="100%"
+          height="100%"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+
+      const HeartIcon = () => (
+        <svg
+          viewBox="0 0 24 24"
+          width="100%"
+          height="100%"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+
+      const Demo = () => {
+        return (
+          <div
+            style={{
+              padding: "20px",
+              fontFamily: "system-ui, sans-serif",
+              lineHeight: "1.6",
+              maxWidth: "800px",
+            }}
+          >
+            <h1>Text and Icon Combinations</h1>
+
+            <section style={{ marginBottom: "40px" }}>
+              <h2>Basic Icon + Text</h2>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "10px",
+                }}
+              >
+                <Text>
+                  <Icon>
+                    <HomeIcon />
+                  </Icon>
+                  Home
+                </Text>
+
+                <Text>
+                  <Icon>
+                    <UserIcon />
+                  </Icon>
+                  Profile
+                </Text>
+
+                <Text>
+                  <Icon>
+                    <SettingsIcon />
+                  </Icon>
+                  Settings
+                </Text>
+              </div>
+            </section>
+
+            <section style={{ marginBottom: "40px" }}>
+              <h2>Text + Icon (Reversed Order)</h2>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "10px",
+                }}
+              >
+                <Text>
+                  Search
+                  <Icon>
+                    <SearchIcon />
+                  </Icon>
+                </Text>
+
+                <Text>
+                  Favorites
+                  <Icon>
+                    <StarIcon />
+                  </Icon>
+                </Text>
+
+                <Text>
+                  Liked
+                  <Icon>
+                    <HeartIcon />
+                  </Icon>
+                </Text>
+              </div>
+            </section>
+
+            <section style={{ marginBottom: "40px" }}>
+              <h2>Multiple Icons</h2>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "10px",
+                }}
+              >
+                <Text>
+                  <Icon>
+                    <HomeIcon />
+                  </Icon>
+                  Left and right
+                  <Icon>
+                    <StarIcon />
+                  </Icon>
+                </Text>
+
+                <Text>
+                  <Icon>
+                    <UserIcon />
+                  </Icon>
+                  <Icon>
+                    <SettingsIcon />
+                  </Icon>
+                  Two on the left
+                </Text>
+              </div>
+            </section>
+
+            <section style={{ marginBottom: "40px" }}>
+              <h2>Different Font Sizes</h2>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "15px",
+                }}
+              >
+                <Text style={{ fontSize: "12px" }}>
+                  <Icon>
+                    <HomeIcon />
+                  </Icon>
+                  Small text with icon
+                </Text>
+
+                <Text style={{ fontSize: "16px" }}>
+                  <Icon>
+                    <UserIcon />
+                  </Icon>
+                  Normal text with icon
+                </Text>
+
+                <Text style={{ fontSize: "24px" }}>
+                  <Icon>
+                    <SettingsIcon />
+                  </Icon>
+                  Large text with icon
+                </Text>
+
+                <Text style={{ fontSize: "32px" }}>
+                  <Icon>
+                    <StarIcon />
+                  </Icon>
+                  Extra large text
+                </Text>
+              </div>
+            </section>
+
+            <section style={{ marginBottom: "40px" }}>
+              <h2>Colored Examples</h2>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "10px",
+                }}
+              >
+                <Text style={{ color: "blue" }}>
+                  <Icon>
+                    <HomeIcon />
+                  </Icon>
+                  Blue home link
+                </Text>
+
+                <Text style={{ color: "green" }}>
+                  <Icon>
+                    <UserIcon />
+                  </Icon>
+                  Green user profile
+                </Text>
+
+                <Text style={{ color: "red" }}>
+                  <Icon>
+                    <HeartIcon />
+                  </Icon>
+                  Red heart favorite
+                </Text>
+
+                <Text style={{ color: "purple" }}>
+                  <Icon>
+                    <StarIcon />
+                  </Icon>
+                  Purple star rating
+                </Text>
+              </div>
+            </section>
+
+            <section style={{ marginBottom: "40px" }}>
+              <h2>Interactive Buttons</h2>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "10px",
+                }}
+              >
+                <button
+                  style={{
+                    padding: "10px 15px",
+                    border: "1px solid #ccc",
+                    borderRadius: "4px",
+                    background: "white",
+                    cursor: "pointer",
+                    fontSize: "14px",
+                  }}
+                >
+                  <Text>
+                    <Icon>
+                      <SearchIcon />
+                    </Icon>
+                    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>
+
+            <section style={{ marginBottom: "40px" }}>
+              <h2>Navigation Menu Style</h2>
+              <nav
+                style={{
+                  background: "#f8f9fa",
+                  padding: "20px",
+                  borderRadius: "8px",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    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",
+                      padding: "8px 12px",
+                      borderRadius: "4px",
+                      background: "#007bff",
+                      color: "white",
+                    }}
+                  >
+                    <Icon>
+                      <UserIcon />
+                    </Icon>
+                    Users
+                  </Text>
+
+                  <Text
+                    style={{
+                      cursor: "pointer",
+                      padding: "8px 12px",
+                      borderRadius: "4px",
+                    }}
+                  >
+                    <Icon>
+                      <SettingsIcon />
+                    </Icon>
+                    Settings
+                  </Text>
+                </div>
+              </nav>
+            </section>
+
+            <section>
+              <h2>Inline Text with Icons</h2>
+              <p style={{ fontSize: "16px", lineHeight: "1.6" }}>
+                Welcome to our platform! Click on the{" "}
+                <Text>
+                  <Icon>
+                    <HomeIcon />
+                  </Icon>
+                  home
+                </Text>{" "}
+                button to return to the dashboard, or visit your{" "}
+                <Text>
+                  <Icon>
+                    <UserIcon />
+                  </Icon>
+                  profile
+                </Text>{" "}
+                to update your settings. Don't forget to{" "}
+                <Text>
+                  <Icon>
+                    <StarIcon />
+                  </Icon>
+                  star
+                </Text>{" "}
+                your favorite items and{" "}
+                <Text>
+                  <Icon>
+                    <HeartIcon />
+                  </Icon>
+                  like
+                </Text>{" "}
+                the content you enjoy. Use the{" "}
+                <Text>
+                  <Icon>
+                    <SearchIcon />
+                  </Icon>
+                  search
+                </Text>{" "}
+                feature to find what you're looking for quickly.
+              </p>
+            </section>
+          </div>
+        );
+      };
+
+      render(<Demo />, document.getElementById("app"));
+    </script>
+  </body>
+</html>

package/src/components/text/text.jsx

@@ -0,0 +1,48 @@
+import.meta.css = /* css */ `
+  :root {
+    --navi-icon-align-y: center;
+  }
+
+  .navi_text {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.1em;
+  }
+
+  .navi_icon {
+    --align-y: var(--navi-icon-align-y, center);
+
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    align-self: var(--align-y);
+    line-height: 1em;
+  }
+`;
+
+export const Text = ({ children, ...rest }) => {
+  return (
+    <span {...rest} className="navi_text">
+      {children}
+    </span>
+  );
+};
+
+const alignYMapping = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+};
+export const Icon = ({ alignY, style, children, ...rest }) => {
+  const innerStyle = { ...style };
+  if (alignY !== "center") {
+    innerStyle["--align-y"] = alignYMapping[alignY];
+  }
+
+  return (
+    <span {...rest} className="navi_icon" style={innerStyle}>
+      {children}
+    </span>
+  );
+};