@dryui/ui 0.0.1

package/dist/thumbnail/loyalty-points-display.svelte

@@ -0,0 +1,147 @@
+<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="loyalty points display thumbnail"
+		width="100%"
+		height="100%"
+	>
+		<!-- Card -->
+		<rect
+			x="10"
+			y="8"
+			width="100"
+			height="64"
+			rx="6"
+			fill="var(--dry-color-bg-raised)"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1.5"
+		/>
+		<!-- Large number rect -->
+		<rect
+			x="26"
+			y="16"
+			width="68"
+			height="16"
+			rx="4"
+			fill="var(--dry-color-fill-brand)"
+			opacity="0.15"
+		/>
+		<rect
+			x="30"
+			y="19"
+			width="44"
+			height="10"
+			rx="3"
+			fill="var(--dry-color-fill-brand)"
+			opacity="0.5"
+		/>
+		<!-- "pts" label -->
+		<rect
+			x="78"
+			y="21"
+			width="12"
+			height="6"
+			rx="2"
+			fill="var(--dry-color-fill-brand)"
+			opacity="0.3"
+		/>
+		<!-- Progress bar track -->
+		<rect
+			x="20"
+			y="42"
+			width="80"
+			height="8"
+			rx="4"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.15"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1"
+		/>
+		<!-- Progress fill -->
+		<rect
+			x="20"
+			y="42"
+			width="52"
+			height="8"
+			rx="4"
+			fill="var(--dry-color-fill-brand)"
+			opacity="0.6"
+		/>
+		<!-- Labels -->
+		<rect
+			x="20"
+			y="55"
+			width="24"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.4"
+		/>
+		<rect
+			x="86"
+			y="55"
+			width="14"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.4"
+		/>
+		<!-- Tier label -->
+		<rect
+			x="36"
+			y="62"
+			width="48"
+			height="5"
+			rx="2.5"
+			fill="var(--dry-color-fill-brand)"
+			opacity="0.2"
+		/>
+		<rect
+			x="44"
+			y="63.5"
+			width="32"
+			height="2"
+			rx="1"
+			fill="var(--dry-color-fill-brand)"
+			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/loyalty-points-display.svelte.d.ts

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

package/dist/thumbnail/map-list-toggle.svelte

@@ -0,0 +1,140 @@
+<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="map list toggle thumbnail" width="100%" height="100%">
+		<!-- Toggle container -->
+		<rect
+			x="20"
+			y="28"
+			width="80"
+			height="24"
+			rx="6"
+			fill="var(--dry-color-bg-raised)"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1.5"
+		/>
+		<!-- Active map segment -->
+		<rect
+			x="21"
+			y="29"
+			width="38"
+			height="22"
+			rx="5"
+			fill="var(--dry-color-fill-brand)"
+			opacity="0.15"
+		/>
+		<!-- Map icon (active) -->
+		<!-- Map shape: folded map -->
+		<path
+			d="M33 35 L39 33 L45 36 L45 45 L39 43 L33 45 Z"
+			fill="none"
+			stroke="var(--dry-color-fill-brand)"
+			stroke-width="1.5"
+			stroke-linejoin="round"
+		/>
+		<line
+			x1="39"
+			y1="33"
+			x2="39"
+			y2="43"
+			stroke="var(--dry-color-fill-brand)"
+			stroke-width="1"
+			stroke-dasharray="2,1"
+		/>
+		<rect
+			x="28"
+			y="35"
+			width="20"
+			height="4"
+			rx="1.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0"
+		/>
+		<!-- Map label -->
+		<rect
+			x="26"
+			y="47"
+			width="16"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-fill-brand)"
+			opacity="0.5"
+		/>
+		<!-- List icon (inactive) -->
+		<line
+			x1="66"
+			y1="36"
+			x2="80"
+			y2="36"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.5"
+			stroke-linecap="round"
+		/>
+		<line
+			x1="66"
+			y1="40"
+			x2="80"
+			y2="40"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.5"
+			stroke-linecap="round"
+		/>
+		<line
+			x1="66"
+			y1="44"
+			x2="76"
+			y2="44"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="1.5"
+			stroke-linecap="round"
+		/>
+		<!-- List label -->
+		<rect
+			x="63"
+			y="47"
+			width="16"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.4"
+		/>
+		<!-- Divider between segments -->
+		<line x1="59" y1="32" x2="59" y2="48" stroke="var(--dry-color-stroke-weak)" stroke-width="1" />
+	</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/map-list-toggle.svelte.d.ts

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

package/dist/thumbnail/map.svelte

