negodesign 0.0.72 → 0.0.74

package/dist/components/{core → ui}/panel/LeftHero.svelte

@@ -1,117 +1,114 @@
-<script lang="ts">
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-  import type { LoginCarouselProps } from "../../pages/security/login/types";
-  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;
-    variant?: "NUMBER" | "DOT";
-    autoPlayInterval?: number;
-  };
-
-  let {
-    title,
-    items = [],
-    variant = "DOT",
-    autoPlayInterval = 5000,
-  }: Props & LoginCarouselProps = $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 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 || $t("label.welcome")}
-      {/if}
-    </div>
-  </div>
-
-  <section class="flex flex-col gap-5">
-    <div class="my-auto max-w-sm md:max-w-md lg:max-w-100">
-      {#if currentItem}
-        {#key currentIndex}
-          <div
-            class="text-xl md:text-2xl font-bold tracking-tight mb-4 leading-tight animate-fade-in duration-300"
-          >
-            {currentItem.title}
-          </div>
-          <p
-            class=" text-sm mb-6 leading-relaxed animate-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>
-
-  <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 lg:w-105 lg:h-105"
-    />
-  </aside>
-</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 { LoginCarouselProps } from "../../pages/security/login/types";
+  import type { Snippet } from "svelte";
+  import Button from "../button/button.svelte";
+  import { t } from "../../../i18n";
+  import Logo from "../../../assets/login-01-admin.webp";
+
+  type Props = {
+    title?: string | Snippet;
+    autoPlayInterval?: number;
+  };
+
+  let {
+    title,
+    items = [],
+    type = "DOT",
+    autoPlayInterval = 5000,
+  }: Props & LoginCarouselProps = $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 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 || $t("label.welcome")}
+      {/if}
+    </div>
+  </div>
+
+  <section class="flex flex-col gap-5">
+    <div class="my-auto max-w-sm md:max-w-md lg:max-w-100">
+      {#if currentItem}
+        {#key currentIndex}
+          <div
+            class="text-xl md:text-2xl font-bold tracking-tight mb-4 leading-tight animate-fade-in duration-300"
+          >
+            {currentItem.title}
+          </div>
+          <p class=" text-sm mb-6 leading-relaxed animate-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 type === "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>
+
+  <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 lg:w-105 lg:h-105"
+    />
+  </aside>
+</div>
+
+<aside class="absolute grid-pattern p-0 top-0 h-screen w-8/12"></aside>

package/dist/components/{core → ui}/panel/LeftHero.svelte.d.ts

@@ -2,7 +2,6 @@ import type { LoginCarouselProps } from "../../pages/security/login/types";
 import type { Snippet } from "svelte";
 type Props = {
     title?: string | Snippet;
-    variant?: "NUMBER" | "DOT";
     autoPlayInterval?: number;
 };
 type $$ComponentProps = Props & LoginCarouselProps;

package/dist/components/{core → ui}/panel/NotFoundEmpty.svelte

@@ -1,66 +1,66 @@
-<script lang="ts">
-  import * as Empty from "../../ui/empty/index.js";
-  import { t } from "../../../i18n";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { Search01Icon } from "@hugeicons/core-free-icons";
-  import type { NotFoundEmptyProps } from "./type";
-
-  let {
-    title,
-    description,
-    icon = Search01Icon,
-    className = "",
-    actionHref = "#/",
-    actionLabel,
-    onAction,
-    showAction = false,
-    children,
-  }: NotFoundEmptyProps = $props();
-
-  const resolvedTitle = $derived(title ?? $t("empty.title"));
-  const resolvedDescription = $derived(description ?? $t("empty.description"));
-</script>
-
-<Empty.Root class="w-full py-8 {className}">
-  <Empty.Header>
-    {#if icon}
-      <Empty.Media variant="icon">
-        <HugeiconsIcon {icon} class="size-6 text-muted-foreground" />
-      </Empty.Media>
-    {/if}
-    <Empty.Title class="text-base font-semibold">
-      {resolvedTitle}
-    </Empty.Title>
-    <Empty.Description class="text-sm text-muted-foreground max-w-sm">
-      {resolvedDescription}
-    </Empty.Description>
-  </Empty.Header>
-
-  {#if children}
-    <Empty.Content>
-      {@render children()}
-    </Empty.Content>
-  {:else if showAction || onAction}
-    <Empty.Content>
-      {#if onAction}
-        <button
-          type="button"
-          onclick={onAction}
-          class="text-xs font-medium text-primary hover:underline"
-        >
-          {actionLabel ?? $t("empty.contact_support")}
-        </button>
-      {:else}
-        <Empty.Description class="text-xs">
-          {$t("empty.support")}
-          <a
-            href={actionHref}
-            class="text-primary hover:underline font-medium ml-1"
-          >
-            {actionLabel ?? $t("empty.contact_support")}
-          </a>
-        </Empty.Description>
-      {/if}
-    </Empty.Content>
-  {/if}
-</Empty.Root>
+<script lang="ts">
+  import * as Empty from "../empty/index.js";
+  import { t } from "../../../i18n";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Search01Icon } from "@hugeicons/core-free-icons";
+  import type { NotFoundEmptyProps } from "./type";
+
+  let {
+    title,
+    description,
+    icon = Search01Icon,
+    className = "",
+    actionHref = "#/",
+    actionLabel,
+    onAction,
+    showAction = false,
+    children,
+  }: NotFoundEmptyProps = $props();
+
+  const resolvedTitle = $derived(title ?? $t("empty.title"));
+  const resolvedDescription = $derived(description ?? $t("empty.description"));
+</script>
+
+<Empty.Root class="w-full py-8 {className}">
+  <Empty.Header>
+    {#if icon}
+      <Empty.Media variant="icon">
+        <HugeiconsIcon {icon} class="size-6 text-muted-foreground" />
+      </Empty.Media>
+    {/if}
+    <Empty.Title class="text-base font-semibold">
+      {resolvedTitle}
+    </Empty.Title>
+    <Empty.Description class="text-sm text-muted-foreground max-w-sm">
+      {resolvedDescription}
+    </Empty.Description>
+  </Empty.Header>
+
+  {#if children}
+    <Empty.Content>
+      {@render children()}
+    </Empty.Content>
+  {:else if showAction || onAction}
+    <Empty.Content>
+      {#if onAction}
+        <button
+          type="button"
+          onclick={onAction}
+          class="text-xs font-medium text-primary hover:underline"
+        >
+          {actionLabel ?? $t("empty.contact_support")}
+        </button>
+      {:else}
+        <Empty.Description class="text-xs">
+          {$t("empty.support")}
+          <a
+            href={actionHref}
+            class="text-primary hover:underline font-medium ml-1"
+          >
+            {actionLabel ?? $t("empty.contact_support")}
+          </a>
+        </Empty.Description>
+      {/if}
+    </Empty.Content>
+  {/if}
+</Empty.Root>

package/dist/components/{core → ui}/panel/type.d.ts

@@ -1,4 +1,4 @@
-import type { CarouselPlugins } from "../../ui/carousel/context";
+import type { CarouselPlugins } from "../carousel/context";
 import type { Snippet } from "svelte";
 import type { IconSvgElement } from "@hugeicons/svelte";
 /**

package/dist/components/ui/phone-input/country-selector.svelte

@@ -1,87 +1,87 @@
-<script lang="ts" module>
-	import type { Country } from './types';
-
-	export const COUNTRIES: Country[] = [
-		{ id: 'ao', iso2: 'ao', name: 'Angola', dialCode: '244' },
-		{ id: 'br', iso2: 'br', name: 'Brazil', dialCode: '55' },
-		{ id: 'cv', iso2: 'cv', name: 'Cape Verde', dialCode: '238' },
-		{ id: 'cn', iso2: 'cn', name: 'China', dialCode: '86' },
-		{ id: 'fr', iso2: 'fr', name: 'France', dialCode: '33' },
-		{ id: 'gw', iso2: 'gw', name: 'Guinea-Bissau', dialCode: '245' },
-		{ id: 'jp', iso2: 'jp', name: 'Japan', dialCode: '81' },
-		{ id: 'mz', iso2: 'mz', name: 'Mozambique', dialCode: '258' },
-		{ id: 'pt', iso2: 'pt', name: 'Portugal', dialCode: '351' },
-		{ id: 'st', iso2: 'st', name: 'São Tomé and Príncipe', dialCode: '239' },
-		{ id: 'za', iso2: 'za', name: 'South Africa', dialCode: '27' },
-		{ id: 'es', iso2: 'es', name: 'Spain', dialCode: '34' },
-		{ id: 'gb', iso2: 'gb', name: 'United Kingdom', dialCode: '44' },
-		{ id: 'us', iso2: 'us', name: 'United States', dialCode: '1' }
-	];
-</script>
-
-<script lang="ts">
-	import { cn } from '../../../utils.js';
-	import { HugeiconsIcon } from '@hugeicons/svelte';
-	import { GlobalIcon, UnfoldMoreIcon } from '@hugeicons/core-free-icons';
-	import type { CountryCode } from './types';
-
-	interface Props {
-		selected?: CountryCode | null;
-		dialCode?: string;
-		disabled?: boolean;
-		onselect?: (val: CountryCode | null) => void;
-		order?: (a: Country, b: Country) => number;
-	}
-
-	let {
-		selected = $bindable(null),
-		// eslint-disable-next-line no-useless-assignment
-	dialCode = $bindable(''),
-		disabled = false,
-		onselect = undefined,
-		order = (a, b) => {
-			return a.name.localeCompare(b.name);
-		}
-	}: Props = $props();
-
-	let ordered = $derived(COUNTRIES.slice().sort(order));
-
-	function handleChange(e: Event) {
-		selected = (e.currentTarget as HTMLSelectElement).value;
-		onselect?.(selected);
-	}
-
-	$effect(() => {
-		const country = COUNTRIES.find((c) => c.iso2 === selected);
-		dialCode = country?.dialCode ?? '';
-	});
-</script>
-
-<div class="relative flex shrink-0 items-center">
-	<HugeiconsIcon
-		icon={GlobalIcon}
-		strokeWidth={2}
-		class="text-muted-foreground pointer-events-none absolute left-2.5 size-4"
-	/>
-	<select
-		value={selected ?? ''}
-		onchange={handleChange}
-		aria-label="Country code"
-		{disabled}
-		class={cn(
-			'border-input bg-input/30 focus-visible:ring-ring/50 dark:bg-input/30 focus-visible:border-ring h-9 w-fit appearance-none rounded-l-md rounded-r-none border py-1 pr-8 pl-8 text-sm transition-[color,box-shadow] focus-visible:ring-[3px] outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>option]:bg-background',
-			disabled ? 'cursor-not-allowed opacity-50' : ''
-		)}
-	>
-		{#each ordered as country (country.id)}
-			<option value={country.iso2}>
-				{country.name} (+{country.dialCode})
-			</option>
-		{/each}
-	</select>
-	<HugeiconsIcon
-		icon={UnfoldMoreIcon}
-		strokeWidth={2}
-		class="text-muted-foreground pointer-events-none absolute right-2.5 size-4"
-	/>
+<script lang="ts" module>
+	import type { Country } from './types';
+
+	export const COUNTRIES: Country[] = [
+		{ id: 'ao', iso2: 'ao', name: 'Angola', dialCode: '244' },
+		{ id: 'br', iso2: 'br', name: 'Brazil', dialCode: '55' },
+		{ id: 'cv', iso2: 'cv', name: 'Cape Verde', dialCode: '238' },
+		{ id: 'cn', iso2: 'cn', name: 'China', dialCode: '86' },
+		{ id: 'fr', iso2: 'fr', name: 'France', dialCode: '33' },
+		{ id: 'gw', iso2: 'gw', name: 'Guinea-Bissau', dialCode: '245' },
+		{ id: 'jp', iso2: 'jp', name: 'Japan', dialCode: '81' },
+		{ id: 'mz', iso2: 'mz', name: 'Mozambique', dialCode: '258' },
+		{ id: 'pt', iso2: 'pt', name: 'Portugal', dialCode: '351' },
+		{ id: 'st', iso2: 'st', name: 'São Tomé and Príncipe', dialCode: '239' },
+		{ id: 'za', iso2: 'za', name: 'South Africa', dialCode: '27' },
+		{ id: 'es', iso2: 'es', name: 'Spain', dialCode: '34' },
+		{ id: 'gb', iso2: 'gb', name: 'United Kingdom', dialCode: '44' },
+		{ id: 'us', iso2: 'us', name: 'United States', dialCode: '1' }
+	];
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../utils.js';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import { GlobalIcon, UnfoldMoreIcon } from '@hugeicons/core-free-icons';
+	import type { CountryCode } from './types';
+
+	interface Props {
+		selected?: CountryCode | null;
+		dialCode?: string;
+		disabled?: boolean;
+		onselect?: (val: CountryCode | null) => void;
+		order?: (a: Country, b: Country) => number;
+	}
+
+	let {
+		selected = $bindable(null),
+		// eslint-disable-next-line no-useless-assignment
+	dialCode = $bindable(''),
+		disabled = false,
+		onselect = undefined,
+		order = (a, b) => {
+			return a.name.localeCompare(b.name);
+		}
+	}: Props = $props();
+
+	let ordered = $derived(COUNTRIES.slice().sort(order));
+
+	function handleChange(e: Event) {
+		selected = (e.currentTarget as HTMLSelectElement).value;
+		onselect?.(selected);
+	}
+
+	$effect(() => {
+		const country = COUNTRIES.find((c) => c.iso2 === selected);
+		dialCode = country?.dialCode ?? '';
+	});
+</script>
+
+<div class="relative flex shrink-0 items-center">
+	<HugeiconsIcon
+		icon={GlobalIcon}
+		strokeWidth={2}
+		class="text-muted-foreground pointer-events-none absolute left-2.5 size-4"
+	/>
+	<select
+		value={selected ?? ''}
+		onchange={handleChange}
+		aria-label="Country code"
+		{disabled}
+		class={cn(
+			'border-input bg-input/30 focus-visible:ring-ring/50 dark:bg-input/30 focus-visible:border-ring h-9 w-fit appearance-none rounded-l-md rounded-r-none border py-1 pr-8 pl-8 text-sm transition-[color,box-shadow] focus-visible:ring-[3px] outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>option]:bg-background',
+			disabled ? 'cursor-not-allowed opacity-50' : ''
+		)}
+	>
+		{#each ordered as country (country.id)}
+			<option value={country.iso2}>
+				{country.name} (+{country.dialCode})
+			</option>
+		{/each}
+	</select>
+	<HugeiconsIcon
+		icon={UnfoldMoreIcon}
+		strokeWidth={2}
+		class="text-muted-foreground pointer-events-none absolute right-2.5 size-4"
+	/>
 </div>

package/dist/components/ui/phone-input/flag.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-	import type { Country } from './types';
-
-	interface Props {
-		country?: Country | null;
-	}
-
-	let { country = null }: Props = $props();
-</script>
-
-<span class="bg-foreground/20 flex h-4 w-6 shrink-0 overflow-clip rounded-sm">
+<script lang="ts">
+	import type { Country } from './types';
+
+	interface Props {
+		country?: Country | null;
+	}
+
+	let { country = null }: Props = $props();
+</script>
+
+<span class="bg-foreground/20 flex h-4 w-6 shrink-0 overflow-clip rounded-sm">
 </span>