negodesign 0.0.73 → 0.0.75

package/dist/components/{core → ui}/link/link-privacy-polity.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.privacy-policy.label")}
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.privacy-policy.label")}
+</a>

package/dist/components/{core → ui}/link/link-terms-of-service.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.terms-of-service.label")}
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.terms-of-service.label")}
+</a>

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

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

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

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

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

@@ -0,0 +1,35 @@
+import type { ModelBadge } from "../core/types";
+export type { ModelBadge } from "../core/types";
+/**
+ * Props do componente ModalBadgeSelection — modal de seleção com badges/pills.
+ * Segunda variação do sistema de modais do NegoDesign.
+ * @property title - Título principal do modal.
+ * @property subtitle - Subtítulo/descrição abaixo do título.
+ * @property badges - Lista de badges/pills seleccionáveis.
+ * @property selectedBadge - Badge actualmente seleccionado.
+ * @property multiple - Permite seleção múltipla de badges.
+ * @property totalSteps - Número total de passos (para a progress bar).
+ * @property currentStep - Passo actual.
+ * @property isOpen - Controla a visibilidade do modal.
+ * @property onSelect - Chamado ao seleccionar um badge.
+ * @property onBack - Chamado ao clicar no botão "Back".
+ * @property onContinue - Chamado ao clicar no botão "Continue".
+ * @property onSkip - Chamado ao clicar no "Skip This Step".
+ * @property class - Classe CSS extra no container do modal.
+ */
+export type ModalBadgeSelectionProps = {
+    title: string;
+    subtitle?: string;
+    badges: ModelBadge[];
+    selectedBadge?: ModelBadge | null;
+    selectedBadges?: ModelBadge[];
+    multiple?: boolean;
+    totalSteps?: number;
+    currentStep?: number;
+    isOpen?: boolean;
+    onSelect?: (badge: ModelBadge) => void;
+    onBack?: () => void;
+    onContinue?: () => void;
+    onSkip?: () => void;
+    class?: string;
+};

