@dryui/ui 0.0.1

package/dist/splitter/splitter-root.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setSplitterCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		orientation?: 'horizontal' | 'vertical';
+		sizes?: number[];
+		children: Snippet;
+	}
+
+	let {
+		orientation = 'horizontal',
+		sizes = $bindable([50, 50]),
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let resizingIndex = $state(-1);
+	let startPos = 0;
+	let startSizes: number[] = [];
+
+	const trackTemplate = $derived.by(() =>
+		sizes
+			.map((size, index) => {
+				const track = `minmax(0, ${Math.max(size, 0.01)}fr)`;
+				return index < sizes.length - 1 ? `${track} max-content` : track;
+			})
+			.join(' ')
+	);
+
+	function applyGridTemplate(node: HTMLElement) {
+		$effect(() => {
+			if (orientation === 'vertical') {
+				node.style.gridTemplateColumns = '';
+				node.style.gridTemplateRows = trackTemplate;
+			} else {
+				node.style.gridTemplateRows = '';
+				node.style.gridTemplateColumns = trackTemplate;
+			}
+		});
+	}
+
+	function startResize(index: number, event: PointerEvent) {
+		resizingIndex = index;
+		startPos = orientation === 'horizontal' ? event.clientX : event.clientY;
+		startSizes = [...sizes];
+		(event.target as HTMLElement).setPointerCapture(event.pointerId);
+	}
+
+	function onPointerMove(event: PointerEvent) {
+		if (resizingIndex < 0) return;
+		const rootEl = event.currentTarget as HTMLElement;
+		const rect = rootEl.getBoundingClientRect();
+		const totalSize = orientation === 'horizontal' ? rect.width : rect.height;
+		const currentPos = orientation === 'horizontal' ? event.clientX : event.clientY;
+		const delta = currentPos - startPos;
+		const deltaPercent = (delta / totalSize) * 100;
+
+		const newSizes = [...startSizes];
+		const minSize = 10;
+		const newLeft = (startSizes[resizingIndex] ?? 0) + deltaPercent;
+		const newRight = (startSizes[resizingIndex + 1] ?? 0) - deltaPercent;
+
+		if (newLeft >= minSize && newRight >= minSize) {
+			newSizes[resizingIndex] = newLeft;
+			newSizes[resizingIndex + 1] = newRight;
+			sizes = newSizes;
+		}
+	}
+
+	function onPointerUp() {
+		resizingIndex = -1;
+	}
+
+	let panelCount = 0;
+	let handleCount = 0;
+
+	setSplitterCtx({
+		get orientation() {
+			return orientation;
+		},
+		get sizes() {
+			return sizes;
+		},
+		setSizes(newSizes: number[]) {
+			sizes = newSizes;
+		},
+		startResize,
+		nextPanelIndex() {
+			return panelCount++;
+		},
+		nextHandleIndex() {
+			return handleCount++;
+		}
+	});
+</script>
+
+<div
+	{@attach applyGridTemplate}
+	data-part="root"
+	data-orientation={orientation}
+	class={className}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-part='root'] {
+		display: grid;
+		grid-auto-flow: column;
+		height: 100%;
+		min-height: 0;
+		align-items: stretch;
+	}
+
+	[data-part='root'][data-orientation='vertical'] {
+		grid-auto-flow: row;
+	}
+</style>

package/dist/splitter/splitter-root.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+	orientation?: 'horizontal' | 'vertical';
+	sizes?: number[];
+	children: Snippet;
+}
+declare const SplitterRoot: import('svelte').Component<Props, {}, 'sizes'>;
+type SplitterRoot = ReturnType<typeof SplitterRoot>;
+export default SplitterRoot;

package/dist/spotlight/index.d.ts

@@ -0,0 +1,3 @@
+import type { SpotlightProps as PrimitiveSpotlightProps } from '@dryui/primitives/spotlight';
+export interface SpotlightProps extends PrimitiveSpotlightProps {}
+export { default as Spotlight } from './spotlight.svelte';

package/dist/spotlight/index.js

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

