negodesign 0.0.58 → 0.0.60

package/dist/components/core/banner/AdCardBanner.svelte

@@ -1,74 +1,74 @@
-<script lang="ts">
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import Button from "../../ui/button/button.svelte";
-  import type { BannerProps } from "./types";
-  import { AdvertisimentIcon } from "@hugeicons/core-free-icons";
-
-  let {
-    tagText,
-    titleHighlight,
-    titleMain,
-    buttonText = "Saiba mais",
-    onClickButton,
-    href,
-    class: className = "",
-    titleHighlightClass,
-    titleMainClass,
-    tagTextClass,
-    buttonClass,
-    titleBgClass,
-    tagBgClass,
-  }: BannerProps = $props();
-</script>
-
-{#snippet content()}
-  <article
-    class="relative flex w-full items-stretch overflow-hidden rounded-lg border border-transparent {className}"
-  >
-    <!-- Left accent strip -->
-    <aside
-      class="flex w-28 shrink-0 flex-col justify-center gap-1 {tagBgClass ||
-        'bg-blue-400'} px-3 py-2 sm:w-32"
-    >
-      <HugeiconsIcon
-        icon={AdvertisimentIcon}
-        size={30}
-        color="#ffffff"
-        strokeWidth={1}
-      />
-      <p
-        class={`text-sm leading-tight font-bold ${tagTextClass || "text-[#dce9e7]"}`}
-      >
-        {tagText}
-      </p>
-    </aside>
-
-    <!-- Main content -->
-    <div
-      class="flex flex-1 flex-wrap items-center justify-between gap-3 {titleBgClass ||
-        'bg-[#dabc16]'} px-4 py-3 sm:px-6"
-    >
-      <h3 class="text-lg font-extrabold tracking-tight sm:text-2xl">
-        <span class="{titleHighlightClass || 'text-white'} pr-2"
-          >{titleHighlight}</span
-        >
-        <span class={titleMainClass || "text-gray-200"}>{titleMain}</span>
-      </h3>
-
-      <Button
-        onclick={() => onClickButton?.()}
-        class="shrink-0 rounded-md bg-white px-4 py-2 text-sm font-medium text-indigo-600 hover:bg-white/90 {buttonClass}"
-      >
-        {buttonText}
-      </Button>
-    </div>
-  </article>
-{/snippet}
-
-{#if href}
-  <a {href} class="block">
-    {@render content()}
-  </a>
-{:else}
-  {@render content()}
-{/if}
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import Button from "../../ui/button/button.svelte";
+  import type { BannerProps } from "./types";
+  import { AdvertisimentIcon } from "@hugeicons/core-free-icons";
+
+  let {
+    tagText,
+    titleHighlight,
+    titleMain,
+    buttonText = "Saiba mais",
+    onClickButton,
+    href,
+    class: className = "",
+    titleHighlightClass,
+    titleMainClass,
+    tagTextClass,
+    buttonClass,
+    titleBgClass,
+    tagBgClass,
+  }: BannerProps = $props();
+</script>
+
+{#snippet content()}
+  <article
+    class="relative flex w-full items-stretch overflow-hidden rounded-lg border border-transparent {className}"
+  >
+    <!-- Left accent strip -->
+    <aside
+      class="flex w-28 shrink-0 flex-col justify-center gap-1 {tagBgClass ||
+        'bg-blue-400'} px-3 py-2 sm:w-32"
+    >
+      <HugeiconsIcon
+        icon={AdvertisimentIcon}
+        size={30}
+        color="#ffffff"
+        strokeWidth={1}
+      />
+      <p
+        class={`text-sm leading-tight font-bold ${tagTextClass || "text-[#dce9e7]"}`}
+      >
+        {tagText}
+      </p>
+    </aside>
+
+    <!-- Main content -->
+    <div
+      class="flex flex-1 flex-wrap items-center justify-between gap-3 {titleBgClass ||
+        'bg-[#dabc16]'} px-4 py-3 sm:px-6"
+    >
+      <h3 class="text-lg font-extrabold tracking-tight sm:text-2xl">
+        <span class="{titleHighlightClass || 'text-white'} pr-2"
+          >{titleHighlight}</span
+        >
+        <span class={titleMainClass || "text-gray-200"}>{titleMain}</span>
+      </h3>
+
+      <Button
+        onclick={() => onClickButton?.()}
+        class="shrink-0 rounded-md bg-white px-4 py-2 text-sm font-medium text-indigo-600 hover:bg-white/90 {buttonClass}"
+      >
+        {buttonText}
+      </Button>
+    </div>
+  </article>
+{/snippet}
+
+{#if href}
+  <a {href} class="block">
+    {@render content()}
+  </a>
+{:else}
+  {@render content()}
+{/if}

package/dist/components/core/banner/CtaCardBanner.svelte

@@ -1,118 +1,118 @@
-<script lang="ts">
-  import type { CtaCardBannerProps } from "./types";
-
-  let {
-    title,
-    description,
-    primaryText,
-    secondaryText,
-    onClickPrimary,
-    onClickSecondary,
-    primaryHref,
-    secondaryHref,
-    class: className = "",
-    rings: customRings = [],
-  }: CtaCardBannerProps = $props();
-
-  // Painter's-algorithm rings: largest/darkest first, smallest/lightest last.
-  const rings = $derived(
-    customRings && customRings.length > 0
-      ? customRings
-      : [
-          { size: 920, color: "#2563EB" },
-          { size: 760, color: "#3B76ED" },
-          { size: 610, color: "#548BF0" },
-          { size: 470, color: "#7FA6F3" },
-          { size: 340, color: "#A9C2F6" },
-          { size: 220, color: "#CFDEFA" },
-          { size: 110, color: "#EEF3FD" },
-        ],
-  );
-</script>
-
-{#snippet pill(
-  label: string,
-  onClick: (() => void) | undefined,
-  href: string | undefined,
-)}
-  {#snippet inner()}
-    <span class="whitespace-nowrap">{label}</span>
-    <span
-      class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white"
-    >
-      <svg
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="#111"
-        stroke-width="2.2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        aria-hidden="true"
-      >
-        <path d="M7 17 L17 7" />
-        <path d="M8 7 L17 7 L17 16" />
-      </svg>
-    </span>
-  {/snippet}
-
-  {#if href}
-    <a
-      {href}
-      class="inline-flex items-center gap-3 rounded-full bg-neutral-900 py-3 pr-2 pl-5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
-    >
-      {@render inner()}
-    </a>
-  {:else}
-    <button
-      type="button"
-      onclick={() => onClick?.()}
-      class="inline-flex items-center gap-3 rounded-full bg-neutral-900 py-3 pr-2 pl-5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
-    >
-      {@render inner()}
-    </button>
-  {/if}
-{/snippet}
-
-<article
-  class="relative isolate overflow-hidden rounded-lg bg-gradient p-1 shadow-sm {className}"
->
-  <div
-    class="relative overflow-hidden rounded-[1.35rem] px-6 py-10 sm:px-10 sm:py-12"
-  >
-    <!-- Concentric ring decoration -->
-    <div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
-      {#each rings as ring (ring.size)}
-        <div
-          class="absolute top-1/2 right-0 rounded-full"
-          style="
-            width: {ring.size}px;
-            height: {ring.size}px;
-            background: {ring.color};
-            transform: translate(45%, -50%);
-          "
-        ></div>
-      {/each}
-    </div>
-
-    <div class="relative z-10 max-w-md">
-      <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
-        {title}
-      </h2>
-
-      {#if description}
-        <p class="mt-3 text-sm leading-relaxed text-white/85 sm:text-base">
-          {description}
-        </p>
-      {/if}
-
-      <div class="mt-7 flex flex-wrap items-center gap-3">
-        {@render pill(primaryText, onClickPrimary, primaryHref)}
-        {#if secondaryText}
-          {@render pill(secondaryText, onClickSecondary, secondaryHref)}
-        {/if}
-      </div>
-    </div>
-  </div>
-</article>
+<script lang="ts">
+  import type { CtaCardBannerProps } from "./types";
+
+  let {
+    title,
+    description,
+    primaryText,
+    secondaryText,
+    onClickPrimary,
+    onClickSecondary,
+    primaryHref,
+    secondaryHref,
+    class: className = "",
+    rings: customRings = [],
+  }: CtaCardBannerProps = $props();
+
+  // Painter's-algorithm rings: largest/darkest first, smallest/lightest last.
+  const rings = $derived(
+    customRings && customRings.length > 0
+      ? customRings
+      : [
+          { size: 920, color: "#2563EB" },
+          { size: 760, color: "#3B76ED" },
+          { size: 610, color: "#548BF0" },
+          { size: 470, color: "#7FA6F3" },
+          { size: 340, color: "#A9C2F6" },
+          { size: 220, color: "#CFDEFA" },
+          { size: 110, color: "#EEF3FD" },
+        ],
+  );
+</script>
+
+{#snippet pill(
+  label: string,
+  onClick: (() => void) | undefined,
+  href: string | undefined,
+)}
+  {#snippet inner()}
+    <span class="whitespace-nowrap">{label}</span>
+    <span
+      class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white"
+    >
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="#111"
+        stroke-width="2.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M7 17 L17 7" />
+        <path d="M8 7 L17 7 L17 16" />
+      </svg>
+    </span>
+  {/snippet}
+
+  {#if href}
+    <a
+      {href}
+      class="inline-flex items-center gap-3 rounded-full bg-neutral-900 py-3 pr-2 pl-5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
+    >
+      {@render inner()}
+    </a>
+  {:else}
+    <button
+      type="button"
+      onclick={() => onClick?.()}
+      class="inline-flex items-center gap-3 rounded-full bg-neutral-900 py-3 pr-2 pl-5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
+    >
+      {@render inner()}
+    </button>
+  {/if}
+{/snippet}
+
+<article
+  class="relative isolate overflow-hidden rounded-lg bg-gradient p-1 shadow-sm {className}"
+>
+  <div
+    class="relative overflow-hidden rounded-[1.35rem] px-6 py-10 sm:px-10 sm:py-12"
+  >
+    <!-- Concentric ring decoration -->
+    <div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
+      {#each rings as ring (ring.size)}
+        <div
+          class="absolute top-1/2 right-0 rounded-full"
+          style="
+            width: {ring.size}px;
+            height: {ring.size}px;
+            background: {ring.color};
+            transform: translate(45%, -50%);
+          "
+        ></div>
+      {/each}
+    </div>
+
+    <div class="relative z-10 max-w-md">
+      <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
+        {title}
+      </h2>
+
+      {#if description}
+        <p class="mt-3 text-sm leading-relaxed text-white/85 sm:text-base">
+          {description}
+        </p>
+      {/if}
+
+      <div class="mt-7 flex flex-wrap items-center gap-3">
+        {@render pill(primaryText, onClickPrimary, primaryHref)}
+        {#if secondaryText}
+          {@render pill(secondaryText, onClickSecondary, secondaryHref)}
+        {/if}
+      </div>
+    </div>
+  </div>
+</article>

package/dist/components/core/breadcrumb/breadcrumb-list.svelte

@@ -1,32 +1,32 @@
-<script lang="ts">
-  import * as Breadcrumb from "../../ui/breadcrumb/index.js";
-
-  type Props = {
-    items: {
-      url?: string;
-      label: string;
-    }[];
-  };
-
-  let { items }: Props = $props();
-</script>
-
-<Breadcrumb.Root>
-  <Breadcrumb.List>
-    {#each items as item, i (item.label)}
-      {@const isLast = i === items.length - 1}
-
-      <Breadcrumb.Item class={isLast ? "" : "hidden md:block"}>
-        {#if isLast}
-          <Breadcrumb.Page>{item.label}</Breadcrumb.Page>
-        {:else}
-          <Breadcrumb.Link href={item.url ?? "##"}>{item.label}</Breadcrumb.Link>
-        {/if}
-      </Breadcrumb.Item>
-
-      {#if !isLast}
-        <Breadcrumb.Separator class="hidden md:block" />
-      {/if}
-    {/each}
-  </Breadcrumb.List>
+<script lang="ts">
+  import * as Breadcrumb from "../../ui/breadcrumb/index.js";
+
+  type Props = {
+    items: {
+      url?: string;
+      label: string;
+    }[];
+  };
+
+  let { items }: Props = $props();
+</script>
+
+<Breadcrumb.Root>
+  <Breadcrumb.List>
+    {#each items as item, i (item.label)}
+      {@const isLast = i === items.length - 1}
+
+      <Breadcrumb.Item class={isLast ? "" : "hidden md:block"}>
+        {#if isLast}
+          <Breadcrumb.Page>{item.label}</Breadcrumb.Page>
+        {:else}
+          <Breadcrumb.Link href={item.url ?? "##"}>{item.label}</Breadcrumb.Link>
+        {/if}
+      </Breadcrumb.Item>
+
+      {#if !isLast}
+        <Breadcrumb.Separator class="hidden md:block" />
+      {/if}
+    {/each}
+  </Breadcrumb.List>
 </Breadcrumb.Root>

package/dist/components/core/button/ButtonBack.svelte

@@ -1,18 +1,18 @@
-<script lang="ts">
-  import Button from "../../ui/button/button.svelte";
-  import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { t } from "../../../i18n";
-  import type { ButtonProps } from "../../ui/button";
-
-  let { ...restProps }: ButtonProps = $props();
-</script>
-
-<Button
-  variant="outline"
-  class="inline-flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 transition-colors rounded-full bg-input"
-  {...restProps}
->
-  <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
-  <span class="sr-only">{$t("label.back")}</span>
-</Button>
+<script lang="ts">
+  import Button from "../../ui/button/button.svelte";
+  import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { t } from "../../../i18n";
+  import type { ButtonProps } from "../../ui/button";
+
+  let { ...restProps }: ButtonProps = $props();
+</script>
+
+<Button
+  variant="outline"
+  class="inline-flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 transition-colors rounded-full bg-input"
+  {...restProps}
+>
+  <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
+  <span class="sr-only">{$t("label.back")}</span>
+</Button>

package/dist/components/core/button/ButtonLogin.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  import Button, {
-    type ButtonProps,
-  } from "../../ui/button/button.svelte";
-  import { t } from "../../../i18n";
-  import { Login02Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  let { ...restProps }: ButtonProps = $props();
-</script>
-
-<Button class="w-full flex items-center gap-2" {...restProps}>
-  <HugeiconsIcon icon={Login02Icon} size={16} />
-  {$t("label.login")}
-</Button>
+<script lang="ts">
+  import Button, {
+    type ButtonProps,
+  } from "../../ui/button/button.svelte";
+  import { t } from "../../../i18n";
+  import { Login02Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let { ...restProps }: ButtonProps = $props();
+</script>
+
+<Button class="w-full flex items-center gap-2" {...restProps}>
+  <HugeiconsIcon icon={Login02Icon} size={16} />
+  {$t("label.login")}
+</Button>

package/dist/components/core/button/ButtonLoginWith.svelte

@@ -1,57 +1,57 @@
-<script lang="ts">
-  import Button, {
-    type ButtonProps,
-  } from "../../ui/button/button.svelte";
-  import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
-  import { t } from "../../../i18n";
-  import {
-    GoogleIcon,
-    Facebook01Icon as Facebook,
-    Linkedin01Icon as Linkedin,
-  } from "@hugeicons/core-free-icons";
-  import type { Snippet } from "svelte";
-
-  type IconDefault = "GOOGLE" | "FACEBOOK" | "LINKEDLN";
-
-  type Props = {
-    icon?: IconSvgElement | IconDefault | Snippet;
-    label?: string;
-  };
-
-  let { icon, label, ...restProps }: Props & ButtonProps = $props();
-
-  const defaultIconMap: Record<IconDefault, IconSvgElement> = {
-    GOOGLE: GoogleIcon,
-    FACEBOOK: Facebook,
-    LINKEDLN: Linkedin,
-  };
-
-  const defaultLabelMap: Record<IconDefault, string> = {
-    GOOGLE: "Google",
-    FACEBOOK: "Facebook",
-    LINKEDLN: "Linkedin",
-  };
-
-  function isIconDefault(value: unknown): value is IconDefault {
-    return typeof value === "string" && value in defaultLabelMap;
-  }
-
-  let resolvedIcon = $derived(
-    isIconDefault(icon) ? defaultIconMap[icon] : icon,
-  );
-
-  let resolvedLabel = $derived(
-    label ?? (isIconDefault(icon) ? defaultLabelMap[icon] : ""),
-  );
-</script>
-
-<Button variant="outline" class="w-full flex items-center gap-2" {...restProps}>
-  {#if resolvedIcon}
-    {#if typeof resolvedIcon === "function"}
-      {@render resolvedIcon()}
-    {:else}
-      <HugeiconsIcon icon={resolvedIcon} size={16} />
-    {/if}
-  {/if}
-  {$t("label.login.with", { name: resolvedLabel })}
-</Button>
+<script lang="ts">
+  import Button, {
+    type ButtonProps,
+  } from "../../ui/button/button.svelte";
+  import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
+  import { t } from "../../../i18n";
+  import {
+    GoogleIcon,
+    Facebook01Icon as Facebook,
+    Linkedin01Icon as Linkedin,
+  } from "@hugeicons/core-free-icons";
+  import type { Snippet } from "svelte";
+
+  type IconDefault = "GOOGLE" | "FACEBOOK" | "LINKEDLN";
+
+  type Props = {
+    icon?: IconSvgElement | IconDefault | Snippet;
+    label?: string;
+  };
+
+  let { icon, label, ...restProps }: Props & ButtonProps = $props();
+
+  const defaultIconMap: Record<IconDefault, IconSvgElement> = {
+    GOOGLE: GoogleIcon,
+    FACEBOOK: Facebook,
+    LINKEDLN: Linkedin,
+  };
+
+  const defaultLabelMap: Record<IconDefault, string> = {
+    GOOGLE: "Google",
+    FACEBOOK: "Facebook",
+    LINKEDLN: "Linkedin",
+  };
+
+  function isIconDefault(value: unknown): value is IconDefault {
+    return typeof value === "string" && value in defaultLabelMap;
+  }
+
+  let resolvedIcon = $derived(
+    isIconDefault(icon) ? defaultIconMap[icon] : icon,
+  );
+
+  let resolvedLabel = $derived(
+    label ?? (isIconDefault(icon) ? defaultLabelMap[icon] : ""),
+  );
+</script>
+
+<Button variant="outline" class="w-full flex items-center gap-2" {...restProps}>
+  {#if resolvedIcon}
+    {#if typeof resolvedIcon === "function"}
+      {@render resolvedIcon()}
+    {:else}
+      <HugeiconsIcon icon={resolvedIcon} size={16} />
+    {/if}
+  {/if}
+  {$t("label.login.with", { name: resolvedLabel })}
+</Button>

package/dist/components/core/button/ButtonSend.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  import Button, {
-    type ButtonProps,
-  } from "../../ui/button/button.svelte";
-  import { t } from "../../../i18n";
-  import { Login02Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  let { ...restProps }: ButtonProps = $props();
-</script>
-
-<Button class="w-full flex items-center gap-2" {...restProps}>
-  <HugeiconsIcon icon={Login02Icon} size={16} />
-  {$t("label.send")}
-</Button>
+<script lang="ts">
+  import Button, {
+    type ButtonProps,
+  } from "../../ui/button/button.svelte";
+  import { t } from "../../../i18n";
+  import { Login02Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let { ...restProps }: ButtonProps = $props();
+</script>
+
+<Button class="w-full flex items-center gap-2" {...restProps}>
+  <HugeiconsIcon icon={Login02Icon} size={16} />
+  {$t("label.send")}
+</Button>