@makolabs/ripple 0.0.1-dev.4 → 0.0.1-dev.40

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

@@ -1,45 +1,43 @@
-import type { ClassValue } from 'tailwind-variants';
-import type { Snippet } from 'svelte';
-import type { VariantColors } from '../../types/variants.js';
+import { Color } from '../../variants.js';
 export declare const statsCard: import("tailwind-variants").TVReturnType<{
     color: {
-        default: {
+        [Color.DEFAULT]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        info: {
+        [Color.INFO]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        warning: {
+        [Color.WARNING]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        danger: {
+        [Color.DANGER]: {
             label: string;
             value: string;
             trend: string;
@@ -64,46 +62,45 @@ export declare const statsCard: import("tailwind-variants").TVReturnType<{
     trend: string;
     previousValue: string;
     unit: string;
-    chartContainer: string;
 }, undefined, {
     color: {
-        default: {
+        [Color.DEFAULT]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        info: {
+        [Color.INFO]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        warning: {
+        [Color.WARNING]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        danger: {
+        [Color.DANGER]: {
             label: string;
             value: string;
             trend: string;
@@ -128,46 +125,45 @@ export declare const statsCard: import("tailwind-variants").TVReturnType<{
     trend: string;
     previousValue: string;
     unit: string;
-    chartContainer: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        default: {
+        [Color.DEFAULT]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        info: {
+        [Color.INFO]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        warning: {
+        [Color.WARNING]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        danger: {
+        [Color.DANGER]: {
             label: string;
             value: string;
             trend: string;
@@ -192,17 +188,4 @@ export declare const statsCard: import("tailwind-variants").TVReturnType<{
     trend: string;
     previousValue: string;
     unit: string;
-    chartContainer: 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

@@ -1,4 +1,5 @@
 import { tv } from 'tailwind-variants';
+import { Color } from '../../variants.js';
 export const statsCard = tv({
     slots: {
         base: '',
@@ -7,47 +8,46 @@ export const statsCard = tv({
         trend: '',
         previousValue: '',
         unit: '',
-        chartContainer: ''
     },
     variants: {
         color: {
-            default: {
-                label: 'text-gray-500',
-                value: 'text-gray-900',
-                trend: 'text-gray-600',
-                previousValue: 'text-gray-500'
+            [Color.DEFAULT]: {
+                label: 'text-default-500',
+                value: 'text-default-900',
+                trend: 'text-default-600',
+                previousValue: 'text-default-500'
             },
-            primary: {
+            [Color.PRIMARY]: {
                 label: 'text-primary-500',
                 value: 'text-primary-600',
                 trend: 'text-primary-600',
                 previousValue: 'text-primary-400'
             },
-            secondary: {
+            [Color.SECONDARY]: {
                 label: 'text-secondary-500',
                 value: 'text-secondary-600',
                 trend: 'text-secondary-600',
                 previousValue: 'text-secondary-400'
             },
-            info: {
+            [Color.INFO]: {
                 label: 'text-info-500',
                 value: 'text-info-600',
                 trend: 'text-info-600',
                 previousValue: 'text-info-400'
             },
-            success: {
+            [Color.SUCCESS]: {
                 label: 'text-success-500',
                 value: 'text-success-600',
                 trend: 'text-success-600',
                 previousValue: 'text-success-400'
             },
-            warning: {
+            [Color.WARNING]: {
                 label: 'text-warning-500',
                 value: 'text-warning-600',
                 trend: 'text-warning-600',
                 previousValue: 'text-warning-400'
             },
-            danger: {
+            [Color.DANGER]: {
                 label: 'text-danger-500',
                 value: 'text-danger-600',
                 trend: 'text-danger-600',
@@ -62,12 +62,12 @@ export const statsCard = tv({
                 trend: 'text-danger-600'
             },
             neutral: {
-                trend: 'text-gray-600'
+                trend: 'text-default-600'
             }
         }
     },
     defaultVariants: {
-        color: 'default',
+        color: Color.DEFAULT,
         trendDirection: 'neutral'
     }
 });

package/dist/layout/navbar/navbar.d.ts

@@ -198,31 +198,8 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
 export type NavbarProps = {
     logo?: string | Component;
     links?: NavbarLinkItem[];
-    color?: keyof typeof navbar.variants.color;
-    size?: keyof typeof navbar.variants.size;
     class?: ClassValue;
-    wrapperClass?: ClassValue;
-    brandClass?: ClassValue;
-    menuClass?: ClassValue;
-    mobileMenuClass?: ClassValue;
-    linksClass?: ClassValue;
-    linkClass?: ClassValue;
-    mobileLinkClass?: ClassValue;
-    actionsClass?: ClassValue;
-    sticky?: boolean;
     brand?: Snippet;
     children?: Snippet;
     actions?: Snippet;
-    userMenu?: boolean;
-    username?: string;
-    userAvatar?: string;
-    userMenuItems?: {
-        label: string;
-        href: string;
-        onClick?: () => void;
-    }[];
-    onmenuitemclick?: (item: {
-        label: string;
-        href: string;
-    }) => void;
 };

package/dist/layout/sidebar/NavGroup.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import FluentChevronRight16Filled from '../../../icons/FluentChevronRight16Filled.svelte';
 	import { getContext } from 'svelte';
-	import type { MenuBar, NavGroupProps } from './sidebar.js';
+	import type { MenuBar, NavGroupProps } from '../../index.js';
 	import { cn } from '../../helper/cls.js';
 
 	let {
@@ -21,23 +20,20 @@
 
 	const menubar: MenuBar = getContext('menubar');
 
-	$effect(() => {
-		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-		menubar.collapsed;
-		resetIsActive();
-	});
-
 	const navGroupClasses = $derived(
 		cn(
-			`flex items-center gap-x-3 hover:bg-gray-950 p-1.5 rounded-md w-full cursor-pointer
-		text-gray-400 text-sm/6 text-left`,
-			{ 'font-semibold bg-gray-950': isActive, 'hover:bg-gray-950': !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
 		)
 	);
 
 	const chevronIconClasses = $derived(
-		cn('size-4 text-gray-600 shrink-0', {
+		cn('size-4 text-default-600 shrink-0', {
 			'rotate-90': isActive,
 			'-ml-2 xl:ml-auto': !menubar.collapsed,
 			'-ml-2': menubar.collapsed
@@ -51,51 +47,45 @@
 		})
 	);
 
-	const topDivClasses = $derived(
-		cn('overflow-hidden transition-all duration-200', {
-			'fixed left-0 top-0 shadow-lg w-screen h-screen z-50 bg-gray-700/30 backdrop-blur': isActive,
-			'xl:static xl:shadow-none xl:bg-transparent mt-0 xl:mt-1 xl:w-auto xl:h-auto':
-				!menubar.collapsed
-		})
-	);
-
-	const toggleButtonClasses = $derived(
-		cn('bg-slate-900 w-72 pl-3 h-8 flex p-2', {
-			'xl:hidden': isActive && !menubar.collapsed
+	const iconClasses = $derived(
+		cn('size-6 shrink-0 text-default-600', {
+			'flex xl:hidden': !menubar.collapsed
 		})
 	);
 
-	const navUlClasses = $derived(
-		cn('w-52', {
-			'bg-slate-900 w-72 h-[calc(100vh-32px)] p-2': isActive,
-			'xl:h-auto xl:bg-transparent xl:p-0 xl:w-52 xl:ml-2': !menubar.collapsed
+	const topDivClasses = $derived(
+		cn('overflow-hidden transition-all duration-200', {
+			'bg-transparent mt-0 mt-1 w-auto': !menubar.collapsed,
+			'xl:hidden': !isActive,
+			'hidden xl:block': menubar.collapsed
 		})
 	);
 </script>
 
-<svelte:window onresize={resetIsActive} />
-
 <div>
 	<button type="button" class={navGroupClasses} onclick={toggle}>
-		{@render labelArea(labelClasses)}
-		<FluentChevronRight16Filled class={chevronIconClasses} />
+		{@render labelArea(labelClasses, iconClasses)}
+		{@render ChevronIcon(chevronIconClasses, 0.7)}
 	</button>
 
-	{#if isActive}
-		<div class={topDivClasses}>
-			<div class={toggleButtonClasses}>
-				<button
-					type="button"
-					class="flex h-7 w-7 cursor-pointer items-center justify-center gap-x-3
-					rounded-md bg-slate-800 text-left text-sm/6 text-gray-700"
-					onclick={toggle}
-				>
-					<FluentChevronRight16Filled class="size-4 shrink-0 -rotate-180 text-gray-600" />
-				</button>
-			</div>
-			<ul class={navUlClasses}>
-				{@render children?.()}
-			</ul>
-		</div>
-	{/if}
+	<div class={topDivClasses}>
+		<ul>
+			{@render children?.()}
+		</ul>
+	</div>
 </div>
+
+{#snippet ChevronIcon(className: string, size: number)}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="{size}em"
+		height="{size}em"
+		viewBox="0 0 16 16"
+		class={className}
+	>
+		<path
+			fill="currentColor"
+			d="M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04"
+		/>
+	</svg>
+{/snippet}

package/dist/layout/sidebar/NavGroup.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { NavGroupProps } from './sidebar.js';
+import type { NavGroupProps } from '../../index.js';
 declare const NavGroup: import("svelte").Component<NavGroupProps, {}, "">;
 type NavGroup = ReturnType<typeof NavGroup>;
 export default NavGroup;

package/dist/layout/sidebar/NavItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import clsx from 'clsx';
 	import { getContext } from 'svelte';
-	import type { MenuBar, NavItemProps } from './sidebar.js';
+	import type { MenuBar, NavItemProps } from '../../index.js';
 	import { cn } from '../../helper/cls.js';
 
 	let { href, children, active, class: className = '' }: NavItemProps = $props();
@@ -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/NavItem.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { NavItemProps } from './sidebar.js';
+import type { NavItemProps } from '../../index.js';
 declare const NavItem: import("svelte").Component<NavItemProps, {}, "">;
 type NavItem = ReturnType<typeof NavItem>;
 export default NavItem;

package/dist/layout/sidebar/Sidebar.svelte

@@ -1,16 +1,7 @@
 <script lang="ts">
-	import NavGroup from './NavGroup.svelte';
-	import NavItem from './NavItem.svelte';
 	import { setContext } from 'svelte';
-	import type {
-		MenuBar,
-		NavigationItem,
-		SidebarProps,
-		ParentItem,
-		LinkItem
-	} from './sidebar.js';
+	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();
@@ -33,16 +24,15 @@
 
 		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);
+				const childActive = isRouteActive(child.href, true);
 				if (childActive) {
 					anyChildActive = true;
 				}
 				return { ...child, active: childActive };
 			});
-
 			return { ...parentItem, active: anyChildActive, children: updatedChildren };
 		}
 
@@ -56,90 +46,129 @@
 
 	// 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`,
-			{
-				'w-16': menubar.collapsed,
-				'w-16 xl:w-72 shrink-0': !menubar.collapsed
-			}
-		)
+		clsx(`min-h-screen flex flex-col bg-gradient-to-b from-gray-900 to-default-900 h-full`, {
+			'w-16': menubar.collapsed,
+			'w-16 xl:w-64 shrink-0': !menubar.collapsed
+		})
 	);
 
 	const logoTextClasses = $derived(
-		clsx('text-xl font-semibold hidden text-white', { 'xl:block': !menubar.collapsed })
+		clsx('text-xl font-bold text-white', {
+			'xl:block': !menubar.collapsed,
+			hidden: 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}
+			{#if logo.title && !menubar.collapsed}
 				<h1 class={logoTextClasses}>{logo.title}</h1>
 			{/if}
 		</div>
-		<button onclick={toggle} class="hidden cursor-pointer xl:block" aria-label="Toggle Sidebar">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="0.8em"
-				height="0.8em"
-				viewBox="0 0 24 24"
-				class="size-6 shrink-0 text-gray-600"
-			>
-				<path
-					fill="currentColor"
-					d="M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993zh18zm0-6l18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993zl18-.002zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993zh18z"
-				/>
-			</svg>
+		<button
+			onclick={toggle}
+			class="hidden cursor-pointer text-white 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)}
-							{#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}
-						{#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-default-200')}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="0.8em"
+		height="0.8em"
+		viewBox="0 0 24 24"
+		class={classes}
+	>
+		<path
+			fill="currentColor"
+			d="M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993zh18zm0-6l18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993zl18-.002zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993zh18z"
+		/>
+	</svg>
+{/snippet}