@makolabs/ripple 0.0.1-dev.8 → 0.0.1-dev.80

package/dist/layout/card/metric-card.d.ts

@@ -0,0 +1,49 @@
+export declare const metricCard: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            progress?: import("tailwind-merge").ClassNameValue;
+            detail?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            progress?: import("tailwind-merge").ClassNameValue;
+            detail?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    title: string;
+    value: string;
+    detail: string;
+    progress: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            progress?: import("tailwind-merge").ClassNameValue;
+            detail?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    title: string;
+    value: string;
+    detail: string;
+    progress: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    title: string;
+    value: string;
+    detail: string;
+    progress: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/layout/card/metric-card.js

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+export const metricCard = tv({
+    slots: {
+        base: 'bg-white rounded-lg border border-default-200 p-6 shadow-sm hover:shadow-md transition-shadow',
+        title: 'text-sm text-default-500',
+        value: 'text-3xl font-bold text-default-900 mt-2',
+        detail: 'mt-3 space-y-1',
+        progress: 'mt-auto'
+    }
+});

package/dist/layout/card/stats-card.d.ts

@@ -1,6 +1,3 @@
-import type { ClassValue } from 'tailwind-variants';
-import type { Snippet } from 'svelte';
-import type { VariantColors } from '../../index.js';
 import { Color } from '../../variants.js';
 export declare const statsCard: import("tailwind-variants").TVReturnType<{
     color: {
@@ -192,15 +189,3 @@ export declare const statsCard: import("tailwind-variants").TVReturnType<{
     previousValue: string;
     unit: string;
 }, undefined, unknown, unknown, undefined>>;
-export type StatsCardProps = {
-    label?: string;
-    value?: string | number;
-    previousValue?: string | number;
-    previousValuePrefix?: string;
-    trend?: number;
-    color?: VariantColors;
-    chartData?: number[];
-    children?: Snippet;
-    class?: ClassValue;
-    formatLargeNumbers?: boolean;
-};

package/dist/layout/card/stats-card.js

@@ -62,7 +62,7 @@ export const statsCard = tv({
                 trend: 'text-danger-600'
             },
             neutral: {
-                trend: 'text-gray-600'
+                trend: 'text-default-600'
             }
         }
     },

package/dist/layout/sidebar/NavGroup.svelte

@@ -20,16 +20,14 @@
 
 	const menubar: MenuBar = getContext('menubar');
 
-	$effect(() => {
-		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-		menubar.collapsed;
-		resetIsActive();
-	});
-
 	const navGroupClasses = $derived(
 		cn(
-			`hidden xl:flex items-center gap-x-3 p-1.5 rounded-md w-full cursor-pointer text-gray-400 text-sm/6 text-left font-medium`,
-			{ 'font-semibold ': isActive },
+			`items-center gap-x-3 p-1.5 rounded-md w-full cursor-pointer text-default-400 text-sm/6 text-left font-medium`,
+			{
+				'font-semibold ': isActive,
+				hidden: menubar.collapsed,
+				'hidden xl:flex': !menubar.collapsed
+			},
 			className
 		)
 	);
@@ -58,7 +56,8 @@
 	const topDivClasses = $derived(
 		cn('overflow-hidden transition-all duration-200', {
 			'bg-transparent mt-0 mt-1 w-auto': !menubar.collapsed,
-			'xl:hidden': !isActive
+			'xl:hidden': !isActive,
+			'hidden xl:block': menubar.collapsed
 		})
 	);
 </script>

package/dist/layout/sidebar/NavItem.svelte

@@ -10,8 +10,8 @@
 
 	const navItemClasses = $derived(
 		cn([
-			'group flex gap-x-3 p-2 rounded-md text-gray-400 text-sm/6',
-			{ 'bg-gray-950 font-semibold': active, 'hover:bg-gray-950': !active },
+			'group flex gap-x-3 p-2 rounded-md text-default-400 text-sm/6',
+			{ 'bg-default-950 font-semibold': active, 'hover:bg-default-950': !active },
 			className
 		])
 	);

package/dist/layout/sidebar/Sidebar.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-	import NavGroup from './NavGroup.svelte';
-	import NavItem from './NavItem.svelte';
-	import { setContext } from 'svelte';
+	import { setContext, onMount } from 'svelte';
 	import type { MenuBar, NavigationItem, SidebarProps, ParentItem, LinkItem } from '../../index.js';
 	import clsx from 'clsx';
-	import { cn } from '../../helper/cls.js';
 	import { isRouteActive } from '../../helper/nav.svelte.js';
 
 	let { items = [], logo }: SidebarProps = $props();
@@ -13,6 +10,24 @@
 	});
 	setContext('menubar', menubar);
 