@@ -0,0 +1,112 @@
+<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="map thumbnail" width="100%" height="100%">
+		<!-- Map frame -->
+		<rect
+			x="8"
+			y="8"
+			width="104"
+			height="64"
+			rx="6"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.1"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1.5"
+		/>
+		<!-- Grid lines (map texture) -->
+		<line
+			x1="8"
+			y1="35"
+			x2="112"
+			y2="35"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="0.5"
+			opacity="0.4"
+		/>
+		<line
+			x1="8"
+			y1="50"
+			x2="112"
+			y2="50"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="0.5"
+			opacity="0.4"
+		/>
+		<line
+			x1="40"
+			y1="8"
+			x2="40"
+			y2="72"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="0.5"
+			opacity="0.4"
+		/>
+		<line
+			x1="72"
+			y1="8"
+			x2="72"
+			y2="72"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="0.5"
+			opacity="0.4"
+		/>
+		<!-- Road lines -->
+		<path
+			d="M8,40 Q40,30 60,40 Q80,50 112,42"
+			fill="none"
+			stroke="var(--dry-color-text-weak)"
+			stroke-width="2.5"
+			opacity="0.3"
+			stroke-linecap="round"
+		/>
+		<!-- Map pin -->
+		<circle cx="60" cy="34" r="7" fill="var(--dry-color-fill-brand)" opacity="0.85" />
+		<circle cx="60" cy="34" r="3" fill="var(--dry-color-bg-raised)" />
+		<line
+			x1="60"
+			y1="41"
+			x2="60"
+			y2="46"
+			stroke="var(--dry-color-fill-brand)"
+			stroke-width="1.5"
+			stroke-linecap="round"
+		/>
+	</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/map.svelte.d.ts

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

package/dist/thumbnail/markdown-renderer.svelte

@@ -0,0 +1,113 @@
+<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="markdown-renderer thumbnail" width="100%" height="100%">
+		<!-- H1 heading (bold wide bar) -->
+		<rect
+			x="10"
+			y="8"
+			width="68"
+			height="7"
+			rx="2.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.8"
+		/>
+		<!-- Paragraph lines -->
+		<rect
+			x="10"
+			y="22"
+			width="96"
+			height="4"
+			rx="2"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.45"
+		/>
+		<rect
+			x="10"
+			y="30"
+			width="80"
+			height="4"
+			rx="2"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.4"
+		/>
+		<!-- Bullet list items -->
+		<circle cx="16" cy="42" r="2.5" fill="var(--dry-color-text-weak)" opacity="0.5" />
+		<rect
+			x="22"
+			y="39"
+			width="64"
+			height="4"
+			rx="2"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.45"
+		/>
+		<circle cx="16" cy="52" r="2.5" fill="var(--dry-color-text-weak)" opacity="0.5" />
+		<rect
+			x="22"
+			y="49"
+			width="50"
+			height="4"
+			rx="2"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.38"
+		/>
+		<!-- Code inline hint -->
+		<rect
+			x="10"
+			y="62"
+			width="36"
+			height="8"
+			rx="3"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.15"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1"
+		/>
+		<rect
+			x="14"
+			y="65"
+			width="24"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-fill-brand)"
+			opacity="0.6"
+		/>
+	</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/markdown-renderer.svelte.d.ts

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

package/dist/thumbnail/marquee.svelte

@@ -0,0 +1,114 @@
+<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="marquee thumbnail" width="100%" height="100%">
+		<!-- Track -->
+		<rect
+			x="8"
+			y="28"
+			width="104"
+			height="24"
+			rx="4"
+			fill="var(--dry-color-bg-raised)"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1.5"
+		/>
+		<!-- Fade edges -->
+		<rect
+			x="8"
+			y="28"
+			width="18"
+			height="24"
+			rx="4"
+			fill="var(--dry-color-bg-raised)"
+			opacity="0.7"
+		/>
+		<rect
+			x="94"
+			y="28"
+			width="18"
+			height="24"
+			rx="4 4 4 4"
+			fill="var(--dry-color-bg-raised)"
+			opacity="0.7"
+		/>
+		<!-- Items inside -->
+		<rect
+			x="18"
+			y="34"
+			width="26"
+			height="12"
+			rx="3"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.2"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1"
+		/>
+		<rect
+			x="50"
+			y="34"
+			width="22"
+			height="12"
+			rx="3"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.2"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1"
+		/>
+		<rect
+			x="78"
+			y="34"
+			width="26"
+			height="12"
+			rx="3"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.2"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1"
+		/>
+		<!-- Motion arrow -->
+		<polyline
+			points="100,36 106,40 100,44"
+			fill="none"
+			stroke="var(--dry-color-fill-brand)"
+			stroke-width="1.5"
+			stroke-linecap="round"
+		/>
+	</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/marquee.svelte.d.ts

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