negodesign 0.0.1 → 0.0.3

package/dist/components/core/tabs/ui/tab-underline.svelte

@@ -1,41 +1,41 @@
-<script lang="ts">
-  import * as UnderlineTabs from "../../../ui/underline-tabs";
-  import type { TabProps } from "../data/TabModel";
-
-  type Props = {
-    items?: TabProps[];
-    className?: string;
-  };
-
-  let { items = [], className }: Props = $props();
-
-  let activeValue = $state<string>("");
-
-  let currentActiveValue = $derived(
-    activeValue || (items.length > 0 ? items[0].item.value : ""),
-  );
-
-  let selected = $derived(
-    items.find((it) => it.item.value === currentActiveValue) || items[0],
-  );
-</script>
-
-{#if items && items.length > 0 && selected}
-  <UnderlineTabs.Root
-    value={currentActiveValue}
-    onValueChange={(val) => (activeValue = val)}
-    class="mb-5 {className}"
-  >
-    <UnderlineTabs.List>
-      {#each items as it (it.item.value)}
-        <UnderlineTabs.Trigger
-          value={it.item.value}
-          class="text-lg md:text-base"
-        >
-          {it.item.label}
-        </UnderlineTabs.Trigger>
-      {/each}
-    </UnderlineTabs.List>
-  </UnderlineTabs.Root>
-  {@render selected.children()}
-{/if}
+<script lang="ts">
+  import * as UnderlineTabs from "../../../ui/underline-tabs";
+  import type { TabProps } from "../data/TabModel";
+
+  type Props = {
+    items?: TabProps[];
+    className?: string;
+  };
+
+  let { items = [], className }: Props = $props();
+
+  let activeValue = $state<string>("");
+
+  let currentActiveValue = $derived(
+    activeValue || (items.length > 0 ? items[0].item.value : ""),
+  );
+
+  let selected = $derived(
+    items.find((it) => it.item.value === currentActiveValue) || items[0],
+  );
+</script>
+
+{#if items && items.length > 0 && selected}
+  <UnderlineTabs.Root
+    value={currentActiveValue}
+    onValueChange={(val) => (activeValue = val)}
+    class="mb-5 {className}"
+  >
+    <UnderlineTabs.List>
+      {#each items as it (it.item.value)}
+        <UnderlineTabs.Trigger
+          value={it.item.value}
+          class="text-lg md:text-base"
+        >
+          {it.item.label}
+        </UnderlineTabs.Trigger>
+      {/each}
+    </UnderlineTabs.List>
+  </UnderlineTabs.Root>
+  {@render selected.children()}
+{/if}

package/dist/components/pages/admin/ui/{admin-content.svelte → AdminContent.svelte}

@@ -1,13 +1,14 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-
-  type Props = {
-    children?: Snippet;
-  };
-
-  let { children }: Props = $props();
-</script>
-
-<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
-  {@render children?.()}
-</div>
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  /** Wrapper de conteúdo para páginas admin. */
+  type Props = {
+    children?: Snippet;
+  };
+
+  let { children }: Props = $props();
+</script>
+
+<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+  {@render children?.()}
+</div>

package/dist/components/pages/admin/ui/{admin-content.svelte.d.ts → AdminContent.svelte.d.ts}

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+/** Wrapper de conteúdo para páginas admin. */
 type Props = {
     children?: Snippet;
 };

package/dist/components/pages/admin/ui/{admin-panel.svelte → AdminPanel.svelte}

@@ -1,40 +1,46 @@
-<script lang="ts">
-  import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
-  import LightSwitch from "../../../ui/light-switch/light-switch.svelte";
-  import { Separator } from "../../../ui/separator/index.js";
-  import * as Sidebar from "../../../ui/sidebar/index.js";
-  import type { Snippet } from "svelte";
-
-  type Props = {
-    appsidebar?: Snippet;
-    content?: Snippet;
-    breadcrumb?: Snippet;
-  };
-
-  let { appsidebar, content, breadcrumb }: Props = $props();
-</script>
-
-<Sidebar.Provider>
-  {@render appsidebar?.()}
-  <Sidebar.Inset>
-    <header
-      class="flex h-16 shrink-0 items-center md:justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
-    >
-      <div class="flex items-center gap-2 px-4">
-        <Sidebar.Trigger class="-ms-1" />
-        <Separator
-          orientation="vertical"
-          class="me-2 data-[orientation=vertical]:h-4"
-        />
-        {@render breadcrumb?.()}
-      </div>
-      <div class="pr-5">
-        <div class="flex gap-3">
-          <LanguageSwitcher />
-          <LightSwitch />
-        </div>
-      </div>
-    </header>
-    {@render content?.()}
-  </Sidebar.Inset>
-</Sidebar.Provider>
+<script lang="ts">
+  import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
+  import LightSwitch from "../../../ui/light-switch/light-switch.svelte";
+  import { Separator } from "../../../ui/separator/index.js";
+  import * as Sidebar from "../../../ui/sidebar/index.js";
+  import type { Snippet } from "svelte";
+
+  /**
+   * Layout de admin com sidebar, header e conteúdo.
+   * @property {Snippet} appsidebar - Sidebar da aplicação
+   * @property {Snippet} content - Conteúdo principal
+   * @property {Snippet} breadcrumb - Navegação breadcrumb
+   */
+  type Props = {
+    appsidebar?: Snippet;
+    content?: Snippet;
+    breadcrumb?: Snippet;
+  };
+
+  let { appsidebar, content, breadcrumb }: Props = $props();
+</script>
+
+<Sidebar.Provider>
+  {@render appsidebar?.()}
+  <Sidebar.Inset>
+    <header
+      class="flex h-16 shrink-0 items-center md:justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
+    >
+      <div class="flex items-center gap-2 px-4">
+        <Sidebar.Trigger class="-ms-1" />
+        <Separator
+          orientation="vertical"
+          class="me-2 data-[orientation=vertical]:h-4"
+        />
+        {@render breadcrumb?.()}
+      </div>
+      <div class="pr-5">
+        <div class="flex gap-3">
+          <LanguageSwitcher />
+          <LightSwitch />
+        </div>
+      </div>
+    </header>
+    {@render content?.()}
+  </Sidebar.Inset>
+</Sidebar.Provider>

package/dist/components/pages/admin/ui/{admin-panel.svelte.d.ts → AdminPanel.svelte.d.ts}

@@ -1,4 +1,10 @@
 import type { Snippet } from "svelte";
+/**
+ * Layout de admin com sidebar, header e conteúdo.
+ * @property {Snippet} appsidebar - Sidebar da aplicação
+ * @property {Snippet} content - Conteúdo principal
+ * @property {Snippet} breadcrumb - Navegação breadcrumb
+ */
 type Props = {
     appsidebar?: Snippet;
     content?: Snippet;

package/dist/components/pages/login/01/data/page-props.d.ts

@@ -0,0 +1,21 @@
+import type { CarouselItem, CarouselItemType } from "../../../../core/carousel/data/CarouselModel";
+import type { Snippet } from "svelte";
+export type AuthFormType = "EMAIL_PASSWORD" | "PHONE_PASSWORD" | "USERNAME_PASSWORD";
+export type LoginVariant = "EMAIL" | "USERNAME" | "PHONE";
+export type Credential = {
+    password: string;
+    data: string;
+};
+export type LinkProps = {
+    url?: string;
+    onclick?: () => void;
+};
+export type PageLoginProps = {
+    carousel?: CarouselItem[];
+    varient?: CarouselItemType;
+    title?: string;
+    children?: Snippet;
+    formType?: AuthFormType;
+    privacyPolicy?: LinkProps;
+    termsOfService?: LinkProps;
+};

package/dist/components/pages/login/01/data/page-props.js

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

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

@@ -0,0 +1,91 @@
+<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 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";
+
+  /**
+   * Card de autenticação com abas login/register.
+   * @property {AuthFormType} formType - Tipo do form (EMAIL_PASSWORD, USERNAME_PASSWORD, PHONE_PASSWORD)
+   * @property {(cred: Credential) => void} onSubmit - Callback ao submeter credenciais
+   * @property {Snippet} register - Snippet do form de registro (opcional, exibe aba Register)
+   * @property {LinkProps} privacyPolicy - Config do link de privacidade { url, onclick }
+   * @property {LinkProps} termsOfService - Config do link de termos { url, onclick }
+   */
+  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/01/ui/AuthCard.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { AuthFormType, Credential, LinkProps } from "../data/page-props";
+/**
+ * Card de autenticação com abas login/register.
+ * @property {AuthFormType} formType - Tipo do form (EMAIL_PASSWORD, USERNAME_PASSWORD, PHONE_PASSWORD)
+ * @property {(cred: Credential) => void} onSubmit - Callback ao submeter credenciais
+ * @property {Snippet} register - Snippet do form de registro (opcional, exibe aba Register)
+ * @property {LinkProps} privacyPolicy - Config do link de privacidade { url, onclick }
+ * @property {LinkProps} termsOfService - Config do link de termos { url, onclick }
+ */
+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/01/ui/FormLogin.svelte

@@ -0,0 +1,56 @@
+<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";
+
+  /**
+   * Formulário de login reutilizável.
+   * @property {LoginVariant} variant - Tipo do input de dados (EMAIL, USERNAME, PHONE)
+   * @property {(cred: Credential) => void} onSubmit - Callback ao submeter { data, password }
+   */
+  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={handleSubmit}>
+  <p class="text-[13px] py-3">{$t("text.login")}</p>
+
+  <div class="space-y-1">
+    {#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 bind:value={password} />
+    <LinkForgetPassword />
+  </div>
+
+  <div class="flex flex-col gap-1">
+    <ButtonLogin type="submit" />
+    <LabelOr variant="SEPARATOR" />
+    <ButtonLoginWith icon="GOOGLE" />
+  </div>
+</form>

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

@@ -0,0 +1,13 @@
+import type { Credential, LoginVariant } from "../data/page-props";
+/**
+ * Formulário de login reutilizável.
+ * @property {LoginVariant} variant - Tipo do input de dados (EMAIL, USERNAME, PHONE)
+ * @property {(cred: Credential) => void} onSubmit - Callback ao submeter { data, password }
+ */
+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/01/ui/FormLoginEmailPassword.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import FormLogin from "./FormLogin.svelte";
+  import type { Credential } from "../data/page-props";
+
+  /** Form de login com email e senha. Wrapper fino de FormLogin variant="EMAIL". */
+  type Props = {
+    onSubmit?: (credential: Credential) => void;
+  };
+
+  let { onSubmit }: Props = $props();
+</script>
+
+<FormLogin variant="EMAIL" {onSubmit} />

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

@@ -0,0 +1,8 @@
+import type { Credential } from "../data/page-props";
+/** Form de login com email e senha. Wrapper fino de FormLogin variant="EMAIL". */
+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/01/ui/FormLoginPhonePassword.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import FormLogin from "./FormLogin.svelte";
+  import type { Credential } from "../data/page-props";
+
+  /** Form de login com telefone e senha. Wrapper fino de FormLogin variant="PHONE". */
+  type Props = {
+    onSubmit?: (credential: Credential) => void;
+  };
+
+  let { onSubmit }: Props = $props();
+</script>
+
+<FormLogin variant="PHONE" {onSubmit} />

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

@@ -0,0 +1,8 @@
+import type { Credential } from "../data/page-props";
+/** Form de login com telefone e senha. Wrapper fino de FormLogin variant="PHONE". */
+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/01/ui/FormLoginUsernamePassword.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import FormLogin from "./FormLogin.svelte";
+  import type { Credential } from "../data/page-props";
+
+  /** Form de login com username e senha. Wrapper fino de FormLogin variant="USERNAME". */
+  type Props = {
+    onSubmit?: (credential: Credential) => void;
+  };
+
+  let { onSubmit }: Props = $props();
+</script>
+
+<FormLogin variant="USERNAME" {onSubmit} />

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

@@ -0,0 +1,8 @@
+import type { Credential } from "../data/page-props";
+/** Form de login com username e senha. Wrapper fino de FormLogin variant="USERNAME". */
+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 → 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>