@strictly/react-form 0.0.1

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

@@ -0,0 +1,225 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`mantine select hooks > renders EmptySelect 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"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-Select-label"
+      data-required="true"
+      for="mantine-1fu8n1fu8"
+      id="mantine-1fu8n1fu8-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-pointer="true"
+      data-variant="default"
+      data-with-right-section="true"
+      style="--input-right-section-pointer-events: none;"
+    >
+      <input
+        aria-haspopup="listbox"
+        aria-invalid="false"
+        autocomplete="off"
+        class="m_8fb7ebe7 mantine-Input-input mantine-Select-input"
+        data-variant="default"
+        id="mantine-1fu8n1fu8"
+        readonly=""
+        required=""
+        value=""
+      />
+      <div
+        class="m_82577fc2 mantine-Input-section mantine-Select-section"
+        data-position="right"
+      >
+        <svg
+          class="m_2943220b mantine-ComboboxChevron-chevron"
+          data-combobox-chevron="true"
+          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>
+  </div>
+  <input
+    name="$"
+    type="hidden"
+    value=""
+  />
+</div>
+`;
+
+exports[`mantine select hooks > renders InvalidSelect 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=""
+      />
+      <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"
+    >
+      invalid option
+    </p>
+  </div>
+  <input
+    name="$"
+    type="hidden"
+    value="d"
+  />
+</div>
+`;
+
+exports[`mantine select hooks > renders PopulatedSelect 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"
+  >
+    <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-pointer="true"
+      data-variant="default"
+      data-with-right-section="true"
+      style="--input-right-section-pointer-events: none;"
+    >
+      <input
+        aria-haspopup="listbox"
+        aria-invalid="false"
+        autocomplete="off"
+        class="m_8fb7ebe7 mantine-Input-input mantine-Select-input"
+        data-variant="default"
+        id="mantine-12voha2vo"
+        readonly=""
+        required=""
+        value="a"
+      />
+      <div
+        class="m_82577fc2 mantine-Input-section mantine-Select-section"
+        data-position="right"
+      >
+        <svg
+          class="m_2943220b mantine-ComboboxChevron-chevron"
+          data-combobox-chevron="true"
+          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>
+  </div>
+  <input
+    name="$"
+    type="hidden"
+    value="a"
+  />
+</div>
+`;

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

@@ -0,0 +1,202 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`mantine checkbox hooks > renders Disabled 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-TextInput-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-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"
+        name="$"
+        value="xxx"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`mantine checkbox hooks > renders Empty 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-TextInput-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+      for="mantine-0px4bipx4"
+      id="mantine-0px4bipx4-label"
+    >
+      Text Input
+    </label>
+    <div
+      class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+      data-variant="default"
+    >
+      <input
+        aria-invalid="false"
+        class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+        data-variant="default"
+        id="mantine-0px4bipx4"
+        name="$"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`mantine checkbox hooks > renders OverriddenPillsInputField 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>
+  <input
+    class="m_45c4369d mantine-PillsInputField-field"
+    data-type="visible"
+    label="Text Input"
+    name="$"
+    type="text"
+    value="PillsInputField"
+  />
+</div>
+`;
+
+exports[`mantine checkbox hooks > renders OverriddenTextarea 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-Textarea-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-Textarea-label"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-label"
+    >
+      Text Input
+    </label>
+    <div
+      class="m_6c018570 mantine-Input-wrapper mantine-Textarea-wrapper"
+      data-multiline="true"
+      data-variant="default"
+    >
+      <textarea
+        aria-invalid="false"
+        class="m_8fb7ebe7 mantine-Input-input mantine-Textarea-input"
+        data-variant="default"
+        id="mantine-0cyk5rcyk"
+        name="$"
+      >
+        Textarea
+      </textarea>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`mantine checkbox hooks > renders Populated 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-TextInput-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-label"
+    >
+      Text Input
+    </label>
+    <div
+      class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+      data-variant="default"
+    >
+      <input
+        aria-invalid="false"
+        class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+        data-variant="default"
+        id="mantine-0cyk5rcyk"
+        name="$"
+        value="Hello"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`mantine checkbox hooks > renders Required 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-TextInput-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+      data-required="true"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-label"
+    >
+      Text Input
+      <span
+        aria-hidden="true"
+        class="m_78a94662 mantine-InputWrapper-required mantine-TextInput-required"
+      >
+         *
+      </span>
+    </label>
+    <div
+      class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+      data-variant="default"
+    >
+      <input
+        aria-invalid="false"
+        class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+        data-variant="default"
+        id="mantine-0cyk5rcyk"
+        name="$"
+        required=""
+        value="xxx"
+      />
+    </div>
+  </div>
+</div>
+`;