@dryui/ui 0.0.1

package/dist/thumbnail/qr-code.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+	import { Svg } from '@dryui/primitives';
+	import { applySizeVars } from './apply-size.js';
+
+	interface Props {
+		size?: 'sm' | 'md' | 'lg' | number;
+		class?: string;
+	}
+
+	let { size = 'md', class: className }: Props = $props();
+</script>
+
+<span
+	data-thumbnail
+	data-size={typeof size === 'string' ? size : undefined}
+	class={className}
+	use:applySizeVars={size}
+>
+	<Svg viewBox="0 0 120 80" aria-label="qr-code thumbnail" width="100%" height="100%">
+		<!-- QR outer frame -->
+		<rect
+			x="28"
+			y="4"
+			width="64"
+			height="72"
+			rx="4"
+			fill="var(--dry-color-bg-raised)"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1.5"
+		/>
+
+		<!-- Top-left position square -->
+		<rect
+			x="34"
+			y="10"
+			width="18"
+			height="18"
+			rx="2"
+			fill="none"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.5"
+		/>
+		<rect
+			x="38"
+			y="14"
+			width="10"
+			height="10"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.7"
+		/>
+
+		<!-- Top-right position square -->
+		<rect
+			x="68"
+			y="10"
+			width="18"
+			height="18"
+			rx="2"
+			fill="none"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.5"
+		/>
+		<rect
+			x="72"
+			y="14"
+			width="10"
+			height="10"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.7"
+		/>
+
+		<!-- Bottom-left position square -->
+		<rect
+			x="34"
+			y="52"
+			width="18"
+			height="18"
+			rx="2"
+			fill="none"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.5"
+		/>
+		<rect
+			x="38"
+			y="56"
+			width="10"
+			height="10"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.7"
+		/>
+
+		<!-- Data modules (scattered small squares) -->
+		<rect
+			x="68"
+			y="34"
+			width="5"
+			height="5"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.6"
+		/>
+		<rect
+			x="75"
+			y="34"
+			width="5"
+			height="5"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.6"
+		/>
+		<rect
+			x="68"
+			y="41"
+			width="5"
+			height="5"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.4"
+		/>
+		<rect
+			x="75"
+			y="52"
+			width="5"
+			height="5"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.6"
+		/>
+		<rect
+			x="68"
+			y="59"
+			width="5"
+			height="5"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.4"
+		/>
+		<rect
+			x="75"
+			y="66"
+			width="5"
+			height="5"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.5"
+		/>
+		<rect
+			x="34"
+			y="34"
+			width="5"
+			height="5"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.5"
+		/>
+		<rect
+			x="42"
+			y="34"
+			width="5"
+			height="5"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.3"
+		/>
+		<rect
+			x="50"
+			y="34"
+			width="5"
+			height="5"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.6"
+		/>
+		<rect
+			x="58"
+			y="42"
+			width="5"
+			height="5"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.45"
+		/>
+		<rect
+			x="50"
+			y="50"
+			width="5"
+			height="5"
+			rx="1"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.5"
+		/>
+	</Svg>
+</span>
+
+<style>
+	[data-thumbnail] {
+		display: inline-grid;
+		width: var(--thumbnail-w);
+		height: var(--thumbnail-h);
+	}
+
+	[data-thumbnail][data-size='sm'] {
+		--thumbnail-w: 32px;
+		--thumbnail-h: 21px;
+	}
+	[data-thumbnail][data-size='md'] {
+		--thumbnail-w: 80px;
+		--thumbnail-h: 53px;
+	}
+	[data-thumbnail][data-size='lg'] {
+		--thumbnail-w: 160px;
+		--thumbnail-h: 107px;
+	}
+</style>

package/dist/thumbnail/qr-code.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+	size?: 'sm' | 'md' | 'lg' | number;
+	class?: string;
+}
+declare const QrCode: import('svelte').Component<Props, {}, ''>;
+type QrCode = ReturnType<typeof QrCode>;
+export default QrCode;

