negodesign 0.0.74 → 0.0.76

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

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

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;

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
+  import type { Section02Props } from "./types";
+
+  let {
+    title,
+    description,
+    image,
+    imageAlt,
+    features = [],
+    titleClass,
+    descriptionClass,
+    className,
+    imageClass,
+  }: Section02Props = $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 gap-8 md:gap-16">
+      <div class="flex flex-col gap-8 md:w-1/2">
+        <h2
+          class="text-3xl md:text-5xl lg:text-6xl font-bold leading-tight {titleClass}"
+        >
+          {title}
+        </h2>
+        {#if image}
+          <div class="rounded-3xl overflow-hidden">
+            <img
+              src={image}
+              alt={imageAlt ?? title}
+              class="w-full h-auto object-cover {imageClass}"
+            />
+          </div>
+        {/if}
+      </div>
+
+      <div class="flex flex-col gap-8 md:w-1/2">
+        {#if description}
+          <p class="text-sm md:text-base text-gray-600 {descriptionClass}">
+            {description}
+          </p>
+        {/if}
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
+          {#each features as feature, i (i)}
+            <div class="flex flex-col gap-3">
+              <h3 class="text-lg font-bold">{feature.title}</h3>
+              {#if feature.description}
+                <p class="text-sm text-gray-500">{feature.description}</p>
+              {/if}
+              {#if feature.link}
+                <a
+                  href={feature.link}
+                  class="inline-flex items-center gap-2 text-sm font-semibold mt-2 hover:opacity-80 transition-opacity"
+                >
+                  {feature.linkLabel ?? "Learn More"}
+                  <HugeiconsIcon icon={ArrowRight01Icon} class="size-4" />
+                </a>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>