@x33025/sveltely 0.0.57 → 0.1.0

package/dist/components/Library/TextShimmer/TextShimmer.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	interface Props {
+		text: string;
+		as?: keyof HTMLElementTagNameMap;
+		duration?: number;
+		spread?: number;
+	}
+
+	let {
+		text,
+		as = 'span',
+		duration = 2,
+		spread = 2,
+		...restProps
+	}: Props & StyleProps & Record<string, unknown> = $props();
+
+	let dynamicSpread = $derived(text.length * spread);
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const shimmerStyle = $derived.by(() => {
+		const declarations = [
+			`--spread: ${dynamicSpread}px;`,
+			`animation-duration: ${duration}s;`,
+			'background-image: var(--bg), linear-gradient(var(--base-color), var(--base-color));'
+		];
+		const stylePropDeclarations = surfaceStyle(styleProps, 'text-shimmer');
+
+		if (stylePropDeclarations) {
+			declarations.push(stylePropDeclarations);
+		}
+
+		return declarations.join(' ');
+	});
+</script>
+
+<svelte:element
+	this={as}
+	class="text-shimmer"
+	style={shimmerStyle}
+	{...props}
+>
+	{text}
+</svelte:element>
+
+<style>
+	@keyframes shimmer {
+		0% {
+			background-position: 100% center;
+		}
+		100% {
+			background-position: 0% center;
+		}
+	}
+
+	:global(.text-shimmer) {
+		--text-shimmer-font-size: var(--sveltely-font-size);
+		position: relative;
+		display: inline-block;
+		width: max-content;
+		max-width: 100%;
+		font-size: var(--text-shimmer-font-size);
+		line-height: 1.1;
+		background-size:
+			250% 100%,
+			auto;
+		background-clip: text;
+		-webkit-background-clip: text;
+		color: transparent;
+		--base-color: #a1a1aa;
+		--base-gradient-color: #000;
+		background-repeat: no-repeat, padding-box;
+		--bg: linear-gradient(
+			90deg,
+			#0000 calc(50% - var(--spread)),
+			var(--base-gradient-color),
+			#0000 calc(50% + var(--spread))
+		);
+		animation: shimmer linear infinite;
+	}
+
+	:global(.dark .text-shimmer) {
+		--base-color: #71717a;
+		--base-gradient-color: #ffffff;
+	}
+</style>

package/dist/components/Library/TextShimmer/TextShimmer.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type StyleProps } from '../../../style/surface';
+interface Props {
+    text: string;
+    as?: keyof HTMLElementTagNameMap;
+    duration?: number;
+    spread?: number;
+}
+type $$ComponentProps = Props & StyleProps & Record<string, unknown>;
+declare const TextShimmer: import("svelte").Component<$$ComponentProps, {}, "">;
+type TextShimmer = ReturnType<typeof TextShimmer>;
+export default TextShimmer;

package/dist/components/Library/TextShimmer/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TextShimmer.svelte';

package/dist/components/Library/TextShimmer/index.js

@@ -0,0 +1 @@
+export { default } from './TextShimmer.svelte';

package/dist/components/Library/TimePicker/TimePicker.demo.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'TimePicker',
+		description: 'Wheel-based time picker with hour, minute, and period columns.',
+		columnSpan: 1,
+		rowSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import TimePicker from './TimePicker.svelte';
+
+	let value = $state<Date | null>(new Date());
+</script>
+
+<div class="vstack gap-4">
+	<TimePicker bind:value />
+</div>

package/dist/components/Library/TimePicker/TimePicker.demo.svelte.d.ts

@@ -0,0 +1,10 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+    rowSpan: number;
+};
+import TimePicker from './TimePicker.svelte';
+declare const TimePicker: import("svelte").Component<Record<string, never>, {}, "">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

