negodesign 0.0.74 → 0.0.76

package/dist/components/pages/security/auth/PageAuth01.svelte

@@ -0,0 +1,65 @@
+<script lang="ts" module>
+  /**
+   * @component PageAuth01
+   * Shared layout for auth pages (login/register) variant 01.
+   * Split layout: hero on the left, auth card on the right with grid pattern.
+   */
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import LeftHero from "../../../ui/panel/LeftHero.svelte";
+
+  type CarouselItem = {
+    title: string
+    description: string
+    buttonText: string
+    buttonUrl?: string
+    backgroundUrl?: string
+  };
+
+  type Props = {
+    title?: string
+    type?: "NUMBER" | "DOT" | "POINTER"
+    carousel?: CarouselItem[]
+    children?: Snippet
+  };
+
+  let {
+    title,
+    type,
+    carousel = [],
+    children,
+  }: Props = $props();
+</script>
+
+<main class="h-screen w-screen flex items-center">
+  <svg width="0" height="0" class="absolute">
+    <defs>
+      <clipPath id="grid-curve-clip" clipPathUnits="objectBoundingBox">
+        <path d="M0.35,0 L1,0 C0.85,0.3 1,0.6 0.4,1 L1,1 Z" />
+      </clipPath>
+    </defs>
+  </svg>
+  <div class="hidden md:block md:w-8/12">
+    <LeftHero {title} type={type ?? "POINTER"} items={carousel} />
+  </div>
+  <div class="w-full md:px-0 md:w-4/12 border-gray-900">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</main>
+
+<style>
+  :global(.grid-pattern) {
+    background-size: 40px 40px;
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px
+      ),
+      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+    clip-path: url(#grid-curve-clip);
+  }
+</style>

package/dist/components/pages/security/auth/PageAuth01.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+type CarouselItem = {
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonUrl?: string;
+    backgroundUrl?: string;
+};
+type Props = {
+    title?: string;
+    type?: "NUMBER" | "DOT" | "POINTER";
+    carousel?: CarouselItem[];
+    children?: Snippet;
+};
+declare const PageAuth01: import("svelte").Component<Props, {}, "">;
+type PageAuth01 = ReturnType<typeof PageAuth01>;
+export default PageAuth01;

package/dist/components/pages/security/auth/PageAuth02.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+  /**
+   * @component PageAuth02
+   * Shared layout for auth pages (login/register) variant 02.
+   * Split layout: hero image on the left, auth card on the right.
+   */
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import LeftHero from "../login/02/ui/LeftHero02.svelte";
+
+  type CarouselItem = {
+    title: string
+    description: string
+    buttonText: string
+    buttonUrl?: string
+    backgroundUrl?: string
+  };
+
+  type Props = {
+    title?: string
+    type?: "NUMBER" | "DOT" | "POINTER"
+    carousel?: CarouselItem[]
+    children?: Snippet
+  };
+
+  let {
+    title,
+    type,
+    carousel = [],
+    children,
+  }: Props = $props();
+</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={carousel} />
+  </div>
+  <div class="w-full md:w-5/12 flex flex-col h-screen">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</main>

package/dist/components/pages/security/auth/PageAuth02.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+type CarouselItem = {
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonUrl?: string;
+    backgroundUrl?: string;
+};
+type Props = {
+    title?: string;
+    type?: "NUMBER" | "DOT" | "POINTER";
+    carousel?: CarouselItem[];
+    children?: Snippet;
+};
+declare const PageAuth02: import("svelte").Component<Props, {}, "">;
+type PageAuth02 = ReturnType<typeof PageAuth02>;
+export default PageAuth02;

