@makolabs/ripple 0.0.1-dev.2 → 0.0.1-dev.21

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,97 @@
+<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');
+
+	$effect(() => {
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		menubar.collapsed;
+		resetIsActive();
+	});
+
+	const navGroupClasses = $derived(
+		cn(
+			`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,
+				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-gray-400 text-sm/6',
+			{ 'bg-gray-950 font-semibold': active, 'hover:bg-gray-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,139 @@
+<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 '../../index.js';
+	import clsx from 'clsx';
+	import { cn } from '../../helper/cls.js';
+	import { isRouteActive } from '../../helper/nav.svelte.js';
+
+	let { items = [], logo }: SidebarProps = $props();
+	let menubar: MenuBar = $state({
+		collapsed: false
+	});
+	setContext('menubar', menubar);
+
+	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 = false;
+
+			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)));
+
+	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
+			}
+		)
+	);
+
+	const logoTextClasses = $derived(
+		clsx('text-xl font-semibold hidden text-white truncate', { '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
+		})
+	);
+</script>
+
+<div class={sidebarClasses}>
+	<div class={logoWrapperClasses}>
+		<div class="flex items-center gap-x-1">
+			{#if logo.src}
+				<img src={logo.src} alt={logo.title} class="size-8 shrink-0" />
+			{/if}
+			{#if logo.title}
+				<h1 class={logoTextClasses}>{logo.title}</h1>
+			{/if}
+		</div>
+		<button onclick={toggle} class="hidden cursor-pointer 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">
+			{#each navigationItems as item, index (index)}
+				{#if 'type' in item && item.type === 'horizontal-divider'}
+					<li class="my-3 border-t border-gray-700"></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>
+				{: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>
+				{/if}
+			{/each}
+		</ul>
+	</nav>
+</div>
+
+{#snippet ToggleIcon(classes = 'size-6 shrink-0 text-gray-600')}
+	<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;