@makolabs/ripple 1.2.3 → 1.2.8

package/dist/elements/pagination/Pagination.svelte

@@ -125,15 +125,11 @@
 
 	// Computed values
 	const totalPages = $derived(Math.ceil(validTotalItems / validPageSize));
-	const startItem = $derived(
-		Math.min((currentPage - 1) * validPageSize + 1, validTotalItems)
-	);
+	const startItem = $derived(Math.min((currentPage - 1) * validPageSize + 1, validTotalItems));
 	const endItem = $derived(Math.min(currentPage * validPageSize, validTotalItems));
 
 	// Ensure currentPage is within valid range
-	const validCurrentPage = $derived(
-		Math.max(1, Math.min(currentPage, totalPages || 1))
-	);
+	const validCurrentPage = $derived(Math.max(1, Math.min(currentPage, totalPages || 1)));
 
 	// Navigation functions
 	function goToPage(page: number) {
@@ -244,21 +240,19 @@
 	}
 
 	// Determine if we should show pagination
-	const shouldShowPagination = $derived(
-		!hideWhenNoItems || validTotalItems > 0
-	);
-	const shouldShowControls = $derived(
-		!hideWhenSinglePage || totalPages > 1
-	);
+	const shouldShowPagination = $derived(!hideWhenNoItems || validTotalItems > 0);
+	const shouldShowControls = $derived(!hideWhenSinglePage || totalPages > 1);
 
 	// Default classes using ripple-ui design system
 	const defaultWrapperClass = 'flex items-center justify-between p-4';
 	const defaultInfoClass = 'text-default-500 text-sm';
-	const defaultButtonClass = 'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium';
+	const defaultButtonClass =
+		'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium';
 	const defaultActiveButtonClass = 'bg-primary-100 text-primary-700';
 	const defaultInactiveButtonClass = 'text-default-700 hover:bg-default-100';
 	const defaultDisabledButtonClass = 'text-default-300 cursor-not-allowed';
-	const defaultPageButtonClass = 'relative inline-flex items-center rounded-md px-3 py-1 text-sm font-medium';
+	const defaultPageButtonClass =
+		'relative inline-flex items-center rounded-md px-3 py-1 text-sm font-medium';
 </script>
 
 {#if shouldShowPagination}
@@ -276,9 +270,9 @@
 							)}
 							value={pageSize}
 							onchange={handlePageSizeChange}
-							disabled={disabled}
+							{disabled}
 						>
