npm - @uniai-fe/uds-templates - Versions diffs - 0.0.9 → 0.0.11 - Mend

@uniai-fe/uds-templates 0.0.9 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/README.md +77 -1
package/dist/styles.css +212 -267
package/package.json +6 -4
package/src/components/auth/index.tsx +11 -0
package/src/components/auth/login/index.tsx +1 -1
package/src/components/auth/login/markup/FormField.tsx +2 -2
package/src/components/auth/login/types/props.ts +12 -12
package/src/components/auth/login/types.ts +2 -2
package/src/components/auth/signup/hooks/index.ts +3 -0
package/src/components/auth/signup/hooks/useSignupAccountForm.ts +77 -0
package/src/components/auth/signup/hooks/useSignupUserInfoForm.ts +81 -0
package/src/components/auth/signup/hooks/useSignupVerificationForm.ts +77 -0
package/src/components/auth/signup/index.ts +24 -0
package/src/components/auth/signup/markup/AccountForm.tsx +124 -0
package/src/components/auth/signup/markup/Complete.tsx +61 -0
package/src/components/auth/signup/markup/UserInfoForm.tsx +97 -0
package/src/components/auth/signup/markup/VerificationForm.tsx +155 -0
package/src/components/auth/signup/markup/index.ts +4 -0
package/src/components/auth/signup/styles/signup.scss +135 -0
package/src/components/auth/signup/types/hooks.ts +85 -0
package/src/components/auth/signup/types/index.ts +2 -0
package/src/components/auth/signup/types/props.ts +105 -0
package/src/components/auth/signup/utils/composeFieldProps.ts +50 -0
package/src/components/modal/core/components/Container.tsx +41 -0
package/src/components/modal/core/components/FooterButtons.tsx +132 -0
package/src/components/modal/core/components/Provider.tsx +28 -0
package/src/components/modal/core/components/Root.tsx +93 -0
package/src/components/modal/core/hooks/useModal.ts +136 -0
package/src/components/modal/core/jotai/atoms.ts +10 -0
package/src/components/modal/index.scss +4 -0
package/src/components/modal/index.tsx +16 -0
package/src/components/modal/styles/animations.scss +24 -0
package/src/components/modal/styles/base.scss +45 -0
package/src/components/modal/styles/container.scss +138 -0
package/src/components/modal/styles/dimmer.scss +23 -0
package/src/components/modal/templates/Alert.tsx +104 -0
package/src/components/modal/templates/Dialog.tsx +112 -0
package/src/components/modal/types/footer.ts +36 -0
package/src/components/modal/types/index.ts +21 -0
package/src/components/modal/types/options.ts +6 -0
package/src/components/modal/types/state.ts +31 -0
package/src/components/modal/types/templates.ts +32 -0
package/src/index.scss +1 -0
package/src/index.tsx +1 -0

package/README.md CHANGED Viewed

@@ -29,7 +29,7 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
   - **templates**는 레이아웃/플로우/상태 표현까지 담당하고,
   - API 호출, 인증 토큰 관리, 라우팅, i18n 등 비즈니스 로직은 서비스 앱에서 구현합니다.
-## 현재 제공 템플릿
+## 현재 제공 템플릿/모듈
 - `/auth/**`
   - 로그인 화면 템플릿 (Login)
@@ -39,6 +39,9 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
 - `/page-frame/**`
   - `/page-frame/mobile`: 로그인 이후 화면을 위한 모바일 프레임(header/body/footer)
   - `/page-frame/pc`: 추후 확장 예정
+- `/modal/**`
+  - ui-legacy 스택 기반 모달 Provider/Root/Container + 템플릿(`Modal.Alert`, `Modal.Dialog`)
+  - Storybook(`apps/design-storybook/src/stories/templates/modal`)에서 Alert/Confirm 케이스를 검증한다.
 각 템플릿의 상세한 범위와 의사결정은 `CONTEXT-*.md` 문서에서 관리합니다.
