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

package/dist/elements/alert/Alert.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { Color } from '../../variants.js';
+	import type { AlertProps } from '../../index.js';
+
+	let {
+		title,
+		message,
+		color = Color.DEFAULT,
+		onclose,
+		class: className = ''
+	}: AlertProps = $props();
+
+	function handleClose() {
+		onclose?.();
+	}
+
+	const colorClasses = {
+		[Color.DEFAULT]: 'bg-gray-50 border-gray-200 text-gray-800',
+		[Color.PRIMARY]: 'bg-primary-50 border-primary-200 text-primary-800',
+		[Color.SUCCESS]: 'bg-success-50 border-success-200 text-success-800',
+		[Color.WARNING]: 'bg-warning-50 border-warning-200 text-warning-800',
+		[Color.DANGER]: 'bg-danger-50 border-danger-200 text-danger-800',
+		[Color.INFO]: 'bg-info-50 border-info-200 text-info-800'
+	};
+</script>
+
+<div class={cn('relative rounded-lg border p-4', colorClasses[color], className)}>
+	<div class="flex items-start justify-between gap-4">
+		<div class="flex-1">
+			{#if title}
+				<h4 class="mb-2 font-semibold">{title}</h4>
+			{/if}
+			<p class="text-sm">{message}</p>
+		</div>
+		{#if onclose}
+			<button
+				type="button"
+				class="flex-shrink-0 cursor-pointer rounded-md p-1 hover:bg-gray-200/20"
+				onclick={handleClose}
+				aria-label="Close alert"
+			>
+				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+					<path
+						fill-rule="evenodd"
+						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		{/if}
+	</div>
+</div>

package/dist/elements/alert/Alert.svelte.d.ts

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

package/dist/elements/badge/Badge.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
-	import { badge, type BadgeProps } from './badge.js';
+	import { badge } from './badge.js';
+	import type { BadgeProps } from '../../index.js';
 
 	let {
 		size = 'base',
@@ -18,13 +19,20 @@
 	);
 
 	const baseClass = $derived(cn(base(), className));
+
+	function handleOnClose(event) {
+		event.preventDefault();
+		onClose();
+	}
 </script>
 
-<div class={baseClass}>
+<span class={baseClass}>
 	{@render children()}
 	{#if onClose}
-		<button type="button" onclick={onClose} class="cursor-pointer" aria-label="Close">
-			<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+		<button
+			onclick={handleOnClose} class="cursor-pointer h-full flex items-center" aria-label="Close" title="Close"
+			tabindex="0" type="button">
+			<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="size-2">
 				<path
 					fill="currentColor"
 					d="M26.113 4.116a1.25 1.25 0 0 1 1.768 1.768L17.766 15.999l10.115 10.114a1.25 1.25 0 1 1-1.768 1.768L16 17.766L5.884 27.881a1.25 1.25 0 1 1-1.768-1.768L14.231 16L4.116 5.884a1.25 1.25 0 1 1 1.768-1.768l10.115 10.115z"
@@ -32,4 +40,4 @@
 			</svg>
 		</button>
 	{/if}
-</div>
+</span>

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

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

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

@@ -1,6 +1,3 @@
-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: {
@@ -182,12 +179,3 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
     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/dropdown/Dropdown.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { fly } from 'svelte/transition';
-	import { dropdownMenu, type DropdownMenuProps, type DropdownItem } from './dropdown.js';
+	import type { DropdownMenuProps, DropdownItem } from '../../index.js';
+	import { dropdownMenu } from '../../index.js';
 	import { onMount, onDestroy } from 'svelte';
-	import { Size } from '../../types/variants.js';
+	import { Size } from '../../variants.js';
 
 	let {
 		sections = [],
 		open: isOpen = $bindable(false),
-		label = 'Options',
+		label = '',
 		icon: Icon,
-		triggerContent,
-		triggerClass = '',
 		containerClass = '',
 		itemClass = '',
 		class: className = '',
@@ -22,6 +21,9 @@
 		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 portalEl = $state<HTMLDivElement | undefined>();
@@ -41,12 +43,13 @@
 		dropdownMenu({
 			position,
 			size,
-			isOpen
+			isOpen,
+			iconOnly
 		})
 	);
 
 	const baseClass = $derived(cn(base(), className));
-	const triggerClass_ = $derived(cn(trigger(), triggerClass));
+	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));
@@ -125,7 +128,6 @@
 	}
 
 	function handleItemClick(item: DropdownItem) {
-		if (item.disabled) return;
 		if (item.onclick) item.onclick();
 		isOpen = false;
 	}
@@ -178,35 +180,28 @@
 
 <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}
-			>
+		<button
+			type="button"
+			id="menu-button"
+			aria-expanded={isOpen}
+			aria-haspopup="true"
+			class={triggerClass_}
+			onclick={handleToggle}
+			{disabled}
+		>
+			{#if label}
 				{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}
+			{/if}
+
+			{#if Icon}
+				<Icon class="size-5 text-default-400" />
+			{: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>
 
@@ -253,7 +248,7 @@
 						<button
 							type="button"
 							onclick={() => handleItemClick(menuItem)}
-							disabled={menuItem.disabled} {...itemProps}>
+							disabled={!menuItem.onclick} {...itemProps}>
 							{@render DropItemContent(menuItem)}
 						</button>
 					{/if}

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

@@ -1,4 +1,4 @@
-import { type DropdownMenuProps } from './dropdown.js';
+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

@@ -1,24 +1,27 @@
 <script lang="ts">
 	import { tick } from 'svelte';
 	import { cn } from '../../helper/cls.js';
-	import { selectTV, type SelectItem, type SelectProps } from './select.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 = 'sm',
+		size = Size.BASE,
 		class: className = '',
-		triggerClass = '',
 		containerClass = '',
 		listClass = '',
 		itemClass = '',
 		searchInputClass = '',
 		icon: Icon,
 		iconClass = '',
-		triggerContent,
+		triggerClass = '', // recently, just now
 		onselect = () => {},
 		onopen = () => {},
 		onclose = () => {}
@@ -30,10 +33,19 @@
 	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
+			disabled,
+			multiple
 		})
 	);
 
@@ -47,6 +59,7 @@
 	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
@@ -59,7 +72,7 @@
 		open = !open;
 
 		if (open) {
-			highlightedIndex = filteredItems.findIndex((item) => item.value === value);
+			highlightedIndex = !multiple ? filteredItems.findIndex((item) => item.value === value) : -1;
 
 			onopen();
 
@@ -76,9 +89,36 @@
 
 	function handleSelect(item: SelectItem) {
 		if (item.disabled) return;
-		value = item.value;
-		onselect({ value: item.value });
-		open = false;
+
+		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) {
@@ -143,55 +183,82 @@
 <svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
 
 <div bind:this={selectRef} class={baseClass} data-state={open ? 'open' : 'closed'}>
-	<button
-		type="button"
-		onclick={handleToggle}
-		{disabled}
+	<label
 		class={triggerClass_}
+		aria-disabled={disabled}
 		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}
+		<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"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class={cn(triggerIconClass, open && 'rotate-180 transform')}
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+						class="size-4"
 					>
 						<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"
+							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>
-				{/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"
-				/>
+					<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}
@@ -206,20 +273,37 @@
 								disabled={item.disabled}
 								class={itemClass_}
 								role="option"
-								aria-selected={value === item.value}
-								data-selected={value === item.value}
+								aria-selected={valueArray.includes(item.value)}
+								data-selected={valueArray.includes(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}
+								<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}

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

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