-							{#each pageSizeOptions as option}
+							{#each pageSizeOptions as option (option)}
 								<option value={option}>{option}</option>
 							{/each}
 						</select>
@@ -330,11 +324,11 @@
 				{#if template === 'full' && showPageNumbers}
 					{#if totalPages <= maxVisiblePages}
 						<!-- Show all pages if total is less than or equal to maxVisiblePages -->
-						{#each Array(totalPages) as _, i}
+						{#each Array(totalPages) as page, i (page + '-' + i)}
 							{@const pageNum = i + 1}
 							<button
 								onclick={() => goToPage(pageNum)}
-								disabled={disabled}
+								{disabled}
 								class={cn(
 									defaultPageButtonClass,
 									buttonClass,
@@ -353,12 +347,13 @@
 						<!-- Smart pagination for many pages -->
 						{@const pageNumbers = getPageNumbers()}
 						{@const showFirst = alwaysShowFirstLast && pageNumbers[0] > 1}
-						{@const showLast = alwaysShowFirstLast && pageNumbers[pageNumbers.length - 1] < totalPages}
+						{@const showLast =
+							alwaysShowFirstLast && pageNumbers[pageNumbers.length - 1] < totalPages}
 
 						{#if showFirst}
 							<button
 								onclick={() => goToPage(1)}
-								disabled={disabled}
+								{disabled}
 								class={cn(
 									defaultPageButtonClass,
 									buttonClass,
@@ -373,14 +368,14 @@
 								1
 							</button>
 							{#if pageNumbers[0] > 2}
-								<span class="px-2 text-sm text-default-400">...</span>
+								<span class="text-default-400 px-2 text-sm">...</span>
 							{/if}
 						{/if}
 
-						{#each pageNumbers as pageNum}
+						{#each pageNumbers as pageNum (pageNum)}
 							<button
 								onclick={() => goToPage(pageNum)}
-								disabled={disabled}
+								{disabled}
 								class={cn(
 									defaultPageButtonClass,
 									buttonClass,
@@ -398,11 +393,11 @@
 
 						{#if showLast}
 							{#if pageNumbers[pageNumbers.length - 1] < totalPages - 1}
-								<span class="px-2 text-sm text-default-400">...</span>
+								<span class="text-default-400 px-2 text-sm">...</span>
 							{/if}
 							<button
 								onclick={() => goToPage(totalPages)}
-								disabled={disabled}
+								{disabled}
 								class={cn(
 									defaultPageButtonClass,
 									buttonClass,
@@ -461,4 +456,3 @@
 		{/if}
 	</div>
 {/if}
-

package/dist/elements/progress/Progress.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { Color, Size } from '../../variants.js';
-	import type { ProgressProps, ProgressSegment, VariantColors } from '../../index.js';
+	import type { ProgressProps, VariantColors } from '../../index.js';
 
 	let {
 		value,
@@ -104,7 +104,7 @@
 		aria-valuemax="100"
 	>
 		{#if segments}
-			{#each segmentPercentages as segment}
+			{#each segmentPercentages as segment (segment.label || segment.value)}
 				{#if segment.percentage > 0}
 					<div
 						class={cn(getColorClass(segment.color), barClass)}
@@ -120,7 +120,7 @@
 
 	{#if segments && (showLabels || showValues)}
 		<div class="mt-1 flex justify-between">
-			{#each segmentPercentages as segment}
+			{#each segmentPercentages as segment (segment.label || segment.value)}
 				{#if segment.percentage > 0}
 					<div class={labelTextClass}>
 						{#if showLabels && segment.label}

package/dist/elements/timeline/Timeline.svelte

@@ -8,7 +8,7 @@
 
 <div class={cn('flow-root', className)}>
 	<ul role="list" class="-mb-8">
-		{#each items as item, index}
+		{#each items as item, index (item.title + index)}
 			<li>
 				<div class="relative pb-8">
 					{#if index !== items.length - 1}

package/dist/file-browser/FileBrowser.svelte

@@ -4,7 +4,6 @@
 	import type { TableColumn, FileBrowserProps } from '../index.js';
 	import { formatDate } from '../utils/dateUtils.js';
 	import type {
-		StorageAdapter,
 		FileItem,
 		Breadcrumb,
 		FileAction,
@@ -198,7 +197,9 @@
 		const folderFile = files.find((file) => file.key === folderPath);
 		if (folderFile && folderFile.name && adapter.getName() === 'Google Drive') {
 			// Assuming the adapter might have a setFolderName method
-			(adapter as any).setFolderName?.(folderPath, folderFile.name);
+			if ('setFolderName' in adapter && typeof adapter.setFolderName === 'function') {
+				adapter.setFolderName(folderPath, folderFile.name);
+			}
 		}
 
 		// Store the currently selected files before navigation
@@ -416,13 +417,11 @@
 			// Check if any single action allows this file
 			const hasAllowedAction = actions.some((action) => {
 				// Only check single file actions for individual file selection
-				if ('action' in action && typeof action.action === 'function' && action.action) {
+				if ('action' in action && typeof action.action === 'function') {
 					return action.isAllowed(item);
 				}
 				return false;
-			});
-
-			// Always allow folders to be selected (for recursive selection)
+			}); // Always allow folders to be selected (for recursive selection)
 			return item.isFolder || hasAllowedAction;
 		});
 
@@ -446,9 +445,6 @@
 		newFolders.forEach((folder) => {
 			handleSelectFolder(folder);
 		});
-
-		// Update select all state
-		const nonFolderFiles = displayFiles.filter((file) => !file.isFolder);
 	}
 
 	async function fetchFilesFromFolder(folderKey: string, folderName: string) {
@@ -493,6 +489,7 @@
 		if (!folder.isFolder) return;
 
 		isFetchingRecursively = true;
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		processedFolders = new Set();
 		// Don't clear fileQueue entirely, it will lose files from other folders
 		// Store existing fileQueue
@@ -727,7 +724,7 @@
 					<span class="text-default-400 mx-1 text-sm">/</span>
 
 					<div class="flex flex-wrap items-center">
-						{#each breadcrumbs as crumb, i}
+						{#each breadcrumbs as crumb, i (crumb.path)}
 							{#if i > 0}
 								<span class="text-default-400 mx-1 text-sm">/</span>
 							{/if}

package/dist/filters/CompactFilters.svelte

@@ -100,7 +100,7 @@
 	{#if !isExpanded}
 		<!-- Summary of selected filters when collapsed -->
 		<div class={cn('flex flex-wrap gap-2', summaryClass)}>
-			{#each filterGroups as group}
+			{#each filterGroups as group (group.label)}
 				{#if group.tabs.length > 0}
 					<div
 						class="bg-primary-50 text-primary-700 border-primary-200 flex items-center gap-1 rounded-full border px-3 py-1 text-xs"
@@ -113,7 +113,7 @@
 		</div>
 	{:else}
 		<div class={cn('flex flex-col gap-2', expandedClass)}>
-			{#each filterGroups as group, index}
+			{#each filterGroups as group, index (group.label)}
 				{#if group.tabs.length > 0}
 					<div
 						class={cn(
@@ -125,7 +125,7 @@
 							{group.label}
 						</div>
 						<div class="flex flex-wrap gap-2">
-							{#each group.tabs as tab}
+							{#each group.tabs as tab (tab.value)}
 								<button
 									onclick={() => group.onChange(tab.value)}
 									class={cn(

package/dist/forms/Checkbox.svelte

@@ -7,7 +7,6 @@
 		label,
 		value = $bindable(false),
 		disabled = false,
-		class: className = '',
 		errors = [],
 		required = false
 	}: CheckboxProps = $props();

package/dist/forms/CheckboxTestWrapper.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Checkbox from './Checkbox.svelte';
+	import type { CheckboxProps } from '../index.js';
+
+	let { ...checkboxProps }: CheckboxProps = $props();
+</script>
+
+<Checkbox {...checkboxProps} />

package/dist/forms/CheckboxTestWrapper.svelte.d.ts

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