@strictly/react-form 0.0.6 → 0.0.8

package/mantine/specs/__snapshots__/radio_group_hooks.tests.tsx.snap

@@ -1,183 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`mantine radio group hooks > renders CustomError 1`] = `
-<div>
-  <style
-    data-mantine-styles="classes"
-  >
-    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
-  </style>
-  <div
-    class="m_46b77525 mantine-InputWrapper-root mantine-RadioGroup-root"
-    data-error="true"
-  >
-    <div
-      class="m_8fdc1311 mantine-InputWrapper-label mantine-RadioGroup-label"
-      id="mantine-1fu8n1fu8-label"
-    >
-      Radio Group
-    </div>
-    <div
-      aria-describedby="mantine-1fu8n1fu8-error"
-      aria-labelledby="mantine-1fu8n1fu8-label"
-      role="radiogroup"
-    >
-      <div
-        class="m_6d731127 mantine-Stack-root"
-        style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
-      >
-        <div
-          class="m_f3f1af94 mantine-Radio-root m_5f75b09e mantine-Radio-root"
-          data-label-position="right"
-          style="--radio-color: var(--mantine-color-blue-filled);"
-        >
-          <div
-            class="m_5f6e695e mantine-Radio-body"
-          >
-            <div
-              class="m_89c4f5e4 mantine-Radio-inner"
-              data-label-position="right"
-            >
-              <input
-                class="mantine-focus-auto m_8a3dbb89 mantine-Radio-radio"
-                id="mantine-0cyk5rcyk"
-                name="$"
-                type="radio"
-                value="1"
-              />
-              <svg
-                aria-hidden="true"
-                class="m_f3ed6b2b mantine-Radio-icon"
-                fill="none"
-                viewBox="0 0 5 5"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle
-                  cx="2.5"
-                  cy="2.5"
-                  fill="currentColor"
-                  r="2.5"
-                />
-              </svg>
-            </div>
-            <div
-              class="m_d3ea56bb mantine-Radio-labelWrapper"
-            >
-              <label
-                class="m_8ee546b8 mantine-Radio-label"
-                for="mantine-0cyk5rcyk"
-              >
-                One
-              </label>
-            </div>
-          </div>
-        </div>
-        <div
-          class="m_f3f1af94 mantine-Radio-root m_5f75b09e mantine-Radio-root"
-          data-checked="true"
-          data-label-position="right"
-          style="--radio-color: var(--mantine-color-blue-filled);"
-        >
-          <div
-            class="m_5f6e695e mantine-Radio-body"
-          >
-            <div
-              class="m_89c4f5e4 mantine-Radio-inner"
-              data-label-position="right"
-            >
-              <input
-                checked=""
-                class="mantine-focus-auto m_8a3dbb89 mantine-Radio-radio"
-                id="mantine-0px4bipx4"
-                name="$"
-                type="radio"
-                value="2"
-              />
-              <svg
-                aria-hidden="true"
-                class="m_f3ed6b2b mantine-Radio-icon"
-                fill="none"
-                viewBox="0 0 5 5"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle
-                  cx="2.5"
-                  cy="2.5"
-                  fill="currentColor"
-                  r="2.5"
-                />
-              </svg>
-            </div>
-            <div
-              class="m_d3ea56bb mantine-Radio-labelWrapper"
-            >
-              <label
-                class="m_8ee546b8 mantine-Radio-label"
-                for="mantine-0px4bipx4"
-              >
-                Two
-              </label>
-            </div>
-          </div>
-        </div>
-        <div
-          class="m_f3f1af94 mantine-Radio-root m_5f75b09e mantine-Radio-root"
-          data-label-position="right"
-          style="--radio-color: var(--mantine-color-blue-filled);"
-        >
-          <div
-            class="m_5f6e695e mantine-Radio-body"
-          >
-            <div
-              class="m_89c4f5e4 mantine-Radio-inner"
-              data-label-position="right"
-            >
-              <input
-                class="mantine-focus-auto m_8a3dbb89 mantine-Radio-radio"
-                id="mantine-12voha2vo"
-                name="$"
-                type="radio"
-                value="3"
-              />
-              <svg
-                aria-hidden="true"
-                class="m_f3ed6b2b mantine-Radio-icon"
-                fill="none"
-                viewBox="0 0 5 5"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle
-                  cx="2.5"
-                  cy="2.5"
-                  fill="currentColor"
-                  r="2.5"
-                />
-              </svg>
-            </div>
-            <div
-              class="m_d3ea56bb mantine-Radio-labelWrapper"
-            >
-              <label
-                class="m_8ee546b8 mantine-Radio-label"
-                for="mantine-12voha2vo"
-              >
-                Three
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <p
-      class="m_8f816625 mantine-InputWrapper-error mantine-RadioGroup-error"
-      id="mantine-1fu8n1fu8-error"
-    >
-      custom error
-    </p>
-  </div>
-</div>
-`;
-
 exports[`mantine radio group hooks > renders Disabled 1`] = `
 <div>
   <style
@@ -697,7 +519,7 @@ exports[`mantine radio group hooks > renders Error 1`] = `
       class="m_8f816625 mantine-InputWrapper-error mantine-RadioGroup-error"
       id="mantine-1fu8n1fu8-error"
     >
