negodesign 0.0.75 → 0.0.77

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/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/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;

package/dist/components/pages/security/register/02/ui/PageRegister02.svelte

@@ -0,0 +1,76 @@
+<script lang="ts" module>
+  /**
+   * @component PageRegister02
+   * Variant 02 of the register page. Split layout: hero image on the left, auth card on the right.
+   *
+   * @example svelte
+   * <PageRegister02 fields={{ isName: true, isEmail: true }} onSubmit={(data) => register(data)} />
+   */
+</script>
+
+<script lang="ts">
+  import AuthCard from "./RegisterCard02.svelte";
+  import PageAuth02 from "../../../auth/PageAuth02.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>
+
+<PageAuth02 {title} {type} carousel={carouselItems}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <AuthCard
+      {fields}
+      {onSubmit}
+      {login}
+      {privacyPolicy}
+      {termsOfService}
+      {socialLogins}
+    />
+  {/if}
+</PageAuth02>

package/dist/components/pages/security/register/02/ui/PageRegister02.svelte.d.ts

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