negodesign 0.0.72 → 0.0.74

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

@@ -1,28 +1,28 @@
-<script lang="ts">
-  import InputPasswordConfirm from "../../../../../core/form/ui/input-password-confirm.svelte";
-  import InputPassword from "../../../../../core/form/ui/input-password.svelte";
-  import InputEmail from "../../../../../core/form/ui/input-email.svelte";
-  import ButtonLogin from "../../../../../core/button/ButtonLogin.svelte";
-  import { t } from "../../../../../../i18n";
-
-  let email = $state("");
-  let password = $state("");
-</script>
-
-<form class="space-y-4" onsubmit={(e) => e.preventDefault()}>
-  <p class="text-[13px] py-3">{$t("text.register")}</p>
-
-  <div class="space-y-1">
-    <InputEmail value={email} />
-  </div>
-
-  <div class="space-y-1">
-    <InputPassword value={password} />
-  </div>
-
-  <div class="space-y-1">
-    <InputPasswordConfirm value={password} />
-  </div>
-
-  <ButtonLogin />
-</form>
+<script lang="ts">
+  import InputPasswordConfirm from "../../../../../ui/form/ui/input-password-confirm.svelte";
+  import InputPassword from "../../../../../ui/form/ui/input-password.svelte";
+  import InputEmail from "../../../../../ui/form/ui/input-email.svelte";
+  import ButtonLogin from "../../../../../ui/button/ButtonLogin.svelte";
+  import { t } from "../../../../../../i18n";
+
+  let email = $state("");
+  let password = $state("");
+</script>
+
+<form class="space-y-4" onsubmit={(e) => e.preventDefault()}>
+  <p class="text-[13px] py-3">{$t("text.register")}</p>
+
+  <div class="space-y-1">
+    <InputEmail value={email} />
+  </div>
+
+  <div class="space-y-1">
+    <InputPassword value={password} />
+  </div>
+
+  <div class="space-y-1">
+    <InputPasswordConfirm value={password} />
+  </div>
+
+  <ButtonLogin />
+</form>

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

