@jsenv/navi 0.1.0 → 0.1.1

package/dist/jsenv_navi.js

@@ -16676,6 +16676,8 @@ const InputRadioWithAction = () => {
 };
 const InputRadioInsideForm = InputRadio;
 
+installImportMetaCss(import.meta);import.meta.css = /* css */"\n  [data-field],\n  [data-field-wrapper] {\n    --field-border-width: 1px;\n    --field-outline-width: 1px;\n\n    --field-strong-color: light-dark(#355fcc, #3b82f6);\n    --field-outline-color: var(--field-strong-color);\n    --field-background-color: light-dark(#f3f4f6, #2d3748);\n    --field-border-color: light-dark(#767676, #8e8e93);\n\n    --field-disabled-border-color: color-mix(\n      in srgb,\n      var(--field-border-color) 30%,\n      white\n    );\n    --field-readonly-border-color: var(--field-disabled-border-color);\n    --field-active-border-color: color-mix(\n      in srgb,\n      var(--field-border-color) 90%,\n      black\n    );\n    --field-hover-border-color: color-mix(\n      in srgb,\n      var(--field-border-color) 70%,\n      black\n    );\n\n    --field-disabled-background-color: var(--field-background-color);\n    --field-readonly-background-color: var(--field-disabled-background-color);\n    --field-hover-background-color: color-mix(\n      in srgb,\n      var(--field-background-color) 95%,\n      black\n    );\n\n    --field-disabled-text-color: color-mix(\n      in srgb,\n      currentColor 30%,\n      transparent\n    );\n    --field-readonly-text-color: var(--field-disabled-text-color);\n  }\n\n  [data-field] {\n    border-radius: 2px;\n    outline-width: var(--field-border-width);\n    outline-style: solid;\n    outline-color: transparent;\n    outline-offset: calc(-1 * (var(--field-border-width)));\n  }\n\n  [data-field][data-field-with-border] {\n    border-width: calc(var(--field-border-width) + var(--field-outline-width));\n    border-style: solid;\n    border-color: transparent;\n    outline-color: var(--field-border-color);\n  }\n\n  [data-field-with-border-hover] {\n    border: 0;\n  }\n\n  [data-field-with-background] {\n    background-color: var(--field-background-color);\n  }\n  [data-field-with-background-hover] {\n    background: none;\n  }\n\n  [data-field-with-background]:hover {\n    background-color: var(--field-hover-background-color);\n  }\n\n  [data-field-with-hover]:hover {\n    outline-color: var(--field-hover-border-color);\n  }\n\n  [data-field-with-border]:active,\n  [data-field][data-field-with-border][data-active] {\n    outline-color: var(--field-active-border-color);\n    background-color: none;\n  }\n\n  [data-field-with-border][readonly],\n  [data-field-with-border][data-readonly] {\n    outline-color: var(--field-readonly-border-color);\n  }\n\n  [data-field][readonly],\n  [data-field][data-readonly] {\n    color: var(--field-readonly-text-color);\n  }\n\n  [data-field-with-background][readonly],\n  [data-field-with-background][data-readonly] {\n    background-color: var(--field-readonly-background-color);\n  }\n\n  [data-field]:focus-visible,\n  [data-field][data-focus-visible]:focus {\n    outline-style: solid;\n    outline-width: calc(var(--field-border-width) + var(--field-outline-width));\n    outline-offset: calc(\n      -1 * (var(--field-border-width) + var(--field-outline-width))\n    );\n    outline-color: var(--field-outline-color);\n  }\n\n  [data-field]:disabled,\n  [data-field][data-disabled],\n  [data-field-with-hover]:disabled:hover,\n  [data-field-with-hover][data-disabled]:hover {\n    outline-color: var(--field-disabled-border-color);\n    color: var(--field-disabled-text-color);\n  }\n  [data-field-with-background]:disabled,\n  [data-field-with-background][disabled] {\n    background-color: var(--field-disabled-background-color);\n  }\n";
+
 /**
  * Input component for all textual input types.
  *
@@ -16894,6 +16896,9 @@ const InputTextualWithAction = forwardRef((props, ref) => {
 const InputTextualInsideForm = forwardRef((props, ref) => {
   const {
     onKeyDown,
+    // We destructure formContext to avoid passing it to the underlying input element
+    // eslint-disable-next-line no-unused-vars
+    formContext,
     ...rest
   } = props;
   return jsx(InputTextualBasic, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",
@@ -13,7 +13,8 @@
     "email": "dmaillard06@gmail.com"
   },
   "sideEffects": [
-    "./dist/jsenv_navi.js"
+    "./dist/jsenv_navi.js",
+    "./src/components/field/field_css.js"
   ],
   "type": "module",
   "exports": {

package/src/components/field/input_textual.jsx

@@ -262,7 +262,13 @@ const InputTextualWithAction = forwardRef((props, ref) => {
   );
 });
 const InputTextualInsideForm = forwardRef((props, ref) => {
-  const { onKeyDown, ...rest } = props;
+  const {
+    onKeyDown,
+    // We destructure formContext to avoid passing it to the underlying input element
+    // eslint-disable-next-line no-unused-vars
+    formContext,
+    ...rest
+  } = props;
 
   return (
     <InputTextualBasic