negodesign 0.0.11 → 0.0.13

package/dist/styles/globals.css

@@ -1,141 +1,147 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn-svelte/tailwind.css";
-@import "@fontsource-variable/figtree";
-
-@custom-variant dark (&:is(.dark *));
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/typography';
-
-@layer {
-  .bg-gradient-left {
-    @apply bg-linear-to-r from-[#0077b6] via-[#219ebc] to-[#219ebc] dark:from-[#06344d] dark:via-[#023845] dark:to-[#074656];
-  }
-
-  .bg-gradient-right {
-    @apply max-md:bg-linear-to-r max-md:from-[#0077b6] max-md:via-[#219ebc] max-md:to-[#219ebc] dark:max-md:from-[#06344d] dark:max-md:via-[#023845] dark:max-md:to-[#074656];
-  }
-}
-
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(31.22% 0.0185 225.266);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.148 0.004 228.8);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.148 0.004 228.8);
-  --primary: #00bbf9;
-  --primary-foreground: oklch(0.97 0.014 254.604);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.963 0.002 197.1);
-  --muted-foreground: oklch(0.56 0.021 213.5);
-  --accent: oklch(0.963 0.002 197.1);
-  --accent-foreground: #3a6ea5;
-  --destructive: #ff0054;
-  --border: oklch(0.925 0.005 214.3);
-  --input: oklch(0.925 0.005 214.3);
-  --ring: oklch(0.723 0.014 214.4);
-  --chart-1: #3a6ea5;
-  --chart-2: #2ec4b6;
-  --chart-3: #ff6700;
-  --chart-4: #3a86ff;
-  --chart-5: #ffbd00;
-  --radius: 0.62rem;
-  --sidebar: oklch(0.987 0.002 197.1);
-  --sidebar-foreground: oklch(0.148 0.004 228.8);
-  --sidebar-primary: #bde0fe;
-  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
-  --sidebar-accent: oklch(0.963 0.002 197.1);
-  --sidebar-accent-foreground: oklch(0.218 0.008 223.9);
-  --sidebar-border: oklch(0.925 0.005 214.3);
-  --sidebar-ring: oklch(0.723 0.014 214.4);
-}
-
-.dark {
-  --background: oklch(0.148 0.004 228.8);
-  --foreground: oklch(0.987 0.002 197.1);
-  --card: oklch(0.218 0.008 223.9);
-  --card-foreground: oklch(0.987 0.002 197.1);
-  --popover: oklch(0.218 0.008 223.9);
-  --popover-foreground: oklch(0.987 0.002 197.1);
-  --primary: oklch(0.424 0.199 265.638);
-  --primary-foreground: oklch(0.97 0.014 254.604);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.275 0.011 216.9);
-  --muted-foreground: oklch(0.723 0.014 214.4);
-  --accent: oklch(0.275 0.011 216.9);
-  --accent-foreground: oklch(0.987 0.002 197.1);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.56 0.021 213.5);
-  --chart-1: oklch(0.872 0.007 219.6);
-  --chart-2: oklch(0.56 0.021 213.5);
-  --chart-3: oklch(0.45 0.017 213.2);
-  --chart-4: oklch(0.378 0.015 216);
-  --chart-5: oklch(0.275 0.011 216.9);
-  --sidebar: oklch(0.218 0.008 223.9);
-  --sidebar-foreground: oklch(0.987 0.002 197.1);
-  --sidebar-primary: oklch(0.623 0.214 259.815);
-  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
-  --sidebar-accent: oklch(0.275 0.011 216.9);
-  --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.56 0.021 213.5);
-}
-
-@theme inline {
-  --font-sans: "Figtree Variable", sans-serif;
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
-  --color-background: var(--background);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-  html {
-    @apply font-sans;
-  }
-}
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn-svelte/tailwind.css";
+@import "@fontsource-variable/figtree";
+
+@custom-variant dark (&:is(.dark *));
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@layer {
+  .bg-gradient-left {
+    @apply bg-linear-to-r from-[#0082b6] via-[#0b4a7e] to-[#083baa] dark:from-[#06344d] dark:via-[#023845] dark:to-[#074656];
+  }
+
+  .bg-gradient-right {
+    @apply max-md:bg-linear-to-r max-md:from-[#0077b6] max-md:via-[#219ebc] max-md:to-[#219ebc] dark:max-md:from-[#06344d] dark:max-md:via-[#023845] dark:max-md:to-[#074656];
+  }
+
+  .container-fixed {
+    @apply w-11/12 lg:w-11/12;
+  }
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(31.22% 0.0185 225.266);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.148 0.004 228.8);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.148 0.004 228.8);
+  --primary: #00bbf9;
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.963 0.002 197.1);
+  --muted-foreground: oklch(0.56 0.021 213.5);
+  --accent: oklch(0.963 0.002 197.1);
+  --accent-foreground: #3a6ea5;
+  --destructive: #ff0054;
+  --border: oklch(0.925 0.005 214.3);
+  --input: oklch(0.925 0.005 214.3);
+  --ring: oklch(0.723 0.014 214.4);
+  --chart-1: #3a6ea5;
+  --chart-2: #2ec4b6;
+  --chart-3: #ff6700;
+  --chart-4: #3a86ff;
+  --chart-5: #ffbd00;
+  --radius: 0.6rem;
+  --sidebar: oklch(0.987 0.002 197.1);
+  --sidebar-foreground: oklch(0.148 0.004 228.8);
+  --sidebar-primary: #bde0fe;
+  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --sidebar-accent: oklch(0.963 0.002 197.1);
+  --sidebar-accent-foreground: oklch(0.218 0.008 223.9);
+  --sidebar-border: oklch(0.925 0.005 214.3);
+  --sidebar-ring: oklch(0.723 0.014 214.4);
+}
+
+.dark {
+  --background: oklch(0.148 0.004 228.8);
+  --foreground: oklch(0.987 0.002 197.1);
+  --card: oklch(0.218 0.008 223.9);
+  --card-foreground: oklch(0.987 0.002 197.1);
+  --popover: oklch(0.218 0.008 223.9);
+  --popover-foreground: oklch(0.987 0.002 197.1);
+  --primary: oklch(38.122% 0.21894 263.974);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.275 0.011 216.9);
+  --muted-foreground: oklch(0.723 0.014 214.4);
+  --accent: oklch(0.275 0.011 216.9);
+  --accent-foreground: oklch(0.987 0.002 197.1);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(65.615% 0.04673 18.328 / 0.15);
+  --ring: oklch(0.56 0.021 213.5);
+  --chart-1: oklch(0.872 0.007 219.6);
+  --chart-2: oklch(0.56 0.021 213.5);
+  --chart-3: oklch(0.45 0.017 213.2);
+  --chart-4: oklch(0.378 0.015 216);
+  --chart-5: oklch(0.275 0.011 216.9);
+  --sidebar: oklch(0.218 0.008 223.9);
+  --sidebar-foreground: oklch(0.987 0.002 197.1);
+  --sidebar-primary: oklch(0.623 0.214 259.815);
+  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --sidebar-accent: oklch(0.275 0.011 216.9);
+  --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.56 0.021 213.5);
+}
+
+@theme inline {
+  --font-sans: "Figtree Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  html {
+    @apply font-sans;
+  }
+}

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
-import type { LoginVariant, LoginRequestDto, LinkProps, PageLoginProps } from "../components/pages/login/types";
-import type { ForgetPasswordVariant, ForgetPasswordRequestDto, PageForgetPasswordProps } from "../components/pages/forget-password/types";
-import type { ResetPasswordRequestDto, PageResetPasswordProps } from "../components/pages/reset-password/types";
-import type { OtpVerificationRequestDto, PageOtpVerificationProps } from "../components/pages/otp-verification/types";
+import type { LoginVariant, LoginRequestDto, LinkProps, PageLoginProps } from "../components/pages/security/login/types";
+import type { ForgetPasswordVariant, ForgetPasswordRequestDto, PageForgetPasswordProps } from "../components/pages/security/forget-password/types";
+import type { ResetPasswordRequestDto, PageResetPasswordProps } from "../components/pages/security/reset-password/types";
+import type { OtpVerificationRequestDto, PageOtpVerificationProps } from "../components/pages/security/otp-verification/types";
 export type { 
 /**  Dados necessários para autenticação de um utilizador. @see LoginRequestDto */
 LoginRequestDto, 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "negodesign",
-	"version": "0.0.11",
+	"version": "0.0.13",
 	"type": "module",
 	"license": "MIT",
 	"sideEffects": [
@@ -52,26 +52,21 @@
 		"@dnd-kit-svelte/svelte": "^0.1.6",
 		"@dnd-kit/abstract": "^0.5.0",
 		"@dnd-kit/helpers": "^0.5.0",
-		"@hugeicons/core-free-icons": "^4.2.3",
-		"@hugeicons/svelte": "^1.1.4",
 		"@internationalized/date": "^3.12.2",
-		"@lucide/svelte": "^1.27.0",
 		"@tanstack/table-core": "^8.21.3",
 		"@types/country-flag-icons": "^1.2.2",
 		"@types/d3-scale": "^4.0.9",
 		"@types/d3-shape": "^3.1.8",
-		"bits-ui": "^2.18.1",
-		"clsx": "^2.1.1",
 		"country-flag-icons": "^1.6.20",
 		"d3-scale": "^4.0.2",
 		"d3-shape": "^3.2.0",
+		"embla-carousel-autoplay": "^8.6.0",
 		"layerchart": "^2.0.0-next.48",
 		"mode-watcher": "^1.1.0",
 		"runed": "^0.37.1",
 		"svelte-sonner": "^1.1.1",
-		"svelte-toolbelt": "^0.10.6",
 		"svelte-tel-input": "^4.3.2",
-		"tailwind-merge": "^3.6.0",
+		"svelte-toolbelt": "^0.10.6",
 		"tailwind-variants": "^3.3.0",
 		"vaul-svelte": "^1.0.0-next.7",
 		"zod": "^4.4.3"
@@ -79,6 +74,9 @@
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
 		"@fontsource-variable/figtree": "^5.3.0",
+		"@hugeicons/core-free-icons": "^4.2.3",
+		"@hugeicons/svelte": "^1.1.4",
+		"@lucide/svelte": "^1.28.0",
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/adapter-node": "^5.5.7",
 		"@sveltejs/kit": "^2.63.0",
@@ -90,7 +88,10 @@
 		"@tailwindcss/vite": "^4.3.0",
 		"@types/node": "^22",
 		"@vitest/browser-playwright": "^4.1.8",
+		"bits-ui": "^2.18.1",
+		"clsx": "^2.1.1",
 		"country-flag-icons": "^1.6.20",
+		"embla-carousel-svelte": "^8.6.0",
 		"eslint": "^10.4.1",
 		"eslint-plugin-svelte": "^3.19.0",
 		"globals": "^17.6.0",
@@ -100,6 +101,7 @@
 		"svelte-check": "^4.6.0",
 		"svelte-preprocess": "^6.0.5",
 		"svelte-tel-input": "^4.3.2",
+		"tailwind-merge": "^3.6.0",
 		"tailwindcss": "^4.3.0",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
@@ -108,4 +110,4 @@
 		"vitest": "^4.1.8",
 		"vitest-browser-svelte": "^2.1.1"
 	}
-}
+}

