@makolabs/ripple 0.0.1-dev → 0.0.1-dev.10

package/dist/elements/dropdown/Select.svelte

@@ -0,0 +1,314 @@
+<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';
+
+	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 selectRef = $state<HTMLDivElement | 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));
+	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) {
+		if (selectRef && !selectRef.contains(event.target as Node) && open) {
+			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 (!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} />
+
+<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}
+		<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={() => handleSelect(item)}
+								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>
+	{/if}
+</div>

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;

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

@@ -0,0 +1,251 @@
+import { Size } from '../../variants.js';
+export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
+    position: {
+        'top-left': {
+            container: string;
+        };
+        'top-right': {
+            container: string;
+        };
+        'bottom-left': {
+            container: string;
+        };
+        'bottom-right': {
+            container: string;
+        };
+    };
+    size: {
+        [Size.XS]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+    };
+    isOpen: {
+        true: {};
+    };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    container: string;
+    section: string;
+    header: string;
+    headerTitle: string;
+    headerSubtitle: string;
+    item: string;
+    itemIcon: string;
+}, undefined, {
+    position: {
+        'top-left': {
+            container: string;
+        };
+        'top-right': {
+            container: string;
+        };
+        'bottom-left': {
+            container: string;
+        };
+        'bottom-right': {
+            container: string;
+        };
+    };
+    size: {
+        [Size.XS]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+    };
+    isOpen: {
+        true: {};
+    };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    container: string;
+    section: string;
+    header: string;
+    headerTitle: string;
+    headerSubtitle: string;
+    item: string;
+    itemIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        'top-left': {
+            container: string;
+        };
+        'top-right': {
+            container: string;
+        };
+        'bottom-left': {
+            container: string;
+        };
+        'bottom-right': {
+            container: string;
+        };
+    };
+    size: {
+        [Size.XS]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+    };
+    isOpen: {
+        true: {};
+    };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    container: string;
+    section: string;
+    header: string;
+    headerTitle: string;
+    headerSubtitle: string;
+    item: string;
+    itemIcon: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/elements/dropdown/dropdown.js

@@ -0,0 +1,95 @@
+import { tv } from '../../helper/cls.js';
+import { Size } from '../../variants.js';
+export const dropdownMenu = tv({
+    slots: {
+        base: 'relative 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',
+        header: 'flex flex-col px-4 py-2 w-full items-start',
+        headerTitle: 'text-sm font-medium text-default-900',
+        headerSubtitle: 'text-sm text-default-500',
+        item: 'w-full group flex items-center px-4 py-2 text-sm text-default-700 hover:bg-default-100 hover:text-default-900 data-[active=true]:bg-default-100 data-[active=true]:text-default-900 disabled:opacity-50 disabled:cursor-not-allowed',
+        itemIcon: 'mr-3 size-5 text-default-400 group-hover:text-default-500 group-data-[active=true]:text-default-500'
+    },
+    variants: {
+        position: {
+            'top-left': {
+                container: 'origin-bottom-left bottom-full left-0 mb-2'
+            },
+            'top-right': {
+                container: 'origin-bottom-right bottom-full right-0 mb-2'
+            },
+            'bottom-left': {
+                container: 'origin-top-left top-full left-0 mt-2'
+            },
+            'bottom-right': {
+                container: 'origin-top-right top-full right-0 mt-2'
+            }
+        },
+        size: {
+            [Size.XS]: {
+                trigger: 'px-2 py-1 text-xs',
+                item: 'px-2.5 py-1 text-xs',
+                itemIcon: 'mr-1.5 size-3.5',
+                header: 'px-2.5 py-1.5',
+                headerTitle: 'text-xs',
+                headerSubtitle: 'text-xs'
+            },
+            [Size.SM]: {
+                trigger: 'px-2.5 py-1.5 text-xs',
+                item: 'px-3 py-1.5 text-xs',
+                itemIcon: 'mr-2 size-4',
+                header: 'px-3 py-2',
+                headerTitle: 'text-xs',
+                headerSubtitle: 'text-xs'
+            },
+            [Size.BASE]: {
+                trigger: 'px-3 py-2 text-sm',
+                item: 'px-4 py-2 text-sm',
+                itemIcon: 'mr-3 size-5',
+                header: 'px-4 py-3',
+                headerTitle: 'text-sm',
+                headerSubtitle: 'text-sm'
+            },
+            [Size.LG]: {
+                trigger: 'px-4 py-2.5 text-base',
+                item: 'px-5 py-2.5 text-base',
+                itemIcon: 'mr-3 size-6',
+                header: 'px-5 py-3.5',
+                headerTitle: 'text-base',
+                headerSubtitle: 'text-sm'
+            },
+            [Size.XL]: {
+                trigger: 'px-5 py-3 text-lg',
+                item: 'px-6 py-3 text-lg',
+                itemIcon: 'mr-3.5 size-7',
+                header: 'px-6 py-4',
+                headerTitle: 'text-lg',
+                headerSubtitle: 'text-base'
+            },
+            [Size.XXL]: {
+                trigger: 'px-6 py-3.5 text-xl',
+                item: 'px-7 py-3.5 text-xl',
+                itemIcon: 'mr-4 size-8',
+                header: 'px-7 py-5',
+                headerTitle: 'text-xl',
+                headerSubtitle: 'text-lg'
+            }
+        },
+        isOpen: {
+            true: {}
+        },
+        iconOnly: {
+            true: {
+                trigger: 'inline-flex justify-center items-center cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed bg-transparent shadow-none ring-0 hover:bg-transparent'
+            }
+        }
+    },
+    defaultVariants: {
+        position: 'bottom-right',
+        size: Size.BASE,
+        isOpen: false,
+        iconOnly: false
+    }
+});