package/dist/components/Library/TimePicker/TimePicker.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import WheelPicker from '../WheelPicker';
+	import type { WheelColumn, WheelOption } from '../WheelPicker';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	export type TimeMeridiem = 'AM' | 'PM';
+
+	type Props = {
+		value?: Date | null;
+		minuteStep?: number;
+		height?: number | string;
+		hourLabel?: string;
+		minuteLabel?: string;
+		periodLabel?: string;
+	} & StyleProps & Record<string, unknown>;
+
+	const meridiemOptions: TimeMeridiem[] = ['AM', 'PM'];
+
+	const clampMinuteStep = (value: number) => {
+		const normalized = Math.max(1, Math.floor(value));
+		return normalized > 60 ? 60 : normalized;
+	};
+
+	const hourOptions: WheelOption<number>[] = Array.from({ length: 12 }, (_, index) => ({
+		value: index + 1,
+		label: String(index + 1).padStart(2, '0')
+	}));
+	const periodOptions: WheelOption<TimeMeridiem>[] = meridiemOptions.map((value) => ({
+		value,
+		label: value
+	}));
+	const getHour12 = (value: Date) => {
+		const hour = value.getHours() % 12;
+		return hour === 0 ? 12 : hour;
+	};
+
+	const getMeridiem = (value: Date): TimeMeridiem => (value.getHours() >= 12 ? 'PM' : 'AM');
+
+	const to24Hour = (hour12: number, meridiem: TimeMeridiem) => {
+		if (meridiem === 'AM') {
+			return hour12 === 12 ? 0 : hour12;
+		}
+		return hour12 === 12 ? 12 : hour12 + 12;
+	};
+
+	const toCssLength = (value: number | string | undefined) =>
+		value === undefined ? undefined : typeof value === 'number' ? `${value}px` : value;
+
+	let {
+		value = $bindable<Date | null>(new Date()),
+		minuteStep = 1,
+		height,
+		hourLabel = 'Hour',
+		minuteLabel = 'Minute',
+		periodLabel = 'Period',
+		...restProps
+	}: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'time-picker'));
+	const resolvedMinuteStep = $derived(clampMinuteStep(minuteStep));
+	const minuteOptions = $derived.by<WheelOption<number>[]>(() =>
+		Array.from({ length: Math.ceil(60 / resolvedMinuteStep) }, (_, index) => {
+			const nextValue = Math.min(index * resolvedMinuteStep, 59);
+			return {
+				value: nextValue,
+				label: String(nextValue).padStart(2, '0')
+			};
+		})
+	);
+	const activeDateTime = $derived(value ?? new Date());
+	const selectedHour = $derived(getHour12(activeDateTime));
+	const selectedMinute = $derived.by(() => {
+		const currentMinute = activeDateTime.getMinutes();
+		const match = minuteOptions.find((option) => option.value === currentMinute);
+		return match ? match.value : minuteOptions[0]?.value ?? 0;
+	});
+	const selectedMeridiem = $derived(getMeridiem(activeDateTime));
+	const pickerStyle = $derived.by(() => {
+		const resolvedHeight = toCssLength(height);
+		if (!resolvedHeight) return rootStyle;
+		const heightStyle = `--time-picker-height: ${resolvedHeight};`;
+		return rootStyle ? `${rootStyle} ${heightStyle}` : heightStyle;
+	});
+
+	const updateTime = (hour12: number, minute: number, meridiem: TimeMeridiem) => {
+		const base = activeDateTime;
+		value = new Date(
+			base.getFullYear(),
+			base.getMonth(),
+			base.getDate(),
+			to24Hour(hour12, meridiem),
+			minute,
+			0,
+			0
+		);
+	};
+	const columns = $derived.by<WheelColumn[]>(() => [
+		{
+			label: hourLabel,
+			value: selectedHour,
+			options: hourOptions,
+			onChange: (hour) => updateTime(hour as number, selectedMinute, selectedMeridiem)
+		},
+		{
+			label: minuteLabel,
+			value: selectedMinute,
+			options: minuteOptions,
+			onChange: (minute) => updateTime(selectedHour, minute as number, selectedMeridiem)
+		},
+		{
+			label: periodLabel,
+			value: selectedMeridiem,
+			options: periodOptions,
+			onChange: (meridiem) =>
+				updateTime(selectedHour, selectedMinute, meridiem as TimeMeridiem)
+		}
+	]);
+
+</script>
+
+<div class="time-picker" style={pickerStyle} {...props}>
+	<WheelPicker columns={columns} height="100%" />
+</div>
+
+<style>
+	:global(.time-picker) {
+		--wheel-picker-font-size: var(--sveltely-font-size);
+		--wheel-picker-scale: calc(var(--wheel-picker-font-size) / 1rem);
+		--wheel-picker-option-height: calc(
+			(calc(var(--wheel-picker-font-size) * 0.875) * 1.2) +
+				(calc(var(--sveltely-padding-y) * 0.67 * var(--wheel-picker-scale)) * 2) + 2px
+		);
+		height: var(--time-picker-height, calc(var(--wheel-picker-option-height) * 10));
+	}
+
+	:global(.time-picker .wheel-picker-label-column:last-child),
+	:global(.time-picker .wheel-picker-column:last-child) {
+		--wheel-picker-column-flex: 0.85;
+	}
+</style>

