negodesign 0.0.71 → 0.0.73

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import * as Tooltip from "../tooltip/index.js";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import {
@@ -12,42 +11,53 @@
 
 	let {
 		ref = $bindable(null),
-		open = $bindable(true),
+		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);
 
-			// This sets the cookie to keep the sidebar state.
-			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+			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} />
 
-<Tooltip.Provider delayDuration={0}>
-	<div
-		data-slot="sidebar-wrapper"
-		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>
-</Tooltip.Provider>
+<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-provider.svelte.d.ts

@@ -1,8 +1,11 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    collapsible?: "icon" | "offcanvas" | "none";
+    side?: "left" | "right";
 };
 declare const SidebarProvider: import("svelte").Component<$$ComponentProps, {}, "ref" | "open">;
 type SidebarProvider = ReturnType<typeof SidebarProvider>;

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

@@ -19,7 +19,7 @@
 	data-slot="sidebar-rail"
 	aria-label="Toggle Sidebar"
 	tabindex={-1}
-	onclick={sidebar.toggle}
+	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",

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

@@ -1,19 +1,22 @@
 <script lang="ts">
-	import { Separator } from "../separator/index.js";
-	import { cn } from "../../../utils.js";
-	import type { ComponentProps } from "svelte";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		...restProps
-	}: ComponentProps<typeof Separator> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<Separator
-	bind:ref
+<div
+	bind:this={ref}
 	data-slot="sidebar-separator"
 	data-sidebar="separator"
-	class={cn("bg-sidebar-border mx-2 w-auto", className)}
+	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-separator.svelte.d.ts

@@ -1,13 +1,5 @@
-declare const SidebarSeparator: import("svelte").Component<Omit<{
-    orientation?: import("bits-ui").Orientation;
-    decorative?: boolean;
-}, "child" | "children"> & {
-    child?: import("svelte").Snippet<[{
-        props: Record<string, unknown>;
-    }]> | undefined;
-    children?: import("svelte").Snippet<[]> | undefined;
-    style?: import("bits-ui").StyleProperties | string | null | undefined;
-    ref?: HTMLElement | null | undefined;
-} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const SidebarSeparator: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type SidebarSeparator = ReturnType<typeof SidebarSeparator>;
 export default SidebarSeparator;

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

@@ -28,10 +28,10 @@
 	type="button"
 	onclick={(e) => {
 		onclick?.(e);
-		sidebar.toggle();
+		sidebar.toggleSidebar();
 	}}
 	{...restProps}
 >
 	<HugeiconsIcon icon={SidebarLeftIcon} strokeWidth={2}  />
 	<span class="sr-only">Toggle Sidebar</span>
-</Button>
+</Button>

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import * as Sheet from "../sheet/index.js";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
@@ -13,13 +12,17 @@
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+	}: 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"}
@@ -28,48 +31,57 @@
 			"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 if sidebar.isMobile}
-	<Sheet.Root
-		bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)}
-		{...restProps}
-	>
-		<Sheet.Content
-			bind:ref
+{: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 w-(--sidebar-width) p-0 [&>button]:hidden",
+				"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
 			)}
-			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
-			{side}
 		>
-			<Sheet.Header class="sr-only">
-				<Sheet.Title>Sidebar</Sheet.Title>
-				<Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
-			</Sheet.Header>
 			<div class="flex h-full w-full flex-col">
 				{@render children?.()}
 			</div>
-		</Sheet.Content>
-	</Sheet.Root>
-{:else}
+		</aside>
+	</div>
+
 	<div
-		bind:this={ref}
 		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}
 	>
-		<!-- This is what handles the sidebar gap on desktop -->
 		<div
 			data-slot="sidebar-gap"
 			class={cn(
@@ -88,7 +100,6 @@
 				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)]",
-				// Adjust the padding for floating and inset variants.
 				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",
@@ -105,4 +116,4 @@
 			</div>
 		</div>
 	</div>
-{/if}
+{/if}

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