package/dist/thumbnail/radio-group.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { Svg } from '@dryui/primitives';
+	import { applySizeVars } from './apply-size.js';
+
+	interface Props {
+		size?: 'sm' | 'md' | 'lg' | number;
+		class?: string;
+	}
+
+	let { size = 'md', class: className }: Props = $props();
+</script>
+
+<span
+	data-thumbnail
+	data-size={typeof size === 'string' ? size : undefined}
+	class={className}
+	use:applySizeVars={size}
+>
+	<Svg viewBox="0 0 120 80" aria-label="radio-group thumbnail" width="100%" height="100%">
+		<!-- Radio 1 (selected) -->
+		<circle
+			cx="26"
+			cy="22"
+			r="9"
+			fill="none"
+			stroke="var(--dry-color-fill-brand)"
+			stroke-width="1.8"
+		/>
+		<circle cx="26" cy="22" r="5" fill="var(--dry-color-fill-brand)" opacity="0.85" />
+		<rect
+			x="42"
+			y="19"
+			width="36"
+			height="5"
+			rx="2"
+			fill="var(--dry-color-stroke-weak)"
+			opacity="0.6"
+		/>
+		<!-- Radio 2 (unselected) -->
+		<circle
+			cx="26"
+			cy="40"
+			r="9"
+			fill="none"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1.8"
+		/>
+		<rect
+			x="42"
+			y="37"
+			width="30"
+			height="5"
+			rx="2"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.4"
+		/>
+		<!-- Radio 3 (unselected) -->
+		<circle
+			cx="26"
+			cy="58"
+			r="9"
+			fill="none"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1.8"
+		/>
+		<rect
+			x="42"
+			y="55"
+			width="40"
+			height="5"
+			rx="2"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.4"
+		/>
+	</Svg>
+</span>
+
+<style>
+	[data-thumbnail] {
+		display: inline-grid;
+		width: var(--thumbnail-w);
+		height: var(--thumbnail-h);
+	}
+
+	[data-thumbnail][data-size='sm'] {
+		--thumbnail-w: 32px;
+		--thumbnail-h: 21px;
+	}
+	[data-thumbnail][data-size='md'] {
+		--thumbnail-w: 80px;
+		--thumbnail-h: 53px;
+	}
+	[data-thumbnail][data-size='lg'] {
+		--thumbnail-w: 160px;
+		--thumbnail-h: 107px;
+	}
+</style>

