negodesign 0.0.1 → 0.0.2

package/dist/components/pages/login/admin/01/ui/AuthCard.svelte

@@ -1,58 +1,84 @@
-<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 FormRegister from "./FormRegister.svelte";
-  import FormLogin from "./FormLogin.svelte";
-  import { LightSwitch } from "../../../../../ui/light-switch";
-  import { t } from "../../../../../../i18n";
-</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,
-        },
-        // {
-        //   item: { label: $t("label.register"), value: "register" },
-        //   children: registerSnippet,
-        // },
-      ]}
-    />
-
-    {#snippet loginSnippet()}
-      <FormLogin />
-    {/snippet}
-
-    <!-- {#snippet registerSnippet()}
-      <FormRegister />
-    {/snippet} -->
-  </div>
-
-  <!-- Footer Terms -->
-  <div
-    class="text-[11px] text-slate-400 py-2 flex justify-center gap-2 bg-background"
-  >
-    <LinkPrivacyPolity />
-    <LabelOr />
-    <LinkTermsOfService />
-  </div>
-</div>
+<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 FormRegister from "./FormRegister.svelte";
+  import type { Snippet } from "svelte";
+  import { LightSwitch } from "../../../../../ui/light-switch";
+  import { t } from "../../../../../../i18n";
+  import type { AuthFormType, Credential, LinkProps } from "../data/page-props";
+  import FormLoginEmailPassword from "./FormLoginEmailPassword.svelte";
+  import FormLoginUsernamePassword from "./FormLoginUsernamePassword.svelte";
+  import FormLoginPhonePassword from "./FormLoginPhonePassword.svelte";
+
+  type Props = {
+    formType?: AuthFormType;
+    onSubmit?: (credential: Credential) => void;
+    register?: Snippet;
+    privacyPolicy?: LinkProps;
+    termsOfService?: LinkProps;
+  };
+
+  let { formType, onSubmit, register, 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} />
+      {:else if formType == "USERNAME_PASSWORD"}
+        <FormLoginUsernamePassword {onSubmit} />
+      {:else if formType == "PHONE_PASSWORD"}
+        <FormLoginPhonePassword {onSubmit} />
+      {/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/login/admin/01/ui/AuthCard.svelte.d.ts

@@ -1,18 +1,12 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AuthCard: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AuthCard = InstanceType<typeof AuthCard>;
+import type { Snippet } from "svelte";
+import type { AuthFormType, Credential, LinkProps } from "../data/page-props";
+type Props = {
+    formType?: AuthFormType;
+    onSubmit?: (credential: Credential) => void;
+    register?: Snippet;
+    privacyPolicy?: LinkProps;
+    termsOfService?: LinkProps;
+};
+declare const AuthCard: import("svelte").Component<Props, {}, "">;
+type AuthCard = ReturnType<typeof AuthCard>;
 export default AuthCard;

package/dist/components/pages/login/admin/01/ui/FormLogin.svelte

@@ -1,30 +1,50 @@
 <script lang="ts">
   import InputEmail from "../../../../../core/form/ui/input-email.svelte";
+  import InputUsername from "../../../../../core/form/ui/input-username.svelte";
+  import InputPhone from "../../../../../core/form/ui/input-phone.svelte";
   import InputPassword from "../../../../../core/form/ui/input-password.svelte";
   import ButtonLogin from "../../../../../core/button/ButtonLogin.svelte";
   import LinkForgetPassword from "../../../../../core/link/link-forget-password.svelte";
   import LabelOr from "../../../../../core/label/LabelOr.svelte";
   import ButtonLoginWith from "../../../../../core/button/ButtonLoginWith.svelte";
   import { t } from "../../../../../../i18n";
+  import type { Credential, LoginVariant } from "../data/page-props";
 
-  let email = $state("");
+  type Props = {
+    variant: LoginVariant;
+    onSubmit?: (credential: Credential) => void;
+  };
+
+  let { variant, onSubmit }: 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={(e) => e.preventDefault()}>
+<form class="w-full space-y-4" onsubmit={handleSubmit}>
   <p class="text-[13px] py-3">{$t("text.login")}</p>
 
   <div class="space-y-1">
-    <InputEmail value={email} />
+    {#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 relative">
-    <InputPassword value={password} />
+    <InputPassword bind:value={password} />
     <LinkForgetPassword />
   </div>
 
   <div class="flex flex-col gap-1">
-    <ButtonLogin />
+    <ButtonLogin type="submit" />
     <LabelOr variant="SEPARATOR" />
     <ButtonLoginWith icon="GOOGLE" />
   </div>

package/dist/components/pages/login/admin/01/ui/FormLogin.svelte.d.ts

@@ -1,3 +1,8 @@
-declare const FormLogin: import("svelte").Component<Record<string, never>, {}, "">;
+import type { Credential, LoginVariant } from "../data/page-props";
+type Props = {
+    variant: LoginVariant;
+    onSubmit?: (credential: Credential) => void;
+};
+declare const FormLogin: import("svelte").Component<Props, {}, "">;
 type FormLogin = ReturnType<typeof FormLogin>;
 export default FormLogin;

package/dist/components/pages/login/admin/01/ui/FormLoginEmailPassword.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import FormLogin from "./FormLogin.svelte";
+  import type { Credential } from "../data/page-props";
+
+  type Props = {
+    onSubmit?: (credential: Credential) => void;
+  };
+
+  let { onSubmit }: Props = $props();
+</script>
+
+<FormLogin variant="EMAIL" {onSubmit} />

package/dist/components/pages/login/admin/01/ui/FormLoginEmailPassword.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Credential } from "../data/page-props";
+type Props = {
+    onSubmit?: (credential: Credential) => void;
+};
+declare const FormLoginEmailPassword: import("svelte").Component<Props, {}, "">;
+type FormLoginEmailPassword = ReturnType<typeof FormLoginEmailPassword>;
+export default FormLoginEmailPassword;

package/dist/components/pages/login/admin/01/ui/FormLoginPhonePassword.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import FormLogin from "./FormLogin.svelte";
+  import type { Credential } from "../data/page-props";
+
+  type Props = {
+    onSubmit?: (credential: Credential) => void;
+  };
+
+  let { onSubmit }: Props = $props();
+</script>
+
+<FormLogin variant="PHONE" {onSubmit} />

package/dist/components/pages/login/admin/01/ui/FormLoginPhonePassword.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Credential } from "../data/page-props";
+type Props = {
+    onSubmit?: (credential: Credential) => void;
+};
+declare const FormLoginPhonePassword: import("svelte").Component<Props, {}, "">;
+type FormLoginPhonePassword = ReturnType<typeof FormLoginPhonePassword>;
+export default FormLoginPhonePassword;

package/dist/components/pages/login/admin/01/ui/FormLoginUsernamePassword.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import FormLogin from "./FormLogin.svelte";
+  import type { Credential } from "../data/page-props";
+
+  type Props = {
+    onSubmit?: (credential: Credential) => void;
+  };
+
+  let { onSubmit }: Props = $props();
+</script>
+
+<FormLogin variant="USERNAME" {onSubmit} />

package/dist/components/pages/login/admin/01/ui/FormLoginUsernamePassword.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Credential } from "../data/page-props";
+type Props = {
+    onSubmit?: (credential: Credential) => void;
+};
+declare const FormLoginUsernamePassword: import("svelte").Component<Props, {}, "">;
+type FormLoginUsernamePassword = ReturnType<typeof FormLoginUsernamePassword>;
+export default FormLoginUsernamePassword;

package/dist/components/pages/login/admin/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 "../../../../../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>

package/dist/components/pages/login/admin/01/ui/LeftHero.svelte

@@ -1,105 +1,105 @@
-<script lang="ts">
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-  import type { CarouselProps } from "../../../../../core/carousel/data/CarouselModel";
-  import type { Snippet } from "svelte";
-  import Button from "../../../../../ui/button/button.svelte";
-
-  type Props = {
-    title?: string | Snippet;
-    variant?: "NUMBER" | "DOT";
-    autoPlayInterval?: number;
-  };
-
-  let {
-    title,
-    items = [],
-    variant = "DOT",
-    autoPlayInterval = 5000,
-  }: Props & CarouselProps = $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 h-screen p-8 bg-gradient-left text-white"
->
-  <div class="flex items-center gap-2">
-    <div class="font-bold text-xl tracking-wider flex items-center gap-2">
-      {#if typeof title === "function"}
-        {@render title()}
-      {:else}
-        {title || ""}
-      {/if}
-    </div>
-  </div>
-
-  <section class="flex flex-col gap-5">
-    <div class="my-auto max-w-sm md:max-w-md">
-      {#if currentItem}
-        {#key currentIndex}
-          <div
-            class="text-xl md:text-2xl font-bold tracking-tight mb-4 leading-tight animate-in fade-in duration-300"
-          >
-            {currentItem.title}
-          </div>
-          <p
-            class=" text-sm mb-6 leading-relaxed animate-in 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 variant === "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>
-
-<aside class="absolute grid-pattern p-0 top-0 h-screen w-8/12"></aside>
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
+  import type { CarouselProps } from "../../../../../core/carousel/data/CarouselModel";
+  import type { Snippet } from "svelte";
+  import Button from "../../../../../ui/button/button.svelte";
+
+  type Props = {
+    title?: string | Snippet;
+    variant?: "NUMBER" | "DOT";
+    autoPlayInterval?: number;
+  };
+
+  let {
+    title,
+    items = [],
+    variant = "DOT",
+    autoPlayInterval = 5000,
+  }: Props & CarouselProps = $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 h-screen p-8 bg-gradient-left text-white"
+>
+  <div class="flex items-center gap-2">
+    <div class="font-bold text-xl tracking-wider flex items-center gap-2">
+      {#if typeof title === "function"}
+        {@render title()}
+      {:else}
+        {title || ""}
+      {/if}
+    </div>
+  </div>
+
+  <section class="flex flex-col gap-5">
+    <div class="my-auto max-w-sm md:max-w-md">
+      {#if currentItem}
+        {#key currentIndex}
+          <div
+            class="text-xl md:text-2xl font-bold tracking-tight mb-4 leading-tight animate-in fade-in duration-300"
+          >
+            {currentItem.title}
+          </div>
+          <p
+            class=" text-sm mb-6 leading-relaxed animate-in 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 variant === "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>
+
+<aside class="absolute grid-pattern p-0 top-0 h-screen w-8/12"></aside>