negodesign 0.0.75 → 0.0.77

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

@@ -0,0 +1,98 @@
+<script lang="ts" module>
+  /**
+   * @component RegisterCard02
+   * Variant 02 authentication card for registration with welcome header, social login, and form.
+   *
+   * @example svelte
+   * <RegisterCard02 fields={{ isName: true, isEmail: true }} onSubmit={(data) => register(data)} />
+   */
+</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 {
+    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-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="text-center space-y-2">
+        <h1 class="text-2xl font-bold text-gray-900">
+          {$t("text.register.welcome") ?? $t("text.login.welcome")}
+        </h1>
+        <p class="text-sm text-gray-500">
+          {$t("text.register.continue") ?? $t("text.login.continue")}
+        </p>
+      </div>
+
+      <FormRegister {fields} {onSubmit} />
+
+      {#if socialLogins.length > 0}
+        <SocialLogin items={socialLogins} />
+      {/if}
+
+      <p class="text-center text-sm text-gray-600">
+        {$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 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/register/02/ui/RegisterCard02.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 RegisterCard02: import("svelte").Component<Props, {}, "">;
+type RegisterCard02 = ReturnType<typeof RegisterCard02>;
+export default RegisterCard02;

package/dist/components/pages/security/register/03/ui/PageRegister03.svelte

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

package/dist/components/pages/security/register/03/ui/PageRegister03.svelte.d.ts

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

package/dist/components/pages/security/register/03/ui/RegisterCard03.svelte

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+  /**
+   * @component RegisterCard03
+   * Variant 03 authentication card for registration with glass morphism design and social login.
+   *
+   * @example svelte
+   * <RegisterCard03 fields={{ isName: true, isEmail: true }} onSubmit={(data) => register(data)} />
+   */
+</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 {
+    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-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 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.register.welcome") ?? $t("text.login.welcome")}
+        </h1>
+        <p class="text-sm text-gray-500">
+          {$t("text.register.subtitle") ?? $t("text.login.subtitle")}
+        </p>
+      </div>
+
+      <FormRegister {fields} {onSubmit} />
+
+      {#if socialLogins.length > 0}
+        <SocialLogin items={socialLogins} />
+      {/if}
+
+      <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.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>
+  </div>
+</div>

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

package/dist/components/pages/security/register/FormRegister.svelte

@@ -0,0 +1,120 @@
+<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 InputBase from "../../../ui/form/ui/input-base.svelte";
+  import InputPhone from "../../../ui/form/ui/input-phone.svelte";
+  import ButtonLogin from "../../../ui/button/ButtonLogin.svelte";
+  import { t } from "../../../../i18n";
+  import type { RegisterFormFields, RegisterRequestDto } from "./types";
+
+  type Props = {
+    fields?: RegisterFormFields;
+    onSubmit?: (data: RegisterRequestDto) => void;
+  };
+
+  let {
+    fields = {},
+    onSubmit,
+  }: Props = $props();
+
+  let name = $state("");
+  let email = $state("");
+  let password = $state("");
+  let confirmPassword = $state("");
+  let birthday = $state("");
+  let gender = $state("");
+  let phone = $state("");
+
+  const {
+    isName = false,
+    isEmail = true,
+    isPassword = true,
+    isConfirmPassword = true,
+    isBirthday = false,
+    isGender = false,
+    isPhone = false,
+  } = fields;
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    onSubmit?.({
+      name: isName ? name : undefined,
+      email,
+      password: isPassword ? password : undefined,
+      confirmPassword: isConfirmPassword ? confirmPassword : undefined,
+      birthday: isBirthday ? birthday : undefined,
+      gender: isGender ? gender : undefined,
+      phone: isPhone ? phone : undefined,
+    });
+  }
+</script>
+
+<form class="space-y-4" onsubmit={handleSubmit}>
+  <p class="text-[13px] py-3">{$t("text.register")}</p>
+
+  {#if isName}
+    <div class="space-y-1">
+      <InputBase
+        type="text"
+        label={$t("input.name.label")}
+        placeholder={$t("input.name.placeholder")}
+        isLabel
+        isIcon
+        bind:value={name}
+      />
+    </div>
+  {/if}
+
+  {#if isEmail}
+    <div class="space-y-1">
+      <InputEmail bind:value={email} />
+    </div>
+  {/if}
+
+  {#if isPhone}
+    <div class="space-y-1">
+      <InputPhone bind:value={phone} />
+    </div>
+  {/if}
+
+  {#if isBirthday}
+    <div class="space-y-1">
+      <InputBase
+        type="date"
+        label={$t("input.birthday.label")}
+        placeholder={$t("input.birthday.placeholder")}
+        isLabel
+        isIcon
+        bind:value={birthday}
+      />
+    </div>
+  {/if}
+
+  {#if isGender}
+    <div class="space-y-1">
+      <InputBase
+        type="text"
+        label={$t("input.gender.label")}
+        placeholder={$t("input.gender.placeholder")}
+        isLabel
+        isIcon
+        bind:value={gender}
+      />
+    </div>
+  {/if}
+
+  {#if isPassword}
+    <div class="space-y-1">
+      <InputPassword bind:value={password} />
+    </div>
+  {/if}
+
+  {#if isConfirmPassword}
+    <div class="space-y-1">
+      <InputPasswordConfirm bind:value={confirmPassword} />
+    </div>
+  {/if}
+
+  <ButtonLogin />
+</form>

package/dist/components/pages/security/register/FormRegister.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { RegisterFormFields, RegisterRequestDto } from "./types";
+type Props = {
+    fields?: RegisterFormFields;
+    onSubmit?: (data: RegisterRequestDto) => void;
+};
+declare const FormRegister: import("svelte").Component<Props, {}, "">;
+type FormRegister = ReturnType<typeof FormRegister>;
+export default FormRegister;

package/dist/components/pages/security/register/PageRegister.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  /**
+   * @component PageRegister
+   * Main register page. Routes to the specified layout variant.
+   *
+   * @example svelte
+   * <PageRegister variant={1} fields={{ isName: true, isEmail: true }} onSubmit={(data) => register(data)} />
+   */
+</script>
+
+<script lang="ts">
+  import type { PageRegisterProps } from "./types";
+  import PageRegister01 from "./01/ui/PageRegister01.svelte";
+  import PageRegister02 from "./02/ui/PageRegister02.svelte";
+  import PageRegister03 from "./03/ui/PageRegister03.svelte";
+
+  type Props = {
+    variant?: 1 | 2 | 3;
+  };
+
+  let { variant = 1, ...props }: PageRegisterProps & Props = $props();
+</script>
+
+{#if variant === 3}
+  <PageRegister03 {...props} />
+{:else if variant === 2}
+  <PageRegister02 {...props} />
+{:else}
+  <PageRegister01 {...props} />
+{/if}

package/dist/components/pages/security/register/PageRegister.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PageRegisterProps } from "./types";
+type Props = {
+    variant?: 1 | 2 | 3;
+};
+type $$ComponentProps = PageRegisterProps & Props;
+declare const PageRegister: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageRegister = ReturnType<typeof PageRegister>;
+export default PageRegister;

package/dist/components/pages/security/register/types.d.ts

@@ -0,0 +1,51 @@
+import type { Snippet } from "svelte";
+import type { IconSvgElement } from "@hugeicons/svelte";
+export type RegisterCarouselItemType = "NUMBER" | "DOT" | "POINTER";
+export type SocialProvider = "GOOGLE" | "FACEBOOK" | "LINKEDIN";
+export interface RegisterCarouselItem {
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonUrl?: string;
+    backgroundUrl?: string;
+}
+export type LinkProps = {
+    url?: string;
+    onclick?: () => void;
+};
+export type SocialLoginItem = {
+    provider: SocialProvider;
+    icon?: IconSvgElement;
+    label?: string;
+    onclick?: () => void;
+};
+export type RegisterFormFields = {
+    isName?: boolean;
+    isEmail?: boolean;
+    isPassword?: boolean;
+    isConfirmPassword?: boolean;
+    isBirthday?: boolean;
+    isGender?: boolean;
+    isPhone?: boolean;
+};
+export type RegisterRequestDto = {
+    name?: string;
+    email: string;
+    password?: string;
+    confirmPassword?: string;
+    birthday?: string;
+    gender?: string;
+    phone?: string;
+};
+export type PageRegisterProps = {
+    carousel?: RegisterCarouselItem[];
+    type?: RegisterCarouselItemType;
+    title?: string;
+    children?: Snippet;
+    fields?: RegisterFormFields;
+    onSubmit?: (data: RegisterRequestDto) => void;
+    login?: LinkProps;
+    privacyPolicy?: LinkProps;
+    termsOfService?: LinkProps;
+    socialLogins?: SocialLoginItem[];
+};

package/dist/components/pages/security/register/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/modal/core/types.d.ts

@@ -71,12 +71,14 @@ export type ModelGridCard = {
  * Cada item representa uma plataforma de redes sociais para partilhar conteúdo.
  * @property name - Nome da rede social (ex: "Facebook", "Twitter").
  * @property icon - Ícone da rede social (string CSS ou HugeIcons).
+ * @property img - URL da imagem/imagem de marca da rede social.
  * @property color - Cor da rede social (hex, rgb, etc.).
  * @property url - URL de partilha da rede social.
  */
 export type ModelSocialShare = {
     name: string;
-    icon: string | IconSvgElement;
+    icon?: string | IconSvgElement;
+    img?: string;
     color?: string;
     url?: string;
 };