negodesign 0.0.74 → 0.0.76

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

@@ -0,0 +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>

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

@@ -0,0 +1,4 @@
+import type { ModalGridSelectionProps } from "../../types";
+declare const ModalGridSelection02: import("svelte").Component<ModalGridSelectionProps, {}, "isOpen" | "selectedCard" | "selectedCategory" | "selectedCards">;
+type ModalGridSelection02 = ReturnType<typeof ModalGridSelection02>;
+export default ModalGridSelection02;

package/dist/components/ui/modal/grid/ui/ModalGridSelection.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { ModalGridSelectionProps } from "../types";
+  import ModalGridSelection01 from "./01/ModalGridSelection01.svelte";
+  import ModalGridSelection02 from "./02/ModalGridSelection02.svelte";
+
+  let {
+    variant = 1,
+    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();
+</script>
+
+{#if variant === 2}
+  <ModalGridSelection02
+    bind:isOpen
+    bind:selectedCard
+    bind:selectedCards
+    bind:selectedCategory
+    {title}
+    {subtitle}
+    {categories}
+    {cards}
+    {multiple}
+    {totalSteps}
+    {currentStep}
+    {onSelect}
+    {onSelectCategory}
+    {onBack}
+    {onContinue}
+    class={className}
+  />
+{:else}
+  <ModalGridSelection01
+    bind:isOpen
+    bind:selectedCard
+    {title}
+    {subtitle}
+    {cards}
+    {totalSteps}
+    {currentStep}
+    {onSelect}
+    {onBack}
+    {onContinue}
+    class={className}
+  />
+{/if}

package/dist/components/ui/modal/grid/ui/ModalGridSelection.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalGridSelectionProps } from "../types";
+declare const ModalGridSelection: import("svelte").Component<ModalGridSelectionProps, {}, "isOpen" | "selectedCard" | "selectedCategory" | "selectedCards">;
+type ModalGridSelection = ReturnType<typeof ModalGridSelection>;
+export default ModalGridSelection;

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

@@ -0,0 +1,3 @@
+import Root from "./ui/ModalMap.svelte";
+export { Root, Root as ModalMap, };
+export type { ModalMapProps } from "./types";

package/dist/components/ui/modal/map/index.js

@@ -0,0 +1,2 @@
+import Root from "./ui/ModalMap.svelte";
+export { Root, Root as ModalMap, };

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

@@ -0,0 +1,48 @@
+/**
+ * Props do componente ModalMap — modal de seleção de localização com mapa.
+ * Sexta variação do sistema de modais do NegoDesign.
+ * @property title - Título do popup de localização (ex: "Location").
+ * @property searchPlaceholder - Texto placeholder da barra de pesquisa.
+ * @property address - Endereço actual.
+ * @property addressLabel - Label do campo de endereço (ex: "Address").
+ * @property description - Descrição/notas da localização.
+ * @property descriptionLabel - Label do campo de descrição (ex: "Description").
+ * @property editButtonText - Texto do botão "Edit" do endereço.
+ * @property useLocationText - Texto da checkbox de usar localização actual.
+ * @property useLocationChecked - Estado da checkbox.
+ * @property cancelText - Texto do botão cancelar.
+ * @property applyText - Texto do botão aplicar.
+ * @property isLoading - Estado de carregamento.
+ * @property isOpen - Controla a visibilidade do modal.
+ * @property onSearch - Chamado ao pesquisar um endereço.
+ * @property onEdit - Chamado ao clicar no botão Edit.
+ * @property onApply - Chamado ao clicar no botão Apply.
+ * @property onCancel - Chamado ao clicar no botão Cancel.
+ * @property onToggleLocation - Chamado ao alterar a checkbox.
+ * @property onClose - Chamado ao fechar o modal.
+ * @property mapSlot - Snippet personalizado para o conteúdo do mapa.
+ * @property class - Classe CSS extra no container do modal.
+ */
+export type ModalMapProps = {
+    title?: string;
+    searchPlaceholder?: string;
+    address?: string;
+    addressLabel?: string;
+    description?: string;
+    descriptionLabel?: string;
+    editButtonText?: string;
+    useLocationText?: string;
+    useLocationChecked?: boolean;
+    cancelText?: string;
+    applyText?: string;
+    isLoading?: boolean;
+    isOpen?: boolean;
+    onSearch?: (query: string) => void;
+    onEdit?: () => void;
+    onApply?: (address: string, description: string) => void;
+    onCancel?: () => void;
+    onToggleLocation?: (checked: boolean) => void;
+    onClose?: () => void;
+    mapSlot?: import("svelte").Snippet;
+    class?: string;
+};

package/dist/components/ui/modal/map/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/modal/map/ui/ModalMap.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import { Search01Icon, Cancel01Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import ModalCore from "../../core/ui/ModalCore.svelte";
+  import type { ModalMapProps } from "../types";
+
+  let {
+    title = "Location",
+    searchPlaceholder = "Search address...",
+    address = "",
+    addressLabel = "Address",
+    description = "",
+    descriptionLabel = "Description",
+    editButtonText = "Edit",
+    useLocationText = "Use your business location",
+    useLocationChecked = $bindable(false),
+    cancelText = "Cancel",
+    applyText = "Apply",
+    isLoading = false,
+    isOpen = $bindable(false),
+    onSearch,
+    onEdit,
+    onApply,
+    onCancel,
+    onToggleLocation,
+    onClose,
+    mapSlot,
+    class: className,
+  }: ModalMapProps = $props();
+
+  let searchQuery = $state("");
+  let localDescription = $state("");
+
+  $effect(() => {
+    searchQuery = address;
+    localDescription = description;
+  });
+
+  function handleSearch() {
+    onSearch?.(searchQuery);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") handleSearch();
+  }
+
+  function handleApply() {
+    onApply?.(searchQuery, localDescription);
+  }
+
+  function handleCancel() {
+    isOpen = false;
+    onCancel?.();
+  }
+
+  function handleToggle(e: Event) {
+    const checked = (e.target as HTMLInputElement).checked;
+    useLocationChecked = checked;
+    onToggleLocation?.(checked);
+  }
+</script>
+
+<ModalCore
+  bind:isOpen
+  title=""
+  showProgress={false}
+  showBack={false}
+  {onClose}
+  class={cn("max-w-2xl overflow-hidden p-0!", className)}
+>
+  {#snippet content()}
+    <div class="-mx-8 -mt-6 mb-0 flex flex-col">
+      <!-- Map Area -->
+      <div class="relative h-72 w-full bg-muted md:h-96">
+        {#if mapSlot}
+          {@render mapSlot()}
+        {:else}
+          <!-- Placeholder map with grid pattern -->
+          <div class="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-size-[20px_20px] opacity-50"></div>
+          <div class="absolute inset-0 flex items-center justify-center">
+            <div class="flex size-10 items-center justify-center rounded-full bg-primary shadow-lg">
+              <div class="size-3 rounded-full bg-white"></div>
+            </div>
+          </div>
+        {/if}
+
+        <!-- Search Bar -->
+        <div class="absolute left-4 right-4 top-4">
+          <div class="flex items-center gap-2 rounded-xl border border-border bg-card shadow-lg">
+            <HugeiconsIcon icon={Search01Icon} class="ml-3 size-4 text-muted-foreground" />
+            <input
+              type="text"
+              bind:value={searchQuery}
+              placeholder={searchPlaceholder}
+              class="flex-1 bg-transparent py-3 pr-4 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+              onkeydown={handleKeydown}
+            />
+          </div>
+        </div>
+
+        <!-- Location Popup Card -->
+        <div class="absolute bottom-4 left-4 right-4 rounded-xl border border-border bg-card p-5 shadow-lg md:left-auto md:right-4 md:w-80">
+          <div class="mb-4 flex items-center justify-between">
+            <h3 class="text-lg font-bold">{title}</h3>
+            <button
+              type="button"
+              class="text-muted-foreground transition hover:text-foreground"
+              onclick={() => (isOpen = false)}
+            >
+              <HugeiconsIcon icon={Cancel01Icon} class="size-4" />
+            </button>
+          </div>
+
+          <!-- Address -->
+          <div class="mb-4">
+            <!-- svelte-ignore a11y_label_has_associated_control -->
+            <label class="mb-1.5 block text-sm font-medium text-muted-foreground">
+              {addressLabel}
+            </label>
+            <div class="flex items-center gap-2">
+              <input
+                type="text"
+                bind:value={searchQuery}
+                class="flex-1 rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
+              />
+              <button
+                type="button"
+                class="shrink-0 rounded-lg border border-border px-3 py-2 text-sm font-medium text-muted-foreground transition hover:bg-muted"
+                onclick={onEdit}
+              >
+                {editButtonText}
+              </button>
+            </div>
+          </div>
+
+          <!-- Description -->
+          <div>
+            <!-- svelte-ignore a11y_label_has_associated_control -->
+            <label class="mb-1.5 block text-sm font-medium text-muted-foreground">
+              {descriptionLabel}
+            </label>
+            <textarea
+              bind:value={localDescription}
+              rows={3}
+              class="w-full resize-none rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
+            ></textarea>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="flex items-center justify-between">
+      <!-- Use Location Checkbox -->
+      <label class="flex cursor-pointer items-center gap-2.5">
+        <input
+          type="checkbox"
+          checked={useLocationChecked}
+          onchange={handleToggle}
+          class="size-4 rounded border-border text-primary accent-primary"
+        />
+        <span class="text-sm font-medium text-muted-foreground">{useLocationText}</span>
+      </label>
+
+      <!-- Actions -->
+      <div class="flex items-center gap-3">
+        <button
+          type="button"
+          class="rounded-lg border border-border px-5 py-2.5 text-sm font-semibold transition hover:bg-muted"
+          onclick={handleCancel}
+        >
+          {cancelText}
+        </button>
+        <button
+          type="button"
+          disabled={isLoading}
+          class="rounded-lg bg-primary px-6 py-2.5 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
+          onclick={handleApply}
+        >
+          {applyText}
+        </button>
+      </div>
+    </div>
+  {/snippet}
+</ModalCore>

package/dist/components/ui/modal/map/ui/ModalMap.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalMapProps } from "../types";
+declare const ModalMap: import("svelte").Component<ModalMapProps, {}, "isOpen" | "useLocationChecked">;
+type ModalMap = ReturnType<typeof ModalMap>;
+export default ModalMap;

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

@@ -0,0 +1,3 @@
+import Root from "./ui/ModalNotification.svelte";
+export { Root, Root as ModalNotification, };
+export type { ModalNotificationProps } from "./types";

package/dist/components/ui/modal/notification/index.js

@@ -0,0 +1,2 @@
+import Root from "./ui/ModalNotification.svelte";
+export { Root, Root as ModalNotification, };

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

@@ -0,0 +1,26 @@
+/**
+ * Props do componente ModalNotification — modal de subscrição/notificação por email.
+ * Quarta variação do sistema de modais do NegoDesign.
+ * @property title - Título principal do modal (ex: "Be the first to know").
+ * @property description - Texto descritivo abaixo do título.
+ * @property placeholder - Texto placeholder do input de email.
+ * @property buttonText - Texto do botão de submissão.
+ * @property buttonLoadingText - Texto exibido durante o carregamento.
+ * @property isLoading - Estado de carregamento do botão.
+ * @property isOpen - Controla a visibilidade do modal.
+ * @property onSubmit - Chamado ao submeter o email.
+ * @property onClose - Chamado ao fechar o modal.
+ * @property class - Classe CSS extra no container do modal.
+ */
+export type ModalNotificationProps = {
+    title: string;
+    description?: string;
+    placeholder?: string;
+    buttonText?: string;
+    buttonLoadingText?: string;
+    isLoading?: boolean;
+    isOpen?: boolean;
+    onSubmit?: (email: string) => void;
+    onClose?: () => void;
+    class?: string;
+};

package/dist/components/ui/modal/notification/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/modal/notification/ui/ModalNotification.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import ModalCore from "../../core/ui/ModalCore.svelte";
+  import type { ModalNotificationProps } from "../types";
+
+  let {
+    title,
+    description,
+    placeholder = "Your email address",
+    buttonText = "Sign me up",
+    buttonLoadingText = "Signing up...",
+    isLoading = false,
+    isOpen = $bindable(false),
+    onSubmit,
+    onClose,
+    class: className,
+  }: ModalNotificationProps = $props();
+
+  let email = $state("");
+
+  function handleSubmit() {
+    if (!email.trim() || isLoading) return;
+    onSubmit?.(email);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") handleSubmit();
+  }
+</script>
+
+<ModalCore
+  bind:isOpen
+  {title}
+  showProgress={false}
+  showBack={false}
+  {onClose}
+  class={cn("max-w-lg", className)}
+>
+  {#snippet content()}
+    {#if description}
+      <p class="text-sm text-muted-foreground">{description}</p>
+    {/if}
+
+    <div class="mt-6 flex items-center gap-3">
+      <input
+        type="email"
+        {placeholder}
+        bind:value={email}
+        onkeydown={handleKeydown}
+        class="flex-1 rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/20"
+      />
+      <button
+        type="button"
+        disabled={isLoading || !email.trim()}
+        class={cn(
+          "shrink-0 rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground transition-all",
+          "hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
+        )}
+        onclick={handleSubmit}
+      >
+        {isLoading ? buttonLoadingText : buttonText}
+      </button>
+    </div>
+  {/snippet}
+</ModalCore>

package/dist/components/ui/modal/notification/ui/ModalNotification.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalNotificationProps } from "../types";
+declare const ModalNotification: import("svelte").Component<ModalNotificationProps, {}, "isOpen">;
+type ModalNotification = ReturnType<typeof ModalNotification>;
+export default ModalNotification;

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

@@ -0,0 +1,3 @@
+import Root from "./ui/ModalShareSelection.svelte";
+export { Root, Root as ModalShareSelection, };
+export type { ModelSocialShare, ModalShareSelectionProps } from "./types";

package/dist/components/ui/modal/share/index.js

@@ -0,0 +1,2 @@
+import Root from "./ui/ModalShareSelection.svelte";
+export { Root, Root as ModalShareSelection, };

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

@@ -0,0 +1,47 @@
+import type { ModelSocialShare } from "../core/types";
+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.
+ * @property copiedText - Texto exibido após copiar com sucesso.
+ * @property isOpen - Controla a visibilidade do modal.
+ * @property onShare - Chamado ao clicar numa rede social.
+ * @property onCopy - Chamado ao clicar no botão copiar.
+ * @property onClose - Chamado ao fechar o modal.
+ * @property class - Classe CSS extra no container do modal.
+ */
+export type ModalShareSelectionProps = {
+    title: string;
+    subtitle?: string;
+    networks?: ModelSocialShare[];
+    isWhatsapp?: boolean;
+    isInstagram?: boolean;
+    isFacebook?: boolean;
+    isTwitter?: boolean;
+    isLinkedin?: boolean;
+    isPinterest?: boolean;
+    isTumblr?: boolean;
+    linkLabel?: string;
+    linkValue?: string;
+    copyText?: string;
+    copiedText?: string;
+    isOpen?: boolean;
+    onShare?: (network: ModelSocialShare) => void;
+    onCopy?: (link: string) => void;
+    onClose?: () => void;
+    class?: string;
+};

package/dist/components/ui/modal/share/types.js

@@ -0,0 +1 @@
+export {};