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

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

@@ -0,0 +1,228 @@
+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[];
+    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/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,101 @@
+<script lang="ts">
+	import FluentChevronRight16Filled from '../../../icons/FluentChevronRight16Filled.svelte';
+	import { getContext } from 'svelte';
+	import type { MenuBar, NavGroupProps } from './sidebar.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(
+			`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 },
+			className
+		)
+	);
+
+	const chevronIconClasses = $derived(
+		cn('size-4 text-gray-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 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 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
+		})
+	);
+</script>
+
+<svelte:window onresize={resetIsActive} />
+
+<div>
+	<button type="button" class={navGroupClasses} onclick={toggle}>
+		{@render labelArea(labelClasses)}
+		<FluentChevronRight16Filled class={chevronIconClasses} />
+	</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>

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

@@ -0,0 +1,4 @@
+import type { NavGroupProps } from './sidebar.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 './sidebar.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 './sidebar.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,145 @@
+<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 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);
+				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', { '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">
+			<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>
+	</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)}
+							{#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>
+				{: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>

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

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

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

@@ -0,0 +1,2 @@
+export { default as Sidebar } from './Sidebar.svelte';
+export type { SidebarProps } from './sidebar.js';

package/dist/layout/sidebar/index.js

@@ -0,0 +1 @@
+export { default as Sidebar } from './Sidebar.svelte';

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

@@ -0,0 +1,46 @@
+import type { Component } from 'svelte';
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+export type MenuBar = {
+    collapsed: boolean;
+};
+export interface BaseNavigationItem {
+    label: string;
+}
+export interface WithIcon {
+    Icon?: Component;
+}
+export interface Activatable {
+    active?: boolean;
+}
+export interface LinkItem extends BaseNavigationItem, WithIcon, Activatable {
+    href: string;
+    meta?: string;
+}
+export interface ParentItem extends BaseNavigationItem, WithIcon, Activatable {
+    children: LinkItem[];
+}
+export interface DividerItem {
+    type: 'horizontal-divider';
+}
+export type NavigationItem = LinkItem | ParentItem | DividerItem;
+export type LogoType = {
+    src?: string;
+    title: string;
+};
+export interface NavGroupProps {
+    labelArea: Snippet<[ClassValue]>;
+    active?: boolean;
+    children?: Snippet;
+    class?: ClassValue;
+}
+export interface NavItemProps {
+    href: string;
+    active?: boolean;
+    children: Snippet<[ClassValue]>;
+    class?: ClassValue;
+}
+export interface SidebarProps {
+    items?: NavigationItem[];
+    logo: LogoType;
+}

package/dist/layout/sidebar/sidebar.js

@@ -0,0 +1 @@
+export {};