negodesign 0.0.5 → 0.0.7

package/dist/components/NegoDesignLayout.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { ModeWatcher } from "mode-watcher";
+  import { defineNegodesignConfig } from "../config";
+  import type { NegodesignConfig } from "../config";
+
+  let {
+    translations,
+    children,
+  }: {
+    translations?: NegodesignConfig["translations"];
+    children: any;
+  } = $props();
+
+  $effect(() => {
+    if (translations) {
+      defineNegodesignConfig({ translations });
+    }
+  });
+</script>
+
+<ModeWatcher />
+{@render children()}

package/dist/components/NegoDesignLayout.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { NegodesignConfig } from "../config";
+type $$ComponentProps = {
+    translations?: NegodesignConfig["translations"];
+    children: any;
+};
+declare const NegoDesignLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type NegoDesignLayout = ReturnType<typeof NegoDesignLayout>;
+export default NegoDesignLayout;

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

@@ -4,6 +4,8 @@
   import type { CarouselProps } from "../../../../core/carousel/data/CarouselModel";
   import type { Snippet } from "svelte";
   import Button from "../../../../ui/button/button.svelte";
+  import { t } from "../../../../../i18n";
+  import Logo from "../../../../../assets/login-01-admin.webp";
 
   type Props = {
     title?: string | Snippet;
@@ -45,7 +47,7 @@
       {#if typeof title === "function"}
         {@render title()}
       {:else}
-        {title || ""}
+        {title || $t("label.welcome")}
       {/if}
     </div>
   </div>
@@ -100,6 +102,12 @@
       {/each}
     </div>
   </section>
+
+  <aside
+    class="hidden z-50 lg:block lg:absolute lg:right-0 lg:-bottom-3 lg:w-105 lg:h-105"
+  >
+    <img src={Logo} alt="" class="shadow rounded-tl-lg rounded-bl-lg" />
+  </aside>
 </div>
 
 <aside class="absolute grid-pattern p-0 top-0 h-screen w-8/12"></aside>

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

@@ -24,6 +24,13 @@
 </script>
 
 <main class="h-screen w-screen flex items-center">
+  <svg width="0" height="0" class="absolute">
+    <defs>
+      <clipPath id="grid-curve-clip" clipPathUnits="objectBoundingBox">
+        <path d="M0.35,0 L1,0 C0.85,0.3 1,0.6 0.4,1 L1,1 Z" />
+      </clipPath>
+    </defs>
+  </svg>
   <div class="hidden md:block md:w-8/12">
     <LeftHero {title} varient={varient ?? "POINTER"} items={carousel ?? []} />
   </div>
@@ -45,5 +52,6 @@
         transparent 1px
       ),
       linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+    clip-path: url(#grid-curve-clip);
   }
 </style>

package/dist/components/ui/language-switcher/language-switcher.svelte

@@ -38,7 +38,7 @@
   </DropdownMenu.Trigger>
   <DropdownMenu.Content {align}>
     <DropdownMenu.RadioGroup bind:value={$locale}>
-      {#each locales as code (code)}
+      {#each $locales as code (code)}
         <DropdownMenu.RadioItem value={code}>
           {$t(`language.${code}`)}
         </DropdownMenu.RadioItem>

package/dist/config.d.ts

@@ -0,0 +1,7 @@
+type Translations = Record<string, Record<string, string>>;
+export interface NegodesignConfig {
+    translations?: Translations;
+}
+export declare function defineNegodesignConfig(userConfig: NegodesignConfig): NegodesignConfig;
+export declare function getConfig(): NegodesignConfig;
+export {};

package/dist/config.js

@@ -0,0 +1,8 @@
+let config = {};
+export function defineNegodesignConfig(userConfig) {
+    config = userConfig;
+    return config;
+}
+export function getConfig() {
+    return config;
+}

package/dist/globals.css

@@ -788,9 +788,15 @@
   .rounded-tl-\[35px\] {
     border-top-left-radius: 35px;
   }
+  .rounded-tl-lg {
+    border-top-left-radius: var(--radius);
+  }
   .rounded-tr-\[35px\] {
     border-top-right-radius: 35px;
   }
+  .rounded-bl-lg {
+    border-bottom-left-radius: var(--radius);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1198,6 +1204,10 @@
   .bg-blend-color {
     background-blend-mode: color;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2305,6 +2315,26 @@
       display: none;
     }
   }
+  @media (width >= 64rem) {
+    .lg\:absolute {
+      position: absolute;
+    }
+    .lg\:right-0 {
+      right: 0px;
+    }
+    .lg\:-bottom-3 {
+      bottom: calc(var(--spacing) * -3);
+    }
+    .lg\:block {
+      display: block;
+    }
+    .lg\:h-105 {
+      height: calc(var(--spacing) * 105);
+    }
+    .lg\:w-105 {
+      width: calc(var(--spacing) * 105);
+    }
+  }
   .dark\:scale-0:is(.dark *) {
     --tw-scale-x: 0%;
     --tw-scale-y: 0%;
@@ -2648,9 +2678,6 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
-  .\[\&_svg\:not\(\[data-loading-icon\]\)\]\:hidden svg:not([data-loading-icon]) {
-    display: none;
-  }
   .\[\&_text\]\:stroke-transparent text {
     stroke: transparent;
   }

package/dist/i18n/config.d.ts

@@ -0,0 +1,4 @@
+type Translations = Record<string, Record<string, string>>;
+export declare function getMergedTranslations(): Translations;
+export declare function getLocales(): string[];
+export {};

package/dist/i18n/config.js

@@ -0,0 +1,26 @@
+import baseTranslations from "./translations";
+import { getConfig } from "../config";
+function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key of Object.keys(source)) {
+        if (source[key] &&
+            typeof source[key] === "object" &&
+            !Array.isArray(source[key]) &&
+            target[key] &&
+            typeof target[key] === "object") {
+            result[key] = deepMerge(target[key], source[key]);
+        }
+        else {
+            result[key] = source[key];
+        }
+    }
+    return result;
+}
+export function getMergedTranslations() {
+    const userConfig = getConfig();
+    const merged = deepMerge(baseTranslations, userConfig.translations ?? {});
+    return merged;
+}
+export function getLocales() {
+    return Object.keys(getMergedTranslations());
+}

package/dist/i18n/index.d.ts

@@ -1,6 +1,5 @@
-import translations from "./translations";
 export declare const locale: import("svelte/store").Writable<string>;
-export declare const locales: Array<keyof typeof translations>;
 type TranslationVars = Record<string, string | number>;
+export declare const locales: import("svelte/store").Readable<string[]>;
 export declare const t: import("svelte/store").Readable<(key: string, vars?: TranslationVars) => string>;
 export {};

package/dist/i18n/index.js

@@ -1,24 +1,23 @@
 import { derived, writable } from "svelte/store";
-import translations from "./translations";
+import { getMergedTranslations } from "./config";
 export const locale = writable("en");
-export const locales = Object.keys(translations);
 function translate(currentLocale, key, vars) {
     if (!key)
         throw new Error("no key provided to $t()");
     if (!currentLocale)
         throw new Error(`no translation for key "${key}"`);
-    // Fazemos o type assertion para garantir que o TypeScript reconheça as chaves com segurança
+    const translations = getMergedTranslations();
     const langTranslations = translations[currentLocale];
     if (!langTranslations)
         throw new Error(`no translation found for locale "${currentLocale}"`);
     let text = langTranslations[key];
     if (!text)
         throw new Error(`no translation found for ${currentLocale}.${key}`);
-    // Substitui as variáveis passadas na string de tradução de forma segura
     Object.keys(vars).forEach((k) => {
         const regex = new RegExp(`{{${k}}}`, "g");
         text = text.replace(regex, String(vars[k]));
     });
     return text;
 }
+export const locales = derived(locale, () => Object.keys(getMergedTranslations()));
 export const t = derived(locale, ($locale) => (key, vars = {}) => translate($locale, key, vars));

package/dist/i18n/translations.d.ts

@@ -31,6 +31,7 @@ declare const _default: {
         "label.users": string;
         "label.account": string;
         "label.profile": string;
+        "label.welcome": string;
         "text.login": string;
         "text.register": string;
         "language.en": string;
@@ -68,6 +69,7 @@ declare const _default: {
         "label.users": string;
         "label.account": string;
         "label.profile": string;
+        "label.welcome": string;
         "text.login": string;
         "text.register": string;
         "language.en": string;

package/dist/i18n/translations.js

@@ -31,6 +31,7 @@ export default {
         "label.users": "Users",
         "label.account": "Account",
         "label.profile": "Profile",
+        "label.welcome": "Welcome",
         "text.login": "Enter your credentials below to securely access your account and continue where you left off.",
         "text.register": "Fill in the fields below with your information to create your new account and enjoy all our features.",
         "language.en": "English",
@@ -68,6 +69,7 @@ export default {
         "label.users": "Utilizadores",
         "label.account": "Conta",
         "label.profile": "Perfil",
+        "label.welcome": "Bem vindo",
         "text.login": "Insira as suas credenciais abaixo para aceder à sua conta com segurança e continuar de onde parou.",
         "text.register": "Preencha os campos abaixo com as suas informações para criar a sua nova conta e aproveitar todos os nossos recursos.",
         "language.en": "Inglês",

package/dist/index.d.ts

@@ -8,9 +8,12 @@ import MenuBarSidebar from "./components/core/sidebar/MenuBarSidebar.svelte";
 import AdminContent from "./components/pages/admin/ui/AdminContent.svelte";
 import AdminPanel from "./components/pages/admin/ui/AdminPanel.svelte";
 import PageLogin from "./components/pages/login/PageLogin.svelte";
-import NegoDesignLayout from "./components/pages/NegoDesignLayout.svelte";
+import NegoDesignLayout from "./components/NegoDesignLayout.svelte";
+export { locale, locales, t } from "./i18n";
+export { defineNegodesignConfig, getConfig } from "./config";
+export { getMergedTranslations, getLocales } from "./i18n/config";
 export { 
-/** Página de configurações para uma aplicação da negodesign */
+/** Página de configurações para uma aplicação da negodesign. @see NegoDesignLayout */
 NegoDesignLayout, 
 /** Página de login com carousel hero e card de autenticação. @see PageLoginProps */
 PageLogin, 

package/dist/index.js

@@ -8,9 +8,12 @@ import MenuBarSidebar from "./components/core/sidebar/MenuBarSidebar.svelte";
 import AdminContent from "./components/pages/admin/ui/AdminContent.svelte";
 import AdminPanel from "./components/pages/admin/ui/AdminPanel.svelte";
 import PageLogin from "./components/pages/login/PageLogin.svelte";
-import NegoDesignLayout from "./components/pages/NegoDesignLayout.svelte";
+import NegoDesignLayout from "./components/NegoDesignLayout.svelte";
+export { locale, locales, t } from "./i18n";
+export { defineNegodesignConfig, getConfig } from "./config";
+export { getMergedTranslations, getLocales } from "./i18n/config";
 export { 
-/** Página de configurações para uma aplicação da negodesign */
+/** Página de configurações para uma aplicação da negodesign. @see NegoDesignLayout */
 NegoDesignLayout, 
 /** Página de login com carousel hero e card de autenticação. @see PageLoginProps */
 PageLogin, 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "negodesign",
-	"version": "0.0.5",
+	"version": "0.0.7",
 	"type": "module",
 	"license": "MIT",
 	"sideEffects": [
@@ -15,6 +15,11 @@
 			"svelte": "./dist/index.js",
 			"default": "./dist/index.js"
 		},
+		"./i18n": {
+			"types": "./dist/i18n/index.d.ts",
+			"svelte": "./dist/i18n/index.js",
+			"default": "./dist/i18n/index.js"
+		},
 		"./styles.css": "./dist/globals.css",
 		"./*.svelte": "./dist/*.svelte",
 		"./*": {

package/dist/components/button.svelte

@@ -1,83 +0,0 @@
-<script lang="ts" module>
-	import type { MouseEventHandler } from 'svelte/elements';
-
-	export type ButtonProps = ButtonPrimitiveProps & {
-		loading?: boolean;
-		onClickPromise?: (
-			e:
-				| Parameters<MouseEventHandler<HTMLButtonElement>>[0]
-				| Parameters<MouseEventHandler<HTMLAnchorElement>>[0]
-		) => Promise<void>;
-	};
-
-	export type Size = 'default' | 'xs' | 'sm' | 'lg';
-
-	/**
-	 * Map sizes to their icon/normal size variant
-	 */
-	export const sizeMap = {
-		default: {
-			icon: 'icon',
-			normal: 'default'
-		},
-		xs: {
-			icon: 'icon-xs',
-			normal: 'xs'
-		},
-		sm: {
-			icon: 'icon-sm',
-			normal: 'sm'
-		},
-		lg: {
-			icon: 'icon-lg',
-			normal: 'lg'
-		}
-	} as const;
-
-	export { type ButtonSize, type ButtonVariant } from './ui/button';
-</script>
-
-<script lang="ts">
-	import { Button, type ButtonProps as ButtonPrimitiveProps } from './ui/button';
-	import { Spinner } from './ui/spinner';
-	import { cn } from '../utils.js';
-
-	let {
-		ref = $bindable(null),
-		loading: loadingProp = false,
-		onClickPromise,
-		onclick,
-		disabled,
-		class: className,
-		children,
-		...restProps
-	}: ButtonProps = $props();
-
-	let pending = $state(false);
-
-	const loading = $derived(loadingProp || pending);
-</script>
-
-<Button
-	bind:ref
-	class={cn(loading && '[&_svg:not([data-loading-icon])]:hidden', className)}
-	disabled={loading || disabled}
-	onclick={async (e) => {
-		onclick?.(e as never);
-
-		if (onClickPromise) {
-			pending = true;
-			try {
-				await onClickPromise(e);
-			} finally {
-				pending = false;
-			}
-		}
-	}}
-	{...restProps}
->
-	{#if loading}
-		<Spinner data-icon="inline-start" data-loading-icon />
-	{/if}
-	{@render children?.()}
-</Button>

package/dist/components/button.svelte.d.ts

@@ -1,32 +0,0 @@
-import type { MouseEventHandler } from 'svelte/elements';
-export type ButtonProps = ButtonPrimitiveProps & {
-    loading?: boolean;
-    onClickPromise?: (e: Parameters<MouseEventHandler<HTMLButtonElement>>[0] | Parameters<MouseEventHandler<HTMLAnchorElement>>[0]) => Promise<void>;
-};
-export type Size = 'default' | 'xs' | 'sm' | 'lg';
-/**
- * Map sizes to their icon/normal size variant
- */
-export declare const sizeMap: {
-    readonly default: {
-        readonly icon: "icon";
-        readonly normal: "default";
-    };
-    readonly xs: {
-        readonly icon: "icon-xs";
-        readonly normal: "xs";
-    };
-    readonly sm: {
-        readonly icon: "icon-sm";
-        readonly normal: "sm";
-    };
-    readonly lg: {
-        readonly icon: "icon-lg";
-        readonly normal: "lg";
-    };
-};
-export { type ButtonSize, type ButtonVariant } from './ui/button';
-import { Button, type ButtonProps as ButtonPrimitiveProps } from './ui/button';
-declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
-type Button = ReturnType<typeof Button>;
-export default Button;

package/dist/components/pages/NegoDesignLayout.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  import { ModeWatcher } from "mode-watcher";
-  let { children } = $props();
-</script>
-
-<ModeWatcher />
-{@render children()}

package/dist/components/pages/NegoDesignLayout.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const NegoDesignLayout: import("svelte").Component<{
-    children: any;
-}, {}, "">;
-type NegoDesignLayout = ReturnType<typeof NegoDesignLayout>;
-export default NegoDesignLayout;