package/dist/components/Library/TimePicker/TimePicker.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type StyleProps } from '../../../style/surface';
+export type TimeMeridiem = 'AM' | 'PM';
+type Props = {
+    value?: Date | null;
+    minuteStep?: number;
+    height?: number | string;
+    hourLabel?: string;
+    minuteLabel?: string;
+    periodLabel?: string;
+} & StyleProps & Record<string, unknown>;
+declare const TimePicker: import("svelte").Component<Props, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

package/dist/components/Library/TimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TimePicker.svelte';
+export type { TimeMeridiem } from './TimePicker.svelte';

package/dist/components/Library/TimePicker/index.js

@@ -0,0 +1 @@
+export { default } from './TimePicker.svelte';

package/dist/components/Library/TokenSearchInput/TokenSearchInput.demo.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'TokenSearchInput',
+		description: 'Search field that turns comma-separated entries into removable tokens.',
+		columnSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import TokenSearchInput from './TokenSearchInput.svelte';
+
+	let tokens = $state(['svelte', 'ui']);
+	let value = $state('');
+</script>
+
+<div class="vstack w-full max-w-md gap-2">
+	<TokenSearchInput bind:tokens bind:value placeholder="Search keywords" />
+	<p class="text-xs text-zinc-500">Tokens: {tokens.join(', ') || 'empty'}</p>
+</div>

package/dist/components/Library/TokenSearchInput/TokenSearchInput.demo.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+};
+import TokenSearchInput from './TokenSearchInput.svelte';
+declare const TokenSearchInput: import("svelte").Component<Record<string, never>, {}, "">;
+type TokenSearchInput = ReturnType<typeof TokenSearchInput>;
+export default TokenSearchInput;

