negodesign 0.0.72 → 0.0.74

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

@@ -1,219 +1,226 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import {
-		type CarouselAPI,
-		type CarouselProps,
-		type EmblaContext,
-		setEmblaContext,
-	} from "./context.js";
-
-	let {
-		ref = $bindable(null),
-		opts = {},
-		plugins = [],
-		setApi = () => {},
-		orientation = "horizontal",
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<CarouselProps> = $props();
-
-	let isVertical = $derived(orientation === "vertical");
-	let available = $state(false);
-
-	// svelte-ignore state_referenced_locally
-	let ctx = $state<EmblaContext>({
-		orientation,
-		containerEl: undefined,
-		canScrollNext: false,
-		canScrollPrev: false,
-		selectedIndex: 0,
-		scrollSnaps: [],
-		scrollPrev,
-		scrollNext,
-		scrollTo,
-		onScroll,
-		handleKeyDown,
-		plugins,
-		setContainer,
-	});
-
-	setEmblaContext(ctx);
-
-	function setContainer(el: HTMLDivElement | null | undefined) {
-		ctx.containerEl = el ?? undefined;
-		available = el != null;
-		updateScrollSnaps();
-		onScroll();
-	}
-
-	function getSlides(): HTMLElement[] {
-		const container = ctx.containerEl;
-		if (!container) return [];
-		return Array.from(
-			container.querySelectorAll<HTMLElement>("[data-slot='carousel-item']")
-		);
-	}
-
-	function updateScrollSnaps() {
-		const container = ctx.containerEl;
-		if (!container) {
-			ctx.scrollSnaps = [];
-			return;
-		}
-		const scrollPos = isVertical ? container.scrollTop : container.scrollLeft;
-		const origin = isVertical
-			? container.getBoundingClientRect().top
-			: container.getBoundingClientRect().left;
-		ctx.scrollSnaps = getSlides().map((slide) => {
-			const slidePos = isVertical
-				? slide.getBoundingClientRect().top
-				: slide.getBoundingClientRect().left;
-			return slidePos - origin + scrollPos;
-		});
-	}
-
-	function onScroll() {
-		const container = ctx.containerEl;
-		if (!container) return;
-		const pos = isVertical ? container.scrollTop : container.scrollLeft;
-		const size = isVertical ? container.clientHeight : container.clientWidth;
-		const scrollSize = isVertical
-			? container.scrollHeight
-			: container.scrollWidth;
-		const max = Math.max(0, scrollSize - size);
-		ctx.canScrollPrev = pos > 1;
-		ctx.canScrollNext = pos < max - 1;
-		const snaps = ctx.scrollSnaps;
-		let closest = 0;
-		let minDistance = Infinity;
-		for (let i = 0; i < snaps.length; i++) {
-			const distance = Math.abs(snaps[i] - pos);
-			if (distance < minDistance) {
-				minDistance = distance;
-				closest = i;
-			}
-		}
-		ctx.selectedIndex = minDistance === Infinity ? 0 : closest;
-	}
-
-	function scrollTo(index: number, jump?: boolean) {
-		const container = ctx.containerEl;
-		const snaps = ctx.scrollSnaps;
-		if (!container || snaps.length === 0) return;
-		const target = Math.min(Math.max(index, 0), snaps.length - 1);
-		const snap = snaps[target];
-		container.scrollTo({
-			left: isVertical ? 0 : snap,
-			top: isVertical ? snap : 0,
-			behavior: jump ? "instant" : "smooth",
-		});
-	}
-
-	function scrollPrev() {
-		scrollTo(ctx.selectedIndex - 1);
-	}
-
-	function scrollNext() {
-		scrollTo(ctx.selectedIndex + 1);
-	}
-
-	function buildApi(): CarouselAPI {
-		return {
-			scrollPrev,
-			scrollNext,
-			canScrollPrev: ctx.canScrollPrev,
-			canScrollNext: ctx.canScrollNext,
-			selectedIndex: ctx.selectedIndex,
-			scrollTo,
-			scrollSnapList: () => ctx.scrollSnaps.slice(),
-		};
-	}
-
-	$effect(() => {
-		setApi(buildApi());
-	});
-
-	function handleKeyDown(e: KeyboardEvent) {
-		if (e.key === "ArrowLeft") {
-			e.preventDefault();
-			scrollPrev();
-		} else if (e.key === "ArrowRight") {
-			e.preventDefault();
-			scrollNext();
-		}
-	}
-
-	$effect(() => {
-		if (!available) return;
-		const container = ctx.containerEl;
-		if (!container) return;
-		const plugin = plugins[0];
-		if (!plugin?.delay) return;
-
-		let stopped = false;
-		let timer: number | undefined;
-		let lastIndex = ctx.selectedIndex;
-
-		const clearTimer = () => {
-			if (timer !== undefined) window.clearTimeout(timer);
-		};
-
-		const cleanup = () => {
-			stopped = true;
-			clearTimer();
-		};
-
-		const schedule = () => {
-			if (stopped) return;
-			timer = window.setTimeout(() => {
-				if (stopped) return;
-				if (ctx.canScrollNext) {
-					scrollNext();
-				} else if (plugin.loop) {
-					scrollTo(0, true);
-				}
-				lastIndex = ctx.selectedIndex;
-				schedule();
-			}, plugin.delay);
-		};
-
-		const onPointer = () => {
-			if (stopped) return;
-			if (plugin.stopOnInteraction) cleanup();
-		};
-
-		const onScrollReset = () => {
-			if (stopped || plugin.stopOnInteraction) return;
-			if (ctx.selectedIndex !== lastIndex) {
-				clearTimer();
-				lastIndex = ctx.selectedIndex;
-				schedule();
-			}
-		};
-
-		container.addEventListener("pointerdown", onPointer);
-		container.addEventListener("touchstart", onPointer);
-		container.addEventListener("scroll", onScrollReset, { passive: true });
-
-		schedule();
-
-		return () => {
-			cleanup();
-			container.removeEventListener("pointerdown", onPointer);
-			container.removeEventListener("touchstart", onPointer);
-			container.removeEventListener("scroll", onScrollReset);
-		};
-	});
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="carousel"
-	class={cn("relative", className)}
-	role="region"
-	aria-roledescription="carousel"
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import {
+		type CarouselAPI,
+		type CarouselProps,
+		type EmblaContext,
+		setEmblaContext,
+	} from "./context.js";
+
+	let {
+		ref = $bindable(null),
+		opts = {},
+		plugins = [],
+		setApi = () => {},
+		orientation = "horizontal",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<CarouselProps> = $props();
+
+	let isVertical = $derived(orientation === "vertical");
+	let available = $state(false);
+
+	// svelte-ignore state_referenced_locally
+	let ctx = $state<EmblaContext>({
+		orientation,
+		containerEl: undefined,
+		canScrollNext: false,
+		canScrollPrev: false,
+		selectedIndex: 0,
+		scrollSnaps: [],
+		scrollPrev,
+		scrollNext,
+		scrollTo,
+		onScroll,
+		handleKeyDown,
+		plugins,
+		setContainer,
+	});
+
+	setEmblaContext(ctx);
+
+	function setContainer(el: HTMLDivElement | null | undefined) {
+		ctx.containerEl = el ?? undefined;
+		available = el != null;
+		updateScrollSnaps();
+		onScroll();
+	}
+
+	function getSlides(): HTMLElement[] {
+		const container = ctx.containerEl;
+		if (!container) return [];
+		return Array.from(
+			container.querySelectorAll<HTMLElement>("[data-slot='carousel-item']")
+		);
+	}
+
+	function snapsEqual(a: number[], b: number[]): boolean {
+		if (a.length !== b.length) return false;
+		for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+		return true;
+	}
+
+	function updateScrollSnaps() {
+		const container = ctx.containerEl;
+		if (!container) {
+			if (ctx.scrollSnaps.length > 0) ctx.scrollSnaps = [];
+			return;
+		}
+		const scrollPos = isVertical ? container.scrollTop : container.scrollLeft;
+		const origin = isVertical
+			? container.getBoundingClientRect().top
+			: container.getBoundingClientRect().left;
+		const next = getSlides().map((slide) => {
+			const slidePos = isVertical
+				? slide.getBoundingClientRect().top
+				: slide.getBoundingClientRect().left;
+			return slidePos - origin + scrollPos;
+		});
+		if (!snapsEqual(ctx.scrollSnaps, next)) ctx.scrollSnaps = next;
+	}
+
+	function onScroll() {
+		const container = ctx.containerEl;
+		if (!container) return;
+		const pos = isVertical ? container.scrollTop : container.scrollLeft;
+		const size = isVertical ? container.clientHeight : container.clientWidth;
+		const scrollSize = isVertical
+			? container.scrollHeight
+			: container.scrollWidth;
+		const max = Math.max(0, scrollSize - size);
+		ctx.canScrollPrev = pos > 1;
+		ctx.canScrollNext = pos < max - 1;
+		const snaps = ctx.scrollSnaps;
+		let closest = 0;
+		let minDistance = Infinity;
+		for (let i = 0; i < snaps.length; i++) {
+			const distance = Math.abs(snaps[i] - pos);
+			if (distance < minDistance) {
+				minDistance = distance;
+				closest = i;
+			}
+		}
+		ctx.selectedIndex = minDistance === Infinity ? 0 : closest;
+	}
+
+	function scrollTo(index: number, jump?: boolean) {
+		const container = ctx.containerEl;
+		const snaps = ctx.scrollSnaps;
+		if (!container || snaps.length === 0) return;
+		const target = Math.min(Math.max(index, 0), snaps.length - 1);
+		const snap = snaps[target];
+		container.scrollTo({
+			left: isVertical ? 0 : snap,
+			top: isVertical ? snap : 0,
+			behavior: jump ? "instant" : "smooth",
+		});
+	}
+
+	function scrollPrev() {
+		scrollTo(ctx.selectedIndex - 1);
+	}
+
+	function scrollNext() {
+		scrollTo(ctx.selectedIndex + 1);
+	}
+
+	function buildApi(): CarouselAPI {
+		return {
+			scrollPrev,
+			scrollNext,
+			canScrollPrev: ctx.canScrollPrev,
+			canScrollNext: ctx.canScrollNext,
+			selectedIndex: ctx.selectedIndex,
+			scrollTo,
+			scrollSnapList: () => ctx.scrollSnaps.slice(),
+		};
+	}
+
+	$effect(() => {
+		setApi(buildApi());
+	});
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			scrollPrev();
+		} else if (e.key === "ArrowRight") {
+			e.preventDefault();
+			scrollNext();
+		}
+	}
+
+	$effect(() => {
+		if (!available) return;
+		const container = ctx.containerEl;
+		if (!container) return;
+		const plugin = plugins[0];
+		if (!plugin?.delay) return;
+
+		let stopped = false;
+		let timer: number | undefined;
+		let lastIndex = ctx.selectedIndex;
+
+		const clearTimer = () => {
+			if (timer !== undefined) window.clearTimeout(timer);
+		};
+
+		const cleanup = () => {
+			stopped = true;
+			clearTimer();
+		};
+
+		const schedule = () => {
+			if (stopped) return;
+			timer = window.setTimeout(() => {
+				if (stopped) return;
+				if (ctx.canScrollNext) {
+					scrollNext();
+				} else if (plugin.loop) {
+					scrollTo(0, true);
+				}
+				lastIndex = ctx.selectedIndex;
+				schedule();
+			}, plugin.delay);
+		};
+
+		const onPointer = () => {
+			if (stopped) return;
+			if (plugin.stopOnInteraction) cleanup();
+		};
+
+		const onScrollReset = () => {
+			if (stopped || plugin.stopOnInteraction) return;
+			if (ctx.selectedIndex !== lastIndex) {
+				clearTimer();
+				lastIndex = ctx.selectedIndex;
+				schedule();
+			}
+		};
+
+		container.addEventListener("pointerdown", onPointer);
+		container.addEventListener("touchstart", onPointer);
+		container.addEventListener("scroll", onScrollReset, { passive: true });
+
+		schedule();
+
+		return () => {
+			cleanup();
+			container.removeEventListener("pointerdown", onPointer);
+			container.removeEventListener("touchstart", onPointer);
+			container.removeEventListener("scroll", onScrollReset);
+		};
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel"
+	class={cn("relative", className)}
+	role="region"
+	aria-roledescription="carousel"
+	{...restProps}
+>
+	{@render children?.()}
 </div>

package/dist/components/{core/carousel → ui/carousel/core}/badge/ui/CarouselBadge.svelte

@@ -1,108 +1,108 @@
-<script lang="ts">
-  import * as Carousel from "../../../../ui/carousel/index.js";
-  import type { CarouselBadgeProps } from "../../types.js";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-  import { useDevice } from "../../../../../hooks/responsive.svelte";
-
-  const {
-    items = [],
-    imageClass,
-    iconClass,
-    labelClass,
-    activeClass = "bg-gradient text-white rounded-full px-3",
-    orientation = "horizontal",
-    itemStyle = "DEFAULT",
-    isBorderInline = false,
-    showButton = true,
-    isLoading = false,
-    btnNavClass,
-    itemClass,
-    menuKey,
-    onClick,
-  }: CarouselBadgeProps = $props();
-
-  const TOP_NAV = $derived(isBorderInline ? "top-5.5" : "top-7.5");
-  const borderB = $derived(
-    isBorderInline ? `border-b-2 ${itemStyle == "BORDER" ? "pb-2" : ""}` : "",
-  );
-  const isInlineBorder = $derived(isBorderInline && itemStyle == "INLINE");
-  const DEFAULT_IMG_OR_ICON_CLASS = "size-3 md:size-6";
-
-  const responsive = useDevice();
-  const skeletonCount = $derived(responsive.isMobile ? 2 : 8);
-
-  // svelte-ignore state_referenced_locally
-  let selectedValue = $state<string | undefined>(menuKey ?? "");
-
-  function isSelected(item: (typeof items)[number]) {
-    return item.value !== undefined && item.value === selectedValue;
-  }
-
-  function selectItem(item: (typeof items)[number]) {
-    selectedValue = item.value;
-    item.onClick?.(item.value);
-    onClick?.(item.value);
-  }
-</script>
-
-{#snippet itemVisual(item: (typeof items)[number])}
-  {#if item.image}
-    <img
-      src={item.image}
-      alt={item.label}
-      class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
-    />
-  {:else if typeof item.icon === "string"}
-    <i class={`${item.icon} ${iconClass || DEFAULT_IMG_OR_ICON_CLASS}`}></i>
-  {:else if item.icon}
-    <HugeiconsIcon
-      icon={item.icon}
-      class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
-    />
-  {/if}
-{/snippet}
-
-{#if items.length > 0}
-  <Carousel.Root>
-    <Carousel.Content class={borderB}>
-      {#if isLoading}
-        <div class="flex items-center justify-between w-full gap-1 md:gap-2">
-          {#each Array.from( { length: skeletonCount }, ) as _, i (`skeleton-${i}`)}
-            <Skeleton class="h-4 w-25 bg-gray-50/90" />
-          {/each}
-        </div>
-      {:else}
-        {#each items as item, i (`badge-${i}-${item.value ?? item.label ?? i}`)}
-          <Carousel.Item onclick={() => selectItem(item)}>
-            <div
-              class="flex gap-1 mx-2 p-1 justify-center w-min items-center cursor-pointer relative hover:text-lg hover:font-bold
-            {isSelected(item)
-                ? isInlineBorder
-                  ? 'text-gradient font-bold'
-                  : activeClass
-                : ''} 
-            {itemStyle == 'BORDER' ? 'border-2 rounded-full min-w-25 px-1' : ''}
-            {orientation === 'horizontal' ? 'flex-row' : 'flex-col'}
-            {isInlineBorder ? 'pb-3' : ''}
-            {itemClass} 
-          "
-            >
-              {@render itemVisual(item)}
-              <div class={labelClass}>{item.label}</div>
-            </div>
-            {#if isSelected(item) && isInlineBorder}
-              <div class="absolute pt-5 w-full h-2 bg-gradient"></div>
-            {/if}
-          </Carousel.Item>
-        {/each}
-      {/if}
-    </Carousel.Content>
-    {#if showButton}
-      {@const navClass =
-        "absolute -translate-y-1/2 z-50 bg-blue-700! text-white! cursor-pointer"}
-      <Carousel.Previous class="-left-8 {navClass} {TOP_NAV} {btnNavClass}" />
-      <Carousel.Next class="-right-8 {navClass} {TOP_NAV} {btnNavClass}" />
-    {/if}
-  </Carousel.Root>
-{/if}
+<script lang="ts">
+  import * as Carousel from "../../../index.js";
+  import type { CarouselBadgeProps } from "../../types.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import Skeleton from "../../../../skeleton/skeleton.svelte";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+
+  const {
+    items = [],
+    imageClass,
+    iconClass,
+    labelClass,
+    activeClass = "bg-gradient text-white rounded-full px-3",
+    orientation = "horizontal",
+    itemStyle = "DEFAULT",
+    isBorderInline = false,
+    showButton = true,
+    isLoading = false,
+    btnNavClass,
+    itemClass,
+    menuKey,
+    onClick,
+  }: CarouselBadgeProps = $props();
+
+  const TOP_NAV = $derived(isBorderInline ? "top-5.5" : "top-7.5");
+  const borderB = $derived(
+    isBorderInline ? `border-b-2 ${itemStyle == "BORDER" ? "pb-2" : ""}` : "",
+  );
+  const isInlineBorder = $derived(isBorderInline && itemStyle == "INLINE");
+  const DEFAULT_IMG_OR_ICON_CLASS = "size-3 md:size-6";
+
+  const responsive = useDevice();
+  const skeletonCount = $derived(responsive.isMobile ? 2 : 8);
+
+  // svelte-ignore state_referenced_locally
+  let selectedValue = $state<string | undefined>(menuKey ?? "");
+
+  function isSelected(item: (typeof items)[number]) {
+    return item.value !== undefined && item.value === selectedValue;
+  }
+
+  function selectItem(item: (typeof items)[number]) {
+    selectedValue = item.value;
+    item.onClick?.(item.value);
+    onClick?.(item.value);
+  }
+</script>
+
+{#snippet itemVisual(item: (typeof items)[number])}
+  {#if item.image}
+    <img
+      src={item.image}
+      alt={item.label}
+      class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
+    />
+  {:else if typeof item.icon === "string"}
+    <i class={`${item.icon} ${iconClass || DEFAULT_IMG_OR_ICON_CLASS}`}></i>
+  {:else if item.icon}
+    <HugeiconsIcon
+      icon={item.icon}
+      class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
+    />
+  {/if}
+{/snippet}
+
+{#if items.length > 0}
+  <Carousel.Root>
+    <Carousel.Content class={borderB}>
+      {#if isLoading}
+        <div class="flex items-center justify-between w-full gap-1 md:gap-2">
+          {#each Array.from( { length: skeletonCount }, ) as _, i (`skeleton-${i}`)}
+            <Skeleton class="h-4 w-25 bg-gray-50/90" />
+          {/each}
+        </div>
+      {:else}
+        {#each items as item, i (`badge-${i}-${item.value ?? item.label ?? i}`)}
+          <Carousel.Item onclick={() => selectItem(item)}>
+            <div
+              class="flex gap-1 mx-2 p-1 justify-center w-min items-center cursor-pointer relative hover:text-lg hover:font-bold
+            {isSelected(item)
+                ? isInlineBorder
+                  ? 'text-gradient font-bold'
+                  : activeClass
+                : ''} 
+            {itemStyle == 'BORDER' ? 'border-2 rounded-full min-w-25 px-1' : ''}
+            {orientation === 'horizontal' ? 'flex-row' : 'flex-col'}
+            {isInlineBorder ? 'pb-3' : ''}
+            {itemClass} 
+          "
+            >
+              {@render itemVisual(item)}
+              <div class={labelClass}>{item.label}</div>
+            </div>
+            {#if isSelected(item) && isInlineBorder}
+              <div class="absolute pt-5 w-full h-2 bg-gradient"></div>
+            {/if}
+          </Carousel.Item>
+        {/each}
+      {/if}
+    </Carousel.Content>
+    {#if showButton}
+      {@const navClass =
+        "absolute -translate-y-1/2 z-50 bg-blue-700! text-white! cursor-pointer"}
+      <Carousel.Previous class="-left-8 {navClass} {TOP_NAV} {btnNavClass}" />
+      <Carousel.Next class="-right-8 {navClass} {TOP_NAV} {btnNavClass}" />
+    {/if}
+  </Carousel.Root>
+{/if}