negodesign 0.0.81 → 0.0.82

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>

package/dist/components/ui/modal/share/ui/ModalShareSelection.svelte

@@ -1,156 +1,156 @@
-<script lang="ts">
-  import { cn } from "../../../../../utils";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import ModalCore from "../../core/ui/ModalCore.svelte";
-  import type { ModalShareSelectionProps, ModelSocialShare } from "../types";
-
-  const defaultNetworks: ModelSocialShare[] = [
-    { name: "WhatsApp", img: "/img/icons8-whatsapp-48.png", color: "#25D366" },
-    {
-      name: "Instagram",
-      img: "/img/icons8-instagram-48.png",
-      color: "#E4405F",
-    },
-    { name: "Facebook", img: "/img/icons8-facebook-48.png", color: "#1877F2" },
-    { name: "Twitter", img: "/img/icons8-twitterx-50.png", color: "#000000" },
-    { name: "LinkedIn", img: "/img/icons8-linkedin-48.png", color: "#0A66C2" },
-    {
-      name: "Pinterest",
-      img: "/img/icons8-pinterest-48.png",
-      color: "#E60023",
-    },
-    { name: "Tumblr", img: "/img/icons8-tumblr-48.png", color: "#36465D" },
-  ];
-
-  let {
-    title,
-    subtitle,
-    networks,
-    isWhatsapp = true,
-    isInstagram = true,
-    isFacebook = true,
-    isTwitter = true,
-    isLinkedin = true,
-    isPinterest = false,
-    isTumblr = false,
-    linkLabel = "Or copy link",
-    linkValue = "",
-    copyText = "Copy",
-    copiedText = "Copied!",
-    isOpen = $bindable(false),
-    onShare,
-    onCopy,
-    onClose,
-    class: className,
-  }: ModalShareSelectionProps = $props();
-
-  let copied = $state(false);
-
-  const networkFlags: Record<string, boolean> = $derived({
-    whatsapp: isWhatsapp,
-    instagram: isInstagram,
-    facebook: isFacebook,
-    twitter: isTwitter,
-    linkedin: isLinkedin,
-    pinterest: isPinterest,
-    tumblr: isTumblr,
-  });
-
-  const visibleNetworks = $derived(
-    (networks?.length ? networks : defaultNetworks).filter(
-      (network) => networkFlags[network.name.toLowerCase()] ?? true,
-    ),
-  );
-
-  function handleCopy() {
-    navigator.clipboard.writeText(linkValue).then(() => {
-      copied = true;
-      onCopy?.(linkValue);
-      setTimeout(() => (copied = false), 2000);
-    });
-  }
-</script>
-
-<ModalCore
-  bind:isOpen
-  {title}
-  {subtitle}
-  showProgress={false}
-  showBack={false}
-  {onClose}
-  class={cn("max-w-lg", className)}
->
-  {#snippet content()}
-    <!-- Social Networks -->
-    {#if visibleNetworks.length > 0}
-      <div class="flex flex-wrap items-center justify-center gap-4">
-        {#each visibleNetworks as network (network.name)}
-          <button
-            type="button"
-            class="group flex flex-col items-center gap-2"
-            onclick={() => onShare?.(network)}
-          >
-            <div
-              class={cn(
-                "flex size-14 items-center justify-center rounded-full border-2 border-border bg-white transition-all duration-200",
-                "hover:scale-110 hover:shadow-md",
-              )}
-              style={network.color ? `border-color: ${network.color}30` : ""}
-            >
-              {#snippet icon()}
-                {#if network.img}
-                  <img
-                    src={network.img}
-                    alt={network.name}
-                    class="size-7 object-contain transition-transform duration-200 group-hover:scale-110"
-                    loading="lazy"
-                  />
-                {:else if typeof network.icon === "string"}
-                  <i
-                    class="{network.icon} text-2xl transition-colors"
-                    style={network.color ? `color: ${network.color}` : ""}
-                  ></i>
-                {:else if network.icon}
-                  <HugeiconsIcon
-                    icon={network.icon}
-                    class="size-6 transition-colors"
-                    style={network.color ? `color: ${network.color}` : ""}
-                  />
-                {/if}
-              {/snippet}
-              {@render icon()}
-            </div>
-            <span class="text-xs text-muted-foreground">{network.name}</span>
-          </button>
-        {/each}
-      </div>
-    {/if}
-  {/snippet}
-
-  {#snippet footer()}
-    <!-- Copy Link -->
-    <div>
-      <p class="mb-3 text-sm font-medium text-muted-foreground">{linkLabel}</p>
-      <div class="flex items-center gap-2">
-        <input
-          type="text"
-          readonly
-          value={linkValue}
-          class="flex-1 rounded-lg border border-border bg-muted px-4 py-2.5 text-sm text-foreground outline-none"
-        />
-        <button
-          type="button"
-          class={cn(
-            "shrink-0 rounded-lg px-5 py-2.5 text-sm font-semibold transition-colors",
-            copied
-              ? "bg-green-500 text-white"
-              : "bg-primary text-primary-foreground hover:bg-primary/90",
-          )}
-          onclick={handleCopy}
-        >
-          {copied ? copiedText : copyText}
-        </button>
-      </div>
-    </div>
-  {/snippet}
-</ModalCore>
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import ModalCore from "../../core/ui/ModalCore.svelte";
+  import type { ModalShareSelectionProps, ModelSocialShare } from "../types";
+
+  const defaultNetworks: ModelSocialShare[] = [
+    { name: "WhatsApp", img: "/img/icons8-whatsapp-48.png", color: "#25D366" },
+    {
+      name: "Instagram",
+      img: "/img/icons8-instagram-48.png",
+      color: "#E4405F",
+    },
+    { name: "Facebook", img: "/img/icons8-facebook-48.png", color: "#1877F2" },
+    { name: "Twitter", img: "/img/icons8-twitterx-50.png", color: "#000000" },
+    { name: "LinkedIn", img: "/img/icons8-linkedin-48.png", color: "#0A66C2" },
+    {
+      name: "Pinterest",
+      img: "/img/icons8-pinterest-48.png",
+      color: "#E60023",
+    },
+    { name: "Tumblr", img: "/img/icons8-tumblr-48.png", color: "#36465D" },
+  ];
+
+  let {
+    title,
+    subtitle,
+    networks,
+    isWhatsapp = true,
+    isInstagram = true,
+    isFacebook = true,
+    isTwitter = true,
+    isLinkedin = true,
+    isPinterest = false,
+    isTumblr = false,
+    linkLabel = "Or copy link",
+    linkValue = "",
+    copyText = "Copy",
+    copiedText = "Copied!",
+    isOpen = $bindable(false),
+    onShare,
+    onCopy,
+    onClose,
+    class: className,
+  }: ModalShareSelectionProps = $props();
+
+  let copied = $state(false);
+
+  const networkFlags: Record<string, boolean> = $derived({
+    whatsapp: isWhatsapp,
+    instagram: isInstagram,
+    facebook: isFacebook,
+    twitter: isTwitter,
+    linkedin: isLinkedin,
+    pinterest: isPinterest,
+    tumblr: isTumblr,
+  });
+
+  const visibleNetworks = $derived(
+    (networks?.length ? networks : defaultNetworks).filter(
+      (network) => networkFlags[network.name.toLowerCase()] ?? true,
+    ),
+  );
+
+  function handleCopy() {
+    navigator.clipboard.writeText(linkValue).then(() => {
+      copied = true;
+      onCopy?.(linkValue);
+      setTimeout(() => (copied = false), 2000);
+    });
+  }
+</script>
+
+<ModalCore
+  bind:isOpen
+  {title}
+  {subtitle}
+  showProgress={false}
+  showBack={false}
+  {onClose}
+  class={cn("max-w-lg", className)}
+>
+  {#snippet content()}
+    <!-- Social Networks -->
+    {#if visibleNetworks.length > 0}
+      <div class="flex flex-wrap items-center justify-center gap-4">
+        {#each visibleNetworks as network (network.name)}
+          <button
+            type="button"
+            class="group flex flex-col items-center gap-2"
+            onclick={() => onShare?.(network)}
+          >
+            <div
+              class={cn(
+                "flex size-14 items-center justify-center rounded-full border-2 border-border bg-white transition-all duration-200",
+                "hover:scale-110 hover:shadow-md",
+              )}
+              style={network.color ? `border-color: ${network.color}30` : ""}
+            >
+              {#snippet icon()}
+                {#if network.img}
+                  <img
+                    src={network.img}
+                    alt={network.name}
+                    class="size-7 object-contain transition-transform duration-200 group-hover:scale-110"
+                    loading="lazy"
+                  />
+                {:else if typeof network.icon === "string"}
+                  <i
+                    class="{network.icon} text-2xl transition-colors"
+                    style={network.color ? `color: ${network.color}` : ""}
+                  ></i>
+                {:else if network.icon}
+                  <HugeiconsIcon
+                    icon={network.icon}
+                    class="size-6 transition-colors"
+                    style={network.color ? `color: ${network.color}` : ""}
+                  />
+                {/if}
+              {/snippet}
+              {@render icon()}
+            </div>
+            <span class="text-xs text-muted-foreground">{network.name}</span>
+          </button>
+        {/each}
+      </div>
+    {/if}
+  {/snippet}
+
+  {#snippet footer()}
+    <!-- Copy Link -->
+    <div>
+      <p class="mb-3 text-sm font-medium text-muted-foreground">{linkLabel}</p>
+      <div class="flex items-center gap-2">
+        <input
+          type="text"
+          readonly
+          value={linkValue}
+          class="flex-1 rounded-lg border border-border bg-muted px-4 py-2.5 text-sm text-foreground outline-none"
+        />
+        <button
+          type="button"
+          class={cn(
+            "shrink-0 rounded-lg px-5 py-2.5 text-sm font-semibold transition-colors",
+            copied
+              ? "bg-green-500 text-white"
+              : "bg-primary text-primary-foreground hover:bg-primary/90",
+          )}
+          onclick={handleCopy}
+        >
+          {copied ? copiedText : copyText}
+        </button>
+      </div>
+    </div>
+  {/snippet}
+</ModalCore>