@jsenv/navi 0.7.3 → 0.9.0

package/package.json

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

package/src/components/field/button.jsx

@@ -14,8 +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 { useConsumAlignProps } from "../layout/flex.jsx";
-import { consumeSpacingProps } from "../layout/spacing.jsx";
+import { useLayoutStyle } from "../layout/use_layout_style.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";
@@ -89,6 +88,7 @@ import.meta.css = /* css */ `
     .navi_button_content {
       position: relative;
       display: inline-flex;
+      width: 100%;
       padding-top: var(--padding-y);
       padding-right: var(--padding-x);
       padding-bottom: var(--padding-y);
@@ -212,8 +212,6 @@ const ButtonBasic = forwardRef((props, ref) => {
 
     // visual
     appearance = "navi",
-    alignX,
-    alignY,
     discrete,
     className,
     style,
@@ -242,13 +240,8 @@ const ButtonBasic = forwardRef((props, ref) => {
     appearance === "navi" ? "navi_button" : undefined,
     className,
   );
-  const innerStyle = withPropsStyle(
-    {
-      ...consumeSpacingProps(rest),
-      ...useConsumAlignProps({ alignX, alignY }),
-    },
-    style,
-  );
+  const { all } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(all, style);
 
   return (
     <button

package/src/components/field/input_checkbox.jsx

@@ -13,7 +13,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 { consumeSpacingProps } from "../layout/spacing.jsx";
+import { useLayoutStyle } from "../layout/use_layout_style.js";
 import {
   LoadableInlineElement,
   LoaderBackground,
@@ -333,10 +333,11 @@ const NaviCheckbox = ({
     return initCustomField(ref.current, inputRef.current);
   }, []);
 
+  const { all } = useLayoutStyle(rest);
   const innerStyle = withPropsStyle(
     {
+      ...all,
       ...(accentColor ? { "--accent-color": accentColor } : {}),
-      ...consumeSpacingProps(rest),
     },
     style,
   );

package/src/components/field/input_radio.jsx

@@ -8,7 +8,7 @@ import {
 
 import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import { consumeSpacingProps } from "../layout/spacing.jsx";
+import { useLayoutStyle } from "../layout/use_layout_style.js";
 import {
   LoadableInlineElement,
   LoaderBackground,
@@ -372,10 +372,11 @@ const NaviRadio = ({
     return initCustomField(ref.current, inputRef.current);
   }, []);
 
+  const { all } = useLayoutStyle(rest);
   const innerStyle = withPropsStyle(
     {
+      ...all,
       ...(accentColor ? { "--accent-color": accentColor } : {}),
-      ...consumeSpacingProps(rest),
     },
     style,
   );

package/src/components/field/input_textual.jsx

@@ -31,7 +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 { consumeSpacingProps } from "../layout/spacing.jsx";
+import { useLayoutStyle } from "../layout/use_layout_style.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";
@@ -88,6 +88,8 @@ import.meta.css = /* css */ `
       --color: currentColor;
       --color-readonly: color-mix(in srgb, currentColor 60%, transparent);
       --color-disabled: var(--color-readonly);
+
+      width: 100%;
       color: var(--color);
 
       background-color: var(--background-color);
@@ -170,8 +172,6 @@ const InputTextualBasic = forwardRef((props, ref) => {
     // visual
     appearance = "navi",
     accentColor,
-    width,
-    height,
     className,
     style,
 
@@ -199,14 +199,8 @@ const InputTextualBasic = forwardRef((props, ref) => {
     appearance === "navi" ? "navi_input" : undefined,
     className,
   );
-  const innerStyle = withPropsStyle(
-    {
-      width,
-      height,
-      ...consumeSpacingProps(rest),
-    },
-    style,
-  );
+  const { margin, padding, alignment, expansion } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(padding, style);
   const inputTextual = (
     <input
       {...rest}
@@ -254,11 +248,12 @@ const InputTextualBasic = forwardRef((props, ref) => {
     <LoadableInlineElement
       loading={innerLoading}
       style={{
+        ...margin,
+        ...alignment,
+        ...expansion,
         "--accent-color": accentColor || "light-dark(#355fcc, #4476ff)",
       }}
       color="var(--accent-color)"
-      width={width}
-      height={height}
       inset={-1}
     >
       {inputTextual}