@jsenv/navi 0.1.1 → 0.2.1

package/src/components/field/input_radio.jsx

@@ -8,9 +8,16 @@ import {
 
 import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import { LoadableInlineElement } from "../loader/loader_background.jsx";
+import {
+  LoadableInlineElement,
+  LoaderBackground,
+} from "../loader/loader_background.jsx";
 import { useAutoFocus } from "../use_auto_focus.js";
-import { ReportReadOnlyOnLabelContext } from "./label.jsx";
+import { initCustomField } from "./custom_field.js";
+import {
+  ReportDisabledOnLabelContext,
+  ReportReadOnlyOnLabelContext,
+} from "./label.jsx";
 import {
   DisabledContext,
   FieldNameContext,
@@ -25,169 +32,162 @@ import {
 } from "./use_ui_state_controller.js";
 
 import.meta.css = /* css */ `
-  .custom_radio_wrapper {
-    position: relative;
-    display: inline-flex;
-    box-sizing: content-box;
-
-    --checked-color: #3b82f6;
-    --checked-disabled-color: var(--field-disabled-border-color);
-
-    --checkmark-color: var(--checked-color);
-    --checkmark-disabled-color: var(--field-disabled-text-color);
-  }
-
-  .custom_radio_wrapper input {
-    position: absolute;
-    opacity: 0;
-    inset: 0;
-    margin: 0;
-    padding: 0;
-    border: none;
-  }
-
-  .custom_radio {
-    width: 13px;
-    height: 13px;
-    background: transparent;
-    border-radius: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 5px;
-    margin-top: 3px;
-    margin-right: 3px;
-  }
-
-  .custom_radio svg {
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  .custom_radio svg .custom_radio_dashed_border {
-    display: none;
-  }
-
-  .custom_radio svg .custom_radio_marker {
-    fill: var(--checkmark-color);
-    opacity: 0;
-    transform-origin: center;
-    transform: scale(0.3);
-  }
-
-  .custom_radio[data-transition] svg {
-    transition: all 0.15s ease;
-  }
-  .custom_radio[data-transition] svg .custom_radio_dashed_border {
-    transition: all 0.15s ease;
-  }
-  .custom_radio[data-transition] svg .custom_radio_border {
-    transition: all 0.15s ease;
-  }
+  @layer navi {
+    :root {
+      --navi-radiomark-color: light-dark(#4476ff, #3b82f6);
+    }
 
-  /* États hover */
-  .custom_radio_wrapper:hover .custom_radio svg .custom_radio_border {
-    stroke: var(--field-hover-border-color);
-  }
-  .custom_radio_wrapper:hover .custom_radio svg .custom_radio_marker {
-    fill: var(--field-strong-color);
-  }
+    .navi_radio {
+      position: relative;
+      display: inline-flex;
+      box-sizing: content-box;
 
-  .custom_radio_wrapper:hover
-    input:checked
-    + .custom_radio
-    svg
-    .custom_radio_border {
-    stroke: var(--field-strong-color);
-  }
+      --outline-offset: 1px;
+      --outline-width: 2px;
+      --width: 13px;
+      --height: 13px;
 
-  /* État checked */
-  .custom_radio_wrapper input:checked + .custom_radio svg .custom_radio_border {
-    stroke: var(--field-strong-color);
-  }
+      --outline-color: light-dark(#4476ff, #3b82f6);
+      --border-color: light-dark(#767676, #8e8e93);
+      --background-color: white;
+      --accent-color: var(--navi-radiomark-color);
+      --mark-color: var(--accent-color);
 
-  .custom_radio_wrapper input:checked + .custom_radio svg .custom_radio_marker {
-    opacity: 1;
-    transform: scale(1);
-  }
+      /* light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3)); */
+      --accent-color-checked: color-mix(
+        in srgb,
+        var(--accent-color) 70%,
+        black
+      );
 
-  /* États disabled */
-  .custom_radio_wrapper
-    input[disabled]
-    + .custom_radio
-    svg
-    .custom_radio_border {
-    fill: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
-    stroke: var(--field-disabled-border-color);
-  }
+      --border-color-readonly: color-mix(
+        in srgb,
+        var(--border-color) 30%,
+        white
+      );
+      --border-color-disabled: var(--border-color-readonly);
+      --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
+      --border-color-checked: var(--accent-color);
+      --border-color-checked-hover: var(--accent-color-checked);
+      --border-color-checked-readonly: #d3d3d3;
+      --border-color-checked-disabled: #d3d3d3;
+      --background-color-readonly: var(--background-color);
+      --background-color-disabled: var(--background-color);
+      --background-color-checked-readonly: #d3d3d3;
+      --background-color-checked-disabled: var(--background-color);
+      --mark-color-hover: var(--accent-color-checked);
+      --mark-color-readonly: grey;
+      --mark-color-disabled: #eeeeee;
+    }
+    .navi_radio input {
+      position: absolute;
+      inset: 0;
+      margin: 0;
+      padding: 0;
+      opacity: 0;
+      cursor: inherit;
+    }
+    .navi_radio_field {
+      display: inline-flex;
+      width: var(--width);
+      height: var(--height);
+      margin-top: 3px;
+      margin-right: 3px;
+      margin-left: 5px;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      outline-width: var(--outline-width);
 
-  .custom_radio_wrapper
-    input[disabled]:checked
-    + .custom_radio
-    svg
-    .custom_radio_border {
-    stroke: var(--checked-disabled-color);
-  }
+      outline-style: none;
 
-  .custom_radio_wrapper
-    input[disabled]:checked
-    + .custom_radio
-    svg
-    .custom_radio_marker {
-    fill: var(--checkmark-disabled-color);
-  }
+      outline-color: var(--outline-color);
 
-  .custom_radio_wrapper
-    input[data-readonly]
-    + .custom_radio
-    svg
-    .custom_radio_border {
-    fill: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
-    stroke: var(--field-disabled-border-color);
-  }
-  .custom_radio_wrapper
-    input[data-readonly]
-    + .custom_radio
-    svg
-    .custom_radio_dashed_border {
-    display: none;
-  }
-  .custom_radio_wrapper
-    input[data-readonly]:checked
-    + .custom_radio
-    svg
-    .custom_radio_border {
-    stroke: var(--checked-disabled-color);
-  }
-  .custom_radio_wrapper
-    input[data-readonly]:checked
-    + .custom_radio
-    svg
-    .custom_radio_marker {
-    fill: var(--checkmark-disabled-color);
-  }
-  .custom_radio_wrapper:hover
-    input[data-readonly]
-    + .custom_radio
-    svg
-    .custom_radio_border {
-    fill: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
-    stroke: var(--field-disabled-border-color);
-  }
-  .custom_radio_wrapper:hover
-    input[data-readonly]:checked
-    + .custom_radio
-    svg
-    .custom_radio_border {
-    stroke: var(--checked-disabled-color);
-  }
+      outline-offset: var(--outline-offset);
+    }
+    .navi_radio_field svg {
+      overflow: visible;
+    }
+    .navi_radio_border {
+      fill: var(--background-color);
+      stroke: var(--border-color);
+    }
+    .navi_radio_marker {
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      fill: var(--mark-color);
+      transform: scale(0.3);
+      transform-origin: center;
+      pointer-events: none;
+    }
+    .navi_radio_dashed_border {
+      display: none;
+    }
+    .navi_radio[data-transition] .navi_radio_marker {
+      transition: all 0.15s ease;
+    }
+    .navi_radio[data-transition] .navi_radio_dashed_border {
+      transition: all 0.15s ease;
+    }
+    .navi_radio[data-transition] .navi_radio_border {
+      transition: all 0.15s ease;
+    }
 
-  /* Focus state avec outline */
-  .custom_radio_wrapper input:focus-visible + .custom_radio {
-    outline: 2px solid var(--field-outline-color);
-    outline-offset: 1px;
-    border-radius: 50%;
+    /* Focus */
+    .navi_radio[data-focus-visible] .navi_radio_field {
+      outline-style: solid;
+    }
+    /* Hover */
+    .navi_radio[data-hover] .navi_radio_border {
+      stroke: var(--border-color-hover);
+    }
+    .navi_radio[data-hover] .navi_radio_marker {
+      fill: var(--mark-color-hover);
+    }
+    /* Checked */
+    .navi_radio[data-checked] .navi_radio_border {
+      stroke: var(--border-color-checked);
+    }
+    .navi_radio[data-checked] .navi_radio_marker {
+      opacity: 1;
+      transform: scale(1);
+    }
+    .navi_radio[data-hover][data-checked] .navi_radio_border {
+      stroke: var(--border-color-checked-hover);
+    }
+    /* Readonly */
+    .navi_radio[data-readonly] .navi_radio_border {
+      fill: var(--background-color-readonly);
+      stroke: var(--border-color-readonly);
+    }
+    .navi_radio[data-readonly] .navi_radio_marker {
+      fill: var(--mark-color-readonly);
+    }
+    .navi_radio[data-readonly] .navi_radio_dashed_border {
+      display: none;
+    }
+    .navi_radio[data-checked][data-readonly] .navi_radio_border {
+      fill: var(--background-color-checked-readonly);
+      stroke: var(--border-color-checked-readonly);
+    }
+    .navi_radio[data-checked][data-readonly] .navi_radio_marker {
+      fill: var(--mark-color-readonly);
+    }
+    /* Disabled */
+    .navi_radio[data-disabled] .navi_radio_border {
+      fill: var(--background-color-disabled);
+      stroke: var(--border-color-disabled);
+    }
+    .navi_radio[data-disabled] .navi_radio_marker {
+      fill: var(--mark-color-disabled);
+    }
+    .navi_radio[data-hover][data-checked][data-disabled] .navi_radio_border {
+      stroke: var(--border-color-disabled);
+    }
+    .navi_radio[data-checked][data-disabled] .navi_radio_marker {
+      fill: var(--mark-color-disabled);
+    }
   }
 `;
 
@@ -223,6 +223,7 @@ const InputRadioBasic = forwardRef((props, ref) => {
   const uiStateController = useContext(UIStateControllerContext);
   const uiState = useContext(UIStateContext);
   const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
+  const reportDisabledOnLabel = useContext(ReportDisabledOnLabelContext);
   const {
     name,
     readOnly,
@@ -233,10 +234,11 @@ const InputRadioBasic = forwardRef((props, ref) => {
     autoFocus,
     constraints = [],
 
-    appeareance = "custom", // "custom" or "default"
+    appeareance = "navi", // "navi" or "default"
     accentColor,
     onClick,
     onInput,
+    style,
     ...rest
   } = props;
   const innerRef = useRef(null);
@@ -251,14 +253,10 @@ const InputRadioBasic = forwardRef((props, ref) => {
     readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
 
   reportReadOnlyOnLabel?.(innerReadOnly);
+  reportDisabledOnLabel?.(innerDisabled);
   useAutoFocus(innerRef, autoFocus);
   useConstraints(innerRef, constraints);
   const checked = Boolean(uiState);
-  const actionName = rest["data-action"];
-  if (actionName) {
-    delete rest["data-action"];
-  }
-
   // we must first dispatch an event to inform all other radios they where unchecked
   // this way each other radio uiStateController knows thery are unchecked
   // we do this on "input"
@@ -266,6 +264,9 @@ const InputRadioBasic = forwardRef((props, ref) => {
   const updateOtherRadiosInGroup = () => {
     const thisRadio = innerRef.current;
     const radioList = thisRadio.closest("[data-radio-list]");
+    if (!radioList) {
+      return;
+    }
     const radioInputs = radioList.querySelectorAll(
       `input[type="radio"][name="${thisRadio.name}"]`,
     );
@@ -284,14 +285,18 @@ const InputRadioBasic = forwardRef((props, ref) => {
     }
   }, [checked]);
 
+  const actionName = rest["data-action"];
+  if (actionName) {
+    delete rest["data-action"];
+  }
   const inputRadio = (
     <input
       {...rest}
       ref={innerRef}
       type="radio"
+      style={appeareance === "default" ? style : undefined}
       name={innerName}
       checked={checked}
-      data-readonly={innerReadOnly ? "" : undefined}
       disabled={innerDisabled}
       required={innerRequired}
       data-validation-message-arrow-x="center"
@@ -320,30 +325,65 @@ const InputRadioBasic = forwardRef((props, ref) => {
       }}
     />
   );
-  const inputRadioDisplayed =
-    appeareance === "custom" ? (
-      <CustomRadio accentColor={accentColor}>{inputRadio}</CustomRadio>
-    ) : (
-      inputRadio
+  const loaderProps = {
+    loading: innerLoading,
+    inset: -1,
+    style: {
+      "--accent-color": accentColor || "light-dark(#355fcc, #4476ff)",
+    },
+    color: "var(--accent-color)",
+  };
+  if (appeareance === "navi") {
+    return (
+      <NaviRadio
+        data-action={actionName}
+        inputRef={innerRef}
+        accentColor={accentColor}
+        readOnly={innerReadOnly}
+        disabled={innerDisabled}
+        style={style}
+      >
+        <LoaderBackground {...loaderProps} targetSelector=".navi_radio_field">
+          {inputRadio}
+        </LoaderBackground>
+      </NaviRadio>
     );
+  }
 
   return (
-    <LoadableInlineElement
-      data-action={actionName}
-      loading={innerLoading}
-      targetSelector={appeareance === "custom" ? ".custom_radio" : ""}
-      inset={-1}
-      color="light-dark(#355fcc, #3b82f6)"
-    >
-      {inputRadioDisplayed}
+    <LoadableInlineElement {...loaderProps} data-action={actionName}>
+      {inputRadio}
     </LoadableInlineElement>
   );
 });
-const CustomRadio = ({ children }) => {
+const NaviRadio = ({
+  inputRef,
+  accentColor,
+  readOnly,
+  disabled,
+  style,
+  children,
+  ...rest
+}) => {
+  const ref = useRef();
+  useLayoutEffect(() => {
+    return initCustomField(ref.current, inputRef.current);
+  }, []);
+
   return (
-    <div className="custom_radio_wrapper" data-field-wrapper="">
+    <span
+      {...rest}
+      ref={ref}
+      className="navi_radio"
+      style={{
+        ...(accentColor ? { "--accent-color": accentColor } : {}),
+        ...style,
+      }}
+      data-readonly={readOnly ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
+    >
       {children}
-      <div className="custom_radio">
+      <span className="navi_radio_field">
         <svg
           viewBox="0 0 12 12"
           aria-hidden="true"
@@ -351,31 +391,27 @@ const CustomRadio = ({ children }) => {
         >
           {/* Border circle - always visible */}
           <circle
-            className="custom_radio_border"
+            className="navi_radio_border"
             cx="6"
             cy="6"
             r="5.5"
-            fill="white"
-            stroke="var(--field-border-color)"
             strokeWidth="1"
           />
           {/* Dashed border for readonly - calculated for even distribution */}
           <circle
-            className="custom_radio_dashed_border"
+            className="navi_radio_dashed_border"
             cx="6"
             cy="6"
             r="5.5"
-            fill="var(--field-readonly-background-color)"
-            stroke="var(--field-border-color)"
             strokeWidth="1"
             strokeDasharray="2.16 2.16"
             strokeDashoffset="0"
           />
           {/* Inner fill circle - only visible when checked */}
-          <circle className="custom_radio_marker" cx="6" cy="6" r="3.5" />
+          <circle className="navi_radio_marker" cx="6" cy="6" r="3.5" />
         </svg>
-      </div>
-    </div>
+      </span>
+    </span>
   );
 };
 

package/src/components/field/input_textual.jsx

@@ -33,7 +33,7 @@ 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 { useAutoFocus } from "../use_auto_focus.js";
-import "./field_css.js";
+import { initCustomField } from "./custom_field.js";
 import { ReportReadOnlyOnLabelContext } from "./label.jsx";
 import { useActionEvents } from "./use_action_events.js";
 import {
@@ -47,6 +47,86 @@ import {
   useUIStateController,
 } from "./use_ui_state_controller.js";
 
+import.meta.css = /* css */ `
+  @layer navi {
+    .navi_input {
+      --border-width: 1px;
+      --outline-width: 1px;
+      --outer-width: calc(var(--border-width) + var(--outline-width));
+      --padding-x: 6px;
+      --padding-y: 1px;
+
+      --outline-color: light-dark(#4476ff, #3b82f6);
+
+      --border-radius: 2px;
+      --border-color: light-dark(#767676, #8e8e93);
+      --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
+      --border-color-active: color-mix(in srgb, var(--border-color) 90%, black);
+      --border-color-readonly: color-mix(
+        in srgb,
+        var(--border-color) 45%,
+        transparent
+      );
+      --border-color-disabled: var(--border-color-readonly);
+
+      --background-color: white;
+      --background-color-hover: color-mix(
+        in srgb,
+        var(--background-color) 95%,
+        black
+      );
+      --background-color-readonly: var(--background-color);
+      --background-color-disabled: color-mix(
+        in srgb,
+        var(--background-color) 60%,
+        transparent
+      );
+
+      --color: currentColor;
+      --color-readonly: color-mix(in srgb, currentColor 60%, transparent);
+      --color-disabled: var(--color-readonly);
+      color: var(--color);
+
+      background-color: var(--background-color);
+      border-width: var(--outer-width);
+      border-width: var(--outer-width);
+      border-style: solid;
+      border-color: transparent;
+      border-radius: var(--border-radius);
+      outline-width: var(--border-width);
+      outline-style: solid;
+      outline-color: var(--border-color);
+      outline-offset: calc(-1 * (var(--border-width)));
+    }
+    /* Focus */
+    .navi_input[data-focus] {
+      border-color: var(--outline-color);
+      outline-width: var(--outer-width);
+      outline-color: var(--outline-color);
+      outline-offset: calc(-1 * var(--outer-width));
+    }
+    /* Readonly */
+    .navi_input[data-readonly] {
+      color: var(--color-readonly);
+      background-color: var(--background-color-readonly);
+      outline-color: var(--border-color-readonly);
+    }
+    .navi_input[data-readonly]::placeholder {
+      color: var(--color-readonly);
+    }
+    /* Disabled */
+    .navi_input[data-disabled] {
+      color: var(--color-disabled);
+      background-color: var(--background-color-disabled);
+      outline-color: var(--border-color-disabled);
+    }
+    /* Invalid */
+    .navi_input[aria-invalid="true"] {
+      border-color: var(--invalid-color);
+    }
+  }
+`;
+
 export const InputTextual = forwardRef((props, ref) => {
   const uiStateController = useUIStateController(props, "input");
   const uiState = useUIState(uiStateController);
@@ -83,7 +163,8 @@ const InputTextualBasic = forwardRef((props, ref) => {
     autoFocus,
     autoFocusVisible,
     autoSelect,
-    appearance = "custom",
+    appearance = "navi",
+    accentColor,
     width,
     height,
     ...rest
@@ -110,14 +191,14 @@ const InputTextualBasic = forwardRef((props, ref) => {
     <input
       {...rest}
       ref={innerRef}
+      className={appearance === "navi" ? "navi_input" : undefined}
       type={type}
       data-value={uiState}
       value={innerValue}
-      data-field=""
-      data-field-with-border=""
-      data-custom={appearance === "custom" ? "" : undefined}
       readOnly={innerReadOnly}
       disabled={innerDisabled}
+      data-readOnly={innerReadOnly ? "" : undefined}
+      data-disabled={innerDisabled ? "" : undefined}
       onInput={(e) => {
         let inputValue;
         if (type === "number") {
@@ -141,12 +222,23 @@ const InputTextualBasic = forwardRef((props, ref) => {
     />
   );
 
+  useLayoutEffect(() => {
+    return initCustomField(innerRef.current, innerRef.current);
+  }, []);
+
+  if (type === "hidden") {
+    return inputTextual;
+  }
   return (
     <LoadableInlineElement
       loading={innerLoading}
-      color="light-dark(#355fcc, #3b82f6)"
+      style={{
+        "--accent-color": accentColor || "light-dark(#355fcc, #4476ff)",
+      }}
+      color="var(--accent-color)"
       width={width}
       height={height}
+      inset={-1}
     >
       {inputTextual}
     </LoadableInlineElement>