package/dist/components/ui/modal/badge/ui/ModalBadgeSelection.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import ModalCore from "../../core/ui/ModalCore.svelte";
+  import type { ModalBadgeSelectionProps, ModelBadge } from "../types";
+
+  let {
+    title,
+    subtitle,
+    badges = [],
+    selectedBadge = $bindable(null),
+    selectedBadges = $bindable([]),
+    multiple = false,
+    totalSteps = 1,
+    currentStep = 1,
+    isOpen = $bindable(false),
+    onSelect,
+    onBack,
+    onContinue,
+    onSkip,
+    class: className,
+  }: ModalBadgeSelectionProps = $props();
+
+  function handleSelect(badge: ModelBadge) {
+    if (multiple) {
+      const exists = selectedBadges.some((b) => b.value === badge.value);
+      if (exists) {
+        selectedBadges = selectedBadges.filter((b) => b.value !== badge.value);
+      } else {
+        selectedBadges = [...selectedBadges, badge];
+      }
+      onSelect?.(badge);
+    } else {
+      selectedBadge = badge;
+      onSelect?.(badge);
+    }
+  }
+
+  function isSelected(badge: ModelBadge): boolean {
+    if (multiple) {
+      return selectedBadges.some((b) => b.value === badge.value);
+    }
+    return selectedBadge?.value === badge.value;
+  }
+</script>
+
+<ModalCore
+  bind:isOpen
+  {title}
+  {subtitle}
+  {totalSteps}
+  {currentStep}
+  showProgress={true}
+  showBack={false}
+  showSkip={true}
+  {onBack}
+  {onContinue}
+  {onSkip}
+  class={className}
+>
+  {#snippet content()}
+    <div class="flex flex-wrap gap-3">
+      {#each badges as badge (badge.value)}
+        {@const selected = isSelected(badge)}
+        <button
+          type="button"
+          class={cn(
+            "inline-flex items-center gap-2 rounded-full border px-5 py-2.5 text-sm font-medium transition-all duration-200",
+            selected
+              ? "border-foreground bg-foreground text-background shadow-md"
+              : "border-border bg-card text-foreground hover:border-foreground/50 hover:shadow-sm"
+          )}
+          onclick={() => handleSelect(badge)}
+        >
+          {#if badge.icon}
+            {#if typeof badge.icon === "string"}
+              <i class="{badge.icon} text-sm"></i>
+            {:else}
+              <HugeiconsIcon icon={badge.icon} class="size-4" />
+            {/if}
+          {/if}
+          {badge.label}
+        </button>
+      {/each}
+    </div>
+  {/snippet}
+</ModalCore>

package/dist/components/ui/modal/badge/ui/ModalBadgeSelection.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+import Root from "./ui/ModalCore.svelte";
+export { Root, Root as ModalCore, };
+export type { ModalCoreProps, ModelBadge, ModelGridCard, ModelSocialShare } from "./types";

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

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

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

@@ -0,0 +1,82 @@
+import type { Snippet } from "svelte";
+import type { IconSvgElement } from "@hugeicons/svelte";
+/**
+ * Props do componente ModalCore — contentor base reutilizável para todos os modais.
+ * Fornece overlay, container com gradiente, cabeçalho, rodapé com progress bar e navegação.
+ * @property isOpen - Controla a visibilidade do modal (bindable).
+ * @property title - Título principal do modal.
+ * @property subtitle - Subtítulo/descrição abaixo do título.
+ * @property totalSteps - Número total de passos (para a progress bar).
+ * @property currentStep - Passo actual (para a progress bar).
+ * @property showProgress - Exibe a progress bar.
+ * @property showBack - Exibe o botão "Back".
+ * @property showSkip - Exibe o botão/link "Skip".
+ * @property skipText - Texto do botão/link de skip.
+ * @property continueText - Texto do botão "Continue".
+ * @property backText - Texto do botão "Back".
+ * @property onBack - Chamado ao clicar no botão "Back".
+ * @property onContinue - Chamado ao clicar no botão "Continue".
+ * @property onSkip - Chamado ao clicar no skip.
+ * @property onClose - Chamado ao clicar no overlay (fechar).
+ * @property content - Snippet com o conteúdo principal do modal.
+ * @property footer - Snippet personalizado para o rodapé (substitui o padrão).
+ * @property class - Classe CSS extra no container do modal.
+ */
+export type ModalCoreProps = {
+    isOpen: boolean;
+    title: string;
+    subtitle?: string;
+    totalSteps?: number;
+    currentStep?: number;
+    showProgress?: boolean;
+    showBack?: boolean;
+    showSkip?: boolean;
+    skipText?: string;
+    continueText?: string;
+    backText?: string;
+    onBack?: () => void;
+    onContinue?: () => void;
+    onSkip?: () => void;
+    onClose?: () => void;
+    content?: Snippet;
+    footer?: Snippet;
+    class?: string;
+};
+/**
+ * Modelo de dados para um badge/pill seleccionável dentro do modal.
+ * Cada badge representa uma opção simples (ex: "Marketing", "Engineering").
+ * @property label - Texto visível do badge.
+ * @property value - Valor identificador do badge.
+ * @property icon - Ícone opcional exibido antes do label.
+ */
+export type ModelBadge = {
+    label: string;
+    value: string;
+    icon?: string | IconSvgElement;
+};
+/**
+ * Modelo de dados para um card seleccionável dentro do grid do modal.
+ * Cada card representa uma opção com ícone, título e descrição (ex: "Estudante", "Empresa").
+ * @property title - Título visível do card.
+ * @property description - Descrição curta exibida abaixo do título.
+ * @property icon - Ícone exibido no topo do card (string CSS ou HugeIcons).
+ */
+export type ModelGridCard = {
+    title: string;
+    description?: string;
+    icon: string | IconSvgElement;
+};
+/**
+ * Modelo de dados para uma rede social no modal de partilha.
+ * Cada item representa uma plataforma de redes sociais para partilhar conteúdo.
+ * @property name - Nome da rede social (ex: "Facebook", "Twitter").
+ * @property icon - Ícone da rede social (string CSS ou HugeIcons).
+ * @property color - Cor da rede social (hex, rgb, etc.).
+ * @property url - URL de partilha da rede social.
+ */
+export type ModelSocialShare = {
+    name: string;
+    icon: string | IconSvgElement;
+    color?: string;
+    url?: string;
+};

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

@@ -0,0 +1,129 @@
+<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 bg-card shadow-lg",
+        "before:absolute before:-inset-px before:z-[-1] before:rounded-3xl before:bg-linear-to-br before:from-primary/40 before:via-primary/10 before:to-transparent",
+        "animate-in fade-in zoom-in-95 duration-200",
+        className
+      )}
+    >
+      <!-- Header -->
+      <div class="px-8 pt-8">
+        <h2 class="text-2xl font-extrabold tracking-tight md:text-3xl">
+          {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 bg-muted">
+              <div
+                class="h-full rounded-full bg-linear-to-r from-primary to-primary/70 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 hover:bg-muted"
+                  onclick={onBack}
+                >
+                  <HugeiconsIcon icon={ArrowLeft01Icon} class="size-4" />
+                  {backText}
+                </button>
+              {/if}
+
+              <button
+                type="button"
+                class="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-2.5 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
+                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/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;
+};