negodesign 0.0.73 → 0.0.74

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

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+  /**
+   * @component LoginCard02
+   * Variant 02 authentication card with welcome header, social login, and form.
+   *
+   * @example svelte
+   * <LoginCard02 formType="EMAIL_PASSWORD" onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import LanguageSwitcher from "../../../../../ui/language-switcher/language-switcher.svelte";
+  import { LightSwitch } from "../../../../../ui/light-switch";
+  import { t } from "../../../../../../i18n";
+  import type { LoginFormType, LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
+  import FormLoginUsernamePassword02 from "./FormLoginUsernamePassword02.svelte";
+  import FormLoginEmailPassword02 from "./FormLoginEmailPassword02.svelte";
+  import FormLoginPhonePassword02 from "./FormLoginPhonePassword02.svelte";
+
+  type Props = {
+    formType?: LoginFormType;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    register?: LinkProps;
+    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-full bg-white">
+  <nav class="flex justify-end p-5">
+    <div class="flex gap-2">
+      <LightSwitch />
+      <LanguageSwitcher />
+    </div>
+  </nav>
+
+  <div class="flex-1 flex flex-col justify-center px-8 md:px-12 pb-8">
+    <div class="w-full max-w-sm mx-auto space-y-6">
+      <div class="text-center space-y-2">
+        <h1 class="text-2xl font-bold text-gray-900">{$t("text.login.welcome")}</h1>
+        <p class="text-sm text-gray-500">
+          {$t("text.login.continue")}
+        </p>
+      </div>
+
+      {#if formType == "EMAIL_PASSWORD"}
+        <FormLoginEmailPassword02 {onSubmit} {forgetPassword} {socialLogins} />
+      {:else if formType == "USERNAME_PASSWORD"}
+        <FormLoginUsernamePassword02 {onSubmit} {forgetPassword} {socialLogins} />
+      {:else if formType == "PHONE_PASSWORD"}
+        <FormLoginPhonePassword02 {onSubmit} {forgetPassword} {socialLogins} />
+      {/if}
+
+      <p class="text-center text-sm text-gray-600">
+        {$t("text.login.no-account")}
+        <a
+          href={register?.url ?? "/register"}
+          onclick={register?.onclick}
+          class="font-semibold text-primary hover:underline"
+        >
+          {$t("text.login.sign-up")}
+        </a>
+      </p>
+
+      <div class="text-center text-xs text-gray-400 space-x-2">
+        <a
+          href={privacyPolicy?.url ?? "/privacy-policy"}
+          onclick={privacyPolicy?.onclick}
+          class="hover:underline"
+        >
+          {$t("link.privacy-policy.label")}
+        </a>
+        <span>|</span>
+        <a
+          href={termsOfService?.url ?? "/terms-of-service"}
+          onclick={termsOfService?.onclick}
+          class="hover:underline"
+        >
+          {$t("link.terms-of-service.label")}
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+import type { LoginFormType, LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
+type Props = {
+    formType?: LoginFormType;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    register?: LinkProps;
+    forgetPassword?: LinkProps;
+    privacyPolicy?: LinkProps;
+    termsOfService?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+};
+declare const LoginCard02: import("svelte").Component<Props, {}, "">;
+type LoginCard02 = ReturnType<typeof LoginCard02>;
+export default LoginCard02;

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

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+  /**
+   * @component PageLogin02
+   * Variant 02 of the login page. Split layout: hero image on the left, auth card on the right.
+   *
+   * @example svelte
+   * <PageLogin02 formType="USERNAME_PASSWORD" onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import AuthCard from "./LoginCard02.svelte";
+  import LeftHero from "./LeftHero02.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>
+
+<main class="h-screen w-screen flex items-center justify-center">
+  <div class="hidden md:flex w-7/12 h-screen">
+    <LeftHero {title} type={type ?? "POINTER"} items={carouselItems} />
+  </div>
+  <div class="w-full md:w-5/12 flex flex-col h-screen">
+    {#if children}
+      {@render children()}
+    {:else}
+      <AuthCard
+        {formType}
+        {onSubmit}
+        {forgetPassword}
+        {privacyPolicy}
+        {termsOfService}
+        {socialLogins}
+      />
+    {/if}
+  </div>
+</main>

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

@@ -0,0 +1,4 @@
+import type { PageLoginProps } from "../../types";
+declare const PageLogin02: import("svelte").Component<PageLoginProps, {}, "">;
+type PageLogin02 = ReturnType<typeof PageLogin02>;
+export default PageLogin02;

package/dist/components/pages/security/login/03/ui/FormLogin03.svelte

@@ -0,0 +1,87 @@
+<script lang="ts" module>
+  /**
+   * @component FormLogin03
+   * Variant 03 login form with input variants (EMAIL, USERNAME, PHONE).
+   *
+   * @example svelte
+   * <FormLogin03 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 LinkForgetPassword from "../../../../../ui/link/link-forget-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[];
+  };
+
+  let {
+    variant,
+    onSubmit,
+    forgetPassword,
+    socialLogins = [],
+  }: Props = $props();
+  let data = $state("");
+  let password = $state("");
+  let rememberMe = $state(false);
+
+  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 bind:value={data} />
+    {:else if variant === "USERNAME"}
+      <InputUsername bind:value={data} />
+    {:else if variant === "PHONE"}
+      <InputPhone bind:value={data} />
+    {/if}
+  </div>
+
+  <div class="space-y-1">
+    <InputPassword bind:value={password} />
+  </div>
+
+  <div class="flex items-center justify-between">
+    <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
+      <input
+        type="checkbox"
+        bind:checked={rememberMe}
+        class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
+      />
+      {$t("label.remember.me")}
+    </label>
+    <LinkForgetPassword
+      href={forgetPassword?.url}
+      onclick={forgetPassword?.onclick}
+    />
+  </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 hover:opacity-90"
+  >
+    {$t("label.login")}
+  </button>
+
+  <SocialLogin items={socialLogins} />
+</form>

package/dist/components/pages/security/login/03/ui/FormLogin03.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { LoginRequestDto, LoginVariant, LinkProps, SocialLoginItem } from "../../types";
+type Props = {
+    variant: LoginVariant;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+};
+declare const FormLogin03: import("svelte").Component<Props, {}, "">;
+type FormLogin03 = ReturnType<typeof FormLogin03>;
+export default FormLogin03;

package/dist/components/pages/security/login/03/ui/FormLoginEmailPassword03.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  /**
+   * @component FormLoginEmailPassword03
+   * Variant 03 form with email and password. Wrapper of FormLogin03 variant="EMAIL".
+   *
+   * @example svelte
+   * <FormLoginEmailPassword03 onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import FormLogin03 from "./FormLogin03.svelte";
+  import type { LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
+
+  type Props = {
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+  };
+
+  let { onSubmit, forgetPassword, socialLogins = [] }: Props = $props();
+</script>
+
+<FormLogin03 variant="EMAIL" {onSubmit} {forgetPassword} {socialLogins} />

package/dist/components/pages/security/login/03/ui/FormLoginEmailPassword03.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
+type Props = {
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+};
+declare const FormLoginEmailPassword03: import("svelte").Component<Props, {}, "">;
+type FormLoginEmailPassword03 = ReturnType<typeof FormLoginEmailPassword03>;
+export default FormLoginEmailPassword03;

package/dist/components/pages/security/login/03/ui/FormLoginPhonePassword03.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  /**
+   * @component FormLoginPhonePassword03
+   * Variant 03 form with phone and password. Wrapper of FormLogin03 variant="PHONE".
+   *
+   * @example svelte
+   * <FormLoginPhonePassword03 onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import FormLogin03 from "./FormLogin03.svelte";
+  import type { LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
+
+  type Props = {
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+  };
+
+  let { onSubmit, forgetPassword, socialLogins = [] }: Props = $props();
+</script>
+
+<FormLogin03 variant="PHONE" {onSubmit} {forgetPassword} {socialLogins} />

package/dist/components/pages/security/login/03/ui/FormLoginPhonePassword03.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
+type Props = {
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+};
+declare const FormLoginPhonePassword03: import("svelte").Component<Props, {}, "">;
+type FormLoginPhonePassword03 = ReturnType<typeof FormLoginPhonePassword03>;
+export default FormLoginPhonePassword03;

package/dist/components/pages/security/login/03/ui/FormLoginUsernamePassword03.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  /**
+   * @component FormLoginUsernamePassword03
+   * Variant 03 form with username and password. Wrapper of FormLogin03 variant="USERNAME".
+   *
+   * @example svelte
+   * <FormLoginUsernamePassword03 onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import FormLogin03 from "./FormLogin03.svelte";
+  import type { LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
+
+  type Props = {
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+  };
+
+  let { onSubmit, forgetPassword, socialLogins = [] }: Props = $props();
+</script>
+
+<FormLogin03 variant="USERNAME" {onSubmit} {forgetPassword} {socialLogins} />

package/dist/components/pages/security/login/03/ui/FormLoginUsernamePassword03.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
+type Props = {
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+};
+declare const FormLoginUsernamePassword03: import("svelte").Component<Props, {}, "">;
+type FormLoginUsernamePassword03 = ReturnType<typeof FormLoginUsernamePassword03>;
+export default FormLoginUsernamePassword03;

package/dist/components/pages/security/login/03/ui/LeftHero03.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
+  import type { Snippet } from "svelte";
+  import type { LoginCarouselProps } from "../../types";
+  import Button from "../../../../../ui/button/button.svelte";
+  import { t } from "../../../../../../i18n";
+
+  type Props = {
+    title?: string | Snippet;
+    autoPlayInterval?: number;
+  };
+
+  let {
+    title,
+    items = [],
+    type: varient = "DOT",
+    autoPlayInterval = 5000,
+  }: Props & LoginCarouselProps = $props();
+
+  let currentIndex = $state(0);
+  let currentItem = $derived(items[currentIndex] ?? items[0]);
+
+  function goTo(index: number) {
+    currentIndex = index;
+  }
+
+  function next() {
+    if (items.length === 0) return;
+    currentIndex = (currentIndex + 1) % items.length;
+  }
+
+  $effect(() => {
+    if (items.length <= 1) return;
+    const timer = setInterval(next, autoPlayInterval);
+    return () => clearInterval(timer);
+  });
+</script>
+
+<div
+  class="relative flex flex-col justify-between overflow-hidden w-full h-full text-white"
+>
+  {#if currentItem?.backgroundUrl}
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      style="background-image: url('{currentItem.backgroundUrl}')"
+    ></div>
+    <div class="absolute inset-0 bg-black/20"></div>
+  {:else}
+    <div class="absolute inset-0 bg-gradient"></div>
+    <div class="absolute inset-0 bg-white/10 backdrop-blur-3xl"></div>
+  {/if}
+
+  <div class="relative z-10 flex items-center gap-2 p-8">
+    <div class="font-bold text-xl tracking-wider flex items-center gap-2">
+      {#if typeof title === "function"}
+        {@render title()}
+      {:else}
+        {title || $t("label.welcome")}
+      {/if}
+    </div>
+  </div>
+
+  <section class="relative z-10 flex flex-col gap-5 p-8">
+    <div class="my-auto max-w-sm md:max-w-md lg:max-w-100">
+      {#if currentItem}
+        {#key currentIndex}
+          <div
+            class="text-3xl md:text-4xl font-bold tracking-tight mb-4 leading-tight animate-fade-in duration-300"
+          >
+            {currentItem.title}
+          </div>
+          <p
+            class="text-sm mb-6 leading-relaxed animate-fade-in duration-300 opacity-90"
+          >
+            {currentItem.description}
+          </p>
+        {/key}
+        <Button
+          variant="outline"
+          class="inline-flex items-center gap-2 text-sm font-semibold bg-primary"
+        >
+          {currentItem.buttonText}
+          <HugeiconsIcon icon={ArrowRight01Icon} size={16} />
+        </Button>
+      {/if}
+    </div>
+
+    <div class="flex items-center gap-2 mb-2">
+      {#each items as it, i (it.title)}
+        <button
+          type="button"
+          onclick={() => goTo(i)}
+          aria-label={`Ir para o item ${i + 1}`}
+          aria-current={currentIndex === i}
+          class="transition-all duration-300 focus:outline-none flex items-center justify-center {currentIndex ===
+          i
+            ? 'opacity-100 scale-110'
+            : 'opacity-50 hover:opacity-75'}"
+        >
+          {#if varient === "NUMBER"}
+            <span
+              class="w-6 h-6 text-xs font-semibold rounded-full text-primary flex items-center justify-center"
+            >
+              {i + 1}
+            </span>
+          {:else}
+            <span class="w-2 h-2 rounded-full bg-white"></span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  </section>
+</div>

package/dist/components/pages/security/login/03/ui/LeftHero03.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { LoginCarouselProps } from "../../types";
+type Props = {
+    title?: string | Snippet;
+    autoPlayInterval?: number;
+};
+type $$ComponentProps = Props & LoginCarouselProps;
+declare const LeftHero03: import("svelte").Component<$$ComponentProps, {}, "">;
+type LeftHero03 = ReturnType<typeof LeftHero03>;
+export default LeftHero03;

package/dist/components/pages/security/login/03/ui/LoginCard03.svelte

@@ -0,0 +1,116 @@
+<script lang="ts" module>
+  /**
+   * @component LoginCard03
+   * Variant 03 authentication card with glass morphism design, social login, and user stats.
+   *
+   * @example svelte
+   * <LoginCard03 formType="EMAIL_PASSWORD" onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import LanguageSwitcher from "../../../../../ui/language-switcher/language-switcher.svelte";
+  import { LightSwitch } from "../../../../../ui/light-switch";
+  import { t } from "../../../../../../i18n";
+  import type {
+    LoginFormType,
+    LoginRequestDto,
+    LinkProps,
+    SocialLoginItem,
+  } from "../../types";
+  import FormLoginUsernamePassword03 from "./FormLoginUsernamePassword03.svelte";
+  import FormLoginEmailPassword03 from "./FormLoginEmailPassword03.svelte";
+  import FormLoginPhonePassword03 from "./FormLoginPhonePassword03.svelte";
+
+  type Props = {
+    formType?: LoginFormType;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    register?: LinkProps;
+    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-full">
+  <nav class="flex justify-end p-5">
+    <div class="flex gap-2">
+      <LightSwitch />
+      <LanguageSwitcher />
+    </div>
+  </nav>
+
+  <div class="flex-1 flex flex-col justify-center px-8 md:px-12 pb-8">
+    <div class="w-full max-w-sm mx-auto space-y-6">
+      <div class="space-y-2">
+        <div
+          class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center"
+        >
+          <span class="text-xl font-bold text-gray-600">G</span>
+        </div>
+        <h1 class="text-2xl font-bold text-gray-900">
+          {$t("text.login.welcome")}
+        </h1>
+        <p class="text-sm text-gray-500">
+          {$t("text.login.subtitle")}
+        </p>
+      </div>
+
+      {#if formType == "EMAIL_PASSWORD"}
+        <FormLoginEmailPassword03 {onSubmit} {forgetPassword} {socialLogins} />
+      {:else if formType == "USERNAME_PASSWORD"}
+        <FormLoginUsernamePassword03
+          {onSubmit}
+          {forgetPassword}
+          {socialLogins}
+        />
+      {:else if formType == "PHONE_PASSWORD"}
+        <FormLoginPhonePassword03 {onSubmit} {forgetPassword} {socialLogins} />
+      {/if}
+
+      <p class="text-center text-sm text-gray-600">
+        {$t("text.login.no-account")}
+        <a
+          href={register?.url ?? "/register"}
+          onclick={register?.onclick}
+          class="font-semibold text-primary hover:underline"
+        >
+          {$t("text.login.sign-up")}
+        </a>
+      </p>
+    </div>
+  </div>
+
+  <div class="px-8 pb-8">
+    <div class="flex items-center gap-3 p-4 bg-gray-50 rounded-xl">
+      <div class="flex -space-x-2">
+        <div
+          class="w-8 h-8 rounded-full bg-linear-to-br from-blue-400 to-blue-600 border-2 border-white"
+        ></div>
+        <div
+          class="w-8 h-8 rounded-full bg-linear-to-br from-green-400 to-green-600 border-2 border-white"
+        ></div>
+        <div
+          class="w-8 h-8 rounded-full bg-linear-to-br from-purple-400 to-purple-600 border-2 border-white"
+        ></div>
+      </div>
+      <div>
+        <p class="text-sm font-semibold text-gray-900">
+          {$t("text.login.users.count")}
+        </p>
+        <p class="text-xs text-gray-500">{$t("text.login.users.worldwide")}</p>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/pages/security/login/03/ui/LoginCard03.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { LoginFormType, LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
+type Props = {
+    formType?: LoginFormType;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    register?: LinkProps;
+    forgetPassword?: LinkProps;
+    privacyPolicy?: LinkProps;
+    termsOfService?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+};
+declare const LoginCard03: import("svelte").Component<Props, {}, "">;
+type LoginCard03 = ReturnType<typeof LoginCard03>;
+export default LoginCard03;