@makolabs/ripple 0.0.1 → 0.0.3

package/dist/layout/navbar/navbar.js

@@ -0,0 +1,98 @@
+import { tv } from 'tailwind-variants';
+export const navbar = tv({
+    slots: {
+        base: 'sticky top-0 z-40 w-full backdrop-blur',
+        wrapper: 'mx-auto px-4 sm:px-6 lg:px-8',
+        container: 'flex h-16 justify-between',
+        brand: 'flex flex-shrink-0 items-center',
+        menu: 'hidden sm:ml-6 sm:flex sm:space-x-8',
+        mobileMenu: 'sm:hidden',
+        mobileMenuButton: 'inline-flex items-center justify-center rounded-md p-2',
+        mobileMenuContainer: 'space-y-1 pb-3 pt-2',
+        links: 'flex items-center space-x-4',
+        link: 'inline-flex h-full items-center gap-2 border-b-2 px-1 pt-1 text-sm font-medium',
+        mobileLink: 'block border-l-4 py-2 pl-3 pr-4 text-base font-medium',
+        actions: 'hidden sm:ml-6 sm:flex sm:items-center',
+        avatar: 'h-8 w-8 rounded-full',
+        selectButton: 'flex rounded-full focus:outline-none',
+        selectMenu: 'absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5',
+        selectItem: 'block px-4 py-2 text-sm',
+        divider: 'border-t border-default-200 my-2'
+    },
+    variants: {
+        color: {
+            default: {
+                base: 'bg-white/80 border-b border-default-200',
+                mobileMenuButton: 'text-default-500 hover:bg-default-100 focus:outline-none',
+                link: 'text-default-500 hover:text-default-900 border-transparent hover:border-default-300',
+                mobileLink: 'text-default-600 hover:bg-default-50 border-transparent',
+                selectItem: 'text-default-700 hover:bg-default-100'
+            },
+            primary: {
+                base: 'bg-primary-50/80 border-b border-primary-200',
+                mobileMenuButton: 'text-primary-500 hover:bg-primary-100 focus:outline-none',
+                link: 'text-primary-500 hover:text-primary-900 border-transparent hover:border-primary-300',
+                mobileLink: 'text-primary-600 hover:bg-primary-50 border-transparent',
+                selectItem: 'text-primary-700 hover:bg-primary-100'
+            },
+            secondary: {
+                base: 'bg-secondary-50/80 border-b border-secondary-200',
+                mobileMenuButton: 'text-secondary-500 hover:bg-secondary-100 focus:outline-none',
+                link: 'text-secondary-500 hover:text-secondary-900 border-transparent hover:border-secondary-300',
+                mobileLink: 'text-secondary-600 hover:bg-secondary-50 border-transparent',
+                selectItem: 'text-secondary-700 hover:bg-secondary-100'
+            }
+        },
+        size: {
+            sm: {
+                container: 'h-12',
+                link: 'text-xs',
+                mobileLink: 'text-xs'
+            },
+            base: {
+                container: 'h-16',
+                link: 'text-sm',
+                mobileLink: 'text-sm'
+            },
+            lg: {
+                container: 'h-20',
+                link: 'text-base',
+                mobileLink: 'text-base'
+            }
+        },
+        active: {
+            true: {}
+        }
+    },
+    compoundVariants: [
+        {
+            active: true,
+            color: 'default',
+            class: {
+                link: 'border-default-500 text-default-900',
+                mobileLink: 'border-default-500 bg-default-50 text-default-700'
+            }
+        },
+        {
+            active: true,
+            color: 'primary',
+            class: {
+                link: 'border-primary-500 text-primary-900',
+                mobileLink: 'border-primary-500 bg-primary-50 text-primary-700'
+            }
+        },
+        {
+            active: true,
+            color: 'secondary',
+            class: {
+                link: 'border-secondary-500 text-secondary-900',
+                mobileLink: 'border-secondary-500 bg-secondary-50 text-secondary-700'
+            }
+        }
+    ],
+    defaultVariants: {
+        color: 'default',
+        size: 'base',
+        active: false
+    }
+});