package/dist/spotlight/spotlight.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		observeReducedMotionPreference,
+		supportsPointerTracking,
+		registerPropertyOnce
+	} from '@dryui/primitives/internal/motion';
+	import type { BlendMode } from '@dryui/primitives/spotlight';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		radius?: number;
+		intensity?: number;
+		color?: string;
+		followPointer?: boolean;
+		blendMode?: BlendMode;
+		children: Snippet;
+	}
+
+	let {
+		radius = 260,
+		intensity = 26,
+		color = 'rgba(59, 130, 246, 0.28)',
+		followPointer = true,
+		blendMode,
+		children,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	let element = $state<HTMLDivElement | null>(null);
+	let x = $state('50%');
+	let y = $state('50%');
+	let active = $state(false);
+	let prefersReducedMotion = $state(false);
+
+	function captureElement(node: HTMLDivElement) {
+		element = node;
+		return {
+			destroy() {
+				if (element === node) element = null;
+			}
+		};
+	}
+
+	function centerSpotlight() {
+		x = '50%';
+		y = '50%';
+	}
+
+	function canTrackPointer(): boolean {
+		return followPointer && !prefersReducedMotion && supportsPointerTracking();
+	}
+
+	function updateFromClientPoint(clientX: number, clientY: number) {
+		if (!element) return;
+		const rect = element.getBoundingClientRect();
+		x = `${clientX - rect.left}px`;
+		y = `${clientY - rect.top}px`;
+	}
+
+	function handlePointerEnter(event: PointerEvent) {
+		if (!canTrackPointer()) return;
+		active = true;
+		updateFromClientPoint(event.clientX, event.clientY);
+	}
+
+	function handlePointerMove(event: PointerEvent) {
+		if (!canTrackPointer()) return;
+		active = true;
+		updateFromClientPoint(event.clientX, event.clientY);
+	}
+
+	function handlePointerLeave() {
+		active = prefersReducedMotion || !followPointer;
+		centerSpotlight();
+	}
+
+	function handleFocusIn() {
+		active = true;
+		centerSpotlight();
+	}
+
+	function handleFocusOut() {
+		active = prefersReducedMotion || !followPointer;
+	}
+
+	onMount(() => {
+		registerPropertyOnce({
+			name: '--dry-spotlight-x',
+			syntax: '<length-percentage>',
+			inherits: false,
+			initialValue: '50%'
+		});
+		registerPropertyOnce({
+			name: '--dry-spotlight-y',
+			syntax: '<length-percentage>',
+			inherits: false,
+			initialValue: '50%'
+		});
+
+		return observeReducedMotionPreference((matches) => {
+			prefersReducedMotion = matches;
+			active = matches || !followPointer;
+			centerSpotlight();
+		});
+	});
+
+	const radiusValue = $derived(`${Math.max(0, radius)}px`);
+	const intensityValue = $derived.by(() => {
+		const normalized = intensity <= 1 ? intensity * 100 : intensity;
+		return `${Math.max(0, Math.min(100, normalized))}%`;
+	});
+	let staticSpotlight = $state(true);
+
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			staticSpotlight = prefersReducedMotion || !followPointer || !supportsPointerTracking();
+		}
+	});
+
+	function applyStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = style || '';
+			node.style.setProperty('--dry-spotlight-radius', radiusValue);
+			node.style.setProperty('--dry-spotlight-intensity', intensityValue);
+			node.style.setProperty('--dry-spotlight-color', color);
+			node.style.setProperty('--dry-spotlight-x', x);
+			node.style.setProperty('--dry-spotlight-y', y);
+			if (blendMode) node.style.setProperty('--dry-spotlight-blend', blendMode);
+		});
+	}
+</script>
+
+<div
+	{@attach captureElement}
+	class={className}
+	data-spotlight
+	data-active={active || undefined}
+	data-static={staticSpotlight || undefined}
+	data-follow-pointer={!staticSpotlight || undefined}
+	onpointerenter={handlePointerEnter}
+	onpointermove={handlePointerMove}
+	onpointerleave={handlePointerLeave}
+	onfocusin={handleFocusIn}
+	onfocusout={handleFocusOut}
+	use:applyStyles
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-spotlight] {
+		position: relative;
+		isolation: isolate;
+		overflow: hidden;
+		border-radius: inherit;
+	}
+
+	[data-spotlight]::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		mix-blend-mode: var(--dry-spotlight-blend, normal);
+		background:
+			radial-gradient(
+				circle var(--dry-spotlight-radius, 260px) at var(--dry-spotlight-x, 50%)
+					var(--dry-spotlight-y, 50%),
+				color-mix(
+						in srgb,
+						var(--dry-spotlight-color, rgba(59, 130, 246, 0.28)) var(--dry-spotlight-intensity, 26%),
+						transparent
+					)
+					0%,
+				color-mix(
+						in srgb,
+						var(--dry-spotlight-color, rgba(59, 130, 246, 0.28))
+							calc(var(--dry-spotlight-intensity, 26%) * 0.72),
+						transparent
+					)
+					28%,
+				color-mix(
+						in srgb,
+						var(--dry-spotlight-color, rgba(59, 130, 246, 0.28))
+							calc(var(--dry-spotlight-intensity, 26%) * 0.38),
+						transparent
+					)
+					52%,
+				color-mix(
+						in srgb,
+						var(--dry-spotlight-color, rgba(59, 130, 246, 0.28))
+							calc(var(--dry-spotlight-intensity, 26%) * 0.12),
+						transparent
+					)
+					76%,
+				transparent 100%
+			),
+			radial-gradient(
+				circle calc(var(--dry-spotlight-radius, 260px) * 0.3) at var(--dry-spotlight-x, 50%)
+					var(--dry-spotlight-y, 50%),
+				rgba(255, 255, 255, 0.12) 0%,
+				rgba(255, 255, 255, 0.04) 50%,
+				transparent 100%
+			);
+		opacity: 0;
+		transform: scale(1.02);
+		transition:
+			opacity var(--dry-duration-normal, 200ms) var(--dry-ease-out, ease),
+			transform var(--dry-duration-normal, 200ms) var(--dry-ease-out, ease),
+			--dry-spotlight-x 60ms ease-out,
+			--dry-spotlight-y 60ms ease-out;
+		will-change: opacity, transform;
+	}
+
+	[data-spotlight][data-active]::before,
+	[data-spotlight][data-static]::before {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	[data-spotlight][data-static]::before {
+		opacity: 0.88;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-spotlight]::before {
+			transition: none;
+			transform: none;
+		}
+	}
+</style>