@@ -111,6 +114,79 @@ export default function LoginPage() {
 > 위 예시는 개념을 설명하기 위한 형태이며,
 > 실제 props 구조/이름은 `CONTEXT-AUTH.md`에서 확정·관리합니다.
+## Modal 모듈 사용법
+ui-legacy에서 사용하던 모달 스택/옵션을 templates 레이어로 옮겨왔습니다. 핵심 흐름은 다음과 같습니다.
+1. **Provider 1회 장착** — 서비스 레이아웃에서 `<Modal.Provider />`를 렌더합니다.
+2. **훅 사용** — `const { newModal, closeModal } = Modal.useModal();`
+3. **템플릿 팩토리** — `Modal.Alert`, `Modal.Dialog`이 `ModalState` 객체를 반환하므로 `newModal(...)`에 그대로 전달합니다.
+```tsx
+// app/layout.tsx
+import "@uniai-fe/uds-templates/styles";
+import { Modal } from "@uniai-fe/uds-templates/modal";
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ko">
+      <body>
+        {children}
+        <Modal.Provider />
+      </body>
+    </html>
+  );
+}
+```
+```tsx
+// 예: Alert/Confirm 호출
+import { Modal } from "@uniai-fe/uds-templates/modal";
+export function ExampleActions() {
+  const { newModal } = Modal.useModal();
+  const openAlert = () =>
+    newModal(
+      Modal.Alert({
+        stackKey: "sample/alert",
+        message: "필수 항목 동의에 체크해 주세요.",
+        confirm: { label: "확인" },
+      }),
+    );
+  const openConfirm = () =>
+    newModal(
+      Modal.Dialog({
+        stackKey: "sample/confirm",
+        title: "저장하시겠어요?",
+        content: "입력한 내용이 저장되며 되돌릴 수 없습니다.",
+        confirm: {
+          label: "저장",
+          onClick: () => {
+            // 서비스 동작
+          },
+        },
+        cancel: { label: "취소" },
+      }),
+    );
+  return (
+    <>
+      <button onClick={openAlert}>Alert</button>
+      <button onClick={openConfirm}>Confirm</button>
+    </>
+  );
+}
+```
+- footer 버튼은 ui-legacy와 동일하게 `stackKey`, `role`, `defaultOptions/linkOptions` 구조로 관리하며, Alert(Text)/Dialog(Solid) 규격은 templates 내부에서 보장합니다.
+- 세부 가드레일·확장 기록은 `CONTEXT-MODAL.md`를 참고하고, 새 템플릿을 추가할 때 해당 문서를 선행 업데이트합니다.
 ## Scripts
 패키지 루트에서 실행 가능한 대표 명령:

package/dist/styles.css CHANGED Viewed

@@ -721,14 +721,18 @@
     --font-body-medium-line-height: 1.5em;
     --font-body-medium-letter-spacing: 0px;
     --font-body-medium-weight: 500;
-    --font-body-small-size: 15px;
+    --font-body-small-size: 16px;
     --font-body-small-line-height: 1.5em;
     --font-body-small-letter-spacing: 0px;
     --font-body-small-weight: 400;
-    --font-body-xsmall-size: 13px;
+    --font-body-xsmall-size: 15px;
     --font-body-xsmall-line-height: 1.5em;
     --font-body-xsmall-letter-spacing: 0px;
     --font-body-xsmall-weight: 400;
+    --font-body-xxsmall-size: 13px;
+    --font-body-xxsmall-line-height: 1.5em;
+    --font-body-xxsmall-letter-spacing: 0px;
+    --font-body-xxsmall-weight: 400;
   }
 }
 @layer theme.tokens.typography {
@@ -1928,271 +1932,6 @@ figure.chip {
   height: 100%;
 }
-:where(.radix-themes, .theme-root, :root) {
-  /* dialog essentials */
-  --dialog-overlay-bg: rgba(5, 6, 12, 0.55);
-  --dialog-panel-width: 360px;
-  --dialog-panel-max-width: calc(100vw - var(--spacing-padding-10) * 2);
-  --dialog-panel-bg: var(--color-bg-surface-static-white);
-  --dialog-panel-radius: var(--theme-radius-large-1);
-  --dialog-panel-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
-  --dialog-border-color: var(--color-border-standard-cool-gray);
-  --dialog-title-color: var(--color-label-strong);
-  --dialog-title-font-size: var(--font-heading-xsmall-size);
-  --dialog-title-line-height: var(--font-heading-xsmall-line-height);
-  --dialog-title-weight: var(--font-heading-xsmall-weight);
-  --dialog-body-color: var(--color-label-standard);
-  --dialog-body-font-size: var(--font-body-small-size);
-  --dialog-body-line-height: var(--font-body-small-line-height);
-  --dialog-description-color: var(--color-label-standard);
-  --dialog-description-font-size: var(--font-body-small-size);
-  --dialog-description-line-height: var(--font-body-small-line-height);
-  /* alert(notice) defaults */
-  --notice-dialog-section-padding-x: var(--spacing-padding-8);
-  --notice-dialog-section-padding-y: var(--spacing-padding-10);
-  --notice-dialog-action-height: 52px;
-  /* confirm defaults */
-  --confirm-dialog-header-padding-x: var(--spacing-padding-6);
-  --confirm-dialog-header-padding-y: var(--spacing-padding-7);
-  --confirm-dialog-body-padding-x: var(--spacing-padding-6);
-  --confirm-dialog-body-padding-y: var(--spacing-padding-7);
-  --confirm-dialog-footer-padding-x: var(--spacing-padding-6);
-  --confirm-dialog-footer-padding-y: var(--spacing-padding-7);
-  --confirm-dialog-actions-gap: var(--spacing-gap-5);
-}
-.dialog-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: var(--dialog-overlay-bg);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  will-change: opacity;
-}
-.dialog-overlay[data-state=open] {
-  opacity: 1;
-}
-.dialog-overlay[data-state=closed] {
-  opacity: 0;
-  pointer-events: none;
-}
-@media (prefers-reduced-motion: reduce) {
-  .dialog-overlay {
-    transition: none;
-  }
-}
-.dialog-content {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: min(var(--dialog-panel-width), var(--dialog-panel-max-width));
-  max-width: var(--dialog-panel-max-width);
-  max-height: calc(100vh - var(--spacing-padding-10) * 2);
-  background-color: var(--dialog-panel-bg);
-  border-radius: var(--dialog-panel-radius);
-  box-shadow: var(--dialog-panel-shadow);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  outline: none;
-  border: none;
-  gap: 0;
-  opacity: 0;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-.dialog-content[data-state=open] {
-  opacity: 1;
-  transform: translate(-50%, -50%);
-}
-.dialog-content[data-state=closed] {
-  opacity: 0;
-  transform: translate(-50%, calc(-50% + 12px));
-  pointer-events: none;
-}
-@media (prefers-reduced-motion: reduce) {
-  .dialog-content {
-    transition: none;
-  }
-}
-.dialog-section {
-  padding: 0;
-}
-.dialog-section[data-section=actions] {
-  flex-shrink: 0;
-}
-.dialog-title {
-  margin: 0;
-  color: var(--dialog-title-color);
-  font-size: var(--dialog-title-font-size);
-  line-height: var(--dialog-title-line-height);
-  font-weight: var(--dialog-title-weight);
-}
-.dialog-description {
-  margin: 0;
-  color: var(--dialog-description-color);
-  font-size: var(--dialog-description-font-size);
-  line-height: var(--dialog-description-line-height);
-}
-.dialog-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  border: none;
-  border-radius: 0;
-  margin: 0;
-  padding: 0;
-  font-size: var(--font-body-medium-size);
-  line-height: var(--font-body-medium-line-height);
-  font-weight: var(--font-body-medium-weight);
-  cursor: pointer;
-  background: transparent;
-  color: var(--color-label-strong);
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-.dialog-button[data-native-element=true] {
-  appearance: none;
-}
-.notice-dialog-header,
-.notice-dialog-body {
-  padding: var(--notice-dialog-section-padding-y) var(--notice-dialog-section-padding-x);
-}
-.notice-dialog-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-3);
-  text-align: center;
-}
-.notice-dialog-body {
-  text-align: center;
-}
-.notice-dialog-body p {
-  margin: 0 0 var(--spacing-gap-2);
-  color: var(--dialog-body-color);
-  font-size: var(--dialog-body-font-size);
-  line-height: 1.5em;
-  font-weight: var(--font-body-small-weight);
-  word-break: keep-all;
-}
-.notice-dialog-body p:last-child {
-  margin-bottom: 0;
-}
-.notice-dialog-actions {
-  border-top: 1px solid var(--dialog-border-color);
-  display: flex;
-  align-items: stretch;
-  flex-direction: row;
-  padding: 0;
-  gap: 0;
-  justify-content: center;
-  overflow: hidden;
-  --button-min-height: var(--notice-dialog-action-height);
-  --button-padding-inline: 0;
-  --button-padding-block: 0;
-  --button-border-radius: 0;
-}
-.notice-dialog-actions > * {
-  flex: 1;
-}
-.notice-dialog-actions .button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  border: none;
-  border-radius: 0;
-  margin: 0;
-  padding: 0;
-  font-size: var(--font-body-medium-size);
-  line-height: var(--font-body-medium-line-height);
-  font-weight: var(--font-body-medium-weight);
-  cursor: pointer;
-  background: transparent;
-  color: var(--color-label-strong);
-  transition: background-color 0.15s ease, color 0.15s ease;
-  background-color: var(--color-common-100);
-  color: var(--color-primary-default);
-}
-.notice-dialog-actions .button:hover {
-  background-color: var(--color-bg-surface-static-cool-gray);
-}
-.notice-dialog-actions .button:not(:first-child),
-.notice-dialog-actions [data-native-element=true]:not(:first-child) {
-  border-left: 1px solid var(--dialog-border-color);
-}
-.confirm-dialog-header {
-  padding: var(--confirm-dialog-header-padding-y) var(--confirm-dialog-header-padding-x);
-}
-.confirm-dialog-body {
-  padding: var(--confirm-dialog-body-padding-y) var(--confirm-dialog-body-padding-x);
-}
-.confirm-dialog-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-2);
-  text-align: center;
-}
-.confirm-dialog-body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-gap-2);
-  text-align: center;
-}
-.confirm-dialog-body p {
-  margin: 0;
-  color: var(--dialog-body-color);
-  font-size: var(--dialog-body-font-size);
-  line-height: 1.5em;
-  font-weight: var(--font-body-small-weight);
-  word-break: keep-all;
-}
-.confirm-dialog-description {
-  margin: 0;
-  color: var(--dialog-body-color);
-  font-size: var(--dialog-body-font-size);
-  line-height: 1.5em;
-  font-weight: var(--font-body-small-weight);
-  word-break: keep-all;
-}
-.confirm-dialog-actions {
-  display: flex;
-  align-items: stretch;
-  flex-direction: row;
-  padding: var(--confirm-dialog-footer-padding-y) var(--confirm-dialog-footer-padding-x);
-  gap: var(--confirm-dialog-actions-gap);
-  justify-content: center;
-}
-.confirm-dialog-actions > * {
-  flex: 1;
-}
 :where(.radix-themes, .theme-root, :root) {
   --drawer-overlay-bg: rgba(0, 0, 0, 0.44);
   --drawer-surface-bg: var(--color-bg-surface-static-white);
@@ -2734,6 +2473,18 @@ figure.chip {
   color: var(--theme-input-helper-color);
 }
+.email-verification {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-4);
+}
+.email-verification__countdown {
+  font-size: var(--font-caption-medium-size);
+  line-height: var(--font-caption-medium-line-height);
+  color: var(--theme-input-helper-color);
+}
 /* TODO(label): 스타일을 SOT 토큰 값으로 정의한다. */
 :where(.radix-themes, .theme-root, :root) {
   --theme-navigation-height: 86px;
@@ -3630,3 +3381,197 @@ figure.chip {
 .page-frame-navigation {
   width: 100%;
 }
+:where(.radix-themes, .theme-root, :root) {
+  --uds-modal-overlay-bg: var(--dialog-overlay-bg, rgba(5, 6, 12, 0.55));
+  --uds-modal-surface-bg: var(--color-bg-surface-static-white);
+  --uds-modal-surface-radius: var(--theme-radius-large-1);
+  --uds-modal-surface-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
+  --uds-modal-max-width: min(
+    360px,
+    calc(100vw - var(--spacing-padding-10) * 2)
+  );
+  --uds-modal-max-height: calc(100vh - var(--spacing-padding-10) * 2);
+}
+.uds-modal-root {
+  position: fixed;
+  inset: 0;
+  z-index: calc(400 + var(--uds-modal-index, 0));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-padding-6);
+  pointer-events: none;
+}
+.uds-modal-surface {
+  position: relative;
+  width: 100%;
+  max-width: var(--uds-modal-max-width);
+  max-height: var(--uds-modal-max-height);
+  background-color: var(--uds-modal-surface-bg);
+  border-radius: var(--uds-modal-surface-radius);
+  box-shadow: var(--uds-modal-surface-shadow);
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.uds-modal-dimmer {
+  position: absolute;
+  inset: 0;
+  background-color: var(--uds-modal-overlay-bg);
+  pointer-events: auto;
+}
+.uds-modal-root[data-state=init], .uds-modal-root[data-state=open] {
+  pointer-events: auto;
+}
+.uds-modal-root[data-state=closed] {
+  pointer-events: none;
+}
+.uds-modal-dimmer {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.uds-modal-root[data-state=open] .uds-modal-dimmer {
+  opacity: 1;
+}
+.uds-modal-root[data-state=closed] .uds-modal-dimmer {
+  opacity: 0;
+}
+.uds-modal-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.uds-modal-header,
+.uds-modal-body {
+  padding: 0;
+  margin: 0;
+}
+.uds-modal-footer {
+  padding: 0;
+  border-top: none;
+}
+.uds-modal-footer-buttons {
+  display: flex;
+  width: 100%;
+  gap: var(--spacing-gap-4, 16px);
+  padding: var(--spacing-padding-6, 16px);
+  align-items: stretch;
+}
+.uds-modal-footer-buttons[data-count="1"] .uds-modal-footer-button {
+  width: 100%;
+}
+.uds-modal-footer-buttons[data-count="2"] .uds-modal-footer-button {
+  flex: 1 1 0;
+}
+.uds-modal-footer-buttons[data-appearance=text] {
+  padding: 0;
+  gap: 0;
+  min-height: var(--notice-dialog-action-height, 56px);
+  border-top: 1px solid var(--uds-modal-footer-border-color, var(--dialog-border-color, var(--color-border-standard-cool-gray, #e4e5e7)));
+}
+.uds-modal-footer-buttons[data-appearance=text] .uds-modal-footer-button {
+  border-radius: 0;
+}
+.uds-modal-footer-buttons[data-appearance=text] .uds-modal-footer-button + .uds-modal-footer-button {
+  border-left: 1px solid var(--uds-modal-footer-border-color, var(--dialog-border-color, var(--color-border-standard-cool-gray, #e4e5e7)));
+}
+.uds-modal-footer-button-solid {
+  min-height: 48px;
+}
+.uds-modal-footer-button-text {
+  min-height: 56px;
+  justify-content: center;
+  border-radius: 0;
+}
+.uds-modal-alert-message {
+  padding: var(--spacing-padding-10, 32px) var(--spacing-padding-8, 24px);
+  text-align: center;
+  color: var(--dialog-body-color);
+  word-break: keep-all;
+}
+.uds-modal-alert-message > p,
+.uds-modal-alert-message > span,
+.uds-modal-alert-message > strong,
+.uds-modal-alert-message > em {
+  margin: 0;
+  font-size: var(--dialog-body-font-size);
+  line-height: 1.5em;
+  font-weight: var(--font-body-small-weight, 400);
+  word-break: inherit;
+}
+.uds-modal-alert-message > * + * {
+  margin-top: var(--spacing-gap-2, 8px);
+}
+.uds-modal-dialog-header,
+.uds-modal-dialog-body {
+  padding: 0;
+  margin: 0;
+}
+.uds-modal-dialog-header-content {
+  padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
+  text-align: center;
+}
+.uds-modal-dialog-header-content > h3 {
+  margin: 0;
+  color: var(--dialog-title-color);
+  font-size: var(--dialog-title-font-size);
+  line-height: var(--dialog-title-line-height);
+  font-weight: var(--dialog-title-weight);
+}
+.uds-modal-dialog-body-content {
+  padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
+  text-align: center;
+  color: var(--dialog-body-color);
+  word-break: keep-all;
+}
+.uds-modal-dialog-body-content > p,
+.uds-modal-dialog-body-content > span,
+.uds-modal-dialog-body-content > strong,
+.uds-modal-dialog-body-content > em {
+  margin: 0;
+  font-size: var(--dialog-body-font-size);
+  line-height: 1.5em;
+  font-weight: var(--font-body-small-weight, 400);
+  word-break: inherit;
+}
+.uds-modal-dialog-body-content > * + * {
+  margin-top: var(--spacing-gap-2, 8px);
+}
+.uds-modal-surface {
+  opacity: 0;
+  transform: translate3d(0, 12px, 0);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.uds-modal-root[data-state=open] .uds-modal-surface {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+.uds-modal-root[data-state=closed] .uds-modal-surface {
+  opacity: 0;
+  transform: translate3d(0, 12px, 0);
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .uds-modal-surface {
+    transition: none;
+  }
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -53,7 +53,8 @@
     "react": ">= 19",
     "react-dom": ">= 19",
     "react-hook-form": ">= 7",
-    "next": "^15"
+    "next": "^15",
+    "jotai": ">= 2"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -72,8 +73,9 @@
     "eslint": "^9.39.2",
     "next": "^15.5.9",
     "prettier": "^3.7.4",
-    "react-hook-form": "^7.68.0",
-    "sass": "^1.97.0",
+    "react-hook-form": "^7.69.0",
+    "jotai": "^2.16.0",
+    "sass": "^1.97.1",
     "typescript": "~5.9.3"
   }
 }

package/src/components/auth/index.tsx CHANGED Viewed

@@ -2,8 +2,19 @@ import "./login/index.scss";
 import { AuthContainer } from "./container";
 import { AuthLogin } from "./login";
+import { AuthSignup } from "./signup";
 export const Auth = {
   Container: AuthContainer,
   Login: AuthLogin,
+  Signup: AuthSignup,
 };
+export {
+  useSignupUserInfoForm,
+  useSignupVerificationForm,
+  useSignupAccountForm,
+} from "./signup";
+export type * from "./login";
+export type * from "./signup";

package/src/components/auth/login/index.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./index.scss";
-export type { AuthLoginProps as AuthLoginTemplateProps } from "./types";
+export type * from "./types";
 export * from "./hooks";
 import AuthLoginContainer from "./markup/Container";

package/src/components/auth/login/markup/FormField.tsx CHANGED Viewed

@@ -9,8 +9,8 @@ import {
   type InputState,
 } from "@uniai-fe/uds-primitives";
 import type {
-  AuthLoginFieldConfig,
   AuthLoginFieldOptions,
+  AuthLoginFieldProps,
   AuthLoginFields,
   AuthLoginFormValues,
 } from "../types";
@@ -29,7 +29,7 @@ type HelperState = {
 };
 const composeFieldProps = <TProps extends InputProps>(
-  config: AuthLoginFieldConfig<TProps>,
+  config: AuthLoginFieldProps<TProps>,
   helper?: HelperState,
 ): TProps => {
   const baseProps = {