@makolabs/ripple 0.0.1-dev.4 → 0.0.1-dev.41

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;

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

@@ -1,6 +1,4 @@
-import type { Component, Snippet } from 'svelte';
-import type { ClassValue } from 'tailwind-variants';
-import { type VariantSizes } from '../../types/variants.js';
+import { Size } from '../../variants.js';
 export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
     position: {
         'top-left': {
@@ -17,7 +15,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -25,7 +23,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -33,7 +31,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -41,7 +39,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -49,7 +47,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -57,7 +55,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        "2xl": {
+        [Size.XXL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -69,6 +67,11 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
     isOpen: {
         true: {};
     };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -95,7 +98,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -103,7 +106,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -111,7 +114,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -119,7 +122,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -127,7 +130,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -135,7 +138,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        "2xl": {
+        [Size.XXL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -147,6 +150,11 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
     isOpen: {
         true: {};
     };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -173,7 +181,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -181,7 +189,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -189,7 +197,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -197,7 +205,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -205,7 +213,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -213,7 +221,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        "2xl": {
+        [Size.XXL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -225,6 +233,11 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
     isOpen: {
         true: {};
     };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -236,39 +249,3 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
     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

@@ -1,15 +1,15 @@
 import { tv } from '../../helper/cls.js';
-import { Size } from '../../types/variants.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',
+        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',
+        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: {
@@ -79,11 +79,17 @@ export const dropdownMenu = tv({
         },
         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
+        isOpen: false,
+        iconOnly: false
     }
 });