negodesign 0.0.74 → 0.0.76

package/dist/components/ui/modal/core/ui/ModalCore.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import {
+    ArrowLeft01Icon,
+    ArrowRight01Icon,
+  } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { ModalCoreProps } from "../types";
+
+  let {
+    isOpen = $bindable(false),
+    title,
+    subtitle,
+    totalSteps = 1,
+    currentStep = 1,
+    showProgress = true,
+    showBack = true,
+    showSkip = false,
+    skipText = "Skip This Step",
+    continueText = "Continue",
+    backText = "Back",
+    onBack,
+    onContinue,
+    onSkip,
+    onClose,
+    content,
+    footer,
+    class: className,
+  }: ModalCoreProps = $props();
+
+  function handleClose() {
+    isOpen = false;
+    onClose?.();
+  }
+
+  const progressPercent = $derived(
+    totalSteps > 0 ? (currentStep / totalSteps) * 100 : 0,
+  );
+</script>
+
+{#if isOpen}
+  <div class="fixed inset-0 z-50 flex items-center justify-center">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="absolute inset-0 bg-black/50 backdrop-blur-sm"
+      onclick={handleClose}
+      onkeydown={(e) => {
+        if (e.key === "Escape") handleClose();
+      }}
+    ></div>
+
+    <div
+      class={cn(
+        "relative z-10 mx-4 flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-3xl border border-border shadow-lg bg-background",
+        "before:absolute before:-inset-px before:z-[-1] before:rounded-3xl",
+        "animate-in fade-in zoom-in-95 duration-200",
+        className,
+      )}
+    >
+      <!-- Header -->
+      <div class="px-8 pt-8">
+        <h2 class="text-2xl font-semibold tracking-tight">
+          {title}
+        </h2>
+        {#if subtitle}
+          <p class="mt-2 text-sm text-muted-foreground">{subtitle}</p>
+        {/if}
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 overflow-y-auto px-8 py-6">
+        {#if content}
+          {@render content()}
+        {/if}
+      </div>
+
+      <!-- Footer -->
+      {#if footer}
+        <div class="border-t border-border px-8 py-5">
+          {@render footer()}
+        </div>
+      {:else}
+        <div class="border-t border-border px-8 py-5">
+          {#if showProgress}
+            <div class="mb-5 h-1.5 w-full overflow-hidden rounded-full">
+              <div
+                class="h-full rounded-full transition-all duration-300"
+                style="width: {progressPercent}%"
+              ></div>
+            </div>
+          {/if}
+
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-4">
+              {#if showSkip}
+                <button
+                  type="button"
+                  class="text-sm font-medium text-muted-foreground transition hover:text-foreground"
+                  onclick={onSkip}
+                >
+                  {skipText}
+                </button>
+              {/if}
+            </div>
+
+            <div class="flex items-center gap-3">
+              {#if showBack && currentStep > 1}
+                <button
+                  type="button"
+                  class="inline-flex items-center gap-2 rounded-full border border-border px-5 py-2.5 text-sm font-semibold transition"
+                  onclick={onBack}
+                >
+                  <HugeiconsIcon icon={ArrowLeft01Icon} class="size-4" />
+                  {backText}
+                </button>
+              {/if}
+
+              <button
+                type="button"
+                class="inline-flex items-center gap-2 rounded-full px-6 py-2.5 text-sm font-semibold bg-primary transition"
+                onclick={onContinue}
+              >
+                {continueText}
+                <HugeiconsIcon icon={ArrowRight01Icon} class="size-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/components/ui/modal/core/ui/ModalCore.svelte.d.ts

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+/**
+ * Props do componente ModalFeedback — modal de feedback com editor de texto rico.
+ * Quinta variação do sistema de modais do NegoDesign.
+ * @property title - Título principal do modal (ex: "Your Feedback").
+ * @property icon - Emoji/ícone exibido ao lado do título.
+ * @property placeholder - Texto placeholder da área de texto.
+ * @property buttonText - Texto do botão de submissão.
+ * @property buttonLoadingText - Texto exibido durante o carregamento.
+ * @property cancelText - Texto do botão cancelar.
+ * @property addImageText - Texto do botão de adicionar imagem.
+ * @property isLoading - Estado de carregamento do botão.
+ * @property isOpen - Controla a visibilidade do modal.
+ * @property onSubmit - Chamado ao submeter o feedback (conteúdo HTML + imagens).
+ * @property onAddImage - Chamado ao clicar no botão de adicionar imagem.
+ * @property onClose - Chamado ao fechar o modal.
+ * @property class - Classe CSS extra no container do modal.
+ */
+export type ModalFeedbackProps = {
+    title?: string;
+    icon?: string;
+    placeholder?: string;
+    buttonText?: string;
+    buttonLoadingText?: string;
+    cancelText?: string;
+    addImageText?: string;
+    isLoading?: boolean;
+    isOpen?: boolean;
+    onSubmit?: (content: string, images: File[]) => void;
+    onAddImage?: () => void;
+    onClose?: () => void;
+    class?: string;
+};

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

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

package/dist/components/ui/modal/feedback/ui/ModalFeedback.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import ModalCore from "../../core/ui/ModalCore.svelte";
+  import type { ModalFeedbackProps } from "../types";
+
+  let {
+    title = "Your Feedback",
+    icon = "🔥",
+    placeholder = "Write your feedback here...",
+    buttonText = "Send",
+    buttonLoadingText = "Sending...",
+    cancelText = "Cancel",
+    addImageText = "Add an Image",
+    isLoading = false,
+    isOpen = $bindable(false),
+    onSubmit,
+    onAddImage,
+    onClose,
+    class: className,
+  }: ModalFeedbackProps = $props();
+
+  let editorRef = $state<HTMLDivElement | null>(null);
+  let images = $state<File[]>([]);
+
+  function execCmd(command: string, value?: string) {
+    document.execCommand(command, false, value);
+    editorRef?.focus();
+  }
+
+  function handleAddImage() {
+    onAddImage?.();
+  }
+
+  function handleSubmit() {
+    const content = editorRef?.innerHTML ?? "";
+    if (!content.trim() || isLoading) return;
+    onSubmit?.(content, images);
+  }
+
+  function handleCancel() {
+    isOpen = false;
+    onClose?.();
+  }
+
+  const toolbarButtons = [
+    { command: "bold", label: "B", class: "font-bold" },
+    { command: "italic", label: "I", class: "italic" },
+    { command: "underline", label: "U", class: "underline" },
+    { command: "insertUnorderedList", label: "•", class: "" },
+    { command: "insertOrderedList", label: "1.", class: "" },
+    { command: "undo", label: "↶", class: "" },
+    { command: "redo", label: "↷", class: "" },
+    { command: "justifyLeft", label: "⫷", class: "" },
+    { command: "justifyCenter", label: "⫿", class: "" },
+    { command: "justifyRight", label: "⫸", class: "" },
+  ] as const;
+</script>
+
+<ModalCore
+  bind:isOpen
+  {title}
+  showProgress={false}
+  showBack={false}
+  {onClose}
+  class={cn("max-w-lg", className)}
+>
+  {#snippet content()}
+    <!-- Toolbar -->
+    <div class="mb-3 flex flex-wrap items-center gap-1 rounded-t-lg border border-border bg-muted/50 px-3 py-2">
+      {#each toolbarButtons as btn (btn.command)}
+        <button
+          type="button"
+          class={cn(
+            "flex size-8 items-center justify-center rounded text-sm text-muted-foreground transition hover:bg-border hover:text-foreground",
+            btn.class
+          )}
+          onclick={() => execCmd(btn.command)}
+          title={btn.command}
+        >
+          {btn.label}
+        </button>
+      {/each}
+    </div>
+
+    <!-- Editor -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      bind:this={editorRef}
+      contenteditable="true"
+      class="min-h-[160px] rounded-b-lg border border-t-0 border-border bg-card px-4 py-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-primary/20"
+      data-placeholder={placeholder}
+      onkeydown={(e) => {
+        if (e.key === "Enter" && e.ctrlKey) handleSubmit();
+      }}
+    ></div>
+
+    <!-- Add Image Button -->
+    <button
+      type="button"
+      class="mt-4 flex w-full items-center justify-center gap-2 rounded-lg border-2 border-dashed border-orange-300 bg-orange-50/50 py-3 text-sm font-medium text-orange-600 transition hover:bg-orange-50 dark:bg-orange-950/20 dark:text-orange-400 dark:hover:bg-orange-950/30"
+      onclick={handleAddImage}
+    >
+      <span class="text-lg">🖼️</span>
+      {addImageText}
+    </button>
+  {/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}
+        class="rounded-lg bg-orange-500 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-600 disabled:cursor-not-allowed disabled:opacity-50"
+        onclick={handleSubmit}
+      >
+        {isLoading ? buttonLoadingText : buttonText}
+      </button>
+    </div>
+  {/snippet}
+</ModalCore>
+
+<style>
+  [contenteditable]:empty:before {
+    content: attr(data-placeholder);
+    color: oklch(0.56 0.021 213.5);
+    pointer-events: none;
+  }
+</style>

package/dist/components/ui/modal/feedback/ui/ModalFeedback.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+import Root from "./ui/ModalForm.svelte";
+export { Root, Root as ModalForm, };
+export type { ModalFormProps, FormInputConfig, FormOption } from "./types";

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

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

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

@@ -0,0 +1,38 @@
+import type { FormInputConfig } from "../../form/types";
+export type { FormInputConfig, FormOption, FormProps } from "../../form/types";
+/**
+ * Props do componente ModalForm — formulário dentro de um modal.
+ * Reutiliza o componente Form com a mesma API de inputs, adicionando
+ * overlay, título, subtítulo e botões de navegação do modal.
+ *
+ * @property title - Título principal do modal.
+ * @property subtitle - Subtítulo/descrição abaixo do título.
+ * @property inputs - Array de configurações dos inputs do formulário.
+ * @property isOpen - Controla a visibilidade do modal (bindable).
+ * @property submitText - Texto do botão de submissão.
+ * @property submitLoadingText - Texto durante carregamento.
+ * @property cancelText - Texto do botão cancelar.
+ * @property isLoading - Estado de carregamento.
+ * @property showCancel - Exibe o botão cancelar.
+ * @property columns - Número de colunas da grid (padrão: 2).
+ * @property onSubmit - Callback ao submeter o formulário.
+ * @property onCancel - Chamado ao clicar no botão cancelar ou fechar.
+ * @property onClose - Chamado ao fechar o modal.
+ * @property class - Classe CSS extra no container do modal.
+ */
+export type ModalFormProps = {
+    title: string;
+    subtitle?: string;
+    inputs: FormInputConfig[];
+    isOpen?: boolean;
+    submitText?: string;
+    submitLoadingText?: string;
+    cancelText?: string;
+    isLoading?: boolean;
+    showCancel?: boolean;
+    columns?: 1 | 2;
+    onSubmit?: (data: Record<string, string | string[] | boolean>) => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    class?: string;
+};

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

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

package/dist/components/ui/modal/form/ui/ModalForm.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import ModalCore from "../../core/ui/ModalCore.svelte";
+  import Form from "../../../form/Form.svelte";
+  import type { ModalFormProps } from "../types";
+
+  let {
+    title,
+    subtitle,
+    inputs = [],
+    isOpen = $bindable(false),
+    submitText = "Submit",
+    submitLoadingText = "Submitting...",
+    cancelText = "Cancel",
+    isLoading = false,
+    showCancel = true,
+    columns = 2,
+    onSubmit,
+    onCancel,
+    onClose,
+    class: className,
+  }: ModalFormProps = $props();
+
+  function handleSubmit(data: Record<string, string | string[] | boolean>) {
+    onSubmit?.(data);
+  }
+
+  function handleCancel() {
+    isOpen = false;
+    onCancel?.();
+  }
+</script>
+
+<ModalCore
+  bind:isOpen
+  {title}
+  {subtitle}
+  showProgress={false}
+  showBack={false}
+  {onClose}
+  class={cn("max-w-2xl", className)}
+>
+  {#snippet content()}
+    <Form
+      {inputs}
+      {columns}
+      {submitText}
+      {submitLoadingText}
+      {isLoading}
+      onSubmit={handleSubmit}
+    />
+  {/snippet}
+
+  {#snippet footer()}
+    {#if showCancel}
+      <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>
+      </div>
+    {/if}
+  {/snippet}
+</ModalCore>

package/dist/components/ui/modal/form/ui/ModalForm.svelte.d.ts

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

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

@@ -0,0 +1,5 @@
+import Root from "./ui/ModalGridSelection.svelte";
+import ModalGridSelection01 from "./ui/01/ModalGridSelection01.svelte";
+import ModalGridSelection02 from "./ui/02/ModalGridSelection02.svelte";
+export { Root, Root as ModalGridSelection, ModalGridSelection01, ModalGridSelection02, };
+export type { ModelGridCard, ModelGridCategory, ModalGridSelectionProps } from "./types";

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

@@ -0,0 +1,4 @@
+import Root from "./ui/ModalGridSelection.svelte";
+import ModalGridSelection01 from "./ui/01/ModalGridSelection01.svelte";
+import ModalGridSelection02 from "./ui/02/ModalGridSelection02.svelte";
+export { Root, Root as ModalGridSelection, ModalGridSelection01, ModalGridSelection02, };

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;