negodesign 0.0.73 → 0.0.75

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

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+  /**
+   * @component PageLogin03
+   * Variant 03 of the login page. Split layout with glass morphism: hero on the left, auth card on the right.
+   *
+   * @example svelte
+   * <PageLogin03 formType="USERNAME_PASSWORD" onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import AuthCard from "./LoginCard03.svelte";
+  import LeftHero from "./LeftHero03.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-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>

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

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

package/dist/components/pages/security/login/PageLogin.svelte

@@ -1,22 +1,30 @@
-<script lang="ts" module>
-  /**
-   * @component PageLogin
-   * Main login page. Routes to the specified layout variant.
-   *
-   * @example svelte
-   * <PageLogin varient="01" formType="EMAIL_PASSWORD" onSubmit={(cred) => login(cred)} />
-   */
-</script>
-
-<script lang="ts">
-  import type { PageLoginProps } from "./types";
-  import PageLogin01 from "./01/ui/PageLogin01.svelte";
-
-  type Props = {
-    variant?: 1;
-  };
-
-  let { ...props }: PageLoginProps & Props = $props();
-</script>
-
-<PageLogin01 {...props} />
+<script lang="ts" module>
+  /**
+   * @component PageLogin
+   * Main login page. Routes to the specified layout variant.
+   *
+   * @example svelte
+   * <PageLogin variant={3} formType="EMAIL_PASSWORD" onSubmit={(cred) => login(cred)} />
+   */
+</script>
+
+<script lang="ts">
+  import type { PageLoginProps } from "./types";
+  import PageLogin01 from "./01/ui/PageLogin01.svelte";
+  import PageLogin02 from "./02/ui/PageLogin02.svelte";
+  import PageLogin03 from "./03/ui/PageLogin03.svelte";
+
+  type Props = {
+    variant?: 1 | 2 | 3;
+  };
+
+  let { variant = 1, ...props }: PageLoginProps & Props = $props();
+</script>
+
+{#if variant === 3}
+  <PageLogin03 {...props} />
+{:else if variant === 2}
+  <PageLogin02 {...props} />
+{:else}
+  <PageLogin01 {...props} />
+{/if}

package/dist/components/pages/security/login/PageLogin.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { PageLoginProps } from "./types";
 type Props = {
-    variant?: 1;
+    variant?: 1 | 2 | 3;
 };
 type $$ComponentProps = PageLoginProps & Props;
 declare const PageLogin: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -1,16 +1,19 @@
 import type { Snippet } from "svelte";
+import type { IconSvgElement } from "@hugeicons/svelte";
 export type LoginFormType = "EMAIL_PASSWORD" | "PHONE_PASSWORD" | "USERNAME_PASSWORD";
 export type LoginCarouselItemType = "NUMBER" | "DOT" | "POINTER";
 export type LoginVariant = "EMAIL" | "USERNAME" | "PHONE";
+export type SocialProvider = "GOOGLE" | "FACEBOOK" | "LINKEDIN";
 export interface LoginCarouselItem {
     title: string;
     description: string;
     buttonText: string;
     buttonUrl?: string;
+    backgroundUrl?: string;
 }
 export interface LoginCarouselProps {
     items: LoginCarouselItem[];
-    varient: LoginCarouselItemType;
+    type: LoginCarouselItemType;
 }
 export type LoginRequestDto = {
     password: string;
@@ -20,9 +23,15 @@ export type LinkProps = {
     url?: string;
     onclick?: () => void;
 };
+export type SocialLoginItem = {
+    provider: SocialProvider;
+    icon?: IconSvgElement;
+    label?: string;
+    onclick?: () => void;
+};
 export type PageLoginProps = {
     carousel?: LoginCarouselItem[];
-    varient?: LoginCarouselItemType;
+    type?: LoginCarouselItemType;
     title?: string;
     children?: Snippet;
     formType?: LoginFormType;
@@ -30,4 +39,5 @@ export type PageLoginProps = {
     forgetPassword?: LinkProps;
     privacyPolicy?: LinkProps;
     termsOfService?: LinkProps;
+    socialLogins?: SocialLoginItem[];
 };

package/dist/components/pages/security/otp-verification/01/ui/FormOtpVerification.svelte

@@ -9,8 +9,8 @@
 </script>
 
 <script lang="ts">
-  import InputCodeOtp from "../../../../../core/form/ui/input-code-otp.svelte";
-  import ButtonSend from "../../../../../core/button/ButtonSend.svelte";
+  import InputCodeOtp from "../../../../../ui/form/ui/input-code-otp.svelte";
+  import ButtonSend from "../../../../../ui/button/ButtonSend.svelte";
   import { t } from "../../../../../../i18n";
   import type { OtpVerificationRequestDto } from "../../types";
 

package/dist/components/pages/security/otp-verification/01/ui/OtpVerificationCard.svelte

@@ -10,13 +10,13 @@
 
 <script lang="ts">
   import LanguageSwitcher from "../../../../../ui/language-switcher/language-switcher.svelte";
-  import ButtonBack from "../../../../../core/button/ButtonBack.svelte";
+  import ButtonBack from "../../../../../ui/button/ButtonBack.svelte";
   import type { Snippet } from "svelte";
   import { LightSwitch } from "../../../../../ui/light-switch";
   import { t } from "../../../../../../i18n";
   import type { OtpVerificationRequestDto } from "../../types";
   import FormOtpVerification from "./FormOtpVerification.svelte";
-  import TabUnderline from "../../../../../core/tabs/ui/tab-underline.svelte";
+  import TabUnderline from "../../../../../ui/tabs/ui/tab-underline.svelte";
 
   type Props = {
     otpLength?: number;

package/dist/components/pages/security/otp-verification/01/ui/PageOtpVerification01.svelte

@@ -10,7 +10,7 @@
 
 <script lang="ts">
   import OtpVerificationCard from "./OtpVerificationCard.svelte";
-  import LeftHero from "../../../../../core/panel/LeftHero.svelte";
+  import LeftHero from "../../../../../ui/panel/LeftHero.svelte";
   import type { PageOtpVerificationProps } from "../../types";
   import { t } from "../../../../../../i18n";
 
@@ -53,7 +53,7 @@
     </defs>
   </svg>
   <div class="hidden md:block md:w-8/12">
-    <LeftHero {title} varient={varient ?? "POINTER"} items={carouselItems} />
+    <LeftHero {title} type={varient ?? "POINTER"} items={carouselItems} />
   </div>
   <div class="w-full md:px-0 md:w-4/12 border-gray-900">
     {#if children}

package/dist/components/pages/security/reset-password/01/ui/FormResetPassword.svelte

@@ -9,10 +9,10 @@
 </script>
 
 <script lang="ts">
-  import InputCodeOtp from "../../../../../core/form/ui/input-code-otp.svelte";
-  import InputPassword from "../../../../../core/form/ui/input-password.svelte";
-  import InputPasswordConfirm from "../../../../../core/form/ui/input-password-confirm.svelte";
-  import ButtonSend from "../../../../../core/button/ButtonSend.svelte";
+  import InputCodeOtp from "../../../../../ui/form/ui/input-code-otp.svelte";
+  import InputPassword from "../../../../../ui/form/ui/input-password.svelte";
+  import InputPasswordConfirm from "../../../../../ui/form/ui/input-password-confirm.svelte";
+  import ButtonSend from "../../../../../ui/button/ButtonSend.svelte";
   import { t } from "../../../../../../i18n";
   import type { ResetPasswordRequestDto } from "../../types";
 

package/dist/components/pages/security/reset-password/01/ui/PageResetPassword01.svelte

@@ -10,7 +10,7 @@
 
 <script lang="ts">
   import ResetPasswordCard from "./ResetPasswordCard.svelte";
-  import LeftHero from "../../../../../core/panel/LeftHero.svelte";
+  import LeftHero from "../../../../../ui/panel/LeftHero.svelte";
   import type { PageResetPasswordProps } from "../../types";
   import { t } from "../../../../../../i18n";
 
@@ -53,7 +53,7 @@
     </defs>
   </svg>
   <div class="hidden md:block md:w-8/12">
-    <LeftHero {title} varient={varient ?? "POINTER"} items={carouselItems} />
+    <LeftHero {title} type={varient ?? "POINTER"} items={carouselItems} />
   </div>
   <div class="w-full md:px-0 md:w-4/12 border-gray-900">
     {#if children}

package/dist/components/pages/security/reset-password/01/ui/ResetPasswordCard.svelte

@@ -10,13 +10,13 @@
 
 <script lang="ts">
   import LanguageSwitcher from "../../../../../ui/language-switcher/language-switcher.svelte";
-  import ButtonBack from "../../../../../core/button/ButtonBack.svelte";
+  import ButtonBack from "../../../../../ui/button/ButtonBack.svelte";
   import type { Snippet } from "svelte";
   import { LightSwitch } from "../../../../../ui/light-switch";
   import { t } from "../../../../../../i18n";
   import type { ResetPasswordRequestDto } from "../../types";
   import FormResetPassword from "./FormResetPassword.svelte";
-  import TabUnderline from "../../../../../core/tabs/ui/tab-underline.svelte";
+  import TabUnderline from "../../../../../ui/tabs/ui/tab-underline.svelte";
 
   type Props = {
     otpLength?: number;

package/dist/components/ui/avatar/avatar-fallback.svelte

@@ -1,30 +1,30 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { getAvatarContext } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-
-	const ctx = getAvatarContext();
-
-	let show = $derived(!ctx.src || ctx.imageError);
-</script>
-
-{#if show}
-	<div
-		bind:this={ref}
-		data-slot="avatar-fallback"
-		class={cn(
-			"bg-muted flex size-full items-center justify-center rounded-full fill-foreground text-sm select-none [&>svg]:size-full",
-			className
-		)}
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getAvatarContext } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const ctx = getAvatarContext();
+
+	let show = $derived(!ctx.src || ctx.imageError);
+</script>
+
+{#if show}
+	<div
+		bind:this={ref}
+		data-slot="avatar-fallback"
+		class={cn(
+			"bg-muted flex size-full items-center justify-center rounded-full fill-foreground text-sm select-none [&>svg]:size-full",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
 {/if}

package/dist/components/ui/avatar/avatar-image.svelte

@@ -1,39 +1,39 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLImgAttributes } from "svelte/elements";
-	import { getAvatarContext } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		src,
-		srcset,
-		alt = "",
-		class: className,
-		...restProps
-	}: WithElementRef<HTMLImgAttributes> = $props();
-
-	const ctx = getAvatarContext();
-
-	$effect(() => {
-		if (src) ctx.src = src;
-		if (srcset) ctx.srcset = srcset;
-	});
-</script>
-
-{#if src || ctx.src}
-	<img
-		bind:this={ref}
-		data-slot="avatar-image"
-		src={src ?? ctx.src}
-		srcset={srcset ?? ctx.srcset}
-		{alt}
-		onerror={() => {
-			ctx.imageError = true;
-		}}
-		onload={() => {
-			ctx.imageError = false;
-		}}
-		class={cn("aspect-square size-full rounded-full object-cover", className)}
-		{...restProps}
-	/>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLImgAttributes } from "svelte/elements";
+	import { getAvatarContext } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		src,
+		srcset,
+		alt = "",
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLImgAttributes> = $props();
+
+	const ctx = getAvatarContext();
+
+	$effect(() => {
+		if (src) ctx.src = src;
+		if (srcset) ctx.srcset = srcset;
+	});
+</script>
+
+{#if src || ctx.src}
+	<img
+		bind:this={ref}
+		data-slot="avatar-image"
+		src={src ?? ctx.src}
+		srcset={srcset ?? ctx.srcset}
+		{alt}
+		onerror={() => {
+			ctx.imageError = true;
+		}}
+		onload={() => {
+			ctx.imageError = false;
+		}}
+		class={cn("aspect-square size-full rounded-full object-cover", className)}
+		{...restProps}
+	/>
 {/if}

package/dist/components/ui/avatar/avatar.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { setAvatarContext } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		size = "default",
-		src,
-		srcset,
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		size?: "default" | "sm" | "lg";
-		src?: string;
-		srcset?: string;
-	} = $props();
-
-	// svelte-ignore state_referenced_locally
-	const ctx = setAvatarContext(src, srcset);
-
-	$effect(() => {
-		if (src) ctx.src = src;
-		if (srcset) ctx.srcset = srcset;
-	});
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="avatar"
-	data-size={size}
-	class={cn(
-		"group/avatar relative flex size-10 shrink-0 select-none overflow-hidden rounded-full",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { setAvatarContext } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		size = "default",
+		src,
+		srcset,
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		size?: "default" | "sm" | "lg";
+		src?: string;
+		srcset?: string;
+	} = $props();
+
+	// svelte-ignore state_referenced_locally
+	const ctx = setAvatarContext(src, srcset);
+
+	$effect(() => {
+		if (src) ctx.src = src;
+		if (srcset) ctx.srcset = srcset;
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar"
+	data-size={size}
+	class={cn(
+		"group/avatar relative flex size-10 shrink-0 select-none overflow-hidden rounded-full",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>

package/dist/components/ui/badge/badge.svelte

@@ -1,47 +1,47 @@
-<script lang="ts" module>
-	import { cn } from "../../../utils.js";
-
-	const badgeBase =
-		"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none";
-
-	const badgeVariantClasses = {
-		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-		destructive:
-			"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
-		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-		link: "text-primary underline-offset-4 hover:underline",
-	} as const;
-
-	export type BadgeVariant = keyof typeof badgeVariantClasses;
-
-	export function badgeVariants(opts: { variant?: BadgeVariant } = {}): string {
-		const variant = opts.variant ?? "default";
-		return cn(badgeBase, badgeVariantClasses[variant]);
-	}
-</script>
-
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		variant = "default",
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		variant?: BadgeVariant;
-	} = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="badge"
-	class={cn(badgeVariants({ variant }), className)}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts" module>
+	import { cn } from "../../../utils.js";
+
+	const badgeBase =
+		"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none";
+
+	const badgeVariantClasses = {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive:
+			"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline",
+	} as const;
+
+	export type BadgeVariant = keyof typeof badgeVariantClasses;
+
+	export function badgeVariants(opts: { variant?: BadgeVariant } = {}): string {
+		const variant = opts.variant ?? "default";
+		return cn(badgeBase, badgeVariantClasses[variant]);
+	}
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="badge"
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>