@makolabs/ripple 0.0.1-dev.3 → 0.0.1-dev.5

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

@@ -0,0 +1,208 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantColors } from '../../types/variants.js';
+export declare const statsCard: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        primary: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        secondary: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        info: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        success: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        warning: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        danger: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+    };
+    trendDirection: {
+        up: {
+            trend: string;
+        };
+        down: {
+            trend: string;
+        };
+        neutral: {
+            trend: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+    value: string;
+    trend: string;
+    previousValue: string;
+    unit: string;
+    chartContainer: string;
+}, undefined, {
+    color: {
+        default: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        primary: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        secondary: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        info: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        success: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        warning: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        danger: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+    };
+    trendDirection: {
+        up: {
+            trend: string;
+        };
+        down: {
+            trend: string;
+        };
+        neutral: {
+            trend: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+    value: string;
+    trend: string;
+    previousValue: string;
+    unit: string;
+    chartContainer: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        primary: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        secondary: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        info: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        success: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        warning: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        danger: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+    };
+    trendDirection: {
+        up: {
+            trend: string;
+        };
+        down: {
+            trend: string;
+        };
+        neutral: {
+            trend: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+    value: string;
+    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

@@ -0,0 +1,73 @@
+import { tv } from 'tailwind-variants';
+export const statsCard = tv({
+    slots: {
+        base: '',
+        label: '',
+        value: '',
+        trend: '',
+        previousValue: '',
+        unit: '',
+        chartContainer: ''
+    },
+    variants: {
+        color: {
+            default: {
+                label: 'text-gray-500',
+                value: 'text-gray-900',
+                trend: 'text-gray-600',
+                previousValue: 'text-gray-500'
+            },
+            primary: {
+                label: 'text-primary-500',
+                value: 'text-primary-600',
+                trend: 'text-primary-600',
+                previousValue: 'text-primary-400'
+            },
+            secondary: {
+                label: 'text-secondary-500',
+                value: 'text-secondary-600',
+                trend: 'text-secondary-600',
+                previousValue: 'text-secondary-400'
+            },
+            info: {
+                label: 'text-info-500',
+                value: 'text-info-600',
+                trend: 'text-info-600',
+                previousValue: 'text-info-400'
+            },
+            success: {
+                label: 'text-success-500',
+                value: 'text-success-600',
+                trend: 'text-success-600',
+                previousValue: 'text-success-400'
+            },
+            warning: {
+                label: 'text-warning-500',
+                value: 'text-warning-600',
+                trend: 'text-warning-600',
+                previousValue: 'text-warning-400'
+            },
+            danger: {
+                label: 'text-danger-500',
+                value: 'text-danger-600',
+                trend: 'text-danger-600',
+                previousValue: 'text-danger-400'
+            }
+        },
+        trendDirection: {
+            up: {
+                trend: 'text-success-600'
+            },
+            down: {
+                trend: 'text-danger-600'
+            },
+            neutral: {
+                trend: 'text-gray-600'
+            }
+        }
+    },
+    defaultVariants: {
+        color: 'default',
+        trendDirection: 'neutral'
+    }
+});

package/dist/layout/index.d.ts

@@ -1 +1,5 @@
-export { default as Card, type CardProps } from './Card.svelte';
+export * from './card/index.js';
+export * from './navbar/index.js';
+export * from './sidebar/index.js';
+export * from './table/index.js';
+export * from './tabs/index.js';

package/dist/layout/index.js

@@ -1 +1,5 @@
-export { default as Card } from './Card.svelte';
+export * from './card/index.js';
+export * from './navbar/index.js';
+export * from './sidebar/index.js';
+export * from './table/index.js';
+export * from './tabs/index.js';

package/dist/layout/navbar/Navbar.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { navbar, type NavbarProps } from './navbar.js';
+	import { onNavigate } from '$app/navigation';
+	import { isRouteActive } from '../../helper/nav.svelte.js';
+	import { slide } from 'svelte/transition';
+
+	let { logo, links = [], class: className = '', brand, children, actions }: NavbarProps = $props();
+
+	let mobileMenuOpen = $state(false);
+	let scrolled = $state(false);
+	let isScrollingDown = $state(false);
+
+	onNavigate(() => {
+		mobileMenuOpen = false;
+	});
+
+	const {
+		base,
+		wrapper,
+		container,
+		brand: brandSlot,
+		menu,
+		mobileMenu,
+		mobileMenuButton,
+		mobileMenuContainer,
+		links: linksSlot,
+		link,
+		mobileLink,
+		actions: actionsSlot
+	} = $derived(navbar());
+
+	const baseClass = $derived(
+		cn(base(), className, {
+			'shadow-md': scrolled,
+			'translate-y-0': !isScrollingDown || mobileMenuOpen,
+			'-translate-y-full': isScrollingDown && !mobileMenuOpen && scrolled
+		})
+	);
+	const wrapperClasses = $derived(cn(wrapper()));
+	const containerClasses = $derived(cn(container()));
+	const brandClasses = $derived(cn(brandSlot()));
+	const menuClasses = $derived(cn(menu()));
+	const mobileMenuClasses = $derived(cn(mobileMenu()));
+	const mobileMenuButtonClasses = $derived(cn(mobileMenuButton()));
+	const mobileMenuContainerClasses = $derived(cn(mobileMenuContainer()));
+	const linksClasses = $derived(cn(linksSlot()));
+	const linkClasses = $derived(cn(link()));
+	const mobileLinkClasses = $derived(cn(mobileLink()));
+	const actionsClasses = $derived(cn(actionsSlot()));
+
+	const processedLinks = $derived(
+		links.map((link) => ({
+			...link,
+			current: isRouteActive(link.href)
+		}))
+	);
+
+	function toggleMobileMenu() {
+		mobileMenuOpen = !mobileMenuOpen;
+	}
+
+	$effect(() => {
+		if (typeof window !== 'undefined' && mobileMenuOpen) {
+			const handleEscape = (e: KeyboardEvent) => {
+				if (e.key === 'Escape') {
+					mobileMenuOpen = false;
+				}
+			};
+
+			window.addEventListener('keydown', handleEscape);
+
+			return () => {
+				window.removeEventListener('keydown', handleEscape);
+			};
+		}
+	});
+</script>
+
+<nav
+	class={baseClass}
+	aria-label="Main navigation"
+	class:sticky={scrolled}
+	class:top-0={scrolled}
+	class:z-10={true}
+	class:transition-transform={true}
+	class:duration-300={true}
+>
+	<div class={wrapperClasses}>
+		<div class={containerClasses}>
+			<div class={brandClasses}>
+				{#if brand}
+					{@render brand()}
+				{:else if typeof logo === 'string'}
+					<a href="/" class="flex items-center">
+						<img src={logo} alt="Logo" class="h-8 w-auto" />
+					</a>
+				{:else if logo}
+					{@const LogoComponent = logo}
+					<a href="/" class="flex items-center">
+						<LogoComponent class="h-8 w-auto" />
+					</a>
+				{/if}
+			</div>
+
+			<!-- Mobile menu button -->
+			<div class="flex items-center sm:hidden">
+				<button
+					type="button"
+					class={mobileMenuButtonClasses}
+					aria-controls="mobile-menu"
+					aria-expanded={mobileMenuOpen}
+					onclick={toggleMobileMenu}
+				>
+					<span class="sr-only">Open main menu</span>
+					{#if mobileMenuOpen}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M4 6h16M4 12h16M4 18h16"
+							/>
+						</svg>
+					{/if}
+				</button>
+			</div>
+
+			<!-- Desktop menu -->
+			<div class={menuClasses}>
+				<div class={linksClasses}>
+					{#each processedLinks as navItem (navItem.href)}
+						<a
+							href={navItem.href}
+							class={cn(linkClasses, navItem.current ? navbar({ active: true }).link() : '')}
+							aria-current={navItem.current ? 'page' : undefined}
+						>
+							{#if navItem.icon}
+								{@const Icon = navItem.icon}
+								<Icon class="h-4 w-4" />
+							{/if}
+							{navItem.label}
+						</a>
+					{/each}
+					{#if children}
+						{@render children()}
+					{/if}
+				</div>
+			</div>
+
+			{#if actions}
+				<div class={actionsClasses}>
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	{#if mobileMenuOpen}
+		<div class={mobileMenuClasses} id="mobile-menu" transition:slide={{ duration: 200, axis: 'y' }}>
+			<div class={mobileMenuContainerClasses}>
+				{#each processedLinks as navItem (navItem.href)}
+					<a
+						href={navItem.href}
+						class={cn(
+							mobileLinkClasses,
+							navItem.current ? navbar({ active: true }).mobileLink() : ''
+						)}
+						aria-current={navItem.current ? 'page' : undefined}
+					>
+						{#if navItem.icon}
+							{@const Icon = navItem.icon}
+							<span class="flex items-center">
+								<Icon class="mr-2 h-4 w-4" />
+								{navItem.label}
+							</span>
+						{:else}
+							{navItem.label}
+						{/if}
+					</a>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</nav>

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

@@ -0,0 +1,4 @@
+import { type NavbarProps } from './navbar.js';
+declare const Navbar: import("svelte").Component<NavbarProps, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

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

@@ -0,0 +1,2 @@
+export { default as Navbar } from './Navbar.svelte';
+export { navbar, type NavbarProps, type NavbarLinkItem } from './navbar.js';

package/dist/layout/navbar/index.js

@@ -0,0 +1,2 @@
+export { default as Navbar } from './Navbar.svelte';
+export { navbar } from './navbar.js';