+	// Track screen size for responsive behavior
+	let isSmallScreen = $state(false);
+
+	function updateCollapseState() {
+		if (typeof window !== 'undefined') {
+			isSmallScreen = window.innerWidth < 1280; // xl breakpoint
+			if (isSmallScreen && !menubar.collapsed) {
+				menubar.collapsed = true;
+			}
+		}
+	}
+
+	onMount(() => {
+		updateCollapseState();
+		window.addEventListener('resize', updateCollapseState);
+		return () => window.removeEventListener('resize', updateCollapseState);
+	});
+
 	function toggle() {
 		menubar.collapsed = !menubar.collapsed;
 	}
@@ -27,7 +42,7 @@
 
 		if ('children' in item) {
 			const parentItem = item as ParentItem;
-			let anyChildActive = false;
+			let anyChildActive = parentItem.active;
 
 			const updatedChildren = parentItem.children.map((child) => {
 				const childActive = isRouteActive(child.href, true);
@@ -36,7 +51,6 @@
 				}
 				return { ...child, active: childActive };
 			});
-
 			return { ...parentItem, active: anyChildActive, children: updatedChildren };
 		}
 
@@ -50,80 +64,119 @@
 
 	// Reactively compute the active states based on the current route
 	const navigationItems = $derived(items.map((item) => processNavigationItem(item)));
+	$inspect(navigationItems);
 
 	const sidebarClasses = $derived(
 		clsx(
-			`flex min-h-screen max-h-screen overflow-y-auto flex-col gap-y-1 overflow-y-auto
-			border-r border-gray-800 bg-gray-900 px-3 duration-300 sticky top-0`,
+			`min-h-screen flex flex-col bg-gradient-to-b from-gray-900 to-default-900 h-full shrink-0`,
 			{
 				'w-16': menubar.collapsed,
-				'w-16 xl:w-72 shrink-0': !menubar.collapsed
+				'w-64': !menubar.collapsed
 			}
 		)
 	);
 
-	const logoTextClasses = $derived(
-		clsx('text-xl font-semibold hidden text-white', { 'xl:block': !menubar.collapsed })
-	);
-
 	const logoWrapperClasses = $derived(
-		clsx('flex shrink-0 items-center justify-between mt-3 flex-col', {
-			'xl:mt-0 xl:h-16 flex-row': !menubar.collapsed
-		})
+		clsx(
+			'flex items-center h-16 flex-shrink-0 px-4 bg-gradient-to-r from-gray-900 to-default-900/50 border-b border-white/10',
+			{
+				'justify-between': !menubar.collapsed,
+				'justify-center': menubar.collapsed
+			}
+		)
 	);
 </script>
 
 <div class={sidebarClasses}>
 	<div class={logoWrapperClasses}>
 		<div class="flex items-center gap-x-1">