package/dist/thumbnail/radio-group.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+	size?: 'sm' | 'md' | 'lg' | number;
+	class?: string;
+}
+declare const RadioGroup: import('svelte').Component<Props, {}, ''>;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/thumbnail/range-calendar.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { Svg } from '@dryui/primitives';
+	import { applySizeVars } from './apply-size.js';
+
+	interface Props {
+		size?: 'sm' | 'md' | 'lg' | number;
+		class?: string;
+	}
+
+	let { size = 'md', class: className }: Props = $props();
+
+	// Range: days 8–13 (index 7–12) highlighted
+	const rangeStart = 7;
+	const rangeEnd = 12;
+</script>
+
+<span
+	data-thumbnail
+	data-size={typeof size === 'string' ? size : undefined}
+	class={className}
+	use:applySizeVars={size}
+>
+	<Svg viewBox="0 0 120 80" aria-label="range-calendar thumbnail" width="100%" height="100%">
+		<!-- Outer card -->
+		<rect
+			x="10"
+			y="8"
+			width="100"
+			height="64"
+			rx="4"
+			fill="var(--dry-color-bg-raised)"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1.5"
+		/>
+		<!-- Month header -->
+		<rect
+			x="10"
+			y="8"
+			width="100"
+			height="14"
+			rx="4"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.3"
+		/>
+		<rect
+			x="38"
+			y="12"
+			width="28"
+			height="5"
+			rx="2"
+			fill="var(--dry-color-stroke-weak)"
+			opacity="0.7"
+		/>
+		<!-- Day grid: 7 cols x 5 rows, range highlighted with connected band -->
+		{#each Array(35) as _, i}
+			{@const col = i % 7}
+			{@const row = Math.floor(i / 7)}
+			{@const inRange = i >= rangeStart && i <= rangeEnd}
+			{@const isStartEnd = i === rangeStart || i === rangeEnd}
+			<rect
+				x={14 + col * 14 - (inRange && !isStartEnd ? 1 : 0)}
+				y={28 + row * 10}
+				width={inRange && !isStartEnd ? 10 : 8}
+				height="6"
+				rx={isStartEnd ? 3 : 0}
+				fill={inRange ? 'var(--dry-color-fill-brand)' : 'var(--dry-color-text-weak)'}
+				opacity={inRange ? (isStartEnd ? 0.85 : 0.3) : 0.2}
+			/>
+		{/each}
+	</Svg>
+</span>
+
+<style>
+	[data-thumbnail] {
+		display: inline-grid;
+		width: var(--thumbnail-w);
+		height: var(--thumbnail-h);
+	}
+
+	[data-thumbnail][data-size='sm'] {
+		--thumbnail-w: 32px;
+		--thumbnail-h: 21px;
+	}
+	[data-thumbnail][data-size='md'] {
+		--thumbnail-w: 80px;
+		--thumbnail-h: 53px;
+	}
+	[data-thumbnail][data-size='lg'] {
+		--thumbnail-w: 160px;
+		--thumbnail-h: 107px;
+	}
+</style>

package/dist/thumbnail/range-calendar.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+	size?: 'sm' | 'md' | 'lg' | number;
+	class?: string;
+}
+declare const RangeCalendar: import('svelte').Component<Props, {}, ''>;
+type RangeCalendar = ReturnType<typeof RangeCalendar>;
+export default RangeCalendar;

