negodesign 0.0.74 → 0.0.75

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

@@ -0,0 +1,51 @@
+export type { 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.
+ * @property label - Texto visível da categoria.
+ * @property value - Valor identificador da categoria.
+ */
+export type ModelGridCategory = {
+    label: string;
+    value: string;
+};
+/**
+ * Props do componente ModalGridSelection — modal de seleção em grid.
+ * Suporta duas variantes visuais: 1 (centrado 3 colunas) e 2 (dark 2 colunas + categorias).
+ * @property variant - Variante visual do modal (1 ou 2).
+ * @property title - Título principal do modal.
+ * @property subtitle - Subtítulo/descrição abaixo do título.
+ * @property categories - Lista de categorias no topo (apenas variante 2).
+ * @property selectedCategory - Categoria seleccionada (apenas variante 2).
+ * @property cards - Lista de cards seleccionáveis.
+ * @property selectedCard - Card actualmente seleccionado.
+ * @property selectedCards - Cards seleccionados (modo múltiplo, variante 2).
+ * @property multiple - Permite seleção múltipla (variante 2).
+ * @property totalSteps - Número total de passos (para pagination dots).
+ * @property currentStep - Passo actual (para pagination dots).
+ * @property isOpen - Controla a visibilidade do modal.
+ * @property onSelect - Chamado ao seleccionar um card.
+ * @property onSelectCategory - Chamado ao seleccionar uma categoria (variante 2).
+ * @property onBack - Chamado ao clicar no botão "Back".
+ * @property onContinue - Chamado ao clicar no botão "Continue".
+ * @property class - Classe CSS extra no container do modal.
+ */
+export type ModalGridSelectionProps = {
+    variant?: 1 | 2;
+    title: string;
+    subtitle?: string;
+    categories?: ModelGridCategory[];
+    selectedCategory?: ModelGridCategory | null;
+    cards: import("../core/types").ModelGridCard[];
+    selectedCard?: import("../core/types").ModelGridCard | null;
+    selectedCards?: import("../core/types").ModelGridCard[];
+    multiple?: boolean;
+    totalSteps?: number;
+    currentStep?: number;
+    isOpen?: boolean;
+    onSelect?: (card: import("../core/types").ModelGridCard) => void;
+    onSelectCategory?: (category: ModelGridCategory) => void;
+    onBack?: () => void;
+    onContinue?: () => void;
+    class?: string;
+};

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

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

package/dist/components/ui/modal/grid/ui/01/ModalGridSelection01.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { cn } from "../../../../../../utils";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import ModalCore from "../../../core/ui/ModalCore.svelte";
+  import type { ModalGridSelectionProps, ModelGridCard } from "../../types";
+
+  let {
+    title,
+    subtitle,
+    cards = [],
+    selectedCard = $bindable(null),
+    totalSteps = 1,
+    currentStep = 1,
+    isOpen = $bindable(false),
+    onSelect,
+    onBack,
+    onContinue,
+    class: className,
+  }: ModalGridSelectionProps = $props();
+
+  let hoveredIndex = $state<number | null>(null);
+
+  function handleSelect(card: ModelGridCard) {
+    selectedCard = card;
+    onSelect?.(card);
+  }
+
+  function isSelected(card: ModelGridCard): boolean {
+    return selectedCard?.title === card.title;
+  }
+</script>
+
+<ModalCore
+  bind:isOpen
+  {title}
+  {subtitle}
+  {totalSteps}
+  {currentStep}
+  showProgress={false}
+  showBack={currentStep > 1}
+  {onBack}
+  {onContinue}
+  class={className}
+>
+  {#snippet content()}
+    <div class="grid grid-cols-2 gap-4 md:grid-cols-3">
+      {#each cards as card, i (i)}
+        {@const selected = isSelected(card)}
+        {@const hovered = hoveredIndex === i}
+        <button
+          type="button"
+          class={cn(
+            "flex flex-col items-center gap-3 rounded-xl border-2 p-6 text-center transition-all duration-200",
+            selected
+              ? "border-primary bg-primary/5 shadow-md"
+              : "border-border hover:border-primary/50 hover:shadow-sm",
+            hovered && !selected && "border-primary/30"
+          )}
+          onclick={() => handleSelect(card)}
+          onmouseenter={() => (hoveredIndex = i)}
+          onmouseleave={() => (hoveredIndex = null)}
+        >
+          {#if typeof card.icon === "string"}
+            <i class="{card.icon} text-4xl text-muted-foreground md:text-5xl"></i>
+          {:else}
+            <HugeiconsIcon
+              icon={card.icon}
+              class="size-10 text-muted-foreground md:size-12"
+            />
+          {/if}
+
+          <p class="text-sm font-bold md:text-base">{card.title}</p>
+
+          {#if card.description}
+            <p class="line-clamp-2 text-xs text-muted-foreground md:text-sm">
+              {card.description}
+            </p>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/snippet}
+</ModalCore>

package/dist/components/ui/modal/grid/ui/01/ModalGridSelection01.svelte.d.ts

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

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

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

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 {};