@dryui/ui 0.2.2 → 0.4.0

package/dist/thumbnail/qr-code.svelte

@@ -1,217 +0,0 @@
-<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, 80px);
-		height: var(--thumbnail-h, 53px);
-	}
-
-	[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

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

@@ -1,97 +0,0 @@
-<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, 80px);
-		height: var(--thumbnail-h, 53px);
-	}
-
-	[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

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

@@ -1,92 +0,0 @@
-<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, 80px);
-		height: var(--thumbnail-h, 53px);
-	}
-
-	[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

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

@@ -1,61 +0,0 @@
-<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, 80px);
-		height: var(--thumbnail-h, 53px);
-	}
-
-	[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

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

@@ -1,197 +0,0 @@
-<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, 80px);
-		height: var(--thumbnail-h, 53px);
-	}
-
-	[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

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