@uniai-fe/ui-legacy 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/ui-legacy",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Legacy UI Toolkit for UNIAI FE Projects",
   "type": "module",
   "private": false,
@@ -10,7 +10,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.23.0",
+  "packageManager": "pnpm@10.24.0",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -24,9 +24,11 @@
     "src"
   ],
   "scripts": {
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "lint": "eslint . --max-warnings=0",
     "typecheck": "tsc --project tsconfig.build.json --noEmit",
-    "build": "pnpm typecheck",
+    "build": "pnpm format && pnpm typecheck",
     "dev": "tsc --project tsconfig.build.json --watch --noEmit",
     "module:lint": "pnpm lint",
     "module:typecheck": "pnpm typecheck",
@@ -82,27 +84,27 @@
     "@mantine/dates": "^8.3.9",
     "@mantine/hooks": "^8.3.9",
     "@mantine/tiptap": "^8.3.9",
-    "@tanstack/react-query": "^5.90.10",
-    "@tiptap/extension-blockquote": "^3.11.0",
-    "@tiptap/extension-bold": "^3.11.0",
-    "@tiptap/extension-code": "^3.11.0",
-    "@tiptap/extension-code-block": "^3.11.0",
-    "@tiptap/extension-document": "^3.11.0",
-    "@tiptap/extension-hard-break": "^3.11.0",
-    "@tiptap/extension-heading": "^3.11.0",
-    "@tiptap/extension-horizontal-rule": "^3.11.0",
-    "@tiptap/extension-italic": "^3.11.0",
-    "@tiptap/extension-link": "^3.11.0",
-    "@tiptap/extension-list": "^3.11.0",
-    "@tiptap/extension-paragraph": "^3.11.0",
-    "@tiptap/extension-placeholder": "^3.11.0",
-    "@tiptap/extension-strike": "^3.11.0",
-    "@tiptap/extension-text": "^3.11.0",
-    "@tiptap/extension-text-align": "^3.11.0",
-    "@tiptap/extension-underline": "^3.11.0",
-    "@tiptap/pm": "^3.11.0",
-    "@tiptap/react": "^3.11.0",
-    "@tiptap/starter-kit": "^3.11.0",
+    "@tanstack/react-query": "^5.90.12",
+    "@tiptap/extension-blockquote": "^3.12.1",
+    "@tiptap/extension-bold": "^3.12.1",
+    "@tiptap/extension-code": "^3.12.1",
+    "@tiptap/extension-code-block": "^3.12.1",
+    "@tiptap/extension-document": "^3.12.1",
+    "@tiptap/extension-hard-break": "^3.12.1",
+    "@tiptap/extension-heading": "^3.12.1",
+    "@tiptap/extension-horizontal-rule": "^3.12.1",
+    "@tiptap/extension-italic": "^3.12.1",
+    "@tiptap/extension-link": "^3.12.1",
+    "@tiptap/extension-list": "^3.12.1",
+    "@tiptap/extension-paragraph": "^3.12.1",
+    "@tiptap/extension-placeholder": "^3.12.1",
+    "@tiptap/extension-strike": "^3.12.1",
+    "@tiptap/extension-text": "^3.12.1",
+    "@tiptap/extension-text-align": "^3.12.1",
+    "@tiptap/extension-underline": "^3.12.1",
+    "@tiptap/pm": "^3.12.1",
+    "@tiptap/react": "^3.12.1",
+    "@tiptap/starter-kit": "^3.12.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
@@ -121,19 +123,19 @@
     "dayjs": "^1.11.19",
     "eslint": "^9.39.1",
     "flatpickr": "^4.6.13",
-    "jotai": "^2.15.1",
+    "jotai": "^2.15.2",
     "next": "^15.5.6",
     "postcss": "^8.5.6",
     "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.1",
     "pretendard": "^1.3.9",
     "pretendard-jp": "^1.3.9",
-    "prettier": "^3.6.2",
-    "react": "^19.2.0",
+    "prettier": "^3.7.4",
+    "react": "^19.2.1",
     "react-daum-postcode": "^3.2.0",
-    "react-dom": "^19.2.0",
+    "react-dom": "^19.2.1",
     "react-flatpickr": "3.10.13",
-    "react-hook-form": "^7.66.1",
+    "react-hook-form": "^7.68.0",
     "sass": "^1.94.2",
     "simplebar-core": "^1.3.2",
     "simplebar-react": "3.3.2",

package/src/form-field/common/hooks/useChangeEvents.ts

@@ -29,10 +29,8 @@ import useInputMask from "./useInputMask";
  * }
  */
 export default function useFieldChangeEvents<
