negodesign 0.0.72 → 0.0.74

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

@@ -1,63 +1,63 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import {
-		SIDEBAR_COOKIE_MAX_AGE,
-		SIDEBAR_COOKIE_NAME,
-		SIDEBAR_WIDTH,
-		SIDEBAR_WIDTH_ICON,
-	} from "./constants.js";
-	import { setSidebar } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		defaultOpen = true,
-		open = $bindable(defaultOpen),
-		onOpenChange = () => {},
-		collapsible = "offcanvas",
-		side = "left",
-		class: className,
-		style,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		defaultOpen?: boolean;
-		open?: boolean;
-		onOpenChange?: (open: boolean) => void;
-		collapsible?: "icon" | "offcanvas" | "none";
-		side?: "left" | "right";
-	} = $props();
-
-	// svelte-ignore state_referenced_locally
-	const sidebar = setSidebar({
-		open: () => open,
-		setOpen: (value: boolean) => {
-			open = value;
-			onOpenChange(value);
-
-			if (typeof document !== "undefined") {
-				document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-			}
-		},
-		collapsible,
-		side,
-	});
-</script>
-
-<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
-
-<div
-	data-slot="sidebar-wrapper"
-	data-side={sidebar.side}
-	data-collapsible={sidebar.collapsible}
-	data-variant={sidebar.variant}
-	style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
-	class={cn(
-		"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-		className
-	)}
-	bind:this={ref}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import {
+		SIDEBAR_COOKIE_MAX_AGE,
+		SIDEBAR_COOKIE_NAME,
+		SIDEBAR_WIDTH,
+		SIDEBAR_WIDTH_ICON,
+	} from "./constants.js";
+	import { setSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		defaultOpen = true,
+		open = $bindable(defaultOpen),
+		onOpenChange = () => {},
+		collapsible = "offcanvas",
+		side = "left",
+		class: className,
+		style,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		defaultOpen?: boolean;
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		collapsible?: "icon" | "offcanvas" | "none";
+		side?: "left" | "right";
+	} = $props();
+
+	// svelte-ignore state_referenced_locally
+	const sidebar = setSidebar({
+		open: () => open,
+		setOpen: (value: boolean) => {
+			open = value;
+			onOpenChange(value);
+
+			if (typeof document !== "undefined") {
+				document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+			}
+		},
+		collapsible,
+		side,
+	});
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<div
+	data-slot="sidebar-wrapper"
+	data-side={sidebar.side}
+	data-collapsible={sidebar.collapsible}
+	data-variant={sidebar.variant}
+	style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+	class={cn(
+		"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+		className
+	)}
+	bind:this={ref}
+	{...restProps}
+>
+	{@render children?.()}
 </div>

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

@@ -1,36 +1,36 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { useSidebar } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
-
-	const sidebar = useSidebar();
-</script>
-
-<button
-	bind:this={ref}
-	data-sidebar="rail"
-	data-slot="sidebar-rail"
-	aria-label="Toggle Sidebar"
-	tabindex={-1}
-	onclick={sidebar.toggleSidebar}
-	title="Toggle Sidebar"
-	class={cn(
-		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
-		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-		"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</button>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	data-sidebar="rail"
+	data-slot="sidebar-rail"
+	aria-label="Toggle Sidebar"
+	tabindex={-1}
+	onclick={sidebar.toggleSidebar}
+	title="Toggle Sidebar"
+	class={cn(
+		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+		"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>

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

@@ -1,22 +1,22 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="sidebar-separator"
-	data-sidebar="separator"
-	role="separator"
-	class={cn(
-		"bg-sidebar-border mx-2 my-1 h-px transition-all group-data-[collapsible=icon]:mx-0",
-		className
-	)}
-	{...restProps}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-separator"
+	data-sidebar="separator"
+	role="separator"
+	class={cn(
+		"bg-sidebar-border mx-2 my-1 h-px transition-all group-data-[collapsible=icon]:mx-0",
+		className
+	)}
+	{...restProps}
 ></div>

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

@@ -1,37 +1,37 @@
-<script lang="ts">
-	import { Button } from "../button/index.js";
-	import { HugeiconsIcon } from "@hugeicons/svelte"
-	import { SidebarLeftIcon } from '@hugeicons/core-free-icons';
-	import { cn } from "../../../utils.js";
-	import type { ComponentProps } from "svelte";
-	import { useSidebar } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		onclick,
-		...restProps
-	}: ComponentProps<typeof Button> & {
-		onclick?: (e: MouseEvent) => void;
-	} = $props();
-
-	const sidebar = useSidebar();
-</script>
-
-<Button
-	bind:ref
-	data-sidebar="trigger"
-	data-slot="sidebar-trigger"
-	variant="ghost"
-	size="icon-sm"
-	class={cn("cn-sidebar-trigger", className)}
-	type="button"
-	onclick={(e) => {
-		onclick?.(e);
-		sidebar.toggleSidebar();
-	}}
-	{...restProps}
->
-	<HugeiconsIcon icon={SidebarLeftIcon} strokeWidth={2}  />
-	<span class="sr-only">Toggle Sidebar</span>
+<script lang="ts">
+	import { Button } from "../button/index.js";
+	import { HugeiconsIcon } from "@hugeicons/svelte"
+	import { SidebarLeftIcon } from '@hugeicons/core-free-icons';
+	import { cn } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		onclick,
+		...restProps
+	}: ComponentProps<typeof Button> & {
+		onclick?: (e: MouseEvent) => void;
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<Button
+	bind:ref
+	data-sidebar="trigger"
+	data-slot="sidebar-trigger"
+	variant="ghost"
+	size="icon-sm"
+	class={cn("cn-sidebar-trigger", className)}
+	type="button"
+	onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggleSidebar();
+	}}
+	{...restProps}
+>
+	<HugeiconsIcon icon={SidebarLeftIcon} strokeWidth={2}  />
+	<span class="sr-only">Toggle Sidebar</span>
 </Button>

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>