negodesign 0.0.72 → 0.0.74

package/dist/components/{core → ui}/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 "../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 → ui}/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 → ui}/banner/CtaCardImageBanner.svelte

@@ -1,94 +1,94 @@
-<script lang="ts">
-  import type { CtaCardImageBannerProps } from "./types";
-
-  let {
-    title,
-    description,
-    primaryText,
-    secondaryText,
-    primaryHref,
-    secondaryHref,
-    onClickPrimary,
-    onClickSecondary,
-    imageSrc = "https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png",
-    imageAlt = "Imagem de destaque",
-    imageWidth = 1824,
-    imageHeight = 1080,
-    class: className = "",
-    imageContainerClass = "",
-  }: CtaCardImageBannerProps = $props();
-</script>
-
-<div class="w-full">
-  <div class="w-full p-2">
-    <div
-      class="relative isolate overflow-hidden bg-gradient px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0 {className}"
-    >
-      {#snippet pill(
-        label: string,
-        href: string | undefined,
-        onClick: (() => void) | undefined,
-        style: "primary" | "secondary",
-      )}
-        {#if href}
-          <a
-            {href}
-            class={style === "primary"
-              ? "rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-              : "text-sm/6 font-semibold text-white hover:text-gray-100"}
-          >
-            {label}
-            {#if style === "secondary"}<span aria-hidden="true">→</span>{/if}
-          </a>
-        {:else}
-          <button
-            type="button"
-            onclick={() => onClick?.()}
-            class={style === "primary"
-              ? "rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-              : "text-sm/6 font-semibold text-white hover:text-gray-100"}
-          >
-            {label}
-            {#if style === "secondary"}<span aria-hidden="true">→</span>{/if}
-          </button>
-        {/if}
-      {/snippet}
-
-      <div
-        class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-10 lg:text-left"
-      >
-        <h2
-          class="text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl"
-        >
-          {title}
-        </h2>
-        {#if description}
-          <p class="mt-6 text-lg/8 text-pretty text-gray-300">{description}</p>
-        {/if}
-        <div
-          class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start"
-        >
-          {@render pill(primaryText, primaryHref, onClickPrimary, "primary")}
-          {#if secondaryText}
-            {@render pill(
-              secondaryText,
-              secondaryHref,
-              onClickSecondary,
-              "secondary",
-            )}
-          {/if}
-        </div>
-      </div>
-      <div class="relative mt-16 h-40 lg:mt-8 {imageContainerClass}">
-        <img
-          src={imageSrc}
-          alt={imageAlt}
-          width={imageWidth}
-          height={imageHeight}
-          loading="lazy"
-          class="absolute top-0 left-0 w-228 max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
-        />
-      </div>
-    </div>
-  </div>
-</div>
+<script lang="ts">
+  import type { CtaCardImageBannerProps } from "./types";
+
+  let {
+    title,
+    description,
+    primaryText,
+    secondaryText,
+    primaryHref,
+    secondaryHref,
+    onClickPrimary,
+    onClickSecondary,
+    imageSrc = "https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png",
+    imageAlt = "Imagem de destaque",
+    imageWidth = 1824,
+    imageHeight = 1080,
+    class: className = "",
+    imageContainerClass = "",
+  }: CtaCardImageBannerProps = $props();
+</script>
+
+<div class="w-full">
+  <div class="w-full p-2">
+    <div
+      class="relative isolate overflow-hidden bg-gradient px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0 {className}"
+    >
+      {#snippet pill(
+        label: string,
+        href: string | undefined,
+        onClick: (() => void) | undefined,
+        style: "primary" | "secondary",
+      )}
+        {#if href}
+          <a
+            {href}
+            class={style === "primary"
+              ? "rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              : "text-sm/6 font-semibold text-white hover:text-gray-100"}
+          >
+            {label}
+            {#if style === "secondary"}<span aria-hidden="true">→</span>{/if}
+          </a>
+        {:else}
+          <button
+            type="button"
+            onclick={() => onClick?.()}
+            class={style === "primary"
+              ? "rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              : "text-sm/6 font-semibold text-white hover:text-gray-100"}
+          >
+            {label}
+            {#if style === "secondary"}<span aria-hidden="true">→</span>{/if}
+          </button>
+        {/if}
+      {/snippet}
+
+      <div
+        class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-10 lg:text-left"
+      >
+        <h2
+          class="text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl"
+        >
+          {title}
+        </h2>
+        {#if description}
+          <p class="mt-6 text-lg/8 text-pretty text-gray-300">{description}</p>
+        {/if}
+        <div
+          class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start"
+        >
+          {@render pill(primaryText, primaryHref, onClickPrimary, "primary")}
+          {#if secondaryText}
+            {@render pill(
+              secondaryText,
+              secondaryHref,
+              onClickSecondary,
+              "secondary",
+            )}
+          {/if}
+        </div>
+      </div>
+      <div class="relative mt-16 h-40 lg:mt-8 {imageContainerClass}">
+        <img
+          src={imageSrc}
+          alt={imageAlt}
+          width={imageWidth}
+          height={imageHeight}
+          loading="lazy"
+          class="absolute top-0 left-0 w-228 max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
+        />
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/{core/breadcrumb → ui/breadcrumb/core}/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 "../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>