@makolabs/ripple 0.0.1 → 0.0.3

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-default-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-default-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-default-50'
+		)
+	);
+</script>
+
+<div class="space-y-1">
+	{#if label}
+		<label for={name} class="block text-sm font-medium text-default-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-default-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-default-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-default-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-default-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-default-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-default-500 -translate-x-1/2',
+        label: 'mb-2 block text-sm font-medium text-default-700',
+        value: 'mt-1 text-sm text-default-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

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { breadcrumbs } from './breadcrumbs.js';
+	import type { BreadcrumbsProps } from '../index.js';
+
+	let {
+		items = [],
+		size = 'sm',
+		color = 'default',
+		weight = 'medium',
+		icon: Icon,
+		class: className = '',
+		listclass: listClassName = '',
+		itemclass: itemClassName = '',
+		separatorclass: separatorClassName = '',
+		wrapperclass: wrapperClassName = ''
+	}: BreadcrumbsProps = $props();
+
+	// Get the slots from the breadcrumbs
+	const { base, list, item, separator, wrapper } = $derived(
+		breadcrumbs({
+			size,
+			weight,
+			color
+		})
+	);
+
+	const baseClass = $derived(cn(base(), className));
+	const listClass = $derived(cn(list(), listClassName));
+	const itemClasses = $derived(cn(item(), itemClassName));
+	const separatorClasses = $derived(cn(separator(), separatorClassName));
+	const wrapperClasses = $derived(cn(wrapper(), wrapperClassName));
+</script>
+
+<nav class={baseClass} aria-label="Breadcrumb">
+	<ol role="list" class={listClass}>
+		{#each items as breadcrumbItem, index (index)}
+			<li>
+				<div class={wrapperClasses}>
+					{#if index > 0}
+						<span class={separatorClasses}>
+							{#if Icon}
+								<Icon />
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="0.8em"
+									height="0.8em"
+									viewBox="0 0 16 16"
+								>
+									<path
+										fill="currentColor"
+										d="M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04"
+									/>
+								</svg>
+							{/if}
+						</span>
+					{/if}
+					<a
+						href={breadcrumbItem.href}
+						class={cn(
+							itemClasses,
+							breadcrumbItem.current ? breadcrumbs({ active: true }).item() : ''
+						)}
+						aria-current={breadcrumbItem.current ? 'page' : undefined}
+					>
+						{breadcrumbItem.label}
+					</a>
+				</div>
+			</li>
+		{/each}
+	</ol>
+</nav>

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import type { PageHeaderProps } from '../index.js';
+	import Breadcrumbs from './Breadcrumbs.svelte';
+
+	let {
+		title,
+		subtitle,
+		breadcrumbs = [],
+		children,
+		class: className = '',
+		titleclass: titleClassName = '',
+		layout = 'vertical'
+	}: PageHeaderProps = $props();
+
+	const defaultTitleClasses =
+		'font-bold text-default-900 sm:tracking-tight sm:truncate text-2xl/7 sm:text-3xl';
+
+	const hasBreadcrumbs = $derived(breadcrumbs && breadcrumbs.length > 0);
+	const titleClasses = $derived(cn(defaultTitleClasses, titleClassName));
+</script>
+
+<div class="pb-4">
+	{#if layout === 'horizontal'}
+		<div
+			class="flex flex-col space-y-3 md:flex-row md:items-start md:justify-between md:space-y-0 {className}"
+		>
+			<!-- Title and subtitle grouped together as one unit -->
+			<div class="min-w-0 flex-1 gap-4">
+				{#if hasBreadcrumbs}
+					<Breadcrumbs items={breadcrumbs} />
+				{/if}
+				<h2 class={titleClasses}>{title}</h2>
+				{#if subtitle}
+					<p class="text-default-500 mt-2 text-sm">{subtitle}</p>
+				{/if}
+			</div>
+
+			<!-- Actions area - responsive positioning -->
+			{#if children}
+				<div class="flex-shrink-0 md:ml-6">
+					{@render children()}
+				</div>
+			{/if}
+		</div>
+	{:else}
+		<!-- Vertical layout - title/subtitle unit first, children unit below -->
+		<div class={className}>
+			<!-- Title and subtitle grouped together -->
+			<div class="min-w-0 gap-4">
+				{#if hasBreadcrumbs}
+					<Breadcrumbs items={breadcrumbs} />
+				{/if}
+				<h2 class={titleClasses}>{title}</h2>
+				{#if subtitle}
+					<p class="text-default-500 mt-2 text-sm">{subtitle}</p>
+				{/if}
+			</div>
+
+			<!-- Children as separate unit below -->
+			{#if children}
+				<div class="mt-4">
+					{@render children()}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

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

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