@makolabs/ripple 0.0.1 → 0.0.3

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/dropdown/Dropdown.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { fly } from 'svelte/transition';
+	import type { DropdownMenuProps, DropdownItem } from '../../index.js';
+	import { dropdownMenu } from '../../index.js';
+	import { onMount, onDestroy } from 'svelte';
+	import { Size } from '../../variants.js';
+	import Portal from '../../utils/Portal.svelte';
+
+	let {
+		sections = [],
+		open: isOpen = $bindable(false),
+		label = '',
+		icon: Icon,
+		containerClass = '',
+		itemClass = '',
+		class: className = '',
+		size = Size.BASE,
+		disabled = false,
+		position = 'bottom-left',
+		width = 'w-56',
+		header
+	}: DropdownMenuProps = $props();
+
+	// Determine if we're in icon-only mode
+	const iconOnly = $derived(!label && !!Icon);
+
+	let dropdownRef = $state<HTMLDivElement | undefined>();
+	let triggerRef = $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,
+			iconOnly
+		})
+	);
+
+	const baseClass = $derived(cn(base(), className));
+	const triggerClass_ = $derived(cn(trigger(), ''));
+	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;
+	}
+
+	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.onclick) item.onclick();
+		isOpen = false;
+	}
+</script>
+
+<svelte:window onclick={handleClickOutside} />
+
+<div class={baseClass}>
+	<div bind:this={triggerRef}>
+		<button
+			type="button"
+			id="menu-button"
+			aria-expanded={isOpen}
+			aria-haspopup="true"
+			class={triggerClass_}
+			onclick={handleToggle}
+			{disabled}
+		>
+			{#if label}
+				{label}
+			{/if}
+
+			{#if Icon}
+				<Icon class="text-default-400 size-5" />
+			{:else if label}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="28"
+					height="28"
+					viewBox="0 0 28 28"
+					class="size-5"
+				>
+					<path
+						fill="currentColor"
+						d="M4.22 9.47a.75.75 0 0 1 1.06 0L14 18.19l8.72-8.72a.75.75 0 1 1 1.06 1.06l-9.25 9.25a.75.75 0 0 1-1.06 0l-9.25-9.25a.75.75 0 0 1 0-1.06"
+					/>
+				</svg>
+			{/if}
+		</button>
+	</div>
+</div>
+
+{#if isOpen}
+	<Portal target={triggerRef}>
+		<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.onclick}
+								{...itemProps}
+							>
+								{@render DropItemContent(menuItem)}
+							</button>
+						{/if}
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</Portal>
+{/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 '../../index.js';
+declare const Dropdown: import("svelte").Component<DropdownMenuProps, {}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/elements/dropdown/Select.svelte

@@ -0,0 +1,333 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { cn } from '../../helper/cls.js';
+	import { selectTV } from './select.js';
+	import type { SelectItem, SelectProps } from '../../index.js';
+	import Badge from '../badge/Badge.svelte';
+	import { Size } from '../../variants.js';
+	import Portal from '../../utils/Portal.svelte';
+
+	let {
+		items = [],
+		value = $bindable(''),
+		multiple = false,
+		placeholder = 'Select an option',
+		searchable = false,
+		disabled = false,
+		size = Size.BASE,
+		class: className = '',
+		containerClass = '',
+		listClass = '',
+		itemClass = '',
+		searchInputClass = '',
+		icon: Icon,
+		iconClass = '',
+		triggerClass = '', // recently, just now
+		onselect = () => {},
+		onopen = () => {},
+		onclose = () => {}
+	}: SelectProps = $props();
+
+	let open = $state(false);
+	let searchQuery = $state('');
+	let labelRef = $state<HTMLLabelElement | null>(null);
+	let searchInputRef = $state<HTMLInputElement | null>(null);
+	let highlightedIndex = $state(-1);
+
+	// Convert value to array for internal processing if multiple is true
+	const valueArray = $derived.by(() => {
+		if (multiple) {
+			return Array.isArray(value) ? value : value ? [value] : [];
+		}
+		return typeof value === 'string' ? [value] : [];
+	});
+
+	const { base, trigger, triggerIcon, container, searchInput, list, item, emptyMessage } = $derived(
+		selectTV({
+			size,
+			disabled,
+			multiple
+		})
+	);
+
+	const baseClass = $derived(cn(base(), className));
+	const triggerClass_ = $derived(cn(trigger(), triggerClass, baseClass));
+	const triggerIconClass = $derived(cn(triggerIcon(), iconClass));
+	const containerClass_ = $derived(cn(container(), containerClass));
+	const searchInputClass_ = $derived(cn(searchInput(), searchInputClass));
+	const listClass_ = $derived(cn(list(), listClass));
+	const itemClass_ = $derived(cn(item(), itemClass));
+	const emptyMessageClass = $derived(cn(emptyMessage()));
+
+	const selectedItem = $derived(items.find((item) => item.value === value));
+	const selectedItems = $derived(items.filter((item) => valueArray.includes(item.value)));
+
+	const filteredItems = $derived(
+		searchable && searchQuery
+			? items.filter((item) => item.label.toLowerCase().includes(searchQuery.toLowerCase()))
+			: items
+	);
+
+	function handleToggle() {
+		if (disabled) return;
+		open = !open;
+
+		if (open) {
+			highlightedIndex = !multiple ? filteredItems.findIndex((item) => item.value === value) : -1;
+
+			onopen();
+
+			if (searchable) {
+				tick().then(() => {
+					searchInputRef?.focus();
+				});
+			}
+		} else {
+			onclose();
+			searchQuery = '';
+		}
+	}
+
+	function handleSelect(item: SelectItem) {
+		if (item.disabled) return;
+
+		if (multiple) {
+			const isSelected = valueArray.includes(item.value);
+
+			if (isSelected) {
+				// Remove from selection
+				value = Array.isArray(value) ? value.filter((v) => v !== item.value) : [];
+			} else {
+				// Add to selection
+				value = Array.isArray(value) ? [...value, item.value] : [item.value];
+			}
+
+			// Keep dropdown open when multiple selection is enabled
+			if (searchable && searchInputRef) {
+				searchInputRef.focus();
+			}
+		} else {
+			// Single selection
+			value = item.value;
+			open = false;
+		}
+
+		onselect({ value });
+	}
+
+	function removeItem(itemValue: string) {
+		if (multiple && Array.isArray(value)) {
+			value = value.filter((v) => v !== itemValue);
+			onselect({ value });
+		}
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		// Check if the click is inside the portal content
+		const portalContent = document.querySelector('.ripple-portal .portal-content');
+
+		// If the click is inside either the label (trigger) or the portal content, don't close
+		if (
+			(labelRef && labelRef.contains(event.target as Node)) ||
+			(portalContent && portalContent.contains(event.target as Node)) ||
+			!open
+		) {
+			return;
+		}
+
+		// Otherwise close the dropdown
+		open = false;
+		onclose();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		// check if the event is fired from the select
+		if (!labelRef || !labelRef.contains(event.target as Node)) return;
+
+		if (!open) {
+			if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+				event.preventDefault();
+				open = true;
+				onopen();
+				return;
+			}
+			return;
+		}
+
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			open = false;
+			onclose();
+			return;
+		}
+
+		const availableItems = filteredItems.filter((item) => !item.disabled);
+		if (!availableItems.length) return;
+
+		if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+			event.preventDefault();
+
+			if (event.key === 'ArrowDown') {
+				highlightedIndex = (highlightedIndex + 1) % availableItems.length;
+			} else {
+				highlightedIndex = highlightedIndex <= 0 ? availableItems.length - 1 : highlightedIndex - 1;
+			}
+
+			tick().then(() => {
+				const highlightedElement = document.querySelector(
+					`[data-index="${highlightedIndex}"]`
+				) as HTMLElement;
+				if (highlightedElement) {
+					highlightedElement.scrollIntoView({ block: 'center', behavior: 'instant' });
+				}
+			});
+		}
+
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			if (highlightedIndex >= 0 && highlightedIndex < availableItems.length) {
+				handleSelect(availableItems[highlightedIndex]);
+			}
+		}
+	}
+</script>
+
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
+
+<label
+	bind:this={labelRef}
+	class={triggerClass_}
+	aria-disabled={disabled}
+	aria-haspopup="listbox"
+	aria-labelledby="select-label"
+	data-state={open ? 'open' : 'closed'}
+>
+	<button
+		type="button"
+		aria-label="Toggle dropdown"
+		{disabled}
+		aria-expanded={open}
+		onclick={handleToggle}
+		class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+		tabindex={disabled ? -1 : 0}
+	></button>
+	<span class="flex min-h-[1.5rem] flex-1 flex-wrap items-center gap-1 overflow-hidden">
+		{#if multiple && selectedItems.length > 0}
+			{#each selectedItems as item (item.value)}
+				<Badge {size} color="info" onclose={() => removeItem(item.value)}>
+					{item.value}
+				</Badge>
+			{/each}
+		{:else if !multiple && selectedItem}
+			<span id="select-label" class="flex-1 truncate text-left">
+				{selectedItem.label}
+			</span>
+		{:else}
+			<span id="select-label" class="text-default-500 px-1">
+				{placeholder}
+			</span>
+		{/if}
+	</span>
+
+	<span class="ml-auto flex flex-shrink-0 items-center pl-2">
+		{#if Icon}
+			<Icon class={triggerIconClass} />
+		{:else}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class={cn(triggerIconClass, open && 'rotate-180 transform')}
+			>
+				<path
+					fill-rule="evenodd"
+					d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		{/if}
+	</span>
+</label>
+
+{#if open}
+	<Portal target={labelRef}>
+		<div class={containerClass_} role="listbox" aria-labelledby="select-label">
+			{#if searchable}
+				<div class={searchInputClass_}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+						class="size-4"
+					>
+						<path
+							fill="currentColor"
+							d="M5 1a4 4 0 1 0 2.452 7.16l2.694 2.693a.5.5 0 1 0 .707-.707L8.16 7.453A4 4 0 0 0 5 1M2 5a3 3 0 1 1 6 0a3 3 0 0 1-6 0"
+						/>
+					</svg>
+					<input
+						bind:this={searchInputRef}
+						bind:value={searchQuery}
+						type="text"
+						class="ring-0 outline-0"
+						placeholder="Search..."
+						aria-label="Search select options"
+					/>
+				</div>
+			{/if}
+
+			{#if filteredItems.length === 0}
+				<div class={emptyMessageClass}>No items found</div>
+			{:else}
+				<ul class={listClass_}>
+					{#each filteredItems as item, index (item.value)}
+						<li>
+							<button
+								type="button"
+								onclick={(event) => {
+									handleSelect(item);
+									event.preventDefault();
+								}}
+								disabled={item.disabled}
+								class={itemClass_}
+								role="option"
+								aria-selected={valueArray.includes(item.value)}
+								data-selected={valueArray.includes(item.value)}
+								data-highlighted={index === highlightedIndex}
+								data-index={index}
+							>
+								<span class="flex w-full items-center justify-between">
+									<span class="flex items-center gap-2 overflow-hidden">
+										{#if item.icon}
+											{@const Icon = item.icon}
+											<Icon class="h-4 w-4 flex-shrink-0" />
+										{/if}
+										<span class="truncate">{item.label}</span>
+									</span>
+
+									{#if valueArray.includes(item.value)}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="16"
+											height="16"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											class="text-info-500"
+										>
+											<polyline points="20 6 9 17 4 12" />
+										</svg>
+									{/if}
+								</span>
+							</button>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+	</Portal>
+{/if}

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

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