-      error
+      custom error error
     </p>
   </div>
 </div>

package/mantine/specs/__snapshots__/select_hooks.tests.tsx.snap

@@ -1,87 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`mantine select hooks > renders CustomErrorSelect 1`] = `
-<div>
-  <style
-    data-mantine-styles="classes"
-  >
-    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
-  </style>
-  <div
-    class="m_46b77525 mantine-InputWrapper-root mantine-Select-root"
-    data-error="true"
-  >
-    <label
-      class="m_8fdc1311 mantine-InputWrapper-label mantine-Select-label"
-      data-required="true"
-      for="mantine-12voha2vo"
-      id="mantine-12voha2vo-label"
-    >
-      Select
-      <span
-        aria-hidden="true"
-        class="m_78a94662 mantine-InputWrapper-required mantine-Select-required"
-      >
-         *
-      </span>
-    </label>
-    <div
-      class="m_6c018570 mantine-Input-wrapper mantine-Select-wrapper"
-      data-error="true"
-      data-pointer="true"
-      data-variant="default"
-      data-with-right-section="true"
-      style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2); --input-right-section-pointer-events: none;"
-    >
-      <input
-        aria-describedby="mantine-12voha2vo-error"
-        aria-haspopup="listbox"
-        aria-invalid="true"
-        autocomplete="off"
-        class="m_8fb7ebe7 mantine-Input-input mantine-Select-input"
-        data-error="true"
-        data-variant="default"
-        id="mantine-12voha2vo"
-        readonly=""
-        required=""
-        value="c"
-      />
-      <div
-        class="m_82577fc2 mantine-Input-section mantine-Select-section"
-        data-position="right"
-      >
-        <svg
-          class="m_2943220b mantine-ComboboxChevron-chevron"
-          data-combobox-chevron="true"
-          data-error="[object Object]"
-          fill="none"
-          viewBox="0 0 15 15"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
-            fill="currentColor"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </div>
-    </div>
-    <p
-      class="m_8f816625 mantine-InputWrapper-error mantine-Select-error"
-      id="mantine-12voha2vo-error"
-    >
-      custom error
-    </p>
-  </div>
-  <input
-    name="$"
-    type="hidden"
-    value="c"
-  />
-</div>
-`;
-
 exports[`mantine select hooks > renders DisabledSelect 1`] = `
 <div>
   <style
@@ -275,7 +193,7 @@ exports[`mantine select hooks > renders InvalidSelect 1`] = `
       class="m_8f816625 mantine-InputWrapper-error mantine-Select-error"
       id="mantine-12voha2vo-error"
     >
-      invalid option
+      Error invalid option
     </p>
   </div>
   <input

package/mantine/specs/__snapshots__/text_input_hooks.tests.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`mantine checkbox hooks > renders CustomError 1`] = `
+exports[`mantine checkbox hooks > renders Disabled 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -9,7 +9,6 @@ exports[`mantine checkbox hooks > renders CustomError 1`] = `
   </style>
   <div
     class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
-    data-error="true"
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
@@ -20,32 +19,25 @@ exports[`mantine checkbox hooks > renders CustomError 1`] = `
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-      data-error="true"
+      data-disabled="true"
       data-variant="default"
-      style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2);"
     >
       <input
