negodesign 0.0.77 → 0.0.79

package/dist/components/ui/card/core/shared/CardTitlePrice.svelte

@@ -1,24 +1,24 @@
-<script>
-  import Skeleton from "../../../skeleton/skeleton.svelte";
-
-  let { title, isLoading, price } = $props();
-</script>
-
-<div class="flex justify-between w-full items-center">
-  {#if title}
-    {#if isLoading}
-      <Skeleton class="h-4 w-30 rounded-lg" />
-    {:else}
-      <div class="font-semibold line-clamp-1 flex-nowrap">
-        {title}
-      </div>
-    {/if}
-  {/if}
-  <div class="flex justify-start gap-2">
-    {#if isLoading}
-      <Skeleton class="h-5 bg-black/10 w-25 my-2 mr-2" />
-    {:else if price}
-      <div class="text-lg font-semibold text-primary">{price}</div>
-    {/if}
-  </div>
-</div>
+<script>
+  import Skeleton from "../../../skeleton/skeleton.svelte";
+
+  let { title, isLoading, price } = $props();
+</script>
+
+<div class="flex justify-between w-full items-center">
+  {#if title}
+    {#if isLoading}
+      <Skeleton class="h-4 w-30 rounded-lg" />
+    {:else}
+      <div class="font-semibold line-clamp-1 flex-nowrap">
+        {title}
+      </div>
+    {/if}
+  {/if}
+  <div class="flex justify-start gap-2">
+    {#if isLoading}
+      <Skeleton class="h-5 bg-black/10 w-25 my-2 mr-2" />
+    {:else if price}
+      <div class="text-lg font-semibold text-primary">{price}</div>
+    {/if}
+  </div>
+</div>

package/dist/components/ui/card/core/shared/TruncatableText.svelte

@@ -1,49 +1,49 @@
-<!-- shared/TruncatableText.svelte -->
-<script lang="ts">
-  /**
-   * Clamps text to N lines; if it overflows, shows an indicator
-   * ("Ler texto completo") positioned absolutely at the end of the
-   * text, that opens the full text in a Popover.
-   * @component
-   */
-  import * as Popover from "../../../popover";
-  import { t } from "../../../../../i18n";
-
-  type Props = { text: string; class?: string; lines?: number };
-  let { text, class: className = "", lines = 2 }: Props = $props();
-
-  let textEl: HTMLParagraphElement | undefined = $state();
-  let isTruncated = $state(false);
-
-  $effect(() => {
-    if (!textEl) return;
-    const check = () =>
-      (isTruncated =
-        (textEl?.scrollHeight ?? 0) > (textEl?.clientHeight ?? 0) + 1);
-    // requestAnimationFrame garante que o layout com o clamp já foi aplicado
-    // antes de medirmos — medir no mesmo tick pode dar valores desatualizados.
-    requestAnimationFrame(check);
-    const ro = new ResizeObserver(check);
-    ro.observe(textEl);
-    return () => ro.disconnect();
-  });
-</script>
-
-<div class="relative">
-  <p bind:this={textEl} class="line-clamp-3 {className}">
-    {text}
-  </p>
-
-  {#if isTruncated}
-    <Popover.Root>
-      <Popover.Trigger
-        class="absolute bottom-0 right-0 bg-background pl-1 text-[11px] font-medium text-primary underline underline-offset-2 cursor-pointer"
-      >
-        {$t("label.view.full")}
-      </Popover.Trigger>
-      <Popover.Content>
-        <p class="max-w-xs text-justify text-[12px]">{text}</p>
-      </Popover.Content>
-    </Popover.Root>
-  {/if}
-</div>
+<!-- shared/TruncatableText.svelte -->
+<script lang="ts">
+  /**
+   * Clamps text to N lines; if it overflows, shows an indicator
+   * ("Ler texto completo") positioned absolutely at the end of the
+   * text, that opens the full text in a Popover.
+   * @component
+   */
+  import * as Popover from "../../../popover";
+  import { t } from "../../../../../i18n";
+
+  type Props = { text: string; class?: string; lines?: number };
+  let { text, class: className = "", lines = 2 }: Props = $props();
+
+  let textEl: HTMLParagraphElement | undefined = $state();
+  let isTruncated = $state(false);
+
+  $effect(() => {
+    if (!textEl) return;
+    const check = () =>
+      (isTruncated =
+        (textEl?.scrollHeight ?? 0) > (textEl?.clientHeight ?? 0) + 1);
+    // requestAnimationFrame garante que o layout com o clamp já foi aplicado
+    // antes de medirmos — medir no mesmo tick pode dar valores desatualizados.
+    requestAnimationFrame(check);
+    const ro = new ResizeObserver(check);
+    ro.observe(textEl);
+    return () => ro.disconnect();
+  });
+</script>
+
+<div class="relative">
+  <p bind:this={textEl} class="line-clamp-3 {className}">
+    {text}
+  </p>
+
+  {#if isTruncated}
+    <Popover.Root>
+      <Popover.Trigger
+        class="absolute bottom-0 right-0 bg-background pl-1 text-[11px] font-medium text-primary underline underline-offset-2 cursor-pointer"
+      >
+        {$t("label.view.full")}
+      </Popover.Trigger>
+      <Popover.Content>
+        <p class="max-w-xs text-justify text-[12px]">{text}</p>
+      </Popover.Content>
+    </Popover.Root>
+  {/if}
+</div>

package/dist/components/ui/carousel/carousel-content.svelte

@@ -1,57 +1,57 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import { getEmblaContext } from "./context.js";
-	import type { Action } from "svelte/action";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-
-	const emblaCtx = getEmblaContext("<Carousel.Content/>");
-
-	let containerEl = $state<HTMLDivElement | null>(null);
-
-	$effect(() => {
-		emblaCtx.setContainer(containerEl);
-	});
-
-	const carouselKeyboard = ((node: HTMLElement) => {
-		const handler = (event: KeyboardEvent) => emblaCtx.handleKeyDown(event);
-		node.addEventListener("keydown", handler);
-		return {
-			destroy() {
-				node.removeEventListener("keydown", handler);
-			},
-		};
-	}) satisfies Action;
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="carousel-content"
-	class="overflow-hidden"
-	{...restProps}
->
-	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-	<div
-		bind:this={containerEl}
-		use:carouselKeyboard
-		role="region"
-		aria-roledescription="carousel"
-		aria-label="Carousel"
-		tabindex="0"
-		class={cn(
-			emblaCtx.orientation === "horizontal"
-				? "flex flex-row overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar -ms-4"
-				: "flex flex-col overflow-y-auto snap-y snap-mandatory scroll-smooth no-scrollbar -mt-4",
-			className
-		)}
-		onscroll={emblaCtx.onScroll}
-	>
-		{@render children?.()}
-	</div>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { Action } from "svelte/action";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Content/>");
+
+	let containerEl = $state<HTMLDivElement | null>(null);
+
+	$effect(() => {
+		emblaCtx.setContainer(containerEl);
+	});
+
+	const carouselKeyboard = ((node: HTMLElement) => {
+		const handler = (event: KeyboardEvent) => emblaCtx.handleKeyDown(event);
+		node.addEventListener("keydown", handler);
+		return {
+			destroy() {
+				node.removeEventListener("keydown", handler);
+			},
+		};
+	}) satisfies Action;
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel-content"
+	class="overflow-hidden"
+	{...restProps}
+>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		bind:this={containerEl}
+		use:carouselKeyboard
+		role="region"
+		aria-roledescription="carousel"
+		aria-label="Carousel"
+		tabindex="0"
+		class={cn(
+			emblaCtx.orientation === "horizontal"
+				? "flex flex-row overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar -ms-4"
+				: "flex flex-col overflow-y-auto snap-y snap-mandatory scroll-smooth no-scrollbar -mt-4",
+			className
+		)}
+		onscroll={emblaCtx.onScroll}
+	>
+		{@render children?.()}
+	</div>
 </div>

package/dist/components/ui/carousel/carousel-item.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import { getEmblaContext } from "./context.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-
-	const emblaCtx = getEmblaContext("<Carousel.Item/>");
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="carousel-item"
-	role="group"
-	aria-roledescription="slide"
-	class={cn(
-		"w-min shrink-0 grow-0",
-		emblaCtx.orientation === "horizontal" ? "ps-4" : "pt-4",
-		className,
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Item/>");
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel-item"
+	role="group"
+	aria-roledescription="slide"
+	class={cn(
+		"shrink-0 grow-0",
+		emblaCtx.orientation === "horizontal" ? "ps-4" : "pt-4",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/carousel/carousel-next.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-	import { HugeiconsIcon } from "@hugeicons/svelte"
-	import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
-	import { Button, type Props } from "../button/index.js";
-	import { cn } from "../../../utils.js";
-	import { getEmblaContext } from "./context.js";
-	import type { WithoutChildren } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		variant = "outline",
-		size = "icon-sm",
-		...restProps
-	}: WithoutChildren<Props> = $props();
-
-	const emblaCtx = getEmblaContext("<Carousel.Next/>");
-</script>
-
-<Button
-	data-slot="carousel-next"
-	{variant}
-	{size}
-	aria-disabled={!emblaCtx.canScrollNext}
-	disabled={!emblaCtx.canScrollNext}
-	class={cn(
-		"rounded-full absolute touch-manipulation",
-		emblaCtx.orientation === "horizontal"
-			? "inset-y-0 -end-12 my-auto"
-			: "start-1/2 -bottom-12 -translate-x-1/2 rotate-90",
-		className
-	)}
-	onclick={emblaCtx.scrollNext}
-	onkeydown={emblaCtx.handleKeyDown}
-	bind:ref
-	{...restProps}
->
-	<HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2}  />
-	<span class="sr-only">Next slide</span>
-</Button>
+<script lang="ts">
+	import { HugeiconsIcon } from "@hugeicons/svelte"
+	import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+	import { Button, type Props } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { WithoutChildren } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "icon-sm",
+		...restProps
+	}: WithoutChildren<Props> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Next/>");
+</script>
+
+<Button
+	data-slot="carousel-next"
+	{variant}
+	{size}
+	aria-disabled={!emblaCtx.canScrollNext}
+	disabled={!emblaCtx.canScrollNext}
+	class={cn(
+		"rounded-full absolute touch-manipulation",
+		emblaCtx.orientation === "horizontal"
+			? "inset-y-0 -end-12 my-auto"
+			: "start-1/2 -bottom-12 -translate-x-1/2 rotate-90",
+		className
+	)}
+	onclick={emblaCtx.scrollNext}
+	onkeydown={emblaCtx.handleKeyDown}
+	bind:ref
+	{...restProps}
+>
+	<HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2}  />
+	<span class="sr-only">Next slide</span>
+</Button>

package/dist/components/ui/carousel/carousel-previous.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-	import { HugeiconsIcon } from "@hugeicons/svelte"
-	import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
-	import { Button, type Props } from "../button/index.js";
-	import { cn } from "../../../utils.js";
-	import { getEmblaContext } from "./context.js";
-	import type { WithoutChildren } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		variant = "outline",
-		size = "icon-sm",
-		...restProps
-	}: WithoutChildren<Props> = $props();
-
-	const emblaCtx = getEmblaContext("<Carousel.Previous/>");
-</script>
-
-<Button
-	data-slot="carousel-previous"
-	{variant}
-	{size}
-	aria-disabled={!emblaCtx.canScrollPrev}
-	disabled={!emblaCtx.canScrollPrev}
-	class={cn(
-		"rounded-full absolute touch-manipulation",
-		emblaCtx.orientation === "horizontal"
-			? "inset-y-0 -start-12 my-auto"
-			: "start-1/2 -top-12 -translate-x-1/2 rotate-90",
-		className
-	)}
-	onclick={emblaCtx.scrollPrev}
-	onkeydown={emblaCtx.handleKeyDown}
-	{...restProps}
-	bind:ref
->
-	<HugeiconsIcon icon={ArrowLeft01Icon} strokeWidth={2}  />
-	<span class="sr-only">Previous slide</span>
-</Button>
+<script lang="ts">
+	import { HugeiconsIcon } from "@hugeicons/svelte"
+	import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+	import { Button, type Props } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { WithoutChildren } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "icon-sm",
+		...restProps
+	}: WithoutChildren<Props> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Previous/>");
+</script>
+
+<Button
+	data-slot="carousel-previous"
+	{variant}
+	{size}
+	aria-disabled={!emblaCtx.canScrollPrev}
+	disabled={!emblaCtx.canScrollPrev}
+	class={cn(
+		"rounded-full absolute touch-manipulation",
+		emblaCtx.orientation === "horizontal"
+			? "inset-y-0 -start-12 my-auto"
+			: "start-1/2 -top-12 -translate-x-1/2 rotate-90",
+		className
+	)}
+	onclick={emblaCtx.scrollPrev}
+	onkeydown={emblaCtx.handleKeyDown}
+	{...restProps}
+	bind:ref
+>
+	<HugeiconsIcon icon={ArrowLeft01Icon} strokeWidth={2}  />
+	<span class="sr-only">Previous slide</span>
+</Button>