@strictly/react-form 0.0.1

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

@@ -0,0 +1,613 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`mantine value input hooks > renders AnJsonInput 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-JsonInput-root"
+  >
+    <div
+      class="m_6c018570 mantine-Input-wrapper mantine-JsonInput-wrapper"
+      data-multiline="true"
+      data-variant="default"
+    >
+      <textarea
+        aria-invalid="false"
+        autocomplete="off"
+        class="m_8fb7ebe7 mantine-Input-input mantine-JsonInput-input"
+        data-monospace="true"
+        data-variant="default"
+        id="mantine-0cyk5rcyk"
+        name="$"
+        rows="8"
+      >
+        {}
+      </textarea>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`mantine value input hooks > renders AnRating 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_f8d312f2 mantine-Rating-root"
+    data-size="sm"
+    id="mantine-0px4bipx4"
+    style="--rating-size: var(--rating-size-sm); --rating-color: var(--mantine-color-yellow-filled);"
+  >
+    <div
+      class="m_61734bb7 mantine-Rating-symbolGroup"
+    >
+      <input
+        aria-label="0"
+        class="m_211007ba mantine-Rating-input"
+        id="mantine-0px4bipx4-0-0"
+        name="$"
+        type="radio"
+        value="0"
+      />
+      <label
+        class="m_21342ee4 mantine-Rating-label"
+        for="mantine-0px4bipx4-0-0"
+        style="--rating-item-z-index: 0;"
+      >
+        <div
+          class="m_fae05d6a mantine-Rating-symbolBody"
+          style="--rating-symbol-clip-path: inset(0 100% 0 0);"
+        >
+          <svg
+            class="m_5662a89a mantine-Rating-starSymbol"
+            data-filled="true"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
+            />
+          </svg>
+        </div>
+      </label>
+      <input
+        aria-label="1"
+        class="m_211007ba mantine-Rating-input"
+        id="mantine-0px4bipx4-0-1"
+        name="$"
+        type="radio"
+        value="1"
+      />
+      <label
+        class="m_21342ee4 mantine-Rating-label"
+        for="mantine-0px4bipx4-0-1"
+      >
+        <div
+          class="m_fae05d6a mantine-Rating-symbolBody"
+        >
+          <svg
+            class="m_5662a89a mantine-Rating-starSymbol"
+            data-filled="true"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
+            />
+          </svg>
+        </div>
+      </label>
+    </div>
+    <div
+      class="m_61734bb7 mantine-Rating-symbolGroup"
+    >
+      <input
+        aria-label="2"
+        checked=""
+        class="m_211007ba mantine-Rating-input"
+        data-active="true"
+        id="mantine-0px4bipx4-1-0"
+        name="$"
+        type="radio"
+        value="2"
+      />
+      <label
+        class="m_21342ee4 mantine-Rating-label"
+        for="mantine-0px4bipx4-1-0"
+      >
+        <div
+          class="m_fae05d6a mantine-Rating-symbolBody"
+        >
+          <svg
+            class="m_5662a89a mantine-Rating-starSymbol"
+            data-filled="true"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
+            />
+          </svg>
+        </div>
+      </label>
+    </div>
+    <div
+      class="m_61734bb7 mantine-Rating-symbolGroup"
+    >
+      <input
+        aria-label="3"
+        class="m_211007ba mantine-Rating-input"
+        id="mantine-0px4bipx4-2-0"
+        name="$"
+        type="radio"
+        value="3"
+      />
+      <label
+        class="m_21342ee4 mantine-Rating-label"
+        for="mantine-0px4bipx4-2-0"
+      >
+        <div
+          class="m_fae05d6a mantine-Rating-symbolBody"
+        >
+          <svg
+            class="m_5662a89a mantine-Rating-starSymbol"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
+            />
+          </svg>
+        </div>
+      </label>
+    </div>
+    <div
+      class="m_61734bb7 mantine-Rating-symbolGroup"
+    >
+      <input
+        aria-label="4"
+        class="m_211007ba mantine-Rating-input"
+        id="mantine-0px4bipx4-3-0"
+        name="$"
+        type="radio"
+        value="4"
+      />
+      <label
+        class="m_21342ee4 mantine-Rating-label"
+        for="mantine-0px4bipx4-3-0"
+      >
+        <div
+          class="m_fae05d6a mantine-Rating-symbolBody"
+        >
+          <svg
+            class="m_5662a89a mantine-Rating-starSymbol"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
+            />
+          </svg>
+        </div>
+      </label>
+    </div>
+    <div
+      class="m_61734bb7 mantine-Rating-symbolGroup"
+    >
+      <input
+        aria-label="5"
+        class="m_211007ba mantine-Rating-input"
+        id="mantine-0px4bipx4-4-0"
+        name="$"
+        type="radio"
+        value="5"
+      />
+      <label
+        class="m_21342ee4 mantine-Rating-label"
+        for="mantine-0px4bipx4-4-0"
+      >
+        <div
+          class="m_fae05d6a mantine-Rating-symbolBody"
+        >
+          <svg
+            class="m_5662a89a mantine-Rating-starSymbol"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
+            />
+          </svg>
+        </div>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`mantine value input hooks > renders AnSlider 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_dd36362e mantine-Slider-root"
+    style="--slider-radius: var(--mantine-radius-xl); --slider-thumb-size: calc(var(--slider-size) * 2);"
+    tabindex="-1"
+  >
+    <div
+      class="m_a8645c2 mantine-Slider-trackContainer"
+    >
+      <div
+        class="m_c9ade57f mantine-Slider-track"
+      >
+        <div
+          class="m_38aeed47 mantine-Slider-bar"
+          style="--slider-bar-width: calc(22.22222222222222% + var(--slider-size)); --slider-bar-offset: calc(0% - var(--slider-size));"
+        />
+        <div
+          aria-label=""
+          aria-valuemax="10"
+          aria-valuemin="1"
+          aria-valuenow="3"
+          class="mantine-focus-auto m_c9a9a60a mantine-Slider-thumb"
+          role="slider"
+          style="--slider-thumb-offset: 22.22222222222222%;"
+          tabindex="0"
+        />
+        <div>
+          <div
+            class="m_b7b0423a mantine-Slider-markWrapper"
+            style="--mark-offset: 0%;"
+          >
+            <div
+              class="m_dd33bc19 mantine-Slider-mark"
+              data-filled="true"
+            />
+            <div
+              class="m_68c77a5b mantine-Slider-markLabel"
+            >
+              min
+            </div>
+          </div>
+          <div
+            class="m_b7b0423a mantine-Slider-markWrapper"
+            style="--mark-offset: 44.44444444444444%;"
+          >
+            <div
+              class="m_dd33bc19 mantine-Slider-mark"
+            />
+            <div
+              class="m_68c77a5b mantine-Slider-markLabel"
+            >
+              mid
+            </div>
+          </div>
+          <div
+            class="m_b7b0423a mantine-Slider-markWrapper"
+            style="--mark-offset: 100%;"
+          >
+            <div
+              class="m_dd33bc19 mantine-Slider-mark"
+            />
+            <div
+              class="m_68c77a5b mantine-Slider-markLabel"
+            >
+              max
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <input
+      name="$"
+      type="hidden"
+      value="3"
+    />
+  </div>
+</div>
+`;
+
+exports[`mantine value input hooks > renders DisabledNumberInput 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_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-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;"
+    >
+      <input
+        aria-invalid="false"
+        class="m_8fb7ebe7 mantine-Input-input mantine-NumberInput-input"
+        data-disabled="true"
+        data-variant="default"
+        disabled=""
+        id="mantine-0cyk5rcyk"
+        inputmode="numeric"
+        name="$"
+        type="text"
+        value="3"
+      />
+      <div
+        class="m_82577fc2 mantine-Input-section mantine-NumberInput-section"
+        data-position="right"
+      >
+        <div
+          class="m_95e17d22 mantine-NumberInput-controls"
+        >
+          <button
+            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"
+          >
+            <svg
+              fill="none"
+              style="transform: rotate(180deg);"
+              viewBox="0 0 15 15"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+          <button
+            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"
+          >
+            <svg
+              fill="none"
+              viewBox="0 0 15 15"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`mantine value input hooks > renders EmptyNumberInput 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_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
+      data-required="true"
+      for="mantine-0px4bipx4"
+      id="mantine-0px4bipx4-label"
+    >
+      Number Input
+      <span
+        aria-hidden="true"
+        class="m_78a94662 mantine-InputWrapper-required mantine-NumberInput-required"
+      >
+         *
+      </span>
+    </label>
+    <div
+      class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper"
+      data-variant="default"
+      data-with-right-section="true"
+      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-variant="default"
+        id="mantine-0px4bipx4"
+        inputmode="numeric"
+        name="$"
+        required=""
+        type="text"
+        value=""
+      />
+      <div
+        class="m_82577fc2 mantine-Input-section mantine-NumberInput-section"
+        data-position="right"
+      >
+        <div
+          class="m_95e17d22 mantine-NumberInput-controls"
+        >
+          <button
+            aria-hidden="true"
+            class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
+            data-direction="up"
+            tabindex="-1"
+            type="button"
+          >
+            <svg
+              fill="none"
+              style="transform: rotate(180deg);"
+              viewBox="0 0 15 15"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+          <button
+            aria-hidden="true"
+            class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
+            data-direction="down"
+            tabindex="-1"
+            type="button"
+          >
+            <svg
+              fill="none"
+              viewBox="0 0 15 15"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`mantine value input hooks > renders PopulatedNumberInput 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_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-label"
+    >
+      Number Input
+    </label>
+    <div
+      class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper"
+      data-variant="default"
+      data-with-right-section="true"
+      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-variant="default"
+        id="mantine-0cyk5rcyk"
+        inputmode="numeric"
+        name="$"
+        type="text"
+        value="3"
+      />
+      <div
+        class="m_82577fc2 mantine-Input-section mantine-NumberInput-section"
+        data-position="right"
+      >
+        <div
+          class="m_95e17d22 mantine-NumberInput-controls"
+        >
+          <button
+            aria-hidden="true"
+            class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
+            data-direction="up"
+            tabindex="-1"
+            type="button"
+          >
+            <svg
+              fill="none"
+              style="transform: rotate(180deg);"
+              viewBox="0 0 15 15"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+          <button
+            aria-hidden="true"
+            class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
+            data-direction="down"
+            tabindex="-1"
+            type="button"
+          >
+            <svg
+              fill="none"
+              viewBox="0 0 15 15"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/mantine/specs/checkbox_constants.ts

@@ -0,0 +1 @@
+export const CHECKBOX_LABEL = 'Checkbox'

package/mantine/specs/checkbox_hooks.stories.tsx

@@ -0,0 +1,79 @@
+import { action } from '@storybook/addon-actions'
+import {
+  type Meta,
+  type StoryObj,
+} from '@storybook/react'
+import { type FormProps } from 'core/props'
+import { useMantineForm } from 'mantine/hooks'
+import { type Field } from 'types/field'
+import { CHECKBOX_LABEL } from './checkbox_constants'
+
+function Component(props: FormProps<{
+  $: Field<boolean, string>,
+}>) {
+  const inputProps = useMantineForm(props)
+  const CheckboxComponent = inputProps.checkbox('$')
+  return <CheckboxComponent label={CHECKBOX_LABEL} />
+}
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  args: {
+    onFieldBlur: action('onFieldBlur'),
+    onFieldFocus: action('onFieldFocus'),
+    onFieldSubmit: action('onFieldSubmit'),
+    onFieldValueChange: action('onFieldValueChange'),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Component>
+
+export const Off: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: false,
+      },
+    },
+  },
+}
+
+export const On: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: true,
+      },
+    },
+  },
+}
+
+export const Required: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: true,
+        value: false,
+      },
+    },
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: true,
+        required: false,
+        value: false,
+      },
+    },
+  },
+}