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

package/dist/elements/dropdown/Select.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { cn } from '../../helper/cls.js';
+	import { selectTV, type SelectItem, type SelectProps } from './select.js';
+
+	let {
+		items = [],
+		value = $bindable(''),
+		placeholder = 'Select an option',
+		searchable = false,
+		disabled = false,
+		size = 'sm',
+		class: className = '',
+		triggerClass = '',
+		containerClass = '',
+		listClass = '',
+		itemClass = '',
+		searchInputClass = '',
+		icon: Icon,
+		iconClass = '',
+		triggerContent,
+		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);
+
+	const { base, trigger, triggerIcon, container, searchInput, list, item, emptyMessage } = $derived(
+		selectTV({
+			size,
+			disabled
+		})
+	);
+
+	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 filteredItems = $derived(
+		searchable && searchQuery
+			? items.filter((item) => item.label.toLowerCase().includes(searchQuery.toLowerCase()))
+			: items
+	);
+
+	function handleToggle() {
+		if (disabled) return;
+		open = !open;
+
+		if (open) {
+			highlightedIndex = filteredItems.findIndex((item) => item.value === value);
+
+			onopen();
+
+			if (searchable) {
+				tick().then(() => {
+					searchInputRef?.focus();
+				});
+			}
+		} else {
+			onclose();
+			searchQuery = '';
+		}
+	}
+
+	function handleSelect(item: SelectItem) {
+		if (item.disabled) return;
+		value = item.value;
+		onselect({ value: item.value });
+		open = false;
+	}
+
+	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'}>
+	<button
+		type="button"
+		onclick={handleToggle}
+		{disabled}
+		class={triggerClass_}
+		aria-haspopup="listbox"
+		aria-expanded={open}
+		aria-labelledby="select-label"
+	>
+		{#if triggerContent}
+			{@render triggerContent({ selectedItem, open })}
+		{:else}
+			<span id="select-label" class="flex-1 truncate text-left">
+				{selectedItem?.label || placeholder}
+			</span>
+
+			<span class="flex items-center gap-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>
+		{/if}
+	</button>
+
+	<!-- Select Menu -->
+	{#if open}
+		<div class={containerClass_} role="listbox" aria-labelledby="select-label">
+			{#if searchable}
+				<input
+					bind:this={searchInputRef}
+					bind:value={searchQuery}
+					type="text"
+					placeholder="Search..."
+					class={searchInputClass_}
+					aria-label="Search select options"
+				/>
+			{/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={value === item.value}
+								data-selected={value === item.value}
+								data-highlighted={index === highlightedIndex}
+								data-index={index}
+							>
+								{#if item.icon}
+									{@const Icon = item.icon}
+									<div class="flex items-center gap-2">
+										<Icon class="h-4 w-4 flex-shrink-0" />
+										<span>{item.label}</span>
+									</div>
+								{:else}
+									{item.label}
+								{/if}
+							</button>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,4 @@
+import { type SelectProps } from './select.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,274 @@
+import type { Component, Snippet } from 'svelte';
+import type { ClassValue } from 'tailwind-variants';
+import { type VariantSizes } from '../../types/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: {
+        xs: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        sm: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        base: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        lg: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        xl: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        "2xl": {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+    };
+    isOpen: {
+        true: {};
+    };
+}, {
+    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: {
+        xs: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        sm: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        base: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        lg: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        xl: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        "2xl": {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+    };
+    isOpen: {
+        true: {};
+    };
+}, {
+    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: {
+        xs: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        sm: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        base: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        lg: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        xl: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        "2xl": {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+    };
+    isOpen: {
+        true: {};
+    };
+}, {
+    base: string;
+    trigger: string;
+    container: string;
+    section: string;
+    header: string;
+    headerTitle: string;
+    headerSubtitle: string;
+    item: string;
+    itemIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DropdownItem = {
+    label: string;
+    href?: string;
+    icon?: Component;
+    onclick?: () => void;
+    active?: boolean;
+    disabled?: boolean;
+};
+export type DropSection = {
+    items: DropdownItem[];
+};
+export type DropHeaderConfig = {
+    title?: string;
+    subtitle?: string;
+    content?: Snippet<[]>;
+    class?: ClassValue;
+    titleClass?: ClassValue;
+    subtitleClass?: ClassValue;
+    onclick?: () => void;
+};
+export type DropdownMenuProps = {
+    open?: boolean;
+    sections: DropSection[];
+    label?: string;
+    icon?: Component;
+    triggerContent?: Snippet<[]>;
+    triggerClass?: ClassValue;
+    containerClass?: ClassValue;
+    itemClass?: ClassValue;
+    class?: ClassValue;
+    size?: VariantSizes;
+    disabled?: boolean;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    width?: string;
+    header?: DropHeaderConfig;
+};

package/dist/elements/dropdown/dropdown.js

@@ -0,0 +1,89 @@
+import { tv } from '../../helper/cls.js';
+import { Size } from '../../types/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',
+        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',
+        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: {}
+        }
+    },
+    defaultVariants: {
+        position: 'bottom-right',
+        size: Size.BASE,
+        isOpen: false
+    }
+});

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

@@ -0,0 +1,3 @@
+export { default as Select } from './Select.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export type { SelectItem, SelectProps } from './select.js';

package/dist/elements/dropdown/index.js

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