-  Field extends
-    | HTMLInputElement
-    | HTMLTextAreaElement
-    | HTMLSelectElement = HTMLInputElement,
+  Field extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement =
+    HTMLInputElement,
 >({
   state,
   convertNumber,

package/src/style-base/essentials/reset.scss

@@ -1,101 +1,370 @@
 @charset "UTF-8";
 
 /* reset; ~ 2025. 08. */
-:root {-webkit-tap-highlight-color:transparent;  text-size-adjust: none; overflow-wrap:break-word; word-break:break-word;}
-*, *:before, *:after {border:0; margin:0; padding:0; box-sizing:border-box;}
-*:before, *:after {border:0; margin:0; padding:0; box-sizing:border-box;}
-* {letter-spacing:-.05em; flex-shrink:0; overscroll-behavior-y: none;/*iOS 스크롤 바운스 해제*/}
-*:focus, *:focus-within, *:focus-visible {outline:none;}
+:root {
+  -webkit-tap-highlight-color: transparent;
+  text-size-adjust: none;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+*,
+*:before,
+*:after {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+*:before,
+*:after {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+* {
+  letter-spacing: -0.05em;
+  flex-shrink: 0;
+  overscroll-behavior-y: none; /*iOS 스크롤 바운스 해제*/
+}
+*:focus,
+*:focus-within,
+*:focus-visible {
+  outline: none;
+}
 
 /* Document */
-html {width:100%; font-size:10px; font-family: "Pretendard Variable", "Pretendard JP", "Pretendard", 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica', 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', '맑은 고딕', 'Malgun Gothic', '돋움', 'dotum', Oxygen, 'Oxygen-Sans', 'Ubuntu', 'Cantarell', sans-serif; background-color:#fff; touch-action: manipulation;}
-body {width:100%; position:relative;  background:none;}
+html {
+  width: 100%;
+  font-size: 10px;
+  font-family:
+    "Pretendard Variable",
+    "Pretendard JP",
+    "Pretendard",
+    "Noto Sans KR",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Apple SD Gothic Neo",
+    "Segoe UI",
+    Roboto,
+    "Helvetica",
+    "Helvetica Neue",
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "맑은 고딕",
+    "Malgun Gothic",
+    "돋움",
+    "dotum",
+    Oxygen,
+    "Oxygen-Sans",
+    "Ubuntu",
+    "Cantarell",
+    sans-serif;
+  background-color: #fff;
+  touch-action: manipulation;
+}
+body {
+  width: 100%;
+  position: relative;
+  background: none;
+}
 
 /* Text */
-h1, h2, h3, h4, h5, h6 {font-weight:500; margin:0; padding:0; line-height: 1em;}
-strong, b {font-weight:700; line-height: 1em;}
-p, span, i, sup, sub, del, ins, s {word-break:keep-all; margin:0; padding:0;}
-span, i {word-break:keep-all; margin:0; padding:0;}
-i, address, cite, em, q {font-weight:400; font-style:normal;}
-span, i, sup, sub, del, ins, s, address, cite, em, q {line-height: 1em;}
-blockquote, abbr, dfn {font-weight:400;}
-pre, code, samp, kbd, var {font-family: 'Consolas', 'Monaco', 'Menlo', 'DejaVu Sans Mono', SFMono-Regular, 'Liberation Mono', 'Courier New', monospace;}
-blockquote, q {quotes:none;}
-blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 500;
+  margin: 0;
+  padding: 0;
+  line-height: 1em;
+}
+strong,
+b {
+  font-weight: 700;
+  line-height: 1em;
+}
+p,
+span,
+i,
+sup,
+sub,
+del,
+ins,
+s {
+  word-break: keep-all;
+  margin: 0;
+  padding: 0;
+}
+span,
+i {
+  word-break: keep-all;
+  margin: 0;
+  padding: 0;
+}
+i,
+address,
+cite,
+em,
+q {
+  font-weight: 400;
+  font-style: normal;
+}
+span,
+i,
+sup,
+sub,
+del,
+ins,
+s,
+address,
+cite,
+em,
+q {
+  line-height: 1em;
+}
+blockquote,
+abbr,
+dfn {
+  font-weight: 400;
+}
+pre,
+code,
+samp,
+kbd,
+var {
+  font-family:
+    "Consolas", "Monaco", "Menlo", "DejaVu Sans Mono", SFMono-Regular,
+    "Liberation Mono", "Courier New", monospace;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
 
 /* Media */
-img, svg {perspective: 1; max-width:100%; object-fit: contain;}
+img,
+svg {
+  perspective: 1;
+  max-width: 100%;
+  object-fit: contain;
+}
 
 /* List */
 // ul, ol, dl {list-style:none;}
-li, dt, dd {list-style:none;}
+li,
+dt,
+dd {
+  list-style: none;
+}
 
 /* Table */
-table {border-collapse:collapse; border-spacing: 0; table-layout: fixed;}
-thead, tbody, tfoot {}
-tr {}
-th, td {}
-caption {display:none;}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+thead,
+tbody,
+tfoot {
+}
+tr {
+}
+th,
+td {
+}
+caption {
+  display: none;
+}
 
 /* Form */
-form, fieldset {}
-label {display:block;}
-legend {display:none;}
+form,
+fieldset {
+}
+label {
+  display: block;
+}
+legend {
+  display: none;
+}
 
 /* HTML5 - 일반 */
-article, aside, footer, header, main, nav, section, time {display:block;}
+article,
+aside,
+footer,
+header,
+main,
+nav,
+section,
+time {
+  display: block;
+}
 /* HTML5 - Media */
-audio, canvas, figure, figcaption, video {display:block;}
-figure { position: relative; width: fit-content; height: fit-content; font-size: 0; }
+audio,
+canvas,
+figure,
+figcaption,
+video {
+  display: block;
+}
+figure {
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  font-size: 0;
+}
 /* HTML5 - 게이지 형태 */
-meter, progress {display:block;}
+meter,
+progress {
+  display: block;
+}
 /* HTML5 - 기능이 포함된 태그 (특정 input 태그에 대해, 자동완성 기능 제공) */
-mark {display:inline;} /* highlight 기능, 텍스트에 배경칠을 하여 강조 */
-details, summary {display:block;}
+mark {
+  display: inline;
+} /* highlight 기능, 텍스트에 배경칠을 하여 강조 */
+details,
+summary {
+  display: block;
+}
 /* details - 아코디언 기법이 적용된 태그, 포함된 내용을 접었다 펴서 가릴 수 있음 */
 /* summary - details의 요약정보를 항상 보여줌, 아코디언 요소의 타이틀과 같은 역할 */
-datalist {} /* 특정 input 태그에 대해, 자동완성 기능 제공 */
+datalist {
+} /* 특정 input 태그에 대해, 자동완성 기능 제공 */
 /* 미지원 또는 불필요 HTML 태그 목록 */
 /* command, embed, hgroup, keygen(암호화관련, form 내에서 활용), menu, output, ruby(,rt, rp; 한자/가나문자의 발음/훈독 등), wbr, acronym, applet, big, object */
 
-
 /* 인터렉션 요소 */
-a {display:block; color:#333; text-decoration:none; cursor: pointer;}
-input, select, button, textarea {display:block; max-width:100%; outline:none; background:transparent; box-shadow:none; border-radius:0; caret-color:transparent;}
-button {appearance:none; cursor:pointer; font-family:inherit; user-select: none;}
-textarea {resize:none;}
-select {appearance:none; user-select: none;}
+a {
+  display: block;
+  color: #333;
+  text-decoration: none;
+  cursor: pointer;
+}
+input,
+select,
+button,
+textarea {
+  display: block;
+  max-width: 100%;
+  outline: none;
+  background: transparent;
+  box-shadow: none;
+  border-radius: 0;
+  caret-color: transparent;
+}
+button {
+  appearance: none;
+  cursor: pointer;
+  font-family: inherit;
+  user-select: none;
+}
+textarea {
+  resize: none;
+}
+select {
+  appearance: none;
+  user-select: none;
+}
 select::-ms-expand {
   /* IE 8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   /* IE 5-7 */
   filter: alpha(opacity=0);
   /* Good browsers :) */
-  opacity:0;
-}
-input::placeholder {opacity:1;  color:#959595;}
-input:focus::placeholder {color:transparent;}
-textarea::placeholder {opacity:1;  color:#959595;}
-textarea:focus::placeholder {color:transparent;}
-[type=button], [type=reset], [type=submit] {appearance: button;}
-[type=search] {appearance: textfield; outline-offset:-2px}
-:-webkit-inner-spin-button, ::-webkit-outer-spin-button {height:auto}
-::-webkit-search-decoration {appearance:none}
-::-webkit-search-cancel-button {caret-color: transparent; border-color: transparent; display: none;}
-::-webkit-file-upload-button {appearance: button;}
-input[type=text] {appearance:none;}
-input[type=date] {appearance:none;}
-input[type=date]::-webkit-inner-spin-button {display:none;}
-input[type=date]::-webkit-calendar-picker-indicator {opacity:0;}
-input[type=date]::-webkit-clear-button {display: none;}
-input[type=date]::-ms-clear {display: none;}
-input[type=number] {appearance:none;}
-input[type=number]::-webkit-inner-spin-button {display:none;}
-input[type=number]::-webkit-calendar-picker-indicator {opacity:0;}
-input[type=number]::-webkit-clear-button {display: none;}
-input[type=number]::-ms-clear {display: none;}
-input[type=range]::-webkit-slider-thumb { -webkit-appearance: none;  -moz-appearance:none;  appearance:none; }
-input[type=range]::-ms-track { cursor:pointer; background: transparent; border-color:transparent; color: transparent; }
+  opacity: 0;
+}
+input::placeholder {
+  opacity: 1;
+  color: #959595;
+}
+input:focus::placeholder {
+  color: transparent;
+}
+textarea::placeholder {
+  opacity: 1;
+  color: #959595;
+}
+textarea:focus::placeholder {
+  color: transparent;
+}
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  appearance: button;
+}
+[type="search"] {
+  appearance: textfield;
+  outline-offset: -2px;
+}
+:-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+::-webkit-search-decoration {
+  appearance: none;
+}
+::-webkit-search-cancel-button {
+  caret-color: transparent;
+  border-color: transparent;
+  display: none;
+}
+::-webkit-file-upload-button {
+  appearance: button;
+}
+input[type="text"] {
+  appearance: none;
+}
+input[type="date"] {
+  appearance: none;
+}
+input[type="date"]::-webkit-inner-spin-button {
+  display: none;
+}
+input[type="date"]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+input[type="date"]::-webkit-clear-button {
+  display: none;
+}
+input[type="date"]::-ms-clear {
+  display: none;
+}
+input[type="number"] {
+  appearance: none;
+}
+input[type="number"]::-webkit-inner-spin-button {
+  display: none;
+}
+input[type="number"]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+input[type="number"]::-webkit-clear-button {
+  display: none;
+}
+input[type="number"]::-ms-clear {
+  display: none;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+input[type="range"]::-ms-track {
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
 /*input[type=range]::-webkit-slider-runnable-track {} /*슬라이더 영역 스타일링*/
 /*input[type=range]::-webkit-slider-thumb { 
   -webkit-appearance: none;
@@ -113,19 +382,38 @@ input[type=range]::-ms-track { cursor:pointer; background: transparent; border-c
   cursor:pointer;
   border-radius:50%;
 }*/
-input[type=checkbox] {appearance: checkbox;}
-input[type=time] {}
-input[type=button] {}
-input[type=email] {}
-input[type=password] {}
-input[type=reset] {}
-input[type=search] {}
-input[type=submit] {}
-input[type=tel] {}
-button:disabled {cursor:default;}
-progress { -webkit-appearance: none; border:1px solid #e1e1e1; }
-progress::-webkit-progress-bar { background-color:#fff }
-progress::-webkit-progress-value { background-color:grey; }
+input[type="checkbox"] {
+  appearance: checkbox;
+}
+input[type="time"] {
+}
+input[type="button"] {
+}
+input[type="email"] {
+}
+input[type="password"] {
+}
+input[type="reset"] {
+}
+input[type="search"] {
+}
+input[type="submit"] {
+}
+input[type="tel"] {
+}
+button:disabled {
+  cursor: default;
+}
+progress {
+  -webkit-appearance: none;
+  border: 1px solid #e1e1e1;
+}
+progress::-webkit-progress-bar {
+  background-color: #fff;
+}
+progress::-webkit-progress-value {
+  background-color: grey;
+}
 
 // .readonly {display:none;}
 
@@ -149,8 +437,12 @@ a {
 
 /* 모바일 */
 @media (orientation: landscape) {
-  html.mobile-device {font-size: 1vw;}
+  html.mobile-device {
+    font-size: 1vw;
+  }
 }
 @media (orientation: portrait) {
-  html.mobile-device {font-size: 1vw;}
+  html.mobile-device {
+    font-size: 1vw;
+  }
 }

package/src/style-base/responsive.scss

@@ -22,7 +22,9 @@
   --aspect-factor: 1;
 
   // 최종 표준 값: 설계상 기준 rem(=10px @ FHD)을 유지하되, 해상도/배율 보정 적용
-  --responsive-standard: calc(var(--responsive-size) * var(--dpi-factor) * var(--aspect-factor));
+  --responsive-standard: calc(
+    var(--responsive-size) * var(--dpi-factor) * var(--aspect-factor)
+  );
 
   font-size: var(--responsive-standard);
 }
@@ -30,28 +32,42 @@
 // 고배율(배율 125% 이상 추정) 보정: 소폭 축소
 // DPI 보정: Mac Retina(2dppx)에는 영향이 없도록 범위를 제한
 @media (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx) {
-  :root { --dpi-factor: 0.96; }
+  :root {
+    --dpi-factor: 0.96;
+  }
 }
 @media (min-resolution: 1.5dppx) and (max-resolution: 1.74dppx) {
-  :root { --dpi-factor: 0.92; }
+  :root {
+    --dpi-factor: 0.92;
+  }
 }
 
 // QHD 이상에서 상한을 점진적으로 상향해 4K와의 구분감 확보
 @media (min-width: 2560px) and (min-height: 1440px) {
-  :root { --responsive-size: clamp(9px, var(--responsive-axis-min), 15px); }
+  :root {
+    --responsive-size: clamp(9px, var(--responsive-axis-min), 15px);
+  }
 }
 @media (min-width: 3200px) and (min-height: 1800px) {
-  :root { --responsive-size: clamp(10px, var(--responsive-axis-min), 15.5px); }
+  :root {
+    --responsive-size: clamp(10px, var(--responsive-axis-min), 15.5px);
+  }
 }
 @media (min-width: 3840px) and (min-height: 2160px) {
-  :root { --responsive-size: clamp(11px, var(--responsive-axis-min), 16px); }
+  :root {
+    --responsive-size: clamp(11px, var(--responsive-axis-min), 16px);
+  }
 }
 
 // 울트라와이드(21:9 이상)에서 UI가 상대적으로 작아보이는 현상 완화
 @media (min-aspect-ratio: 21/9) and (min-width: 2560px) {
-  :root { --aspect-factor: 1.04; }
+  :root {
+    --aspect-factor: 1.04;
+  }
 }
 // 세로 확장형(16:10 이하)에서 과도한 확대 방지
 @media (max-aspect-ratio: 16/10) and (max-width: 1920px) {
-  :root { --aspect-factor: 0.98; }
+  :root {
+    --aspect-factor: 0.98;
+  }
 }

package/src/types/form/common/hook.d.ts

@@ -15,10 +15,8 @@ import type { FormFieldStatePropsType } from "./state";
  * @property {Function} onCustomChange - 커스텀 입력 변경 이벤트 핸들러
  */
 export type UseFieldChangeEvents<
-  Field extends
-    | HTMLInputElement
-    | HTMLTextAreaElement
-    | HTMLSelectElement = HTMLInputElement,
+  Field extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement =
+    HTMLInputElement,
 > = {
   /**
    * 입력 상태

package/src/types/form/common/props.d.ts

@@ -15,10 +15,8 @@ import type { MaskType } from "./format";
  * @property {MaskType} [maskType] 입력값 마스킹 타입
  */
 export type FormFieldCommonAttrType<
-  Field extends
-    | HTMLInputElement
-    | HTMLSelectElement
-    | HTMLTextAreaElement = HTMLInputElement,
+  Field extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement =
+    HTMLInputElement,
 > = Partial<{
   /**
    * HTML 내이티브 속성
@@ -42,10 +40,8 @@ export type FormFieldCommonAttrType<
  * - dataKey: 데이터 상태관리를 위한 데이터 프로퍼티 키
  */
 export type FormFieldComponentProps<
-  Field extends
-    | HTMLInputElement
-    | HTMLSelectElement
-    | HTMLTextAreaElement = HTMLInputElement,
+  Field extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement =
+    HTMLInputElement,
 > = {
   /**
    * @example

package/src/types/form/input/legacy/auto-complete.d.ts

@@ -14,8 +14,7 @@ export interface AutoCompleteOptionsCommonType {
     | GetQueryOptionsDataType;
 }
 
-export interface AutoCompletePartnerOptionsType
-  extends AutoCompleteOptionsCommonType {
+export interface AutoCompletePartnerOptionsType extends AutoCompleteOptionsCommonType {
   data: AutoCompletePartnerDataType[];
 }
 

package/src/types/form/input/props.d.ts

@@ -23,10 +23,8 @@ export type InputContainerProps = FormFieldItemContainerProps & {
  * Input; 입력창 속성
  */
 export type InputAttrType<
-  Field extends
-    | HTMLInputElement
-    | HTMLTextAreaElement
-    | HTMLSelectElement = HTMLInputElement,
+  Field extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement =
+    HTMLInputElement,
 > = FormFieldCommonAttrType<Field> &
   Partial<{
     defaultValue: string;