@@ -1,107 +1,109 @@
-<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 "../../../../../core/link/link-terms-of-service.svelte";
-  import LinkPrivacyPolity from "../../../../../core/link/link-privacy-polity.svelte";
-  import TabUnderline from "../../../../../core/tabs/ui/tab-underline.svelte";
-  import ButtonBack from "../../../../../core/button/ButtonBack.svelte";
-  import LabelOr from "../../../../../core/label/LabelOr.svelte";
-  import type { Snippet } from "svelte";
-  import { LightSwitch } from "../../../../../ui/light-switch";
-  import { t } from "../../../../../../i18n";
-  import type { LoginFormType, LoginRequestDto, LinkProps } 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;
-  };
-
-  let {
-    formType,
-    onSubmit,
-    register,
-    forgetPassword,
-    privacyPolicy,
-    termsOfService,
-  }: 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} />
-      {:else if formType == "USERNAME_PASSWORD"}
-        <FormLoginUsernamePassword {onSubmit} {forgetPassword} />
-      {:else if formType == "PHONE_PASSWORD"}
-        <FormLoginPhonePassword {onSubmit} {forgetPassword} />
-      {/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[];
+  };
+
+  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} />
+      {:else if formType == "USERNAME_PASSWORD"}
+        <FormLoginUsernamePassword {onSubmit} {forgetPassword} {socialLogins} />
+      {:else if formType == "PHONE_PASSWORD"}
+        <FormLoginPhonePassword {onSubmit} {forgetPassword} {socialLogins} />
+      {/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>

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

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { LoginFormType, LoginRequestDto, LinkProps } from "../../types";
+import type { LoginFormType, LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
 type Props = {
     formType?: LoginFormType;
     onSubmit?: (credential: LoginRequestDto) => void;
@@ -7,6 +7,7 @@ type Props = {
     forgetPassword?: LinkProps;
     privacyPolicy?: LinkProps;
     termsOfService?: LinkProps;
+    socialLogins?: SocialLoginItem[];
 };
 declare const LoginCard: import("svelte").Component<Props, {}, "">;
 type LoginCard = ReturnType<typeof LoginCard>;

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

@@ -10,13 +10,13 @@
 
 <script lang="ts">
   import AuthCard from "./LoginCard.svelte";
-  import LeftHero from "../../../../../core/panel/LeftHero.svelte";
+  import LeftHero from "../../../../../ui/panel/LeftHero.svelte";
   import type { PageLoginProps } from "../../types";
   import { t } from "../../../../../../i18n";
 
   let {
     carousel,
-    varient,
+    type,
     title,
     formType = "USERNAME_PASSWORD",
     children,
@@ -24,6 +24,7 @@
     forgetPassword,
     privacyPolicy,
     termsOfService,
+    socialLogins = [],
   }: PageLoginProps = $props();
 
   const defaultCarousel = $derived([
@@ -56,7 +57,7 @@
     </defs>
   </svg>
   <div class="hidden md:block md:w-8/12">
-    <LeftHero {title} varient={varient ?? "POINTER"} items={carouselItems} />
+    <LeftHero {title} type={type ?? "POINTER"} items={carouselItems} />
   </div>
   <div class="w-full md:px-0 md:w-4/12 border-gray-900">
     {#if children}
@@ -68,6 +69,7 @@
         {forgetPassword}
         {privacyPolicy}
         {termsOfService}
+        {socialLogins}
       />
     {/if}
   </div>

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

@@ -0,0 +1,70 @@
+<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[];
+  };
+
+  let { variant, onSubmit, forgetPassword, socialLogins = [] }: 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 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 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>

package/dist/components/pages/security/login/02/ui/FormLogin02.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 FormLogin02: import("svelte").Component<Props, {}, "">;
+type FormLogin02 = ReturnType<typeof FormLogin02>;
+export default FormLogin02;

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

@@ -0,0 +1,24 @@
+<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[];
+  };
+
+  let { onSubmit, forgetPassword, socialLogins = [] }: Props = $props();
+</script>
+
+<FormLogin02 variant="EMAIL" {onSubmit} {forgetPassword} {socialLogins} />

package/dist/components/pages/security/login/02/ui/FormLoginEmailPassword02.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 FormLoginEmailPassword02: import("svelte").Component<Props, {}, "">;
+type FormLoginEmailPassword02 = ReturnType<typeof FormLoginEmailPassword02>;
+export default FormLoginEmailPassword02;

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

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  /**
+   * @component FormLoginPhonePassword02
+   * Variant 02 form with phone and password. Wrapper of FormLogin02 variant="PHONE".
+   *
+   * @example svelte
+   * <FormLoginPhonePassword02 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[];
+  };
+
+  let { onSubmit, forgetPassword, socialLogins = [] }: Props = $props();
+</script>
+
+<FormLogin02 variant="PHONE" {onSubmit} {forgetPassword} {socialLogins} />

package/dist/components/pages/security/login/02/ui/FormLoginPhonePassword02.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 FormLoginPhonePassword02: import("svelte").Component<Props, {}, "">;
+type FormLoginPhonePassword02 = ReturnType<typeof FormLoginPhonePassword02>;
+export default FormLoginPhonePassword02;

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

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  /**
+   * @component FormLoginUsernamePassword02
+   * Variant 02 form with username and password. Wrapper of FormLogin02 variant="USERNAME".
+   *
+   * @example svelte
+   * <FormLoginUsernamePassword02 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[];
+  };
+
+  let { onSubmit, forgetPassword, socialLogins = [] }: Props = $props();
+</script>
+
+<FormLogin02 variant="USERNAME" {onSubmit} {forgetPassword} {socialLogins} />

package/dist/components/pages/security/login/02/ui/FormLoginUsernamePassword02.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 FormLoginUsernamePassword02: import("svelte").Component<Props, {}, "">;
+type FormLoginUsernamePassword02 = ReturnType<typeof FormLoginUsernamePassword02>;
+export default FormLoginUsernamePassword02;

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

@@ -0,0 +1,111 @@
+<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 = [],
+    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/40"></div>
+  {:else}
+    <div class="absolute inset-0 bg-gradient"></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-xl md:text-2xl 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">
+            {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/02/ui/LeftHero02.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 LeftHero02: import("svelte").Component<$$ComponentProps, {}, "">;
+type LeftHero02 = ReturnType<typeof LeftHero02>;
+export default LeftHero02;