negodesign 0.0.80 → 0.0.82

package/dist/components/ui/sidebar/sidebar.svelte

@@ -1,119 +1,119 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
-	import { useSidebar } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		side = "left",
-		variant = "sidebar",
-		collapsible = "offcanvas",
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
-		side?: "left" | "right";
-		variant?: "sidebar" | "floating" | "inset";
-		collapsible?: "offcanvas" | "icon" | "none";
-	} = $props();
-
-	const sidebar = useSidebar();
-
-	$effect(() => {
-		sidebar.setConfig({ collapsible, side, variant });
-	});
-</script>
-
-{#if collapsible === "none"}
-	<div
-		class={cn(
-			"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-			className
-		)}
-		data-slot="sidebar"
-		bind:this={ref}
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
-{:else}
-	<div data-slot="sidebar-mobile" class="md:hidden">
-		<button
-			type="button"
-			aria-label="Close sidebar"
-			tabindex={-1}
-			class={cn(
-				"bg-black/60 fixed inset-0 z-40 transition-opacity cursor-auto",
-				sidebar.openMobile ? "opacity-100" : "pointer-events-none opacity-0"
-			)}
-			onclick={() => sidebar.setOpenMobile(false)}
-		></button>
-		<aside
-			data-sidebar="sidebar"
-			data-slot="sidebar"
-			data-mobile="true"
-			data-side={side}
-			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
-			class={cn(
-				"bg-sidebar text-sidebar-foreground fixed inset-y-0 z-50 flex h-svh w-(--sidebar-width) flex-col p-0 transition-transform duration-200 ease-linear md:hidden",
-				sidebar.openMobile
-					? "translate-x-0"
-					: side === "left"
-						? "-translate-x-full"
-						: "translate-x-full",
-				side === "left" ? "start-0" : "end-0",
-				className
-			)}
-		>
-			<div class="flex h-full w-full flex-col">
-				{@render children?.()}
-			</div>
-		</aside>
-	</div>
-
-	<div
-		class="text-sidebar-foreground group peer hidden md:block"
-		data-state={sidebar.state}
-		data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
-		data-variant={variant}
-		data-side={side}
-		data-slot="sidebar"
-		bind:this={ref}
-		{...restProps}
-	>
-		<div
-			data-slot="sidebar-gap"
-			class={cn(
-				"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent",
-				"group-data-[collapsible=offcanvas]:w-0",
-				"group-data-[side=right]:rotate-180",
-				variant === "floating" || variant === "inset"
-					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-			)}
-		></div>
-		<div
-			data-slot="sidebar-container"
-			class={cn(
-				"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-				side === "left"
-					? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]"
-					: "end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]",
-				variant === "floating" || variant === "inset"
-					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s",
-				className
-			)}
-			{...restProps}
-		>
-			<div
-				data-sidebar="sidebar"
-				data-slot="sidebar-inner"
-				class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
-			>
-				{@render children?.()}
-			</div>
-		</div>
-	</div>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		side = "left",
+		variant = "sidebar",
+		collapsible = "offcanvas",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+	} = $props();
+
+	const sidebar = useSidebar();
+
+	$effect(() => {
+		sidebar.setConfig({ collapsible, side, variant });
+	});
+</script>
+
+{#if collapsible === "none"}
+	<div
+		class={cn(
+			"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+			className
+		)}
+		data-slot="sidebar"
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{:else}
+	<div data-slot="sidebar-mobile" class="md:hidden">
+		<button
+			type="button"
+			aria-label="Close sidebar"
+			tabindex={-1}
+			class={cn(
+				"bg-black/60 fixed inset-0 z-40 transition-opacity cursor-auto",
+				sidebar.openMobile ? "opacity-100" : "pointer-events-none opacity-0"
+			)}
+			onclick={() => sidebar.setOpenMobile(false)}
+		></button>
+		<aside
+			data-sidebar="sidebar"
+			data-slot="sidebar"
+			data-mobile="true"
+			data-side={side}
+			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+			class={cn(
+				"bg-sidebar text-sidebar-foreground fixed inset-y-0 z-50 flex h-svh w-(--sidebar-width) flex-col p-0 transition-transform duration-200 ease-linear md:hidden",
+				sidebar.openMobile
+					? "translate-x-0"
+					: side === "left"
+						? "-translate-x-full"
+						: "translate-x-full",
+				side === "left" ? "start-0" : "end-0",
+				className
+			)}
+		>
+			<div class="flex h-full w-full flex-col">
+				{@render children?.()}
+			</div>
+		</aside>
+	</div>
+
+	<div
+		class="text-sidebar-foreground group peer hidden md:block"
+		data-state={sidebar.state}
+		data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
+		data-variant={variant}
+		data-side={side}
+		data-slot="sidebar"
+		bind:this={ref}
+		{...restProps}
+	>
+		<div
+			data-slot="sidebar-gap"
+			class={cn(
+				"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent",
+				"group-data-[collapsible=offcanvas]:w-0",
+				"group-data-[side=right]:rotate-180",
+				variant === "floating" || variant === "inset"
+					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+			)}
+		></div>
+		<div
+			data-slot="sidebar-container"
+			class={cn(
+				"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+				side === "left"
+					? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]"
+					: "end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]",
+				variant === "floating" || variant === "inset"
+					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s",
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				data-sidebar="sidebar"
+				data-slot="sidebar-inner"
+				class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
+			>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
 {/if}

package/dist/components/ui/skeleton/skeleton.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="skeleton"
-	class={cn("animate-pulse rounded-md bg-muted", className)}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn("animate-pulse rounded-md bg-muted", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>

package/dist/components/ui/star-rating/star-rating-star.svelte

@@ -1,67 +1,67 @@
-<script lang="ts">
-	import { cn } from "../../../utils.js";
-	import type { StarRatingStarProps } from "./types";
-	import { useStarRatingContext } from "./star-rating.svelte";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { StarHalfIcon, StarIcon } from "@hugeicons/core-free-icons";
-
-	let { index, class: className, state: _state }: StarRatingStarProps = $props();
-
-	const rating = useStarRatingContext();
-
-	const fraction = $derived.by(() => Math.min(Math.max(rating.value - index, 0), 1));
-	const isActive = $derived(fraction >= 1);
-	const isPartial = $derived(fraction > 0 && fraction < 1);
-	const isCurrentHovered = $derived(rating.hovered === index);
-	const filled = $derived(isActive || isPartial || isCurrentHovered);
-
-	const displayState = $derived(isPartial ? "partial" : isActive ? "active" : "inactive");
-	const iconClass = $derived(
-		filled ? "text-amber-500 fill-current" : "text-muted-foreground fill-transparent"
-	);
-
-	function handleClick() {
-		if (rating.disabled || rating.readOnly) return;
-		rating.selectValue(index + 1);
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			handleClick();
-		}
-	}
-</script>
-
-<span
-	role="radio"
-	aria-checked={isActive ? "true" : isPartial ? "mixed" : "false"}
-	data-star-rating
-	data-state={displayState}
-	data-disabled={rating.disabled ? "true" : undefined}
-	tabindex={rating.disabled ? -1 : 0}
-	class={cn(
-		"ring-ring text-primary ring-offset-background group/item size-5 rounded-md ring-offset-2 outline-hidden group-aria-disabled:opacity-50 focus-visible:ring-2",
-		className
-	)}
-	onclick={handleClick}
-	onkeydown={handleKeydown}
-	onmouseenter={() => rating.setHovered(index)}
-	onmouseleave={() => rating.setHovered(null)}
->
-	<div class="relative size-full">
-		{#if isPartial}
-			<HugeiconsIcon
-				icon={StarHalfIcon}
-				strokeWidth={2}
-				class={cn("absolute top-0 left-0 size-full transition-all", iconClass)}
-			/>
-		{:else}
-			<HugeiconsIcon
-				icon={StarIcon}
-				strokeWidth={2}
-				class={cn("size-full transition-all", iconClass)}
-			/>
-		{/if}
-	</div>
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { StarRatingStarProps } from "./types";
+	import { useStarRatingContext } from "./star-rating.svelte";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { StarHalfIcon, StarIcon } from "@hugeicons/core-free-icons";
+
+	let { index, class: className, state: _state }: StarRatingStarProps = $props();
+
+	const rating = useStarRatingContext();
+
+	const fraction = $derived.by(() => Math.min(Math.max(rating.value - index, 0), 1));
+	const isActive = $derived(fraction >= 1);
+	const isPartial = $derived(fraction > 0 && fraction < 1);
+	const isCurrentHovered = $derived(rating.hovered === index);
+	const filled = $derived(isActive || isPartial || isCurrentHovered);
+
+	const displayState = $derived(isPartial ? "partial" : isActive ? "active" : "inactive");
+	const iconClass = $derived(
+		filled ? "text-amber-500 fill-current" : "text-muted-foreground fill-transparent"
+	);
+
+	function handleClick() {
+		if (rating.disabled || rating.readOnly) return;
+		rating.selectValue(index + 1);
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			handleClick();
+		}
+	}
+</script>
+
+<span
+	role="radio"
+	aria-checked={isActive ? "true" : isPartial ? "mixed" : "false"}
+	data-star-rating
+	data-state={displayState}
+	data-disabled={rating.disabled ? "true" : undefined}
+	tabindex={rating.disabled ? -1 : 0}
+	class={cn(
+		"ring-ring text-primary ring-offset-background group/item size-5 rounded-md ring-offset-2 outline-hidden group-aria-disabled:opacity-50 focus-visible:ring-2",
+		className
+	)}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	onmouseenter={() => rating.setHovered(index)}
+	onmouseleave={() => rating.setHovered(null)}
+>
+	<div class="relative size-full">
+		{#if isPartial}
+			<HugeiconsIcon
+				icon={StarHalfIcon}
+				strokeWidth={2}
+				class={cn("absolute top-0 left-0 size-full transition-all", iconClass)}
+			/>
+		{:else}
+			<HugeiconsIcon
+				icon={StarIcon}
+				strokeWidth={2}
+				class={cn("size-full transition-all", iconClass)}
+			/>
+		{/if}
+	</div>
 </span>