package/dist/components/core/carousel/data/CarouselModel.d.ts

@@ -1,11 +0,0 @@
-export type CarouselItemType = "NUMBER" | "DOT" | "POINTER";
-export interface CarouselItem {
-    title: string;
-    description: string;
-    buttonText: string;
-    buttonUrl?: string;
-}
-export interface CarouselProps {
-    items: CarouselItem[];
-    varient: CarouselItemType;
-}

package/dist/components/core/nav/ui/nav-menu-bar.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { NavMenuItem } from "../data/nav-menu-sidebar";
-type $$ComponentProps = {
-    items: NavMenuItem[];
-};
-declare const NavMenuBar: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavMenuBar = ReturnType<typeof NavMenuBar>;
-export default NavMenuBar;

package/dist/components/core/nav/ui/nav-menu-bottom-bar.svelte.d.ts

@@ -1,10 +0,0 @@
-import * as Sidebar from "../../../ui/sidebar/index.js";
-import type { WithoutChildren } from "../../../../utils.js";
-import type { ComponentProps } from "svelte";
-import type { NavMenuSidebar } from "../data/nav-menu-sidebar";
-type $$ComponentProps = {
-    items?: NavMenuSidebar[];
-} & WithoutChildren<ComponentProps<typeof Sidebar.Group>>;
-declare const NavMenuBottomBar: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavMenuBottomBar = ReturnType<typeof NavMenuBottomBar>;
-export default NavMenuBottomBar;

