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

package/dist/forms/Tags.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import Badge from '../elements/badge/Badge.svelte';
+	import { Size } from '../variants.js';
+	import { cn } from '../helper/cls.js';
+	import type { TagsProps } from '../index.js';
+
+	let {
+		value = $bindable([]),
+		name,
+		label,
+		errors,
+		placeholder = 'Type and press enter to add tags...',
+		size = Size.BASE,
+		class: className = '',
+		suggestions = [],
+		onaddtag: onAddTag,
+		onremovetag: onRemoveTag
+	}: TagsProps = $props();
+
+	let inputValue = $state('');
+	let inputRef = $state<HTMLInputElement | null>(null);
+	let showSuggestions = $state(false);
+	let highlightedIndex = $state(-1);
+
+	const isUnselected = (suggestion: string) => !value.includes(suggestion);
+
+	const matchesInput = (suggestion: string) =>
+		!inputValue || suggestion.toLowerCase().includes(inputValue.toLowerCase());
+
+	const filteredSuggestions = $derived(
+		showSuggestions ? suggestions.filter(isUnselected).filter(matchesInput).slice(0, 5) : []
+	);
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			if (highlightedIndex >= 0 && highlightedIndex < filteredSuggestions.length) {
+				handleTagAddition(filteredSuggestions[highlightedIndex]);
+			} else {
+				const tag = inputValue.trim();
+				if (tag) handleTagAddition(tag);
+			}
+			return;
+		}
+
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			if (!showSuggestions) {
+				showSuggestions = true;
+				highlightedIndex = 0;
+				return;
+			}
+			highlightedIndex = Math.min(highlightedIndex + 1, filteredSuggestions.length - 1);
+			if (highlightedIndex === -1 && filteredSuggestions.length > 0) highlightedIndex = 0;
+			return;
+		}
+
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			highlightedIndex = Math.max(highlightedIndex - 1, -1);
+			return;
+		}
+
+		if (event.key === 'Escape') {
+			showSuggestions = false;
+			highlightedIndex = -1;
+		}
+	}
+
+	function handleTagAddition(tag: string) {
+		if (!value.includes(tag)) {
+			value = [...value, tag];
+			onAddTag?.(tag);
+		}
+		inputValue = '';
+		showSuggestions = false;
+		highlightedIndex = -1;
+	}
+
+	function handleTagRemoval(tag: string) {
+		value = value.filter((t) => t !== tag);
+		onRemoveTag?.(tag);
+		inputRef?.focus();
+	}
+
+	function handleFocusOut(event: FocusEvent) {
+		const target = event.currentTarget as HTMLElement;
+		if (!target.contains(event.relatedTarget as Node)) {
+			showSuggestions = false;
+			highlightedIndex = -1;
+		}
+	}
+
+	function handleFocusIn() {
+		showSuggestions = true;
+	}
+
+	function handleSuggestionHover(index: number) {
+		highlightedIndex = index;
+	}
+
+	function handleSuggestionSelect(suggestion: string) {
+		handleTagAddition(suggestion);
+	}
+
+	const containerClass = $derived(
+		cn(
+			'relative flex flex-wrap gap-2 rounded-lg border bg-white shadow-sm px-3 py-2',
+			'border-gray-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
+			{
+				'border-red-300 focus-within:border-red-500 focus-within:ring-red-500': errors?.length
+			},
+			className
+		)
+	);
+
+	const suggestionClass = $derived(
+		cn(
+			'absolute top-[calc(100%+8px)] right-0 left-0 z-50 max-h-[200px] overflow-auto rounded-lg border border-gray-300 bg-white shadow-lg'
+		)
+	);
+
+	const suggestionItemClass = $derived((isHighlighted: boolean) =>
+		cn(
+			'flex w-full cursor-pointer items-center px-3 py-2 text-sm transition-colors',
+			isHighlighted && 'bg-gray-50'
+		)
+	);
+</script>
+
+<div class="space-y-1">
+	{#if label}
+		<label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
+	{/if}
+	<div class={containerClass} onfocusout={handleFocusOut}>
+		{#each value as tag}
+			<Badge {size} color="info" onclose={() => handleTagRemoval(tag)} class="shadow-xs">
+				{tag}
+			</Badge>
+		{/each}
+		<input
+			bind:this={inputRef}
+			bind:value={inputValue}
+			{name}
+			id={name}
+			{placeholder}
+			class={cn('min-w-[120px] flex-1 bg-transparent outline-none placeholder:text-gray-400', {
+				'text-sm': size === Size.SM,
+				'text-base': size === Size.BASE,
+				'text-lg': size === Size.LG
+			})}
+			type="text"
+			autocomplete="off"
+			onkeydown={handleKeydown}
+			onfocus={handleFocusIn}
+		/>
+
+		{#if showSuggestions && filteredSuggestions.length > 0}
+			<div class={suggestionClass}>
+				{#each filteredSuggestions as suggestion, i}
+					<button
+						type="button"
+						class={suggestionItemClass(i === highlightedIndex)}
+						onmousedown={() => handleSuggestionSelect(suggestion)}
+						onmouseover={() => handleSuggestionHover(i)}
+						onfocus={() => handleSuggestionHover(i)}
+						tabindex="-1"
+					>
+						{suggestion}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	{#if errors?.length}
+		{#each errors as error}
+			<p class="text-sm text-red-600">{error}</p>
+		{/each}
+	{/if}
+</div>

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

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

package/dist/forms/Toggle.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { Color, Size } from '../variants.js';
+	import type { ToggleProps } from '../index.js';
+
+	let {
+		name,
+		id = name,
+		label,
+		disabled = false,
+		class: className = '',
+		size = Size.BASE,
+		color = Color.PRIMARY,
+		value = $bindable(false),
+		errors = [],
+		offColor = 'bg-gray-200',
+		onColor,
+		...restProps
+	}: ToggleProps = $props();
+
+	const activeColor = $derived(
+		onColor ||
+			{
+				[Color.PRIMARY]: 'bg-primary-500',
+				[Color.SECONDARY]: 'bg-secondary-500',
+				[Color.SUCCESS]: 'bg-green-500',
+				[Color.DANGER]: 'bg-red-500',
+				[Color.WARNING]: 'bg-yellow-500',
+				[Color.INFO]: 'bg-blue-500',
+				[Color.DEFAULT]: 'bg-gray-800'
+			}[color]
+	);
+
+	const toggleSize = $derived(
+		{
+			[Size.SM]: 'w-8 h-4',
+			[Size.BASE]: 'w-10 h-5',
+			[Size.LG]: 'w-12 h-6'
+		}[size]
+	);
+
+	const thumbSize = $derived(
+		{
+			[Size.SM]: 'h-3 w-3',
+			[Size.BASE]: 'h-4 w-4',
+			[Size.LG]: 'h-5 w-5'
+		}[size]
+	);
+
+	const thumbPosition = $derived(
+		{
+			[Size.SM]: value ? 'translate-x-4' : 'translate-x-0.5',
+			[Size.BASE]: value ? 'translate-x-5' : 'translate-x-0.5',
+			[Size.LG]: value ? 'translate-x-6' : 'translate-x-0.5'
+		}[size]
+	);
+
+	const toggleWrapperClasses = $derived(
+		cn(
+			'relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
+			toggleSize,
+			value ? activeColor : offColor,
+			{
+				'opacity-50 cursor-not-allowed': disabled,
+				'cursor-pointer': !disabled,
+				'focus:ring-red-500': errors.length,
+				[`focus:ring-${color}-500`]: !errors.length
+			},
+			className
+		)
+	);
+
+	const thumbClasses = $derived(
+		cn(
+			'inline-block transform rounded-full bg-white transition-transform',
+			thumbSize,
+			thumbPosition
+		)
+	);
+
+	const labelClasses = $derived(
+		cn('text-sm font-medium', {
+			'text-gray-700': !errors.length,
+			'text-red-600': errors.length,
+			'opacity-50': disabled
+		})
+	);
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (disabled) return;
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			value = !value;
+		}
+	}
+</script>
+
+<div class="flex items-center">
+	{#if label}
+		<label for={id} class={cn('mr-3', labelClasses)}>{label}</label>
+	{/if}
+	<button
+		type="button"
+		role="switch"
+		aria-checked={value}
+		{id}
+		{name}
+		{disabled}
+		aria-invalid={!!errors.length}
+		aria-describedby={errors.length ? `${name}-errors` : undefined}
+		class={toggleWrapperClasses}
+		onclick={() => {
+			if (!disabled) value = !value;
+		}}
+		onkeydown={handleKeyDown}
+		tabindex={disabled ? -1 : 0}
+		{...restProps}
+	>
+		<span class={thumbClasses} aria-hidden="true"></span>
+		<input type="checkbox" class="hidden" {name} bind:checked={value} />
+	</button>
+</div>
+
+{#if errors.length}
+	<div id="{name}-errors" class="mt-1">
+		{#each errors as error (error)}
+			<p class="text-sm text-red-600" role="alert">
+				{error}
+			</p>
+		{/each}
+	</div>
+{/if}

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

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

package/dist/forms/slider.d.ts

@@ -0,0 +1,143 @@
+import { Size } from '../variants.js';
+export declare const slider: import("tailwind-variants").TVReturnType<{
+    size: {
+        [Size.SM]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.BASE]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.LG]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            thumb: string;
+        };
+    };
+    hasError: {
+        true: {
+            track: string;
+            range: string;
+            thumb: string;
+            label: string;
+            value: string;
+        };
+    };
+}, {
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    mark: string;
+    label: string;
+    value: string;
+}, undefined, {
+    size: {
+        [Size.SM]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.BASE]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.LG]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            thumb: string;
+        };
+    };
+    hasError: {
+        true: {
+            track: string;
+            range: string;
+            thumb: string;
+            label: string;
+            value: string;
+        };
+    };
+}, {
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    mark: string;
+    label: string;
+    value: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        [Size.SM]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.BASE]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.LG]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            thumb: string;
+        };
+    };
+    hasError: {
+        true: {
+            track: string;
+            range: string;
+            thumb: string;
+            label: string;
+            value: string;
+        };
+    };
+}, {
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    mark: string;
+    label: string;
+    value: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/slider.js

@@ -0,0 +1,62 @@
+import { tv } from 'tailwind-variants';
+import { Color, Size } from '../variants.js';
+export const slider = tv({
+    slots: {
+        base: 'relative w-full',
+        track: 'absolute h-2 w-full rounded-full bg-gray-200 cursor-pointer',
+        range: 'absolute h-full rounded-full bg-primary-500',
+        thumb: [
+            'absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white border-2 border-primary-500',
+            'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
+            'hover:scale-110 transition-transform cursor-pointer'
+        ],
+        mark: 'absolute text-sm text-gray-500 -translate-x-1/2',
+        label: 'mb-2 block text-sm font-medium text-gray-700',
+        value: 'mt-1 text-sm text-gray-500'
+    },
+    variants: {
+        size: {
+            [Size.SM]: {
+                track: 'h-1',
+                thumb: 'w-3 h-3',
+                mark: 'text-xs top-4',
+                label: 'text-xs',
+                value: 'text-xs'
+            },
+            [Size.BASE]: {
+                track: 'h-2',
+                thumb: 'w-4 h-4',
+                mark: 'text-sm top-6',
+                label: 'text-sm',
+                value: 'text-sm'
+            },
+            [Size.LG]: {
+                track: 'h-3',
+                thumb: 'w-5 h-5',
+                mark: 'text-base top-7',
+                label: 'text-base',
+                value: 'text-base'
+            }
+        },
+        disabled: {
+            true: {
+                base: 'opacity-50 cursor-not-allowed',
+                thumb: 'cursor-not-allowed hover:scale-100 active:scale-100'
+            }
+        },
+        hasError: {
+            true: {
+                track: 'bg-danger-200',
+                range: 'bg-danger-500',
+                thumb: 'border-danger-500 focus:ring-danger-500',
+                label: 'text-danger-600',
+                value: 'text-danger-600'
+            }
+        }
+    },
+    defaultVariants: {
+        size: Size.BASE,
+        disabled: false,
+        hasError: false
+    }
+});

package/dist/header/Breadcrumbs.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
-	import { breadcrumbs, type BreadcrumbsProps } from './breadcrumbs.js';
+	import { breadcrumbs } from './breadcrumbs.js';
+	import type { BreadcrumbsProps } from '../index.js';
 
 	let {
 		items = [],

package/dist/header/Breadcrumbs.svelte.d.ts

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

package/dist/header/PageHeader.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
-	import { type PageHeaderProps } from './pageheaders.js';
+	import type { PageHeaderProps } from '../index.js';
 	import Breadcrumbs from './Breadcrumbs.svelte';
 
 	let {
@@ -19,7 +19,7 @@
 </script>
 
 <div class={headerClasses}>
-	<div class="min-w-0 flex-1">
+	<div class="flex-1 min-w-0">
 		{#if hasBreadcrumbs}
 			<Breadcrumbs items={breadcrumbs} />
 		{/if}

package/dist/header/PageHeader.svelte.d.ts

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

package/dist/header/breadcrumbs.d.ts

@@ -1,11 +1,13 @@
-import type { Component } from 'svelte';
-export type BreadcrumbItem = {
+type BreadcrumbItem = {
     label: string;
     href: string;
     current?: boolean;
 };
 export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     size: {
+        xs: {
+            base: string;
+        };
         sm: {
             base: string;
         };
@@ -26,6 +28,9 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         semibold: {
             item: string;
         };
+        bold: {
+            item: string;
+        };
     };
     color: {
         default: {
@@ -73,6 +78,9 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     wrapper: string;
 }, undefined, {
     size: {
+        xs: {
+            base: string;
+        };
         sm: {
             base: string;
         };
@@ -93,6 +101,9 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         semibold: {
             item: string;
         };
+        bold: {
+            item: string;
+        };
     };
     color: {
         default: {
@@ -140,6 +151,9 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     wrapper: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
+        xs: {
+            base: string;
+        };
         sm: {
             base: string;
         };
@@ -160,6 +174,9 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         semibold: {
             item: string;
         };
+        bold: {
+            item: string;
+        };
     };
     color: {
         default: {
@@ -206,15 +223,4 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     separator: string;
     wrapper: string;
 }, undefined, unknown, unknown, undefined>>;
-export type BreadcrumbsProps = {
-    items: BreadcrumbItem[];
-    size?: keyof typeof breadcrumbs.variants.size;
-    weight?: keyof typeof breadcrumbs.variants.weight;
-    color?: keyof typeof breadcrumbs.variants.color;
-    icon?: Component;
-    class?: string;
-    listclass?: string;
-    itemclass?: string;
-    separatorclass?: string;
-    wrapperclass?: string;
-};
+export type { BreadcrumbItem };

package/dist/header/breadcrumbs.js

@@ -9,6 +9,9 @@ export const breadcrumbs = tv({
     },
     variants: {
         size: {
+            xs: {
+                base: 'items-center text-xs'
+            },
             sm: {
                 base: 'items-center text-sm'
             },
@@ -28,6 +31,9 @@ export const breadcrumbs = tv({
             },
             semibold: {
                 item: 'font-semibold'
+            },
+            bold: {
+                item: 'font-bold'
             }
         },
         color: {

package/dist/header/pageheaders.d.ts

@@ -1,5 +1,5 @@
 import { type ClassValue } from 'tailwind-variants';
-import type { BreadcrumbItem } from './breadcrumbs.js';
+import type { BreadcrumbItem } from '../index.js';
 import type { Snippet } from 'svelte';
 export type PageHeaderProps = {
     title: string;

package/dist/helper/date.d.ts

@@ -0,0 +1,7 @@
+export declare const DATE_FORMAT: {
+    ISO: string;
+    READABLE: string;
+    SHORT: string;
+};
+export declare function formatDateTime(time: Date | string, format?: string): string;
+export declare function getRelativeTime(time: Date | string): string;