negodesign 0.0.75 → 0.0.77

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

@@ -1,129 +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 bg-card shadow-lg",
-        "before:absolute before:-inset-px before:z-[-1] before:rounded-3xl before:bg-linear-to-br before:from-primary/40 before:via-primary/10 before:to-transparent",
-        "animate-in fade-in zoom-in-95 duration-200",
-        className
-      )}
-    >
-      <!-- Header -->
-      <div class="px-8 pt-8">
-        <h2 class="text-2xl font-extrabold tracking-tight md:text-3xl">
-          {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 bg-muted">
-              <div
-                class="h-full rounded-full bg-linear-to-r from-primary to-primary/70 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 hover:bg-muted"
-                  onclick={onBack}
-                >
-                  <HugeiconsIcon icon={ArrowLeft01Icon} class="size-4" />
-                  {backText}
-                </button>
-              {/if}
-
-              <button
-                type="button"
-                class="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-2.5 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
-                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 transition"
+                onclick={onContinue}
+              >
+                {continueText}
+                <HugeiconsIcon icon={ArrowRight01Icon} class="size-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

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

@@ -1,142 +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("dark", 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
-                ? "border-white/20 bg-white/10 text-white"
-                : "border-white/10 bg-transparent text-white/60 hover:border-white/20 hover:text-white/80"
-            )}
-            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
-              ? "border-primary/50 bg-primary/10"
-              : "border-white/10 bg-white/5 hover:border-white/20 hover:bg-white/8"
-          )}
-          onclick={() => handleSelectCard(card)}
-        >
-          <!-- Icon -->
-          <div
-            class={cn(
-              "flex size-10 shrink-0 items-center justify-center rounded-lg",
-              selected ? "bg-primary/20" : "bg-white/10"
-            )}
-          >
-            {#if typeof card.icon === "string"}
-              <i class="{card.icon} text-lg text-white/70"></i>
-            {:else}
-              <HugeiconsIcon icon={card.icon} class="size-5 text-white/70" />
-            {/if}
-          </div>
-
-          <!-- Text -->
-          <div class="min-w-0 flex-1">
-            <p class="text-sm font-bold text-white">{card.title}</p>
-            {#if card.description}
-              <p class="mt-0.5 line-clamp-1 text-xs text-white/50">
-                {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>

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

@@ -3,9 +3,17 @@ export type { ModelSocialShare } from "../core/types";
 /**
  * Props do componente ModalShareSelection — modal de partilha em redes sociais.
  * Terceira variação do sistema de modais do NegoDesign.
+ * Cada rede social pode ser activada/inactivada com as propriedades isX.
  * @property title - Título principal do modal (ex: "Share this design").
  * @property subtitle - Subtítulo/descrição abaixo do título.
  * @property networks - Lista de redes sociais para partilhar.
+ * @property isWhatsapp - Mostra a rede social WhatsApp.
+ * @property isInstagram - Mostra a rede social Instagram.
+ * @property isFacebook - Mostra a rede social Facebook.
+ * @property isTwitter - Mostra a rede social Twitter/X.
+ * @property isLinkedin - Mostra a rede social LinkedIn.
+ * @property isPinterest - Mostra a rede social Pinterest.
+ * @property isTumblr - Mostra a rede social Tumblr.
  * @property linkLabel - Texto acima do input de link (ex: "Or copy link").
  * @property linkValue - URL a ser partilhada/copiada.
  * @property copyText - Texto do botão de copiar.
@@ -19,7 +27,14 @@ export type { ModelSocialShare } from "../core/types";
 export type ModalShareSelectionProps = {
     title: string;
     subtitle?: string;
-    networks: ModelSocialShare[];
+    networks?: ModelSocialShare[];
+    isWhatsapp?: boolean;
+    isInstagram?: boolean;
+    isFacebook?: boolean;
+    isTwitter?: boolean;
+    isLinkedin?: boolean;
+    isPinterest?: boolean;
+    isTumblr?: boolean;
     linkLabel?: string;
     linkValue?: string;
     copyText?: string;