-			{#if logo.src}
+			{#if logo.src && !menubar.collapsed}
 				<img src={logo.src} alt={logo.title} class="size-8 shrink-0" />
 			{/if}
-			{#if logo.title}
-				<h1 class={logoTextClasses}>{logo.title}</h1>
+			{#if logo.title && !menubar.collapsed}
+				<h1 class="text-xl font-bold text-white">{logo.title}</h1>
 			{/if}
 		</div>
-		<button onclick={toggle} class="hidden cursor-pointer xl:block" aria-label="Toggle Sidebar">
+		<button
+			onclick={toggle}
+			class="cursor-pointer text-white {isSmallScreen
+				? 'block'
+				: menubar.collapsed
+					? 'block'
+					: 'hidden xl:block'}"
+			aria-label="Toggle Sidebar"
+		>
 			{@render ToggleIcon()}
 		</button>
 	</div>
-	<nav class="flex flex-1 flex-col">
-		<ul role="list" class="flex flex-1 flex-col gap-y-1">
+
+	<div class="flex flex-1 flex-col overflow-y-auto bg-gradient-to-b from-transparent to-black/20">
+		<nav class="flex-1 space-y-6 px-2 py-4">
 			{#each navigationItems as item, index (index)}
 				{#if 'type' in item && item.type === 'horizontal-divider'}
-					<li class="my-3 border-t border-gray-700"></li>
+					<li class="my-2 border-t border-white/10"></li>
 				{:else if 'children' in item}
-					<NavGroup active={item.active}>
-						{#snippet labelArea(classes)}
-							<span class={classes}>{item.label}</span>
-						{/snippet}
-						{#each item.children as child (child.label)}
-							<NavItem href={child.href} active={child.active}>
-								{#if child.Icon}
-									{@const Icon = child.Icon}
-									<Icon class="size-6 shrink-0 text-gray-600" />
-								{/if}
-								<span class="truncate">{child.label}</span>
-							</NavItem>
-						{/each}
-					</NavGroup>
+					<div>
+						{#if !menubar.collapsed}
+							<h3 class="text-default-200 px-3 text-xs font-semibold tracking-wider uppercase">
+								{item.label}
+							</h3>
+						{/if}
+						<div class={menubar.collapsed ? '' : 'mt-2 space-y-1'}>
+							{#each item.children as child (child.label)}
+								<button
+									class="group hover:bg-default-500/10 flex w-full cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-150 ease-in-out hover:text-white {child.active
+										? 'bg-default-500/20'
+										: ''} {menubar.collapsed ? 'justify-center' : ''}"
+									class:text-white={child.active}
+									class:text-gray-300={!child.active}
+									onclick={() => (window.location.href = child.href)}
+									title={menubar.collapsed ? child.label : ''}
+								>
+									{#if child.Icon}
+										{@const Icon = child.Icon}
+										<Icon
+											class="h-5 w-5 flex-shrink-0 {child.active
+												? 'text-default-200'
+												: 'text-gray-400'} {menubar.collapsed ? '' : 'mr-3'}"
+										/>
+									{/if}
+									{#if !menubar.collapsed}
+										<span class="truncate">{child.label}</span>
+									{/if}
+								</button>
+							{/each}
+						</div>
+					</div>
 				{:else if 'href' in item}
-					<NavItem href={item.href} active={item.active}>
-						{#snippet children(classes)}
-							{#if item.Icon}
-								{@const Icon = item.Icon}
-								<Icon class="size-6 shrink-0 text-gray-600" />
-							{/if}
-							<span class={cn(classes)}>{item.label}</span>
-						{/snippet}
-					</NavItem>
+					<button
+						class="group hover:bg-default-500/10 flex w-full cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-150 ease-in-out hover:text-white {item.active
+							? 'bg-default-500/20'
+							: ''} {menubar.collapsed ? 'justify-center' : ''}"
+						class:text-white={item.active}
+						class:text-gray-300={!item.active}
+						onclick={() => (window.location.href = item.href)}
+						title={menubar.collapsed ? item.label : ''}
+					>
+						{#if item.Icon}
+							{@const Icon = item.Icon}
+							<Icon
+								class="h-5 w-5 flex-shrink-0 {item.active
+									? 'text-default-200'
+									: 'text-gray-400'} {menubar.collapsed ? '' : 'mr-3'}"
+							/>
+						{/if}
+						{#if !menubar.collapsed}
+							<span class="truncate">{item.label}</span>
+						{/if}
+					</button>
 				{/if}
 			{/each}
-		</ul>
-	</nav>
+		</nav>
+	</div>
 </div>
 
-{#snippet ToggleIcon(classes = 'size-6 shrink-0 text-gray-600')}
+{#snippet ToggleIcon(classes = 'size-6 shrink-0 text-default-200')}
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		width="0.8em"