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

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

@@ -0,0 +1,213 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import type { FileUploadProps } from '../../index.js';
+
+	let {
+		allowedMimeTypes = [],
+		maxFiles = 10,
+		maxSize,
+		class: className = '',
+		dropzoneClass = '',
+		previewClass = '',
+		id = 'file-upload',
+		onfiles = undefined,
+		ondelete = undefined,
+		files = []
+	}: 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 handleDeleteFile(fileId: string, index: number) {
+		if (ondelete) ondelete(fileId, index);
+	}
+
+	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',
+			isDragging ? 'border-primary-400 bg-primary-50' : 'border-default-200 bg-white',
+			disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-default-50 cursor-pointer',
+			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-lg">
+				<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-sm">
+				Supported Format: {allowedMimeTypes.length ? allowedMimeTypes.join(', ') : 'SVG, JPG, PNG'}
+				{#if maxSize}
+					({formatFileSize(maxSize)} each)
+				{:else}
+					(10MB each)
+				{/if}
+			</div>
+		</div>
+	</label>
+
+	<!-- File List -->
+	{#if files.length > 0}
+		<ul class={cn('mt-6 space-y-3', previewClass)}>
+			{#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 ? handleDeleteFile(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}
+</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/progress/Progress.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { Color, Size } from '../../variants.js';
+	import type { ProgressProps } from '../../index.js';
+
+	let {
+		value,
+		max = 100,
+		size = Size.BASE,
+		color = Color.PRIMARY,
+		showLabel = true,
+		labelPosition = 'right',
+		class: className = '',
+		labelClass = '',
+		barClass = ''
+	}: ProgressProps = $props();
+
+	const percentage = $derived(Math.min(Math.round((value / max) * 100), 100));
+
+	const containerClass = $derived(
+		cn(
+			'relative flex items-center',
+			{
+				'flex-col gap-1': labelPosition === 'top' || labelPosition === 'bottom',
+				'flex-row gap-3': labelPosition === 'right'
+			},
+			className
+		)
+	);
+
+	const progressClass = $derived(
+		cn('w-full rounded-full bg-gray-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': labelPosition === 'top',
+			'order-1': labelPosition === 'bottom'
+		})
+	);
+
+	const fillClass = $derived(
+		cn(
+			'h-full rounded-full transition-all',
+			{
+				'bg-primary-600': color === Color.PRIMARY,
+				'bg-secondary-600': color === Color.SECONDARY,
+				'bg-success-600': color === Color.SUCCESS,
+				'bg-danger-600': color === Color.DANGER,
+				'bg-warning-600': color === Color.WARNING,
+				'bg-info-600': color === Color.INFO,
+				'bg-gray-600': color === Color.DEFAULT
+			},
+			barClass
+		)
+	);
+
+	const labelTextClass = $derived(
+		cn(
+			'text-gray-500',
+			{
+				'text-xs': size === Size.XS || size === Size.SM,
+				'text-sm': size === Size.BASE,
+				'text-base': size === Size.LG || size === Size.XL,
+				'order-1': labelPosition === 'top',
+				'order-2': labelPosition === 'bottom'
+			},
+			labelClass
+		)
+	);
+</script>
+
+<div class={containerClass}>
+	<div
+		class={progressClass}
+		role="progressbar"
+		aria-valuenow={percentage}
+		aria-valuemin="0"
+		aria-valuemax="100"
+	>
+		<div class={fillClass} style="width: {percentage}%"></div>
+	</div>
+	{#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;

package/dist/elements/timeline/Timeline.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import type { TimelineItem } from '../../index.js';
+	import { formatDateTime, getRelativeTime } from '../../helper/date.js';
+
+	let { items = [] as TimelineItem[], class: className = '' } = $props();
+</script>
+
+<div class={cn('flow-root', className)}>
+	<ul role="list" class="-mb-8">
+		{#each items as item, index}
+			<li>
+				<div class="relative pb-8">
+					{#if index !== items.length - 1}
+						<span class="bg-default-200 absolute top-4 left-4 -ml-px h-full w-1" aria-hidden="true"
+						></span>
+					{/if}
+
+					{@render ItemWrap({ item })}
+				</div>
+			</li>
+		{/each}
+	</ul>
+</div>
+
+{#snippet ItemWrap({ item }: { item: TimelineItem })}
+	<div class="relative flex gap-x-3" class:items-center={!item.details}>
+		<div class="relative ml-0.5 flex-shrink-0">
+			{@render TimelineIcon(item)}
+		</div>
+		{#if item.details}
+			{@render CommentItem({ item })}
+		{:else}
+			{@render StandardItem({ item })}
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet StandardItem({ item }: { item: TimelineItem })}
+	<div class="min-w-0 flex-1">
+		<div class="flex items-center justify-between">
+			<p class="text-default-500 text-sm">
+				{item.title}
+				{#if item.link}
+					<a href={item.link.url} class="text-default-900 font-medium">{item.link.text}</a>
+				{/if}
+			</p>
+			{@render TimeStamp(item.time)}
+		</div>
+	</div>
+{/snippet}
+
+{#snippet CommentItem({ item }: { item: TimelineItem })}
+	<div class="ring-default-200 w-full flex-grow rounded-md bg-white p-3 ring-1">
+		<div class="mb-1 flex justify-between gap-x-4">
+			<div class="text-default-900 text-sm font-medium">{item.title}</div>
+			{@render TimeStamp(item.time)}
+		</div>
+		<p class="text-default-500 text-sm">{item.details}</p>
+	</div>
+{/snippet}
+
+{#snippet TimeStamp(time: Date | string)}
+	<time
+		datetime={time instanceof Date ? time.toISOString() : time}
+		class="text-default-500 text-right text-sm whitespace-nowrap"
+		title={formatDateTime(time)}
+	>
+		{getRelativeTime(time)}
+	</time>
+{/snippet}
+
+{#snippet TimelineIcon(item: TimelineItem, classes = 'size-7 shrink-0')}
+	{#if item.Icon}
+		{@const Icon = item.Icon}
+		<Icon class={classes} />
+	{:else}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			class={classes}
+		>
+			<circle cx="8" cy="8" r="7" fill="white" />
+			<path
+				fill="currentColor"
+				d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m9.854-1.146a.5.5 0 0 0-.708-.708L7.25 9.043L5.854 7.646a.5.5 0 1 0-.708.708l1.75 1.75a.5.5 0 0 0 .708 0z"
+			/>
+		</svg>
+	{/if}
+{/snippet}

package/dist/elements/timeline/Timeline.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TimelineItem } from '../../index.js';
+declare const Timeline: import("svelte").Component<{
+    items?: TimelineItem[];
+    class?: string;
+}, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/forms/Checkbox.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import type { CheckboxProps } from '../index.js';
+
+	let {
+		name,
+		label,
+		value = $bindable(false),
+		disabled = false,
+		class: className = '',
+		errors = [],
+		required = false
+	}: CheckboxProps = $props();
+
+	const checkboxClass = $derived(
+		cn('w-4 h-4 rounded text-primary-600 border-gray-300 focus:ring-primary-500', {
+			'opacity-50 cursor-not-allowed': disabled,
+			'accent-danger-500': errors.length
+		})
+	);
+
+	const labelClass = $derived(
+		cn('text-sm font-medium', {
+			'text-gray-700': !errors.length,
+			'text-danger-600': errors.length
+		})
+	);
+</script>
+
+<div class="w-full">
+	<div class="inline-flex w-full items-center gap-2">
+		<input
+			type="checkbox"
+			{name}
+			id={name}
+			bind:checked={value}
+			class={checkboxClass}
+			{disabled}
+			{required}
+			aria-describedby={errors.length ? `${name}-errors` : undefined}
+		/>
+		{#if label}
+			<label for={name} class={labelClass}>{label}</label>
+		{/if}
+	</div>
+
+	{#if errors.length}
+		{#each errors as error (error)}
+			<p id={`${name}-errors`} class="text-danger-600 mt-1 text-sm" role="alert">
+				{error}
+			</p>
+		{/each}
+	{/if}
+</div>

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

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