package/dist/components/Library/TokenSearchInput/TokenSearchInput.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+	import { SearchIcon, X } from '@lucide/svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		tokens?: string[];
+		value?: string;
+		confirmText?: string | null;
+		placeholder?: string;
+		tokenPlaceholder?: string;
+		normalizeToken?: (value: string) => string;
+		showIcon?: boolean;
+	} & StyleProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'placeholder' | 'class' | 'style'>;
+
+	const defaultNormalizeToken = (value: string) => value.trim().replace(/\s+/g, ' ');
+
+	let {
+		tokens = $bindable<string[]>([]),
+		value = $bindable(''),
+		confirmText = null,
+		placeholder = 'Search',
+		tokenPlaceholder = 'Add search token',
+		normalizeToken = defaultNormalizeToken,
+		showIcon = false,
+		disabled = false,
+		...restProps
+	}: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'token-search-input'));
+
+	const addToken = (rawValue: string) => {
+		const token = normalizeToken(rawValue);
+		if (!token || tokens.includes(token)) return;
+		tokens = [...tokens, token];
+	};
+
+	const commitValue = () => {
+		addToken(value);
+		value = '';
+	};
+
+	const removeToken = (index: number) => {
+		if (index < 0 || index >= tokens.length) return;
+		tokens = tokens.filter((_, currentIndex) => currentIndex !== index);
+	};
+
+	const onKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Enter' || event.key === ',') {
+			event.preventDefault();
+			commitValue();
+			return;
+		}
+
+		if (event.key === 'Backspace' && value.length === 0 && tokens.length > 0) {
+			event.preventDefault();
+			tokens = tokens.slice(0, -1);
+		}
+	};
+
+	const onPaste = (event: ClipboardEvent) => {
+		const pasted = event.clipboardData?.getData('text') ?? '';
+		if (!pasted.includes(',')) return;
+
+		event.preventDefault();
+
+		const nextTokens = [...tokens];
+		const seen = new Set(nextTokens);
+		for (const part of pasted.split(',')) {
+			const token = normalizeToken(part);
+			if (!token || seen.has(token)) continue;
+			nextTokens.push(token);
+			seen.add(token);
+		}
+
+		tokens = nextTokens;
+		value = '';
+	};
+</script>
+
+	<div
+		class="token-search-input hstack w-full flex-nowrap items-center overflow-x-auto overflow-y-hidden whitespace-nowrap"
+		class:token-search-input-has-tokens={tokens.length > 0}
+		style={rootStyle}
+		data-disabled={disabled ? 'true' : 'false'}
+	>
+	{#if showIcon}
+		<span class="token-search-input-icon" aria-hidden="true">
+			<SearchIcon class="token-search-input-search-icon" />
+		</span>
+	{/if}
+
+	{#each tokens as token, index (`${token}-${index}`)}
+		<button
+			type="button"
+			class="token-search-input-token"
+			onclick={() => removeToken(index)}
+			aria-label={`Remove search token ${token}`}
+			{disabled}
+		>
+			<span>{token}</span>
+			<X class="token-search-input-remove-icon" aria-hidden="true" />
+		</button>
+	{/each}
+
+	<input
+		type="search"
+		bind:value
+		{disabled}
+		placeholder={tokens.length === 0 ? placeholder : tokenPlaceholder}
+		class="token-search-input-field"
+		onkeydown={onKeydown}
+		onpaste={onPaste}
+		onblur={commitValue}
+		{...props}
+	/>
+
+	{#if confirmText}
+		<span class="token-search-input-confirm">
+			{confirmText}
+		</span>
+	{/if}
+</div>
+
+<style>
+	.token-search-input {
+		--token-search-input-inset: var(--sveltely-inset);
+		--token-search-input-font-size: calc(var(--sveltely-font-size) * 0.875);
+		--token-search-input-scale: calc(var(--token-search-input-font-size) / 0.875rem);
+		--token-search-input-line-height: calc(var(--token-search-input-font-size) * 1.429);
+		--token-search-input-search-icon-size: calc(var(--token-search-input-font-size) * 1.143);
+		--token-search-input-remove-icon-size: calc(var(--token-search-input-font-size) * 0.857);
+		--token-search-input-confirm-font-size: calc(var(--token-search-input-font-size) * 0.857);
+		--sveltely-nested-inset: var(--token-search-input-inset);
+		min-width: 0;
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		color: var(--color-zinc-900);
+		gap: var(--token-search-input-inset);
+		padding:
+			calc(var(--sveltely-padding-y) * 0.58 * var(--token-search-input-scale))
+			calc(var(--sveltely-padding-x) * var(--token-search-input-scale));
+		font-size: var(--token-search-input-font-size);
+		line-height: var(--token-search-input-line-height);
+		outline: none;
+		transition: color 150ms, border-color 150ms, background-color 150ms, box-shadow 150ms;
+	}
+
+	.token-search-input:focus-within {
+		border-color: color-mix(in oklab, var(--sveltely-primary-color) 50%, white);
+	}
+
+	.token-search-input-has-tokens {
+		padding: var(--token-search-input-inset);
+	}
+
+	.token-search-input[data-disabled='true'] {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.token-search-input-icon {
+		flex-shrink: 0;
+		color: var(--color-zinc-500);
+	}
+
+	:global(.token-search-input-search-icon) {
+		width: var(--token-search-input-search-icon-size);
+		height: var(--token-search-input-search-icon-size);
+	}
+
+	.token-search-input-field {
+		field-sizing: content;
+		min-width: 0;
+		flex: 1 1 auto;
+		background: transparent;
+		outline: none;
+	}
+
+	.token-search-input-field::-webkit-search-cancel-button {
+		appearance: none;
+	}
+
+	.token-search-input-token {
+		display: inline-flex;
+		flex-shrink: 0;
+		align-items: center;
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius-nested);
+		background: var(--color-zinc-100);
+		color: var(--color-zinc-700);
+		font-size: inherit;
+		line-height: inherit;
+		gap: calc(var(--sveltely-padding-x) * 0.66 * var(--token-search-input-scale));
+		padding:
+			calc(var(--sveltely-padding-y) * 0.17 * var(--token-search-input-scale))
+			calc(var(--sveltely-padding-y) * 0.33 * var(--token-search-input-scale))
+			calc(var(--sveltely-padding-y) * 0.17 * var(--token-search-input-scale))
+			calc(var(--sveltely-padding-x) * 0.66 * var(--token-search-input-scale));
+		transition: color 150ms, border-color 150ms, background-color 150ms;
+	}
+
+	:global(.token-search-input-remove-icon) {
+		width: var(--token-search-input-remove-icon-size);
+		height: var(--token-search-input-remove-icon-size);
+	}
+
+	.token-search-input-token:hover:not(:disabled) {
+		border-color: var(--color-zinc-300);
+		background: var(--sveltely-hover-color);
+	}
+
+	.token-search-input-token:disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.token-search-input-confirm {
+		flex-shrink: 0;
+		color: var(--color-zinc-500);
+		font-size: var(--token-search-input-confirm-font-size);
+		font-weight: 500;
+		line-height: calc(var(--token-search-input-confirm-font-size) * 1.333);
+		letter-spacing: 0.18em;
+		text-transform: uppercase;
+	}
+</style>

package/dist/components/Library/TokenSearchInput/TokenSearchInput.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    tokens?: string[];
+    value?: string;
+    confirmText?: string | null;
+    placeholder?: string;
+    tokenPlaceholder?: string;
+    normalizeToken?: (value: string) => string;
+    showIcon?: boolean;
+} & StyleProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'placeholder' | 'class' | 'style'>;
+declare const TokenSearchInput: import("svelte").Component<Props, {}, "value" | "tokens">;
+type TokenSearchInput = ReturnType<typeof TokenSearchInput>;
+export default TokenSearchInput;

package/dist/components/Library/TokenSearchInput/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TokenSearchInput.svelte';

package/dist/components/Library/TokenSearchInput/index.js

@@ -0,0 +1 @@
+export { default } from './TokenSearchInput.svelte';

package/dist/components/Library/Tooltip/Tooltip.demo.svelte

@@ -0,0 +1,14 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Tooltip',
+		description: 'Hover or focus a trigger to reveal contextual text.'
+	};
+</script>
+
+<script lang="ts">
+	import { tooltip } from '../../../actions/tooltip';
+</script>
+
+<button type="button" class="action" use:tooltip={'This is a tooltip'}>
+	Hover me
+</button>

package/dist/components/{Tooltip.demo.svelte.d.ts → Library/Tooltip/Tooltip.demo.svelte.d.ts}

@@ -2,7 +2,6 @@ export declare const demo: {
     name: string;
     description: string;
 };
-import Tooltip from './Tooltip.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/Library/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { tooltip } from '../../../actions/tooltip';
+export type { TooltipOptions } from '../../../actions/tooltip';

package/dist/components/Library/Tooltip/index.js

@@ -0,0 +1 @@
+export { tooltip } from '../../../actions/tooltip';