package/dist/thumbnail/rating.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Svg } from '@dryui/primitives';
+	import { applySizeVars } from './apply-size.js';
+
+	interface Props {
+		size?: 'sm' | 'md' | 'lg' | number;
+		class?: string;
+	}
+
+	let { size = 'md', class: className }: Props = $props();
+
+	// Star polygon points centered at cx,cy with outer r=10, inner r=4
+	function star(cx: number, cy: number): string {
+		const pts: string[] = [];
+		for (let i = 0; i < 10; i++) {
+			const angle = (Math.PI / 5) * i - Math.PI / 2;
+			const r = i % 2 === 0 ? 10 : 4;
+			pts.push(`${(cx + r * Math.cos(angle)).toFixed(1)},${(cy + r * Math.sin(angle)).toFixed(1)}`);
+		}
+		return pts.join(' ');
+	}
+</script>
+
+<span
+	data-thumbnail
+	data-size={typeof size === 'string' ? size : undefined}
+	class={className}
+	use:applySizeVars={size}
+>
+	<Svg viewBox="0 0 120 80" aria-label="rating thumbnail" width="100%" height="100%">
+		<!-- 5 stars, 3 filled -->
+		{#each Array(5) as _, i}
+			<polygon
+				points={star(13 + i * 22, 40)}
+				fill={i < 3 ? 'var(--dry-color-fill-brand)' : 'var(--dry-color-text-weak)'}
+				opacity={i < 3 ? 0.85 : 0.25}
+			/>
+		{/each}
+	</Svg>
+</span>
+
+<style>
+	[data-thumbnail] {
+		display: inline-grid;
+		width: var(--thumbnail-w);
+		height: var(--thumbnail-h);
+	}
+
+	[data-thumbnail][data-size='sm'] {
+		--thumbnail-w: 32px;
+		--thumbnail-h: 21px;
+	}
+	[data-thumbnail][data-size='md'] {
+		--thumbnail-w: 80px;
+		--thumbnail-h: 53px;
+	}
+	[data-thumbnail][data-size='lg'] {
+		--thumbnail-w: 160px;
+		--thumbnail-h: 107px;
+	}
+</style>

package/dist/thumbnail/rating.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+	size?: 'sm' | 'md' | 'lg' | number;
+	class?: string;
+}
+declare const Rating: import('svelte').Component<Props, {}, ''>;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/thumbnail/recent-searches.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { Svg } from '@dryui/primitives';
+	import { applySizeVars } from './apply-size.js';
+
+	interface Props {
+		size?: 'sm' | 'md' | 'lg' | number;
+		class?: string;
+	}
+
+	let { size = 'md', class: className }: Props = $props();
+</script>
+
+<span
+	data-thumbnail
+	data-size={typeof size === 'string' ? size : undefined}
+	class={className}
+	use:applySizeVars={size}
+>
+	<Svg viewBox="0 0 120 80" aria-label="recent searches thumbnail" width="100%" height="100%">
+		<!-- Panel -->
+		<rect
+			x="10"
+			y="8"
+			width="100"
+			height="64"
+			rx="5"
+			fill="var(--dry-color-bg-raised)"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1.5"
+		/>
+		<!-- Header -->
+		<rect
+			x="18"
+			y="14"
+			width="40"
+			height="4"
+			rx="2"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.6"
+		/>
+		<!-- Item 1 -->
+		<line
+			x1="10"
+			y1="24"
+			x2="110"
+			y2="24"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="0.5"
+		/>
+		<!-- Clock icon -->
+		<circle
+			cx="22"
+			cy="32"
+			r="6"
+			fill="none"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.2"
+		/>
+		<line
+			x1="22"
+			y1="29"
+			x2="22"
+			y2="32"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.2"
+			stroke-linecap="round"
+		/>
+		<line
+			x1="22"
+			y1="32"
+			x2="25"
+			y2="34"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.2"
+			stroke-linecap="round"
+		/>
+		<rect
+			x="32"
+			y="28"
+			width="52"
+			height="4"
+			rx="2"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.5"
+		/>
+		<rect
+			x="32"
+			y="34"
+			width="36"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.3"
+		/>
+		<!-- Item 2 -->
+		<line
+			x1="10"
+			y1="44"
+			x2="110"
+			y2="44"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="0.5"
+		/>
+		<circle
+			cx="22"
+			cy="52"
+			r="6"
+			fill="none"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.2"
+		/>
+		<line
+			x1="22"
+			y1="49"
+			x2="22"
+			y2="52"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.2"
+			stroke-linecap="round"
+		/>
+		<line
+			x1="22"
+			y1="52"
+			x2="25"
+			y2="54"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.2"
+			stroke-linecap="round"
+		/>
+		<rect
+			x="32"
+			y="48"
+			width="44"
+			height="4"
+			rx="2"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.45"
+		/>
+		<rect
+			x="32"
+			y="54"
+			width="28"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.28"
+		/>
+		<!-- Item 3 -->
+		<line
+			x1="10"
+			y1="64"
+			x2="110"
+			y2="64"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="0.5"
+		/>
+		<circle
+			cx="22"
+			cy="69"
+			r="4"
+			fill="none"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1"
+			opacity="0.5"
+		/>
+		<rect
+			x="32"
+			y="66"
+			width="48"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.3"
+		/>
+	</Svg>
+</span>
+
+<style>
+	[data-thumbnail] {
+		display: inline-grid;
+		width: var(--thumbnail-w);
+		height: var(--thumbnail-h);
+	}
+
+	[data-thumbnail][data-size='sm'] {
+		--thumbnail-w: 32px;
+		--thumbnail-h: 21px;
+	}
+	[data-thumbnail][data-size='md'] {
+		--thumbnail-w: 80px;
+		--thumbnail-h: 53px;
+	}
+	[data-thumbnail][data-size='lg'] {
+		--thumbnail-w: 160px;
+		--thumbnail-h: 107px;
+	}
+</style>

package/dist/thumbnail/recent-searches.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+	size?: 'sm' | 'md' | 'lg' | number;
+	class?: string;
+}
+declare const RecentSearches: import('svelte').Component<Props, {}, ''>;
+type RecentSearches = ReturnType<typeof RecentSearches>;
+export default RecentSearches;