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

package/dist/elements/badge/badge.d.ts

@@ -0,0 +1,193 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { VariantColors, VariantSizes } from '../../types/variants.js';
+import type { Snippet } from 'svelte';
+export declare const badge: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            base: string;
+            icon: string;
+        };
+        sm: {
+            base: string;
+            icon: string;
+        };
+        base: {
+            base: string;
+            icon: string;
+        };
+        lg: {
+            base: string;
+            icon: string;
+        };
+        xl: {
+            base: string;
+            icon: string;
+        };
+        '2xl': {
+            base: string;
+            icon: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+            icon: string;
+        };
+        primary: {
+            base: string;
+            icon: string;
+        };
+        secondary: {
+            base: string;
+            icon: string;
+        };
+        success: {
+            base: string;
+            icon: string;
+        };
+        warning: {
+            base: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
+        };
+        info: {
+            base: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    size: {
+        xs: {
+            base: string;
+            icon: string;
+        };
+        sm: {
+            base: string;
+            icon: string;
+        };
+        base: {
+            base: string;
+            icon: string;
+        };
+        lg: {
+            base: string;
+            icon: string;
+        };
+        xl: {
+            base: string;
+            icon: string;
+        };
+        '2xl': {
+            base: string;
+            icon: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+            icon: string;
+        };
+        primary: {
+            base: string;
+            icon: string;
+        };
+        secondary: {
+            base: string;
+            icon: string;
+        };
+        success: {
+            base: string;
+            icon: string;
+        };
+        warning: {
+            base: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
+        };
+        info: {
+            base: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            base: string;
+            icon: string;
+        };
+        sm: {
+            base: string;
+            icon: string;
+        };
+        base: {
+            base: string;
+            icon: string;
+        };
+        lg: {
+            base: string;
+            icon: string;
+        };
+        xl: {
+            base: string;
+            icon: string;
+        };
+        '2xl': {
+            base: string;
+            icon: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+            icon: string;
+        };
+        primary: {
+            base: string;
+            icon: string;
+        };
+        secondary: {
+            base: string;
+            icon: string;
+        };
+        success: {
+            base: string;
+            icon: string;
+        };
+        warning: {
+            base: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
+        };
+        info: {
+            base: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BadgeProps = {
+    label?: string;
+    size?: VariantSizes;
+    color?: VariantColors;
+    class?: ClassValue;
+    contentClass?: ClassValue;
+    children: Snippet;
+    onclose?: (event: MouseEvent) => void;
+};

package/dist/elements/badge/badge.js

@@ -0,0 +1,65 @@
+import { tv } from 'tailwind-variants';
+export const badge = tv({
+    slots: {
+        base: 'w-min inline-flex items-center justify-center whitespace-nowrap',
+        icon: 'h-4 w-4'
+    },
+    variants: {
+        size: {
+            xs: {
+                base: 'h-4 px-1.5 text-xs rounded gap-0.5',
+                icon: 'h-2.5 w-2.5'
+            },
+            sm: {
+                base: 'h-5 px-2 text-xs rounded gap-1',
+                icon: 'h-3 w-3'
+            },
+            base: {
+                base: 'h-6 px-2.5 text-sm rounded-md gap-1.5',
+                icon: 'h-3.5 w-3.5'
+            },
+            lg: {
+                base: 'h-7 px-3 text-base rounded-lg gap-2',
+                icon: 'h-4 w-4'
+            },
+            xl: {
+                base: 'h-8 px-3.5 text-lg rounded-xl gap-2.5',
+                icon: 'h-5 w-5'
+            },
+            '2xl': {
+                base: 'h-10 px-4 text-xl rounded-2xl gap-3',
+                icon: 'h-6 w-6'
+            }
+        },
+        color: {
+            default: {
+                base: 'bg-default-50 text-default-700',
+                icon: 'text-default-700'
+            },
+            primary: {
+                base: 'bg-primary-50 text-primary-700',
+                icon: 'text-primary-700'
+            },
+            secondary: {
+                base: 'bg-secondary-50 text-secondary-700',
+                icon: 'text-secondary-700'
+            },
+            success: {
+                base: 'bg-success-50 text-success-700',
+                icon: 'text-success-700'
+            },
+            warning: {
+                base: 'bg-warning-50 text-warning-700',
+                icon: 'text-warning-700'
+            },
+            danger: {
+                base: 'bg-danger-50 text-danger-700',
+                icon: 'text-danger-700'
+            },
+            info: {
+                base: 'bg-info-50 text-info-700',
+                icon: 'text-info-700'
+            }
+        }
+    }
+});

package/dist/elements/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.svelte';
+export { badge, type BadgeProps } from './badge.js';

package/dist/elements/badge/index.js

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

package/dist/elements/dropdown/Dropdown.svelte

@@ -0,0 +1,272 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { fly } from 'svelte/transition';
+	import { dropdownMenu, type DropdownMenuProps, type DropdownItem } from './dropdown.js';
+	import { onMount, onDestroy } from 'svelte';
+	import { Size } from '../../types/variants.js';
+
+	let {
+		sections = [],
+		open: isOpen = $bindable(false),
+		label = 'Options',
+		icon: Icon,
+		triggerContent,
+		triggerClass = '',
+		containerClass = '',
+		itemClass = '',
+		class: className = '',
+		size = Size.BASE,
+		disabled = false,
+		position = 'bottom-left',
+		width = 'w-56',
+		header
+	}: DropdownMenuProps = $props();
+
+	let dropdownRef = $state<HTMLDivElement | undefined>();
+	let triggerRef = $state<HTMLDivElement | undefined>();
+	let portalEl = $state<HTMLDivElement | undefined>();
+	let triggerRect = $state<DOMRect | null>(null);
+
+	const {
+		base,
+		trigger,
+		container,
+		section,
+		item,
+		itemIcon,
+		header: headerClass,
+		headerTitle,
+		headerSubtitle
+	} = $derived(
+		dropdownMenu({
+			position,
+			size,
+			isOpen
+		})
+	);
+
+	const baseClass = $derived(cn(base(), className));
+	const triggerClass_ = $derived(cn(trigger(), triggerClass));
+	const containerClass_ = $derived(cn(container(), width, containerClass, 'shadow-lg'));
+	const sectionClass = $derived(cn(section()));
+	const itemClass_ = $derived(cn(item(), itemClass));
+	const iconClass = $derived(cn(itemIcon()));
+	const headerClass_ = $derived(cn(headerClass(), header?.class ?? ''));
+	const headerTitleClass = $derived(cn(headerTitle(), header?.titleClass ?? ''));
+	const headerSubtitleClass = $derived(cn(headerSubtitle(), header?.subtitleClass ?? ''));
+
+	const dropdownStyles = $derived.by(() => {
+		if (!triggerRect) return '';
+
+		const { top, left, bottom, right, width: triggerWidth, height: triggerHeight } = triggerRect;
+		const viewportWidth = window.innerWidth;
+		const viewportHeight = window.innerHeight;
+
+		// Default to 14rem (w-56) if not specified
+		const dropdownWidth = width ? parseInt(width.replace(/[^\d]/g, '')) * 0.25 : 14; // Convert Tailwind widths to rem
+		const dropdownWidthPx = dropdownWidth * 16;
+
+		let posStyles = `position: fixed; z-index: 9999;`;
+
+		if (position.includes('bottom')) {
+			posStyles += `top: ${bottom}px;`;
+		} else if (position.includes('top')) {
+			posStyles += `top: ${top - triggerHeight}px; transform: translateY(-100%);`;
+		}
+
+		if (position.includes('left')) {
+			if (left + dropdownWidthPx > viewportWidth - 20) {
+				posStyles += `left: auto; right: ${viewportWidth - right}px;`;
+			} else {
+				posStyles += `left: ${left}px;`;
+			}
+		} else if (position.includes('right')) {
+			if (right - dropdownWidthPx < 20) {
+				posStyles += `left: ${left}px; right: auto;`;
+			} else {
+				posStyles += `left: ${right - triggerWidth}px;`;
+			}
+		} else {
+			const centeredLeft = left + (triggerWidth / 2);
+			if (centeredLeft + (dropdownWidthPx / 2) > viewportWidth - 20) {
+				posStyles += `right: 20px; left: auto;`;
+			} else if (centeredLeft - (dropdownWidthPx / 2) < 20) {
+				posStyles += `left: 20px; right: auto;`;
+			} else {
+				posStyles += `left: ${centeredLeft}px; transform: translateX(-50%);`;
+			}
+		}
+
+		const maxHeight = viewportHeight - bottom - 20; // 20px padding from bottom
+		if (position.includes('bottom')) {
+			posStyles += `max-height: ${maxHeight}px; overflow-y: auto;`;
+		}
+
+		return posStyles;
+	});
+
+	function handleToggle() {
+		if (disabled) return;
+		isOpen = !isOpen;
+
+		if (isOpen) {
+			setTimeout(updatePosition, 0); // Use setTimeout to ensure DOM is updated
+		}
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		if (isOpen &&
+			dropdownRef &&
+			!dropdownRef.contains(event.target as Node) &&
+			triggerRef &&
+			!triggerRef.contains(event.target as Node)) {
+			isOpen = false;
+		}
+	}
+
+	function handleItemClick(item: DropdownItem) {
+		if (item.disabled) return;
+		if (item.onclick) item.onclick();
+		isOpen = false;
+	}
+
+	function updatePosition() {
+		if (triggerRef) {
+			triggerRect = triggerRef.getBoundingClientRect();
+		}
+	}
+
+	function renderPortalDropdown() {
+		if (!portalEl || !document.body.contains(portalEl)) {
+			portalEl = document.createElement('div');
+			portalEl.id = 'dropdown-portal';
+			portalEl.style.position = 'fixed';
+			portalEl.style.top = '0';
+			portalEl.style.left = '0';
+			portalEl.style.width = '100%';
+			portalEl.style.height = '100%';
+			portalEl.style.pointerEvents = 'none';
+			portalEl.style.zIndex = '9999';
+			document.body.appendChild(portalEl);
+		}
+	}
+
+	onMount(() => {
+		renderPortalDropdown();
+		window.addEventListener('scroll', updatePosition, true);
+		window.addEventListener('resize', updatePosition);
+	});
+
+	onDestroy(() => {
+		if (!triggerRef) return;
+		window.removeEventListener('scroll', updatePosition, true);
+		window.removeEventListener('resize', updatePosition);
+		if (portalEl && document.body.contains(portalEl)) {
+			document.body.removeChild(portalEl);
+		}
+	});
+
+	$effect(() => {
+		if (isOpen) {
+			renderPortalDropdown();
+			updatePosition();
+		}
+	});
+</script>
+
+<svelte:window onclick={handleClickOutside} />
+
+<div class={baseClass}>
+	<div bind:this={triggerRef}>
+		{#if triggerContent}
+			{@render triggerContent()}
+		{:else}
+			<button
+				type="button"
+				id="menu-button"
+				aria-expanded={isOpen}
+				aria-haspopup="true"
+				class={triggerClass_}
+				onclick={handleToggle}
+				{disabled}
+			>
+				{label}
+				{#if Icon}
+					<Icon class="-mr-1 size-5 text-default-400" />
+				{:else}
+					<svg
+						class="-mr-1 size-5 text-default-400"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							d="M6.62 12.7c.31.27.77.27 1.08 0l5-4.5A.76.76 0 0 0 12.16 7c0-.2-.08-.38-.21-.52a.76.76 0 0 0-1.09.02L7 10l-3.85-3.5a.76.76 0 0 0-1.07-.02.74.74 0 0 0-.02 1.07l4.56 5.15Z"
+						/>
+					</svg>
+				{/if}
+			</button>
+		{/if}
+	</div>
+</div>
+
+{#if isOpen && portalEl}
+	<div
+		bind:this={dropdownRef}
+		class={containerClass_}
+		role="menu"
+		aria-orientation="vertical"
+		aria-labelledby="menu-button"
+		style={dropdownStyles}
+		transition:fly={{ duration: 150, y: 5, opacity: 0 }}
+	>
+		{#if header}
+			<button class={headerClass_} onclick={header.onclick} aria-label="Header Actions">
+				{#if header.content}
+					{@render header.content()}
+				{:else}
+					{#if header.title}
+						<span class={headerTitleClass}>{header.title}</span>
+					{/if}
+					{#if header.subtitle}
+						<span class={headerSubtitleClass}>{header.subtitle}</span>
+					{/if}
+				{/if}
+			</button>
+		{/if}
+
+		{#each sections as section_, sectionIndex (sectionIndex)}
+			<div class={sectionClass}>
+				{#each section_.items as menuItem, itemIndex (itemIndex)}
+					{@const itemProps = {
+						class: itemClass_,
+						role: 'menuitem',
+						tabindex: -1,
+						id: `menu-item-${sectionIndex}-${itemIndex}`,
+						'data-active': menuItem.active
+					}}
+					{#if menuItem.href}
+						<a href={menuItem.href} {...itemProps}>
+							{@render DropItemContent(menuItem)}
+						</a>
+					{:else}
+						<button
+							type="button"
+							onclick={() => handleItemClick(menuItem)}
+							disabled={menuItem.disabled} {...itemProps}>
+							{@render DropItemContent(menuItem)}
+						</button>
+					{/if}
+				{/each}
+			</div>
+		{/each}
+	</div>
+{/if}
+
+{#snippet DropItemContent(menuItem: DropdownItem)}
+	{#if menuItem.icon}
+		{@const ItemIcon = menuItem.icon}
+		<ItemIcon class={iconClass} />
+	{/if}
+	<span class="truncate">{menuItem.label}</span>
+{/snippet}

package/dist/elements/dropdown/Dropdown.svelte.d.ts

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