@makolabs/ripple 0.0.1-dev.8 → 0.0.1-dev.81

package/dist/elements/dropdown/Dropdown.svelte

@@ -5,6 +5,7 @@
 	import { dropdownMenu } from '../../index.js';
 	import { onMount, onDestroy } from 'svelte';
 	import { Size } from '../../variants.js';
+	import Portal from '../../utils/Portal.svelte';
 
 	let {
 		sections = [],
@@ -26,7 +27,6 @@
 
 	let dropdownRef = $state<HTMLDivElement | undefined>();
 	let triggerRef = $state<HTMLDivElement | undefined>();
-	let portalEl = $state<HTMLDivElement | undefined>();
 	let triggerRect = $state<DOMRect | null>(null);
 
 	const {
@@ -90,10 +90,10 @@
 				posStyles += `left: ${right - triggerWidth}px;`;
 			}
 		} else {
-			const centeredLeft = left + (triggerWidth / 2);
-			if (centeredLeft + (dropdownWidthPx / 2) > viewportWidth - 20) {
+			const centeredLeft = left + triggerWidth / 2;
+			if (centeredLeft + dropdownWidthPx / 2 > viewportWidth - 20) {
 				posStyles += `right: 20px; left: auto;`;
-			} else if (centeredLeft - (dropdownWidthPx / 2) < 20) {
+			} else if (centeredLeft - dropdownWidthPx / 2 < 20) {
 				posStyles += `left: 20px; right: auto;`;
 			} else {
 				posStyles += `left: ${centeredLeft}px; transform: translateX(-50%);`;
@@ -111,18 +111,16 @@
 	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 &&
+		if (
+			isOpen &&
 			dropdownRef &&
 			!dropdownRef.contains(event.target as Node) &&
 			triggerRef &&
-			!triggerRef.contains(event.target as Node)) {
+			!triggerRef.contains(event.target as Node)
+		) {
 			isOpen = false;
 		}
 	}
@@ -131,49 +129,6 @@
 		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} />
@@ -194,68 +149,80 @@
 			{/if}
 
 			{#if Icon}
-				<Icon class="size-5 text-default-400" />
+				<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
+					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 && 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>
+{#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}
-						<button
-							type="button"
-							onclick={() => handleItemClick(menuItem)}
-							disabled={!menuItem.onclick} {...itemProps}>
-							{@render DropItemContent(menuItem)}
-						</button>
+						{#if header.title}
+							<span class={headerTitleClass}>{header.title}</span>
+						{/if}
+						{#if header.subtitle}
+							<span class={headerSubtitleClass}>{header.subtitle}</span>
+						{/if}
 					{/if}
-				{/each}
-			</div>
-		{/each}
-	</div>
+				</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)}
@@ -264,4 +231,4 @@
 		<ItemIcon class={iconClass} />
 	{/if}
 	<span class="truncate">{menuItem.label}</span>
-{/snippet}
+{/snippet}

package/dist/elements/dropdown/Select.svelte

@@ -5,6 +5,7 @@
 	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 = [],
@@ -29,7 +30,7 @@
 
 	let open = $state(false);
 	let searchQuery = $state('');
-	let selectRef = $state<HTMLDivElement | null>(null);
+	let labelRef = $state<HTMLLabelElement | null>(null);
 	let searchInputRef = $state<HTMLInputElement | null>(null);
 	let highlightedIndex = $state(-1);
 
@@ -50,7 +51,7 @@
 	);
 
 	const baseClass = $derived(cn(base(), className));
-	const triggerClass_ = $derived(cn(trigger(), triggerClass));
+	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));
@@ -122,15 +123,26 @@
 	}
 
 	function handleClickOutside(event: MouseEvent) {
-		if (selectRef && !selectRef.contains(event.target as Node) && open) {
-			open = false;
-			onclose();
+		// 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 (!selectRef || !selectRef.contains(event.target as Node)) return;
+		if (!labelRef || !labelRef.contains(event.target as Node)) return;
 
 		if (!open) {
 			if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
@@ -182,59 +194,63 @@
 
 <svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
 
-<div bind:this={selectRef} class={baseClass} data-state={open ? 'open' : 'closed'}>
-	<label
-		class={triggerClass_}
-		aria-disabled={disabled}
-		aria-haspopup="listbox"
-		aria-labelledby="select-label"
-	>
-		<button
-			type="button"
-			aria-label="Toggle dropdown"
-			{disabled}
-			aria-expanded={open}
-			onclick={handleToggle}
-		></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}
+<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_}>
@@ -269,7 +285,10 @@
 						<li>
 							<button
 								type="button"
-								onclick={() => handleSelect(item)}
+								onclick={(event) => {
+									handleSelect(item);
+									event.preventDefault();
+								}}
 								disabled={item.disabled}
 								class={itemClass_}
 								role="option"
@@ -310,5 +329,5 @@
 				</ul>
 			{/if}
 		</div>
-	{/if}
-</div>
+	</Portal>
+{/if}

package/dist/elements/dropdown/dropdown.js

@@ -2,7 +2,7 @@ import { tv } from '../../helper/cls.js';
 import { Size } from '../../variants.js';
 export const dropdownMenu = tv({
     slots: {
-        base: 'relative inline-block text-left',
+        base: 'inline-block text-left',
         trigger: 'inline-flex w-full justify-center items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-default-900 shadow-xs ring-1 ring-inset ring-default-300 hover:bg-default-50 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
         container: 'absolute z-50 mt-2 origin-top-right divide-y divide-default-100 rounded-md bg-white ring-1 ring-black/5 shadow-lg focus:outline-none',
         section: 'py-1',

package/dist/elements/dropdown/select.js

@@ -2,11 +2,11 @@ import { tv } from 'tailwind-variants';
 import { Size } from '../../variants.js';
 export const selectTV = tv({
     slots: {
-        base: 'relative inline-block',
-        trigger: `flex items-center justify-between w-full text-left bg-white border
-			border-default-200 text-default-700 hover:border-default-300 rounded-md cursor-pointer`,
+        base: '',
+        trigger: `relative flex items-center justify-between w-full text-left bg-white border
+			border-default-300 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:border-primary-500 focus-within:ring-primary-500 rounded-lg shadow-xs cursor-pointer transition-colors hover:border-default-400`,
         triggerIcon: 'transition-transform duration-200 text-default-500',
-        container: 'absolute z-50 w-full mt-1 bg-white overflow-clip border border-default-200 rounded-md shadow-md',
+        container: 'absolute z-50 w-full mt-1 bg-white overflow-clip border border-default-200 rounded-md shadow-sm origin-top-left top-full left-0 mt-2',
         searchInput: 'flex items-center gap-x-3 w-full outline-none px-2 h-10 border-b border-b-default-200',
         list: 'py-1 max-h-60 overflow-x-clip overflow-y-auto h-full',
         item: `w-full px-3 py-2 text-sm text-left
@@ -26,21 +26,21 @@ export const selectTV = tv({
                 base: 'w-24'
             },
             [Size.SM]: {
-                trigger: 'h-8 px-2.5 py-1.5 text-xs gap-1.5',
+                trigger: 'h-8 px-3 py-2 text-sm gap-1.5',
                 triggerIcon: 'h-3.5 w-3.5',
                 container: 'max-h-48',
                 item: 'px-2.5 py-1.5 text-xs',
                 base: 'w-32'
             },
             [Size.BASE]: {
-                trigger: 'h-10 px-3 py-2 text-sm gap-2',
+                trigger: 'h-10 px-3 py-2 text-base gap-2',
                 triggerIcon: 'h-4 w-4',
                 container: 'max-h-60',
                 item: 'px-3 py-2 text-sm',
                 base: 'w-40'
             },
             [Size.LG]: {
-                trigger: 'h-11 px-4 py-2.5 text-base gap-2.5',
+                trigger: 'h-12 px-3 py-2 text-lg gap-2.5',
                 triggerIcon: 'h-5 w-5',
                 container: 'max-h-72',
                 item: 'px-4 py-2.5 text-base',
@@ -63,7 +63,7 @@ export const selectTV = tv({
         },
         disabled: {
             true: {
-                trigger: 'opacity-50 cursor-not-allowed hover:border-default-200',
+                trigger: 'opacity-50 cursor-not-allowed hover:border-default-300',
                 container: 'pointer-events-none',
                 item: 'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent'
             }

package/dist/elements/file-upload/FileUpload.svelte

@@ -8,11 +8,9 @@
 		maxSize,
 		class: className = '',
 		dropzoneClass = '',
-		previewClass = '',
 		id = 'file-upload',
-		onfiles = undefined,
-		ondelete = undefined,
-		files = []
+		onfiles,
+		uploadContent
 	}: FileUploadProps = $props();
 
 	const disabled = $derived(maxFiles <= 0);
@@ -25,10 +23,6 @@
 		if (onfiles) onfiles(newFiles);
 	}
 
-	function handleDeleteFile(fileId: string, index: number) {
-		if (ondelete) ondelete(fileId, index);
-	}
-
 	function handleDragEnter(e: DragEvent) {
 		e.preventDefault();
 		e.stopPropagation();
@@ -77,8 +71,12 @@
 	<label
 		class={cn(
 			'group relative block rounded-[32px] border-2 border-dashed p-12 text-center transition-colors',
-			isDragging ? 'border-primary-400 bg-primary-50' : 'border-default-200 bg-white',
-			disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-default-50 cursor-pointer',
+			{
+				'border-primary-400 bg-primary-50': isDragging,
+				'border-default-200 bg-white': !isDragging,
+				'cursor-not-allowed opacity-50': disabled,
+				'hover:bg-default-50 cursor-pointer': !disabled
+			},
 			dropzoneClass
 		)}
 		ondragenter={handleDragEnter}
@@ -114,13 +112,17 @@
 			</div>
 
 			<!-- Upload Text -->
-			<div class="text-lg">
-				<span class="text-primary-500 font-medium">Click here</span>
-				<span class="text-default-600"> to upload your file or drag and drop.</span>
-			</div>
+			{#if !uploadContent}
+				<div class="text-sm">
+					<span class="text-primary-500 font-medium">Click here</span>
+					<span class="text-default-600"> to upload your file or drag and drop.</span>
+				</div>
+			{:else}
+				{@render uploadContent()}
+			{/if}
 
 			<!-- File Type Info -->
-			<div class="text-default-500 text-sm">
+			<div class="text-default-500 text-xs">
 				Supported Format: {allowedMimeTypes.length ? allowedMimeTypes.join(', ') : 'SVG, JPG, PNG'}
 				{#if maxSize}
 					({formatFileSize(maxSize)} each)
@@ -130,84 +132,4 @@
 			</div>
 		</div>
 	</label>
-
-	<!-- File List -->
-	{#if files.length > 0}
-		<ul class={cn('mt-6 space-y-3', previewClass)}>
-			{#each files as file, i (i)}
-				<li
-					class={cn('flex items-center justify-between rounded-xl p-4 ring-4', {
-						'bg-danger-50 ring-danger-100': file.status === 'error',
-						'bg-success-50 ring-success-100': file.status === 'success',
-						'ring-primary-100/30 bg-white': file.status === 'uploading'
-					})}
-				>
-					<div class="flex flex-1 items-center gap-3">
-						<!-- File Icon -->
-						<div
-							class={cn('flex size-10 items-center justify-center rounded-full', {
-								'bg-danger-100 text-danger-500': file.status === 'error',
-								'bg-success-100 text-success-500': file.status === 'success',
-								'bg-primary-100 text-primary-500': file.status === 'uploading'
-							})}
-						>
-							<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24">
-								<path
-									fill="currentColor"
-									d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
-								/>
-							</svg>
-						</div>
-
-						<div class="flex-1">
-							<!-- Filename and Size -->
-							<div class="mb-1 flex items-center justify-between">
-								<span class="text-default-700 font-medium">{file.OriginalFilename}</span>
-								<span class="text-default-500 text-sm">{formatFileSize(file.Size)}</span>
-							</div>
-
-							<!-- Status Information -->
-							{#if file.status === 'uploading'}
-								<div class="bg-default-100 h-1.5 w-full rounded-full">
-									<div
-										class="bg-primary-500 h-1.5 rounded-full transition-all duration-300"
-										style="width: {file.progress || 0}%"
-									></div>
-								</div>
-								<span class="text-default-500 mt-1 text-sm">{file.progress || 0}%</span>
-							{:else if file.status === 'error'}
-								<div class="flex items-center justify-between">
-									<span class="text-danger-500 text-sm">Upload failed!</span>
-									<span class="text-danger-600 cursor-help text-sm font-medium"
-										>Please try again!</span
-									>
-								</div>
-							{:else if file.status === 'success'}
-								<p class="text-success-500 text-sm">Upload Successful!</p>
-							{/if}
-						</div>
-					</div>
-
-					<button
-						type="button"
-						aria-label="Delete file"
-						class={cn('ml-4 flex size-6 cursor-pointer items-center justify-center rounded-lg', {
-							'bg-danger-100 text-danger-500': file.status === 'error',
-							'bg-success-100 text-success-500': file.status === 'success',
-							'bg-default-100 text-default-500': file.status === 'uploading'
-						})}
-						onclick={() => (file.FileID ? handleDeleteFile(file.FileID, i) : ondelete?.('', i))}
-						disabled={file.status === 'uploading'}
-					>
-						<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24">
-							<path
-								fill="currentColor"
-								d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"
-							/>
-						</svg>
-					</button>
-				</li>
-			{/each}
-		</ul>
-	{/if}
 </div>