negodesign 0.0.71 → 0.0.72

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;
 };

package/dist/components/ui/underline-tabs/underline-tabs-content.svelte

@@ -1,17 +1,34 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from 'bits-ui';
-	import { cn } from '../../../utils.js';
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+	import { useUnderlineTabsTrigger } from "./underline-tabs.svelte.js";
 
 	let {
 		ref = $bindable(null),
+		value,
 		class: className,
+		children,
 		...restProps
-	}: TabsPrimitive.ContentProps = $props();
+	}: {
+		ref?: HTMLDivElement | null;
+		value: string;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	const state = useUnderlineTabsTrigger();
 </script>
 
-<TabsPrimitive.Content
-	bind:ref
-	data-slot="underline-tabs-content"
-	class={cn('flex-1 outline-none', className)}
-	{...restProps}
-/>
+{#if state.value === value}
+	<div
+		bind:this={ref}
+		data-slot="underline-tabs-content"
+		role="tabpanel"
+		data-state="active"
+		class={cn("flex-1 outline-none", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/ui/underline-tabs/underline-tabs-content.svelte.d.ts

@@ -1,4 +1,11 @@
-import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const UnderlineTabsContent: import("svelte").Component<TabsPrimitive.ContentProps, {}, "ref">;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    ref?: HTMLDivElement | null;
+    value: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const UnderlineTabsContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type UnderlineTabsContent = ReturnType<typeof UnderlineTabsContent>;
 export default UnderlineTabsContent;

package/dist/components/ui/underline-tabs/underline-tabs-list.svelte

@@ -1,26 +1,33 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from 'bits-ui';
-	import { cn } from '../../../utils.js';
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
-	}: TabsPrimitive.ListProps = $props();
+	}: {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
 </script>
 
-<TabsPrimitive.List
-	bind:ref
+<div
+	bind:this={ref}
 	data-slot="underline-tabs-list"
+	role="tablist"
+	data-orientation="horizontal"
 	class={cn(
-		'text-muted-foreground border-border relative inline-flex h-9 w-full max-w-full items-center justify-start overflow-x-auto border-b',
+		"text-muted-foreground border-border relative inline-flex h-9 w-full max-w-full items-center justify-start overflow-x-auto border-b",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-</TabsPrimitive.List>
+</div>
 
 <style>
 	:global([data-slot='underline-tabs-list']) {
@@ -31,4 +38,4 @@
 	:global([data-slot='underline-tabs-list']::-webkit-scrollbar) {
 		display: none;
 	}
-</style>
+</style>

package/dist/components/ui/underline-tabs/underline-tabs-list.svelte.d.ts

@@ -1,4 +1,10 @@
-import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const UnderlineTabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    ref?: HTMLDivElement | null;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const UnderlineTabsList: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type UnderlineTabsList = ReturnType<typeof UnderlineTabsList>;
 export default UnderlineTabsList;