negodesign 0.0.81 → 0.0.82

package/dist/components/pages/security/login/01/ui/LoginCard01.svelte

@@ -1,132 +1,148 @@
-<script lang="ts" module>
-  /**
-   * @component LoginCard
-   * Authentication card with login/register tabs, back button, light switch, and link footer.
-   *
-   * @example svelte
-   * <LoginCard formType="EMAIL_PASSWORD" onSubmit={(cred) => login(cred)} />
-   */
-</script>
-
-<script lang="ts">
-  import LanguageSwitcher from "../../../../../ui/language-switcher/language-switcher.svelte";
-  import LinkTermsOfService from "../../../../../ui/link/link-terms-of-service.svelte";
-  import LinkPrivacyPolity from "../../../../../ui/link/link-privacy-polity.svelte";
-  import TabUnderline from "../../../../../ui/tabs/ui/tab-underline.svelte";
-  import ButtonBack from "../../../../../ui/button/ButtonBack.svelte";
-  import LabelOr from "../../../../../ui/label/core/LabelOr.svelte";
-  import type { Snippet } from "svelte";
-  import { LightSwitch } from "../../../../../ui/light-switch";
-  import { t } from "../../../../../../i18n";
-  import type {
-    LoginFormType,
-    LoginRequestDto,
-    LinkProps,
-    SocialLoginItem,
-  } from "../../types";
-  import FormLoginEmailPassword from "./FormLoginEmailPassword.svelte";
-  import FormLoginUsernamePassword from "./FormLoginUsernamePassword.svelte";
-  import FormLoginPhonePassword from "./FormLoginPhonePassword.svelte";
-
-  type Props = {
-    formType?: LoginFormType;
-    onSubmit?: (credential: LoginRequestDto) => void;
-    register?: Snippet;
-    forgetPassword?: LinkProps;
-    privacyPolicy?: LinkProps;
-    termsOfService?: LinkProps;
-    socialLogins?: SocialLoginItem[];
-  };
-
-  let {
-    formType,
-    onSubmit,
-    register,
-    forgetPassword,
-    privacyPolicy,
-    termsOfService,
-    socialLogins = [],
-  }: Props = $props();
-</script>
-
-<div class="flex-1 flex flex-col justify-between h-screen bg-gradient-right">
-  <nav class="flex justify-between p-5 md:bg-transparent">
-    <div>
-      <ButtonBack />
-    </div>
-    <div class="flex gap-2">
-      <LightSwitch />
-      <LanguageSwitcher />
-    </div>
-  </nav>
-
-  <div
-    class="p-5 h-full border-t-2 bg-background md:border-none rounded-tl-[35px] rounded-tr-[35px]"
-  >
-    <TabUnderline
-      items={[
-        {
-          item: { label: $t("label.login"), value: "login" },
-          children: loginSnippet,
-        },
-        ...(register
-          ? [
-              {
-                item: { label: $t("label.register"), value: "register" },
-                children: registerSnippet,
-              },
-            ]
-          : []),
-      ]}
-    />
-
-    {#snippet loginSnippet()}
-      {#if formType == "EMAIL_PASSWORD"}
-        <FormLoginEmailPassword
-          {onSubmit}
-          {forgetPassword}
-          {socialLogins}
-          inputLabelClass="text-white"
-          inputClass="text-white/90 placeholder:text-white/50"
-        />
-      {:else if formType == "USERNAME_PASSWORD"}
-        <FormLoginUsernamePassword
-          {onSubmit}
-          {forgetPassword}
-          {socialLogins}
-          inputLabelClass="text-white"
-          inputClass="text-white/90 placeholder:text-white/50"
-        />
-      {:else if formType == "PHONE_PASSWORD"}
-        <FormLoginPhonePassword
-          {onSubmit}
-          {forgetPassword}
-          {socialLogins}
-          inputLabelClass="text-white"
-          inputClass="text-white/90 placeholder:text-white/50"
-        />
-      {/if}
-    {/snippet}
-
-    {#snippet registerSnippet()}
-      {#if register}
-        {@render register()}
-      {/if}
-    {/snippet}
-  </div>
-
-  <!-- Footer Terms -->
-  <div
-    class="text-[11px] text-slate-400 py-2 flex justify-center gap-2 bg-background"
-  >
-    <LinkPrivacyPolity
-      href={privacyPolicy?.url}
-      onclick={privacyPolicy?.onclick}
-    />
-    <LabelOr />
-    <LinkTermsOfService
-      href={termsOfService?.url}
-      onclick={termsOfService?.onclick}
-    />
-  </div>
-</div>
+<script lang="ts" module>
+  /**
+   * @component LoginCard
+   * Authentication card with login/register tabs, back button, light switch, and link footer.
+   *
+   * @example svelte
+   * <LoginCard formType="EMAIL_PASSWORD" onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import LanguageSwitcher from "../../../../../ui/language-switcher/language-switcher.svelte";
+  import LinkTermsOfService from "../../../../../ui/link/link-terms-of-service.svelte";
+  import LinkPrivacyPolity from "../../../../../ui/link/link-privacy-polity.svelte";
+  import TabUnderline from "../../../../../ui/tabs/ui/tab-underline.svelte";
+  import ButtonBack from "../../../../../ui/button/ButtonBack.svelte";
+  import LabelOr from "../../../../../ui/label/core/LabelOr.svelte";
+  import type { Snippet } from "svelte";
+  import { LightSwitch } from "../../../../../ui/light-switch";
+  import { t } from "../../../../../../i18n";
+  import type {
+    LoginFormType,
+    LoginRequestDto,
+    LinkProps,
+    SocialLoginItem,
+  } from "../../types";
+  import FormLoginEmailPassword from "./FormLoginEmailPassword.svelte";
+  import FormLoginUsernamePassword from "./FormLoginUsernamePassword.svelte";
+  import FormLoginPhonePassword from "./FormLoginPhonePassword.svelte";
+
+  type Props = {
+    formType?: LoginFormType;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    register?: Snippet;
+    forgetPassword?: LinkProps;
+    privacyPolicy?: LinkProps;
+    termsOfService?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+    textClass?: string;
+    isLoading?: boolean;
+  };
+
+  let {
+    formType,
+    onSubmit,
+    register,
+    forgetPassword,
+    privacyPolicy,
+    termsOfService,
+    socialLogins = [],
+    textClass,
+    isLoading,
+  }: Props = $props();
+</script>
+
+<div class="flex-1 flex flex-col justify-between h-screen bg-gradient-right">
+  <nav class="flex justify-between p-5 md:bg-transparent">
+    <div>
+      <ButtonBack />
+    </div>
+    <div class="flex gap-2">
+      <LightSwitch />
+      <LanguageSwitcher />
+    </div>
+  </nav>
+
+  <div
+    class="p-5 h-full border-t-2 md:border-none rounded-tl-[35px] rounded-tr-[35px]"
+  >
+    <TabUnderline
+      items={[
+        {
+          item: {
+            label: $t("label.login"),
+            value: "login",
+            className: "text-white",
+          },
+          children: loginSnippet,
+        },
+        ...(register
+          ? [
+              {
+                item: {
+                  label: $t("label.register"),
+                  value: "register",
+                  className: "text-white",
+                },
+                children: registerSnippet,
+              },
+            ]
+          : []),
+      ]}
+    />
+
+    {#snippet loginSnippet()}
+      {#if formType == "EMAIL_PASSWORD"}
+        <FormLoginEmailPassword
+          {onSubmit}
+          {forgetPassword}
+          {socialLogins}
+          {isLoading}
+          inputLabelClass="text-white"
+          inputClass="text-white/90 placeholder:text-white/50"
+          textClass="text-white"
+        />
+      {:else if formType == "USERNAME_PASSWORD"}
+        <FormLoginUsernamePassword
+          {onSubmit}
+          {forgetPassword}
+          {socialLogins}
+          {isLoading}
+          inputLabelClass="text-white"
+          inputClass="text-white/90 placeholder:text-white/50"
+          textClass="text-white"
+        />
+      {:else if formType == "PHONE_PASSWORD"}
+        <FormLoginPhonePassword
+          {onSubmit}
+          {forgetPassword}
+          {socialLogins}
+          {isLoading}
+          inputLabelClass="text-white"
+          inputClass="text-white/90 placeholder:text-white/50"
+          textClass="text-white"
+        />
+      {/if}
+    {/snippet}
+
+    {#snippet registerSnippet()}
+      {#if register}
+        {@render register()}
+      {/if}
+    {/snippet}
+  </div>
+
+  <!-- Footer Terms -->
+  <div class="text-[11px] text-white py-2 flex justify-center gap-2">
+    <LinkPrivacyPolity
+      href={privacyPolicy?.url}
+      onclick={privacyPolicy?.onclick}
+    />
+    <LabelOr />
+    <LinkTermsOfService
+      href={termsOfService?.url}
+      onclick={termsOfService?.onclick}
+    />
+  </div>
+</div>

package/dist/components/pages/security/login/01/ui/LoginCard01.svelte.d.ts

@@ -8,6 +8,8 @@ type Props = {
     privacyPolicy?: LinkProps;
     termsOfService?: LinkProps;
     socialLogins?: SocialLoginItem[];
+    textClass?: string;
+    isLoading?: boolean;
 };
 declare const LoginCard01: import("svelte").Component<Props, {}, "">;
 type LoginCard01 = ReturnType<typeof LoginCard01>;

package/dist/components/pages/security/login/01/ui/PageLogin01.svelte

@@ -1,64 +1,66 @@
-<script lang="ts" module>
-  /**
-   * @component PageLogin01
-   * Variant 01 of the login page. Split layout: hero on the left, auth card on the right.
-   *
-   * @example svelte
-   * <PageLogin01 formType="USERNAME_PASSWORD" onSubmit={(cred) => login(cred)} />
-   */
-</script>
-
-<script lang="ts">
-  import LoginCard01 from "./LoginCard01.svelte";
-  import PageAuth01 from "../../../auth/PageAuth01.svelte";
-  import type { PageLoginProps } from "../../types";
-  import { t } from "../../../../../../i18n";
-
-  let {
-    carousel,
-    type,
-    title,
-    formType = "USERNAME_PASSWORD",
-    children,
-    onSubmit,
-    forgetPassword,
-    privacyPolicy,
-    termsOfService,
-    socialLogins = [],
-  }: PageLoginProps = $props();
-
-  const defaultCarousel = $derived([
-    {
-      buttonText: $t("label.next"),
-      title: $t("carousel.login.slide1.title"),
-      description: $t("carousel.login.slide1.description"),
-    },
-    {
-      buttonText: $t("label.next"),
-      title: $t("carousel.login.slide2.title"),
-      description: $t("carousel.login.slide2.description"),
-    },
-    {
-      buttonText: $t("label.next"),
-      title: $t("carousel.login.slide3.title"),
-      description: $t("carousel.login.slide3.description"),
-    },
-  ]);
-
-  const carouselItems = $derived(carousel ?? defaultCarousel);
-</script>
-
-<PageAuth01 {title} {type} carousel={carouselItems}>
-  {#if children}
-    {@render children()}
-  {:else}
-    <LoginCard01
-      {formType}
-      {onSubmit}
-      {forgetPassword}
-      {privacyPolicy}
-      {termsOfService}
-      {socialLogins}
-    />
-  {/if}
-</PageAuth01>
+<script lang="ts" module>
+  /**
+   * @component PageLogin01
+   * Variant 01 of the login page. Split layout: hero on the left, auth card on the right.
+   *
+   * @example svelte
+   * <PageLogin01 formType="USERNAME_PASSWORD" onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import LoginCard01 from "./LoginCard01.svelte";
+  import PageAuth01 from "../../../auth/PageAuth01.svelte";
+  import type { PageLoginProps } from "../../types";
+  import { t } from "../../../../../../i18n";
+
+  let {
+    carousel,
+    type,
+    title,
+    formType = "USERNAME_PASSWORD",
+    children,
+    onSubmit,
+    forgetPassword,
+    privacyPolicy,
+    termsOfService,
+    socialLogins = [],
+    isLoading,
+  }: PageLoginProps = $props();
+
+  const defaultCarousel = $derived([
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.login.slide1.title"),
+      description: $t("carousel.login.slide1.description"),
+    },
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.login.slide2.title"),
+      description: $t("carousel.login.slide2.description"),
+    },
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.login.slide3.title"),
+      description: $t("carousel.login.slide3.description"),
+    },
+  ]);
+
+  const carouselItems = $derived(carousel ?? defaultCarousel);
+</script>
+
+<PageAuth01 {title} {type} carousel={carouselItems}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <LoginCard01
+      {formType}
+      {onSubmit}
+      {forgetPassword}
+      {privacyPolicy}
+      {termsOfService}
+      {socialLogins}
+      {isLoading}
+    />
+  {/if}
+</PageAuth01>

package/dist/components/pages/security/login/02/ui/FormLogin02.svelte

@@ -1,72 +1,82 @@
-<script lang="ts" module>
-  /**
-   * @component FormLogin02
-   * Variant 02 login form with input variants (EMAIL, USERNAME, PHONE).
-   *
-   * @example svelte
-   * <FormLogin02 variant="EMAIL" onSubmit={(cred) => login(cred)} />
-   */
-</script>
-
-<script lang="ts">
-  import InputEmail from "../../../../../ui/form/ui/input-email.svelte";
-  import InputUsername from "../../../../../ui/form/ui/input-username.svelte";
-  import InputPhone from "../../../../../ui/form/ui/input-phone.svelte";
-  import InputPassword from "../../../../../ui/form/ui/input-password.svelte";
-  import SocialLogin from "../../../../../ui/social-login/social-login.svelte";
-  import { t } from "../../../../../../i18n";
-  import type { LoginRequestDto, LoginVariant, LinkProps, SocialLoginItem } from "../../types";
-
-  type Props = {
-    variant: LoginVariant;
-    onSubmit?: (credential: LoginRequestDto) => void;
-    forgetPassword?: LinkProps;
-    socialLogins?: SocialLoginItem[];
-    inputLabelClass?: string;
-    inputClass?: string;
-  };
-
-  let { variant, onSubmit, forgetPassword, socialLogins = [], inputLabelClass, inputClass }: Props = $props();
-  let data = $state("");
-  let password = $state("");
-
-  function handleSubmit(e: Event) {
-    e.preventDefault();
-    onSubmit?.({ data, password });
-  }
-</script>
-
-<form class="w-full space-y-4" onsubmit={handleSubmit}>
-  <div class="space-y-1">
-    {#if variant === "EMAIL"}
-      <InputEmail labelClass={inputLabelClass} inputClass={inputClass} bind:value={data} />
-    {:else if variant === "USERNAME"}
-      <InputUsername labelClass={inputLabelClass} inputClass={inputClass} bind:value={data} />
-    {:else if variant === "PHONE"}
-      <InputPhone labelClass={inputLabelClass} inputClass={inputClass} bind:value={data} />
-    {/if}
-  </div>
-
-  <div class="space-y-1">
-    <InputPassword labelClass={inputLabelClass} inputClass={inputClass} bind:value={password} />
-  </div>
-
-  <div class="flex justify-end">
-    <a
-      href={forgetPassword?.url ?? "/forget-password"}
-      onclick={forgetPassword?.onclick}
-      class="text-sm font-medium text-primary hover:underline"
-    >
-      {$t("link.forget.password")}?
-    </a>
-  </div>
-
-  <button
-    type="submit"
-    class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-primary text-white rounded-lg text-sm font-semibold transition-colors"
-  >
-    {$t("label.login")}
-  </button>
-
-  <SocialLogin items={socialLogins} />
-</form>
+<script lang="ts" module>
+  /**
+   * @component FormLogin02
+   * Variant 02 login form with input variants (EMAIL, USERNAME, PHONE).
+   *
+   * @example svelte
+   * <FormLogin02 variant="EMAIL" onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import InputEmail from "../../../../../ui/form/ui/input-email.svelte";
+  import InputUsername from "../../../../../ui/form/ui/input-username.svelte";
+  import InputPhone from "../../../../../ui/form/ui/input-phone.svelte";
+  import InputPassword from "../../../../../ui/form/ui/input-password.svelte";
+  import SocialLogin from "../../../../../ui/social-login/social-login.svelte";
+  import { t } from "../../../../../../i18n";
+  import type { LoginRequestDto, LoginVariant, LinkProps, SocialLoginItem } from "../../types";
+
+  type Props = {
+    variant: LoginVariant;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+    inputLabelClass?: string;
+    inputClass?: string;
+    isLoading?: boolean;
+  };
+
+  let {
+    variant,
+    onSubmit,
+    forgetPassword,
+    socialLogins = [],
+    inputLabelClass,
+    inputClass,
+    isLoading = false,
+  }: Props = $props();
+  let data = $state("");
+  let password = $state("");
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    onSubmit?.({ data, password });
+  }
+</script>
+
+<form class="w-full space-y-4" onsubmit={handleSubmit}>
+  <div class="space-y-1">
+    {#if variant === "EMAIL"}
+      <InputEmail labelClass={inputLabelClass} inputClass={inputClass} bind:value={data} />
+    {:else if variant === "USERNAME"}
+      <InputUsername labelClass={inputLabelClass} inputClass={inputClass} bind:value={data} />
+    {:else if variant === "PHONE"}
+      <InputPhone labelClass={inputLabelClass} inputClass={inputClass} bind:value={data} />
+    {/if}
+  </div>
+
+  <div class="space-y-1">
+    <InputPassword labelClass={inputLabelClass} inputClass={inputClass} bind:value={password} />
+  </div>
+
+  <div class="flex justify-end">
+    <a
+      href={forgetPassword?.url ?? "/forget-password"}
+      onclick={forgetPassword?.onclick}
+      class="text-sm font-medium text-primary hover:underline"
+    >
+      {$t("link.forget.password")}?
+    </a>
+  </div>
+
+  <button
+    type="submit"
+    disabled={isLoading}
+    class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-primary text-white rounded-lg text-sm font-semibold transition-colors disabled:pointer-events-none disabled:opacity-50"
+  >
+    {$t("label.login")}
+  </button>
+
+  <SocialLogin items={socialLogins} />
+</form>

package/dist/components/pages/security/login/02/ui/FormLogin02.svelte.d.ts

@@ -6,6 +6,7 @@ type Props = {
     socialLogins?: SocialLoginItem[];
     inputLabelClass?: string;
     inputClass?: string;
+    isLoading?: boolean;
 };
 declare const FormLogin02: import("svelte").Component<Props, {}, "">;
 type FormLogin02 = ReturnType<typeof FormLogin02>;

package/dist/components/pages/security/login/02/ui/FormLoginEmailPassword02.svelte

@@ -1,26 +1,27 @@
-<script lang="ts" module>
-  /**
-   * @component FormLoginEmailPassword02
-   * Variant 02 form with email and password. Wrapper of FormLogin02 variant="EMAIL".
-   *
-   * @example svelte
-   * <FormLoginEmailPassword02 onSubmit={(cred) => login(cred)} />
-   */
-</script>
-
-<script lang="ts">
-  import FormLogin02 from "./FormLogin02.svelte";
-  import type { LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
-
-  type Props = {
-    onSubmit?: (credential: LoginRequestDto) => void;
-    forgetPassword?: LinkProps;
-    socialLogins?: SocialLoginItem[];
-    inputLabelClass?: string;
-    inputClass?: string;
-  };
-
-  let { onSubmit, forgetPassword, socialLogins = [], inputLabelClass, inputClass }: Props = $props();
-</script>
-
-<FormLogin02 variant="EMAIL" {onSubmit} {forgetPassword} {socialLogins} {inputLabelClass} {inputClass} />
+<script lang="ts" module>
+  /**
+   * @component FormLoginEmailPassword02
+   * Variant 02 form with email and password. Wrapper of FormLogin02 variant="EMAIL".
+   *
+   * @example svelte
+   * <FormLoginEmailPassword02 onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import FormLogin02 from "./FormLogin02.svelte";
+  import type { LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
+
+  type Props = {
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+    inputLabelClass?: string;
+    inputClass?: string;
+    isLoading?: boolean;
+  };
+
+  let { onSubmit, forgetPassword, socialLogins = [], inputLabelClass, inputClass, isLoading }: Props = $props();
+</script>
+
+<FormLogin02 variant="EMAIL" {onSubmit} {forgetPassword} {socialLogins} {inputLabelClass} {inputClass} {isLoading} />

package/dist/components/pages/security/login/02/ui/FormLoginEmailPassword02.svelte.d.ts

@@ -5,6 +5,7 @@ type Props = {
     socialLogins?: SocialLoginItem[];
     inputLabelClass?: string;
     inputClass?: string;
+    isLoading?: boolean;
 };
 declare const FormLoginEmailPassword02: import("svelte").Component<Props, {}, "">;
 type FormLoginEmailPassword02 = ReturnType<typeof FormLoginEmailPassword02>;