package/dist/components/core/nav/ui/nav-menu-header.svelte.d.ts

@@ -1,10 +0,0 @@
-type $$ComponentProps = {
-    teams: {
-        name: string;
-        logo: any;
-        plan: string;
-    }[];
-};
-declare const NavMenuHeader: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavMenuHeader = ReturnType<typeof NavMenuHeader>;
-export default NavMenuHeader;

package/dist/components/core/nav/ui/nav-menu-top-bar.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { NavTopBarSidebarItem } from "../data/nav-top-bar-sidebar";
-declare const NavMenuTopBar: import("svelte").Component<NavTopBarSidebarItem, {}, "">;
-type NavMenuTopBar = ReturnType<typeof NavMenuTopBar>;
-export default NavMenuTopBar;

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

@@ -1,21 +0,0 @@
-import type { Snippet } from "svelte";
-import type { AuthFormType, LoginRequestDto, LinkProps } from "../../types";
-/**
- * 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: LoginRequestDto) => void;
-    register?: Snippet;
-    forgetPassword?: LinkProps;
-    privacyPolicy?: LinkProps;
-    termsOfService?: LinkProps;
-};
-declare const LoginCard: import("svelte").Component<Props, {}, "">;
-type LoginCard = ReturnType<typeof LoginCard>;
-export default LoginCard;

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

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import type { PageLoginProps } from "./types";
-  import PageLogin01 from "./01/ui/PageLogin01.svelte";
-
-  /**
-   * Página de login principal.
-   * @property {"01"} varient - Variante do layout de login
-   * @property {CarouselItem[]} carousel - Itens do carousel hero
-   * @property {string} title - Título do hero
-   * @property {AuthFormType} formType - Tipo do form (EMAIL_PASSWORD, USERNAME_PASSWORD, PHONE_PASSWORD)
-   * @property {LinkProps} privacyPolicy - Config do link de política de privacidade
-   * @property {LinkProps} termsOfService - Config do link de termos de serviço
-   */
-  type Props = {
-    varient?: "01";
-  };
-
-  let { ...props }: PageLoginProps & Props = $props();
-</script>
-
-<PageLogin01 {...props} />

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

