negodesign 0.0.74 → 0.0.75

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,32 @@
+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.
+ * @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 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[];
+    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 {};

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

@@ -0,0 +1,103 @@
+<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";
+
+  let {
+    title,
+    subtitle,
+    networks = [],
+    linkLabel = "Or copy link",
+    linkValue = "",
+    copyText = "Copy",
+    copiedText = "Copied!",
+    isOpen = $bindable(false),
+    onShare,
+    onCopy,
+    onClose,
+    class: className,
+  }: ModalShareSelectionProps = $props();
+
+  let copied = $state(false);
+
+  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 -->
+    <div class="flex flex-wrap items-center justify-center gap-4">
+      {#each networks 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 transition-all duration-200",
+              "hover:scale-110 hover:shadow-md"
+            )}
+            style={network.color ? `border-color: ${network.color}30` : ""}
+          >
+            {#if typeof network.icon === "string"}
+              <i
+                class="{network.icon} text-2xl transition-colors"
+                style={network.color ? `color: ${network.color}` : ""}
+              ></i>
+            {:else}
+              <HugeiconsIcon
+                icon={network.icon}
+                class="size-6 transition-colors"
+                style={network.color ? `color: ${network.color}` : ""}
+              />
+            {/if}
+          </div>
+          <span class="text-xs text-muted-foreground">{network.name}</span>
+        </button>
+      {/each}
+    </div>
+  {/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>

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

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

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

@@ -0,0 +1,3 @@
+import Root from "./ui/ModalUpload.svelte";
+export { Root, Root as ModalUpload, };
+export type { ModalUploadProps, UploadFile, UploadFileStatus } from "./types";

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

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

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

@@ -0,0 +1,79 @@
+/**
+ * Estado de um ficheiro no upload.
+ * @property uploading - A subir.
+ * @property completed - Subida concluída.
+ * @property failed - Falhou o upload.
+ */
+export type UploadFileStatus = "uploading" | "completed" | "failed";
+/**
+ * Modelo de dados para um ficheiro no modal de upload.
+ * @property id - Identificador único do ficheiro.
+ * @property name - Nome do ficheiro.
+ * @property size - Tamanho do ficheiro em bytes.
+ * @property date - Data de upload.
+ * @property progress - Percentagem de progresso (0-100).
+ * @property status - Estado do upload.
+ * @property type - Tipo MIME do ficheiro.
+ */
+export type UploadFile = {
+    id: string;
+    name: string;
+    size: number;
+    date?: string;
+    progress?: number;
+    status?: UploadFileStatus;
+    type?: string;
+};
+/**
+ * Props do componente ModalUpload — modal de upload de ficheiros.
+ * Suporta drag and drop, lista de ficheiros com progress bar e estados.
+ *
+ * @property title - Título do modal (default: "Upload File").
+ * @property accept - Tipos MIME aceites (ex: ".csv,.xlsx,.xls").
+ * @property acceptedFormats - Texto com formatos aceites.
+ * @property downloadText - Texto do link de download.
+ * @property downloadLabel - Label do link de download.
+ * @property dragText - Texto principal da área de drag.
+ * @property browseText - Texto do link "Browse".
+ * @property cancelText - Texto do botão cancelar.
+ * @property uploadText - Texto do botão upload.
+ * @property uploadLoadingText - Texto durante upload.
+ * @property files - Lista de ficheiros (bindable).
+ * @property isOpen - Controla a visibilidade do modal (bindable).
+ * @property multiple - Permite selecionar múltiplos ficheiros.
+ * @property maxSize - Tamanho máximo por ficheiro em bytes.
+ * @property isLoading - Estado de carregamento do botão upload.
+ * @property onFilesSelected - Chamado ao selecionar ficheiros.
+ * @property onUpload - Chamado ao clicar no botão Upload.
+ * @property onCancel - Chamado ao clicar no Cancel.
+ * @property onRemoveFile - Chamado ao remover um ficheiro.
+ * @property onRetryFile - Chamado ao repetir um ficheiro com falha.
+ * @property onDownload - Chamado ao clicar no link de download.
+ * @property onClose - Chamado ao fechar o modal.
+ * @property class - Classe CSS extra no container.
+ */
+export type ModalUploadProps = {
+    title?: string;
+    accept?: string;
+    acceptedFormats?: string;
+    downloadText?: string;
+    downloadLabel?: string;
+    dragText?: string;
+    browseText?: string;
+    cancelText?: string;
+    uploadText?: string;
+    uploadLoadingText?: string;
+    files?: UploadFile[];
+    isOpen?: boolean;
+    multiple?: boolean;
+    maxSize?: number;
+    isLoading?: boolean;
+    onFilesSelected?: (files: File[]) => void;
+    onUpload?: (files: UploadFile[]) => void;
+    onCancel?: () => void;
+    onRemoveFile?: (id: string) => void;
+    onRetryFile?: (id: string) => void;
+    onDownload?: () => void;
+    onClose?: () => void;
+    class?: string;
+};

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

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

package/dist/components/ui/modal/upload/ui/ModalUpload.svelte

@@ -0,0 +1,268 @@
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import {
+    Cancel01Icon,
+    Delete02Icon,
+    ArrowDown01Icon,
+    RefreshIcon,
+  } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import ModalCore from "../../core/ui/ModalCore.svelte";
+  import type { ModalUploadProps, UploadFile } from "../types";
+
+  let {
+    title = "Upload File",
+    accept = "",
+    acceptedFormats = "csv, xlsx, xls",
+    downloadText = "Download",
+    downloadLabel = "sample data for file upload",
+    dragText = "Drag and Drop or",
+    browseText = "Browse",
+    cancelText = "Cancel",
+    uploadText = "Upload",
+    uploadLoadingText = "Uploading...",
+    files = $bindable([]),
+    isOpen = $bindable(false),
+    multiple = true,
+    maxSize = 0,
+    isLoading = false,
+    onFilesSelected,
+    onUpload,
+    onCancel,
+    onRemoveFile,
+    onRetryFile,
+    onDownload,
+    onClose,
+    class: className,
+  }: ModalUploadProps = $props();
+
+  let isDragOver = $state(false);
+  let fileInputRef = $state<HTMLInputElement | null>(null);
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    isDragOver = true;
+  }
+
+  function handleDragLeave() {
+    isDragOver = false;
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    isDragOver = false;
+    const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
+    processFiles(droppedFiles);
+  }
+
+  function handleFileInput(e: Event) {
+    const inputFiles = Array.from((e.target as HTMLInputElement).files ?? []);
+    processFiles(inputFiles);
+  }
+
+  function processFiles(rawFiles: File[]) {
+    let filtered = rawFiles;
+    if (maxSize > 0) {
+      filtered = rawFiles.filter((f) => f.size <= maxSize);
+    }
+    if (filtered.length > 0) {
+      onFilesSelected?.(filtered);
+    }
+  }
+
+  function openFilePicker() {
+    fileInputRef?.click();
+  }
+
+  function formatSize(bytes: number): string {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(0)) + " " + sizes[i];
+  }
+
+  function getStatusColor(status?: string): string {
+    switch (status) {
+      case "completed":
+        return "text-green-600";
+      case "failed":
+        return "text-destructive";
+      default:
+        return "text-muted-foreground";
+    }
+  }
+
+  function handleCancel() {
+    isOpen = false;
+    onCancel?.();
+  }
+
+  function handleUpload() {
+    onUpload?.(files);
+  }
+</script>
+
+<ModalCore
+  bind:isOpen
+  {title}
+  showProgress={false}
+  showBack={false}
+  {onClose}
+  class={cn("max-w-lg", className)}
+>
+  {#snippet content()}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class={cn(
+        "flex flex-col items-center justify-center rounded-xl border-2 border-dashed p-8 text-center transition-colors",
+        isDragOver
+          ? "border-primary bg-primary/5"
+          : "border-border hover:border-primary/30"
+      )}
+      ondragover={handleDragOver}
+      ondragleave={handleDragLeave}
+      ondrop={handleDrop}
+    >
+      <input
+        bind:this={fileInputRef}
+        type="file"
+        {accept}
+        multiple={multiple}
+        class="hidden"
+        onchange={handleFileInput}
+      />
+
+      <div class="mb-3 flex size-12 items-center justify-center rounded-full bg-muted">
+        <HugeiconsIcon icon={ArrowDown01Icon} class="size-6 text-muted-foreground" />
+      </div>
+
+      <p class="text-sm text-foreground">
+        {dragText}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <span
+          class="cursor-pointer font-semibold text-primary underline"
+          onclick={openFilePicker}
+          onkeydown={(e) => { if (e.key === "Enter") openFilePicker(); }}
+        >
+          {browseText}
+        </span>
+        to Upload
+      </p>
+
+      {#if acceptedFormats}
+        <p class="mt-1 text-xs text-muted-foreground">
+          Supported formats: {acceptedFormats}
+        </p>
+      {/if}
+    </div>
+
+    <!-- Download Link -->
+    {#if onDownload}
+      <div class="mt-3 flex items-center gap-1.5 text-xs text-muted-foreground">
+        <span class="text-green-600">⬇</span>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <span>
+          <span
+            class="cursor-pointer font-medium text-primary underline"
+            onclick={onDownload}
+            onkeydown={(e) => { if (e.key === "Enter") onDownload(); }}
+          >
+            {downloadText}
+          </span>
+          {downloadLabel}
+        </span>
+      </div>
+    {/if}
+
+    <!-- File List -->
+    {#if files.length > 0}
+      <div class="mt-4 space-y-3">
+        {#each files as file (file.id)}
+          <div class="rounded-lg border border-border bg-card p-3">
+            <div class="flex items-center gap-3">
+              <!-- File Icon -->
+              <div class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                <span class="text-xs font-bold text-primary">
+                  {file.name.split(".").pop()?.toUpperCase() ?? "FILE"}
+                </span>
+              </div>
+
+              <!-- File Info -->
+              <div class="min-w-0 flex-1">
+                <p class="truncate text-sm font-medium">{file.name}</p>
+                <p class="text-xs text-muted-foreground">
+                  {#if file.date}Date: {file.date} · {/if}Size: {formatSize(file.size)}
+                </p>
+                {#if file.status}
+                  <p class={cn("text-xs font-medium", getStatusColor(file.status))}>
+                    {file.status === "completed"
+                      ? "Completed"
+                      : file.status === "failed"
+                        ? "Upload Failed"
+                        : ""}
+                  </p>
+                {/if}
+              </div>
+
+              <!-- Actions -->
+              <div class="flex items-center gap-1">
+                {#if file.status === "failed" && onRetryFile}
+                  <button
+                    type="button"
+                    class="rounded p-1 text-muted-foreground transition hover:bg-muted hover:text-foreground"
+                    onclick={() => onRetryFile(file.id)}
+                    title="Retry"
+                  >
+                    <HugeiconsIcon icon={RefreshIcon} class="size-4" />
+                  </button>
+                {/if}
+                {#if onRemoveFile}
+                  <button
+                    type="button"
+                    class="rounded p-1 text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
+                    onclick={() => onRemoveFile(file.id)}
+                    title="Remove"
+                  >
+                    <HugeiconsIcon icon={Delete02Icon} class="size-4" />
+                  </button>
+                {/if}
+              </div>
+            </div>
+
+            <!-- Progress Bar -->
+            {#if file.status === "uploading" && file.progress !== undefined}
+              <div class="mt-2.5 h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                <div
+                  class="h-full rounded-full bg-primary transition-all duration-300"
+                  style="width: {file.progress}%"
+                ></div>
+              </div>
+              <p class="mt-1 text-right text-xs text-muted-foreground">{file.progress}%</p>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {/if}
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="flex items-center justify-end 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 || files.length === 0}
+        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={handleUpload}
+      >
+        {isLoading ? uploadLoadingText : uploadText}
+      </button>
+    </div>
+  {/snippet}
+</ModalCore>

package/dist/components/ui/modal/upload/ui/ModalUpload.svelte.d.ts

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

package/dist/components/ui/section/Section01.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import {
+    ArrowLeft01Icon,
+    ArrowRight01Icon,
+  } from "@hugeicons/core-free-icons";
+  import type { Section01Props } from "./types";
+
+  let {
+    title,
+    description,
+    items = [],
+    selectedKey,
+    titleClass,
+    descriptionClass,
+    className,
+    onSelect,
+    onPrev,
+    onNext,
+  }: Section01Props = $props();
+</script>
+
+<section class={className}>
+  <div class="px-6 py-12 md:px-12 md:py-20">
+    <div
+      class="flex flex-col md:flex-row md:items-start md:justify-between gap-8 mb-12"
+    >
+      <h2
+        class="text-3xl md:text-5xl lg:text-6xl font-bold leading-tight {titleClass}"
+      >
+        {title}
+      </h2>
+      <div class="flex flex-col gap-6 md:max-w-md">
+        <p class="text-sm md:text-base text-gray-600 {descriptionClass}">
+          {description}
+        </p>
+        <div class="flex items-center gap-4">
+          <button
+            onclick={onPrev}
+            class="flex items-center justify-center w-10 h-10 rounded-full border border-gray-300 hover:bg-gray-200 transition-colors"
+          >
+            <HugeiconsIcon icon={ArrowLeft01Icon} class="size-5" />
+          </button>
+          <div class="flex-1 h-0.5">
+            <div class="h-full bg-black w-1/3"></div>
+          </div>
+          <button
+            onclick={onNext}
+            class="flex items-center justify-center w-10 h-10 rounded-full border border-gray-300 hover:bg-gray-200 transition-colors"
+          >
+            <HugeiconsIcon icon={ArrowRight01Icon} class="size-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      {#each items as item, i (i)}
+        <button
+          onclick={() => onSelect?.(item.id ?? i)}
+          class="flex flex-col items-start text-left p-6 rounded-2xl transition-colors {item.isActive
+            ? 'bg-[#3d3d3d] text-white'
+            : 'bg-white text-black hover:bg-gray-100'}"
+        >
+          <div
+            class="flex items-center justify-center w-14 h-14 rounded-full bg-white/20 mb-6 {item.isActive
+              ? 'bg-white/20'
+              : 'bg-gray-100'}"
+          >
+            {#if typeof item.icon === "string"}
+              <i class="text-2xl {item.icon}"></i>
+            {:else}
+              <HugeiconsIcon icon={item.icon} class="size-7" />
+            {/if}
+          </div>
+          <h3 class="text-lg font-bold mb-2">{item.title}</h3>
+          {#if item.description}
+            <p
+              class="text-sm {item.isActive
+                ? 'text-gray-300'
+                : 'text-gray-500'}"
+            >
+              {item.description}
+            </p>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  </div>
+</section>

package/dist/components/ui/section/Section01.svelte.d.ts

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