package/dist/components/pages/security/auth/PageAuth03.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+  /**
+   * @component PageAuth03
+   * Shared layout for auth pages (login/register) variant 03.
+   * Split layout with glass morphism: hero on the left, auth card on the right.
+   */
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import LeftHero from "../login/03/ui/LeftHero03.svelte";
+
+  type CarouselItem = {
+    title: string
+    description: string
+    buttonText: string
+    buttonUrl?: string
+    backgroundUrl?: string
+  };
+
+  type Props = {
+    title?: string
+    type?: "NUMBER" | "DOT" | "POINTER"
+    carousel?: CarouselItem[]
+    children?: Snippet
+  };
+
+  let {
+    title,
+    type,
+    carousel = [],
+    children,
+  }: Props = $props();
+</script>
+
+<main class="h-screen w-screen flex items-center justify-center">
+  <div class="hidden md:flex w-1/2 h-screen">
+    <LeftHero {title} type={type ?? "DOT"} items={carousel} />
+  </div>
+  <div class="w-full md:w-1/2 flex flex-col h-screen">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</main>

package/dist/components/pages/security/auth/PageAuth03.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+type CarouselItem = {
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonUrl?: string;
+    backgroundUrl?: string;
+};
+type Props = {
+    title?: string;
+    type?: "NUMBER" | "DOT" | "POINTER";
+    carousel?: CarouselItem[];
+    children?: Snippet;
+};
+declare const PageAuth03: import("svelte").Component<Props, {}, "">;
+type PageAuth03 = ReturnType<typeof PageAuth03>;
+export default PageAuth03;

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

@@ -10,7 +10,7 @@
 
 <script lang="ts">
   import AuthCard from "./LoginCard.svelte";
-  import LeftHero from "../../../../../ui/panel/LeftHero.svelte";
+  import PageAuth01 from "../../../auth/PageAuth01.svelte";
   import type { PageLoginProps } from "../../types";
   import { t } from "../../../../../../i18n";
 
@@ -48,42 +48,17 @@
   const carouselItems = $derived(carousel ?? defaultCarousel);
 </script>
 
-<main class="h-screen w-screen flex items-center">
-  <svg width="0" height="0" class="absolute">
-    <defs>
-      <clipPath id="grid-curve-clip" clipPathUnits="objectBoundingBox">
-        <path d="M0.35,0 L1,0 C0.85,0.3 1,0.6 0.4,1 L1,1 Z" />
-      </clipPath>
-    </defs>
-  </svg>
-  <div class="hidden md:block md:w-8/12">
-    <LeftHero {title} type={type ?? "POINTER"} items={carouselItems} />
-  </div>
-  <div class="w-full md:px-0 md:w-4/12 border-gray-900">
-    {#if children}
-      {@render children()}
-    {:else}
-      <AuthCard
-        {formType}
-        {onSubmit}
-        {forgetPassword}
-        {privacyPolicy}
-        {termsOfService}
-        {socialLogins}
-      />
-    {/if}
-  </div>
-</main>
-
-<style>
-  :global(.grid-pattern) {
-    background-size: 40px 40px;
-    background-image: linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0.1) 1px,
-        transparent 1px
-      ),
-      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
-    clip-path: url(#grid-curve-clip);
-  }
-</style>
+<PageAuth01 {title} {type} carousel={carouselItems}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <AuthCard
+      {formType}
+      {onSubmit}
+      {forgetPassword}
+      {privacyPolicy}
+      {termsOfService}
+      {socialLogins}
+    />
+  {/if}
+</PageAuth01>

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

@@ -12,7 +12,12 @@
   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 type {
+    LoginFormType,
+    LoginRequestDto,
+    LinkProps,
+    SocialLoginItem,
+  } from "../../types";
   import FormLoginUsernamePassword02 from "./FormLoginUsernamePassword02.svelte";
   import FormLoginEmailPassword02 from "./FormLoginEmailPassword02.svelte";
   import FormLoginPhonePassword02 from "./FormLoginPhonePassword02.svelte";
@@ -38,7 +43,7 @@
   }: Props = $props();
 </script>
 
-<div class="flex-1 flex flex-col justify-between h-full bg-white">
+<div class="flex-1 flex flex-col justify-between h-full">
   <nav class="flex justify-end p-5">
     <div class="flex gap-2">
       <LightSwitch />
@@ -49,7 +54,9 @@
   <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>