@@ -1,17 +0,0 @@
-import type { PageLoginProps } from "./types";
-/**
- * Página de login principal.
- * @property {"01"} varient - Variante do layout de login
- * @property {CarouselItem[]} carousel - Itens do carousel hero
- * @property {string} title - Título do hero
- * @property {AuthFormType} formType - Tipo do form (EMAIL_PASSWORD, USERNAME_PASSWORD, PHONE_PASSWORD)
- * @property {LinkProps} privacyPolicy - Config do link de política de privacidade
- * @property {LinkProps} termsOfService - Config do link de termos de serviço
- */
-type Props = {
-    varient?: "01";
-};
-type $$ComponentProps = PageLoginProps & Props;
-declare const PageLogin: import("svelte").Component<$$ComponentProps, {}, "">;
-type PageLogin = ReturnType<typeof PageLogin>;
-export default PageLogin;

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

@@ -1,23 +0,0 @@
-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 LoginRequestDto = {
-    password: string;
-    data: string;
-};
-export type LinkProps = {
-    url?: string;
-    onclick?: () => void;
-};
-export type PageLoginProps = {
-    carousel?: CarouselItem[];
-    varient?: CarouselItemType;
-    title?: string;
-    children?: Snippet;
-    formType?: AuthFormType;
-    onSubmit?: (credential: LoginRequestDto) => void;
-    forgetPassword?: LinkProps;
-    privacyPolicy?: LinkProps;
-    termsOfService?: LinkProps;
-};