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

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

@@ -1,44 +1,42 @@
-import type { ClassValue } from 'tailwind-variants';
-import type { VariantSizes } from '../../types/variants.js';
-import type { Component, Snippet } from 'svelte';
+import { Size } from '../../variants.js';
 export declare const selectTV: import("tailwind-variants").TVReturnType<{
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        '2xl': {
+        [Size.XXL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
@@ -53,6 +51,11 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    multiple: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -64,42 +67,42 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
     emptyMessage: string;
 }, undefined, {
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        '2xl': {
+        [Size.XXL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
@@ -114,6 +117,11 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    multiple: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -125,42 +133,42 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
     emptyMessage: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        '2xl': {
+        [Size.XXL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
@@ -175,6 +183,11 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    multiple: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -185,36 +198,3 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
     item: string;
     emptyMessage: string;
 }, undefined, unknown, unknown, undefined>>;
-export type SelectItem = {
-    label: string;
-    value: string;
-    disabled?: boolean;
-    icon?: Component;
-};
-export type SelectProps = {
-    items: SelectItem[];
-    value?: string;
-    placeholder?: string;
-    searchable?: boolean;
-    disabled?: boolean;
-    size?: VariantSizes;
-    class?: ClassValue;
-    triggerClass?: ClassValue;
-    containerClass?: ClassValue;
-    listClass?: ClassValue;
-    itemClass?: ClassValue;
-    searchInputClass?: ClassValue;
-    emptyMessageText?: string;
-    clearable?: boolean;
-    icon?: Component;
-    iconClass?: ClassValue;
-    triggerContent?: Snippet<[{
-        selectedItem?: SelectItem;
-        open: boolean;
-    }]>;
-    onselect?: ({ value }: {
-        value?: string;
-    }) => void;
-    onopen?: () => void;
-    onclose?: () => void;
-};

package/dist/elements/dropdown/select.js

@@ -1,57 +1,59 @@
 import { tv } from 'tailwind-variants';
+import { Size } from '../../variants.js';
 export const selectTV = tv({
     slots: {
         base: 'relative inline-block',
-        trigger: `flex items-center justify-between w-full text-left focus:outline-none bg-white border
+        trigger: `flex items-center justify-between w-full text-left bg-white border
 			border-default-200 text-default-700 hover:border-default-300 rounded-md cursor-pointer`,
         triggerIcon: 'transition-transform duration-200 text-default-500',
         container: 'absolute z-50 w-full mt-1 bg-white overflow-clip border border-default-200 rounded-md shadow-md',
-        searchInput: 'w-full outline-none px-2 py-1.5 text-sm h-10 border-b border-b-default-200',
-        list: 'py-1 max-h-60 overflow-auto h-full',
-        item: `w-full px-3 py-2 text-sm text-left hover:bg-default-100 focus:bg-default-100
-		data-[selected=true]:bg-info-100 data-[selected=true]:text-info-500 truncate
-		data-[selected=true]:font-medium cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
-		data-[highlighted=true]:bg-default-100 data-[highlighted=true]:text-default-700`,
+        searchInput: 'flex items-center gap-x-3 w-full outline-none px-2 h-10 border-b border-b-default-200',
+        list: 'py-1 max-h-60 overflow-x-clip overflow-y-auto h-full',
+        item: `w-full px-3 py-2 text-sm text-left
+		data-[highlighted=true]:bg-default-100 data-[highlighted=true]:text-default-700
+		data-[selected=true]:bg-info-100 data-[selected=true]:text-info-500 data-[selected=true]:font-medium
+		data-[selected=true]:data-[highlighted=true]:bg-info-200 data-[selected=true]:data-[highlighted=true]:text-info-500
+		cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`,
         emptyMessage: 'px-3 py-2 text-sm text-default-500'
     },
     variants: {
         size: {
-            xs: {
+            [Size.XS]: {
                 trigger: 'h-6 px-2 py-1 text-xs gap-1',
                 triggerIcon: 'h-3 w-3',
                 container: 'max-h-40',
                 item: 'px-2 py-1 text-xs',
                 base: 'w-24'
             },
-            sm: {
+            [Size.SM]: {
                 trigger: 'h-8 px-2.5 py-1.5 text-xs gap-1.5',
                 triggerIcon: 'h-3.5 w-3.5',
                 container: 'max-h-48',
                 item: 'px-2.5 py-1.5 text-xs',
                 base: 'w-32'
             },
-            base: {
+            [Size.BASE]: {
                 trigger: 'h-10 px-3 py-2 text-sm gap-2',
                 triggerIcon: 'h-4 w-4',
                 container: 'max-h-60',
                 item: 'px-3 py-2 text-sm',
                 base: 'w-40'
             },
-            lg: {
+            [Size.LG]: {
                 trigger: 'h-11 px-4 py-2.5 text-base gap-2.5',
                 triggerIcon: 'h-5 w-5',
                 container: 'max-h-72',
                 item: 'px-4 py-2.5 text-base',
                 base: 'w-48'
             },
-            xl: {
+            [Size.XL]: {
                 trigger: 'h-12 px-5 py-3 text-lg gap-3',
                 triggerIcon: 'h-6 w-6',
                 container: 'max-h-80',
                 item: 'px-5 py-3 text-lg',
                 base: 'w-56'
             },
-            '2xl': {
+            [Size.XXL]: {
                 trigger: 'h-14 px-6 py-3.5 text-xl gap-4',
                 triggerIcon: 'h-7 w-7',
                 container: 'max-h-96',
@@ -65,10 +67,16 @@ export const selectTV = tv({
                 container: 'pointer-events-none',
                 item: 'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent'
             }
+        },
+        multiple: {
+            true: {
+                trigger: 'flex-wrap min-h-[2.5rem]'
+            }
         }
     },
     defaultVariants: {
         size: 'base',
-        disabled: false
+        disabled: false,
+        multiple: false
     }
 });

package/dist/elements/file-upload/FileUpload.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import type { FileUploadProps } from '../../index.js';
+
+	let {
+		allowedMimeTypes = [],
+		maxFiles = 10,
+		maxSize,
+		class: className = '',
+		dropzoneClass = '',
+		id = 'file-upload',
+		onfiles = undefined
+	}: FileUploadProps = $props();
+
+	const disabled = $derived(maxFiles <= 0);
+
+	let isDragging = $state(false);
+	let inputRef: HTMLInputElement;
+
+	function handleFiles(newFiles: FileList | File[]) {
+		if (disabled) return;
+		if (onfiles) onfiles(newFiles);
+	}
+
+	function handleDragEnter(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!disabled) isDragging = true;
+	}
+
+	function handleDragLeave(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		isDragging = false;
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		isDragging = false;
+		if (!disabled && e.dataTransfer?.files) {
+			handleFiles(e.dataTransfer.files);
+		}
+	}
+
+	function handleInputChange(e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (input.files) {
+			handleFiles(input.files);
+			input.value = '';
+		}
+	}
+
+	function handleDragOver(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!disabled) isDragging = true;
+	}
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 B';
+		const k = 1024;
+		const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))}${sizes[i]}`;
+	}
+</script>
+
+<div class={cn('w-full', className)}>
+	<label
+		class={cn(
+			'group relative block rounded-[32px] border-2 border-dashed p-12 text-center transition-colors',
+			{
+				'border-primary-400 bg-primary-50': isDragging,
+				'border-default-200 bg-white': !isDragging,
+				'cursor-not-allowed opacity-50': disabled,
+				'hover:bg-default-50 cursor-pointer': !disabled
+			},
+			dropzoneClass
+		)}
+		ondragenter={handleDragEnter}
+		ondragleave={handleDragLeave}
+		ondragover={handleDragOver}
+		ondrop={handleDrop}
+		for={id}
+	>
+		<input
+			type="file"
+			bind:this={inputRef}
+			accept={allowedMimeTypes.join(',')}
+			multiple={maxFiles !== 1}
+			{disabled}
+			class="hidden"
+			onchange={handleInputChange}
+			{id}
+		/>
+
+		<div class="flex flex-col items-center gap-4">
+			<!-- Upload Icon -->
+			<div class="bg-primary-100 mb-2 flex size-24 items-center justify-center rounded-full">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-primary-500 size-12"
+					viewBox="0 0 24 24"
+				>
+					<path
+						fill="currentColor"
+						d="M11 14.2V6.8l-3.7 3.7L6 9l6-6l6 6l-1.3 1.4L13 6.8v7.4zm-5 4.3h12v2H6z"
+					/>
+				</svg>
+			</div>
+
+			<!-- Upload Text -->
+			<div class="text-sm">
+				<span class="text-primary-500 font-medium">Click here</span>
+				<span class="text-default-600"> to upload your file or drag and drop.</span>
+			</div>
+
+			<!-- File Type Info -->
+			<div class="text-default-500 text-xs">
+				Supported Format: {allowedMimeTypes.length ? allowedMimeTypes.join(', ') : 'SVG, JPG, PNG'}
+				{#if maxSize}
+					({formatFileSize(maxSize)} each)
+				{:else}
+					(10MB each)
+				{/if}
+			</div>
+		</div>
+	</label>
+</div>

package/dist/elements/file-upload/FileUpload.svelte.d.ts

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

package/dist/elements/file-upload/FilesPreview.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import type { FilePreviewProps } from '../../index.js';
+
+	let { files = [], ondelete, class: className = '' }: FilePreviewProps = $props();
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 B';
+		const k = 1024;
+		const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))}${sizes[i]}`;
+	}
+</script>
+
+{#if files.length > 0}
+	<ul class={cn('mt-6 space-y-3', className)}>
+		{#each files as file, i (i)}
+			<li
+				class={cn('flex items-center justify-between rounded-xl p-4 ring-4', {
+					'bg-danger-50 ring-danger-100': file.status === 'error',
+					'bg-success-50 ring-success-100': file.status === 'success',
+					'ring-primary-100/30 bg-white': file.status === 'uploading'
+				})}
+			>
+				<div class="flex flex-1 items-center gap-3">
+					<!-- File Icon -->
+					<div
+						class={cn('flex size-10 items-center justify-center rounded-full', {
+							'bg-danger-100 text-danger-500': file.status === 'error',
+							'bg-success-100 text-success-500': file.status === 'success',
+							'bg-primary-100 text-primary-500': file.status === 'uploading'
+						})}
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24">
+							<path
+								fill="currentColor"
+								d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
+							/>
+						</svg>
+					</div>
+
+					<div class="flex-1">
+						<!-- Filename and Size -->
+						<div class="mb-1 flex items-center justify-between">
+							<span class="text-default-700 font-medium">{file.OriginalFilename}</span>
+							<span class="text-default-500 text-sm">{formatFileSize(file.Size)}</span>
+						</div>
+
+						<!-- Status Information -->
+						{#if file.status === 'uploading'}
+							<div class="bg-default-100 h-1.5 w-full rounded-full">
+								<div
+									class="bg-primary-500 h-1.5 rounded-full transition-all duration-300"
+									style="width: {file.progress || 0}%"
+								></div>
+							</div>
+							<span class="text-default-500 mt-1 text-sm">{file.progress || 0}%</span>
+						{:else if file.status === 'error'}
+							<div class="flex items-center justify-between">
+								<span class="text-danger-500 text-sm">Upload failed!</span>
+								<span class="text-danger-600 cursor-help text-sm font-medium"
+									>Please try again!</span
+								>
+							</div>
+						{:else if file.status === 'success'}
+							<p class="text-success-500 text-sm">Upload Successful!</p>
+						{/if}
+					</div>
+				</div>
+
+				<button
+					type="button"
+					aria-label="Delete file"
+					class={cn('ml-4 flex size-6 cursor-pointer items-center justify-center rounded-lg', {
+						'bg-danger-100 text-danger-500': file.status === 'error',
+						'bg-success-100 text-success-500': file.status === 'success',
+						'bg-default-100 text-default-500': file.status === 'uploading'
+					})}
+					onclick={() => (file.FileID ? ondelete?.(file.FileID, i) : ondelete?.('', i))}
+					disabled={file.status === 'uploading'}
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24">
+						<path
+							fill="currentColor"
+							d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"
+						/>
+					</svg>
+				</button>
+			</li>
+		{/each}
+	</ul>
+{/if}

package/dist/elements/file-upload/FilesPreview.svelte.d.ts

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

package/dist/elements/progress/Progress.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { Color, Size } from '../../variants.js';
+	import type { ProgressProps, ProgressSegment, VariantColors } from '../../index.js';
+
+	let {
+		value,
+		max = 100,
+		size = Size.BASE,
+		color = Color.PRIMARY,
+		showLabel = true,
+		labelPosition = 'right',
+		segments = undefined,
+		showValues = false,
+		showLabels = false,
+		class: className = '',
+		labelClass = '',
+		barClass = ''
+	}: ProgressProps = $props();
+
+	// Function composition for better readability and maintainability
+	function calculatePercentage(val: number, maximum: number): number {
+		return Math.min(Math.round((val / maximum) * 100), 100);
+	}
+
+	function getColorClass(color: VariantColors): string {
+		const colorMap = {
+			[Color.PRIMARY]: 'bg-primary-600',
+			[Color.SECONDARY]: 'bg-secondary-600',
+			[Color.SUCCESS]: 'bg-success-600',
+			[Color.DANGER]: 'bg-danger-600',
+			[Color.WARNING]: 'bg-warning-600',
+			[Color.INFO]: 'bg-info-600',
+			[Color.DEFAULT]: 'bg-default-600'
+		};
+		return colorMap[color] || colorMap[Color.PRIMARY];
+	}
+
+	function getSizeTextClass(size: string): string {
+		if (size === Size.XS || size === Size.SM) return 'text-xs';
+		if (size === Size.BASE) return 'text-sm';
+		return 'text-base'; // For Size.LG, Size.XL
+	}
+
+	// Derived values
+	const percentage = $derived(segments ? 100 : calculatePercentage(value, max));
+	const segmentPercentages = $derived(
+		segments?.map(segment => ({
+			...segment,
+			percentage: calculatePercentage(segment.value, max)
+		})) || []
+	);
+
+	// Class compositions
+	const containerClass = $derived(
+		cn(
+			'relative',
+			{
+				'flex items-center': !segments,
+				'flex-col gap-1': !segments && (labelPosition === 'top' || labelPosition === 'bottom'),
+				'flex-row gap-3': !segments && labelPosition === 'right'
+			},
+			className
+		)
+	);
+
+	const progressClass = $derived(
+		cn('w-full rounded-full bg-default-200', {
+			'h-1.5': size === Size.XS,
+			'h-2': size === Size.SM,
+			'h-2.5': size === Size.BASE,
+			'h-3': size === Size.LG,
+			'h-4': size === Size.XL,
+			'order-2': !segments && labelPosition === 'top',
+			'order-1': !segments && labelPosition === 'bottom',
+			'flex overflow-hidden': segments
+		})
+	);
+
+	const fillClass = $derived(
+		cn(
+			'h-full rounded-full transition-all',
+			segments ? '' : getColorClass(color),
+			barClass
+		)
+	);
+
+	const labelTextClass = $derived(
+		cn(
+			'text-default-500',
+			getSizeTextClass(size),
+			{
+				'order-1': !segments && labelPosition === 'top',
+				'order-2': !segments && labelPosition === 'bottom',
+				'mt-1': segments
+			},
+			labelClass
+		)
+	);
+</script>
+
+<div class={containerClass}>
+	<div
+		class={progressClass}
+		role="progressbar"
+		aria-valuenow={percentage}
+		aria-valuemin="0"
+		aria-valuemax="100"
+	>
+		{#if segments}
+			{#each segmentPercentages as segment}
+				{#if segment.percentage > 0}
+					<div 
+						class={cn(getColorClass(segment.color), barClass)}
+						style="width: {segment.percentage}%"
+						title={segment.label || `${segment.value} (${segment.percentage}%)`}
+					></div>
+				{/if}
+			{/each}
+		{:else}
+			<div class={fillClass} style="width: {percentage}%"></div>
+		{/if}
+	</div>
+	
+	{#if segments && (showLabels || showValues)}
+		<div class="flex justify-between mt-1">
+			{#each segmentPercentages as segment}
+				{#if segment.percentage > 0}
+					<div class={labelTextClass}>
+						{#if showLabels && segment.label}
+							{segment.label}
+						{/if}
+						{#if showValues}
+							{#if showLabels && segment.label} ({/if}
+							{segment.percentage}%
+							{#if showLabels && segment.label}){/if}
+						{/if}
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{:else if showLabel}
+		<span class={labelTextClass}>{percentage}%</span>
+	{/if}
+</div>

package/dist/elements/progress/Progress.svelte.d.ts

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