+        <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>
@@ -58,7 +65,11 @@
       {#if formType == "EMAIL_PASSWORD"}
         <FormLoginEmailPassword02 {onSubmit} {forgetPassword} {socialLogins} />
       {:else if formType == "USERNAME_PASSWORD"}
-        <FormLoginUsernamePassword02 {onSubmit} {forgetPassword} {socialLogins} />
+        <FormLoginUsernamePassword02
+          {onSubmit}
+          {forgetPassword}
+          {socialLogins}
+        />
       {:else if formType == "PHONE_PASSWORD"}
         <FormLoginPhonePassword02 {onSubmit} {forgetPassword} {socialLogins} />
       {/if}

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

@@ -10,7 +10,7 @@
 
 <script lang="ts">
   import AuthCard from "./LoginCard02.svelte";
-  import LeftHero from "./LeftHero02.svelte";
+  import PageAuth02 from "../../../auth/PageAuth02.svelte";
   import type { PageLoginProps } from "../../types";
   import { t } from "../../../../../../i18n";
 
@@ -48,22 +48,17 @@
   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>
+<PageAuth02 {title} {type} carousel={carouselItems}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <AuthCard
+      {formType}
+      {onSubmit}
+      {forgetPassword}
+      {privacyPolicy}
+      {termsOfService}
+      {socialLogins}
+    />
+  {/if}
+</PageAuth02>

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

@@ -54,9 +54,7 @@
   <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"
-        >
+        <div class="w-12 h-12 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">
@@ -79,21 +77,41 @@
         <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 class="flex flex-col space-y-2">
+        <div class="text-center text-xs 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>
+
+        <p class="text-center text-sm">
+          {$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>
 
   <div class="px-8 pb-8">
-    <div class="flex items-center gap-3 p-4 bg-gray-50 rounded-xl">
+    <div class="flex items-center gap-3 p-4 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"
@@ -106,10 +124,10 @@
         ></div>
       </div>
       <div>
-        <p class="text-sm font-semibold text-gray-900">
+        <p class="text-sm font-semibold">
           {$t("text.login.users.count")}
         </p>
-        <p class="text-xs text-gray-500">{$t("text.login.users.worldwide")}</p>
+        <p class="text-xs">{$t("text.login.users.worldwide")}</p>
       </div>
     </div>
   </div>

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

@@ -10,7 +10,7 @@
 
 <script lang="ts">
   import AuthCard from "./LoginCard03.svelte";
-  import LeftHero from "./LeftHero03.svelte";
+  import PageAuth03 from "../../../auth/PageAuth03.svelte";
   import type { PageLoginProps } from "../../types";
   import { t } from "../../../../../../i18n";
 
@@ -48,22 +48,17 @@
   const carouselItems = $derived(carousel ?? defaultCarousel);
 </script>
 
-<main class="h-screen w-screen flex items-center justify-center">
-  <div class="hidden md:flex w-1/2 h-screen">
-    <LeftHero {title} type={type ?? "DOT"} items={carouselItems} />
-  </div>
-  <div class="w-full md:w-1/2 flex flex-col h-screen">
-    {#if children}
-      {@render children()}
-    {:else}
-      <AuthCard
-        {formType}
-        {onSubmit}
-        {forgetPassword}
-        {privacyPolicy}
-        {termsOfService}
-        {socialLogins}
-      />
-    {/if}
-  </div>
-</main>
+<PageAuth03 {title} {type} carousel={carouselItems}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <AuthCard
+      {formType}
+      {onSubmit}
+      {forgetPassword}
+      {privacyPolicy}
+      {termsOfService}
+      {socialLogins}
+    />
+  {/if}
+</PageAuth03>

package/dist/components/pages/security/register/01/ui/PageRegister01.svelte

@@ -0,0 +1,64 @@
+<script lang="ts" module>
+  /**
+   * @component PageRegister01
+   * Variant 01 of the register page. Split layout: hero on the left, auth card on the right.
+   *
+   * @example svelte
+   * <PageRegister01 fields={{ isName: true, isEmail: true }} onSubmit={(data) => register(data)} />
+   */
+</script>
+
+<script lang="ts">
+  import AuthCard from "./RegisterCard.svelte";
+  import PageAuth01 from "../../../auth/PageAuth01.svelte";
+  import type { PageRegisterProps } from "../types";
+  import { t } from "../../../../../../i18n";
+
+  let {
+    carousel,
+    type,
+    title,
+    fields,
+    children,
+    onSubmit,
+    login,
+    privacyPolicy,
+    termsOfService,
+    socialLogins = [],
+  }: PageRegisterProps = $props();
+
+  const defaultCarousel = $derived([
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.register.slide1.title") ?? $t("carousel.login.slide1.title"),
+      description: $t("carousel.register.slide1.description") ?? $t("carousel.login.slide1.description"),
+    },
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.register.slide2.title") ?? $t("carousel.login.slide2.title"),
+      description: $t("carousel.register.slide2.description") ?? $t("carousel.login.slide2.description"),
+    },
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.register.slide3.title") ?? $t("carousel.login.slide3.title"),
+      description: $t("carousel.register.slide3.description") ?? $t("carousel.login.slide3.description"),
+    },
+  ]);
+
+  const carouselItems = $derived(carousel ?? defaultCarousel);
+</script>
+
+<PageAuth01 {title} {type} carousel={carouselItems}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <AuthCard
+      {fields}
+      {onSubmit}
+      {login}
+      {privacyPolicy}
+      {termsOfService}
+      {socialLogins}
+    />
+  {/if}
+</PageAuth01>

