negodesign 0.0.74 → 0.0.76

package/dist/components/ui/form/ui/input-select.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import { Label } from "../../label";
+  import { cn } from "../../../../utils";
+  import type { InputLabelProps } from "../data/InputLabel.svelte";
+
+  type SelectOption = { value: string; label: string };
+
+  let {
+    label,
+    isLabel = false,
+    value = $bindable(""),
+    disabled = false,
+    required = false,
+    placeholder = "Select an option",
+    options = [],
+    multiple = false,
+    class: className,
+    ...restProps
+  }: InputLabelProps & {
+    value?: string | string[];
+    options?: SelectOption[];
+    multiple?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+  } = $props();
+
+  let isOpen = $state(false);
+  let selectRef = $state<HTMLDivElement | null>(null);
+
+  function handleSelect(option: SelectOption) {
+    if (multiple) {
+      const arr = Array.isArray(value) ? value : [];
+      const idx = arr.indexOf(option.value);
+      if (idx >= 0) {
+        value = arr.filter((v) => v !== option.value);
+      } else {
+        value = [...arr, option.value];
+      }
+    } else {
+      value = option.value;
+      isOpen = false;
+    }
+  }
+
+  function isSelected(option: SelectOption): boolean {
+    if (multiple) {
+      return Array.isArray(value) && value.includes(option.value);
+    }
+    return value === option.value;
+  }
+
+  function getDisplayText(): string {
+    if (multiple) {
+      const arr = Array.isArray(value) ? value : [];
+      if (arr.length === 0) return placeholder;
+      return arr
+        .map((v) => options.find((o) => o.value === v)?.label ?? v)
+        .join(", ");
+    }
+    return options.find((o) => o.value === value)?.label ?? placeholder;
+  }
+
+  function handleClickOutside(e: MouseEvent) {
+    if (selectRef && !selectRef.contains(e.target as Node)) {
+      isOpen = false;
+    }
+  }
+</script>
+
+<svelte:window onclick={handleClickOutside} />
+
+{#if isLabel}
+  <div class="flex w-full flex-col gap-3">
+    {#if label}
+      <Label>{label}</Label>
+    {/if}
+    <div bind:this={selectRef} class={cn("relative", className)}>
+      <button
+        type="button"
+        {disabled}
+        class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        onclick={() => (isOpen = !isOpen)}
+      >
+        <span class={cn(!value && "text-muted-foreground")}>
+          {getDisplayText()}
+        </span>
+        <svg
+          class={cn("size-4 shrink-0 opacity-50 transition-transform", isOpen && "rotate-180")}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      {#if isOpen}
+        <div class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-border bg-card shadow-md">
+          {#each options as option (option.value)}
+            <button
+              type="button"
+              class={cn(
+                "flex w-full items-center px-3 py-2 text-sm transition-colors hover:bg-muted",
+                isSelected(option) && "bg-muted font-medium"
+              )}
+              onclick={() => handleSelect(option)}
+            >
+              {#if multiple}
+                <span
+                  class={cn(
+                    "mr-2 flex size-4 items-center justify-center rounded border",
+                    isSelected(option)
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-input"
+                  )}
+                >
+                  {#if isSelected(option)}
+                    <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                      <path d="M20 6 9 17l-5-5" />
+                    </svg>
+                  {/if}
+                </span>
+              {/if}
+              {option.label}
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+{:else}
+  <div bind:this={selectRef} class={cn("relative", className)}>
+    <button
+      type="button"
+      {disabled}
+      class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      onclick={() => (isOpen = !isOpen)}
+    >
+      <span class={cn(!value && "text-muted-foreground")}>
+        {getDisplayText()}
+      </span>
+      <svg
+        class={cn("size-4 shrink-0 opacity-50 transition-transform", isOpen && "rotate-180")}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </button>
+
+    {#if isOpen}
+      <div class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-border bg-card shadow-md">
+        {#each options as option (option.value)}
+          <button
+            type="button"
+            class={cn(
+              "flex w-full items-center px-3 py-2 text-sm transition-colors hover:bg-muted",
+              isSelected(option) && "bg-muted font-medium"
+            )}
+            onclick={() => handleSelect(option)}
+          >
+            {#if multiple}
+              <span
+                class={cn(
+                  "mr-2 flex size-4 items-center justify-center rounded border",
+                  isSelected(option)
+                    ? "border-primary bg-primary text-primary-foreground"
+                    : "border-input"
+                )}
+              >
+                {#if isSelected(option)}
+                  <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                {/if}
+              </span>
+            {/if}
+            {option.label}
+          </button>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/components/ui/form/ui/input-select.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { InputLabelProps } from "../data/InputLabel.svelte";
+type SelectOption = {
+    value: string;
+    label: string;
+};
+type $$ComponentProps = InputLabelProps & {
+    value?: string | string[];
+    options?: SelectOption[];
+    multiple?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+};
+declare const InputSelect: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputSelect = ReturnType<typeof InputSelect>;
+export default InputSelect;

package/dist/components/ui/form/ui/input-textarea.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { cn } from "../../../../utils";
+  import { Label } from "../../label";
+  import type { HTMLTextareaAttributes } from "svelte/elements";
+  import type { WithElementRef } from "../../../../utils";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(""),
+    label,
+    isLabel = false,
+    placeholder,
+    disabled = false,
+    required = false,
+    rows = 4,
+    class: className,
+    ...restProps
+  }: WithElementRef<HTMLTextareaAttributes> & {
+    label?: string;
+    isLabel?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    rows?: number;
+  } = $props();
+</script>
+
+{#if isLabel}
+  <div class="flex w-full flex-col gap-2">
+    {#if label}
+      <Label>{label}</Label>
+    {/if}
+    <textarea
+      bind:this={ref}
+      bind:value
+      {placeholder}
+      {disabled}
+      {required}
+      {rows}
+      class={cn(
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        className
+      )}
+      {...restProps}
+    ></textarea>
+  </div>
+{:else}
+  <textarea
+    bind:this={ref}
+    bind:value
+    {placeholder}
+    {disabled}
+    {required}
+    {rows}
+    class={cn(
+      "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+      className
+    )}
+    {...restProps}
+  ></textarea>
+{/if}

package/dist/components/ui/form/ui/input-textarea.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLTextareaAttributes } from "svelte/elements";
+import type { WithElementRef } from "../../../../utils";
+type $$ComponentProps = WithElementRef<HTMLTextareaAttributes> & {
+    label?: string;
+    isLabel?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    rows?: number;
+};
+declare const InputTextarea: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+type InputTextarea = ReturnType<typeof InputTextarea>;
+export default InputTextarea;

package/dist/components/ui/form/ui/input-toggle.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { Label } from "../../label";
+  import { cn } from "../../../../utils";
+
+  let {
+    label,
+    isLabel = false,
+    value = $bindable(false),
+    disabled = false,
+    description,
+    class: className,
+  }: {
+    label?: string;
+    isLabel?: boolean;
+    value?: boolean;
+    disabled?: boolean;
+    description?: string;
+    class?: string;
+  } = $props();
+
+  function toggle() {
+    if (disabled) return;
+    value = !value;
+  }
+</script>
+
+{#if isLabel}
+  <div class={cn("flex w-full flex-col gap-2", className)}>
+    <div class="flex items-center justify-between">
+      <div class="flex flex-col gap-0.5">
+        {#if label}
+          <Label>{label}</Label>
+        {/if}
+        {#if description}
+          <p class="text-xs text-muted-foreground">{description}</p>
+        {/if}
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={value}
+        aria-label={label ?? "Toggle"}
+        {disabled}
+        class={cn(
+          "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+          value ? "bg-primary" : "bg-input"
+        )}
+        onclick={toggle}
+      >
+        <span
+          class={cn(
+            "pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+            value ? "translate-x-5" : "translate-x-0"
+          )}
+        ></span>
+      </button>
+    </div>
+  </div>
+{:else}
+  <div class={cn("flex items-center justify-between", className)}>
+    <div class="flex flex-col gap-0.5">
+      {#if label}
+        <Label>{label}</Label>
+      {/if}
+      {#if description}
+        <p class="text-xs text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+    <button
+      type="button"
+      role="switch"
+      aria-checked={value}
+      aria-label={label ?? "Toggle"}
+      {disabled}
+      class={cn(
+        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+        value ? "bg-primary" : "bg-input"
+      )}
+      onclick={toggle}
+    >
+      <span
+        class={cn(
+          "pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+          value ? "translate-x-5" : "translate-x-0"
+        )}
+      ></span>
+    </button>
+  </div>
+{/if}

package/dist/components/ui/form/ui/input-toggle.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    label?: string;
+    isLabel?: boolean;
+    value?: boolean;
+    disabled?: boolean;
+    description?: string;
+    class?: string;
+};
+declare const InputToggle: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputToggle = ReturnType<typeof InputToggle>;
+export default InputToggle;

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/types.js

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

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,84 @@
+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 img - URL da imagem/imagem de marca da rede social.
+ * @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;
+    img?: string;
+    color?: string;
+    url?: string;
+};

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

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