package/dist/layout/sidebar/NavGroup.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { MenuBar, NavGroupProps } from '../../index.js';
+	import { cn } from '../../helper/cls.js';
+
+	let {
+		labelArea,
+		children,
+		class: className = '',
+		active: isActive = false
+	}: NavGroupProps = $props();
+
+	function toggle() {
+		isActive = !isActive;
+	}
+
+	function resetIsActive() {
+		isActive = false;
+	}
+
+	const menubar: MenuBar = getContext('menubar');
+
+	const navGroupClasses = $derived(
+		cn(
+			`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-default-600 shrink-0', {
+			'rotate-90': isActive,
+			'-ml-2 xl:ml-auto': !menubar.collapsed,
+			'-ml-2': menubar.collapsed
+		})
+	);
+
+	const labelClasses = $derived(
+		cn('items-center gap-x-3', {
+			hidden: menubar.collapsed,
+			'hidden xl:flex': !menubar.collapsed
+		})
+	);
+
+	const iconClasses = $derived(
+		cn('size-6 shrink-0 text-default-600', {
+			'flex xl:hidden': !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>
+
+<div>
+	<button type="button" class={navGroupClasses} onclick={toggle}>
+		{@render labelArea(labelClasses, iconClasses)}
+		{@render ChevronIcon(chevronIconClasses, 0.7)}
+	</button>
+
+	<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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import { getContext } from 'svelte';
+	import type { MenuBar, NavItemProps } from '../../index.js';
+	import { cn } from '../../helper/cls.js';
+
+	let { href, children, active, class: className = '' }: NavItemProps = $props();
+
+	const menubar: MenuBar = getContext('menubar');
+
+	const navItemClasses = $derived(
+		cn([
+			'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
+		])
+	);
+
+	const navChildrenClasses = $derived(
+		clsx('flex-1 truncate', {
+			hidden: menubar.collapsed,
+			'hidden xl:flex': !menubar.collapsed
+		})
+	);
+</script>
+
+<a {href} class={navItemClasses}>
+	{@render children?.(navChildrenClasses)}
+</a>

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import { setContext, onMount } from 'svelte';
+	import type { MenuBar, NavigationItem, SidebarProps, ParentItem, LinkItem } from '../../index.js';
+	import clsx from 'clsx';
+	import { isRouteActive } from '../../helper/nav.svelte.js';
+	import { goto } from '$app/navigation';
+
+	let { items = [], logo }: SidebarProps = $props();
+	let menubar: MenuBar = $state({
+		collapsed: false
+	});
+	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;
+	}
+
+	/**
+	 * Process a navigation item to determine if it should be active
+	 */
+	function processNavigationItem(item: NavigationItem): NavigationItem {
+		if ('type' in item && item.type === 'horizontal-divider') {
+			return item;
+		}
+
+		if ('children' in item) {
+			const parentItem = item as ParentItem;
+			let anyChildActive = parentItem.active;
+
+			const updatedChildren = parentItem.children.map((child) => {
+				const childActive = isRouteActive(child.href, true);
+				if (childActive) {
+					anyChildActive = true;
+				}
+				return { ...child, active: childActive };
+			});
+			return { ...parentItem, active: anyChildActive, children: updatedChildren };
+		}
+
+		if ('href' in item) {
+			const linkItem = item as LinkItem;
+			return { ...linkItem, active: isRouteActive(linkItem.href) };
+		}
+
+		return item;
+	}
+
+	// Reactively compute the active states based on the current route
+	const navigationItems = $derived(items.map((item) => processNavigationItem(item)));
+	$inspect(navigationItems);
+
+	const sidebarClasses = $derived(
+		clsx(
+			`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-64': !menubar.collapsed
+			}
+		)
+	);
+
+	const logoWrapperClasses = $derived(
+		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 && !menubar.collapsed}
+				<img src={logo.src} alt={logo.title} class="size-8 shrink-0" />
+			{/if}
+			{#if logo.title && !menubar.collapsed}
+				<h1 class="text-xl font-bold text-white">{logo.title}</h1>
+			{/if}
+		</div>
+		<button
+			onclick={toggle}
+			class="cursor-pointer text-white {isSmallScreen
+				? 'block'
+				: menubar.collapsed
+					? 'block'
+					: 'hidden xl:block'}"
+			aria-label="Toggle Sidebar"
+		>
+			{@render ToggleIcon()}
+		</button>
+	</div>
+
+	<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-2 border-t border-white/10"></li>
+				{:else if 'children' in item}
+					<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={() => goto(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}
+					<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}
+		</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}

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

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

package/dist/layout/table/Cells.svelte

@@ -0,0 +1,111 @@
+<script module lang="ts">
+	import type { StatusType, KeyType, DataRow } from './table.js';
+
+	export { DateCell, Currency, Percentage, PhoneNumber, Email, Status, Time };
+
+	function getStatusClass(status: string): KeyType {
+		const base = 'inline-flex px-2 py-1 text-xs font-medium rounded-full';
+		const classes: Record<StatusType, string> = {
+			active: `${base} bg-success-100 text-success-700`,
+			inactive: `${base} bg-default-100 text-default-700`,
+			pending: `${base} bg-warning-100 text-warning-700`,
+			error: `${base} bg-danger-100 text-danger-700`,
+			default: `${base} bg-default-100 text-default-700`
+		};
+		return classes[status as StatusType] || classes.default;
+	}
+
+	function formatPhoneNumber(phoneNumber: string | number | null | undefined): KeyType | null {
+		if (phoneNumber === undefined || phoneNumber === null) {
+			return null;
+		}
+		const clean = String(phoneNumber).replace(/\D/g, '');
+		const match = clean.match(/^(\d{3})(\d{3})(\d{4})$/);
+		return match ? `(${match[1]}) ${match[2]}-${match[3]}` : String(phoneNumber);
+	}
+
+	function formatTime(time: string | number | Date): KeyType {
+		return new Date(time).toLocaleTimeString('en-US', {
+			hour: '2-digit',
+			minute: '2-digit'
+		});
+	}
+
+	function formatCurrency(value: number): KeyType {
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD',
+			minimumFractionDigits: 2,
+			maximumFractionDigits: 2
+		}).format(value);
+	}
+
+	function formatPercentage(value: number): KeyType {
+		return new Intl.NumberFormat('en-US', {
+			style: 'percent',
+			minimumFractionDigits: 2,
+			maximumFractionDigits: 2
+		}).format(value / 100);
+	}
+</script>
+
+{#snippet DateCell(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{new Date(row[key]).toLocaleDateString('en-US')}
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet Currency(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{formatCurrency(row[key])}
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet Percentage(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{formatPercentage(row[key])}
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet PhoneNumber(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{formatPhoneNumber(row[key])}
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet Email(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		<a href="mailto:{row[key]}" class="text-primary-600 hover:underline">
+			{row[key]}
+		</a>
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet Status(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{@const status = String(row[key]).toLowerCase()}
+		<span class={getStatusClass(status)}>
+			{row[key]}
+		</span>
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet Time(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{formatTime(row[key])}
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}

package/dist/layout/table/Cells.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { KeyType, DataRow } from './table.js';
+export { DateCell, Currency, Percentage, PhoneNumber, Email, Status, Time };
+declare const DateCell: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const Currency: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const Percentage: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const PhoneNumber: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const Email: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const Status: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const Time: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Cells: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Cells = InstanceType<typeof Cells>;
+export default Cells;