@jsenv/navi 0.4.2 → 0.5.0

package/dist/jsenv_navi.js

@@ -21196,11 +21196,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 +21298,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);
@@ -21355,6 +21362,8 @@ const ButtonBasic = forwardRef((props, ref) => {
     constraints = [],
     autoFocus,
     appearance = "navi",
+    alignX = "start",
+    style,
     discrete,
     children,
     ...rest
@@ -21375,10 +21384,18 @@ const ButtonBasic = forwardRef((props, ref) => {
   } else {
     buttonChildren = children;
   }
+  const innerStyle = {
+    ...style
+  };
+  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,
+    disabled: innerDisabled,
     "data-discrete": discrete ? "" : undefined,
     "data-readonly": innerReadOnly ? "" : undefined,
     "data-readonly-silent": innerLoading ? "" : undefined,
@@ -27636,12 +27653,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 +27822,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 +27988,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.0",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",

package/src/components/field/button.jsx

@@ -40,11 +40,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 +142,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);
@@ -200,6 +207,8 @@ const ButtonBasic = forwardRef((props, ref) => {
     constraints = [],
     autoFocus,
     appearance = "navi",
+    alignX = "start",
+    style,
     discrete,
     children,
     ...rest
@@ -221,11 +230,18 @@ const ButtonBasic = forwardRef((props, ref) => {
     buttonChildren = children;
   }
 
+  const innerStyle = { ...style };
+  if (alignX !== "start") {
+    innerStyle["align-self"] = alignX === "center" ? "center" : "flex-end";
+  }
+
   return (
     <button
       {...rest}
       ref={innerRef}
       className={appearance === "navi" ? "navi_button" : undefined}
+      style={innerStyle}
+      disabled={innerDisabled}
       data-discrete={discrete ? "" : undefined}
       data-readonly={innerReadOnly ? "" : undefined}
       data-readonly-silent={innerLoading ? "" : undefined}

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>
+  );
+};