@@ -1,6 +1,6 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
     side?: "left" | "right";
     variant?: "sidebar" | "floating" | "inset";
     collapsible?: "offcanvas" | "icon" | "none";

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

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

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

@@ -1,5 +1,5 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const Skeleton: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children">, {}, "ref">;
+declare const Skeleton: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

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

@@ -1,41 +1,67 @@
 <script lang="ts">
-	import { cn } from '../../../utils.js';
-	import StarHalfIcon from '@lucide/svelte/icons/star-half';
-	import StarIcon from '@lucide/svelte/icons/star';
-	import { RatingGroup } from 'bits-ui';
-	import type { StarRatingStarProps } from './types';
+	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, state, class: className }: StarRatingStarProps = $props();
+	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>
 
-<RatingGroup.Item
-	{index}
+<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',
+		"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">
-		<StarIcon
-			class={cn('size-full fill-transparent transition-all', {
-				'fill-current': state === 'active'
-			})}
-		/>
-		<StarHalfIcon
-			class={cn(
-				'absolute top-0 left-0 size-full fill-transparent transition-all group-data-[state=active]/item:fill-current',
-				{
-					'ltr:fill-current': state === 'partial'
-				}
-			)}
-		/>
-		<StarHalfIcon
-			class={cn(
-				'absolute top-0 right-0 size-full scale-x-[-1] fill-transparent transition-all group-data-[state=active]/item:fill-current',
-				{
-					'rtl:fill-current': state === 'partial'
-				}
-			)}
-		/>
+		{#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>
-</RatingGroup.Item>
+</span>

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

@@ -1,4 +1,4 @@
-import type { StarRatingStarProps } from './types';
+import type { StarRatingStarProps } from "./types";
 declare const StarRatingStar: import("svelte").Component<StarRatingStarProps, {}, "">;
 type StarRatingStar = ReturnType<typeof StarRatingStar>;
 export default StarRatingStar;

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

@@ -1,20 +1,150 @@
+<script lang="ts" module>
+	import { getContext, setContext } from "svelte";
+
+	export type StarRatingContext = {
+		get value(): number;
+		get count(): number;
+		get disabled(): boolean;
+		get readOnly(): boolean;
+		get hovered(): number | null;
+		setHovered: (index: number | null) => void;
+		selectValue: (value: number) => void;
+	};
+
+	const STAR_RATING_CONTEXT_KEY = "scn-star-rating";
+
+	export function setStarRatingContext(ctx: StarRatingContext): StarRatingContext {
+		return setContext(STAR_RATING_CONTEXT_KEY, ctx);
+	}
+
+	export function useStarRatingContext(): StarRatingContext {
+		return getContext<StarRatingContext>(STAR_RATING_CONTEXT_KEY);
+	}
+</script>
+
 <script lang="ts">
-	import { cn } from '../../../utils.js';
-	import { RatingGroup, type RatingGroupRootProps } from 'bits-ui';
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+	import type { StarRatingItem } from "./types";
 
 	let {
+		ref = $bindable(null),
 		value = $bindable(0),
-		max = 5,
-		orientation = 'horizontal',
+		onValueChange,
+		count = 5,
+		max = count,
+		orientation = "horizontal",
+		readOnly = false,
+		disabled = false,
 		class: className,
-		...rest
-	}: RatingGroupRootProps = $props();
+		children,
+		onkeydown,
+		onmouseleave,
+		...restProps
+	}: {
+		ref?: HTMLDivElement | null;
+		value?: number;
+		onValueChange?: (value: number) => void;
+		count?: number;
+		max?: number;
+		orientation?: "horizontal" | "vertical";
+		readOnly?: boolean;
+		disabled?: boolean;
+		class?: string;
+		children?: Snippet<[{ items: StarRatingItem[] }]>;
+		onkeydown?: (e: KeyboardEvent) => void;
+		onmouseleave?: (e: MouseEvent) => void;
+		[key: string]: unknown;
+	} = $props();
+
+	const total = $derived.by(() => {
+		const n = typeof max === "number" && Number.isFinite(max) && max > 0 ? max : count;
+		return Math.floor(n);
+	});
+
+	let hovered = $state<number | null>(null);
+
+	function setHovered(index: number | null) {
+		if (disabled) return;
+		hovered = index;
+	}
+
+	function selectValue(next: number) {
+		if (disabled || readOnly) return;
+		value = Math.min(Math.max(next, 0), total);
+		onValueChange?.(value);
+	}
+
+	function starState(index: number): StarRatingItem["state"] {
+		const fraction = value - index;
+		if (fraction >= 1) return "active";
+		if (fraction > 0) return "partial";
+		return "inactive";
+	}
+
+	const items = $derived.by(() =>
+		Array.from({ length: total }, (_, index) => ({ index, state: starState(index) }))
+	);
+
+	function handleKeydown(e: KeyboardEvent) {
+		onkeydown?.(e);
+		if (disabled || readOnly) return;
+		if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+			e.preventDefault();
+			selectValue(Math.round(value) + 1);
+		} else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+			e.preventDefault();
+			selectValue(Math.round(value) - 1);
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			selectValue(1);
+		} else if (e.key === "End") {
+			e.preventDefault();
+			selectValue(total);
+		} else if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			if (hovered !== null) selectValue(hovered + 1);
+		}
+	}
+
+	function handleMouseLeave(e: MouseEvent) {
+		hovered = null;
+		onmouseleave?.(e);
+	}
+
+	setStarRatingContext({
+		get value() {
+			return value;
+		},
+		get count() {
+			return total;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get readOnly() {
+			return readOnly;
+		},
+		get hovered() {
+			return hovered;
+		},
+		setHovered,
+		selectValue
+	});
 </script>
 
-<RatingGroup.Root
-	class={cn('group flex w-fit place-items-center gap-1 rounded-md outline-hidden', className)}
-	bind:value
-	{max}
-	{orientation}
-	{...rest}
-/>
+<div
+	bind:this={ref}
+	data-slot="star-rating"
+	data-star-rating
+	data-orientation={orientation}
+	role="radiogroup"
+	aria-disabled={disabled ? "true" : undefined}
+	data-disabled={disabled ? "true" : undefined}
+	class={cn("group flex w-fit place-items-center gap-1 rounded-md outline-hidden", className)}
+	onkeydown={handleKeydown}
+	onmouseleave={handleMouseLeave}
+	{...restProps}
+>
+	{@render children?.({ items })}
+</div>

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

@@ -1,4 +1,33 @@
-import { RatingGroup } from 'bits-ui';
-declare const StarRating: import("svelte").Component<RatingGroup.RootProps, {}, "value">;
+export type StarRatingContext = {
+    get value(): number;
+    get count(): number;
+    get disabled(): boolean;
+    get readOnly(): boolean;
+    get hovered(): number | null;
+    setHovered: (index: number | null) => void;
+    selectValue: (value: number) => void;
+};
+export declare function setStarRatingContext(ctx: StarRatingContext): StarRatingContext;
+export declare function useStarRatingContext(): StarRatingContext;
+import type { Snippet } from "svelte";
+import type { StarRatingItem } from "./types";
+type $$ComponentProps = {
+    ref?: HTMLDivElement | null;
+    value?: number;
+    onValueChange?: (value: number) => void;
+    count?: number;
+    max?: number;
+    orientation?: "horizontal" | "vertical";
+    readOnly?: boolean;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet<[{
+        items: StarRatingItem[];
+    }]>;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onmouseleave?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+};
+declare const StarRating: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
 type StarRating = ReturnType<typeof StarRating>;
 export default StarRating;

package/dist/components/ui/star-rating/types.d.ts

@@ -1,5 +1,10 @@
+export type RatingState = "active" | "partial" | "inactive";
+export type StarRatingItem = {
+    index: number;
+    state: RatingState;
+};
 export type StarRatingStarProps = {
     index: number;
-    state: 'active' | 'partial' | 'inactive';
+    state?: RatingState;
     class?: string;
 };