-        aria-describedby="mantine-0cyk5rcyk-error"
-        aria-invalid="true"
+        aria-invalid="false"
         class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
-        data-error="true"
+        data-disabled="true"
         data-variant="default"
+        disabled=""
         id="mantine-0cyk5rcyk"
         name="$"
         value="xxx"
       />
     </div>
-    <p
-      class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
-      id="mantine-0cyk5rcyk-error"
-    >
-      custom error
-    </p>
   </div>
 </div>
 `;
 
-exports[`mantine checkbox hooks > renders Disabled 1`] = `
+exports[`mantine checkbox hooks > renders Empty 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -57,32 +49,29 @@ exports[`mantine checkbox hooks > renders Disabled 1`] = `
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-      for="mantine-0cyk5rcyk"
-      id="mantine-0cyk5rcyk-label"
+      for="mantine-0px4bipx4"
+      id="mantine-0px4bipx4-label"
     >
       Text Input
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-      data-disabled="true"
       data-variant="default"
     >
       <input
         aria-invalid="false"
         class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
-        data-disabled="true"
         data-variant="default"
-        disabled=""
-        id="mantine-0cyk5rcyk"
+        id="mantine-0px4bipx4"
         name="$"
-        value="xxx"
+        value=""
       />
     </div>
   </div>
 </div>
 `;
 
-exports[`mantine checkbox hooks > renders Empty 1`] = `
+exports[`mantine checkbox hooks > renders Error 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -91,27 +80,38 @@ exports[`mantine checkbox hooks > renders Empty 1`] = `
   </style>
   <div
     class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+    data-error="true"
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-      for="mantine-0px4bipx4"
-      id="mantine-0px4bipx4-label"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-label"
     >
       Text Input
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+      data-error="true"
       data-variant="default"
+      style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2);"
     >
       <input
-        aria-invalid="false"
+        aria-describedby="mantine-0cyk5rcyk-error"
+        aria-invalid="true"
         class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+        data-error="true"
         data-variant="default"
-        id="mantine-0px4bipx4"
+        id="mantine-0cyk5rcyk"
         name="$"
-        value=""
+        value="xxx"
       />
     </div>
+    <p
+      class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
+      id="mantine-0cyk5rcyk-error"
+    >
+      error error
+    </p>
   </div>
 </div>
 `;

package/mantine/specs/__snapshots__/value_input_hooks.tests.tsx.snap

@@ -335,7 +335,7 @@ exports[`mantine value input hooks > renders AnSlider 1`] = `
 </div>
 `;
 
-exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
+exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -344,7 +344,6 @@ exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
   </style>
   <div
     class="m_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root"
-    data-error="true"
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
@@ -355,17 +354,17 @@ exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper"
-      data-error="true"
+      data-disabled="true"
       data-variant="default"
       data-with-right-section="true"
-      style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2); --input-right-section-width: var(--ni-right-section-width-sm);"
+      style="--input-right-section-width: var(--ni-right-section-width-sm); --input-right-section-pointer-events: none;"
     >
       <input
-        aria-describedby="mantine-0cyk5rcyk-error"
-        aria-invalid="true"
+        aria-invalid="false"
         class="m_8fb7ebe7 mantine-Input-input mantine-NumberInput-input"
-        data-error="true"
+        data-disabled="true"
         data-variant="default"
+        disabled=""
         id="mantine-0cyk5rcyk"
         inputmode="numeric"
         name="$"
@@ -383,6 +382,7 @@ exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
             aria-hidden="true"
             class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
             data-direction="up"
+            disabled=""
             tabindex="-1"
             type="button"
           >
@@ -404,6 +404,7 @@ exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
             aria-hidden="true"
             class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
             data-direction="down"
+            disabled=""
             tabindex="-1"
             type="button"
           >
@@ -423,17 +424,11 @@ exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
         </div>
       </div>
     </div>
-    <p
-      class="m_8f816625 mantine-InputWrapper-error mantine-NumberInput-error"
-      id="mantine-0cyk5rcyk-error"
-    >
-      a custom error
-    </p>
   </div>
 </div>
 `;
 
-exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
+exports[`mantine value input hooks > renders EmptyNumberInput 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -445,29 +440,26 @@ exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
-      for="mantine-0cyk5rcyk"
-      id="mantine-0cyk5rcyk-label"
+      for="mantine-0px4bipx4"
+      id="mantine-0px4bipx4-label"
     >
       Number Input
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper"
-      data-disabled="true"
       data-variant="default"
       data-with-right-section="true"
-      style="--input-right-section-width: var(--ni-right-section-width-sm); --input-right-section-pointer-events: none;"
+      style="--input-right-section-width: var(--ni-right-section-width-sm);"
     >
       <input
         aria-invalid="false"
         class="m_8fb7ebe7 mantine-Input-input mantine-NumberInput-input"
-        data-disabled="true"
         data-variant="default"
-        disabled=""
-        id="mantine-0cyk5rcyk"
+        id="mantine-0px4bipx4"
         inputmode="numeric"
         name="$"
         type="text"
-        value="3"
+        value=""
       />
       <div
         class="m_82577fc2 mantine-Input-section mantine-NumberInput-section"
@@ -480,7 +472,6 @@ exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
             aria-hidden="true"
             class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
             data-direction="up"
-            disabled=""
             tabindex="-1"
             type="button"
           >
@@ -502,7 +493,6 @@ exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
             aria-hidden="true"
             class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
             data-direction="down"
-            disabled=""
             tabindex="-1"
             type="button"
           >
@@ -526,7 +516,7 @@ exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
 </div>
 `;
 
-exports[`mantine value input hooks > renders EmptyNumberInput 1`] = `
+exports[`mantine value input hooks > renders ErrorNumberInput 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -535,29 +525,33 @@ exports[`mantine value input hooks > renders EmptyNumberInput 1`] = `
   </style>
   <div
     class="m_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root"
+    data-error="true"
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
-      for="mantine-0px4bipx4"
-      id="mantine-0px4bipx4-label"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-label"
     >
       Number Input
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper"
+      data-error="true"
       data-variant="default"
       data-with-right-section="true"
-      style="--input-right-section-width: var(--ni-right-section-width-sm);"
+      style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2); --input-right-section-width: var(--ni-right-section-width-sm);"
     >
       <input
-        aria-invalid="false"
+        aria-describedby="mantine-0cyk5rcyk-error"
+        aria-invalid="true"
         class="m_8fb7ebe7 mantine-Input-input mantine-NumberInput-input"
+        data-error="true"
         data-variant="default"
-        id="mantine-0px4bipx4"
+        id="mantine-0cyk5rcyk"
         inputmode="numeric"
         name="$"
         type="text"
-        value=""
+        value="3"
       />
       <div
         class="m_82577fc2 mantine-Input-section mantine-NumberInput-section"
@@ -610,6 +604,12 @@ exports[`mantine value input hooks > renders EmptyNumberInput 1`] = `
         </div>
       </div>
     </div>
+    <p
+      class="m_8f816625 mantine-InputWrapper-error mantine-NumberInput-error"
+      id="mantine-0cyk5rcyk-error"
+    >
+      error an error
+    </p>
   </div>
 </div>
 `;

package/mantine/specs/checkbox_hooks.stories.tsx

@@ -4,19 +4,19 @@ import {
   type StoryObj,
 } from '@storybook/react'
 import { type FieldsViewProps } from 'core/props'
-import { type ErrorRenderer } from 'mantine/error_renderer'
 import { useMantineFormFields } from 'mantine/hooks'
 import { type Field } from 'types/field'
 import { CHECKBOX_LABEL } from './checkbox_constants'
 
+function ErrorRenderer({ error }: { error: string }) {
+  return `Error ${error}`
+}
+
 function Component({
-  ErrorRenderer,
   ...props
 }: FieldsViewProps<{
   $: Field<boolean, string>,
-}> & {
-  ErrorRenderer?: ErrorRenderer,
-}) {
+}>) {
   const inputProps = useMantineFormFields(props)
   const CheckboxComponent = inputProps.checkbox('$')
   return (
@@ -101,19 +101,3 @@ export const Error: Story = {
     },
   },
 }
-
-export const CustomError: Story = {
-  args: {
-    fields: {
-      $: {
-        readonly: false,
-        required: false,
-        value: true,
-        error: 'error',
-      },
-    },
-    ErrorRenderer: function () {
-      return 'custom error'
-    },
-  },
-}