package/dist/spotlight/spotlight.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type SpotlightProps as PrimitiveSpotlightProps } from '@dryui/primitives/spotlight';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+	radius?: PrimitiveSpotlightProps['radius'];
+	intensity?: PrimitiveSpotlightProps['intensity'];
+	color?: PrimitiveSpotlightProps['color'];
+	followPointer?: PrimitiveSpotlightProps['followPointer'];
+	blendMode?: PrimitiveSpotlightProps['blendMode'];
+	children: PrimitiveSpotlightProps['children'];
+}
+declare const Spotlight: import('svelte').Component<Props, {}, ''>;
+type Spotlight = ReturnType<typeof Spotlight>;
+export default Spotlight;

package/dist/star-rating/index.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface StarRatingRootProps extends HTMLAttributes<HTMLDivElement> {
+	stars: number;
+	label?: string;
+	size?: 'sm' | 'md' | 'lg';
+	variant?: 'filled' | 'outlined';
+}
+import StarRatingRoot from './star-rating-root.svelte';
+export declare const StarRating: {
+	Root: typeof StarRatingRoot;
+};

package/dist/star-rating/index.js

@@ -0,0 +1,4 @@
+import StarRatingRoot from './star-rating-root.svelte';
+export const StarRating = {
+    Root: StarRatingRoot
+};

package/dist/star-rating/star-rating-root.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		stars: number;
+		label?: string;
+		size?: 'sm' | 'md' | 'lg';
+		variant?: 'filled' | 'outlined';
+	}
+
+	let {
+		stars,
+		label,
+		size = 'md',
+		variant = 'filled',
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const clampedStars = $derived(Math.max(0, Math.min(5, Math.round(stars))));
+	const starIndexes = [0, 1, 2, 3, 4];
+	const starPath =
+		'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z';
+</script>
+
+<div
+	data-star-rating
+	data-size={size}
+	class={className}
+	aria-label="{clampedStars} star hotel{label ? `, ${label}` : ''}"
+	role="img"
+	{...rest}
+>
+	<span data-stars>
+		{#each starIndexes as i (i)}
+			<svg viewBox="0 0 24 24" aria-hidden="true">
+				<path
+					d={starPath}
+					data-star={i < clampedStars
+						? variant === 'outlined'
+							? 'outlined-active'
+							: 'filled'
+						: 'outlined'}
+				/>
+			</svg>
+		{/each}
+	</span>
+	{#if label}
+		<span data-label>{label}</span>
+	{/if}
+</div>
+
+<style>
+	[data-star-rating] {
+		--dry-star-rating-color: #f59e0b;
+		--dry-star-rating-size: 1.25rem;
+
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+	}
+
+	[data-size='sm'] {
+		--dry-star-rating-size: 1rem;
+	}
+
+	[data-size='lg'] {
+		--dry-star-rating-size: 1.75rem;
+	}
+
+	[data-stars] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-star-rating-gap, var(--dry-space-1));
+	}
+
+	[data-stars] svg {
+		aspect-ratio: 1;
+		height: var(--dry-star-rating-size);
+		display: block;
+	}
+
+	[data-star='filled'] {
+		fill: var(--dry-star-rating-color);
+		stroke: var(--dry-star-rating-color);
+		stroke-width: 1;
+	}
+
+	[data-star='outlined'] {
+		fill: none;
+		stroke: var(--dry-star-rating-outline-color, var(--dry-color-stroke-weak));
+		stroke-width: 1.5;
+	}
+
+	[data-star='outlined-active'] {
+		fill: none;
+		stroke: var(--dry-star-rating-color);
+		stroke-width: 1.5;
+	}
+
+	[data-label] {
+		font-size: var(--dry-type-small-size);
+		color: var(--dry-star-rating-label-color, var(--dry-color-text-weak));
+		font-weight: 500;
+	}
+</style>

package/dist/star-rating/star-rating-root.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+	stars: number;
+	label?: string;
+	size?: 'sm' | 'md' | 'lg';
+	variant?: 'filled' | 'outlined';
+}
+declare const StarRatingRoot: import('svelte').Component<Props, {}, ''>;
+type StarRatingRoot = ReturnType<typeof StarRatingRoot>;
+export default StarRatingRoot;

