@makolabs/ripple 0.0.1-dev.2 → 0.0.1-dev.20

package/dist/forms/Input.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { Size } from '../variants.js';
+	import type { InputProps } from '../index.js';
+
+	let {
+		name,
+		id = name,
+		type = 'text',
+		label,
+		placeholder,
+		disabled = false,
+		class: className = '',
+		size = Size.BASE,
+		value = $bindable(),
+		errors = [],
+		...restProps
+	}: InputProps = $props();
+
+	const BASIC_TYPES = ['text', 'email', 'password', 'number', 'tel', 'url', 'date', 'textarea'];
+	const inputClasses = $derived(
+		cn(
+			'transition-colors',
+			{
+				'border rounded-lg shadow-sm w-full bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2':
+					BASIC_TYPES.includes(type),
+				'w-full bg-white px-3 py-2 text-sm resize-y min-h-[100px]': type === 'textarea',
+				'border-red-300 focus:border-red-500 focus:ring-red-500': errors.length,
+				'opacity-50 cursor-not-allowed': disabled,
+				...(BASIC_TYPES.includes(type)
+					? {
+							'h-8 text-sm': size === Size.SM,
+							'h-10 text-base': size === Size.BASE,
+							'h-12 text-lg': size === Size.LG
+						}
+					: {}),
+				'border-gray-300 focus:border-primary-500 focus:ring-primary-500': !errors.length
+			},
+			className
+		)
+	);
+
+	const inputCommonProps = $derived({
+		id,
+		name,
+		type,
+		placeholder,
+		disabled,
+		class: inputClasses,
+		'aria-invalid': !!errors.length,
+		'aria-describedby': errors.length ? `${name}-errors` : undefined,
+		...restProps
+	});
+</script>
+
+<div class="w-full">
+	{@render Label('mb-2')}
+	{#if type === 'textarea'}
+		<textarea {...inputCommonProps} bind:value></textarea>
+	{:else}
+		<input {...inputCommonProps} bind:value />
+	{/if}
+	{#if errors.length}
+		{#each errors as error (error)}
+			<p id="{name}-errors" class="mt-1 text-sm text-red-600" role="alert">
+				{error}
+			</p>
+		{/each}
+	{/if}
+</div>
+
+{#snippet Label(extraClass = '')}
+	{#if label}
+		<label
+			for={id}
+			class={cn(
+				'block w-full text-sm font-medium',
+				{
+					'text-gray-700': !errors.length,
+					'text-red-600': errors.length
+				},
+				extraClass
+			)}>{label}</label
+		>
+	{/if}
+{/snippet}

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

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

package/dist/forms/NumberInput.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { Size } from '../variants.js';
+	import type { NumberInputProps } from '../index.js';
+
+	let {
+		value = $bindable(0),
+		unit = $bindable('USD'),
+		name,
+		label,
+		placeholder = 'Enter a number',
+		size = Size.BASE,
+		class: className = '',
+		units = [],
+		errors,
+		disabled = false,
+		dropdownicon: DropdownIcon,
+		onunitchange: onUnitChange,
+		...restProps
+	}: NumberInputProps = $props();
+
+	let showUnitDropdown = $state(false);
+	let containerRef = $state<HTMLDivElement | null>(null);
+
+	const selectedOption = $derived(units.find((u) => u.value === unit));
+
+	const containerClass = $derived(
+		cn(
+			'relative flex items-center gap-1 rounded-lg border bg-white shadow-sm',
+			{
+				'border-danger-300': errors?.length,
+				'cursor-not-allowed opacity-50': disabled
+			},
+			{
+				'h-8': size === Size.SM,
+				'h-10': size === Size.BASE,
+				'h-12': size === Size.LG
+			},
+			'border-default-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
+			className
+		)
+	);
+
+	const inputClass = $derived(
+		cn('w-full bg-transparent outline-none disabled:cursor-not-allowed px-3', {
+			'text-sm': size === Size.SM,
+			'text-base': size === Size.BASE,
+			'text-lg': size === Size.LG
+		})
+	);
+
+	const dropdownClass = cn(
+		'absolute right-0 top-full z-50 mt-1 max-h-[200px] w-[100px] overflow-auto rounded-md border bg-white shadow-lg'
+	);
+
+	const iconClass = $derived(
+		cn('h-4 w-4 transition-transform', { 'rotate-180': showUnitDropdown })
+	);
+
+	function handleUnitSelect(selectedUnit: string) {
+		onUnitChange?.(unit, selectedUnit);
+		unit = selectedUnit;
+		showUnitDropdown = false;
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as Node;
+		if (containerRef && !containerRef.contains(target)) {
+			showUnitDropdown = false;
+		}
+	}
+
+	function handleUnitToggle() {
+		showUnitDropdown = !showUnitDropdown;
+	}
+</script>
+
+<svelte:window onclick={handleClickOutside} />
+
+<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} bind:this={containerRef}>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			class="text-default-500 ml-3 size-4 flex-shrink-0"
+		>
+			<path
+				fill="none"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M17 9V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2m2 4h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2m7-5a2 2 0 1 1-4 0a2 2 0 0 1 4 0"
+			/>
+		</svg>
+		<input
+			{name}
+			id={name}
+			bind:value
+			type="number"
+			{placeholder}
+			{disabled}
+			class={inputClass}
+			{...restProps}
+		/>
+
+		<button
+			type="button"
+			class="hover:bg-default-100 flex items-center gap-1 rounded px-1"
+			onclick={handleUnitToggle}
+			{disabled}
+		>
+			{#if selectedOption?.icon}
+				{@const Icon = selectedOption.icon}
+				<Icon />
+			{/if}
+			<span class="text-sm">{unit}</span>
+			{#if DropdownIcon}
+				<DropdownIcon class={iconClass} />
+			{:else}
+				<svg class={iconClass} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+				</svg>
+			{/if}
+		</button>
+
+		{#if showUnitDropdown}
+			<div class={dropdownClass}>
+				{#each units as unitOption}
+					<button
+						type="button"
+						class="hover:bg-default-100 w-full px-3 py-1.5 text-left text-sm"
+						class:bg-default-50={unit === unitOption.value}
+						onclick={() => handleUnitSelect(unitOption.value)}
+					>
+						<div class="flex items-center gap-2">
+							{#if unitOption.icon}
+								{@const Icon = unitOption.icon}
+								<Icon />
+							{/if}
+							{unitOption.value}
+						</div>
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	{#if errors?.length}
+		{#each errors as error}
+			<p class="text-danger-600 text-sm">{error}</p>
+		{/each}
+	{/if}
+</div>

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

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

package/dist/forms/RadioInputs.svelte

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

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

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

package/dist/forms/RadioPill.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import type { RadioPillProps } from '../index.js';
+
+	let {
+		options = [],
+		value = $bindable(options.length > 0 ? options[0].value : ''),
+		name = '',
+		class: className = '',
+		errors = [],
+		onchange = undefined,
+		label = ''
+	}: RadioPillProps = $props();
+
+	function handleSelect(optionValue: string) {
+		value = optionValue;
+		if (onchange) onchange(optionValue);
+	}
+
+	let pillDivRef: HTMLDivElement;	
+	const hasError = $derived(errors && errors.length > 0);
+
+	$effect(() => {
+		if (errors.length) {
+			pillDivRef.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		}
+	});
+</script>
+
+<div class={cn('flex flex-col space-y-2', className)} bind:this={pillDivRef}>
+	{#if hasError}
+		<div class="text-danger-500 text-sm">{errors[0]}</div>
+	{/if}
+	{#if label}
+		<label
+			class={cn('text-sm font-medium', hasError ? 'text-danger-500' : 'text-default-700')}
+			for={value}>{label}</label
+		>
+	{/if}
+	<div class="inline-flex flex-wrap gap-2">
+		{#each options as option}
+			<button
+				id={option.value}
+				type="button"
+				onclick={() => handleSelect(option.value)}
+				class={cn(
+					'border-default-200 cursor-pointer rounded-lg border px-4 py-2 text-sm font-medium transition-all',
+					{
+						'border-info-600 bg-info-600 text-white': value === option.value && !hasError,
+						'border-danger-500 bg-danger-500 text-white': value === option.value && hasError,
+						'text-default-800 hover:border-default-300 bg-white':
+							value !== option.value && !hasError,
+						'border-danger-500 text-danger-500 hover:bg-danger-50':
+							value !== option.value && hasError,
+						'text-default-400': value !== option.value && option.value === '128' && !hasError
+					}
+				)}
+				aria-pressed={value === option.value}
+			>
+				{option.label}
+			</button>
+		{/each}
+	</div>
+</div>
+
+<input type="hidden" {name} {value} />

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

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