package/dist/components/pages/security/register/01/ui/PageRegister01.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PageRegister01: import("svelte").Component<PageRegisterProps, {}, "">;
+type PageRegister01 = ReturnType<typeof PageRegister01>;
+export default PageRegister01;

package/dist/components/pages/security/register/01/ui/RegisterCard.svelte

@@ -0,0 +1,100 @@
+<script lang="ts" module>
+  /**
+   * @component RegisterCard
+   * Authentication card for registration with back button, light switch, and link footer.
+   *
+   * @example svelte
+   * <RegisterCard fields={{ isName: true, isEmail: true, isPassword: true }} onSubmit={(data) => register(data)} />
+   */
+</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 ButtonBack from "../../../../../ui/button/ButtonBack.svelte";
+  import LabelOr from "../../../../../ui/label/core/LabelOr.svelte";
+  import { LightSwitch } from "../../../../../ui/light-switch";
+  import { t } from "../../../../../../i18n";
+  import type {
+    RegisterFormFields,
+    RegisterRequestDto,
+    LinkProps,
+    SocialLoginItem,
+  } from "../../types";
+  import SocialLogin from "../../../../../ui/social-login/social-login.svelte";
+  import FormRegister from "../../FormRegister.svelte";
+
+  type Props = {
+    fields?: RegisterFormFields;
+    onSubmit?: (data: RegisterRequestDto) => void;
+    login?: LinkProps;
+    privacyPolicy?: LinkProps;
+    termsOfService?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+  };
+
+  let {
+    fields,
+    onSubmit,
+    login,
+    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]"
+  >
+    <div class="space-y-6">
+      <div>
+        <h1 class="text-2xl font-bold">{$t("label.register")}</h1>
+        <p class="text-sm text-muted-foreground">{$t("text.register")}</p>
+      </div>
+
+      <FormRegister {fields} {onSubmit} />
+
+      {#if socialLogins.length > 0}
+        <SocialLogin items={socialLogins} />
+      {/if}
+
+      <p class="text-center text-sm">
+        {$t("text.login.has-account")}
+        <a
+          href={login?.url ?? "/login"}
+          onclick={login?.onclick}
+          class="font-semibold text-primary hover:underline"
+        >
+          {$t("text.login.sign-in")}
+        </a>
+      </p>
+    </div>
+  </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/register/01/ui/RegisterCard.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { RegisterFormFields, RegisterRequestDto, LinkProps, SocialLoginItem } from "../../types";
+type Props = {
+    fields?: RegisterFormFields;
+    onSubmit?: (data: RegisterRequestDto) => void;
+    login?: LinkProps;
+    privacyPolicy?: LinkProps;
+    termsOfService?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+};
+declare const RegisterCard: import("svelte").Component<Props, {}, "">;
+type RegisterCard = ReturnType<typeof RegisterCard>;
+export default RegisterCard;