negodesign 0.0.77 → 0.0.79

package/dist/components/ui/link/link-privacy-polity.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.privacy-policy.label")}
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.privacy-policy.label")}
+</a>

package/dist/components/ui/link/link-terms-of-service.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.terms-of-service.label")}
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.terms-of-service.label")}
+</a>

package/dist/components/ui/modal/core/index.d.ts

@@ -1,3 +1,3 @@
 import Root from "./ui/ModalCore.svelte";
 export { Root, Root as ModalCore, };
-export type { ModalCoreProps, ModelBadge, ModelGridCard, ModelSocialShare } from "./types";
+export type { ModalCoreProps, ModelBadge, ModelGridCardProps as ModelGridCard, ModelSocialShare } from "./types";

package/dist/components/ui/modal/core/types.d.ts

@@ -61,10 +61,11 @@ export type ModelBadge = {
  * @property description - Descrição curta exibida abaixo do título.
  * @property icon - Ícone exibido no topo do card (string CSS ou HugeIcons).
  */
-export type ModelGridCard = {
+export type ModelGridCardProps = {
     title: string;
     description?: string;
     icon: string | IconSvgElement;
+    url?: string;
 };
 /**
  * Modelo de dados para uma rede social no modal de partilha.

package/dist/components/ui/modal/core/ui/ModalCore.svelte

@@ -1,132 +1,132 @@
-<script lang="ts">
-  import { cn } from "../../../../../utils";
-  import {
-    ArrowLeft01Icon,
-    ArrowRight01Icon,
-  } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import type { ModalCoreProps } from "../types";
-
-  let {
-    isOpen = $bindable(false),
-    title,
-    subtitle,
-    totalSteps = 1,
-    currentStep = 1,
-    showProgress = true,
-    showBack = true,
-    showSkip = false,
-    skipText = "Skip This Step",
-    continueText = "Continue",
-    backText = "Back",
-    onBack,
-    onContinue,
-    onSkip,
-    onClose,
-    content,
-    footer,
-    class: className,
-  }: ModalCoreProps = $props();
-
-  function handleClose() {
-    isOpen = false;
-    onClose?.();
-  }
-
-  const progressPercent = $derived(
-    totalSteps > 0 ? (currentStep / totalSteps) * 100 : 0,
-  );
-</script>
-
-{#if isOpen}
-  <div class="fixed inset-0 z-50 flex items-center justify-center">
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="absolute inset-0 bg-black/50 backdrop-blur-sm"
-      onclick={handleClose}
-      onkeydown={(e) => {
-        if (e.key === "Escape") handleClose();
-      }}
-    ></div>
-
-    <div
-      class={cn(
-        "relative z-10 mx-4 flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-3xl border border-border shadow-lg bg-background",
-        "before:absolute before:-inset-px before:z-[-1] before:rounded-3xl",
-        "animate-in fade-in zoom-in-95 duration-200",
-        className,
-      )}
-    >
-      <!-- Header -->
-      <div class="px-8 pt-8">
-        <h2 class="text-2xl font-semibold tracking-tight">
-          {title}
-        </h2>
-        {#if subtitle}
-          <p class="mt-2 text-sm text-muted-foreground">{subtitle}</p>
-        {/if}
-      </div>
-
-      <!-- Content -->
-      <div class="flex-1 overflow-y-auto px-8 py-6">
-        {#if content}
-          {@render content()}
-        {/if}
-      </div>
-
-      <!-- Footer -->
-      {#if footer}
-        <div class="border-t border-border px-8 py-5">
-          {@render footer()}
-        </div>
-      {:else}
-        <div class="border-t border-border px-8 py-5">
-          {#if showProgress}
-            <div class="mb-5 h-1.5 w-full overflow-hidden rounded-full">
-              <div
-                class="h-full rounded-full transition-all duration-300"
-                style="width: {progressPercent}%"
-              ></div>
-            </div>
-          {/if}
-
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-4">
-              {#if showSkip}
-                <button
-                  type="button"
-                  class="text-sm font-medium text-muted-foreground transition hover:text-foreground"
-                  onclick={onSkip}
-                >
-                  {skipText}
-                </button>
-              {/if}
-            </div>
-
-            <div class="flex items-center gap-3">
-              {#if showBack && currentStep > 1}
-                <button
-                  type="button"
-                  class="inline-flex items-center gap-2 rounded-full border border-border px-5 py-2.5 text-sm font-semibold transition"
-                  onclick={onBack}
-                >
-                  <HugeiconsIcon icon={ArrowLeft01Icon} class="size-4" />
-                  {backText}
-                </button>
-              {/if}
-
-              <button
-                type="button"
-                class="inline-flex items-center gap-2 rounded-full px-6 py-2.5 text-sm font-semibold bg-primary transition"
-                onclick={onContinue}
-              >
-                {continueText}
-                <HugeiconsIcon icon={ArrowRight01Icon} class="size-4" />
-              </button>
-            </div>
-          </div>
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import {
+    ArrowLeft01Icon,
+    ArrowRight01Icon,
+  } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { ModalCoreProps } from "../types";
+
+  let {
+    isOpen = $bindable(false),
+    title,
+    subtitle,
+    totalSteps = 1,
+    currentStep = 1,
+    showProgress = true,
+    showBack = true,
+    showSkip = false,
+    skipText = "Skip This Step",
+    continueText = "Continue",
+    backText = "Back",
+    onBack,
+    onContinue,
+    onSkip,
+    onClose,
+    content,
+    footer,
+    class: className,
+  }: ModalCoreProps = $props();
+
+  function handleClose() {
+    isOpen = false;
+    onClose?.();
+  }
+
+  const progressPercent = $derived(
+    totalSteps > 0 ? (currentStep / totalSteps) * 100 : 0,
+  );
+</script>
+
+{#if isOpen}
+  <div class="fixed inset-0 z-50 flex items-center justify-center">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="absolute inset-0 bg-black/50 backdrop-blur-sm"
+      onclick={handleClose}
+      onkeydown={(e) => {
+        if (e.key === "Escape") handleClose();
+      }}
+    ></div>
+
+    <div
+      class={cn(
+        "relative z-10 mx-4 flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-3xl border border-border shadow-lg bg-background",
+        "before:absolute before:-inset-px before:z-[-1] before:rounded-3xl",
+        "animate-in fade-in zoom-in-95 duration-200",
+        className,
+      )}
+    >
+      <!-- Header -->
+      <div class="px-8 pt-8">
+        <h2 class="text-2xl font-semibold tracking-tight">
+          {title}
+        </h2>
+        {#if subtitle}
+          <p class="mt-2 text-sm text-muted-foreground">{subtitle}</p>
+        {/if}
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 overflow-y-auto px-8 py-6">
+        {#if content}
+          {@render content()}
+        {/if}
+      </div>
+
+      <!-- Footer -->
+      {#if footer}
+        <div class="border-t border-border px-8 py-5">
+          {@render footer()}
+        </div>
+      {:else}
+        <div class="border-t border-border px-8 py-5">
+          {#if showProgress}
+            <div class="mb-5 h-1.5 w-full overflow-hidden rounded-full">
+              <div
+                class="h-full rounded-full transition-all duration-300"
+                style="width: {progressPercent}%"
+              ></div>
+            </div>
+          {/if}
+
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-4">
+              {#if showSkip}
+                <button
+                  type="button"
+                  class="text-sm font-medium text-muted-foreground transition hover:text-foreground"
+                  onclick={onSkip}
+                >
+                  {skipText}
+                </button>
+              {/if}
+            </div>
+
+            <div class="flex items-center gap-3">
+              {#if showBack && currentStep > 1}
+                <button
+                  type="button"
+                  class="inline-flex items-center gap-2 rounded-full border border-border px-5 py-2.5 text-sm font-semibold transition"
+                  onclick={onBack}
+                >
+                  <HugeiconsIcon icon={ArrowLeft01Icon} class="size-4" />
+                  {backText}
+                </button>
+              {/if}
+
+              <button
+                type="button"
+                class="inline-flex items-center gap-2 rounded-full px-6 py-2.5 text-sm font-semibold bg-primary text-white transition"
+                onclick={onContinue}
+              >
+                {continueText}
+                <HugeiconsIcon icon={ArrowRight01Icon} class="size-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/components/ui/modal/grid/types.d.ts

@@ -1,4 +1,5 @@
-export type { ModelGridCard } from "../core/types";
+import type { ModelGridCardProps } from "../core/types";
+export type { ModelGridCardProps as ModelGridCard } from "../core/types";
 /**
  * Modelo de dados para uma categoria/selecção no topo do modal (variante 2).
  * Cada categoria filtra ou indica o contexto dos cards.
@@ -36,14 +37,14 @@ export type ModalGridSelectionProps = {
     subtitle?: string;
     categories?: ModelGridCategory[];
     selectedCategory?: ModelGridCategory | null;
-    cards: import("../core/types").ModelGridCard[];
-    selectedCard?: import("../core/types").ModelGridCard | null;
-    selectedCards?: import("../core/types").ModelGridCard[];
+    cards: ModelGridCardProps[];
+    selectedCard?: ModelGridCardProps | null;
+    selectedCards?: ModelGridCardProps[];
     multiple?: boolean;
     totalSteps?: number;
     currentStep?: number;
     isOpen?: boolean;
-    onSelect?: (card: import("../core/types").ModelGridCard) => void;
+    onSelect?: (card: ModelGridCardProps) => void;
     onSelectCategory?: (category: ModelGridCategory) => void;
     onBack?: () => void;
     onContinue?: () => void;

package/dist/components/ui/modal/grid/ui/02/ModalGridSelection02.svelte

@@ -1,146 +1,146 @@
-<script lang="ts">
-  import { cn } from "../../../../../../utils";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { CheckmarkCircle02Icon } from "@hugeicons/core-free-icons";
-  import ModalCore from "../../../core/ui/ModalCore.svelte";
-  import type {
-    ModalGridSelectionProps,
-    ModelGridCard,
-    ModelGridCategory,
-  } from "../../types";
-
-  let {
-    title,
-    subtitle,
-    categories = [],
-    selectedCategory = $bindable(null),
-    cards = [],
-    selectedCard = $bindable(null),
-    selectedCards = $bindable([]),
-    multiple = false,
-    totalSteps = 1,
-    currentStep = 1,
-    isOpen = $bindable(false),
-    onSelect,
-    onSelectCategory,
-    onBack,
-    onContinue,
-    class: className,
-  }: ModalGridSelectionProps = $props();
-
-  function handleSelectCard(card: ModelGridCard) {
-    if (multiple) {
-      const exists = selectedCards.some(
-        (c: ModelGridCard) => c.title === card.title,
-      );
-      if (exists) {
-        selectedCards = selectedCards.filter(
-          (c: ModelGridCard) => c.title !== card.title,
-        );
-      } else {
-        selectedCards = [...selectedCards, card];
-      }
-      onSelect?.(card);
-    } else {
-      selectedCard = card;
-      onSelect?.(card);
-    }
-  }
-
-  function handleSelectCategory(category: ModelGridCategory) {
-    selectedCategory = category;
-    onSelectCategory?.(category);
-  }
-
-  function isSelectedCard(card: ModelGridCard): boolean {
-    if (multiple) {
-      return selectedCards.some((c: ModelGridCard) => c.title === card.title);
-    }
-    return selectedCard?.title === card.title;
-  }
-
-  function isSelectedCategory(category: ModelGridCategory): boolean {
-    return selectedCategory?.value === category.value;
-  }
-</script>
-
-<ModalCore
-  bind:isOpen
-  {title}
-  {subtitle}
-  {totalSteps}
-  {currentStep}
-  showProgress={false}
-  showBack={currentStep > 1}
-  {onBack}
-  {onContinue}
-  class={cn(className)}
->
-  {#snippet content()}
-    <!-- Categories -->
-    {#if categories.length > 0}
-      <div class="mb-6 flex flex-wrap gap-2">
-        {#each categories as cat (cat.value)}
-          {@const active = isSelectedCategory(cat)}
-          <button
-            type="button"
-            class={cn(
-              "rounded-full border px-4 py-1.5 text-sm font-medium transition-all duration-200",
-              active ? "" : "",
-            )}
-            onclick={() => handleSelectCategory(cat)}
-          >
-            {cat.label}
-          </button>
-        {/each}
-      </div>
-    {/if}
-
-    <!-- Cards Grid -->
-    <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-      {#each cards as card, i (i)}
-        {@const selected = isSelectedCard(card)}
-        <button
-          type="button"
-          class={cn(
-            "relative flex items-center gap-4 rounded-xl border p-4 text-left transition-all duration-200",
-            selected ? "" : "",
-          )}
-          onclick={() => handleSelectCard(card)}
-        >
-          <!-- Icon -->
-          <div
-            class={cn(
-              "flex size-10 shrink-0 items-center justify-center rounded-lg",
-              selected ? "bg-primary/20" : "bg-primary/40",
-            )}
-          >
-            {#if typeof card.icon === "string"}
-              <i class="{card.icon} text-lg"></i>
-            {:else}
-              <HugeiconsIcon icon={card.icon} class="size-5" />
-            {/if}
-          </div>
-
-          <!-- Text -->
-          <div class="min-w-0 flex-1">
-            <p class="text-sm font-bold">{card.title}</p>
-            {#if card.description}
-              <p class="mt-0.5 line-clamp-1 text-xs">
-                {card.description}
-              </p>
-            {/if}
-          </div>
-
-          <!-- Checkmark -->
-          {#if selected}
-            <HugeiconsIcon
-              icon={CheckmarkCircle02Icon}
-              class="size-5 shrink-0 text-primary"
-            />
-          {/if}
-        </button>
-      {/each}
-    </div>
-  {/snippet}
-</ModalCore>
+<script lang="ts">
+  import { cn } from "../../../../../../utils";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { CheckmarkCircle02Icon } from "@hugeicons/core-free-icons";
+  import ModalCore from "../../../core/ui/ModalCore.svelte";
+  import type {
+    ModalGridSelectionProps,
+    ModelGridCard,
+    ModelGridCategory,
+  } from "../../types";
+
+  let {
+    title,
+    subtitle,
+    categories = [],
+    selectedCategory = $bindable(null),
+    cards = [],
+    selectedCard = $bindable(null),
+    selectedCards = $bindable([]),
+    multiple = false,
+    totalSteps = 1,
+    currentStep = 1,
+    isOpen = $bindable(false),
+    onSelect,
+    onSelectCategory,
+    onBack,
+    onContinue,
+    class: className,
+  }: ModalGridSelectionProps = $props();
+
+  function handleSelectCard(card: ModelGridCard) {
+    if (multiple) {
+      const exists = selectedCards.some(
+        (c: ModelGridCard) => c.title === card.title,
+      );
+      if (exists) {
+        selectedCards = selectedCards.filter(
+          (c: ModelGridCard) => c.title !== card.title,
+        );
+      } else {
+        selectedCards = [...selectedCards, card];
+      }
+      onSelect?.(card);
+    } else {
+      selectedCard = card;
+      onSelect?.(card);
+    }
+  }
+
+  function handleSelectCategory(category: ModelGridCategory) {
+    selectedCategory = category;
+    onSelectCategory?.(category);
+  }
+
+  function isSelectedCard(card: ModelGridCard): boolean {
+    if (multiple) {
+      return selectedCards.some((c: ModelGridCard) => c.title === card.title);
+    }
+    return selectedCard?.title === card.title;
+  }
+
+  function isSelectedCategory(category: ModelGridCategory): boolean {
+    return selectedCategory?.value === category.value;
+  }
+</script>
+
+<ModalCore
+  bind:isOpen
+  {title}
+  {subtitle}
+  {totalSteps}
+  {currentStep}
+  showProgress={false}
+  showBack={currentStep > 1}
+  {onBack}
+  {onContinue}
+  class={cn(className)}
+>
+  {#snippet content()}
+    <!-- Categories -->
+    {#if categories.length > 0}
+      <div class="mb-6 flex flex-wrap gap-2">
+        {#each categories as cat (cat.value)}
+          {@const active = isSelectedCategory(cat)}
+          <button
+            type="button"
+            class={cn(
+              "rounded-full border px-4 py-1.5 text-sm font-medium transition-all duration-200",
+              active ? "" : "",
+            )}
+            onclick={() => handleSelectCategory(cat)}
+          >
+            {cat.label}
+          </button>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Cards Grid -->
+    <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+      {#each cards as card, i (i)}
+        {@const selected = isSelectedCard(card)}
+        <button
+          type="button"
+          class={cn(
+            "relative flex items-center gap-4 rounded-xl border p-4 text-left transition-all duration-200",
+            selected ? "" : "",
+          )}
+          onclick={() => handleSelectCard(card)}
+        >
+          <!-- Icon -->
+          <div
+            class={cn(
+              "flex size-10 shrink-0 items-center justify-center rounded-lg",
+              selected ? "bg-primary/20" : "bg-primary/40",
+            )}
+          >
+            {#if typeof card.icon === "string"}
+              <i class="{card.icon} text-lg"></i>
+            {:else}
+              <HugeiconsIcon icon={card.icon} class="size-5" />
+            {/if}
+          </div>
+
+          <!-- Text -->
+          <div class="min-w-0 flex-1">
+            <p class="text-sm font-bold">{card.title}</p>
+            {#if card.description}
+              <p class="mt-0.5 line-clamp-1 text-xs">
+                {card.description}
+              </p>
+            {/if}
+          </div>
+
+          <!-- Checkmark -->
+          {#if selected}
+            <HugeiconsIcon
+              icon={CheckmarkCircle02Icon}
+              class="size-5 shrink-0 text-primary"
+            />
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/snippet}
+</ModalCore>