@makolabs/ripple 0.0.1 → 0.0.4

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

@@ -0,0 +1,191 @@
+import { Color } from '../../variants.js';
+export declare const statsCard: import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.DEFAULT]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.PRIMARY]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.SECONDARY]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.INFO]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.SUCCESS]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.WARNING]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.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;
+}, undefined, {
+    color: {
+        [Color.DEFAULT]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.PRIMARY]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.SECONDARY]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.INFO]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.SUCCESS]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.WARNING]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.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;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.DEFAULT]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.PRIMARY]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.SECONDARY]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.INFO]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.SUCCESS]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.WARNING]: {
+            label: string;
+            value: string;
+            trend: string;
+            previousValue: string;
+        };
+        [Color.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;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,73 @@
+import { tv } from 'tailwind-variants';
+import { Color } from '../../variants.js';
+export const statsCard = tv({
+    slots: {
+        base: '',
+        label: '',
+        value: '',
+        trend: '',
+        previousValue: '',
+        unit: '',
+    },
+    variants: {
+        color: {
+            [Color.DEFAULT]: {
+                label: 'text-default-500',
+                value: 'text-default-900',
+                trend: 'text-default-600',
+                previousValue: 'text-default-500'
+            },
+            [Color.PRIMARY]: {
+                label: 'text-primary-500',
+                value: 'text-primary-600',
+                trend: 'text-primary-600',
+                previousValue: 'text-primary-400'
+            },
+            [Color.SECONDARY]: {
+                label: 'text-secondary-500',
+                value: 'text-secondary-600',
+                trend: 'text-secondary-600',
+                previousValue: 'text-secondary-400'
+            },
+            [Color.INFO]: {
+                label: 'text-info-500',
+                value: 'text-info-600',
+                trend: 'text-info-600',
+                previousValue: 'text-info-400'
+            },
+            [Color.SUCCESS]: {
+                label: 'text-success-500',
+                value: 'text-success-600',
+                trend: 'text-success-600',
+                previousValue: 'text-success-400'
+            },
+            [Color.WARNING]: {
+                label: 'text-warning-500',
+                value: 'text-warning-600',
+                trend: 'text-warning-600',
+                previousValue: 'text-warning-400'
+            },
+            [Color.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-default-600'
+            }
+        }
+    },
+    defaultVariants: {
+        color: Color.DEFAULT,
+        trendDirection: 'neutral'
+    }
+});

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/navbar.d.ts

@@ -0,0 +1,205 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+export type NavbarLinkItem = {
+    label: string;
+    href: string;
+    icon?: Component;
+    current?: boolean;
+    children?: NavbarLinkItem[];
+};
+export declare const navbar: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            base: string;
+            mobileMenuButton: string;
+            link: string;
+            mobileLink: string;
+            selectItem: string;
+        };
+        primary: {
+            base: string;
+            mobileMenuButton: string;
+            link: string;
+            mobileLink: string;
+            selectItem: string;
+        };
+        secondary: {
+            base: string;
+            mobileMenuButton: string;
+            link: string;
+            mobileLink: string;
+            selectItem: string;
+        };
+    };
+    size: {
+        sm: {
+            container: string;
+            link: string;
+            mobileLink: string;
+        };
+        base: {
+            container: string;
+            link: string;
+            mobileLink: string;
+        };
+        lg: {
+            container: string;
+            link: string;
+            mobileLink: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+}, {
+    base: string;
+    wrapper: string;
+    container: string;
+    brand: string;
+    menu: string;
+    mobileMenu: string;
+    mobileMenuButton: string;
+    mobileMenuContainer: string;
+    links: string;
+    link: string;
+    mobileLink: string;
+    actions: string;
+    avatar: string;
+    selectButton: string;
+    selectMenu: string;
+    selectItem: string;
+    divider: string;
+}, undefined, {
+    color: {
+        default: {
+            base: string;
+            mobileMenuButton: string;
+            link: string;
+            mobileLink: string;
+            selectItem: string;
+        };
+        primary: {
+            base: string;
+            mobileMenuButton: string;
+            link: string;
+            mobileLink: string;
+            selectItem: string;
+        };
+        secondary: {
+            base: string;
+            mobileMenuButton: string;
+            link: string;
+            mobileLink: string;
+            selectItem: string;
+        };
+    };
+    size: {
+        sm: {
+            container: string;
+            link: string;
+            mobileLink: string;
+        };
+        base: {
+            container: string;
+            link: string;
+            mobileLink: string;
+        };
+        lg: {
+            container: string;
+            link: string;
+            mobileLink: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+}, {
+    base: string;
+    wrapper: string;
+    container: string;
+    brand: string;
+    menu: string;
+    mobileMenu: string;
+    mobileMenuButton: string;
+    mobileMenuContainer: string;
+    links: string;
+    link: string;
+    mobileLink: string;
+    actions: string;
+    avatar: string;
+    selectButton: string;
+    selectMenu: string;
+    selectItem: string;
+    divider: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            base: string;
+            mobileMenuButton: string;
+            link: string;
+            mobileLink: string;
+            selectItem: string;
+        };
+        primary: {
+            base: string;
+            mobileMenuButton: string;
+            link: string;
+            mobileLink: string;
+            selectItem: string;
+        };
+        secondary: {
+            base: string;
+            mobileMenuButton: string;
+            link: string;
+            mobileLink: string;
+            selectItem: string;
+        };
+    };
+    size: {
+        sm: {
+            container: string;
+            link: string;
+            mobileLink: string;
+        };
+        base: {
+            container: string;
+            link: string;
+            mobileLink: string;
+        };
+        lg: {
+            container: string;
+            link: string;
+            mobileLink: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+}, {
+    base: string;
+    wrapper: string;
+    container: string;
+    brand: string;
+    menu: string;
+    mobileMenu: string;
+    mobileMenuButton: string;
+    mobileMenuContainer: string;
+    links: string;
+    link: string;
+    mobileLink: string;
+    actions: string;
+    avatar: string;
+    selectButton: string;
+    selectMenu: string;
+    selectItem: string;
+    divider: string;
+}, undefined, unknown, unknown, undefined>>;
+export type NavbarProps = {
+    logo?: string | Component;
+    links?: NavbarLinkItem[];
+    class?: ClassValue;
+    brand?: Snippet;
+    children?: Snippet;
+    actions?: Snippet;
+};