package/dist/stepper/context.svelte.d.ts

@@ -0,0 +1,8 @@
+interface StepperContext {
+    readonly activeStep: number;
+    readonly orientation: 'horizontal' | 'vertical';
+    isStepComplete: (index: number) => boolean;
+    isStepActive: (index: number) => boolean;
+}
+export declare const setStepperCtx: (ctx: StepperContext) => StepperContext, getStepperCtx: () => StepperContext;
+export {};

package/dist/stepper/context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '@dryui/primitives';
+export const [setStepperCtx, getStepperCtx] = createContext('stepper');

package/dist/stepper/index.d.ts

@@ -0,0 +1,16 @@
+export type {
+	StepperRootProps,
+	StepperListProps,
+	StepperStepProps,
+	StepperSeparatorProps
+} from '@dryui/primitives';
+import StepperRoot from './stepper-root.svelte';
+import StepperList from './stepper-list.svelte';
+import StepperStep from './stepper-step.svelte';
+import StepperSeparator from './stepper-separator.svelte';
+export declare const Stepper: {
+	Root: typeof StepperRoot;
+	List: typeof StepperList;
+	Step: typeof StepperStep;
+	Separator: typeof StepperSeparator;
+};

package/dist/stepper/index.js

@@ -0,0 +1,10 @@
+import StepperRoot from './stepper-root.svelte';
+import StepperList from './stepper-list.svelte';
+import StepperStep from './stepper-step.svelte';
+import StepperSeparator from './stepper-separator.svelte';
+export const Stepper = {
+    Root: StepperRoot,
+    List: StepperList,
+    Step: StepperStep,
+    Separator: StepperSeparator
+};

package/dist/stepper/stepper-list.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getStepperCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLOListElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getStepperCtx();
+</script>
+
+<ol role="list" data-part="list" data-orientation={ctx.orientation} class={className} {...rest}>
+	{@render children()}
+</ol>
+
+<style>
+	[data-part='list'] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: 0;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	[data-part='list'][data-orientation='vertical'] {
+		grid-auto-flow: row;
+		grid-auto-rows: auto;
+		grid-auto-columns: unset;
+		align-items: stretch;
+	}
+</style>

package/dist/stepper/stepper-list.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLOListElement> {
+	children: Snippet;
+}
+declare const StepperList: import('svelte').Component<Props, {}, ''>;
+type StepperList = ReturnType<typeof StepperList>;
+export default StepperList;

package/dist/stepper/stepper-root.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setStepperCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		activeStep?: number;
+		orientation?: 'horizontal' | 'vertical';
+		children: Snippet;
+	}
+
+	let {
+		activeStep = $bindable(0),
+		orientation = 'horizontal',
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	setStepperCtx({
+		get activeStep() {
+			return activeStep;
+		},
+		get orientation() {
+			return orientation;
+		},
+		isStepComplete(index: number) {
+			return index < activeStep;
+		},
+		isStepActive(index: number) {
+			return index === activeStep;
+		}
+	});
+</script>
+
+<div
+	role="group"
+	aria-label="Progress"
+	data-part="root"
+	data-orientation={orientation}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-part='root'] {
+		--dry-stepper-connector-width: 1px;
+	}
+</style>

package/dist/stepper/stepper-root.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+	activeStep?: number;
+	orientation?: 'horizontal' | 'vertical';
+	children: Snippet;
+}
+declare const StepperRoot: import('svelte').Component<Props, {}, 'activeStep'>;
+type StepperRoot = ReturnType<typeof StepperRoot>;
+export default StepperRoot;