@dryui/ui 0.2.1 → 0.3.0

package/dist/thumbnail/slider.svelte

@@ -1,71 +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="slider thumbnail" width="100%" height="100%">
-		<!-- Track background -->
-		<rect
-			x="12"
-			y="37"
-			width="96"
-			height="6"
-			rx="3"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-		<!-- Filled track (progress) -->
-		<rect
-			x="12"
-			y="37"
-			width="56"
-			height="6"
-			rx="3"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.6"
-		/>
-		<!-- Thumb handle -->
-		<circle
-			cx="68"
-			cy="40"
-			r="9"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="2"
-		/>
-	</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/slider.svelte.d.ts

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

package/dist/thumbnail/sort-bar.svelte

@@ -1,156 +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="sort bar thumbnail" width="100%" height="100%">
-		<!-- Bar background -->
-		<rect
-			x="8"
-			y="28"
-			width="104"
-			height="24"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Active option (Best) -->
-		<rect
-			x="9"
-			y="29"
-			width="28"
-			height="22"
-			rx="4"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.15"
-		/>
-		<rect
-			x="13"
-			y="36"
-			width="20"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.7"
-		/>
-		<!-- Active indicator bar -->
-		<rect
-			x="13"
-			y="50"
-			width="20"
-			height="2"
-			rx="1"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.8"
-		/>
-		<!-- Option 2 (Cheapest) -->
-		<rect
-			x="41"
-			y="36"
-			width="22"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<!-- Option 3 (Fastest) -->
-		<rect
-			x="69"
-			y="36"
-			width="18"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<!-- Option 4 (Rating) -->
-		<rect
-			x="92"
-			y="36"
-			width="16"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<!-- Dividers -->
-		<line
-			x1="38"
-			y1="32"
-			x2="38"
-			y2="48"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="0.5"
-		/>
-		<line
-			x1="65"
-			y1="32"
-			x2="65"
-			y2="48"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="0.5"
-		/>
-		<line
-			x1="88"
-			y1="32"
-			x2="88"
-			y2="48"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="0.5"
-		/>
-		<!-- Sort icon hint -->
-		<rect
-			x="14"
-			y="14"
-			width="20"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.25"
-		/>
-		<rect
-			x="22"
-			y="62"
-			width="76"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.15"
-		/>
-	</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/sort-bar.svelte.d.ts

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

package/dist/thumbnail/spacer.svelte

@@ -1,95 +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="spacer thumbnail" width="100%" height="100%">
-		<!-- Top rect -->
-		<rect
-			x="20"
-			y="8"
-			width="80"
-			height="22"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Gap indicator: bracket lines and arrows -->
-		<line
-			x1="60"
-			y1="34"
-			x2="60"
-			y2="46"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1"
-			stroke-dasharray="2 2"
-			opacity="0.7"
-		/>
-		<!-- Top tick -->
-		<line
-			x1="54"
-			y1="34"
-			x2="66"
-			y2="34"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1"
-			opacity="0.7"
-		/>
-		<!-- Bottom tick -->
-		<line
-			x1="54"
-			y1="46"
-			x2="66"
-			y2="46"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1"
-			opacity="0.7"
-		/>
-		<!-- Bottom rect -->
-		<rect
-			x="20"
-			y="50"
-			width="80"
-			height="22"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.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/spacer.svelte.d.ts

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

package/dist/thumbnail/sparkline.svelte

@@ -1,59 +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="sparkline thumbnail" width="100%" height="100%">
-		<!-- Sparkline area fill -->
-		<path
-			d="M10,58 L22,44 L34,50 L46,32 L58,38 L70,24 L82,30 L94,18 L106,22 L106,68 L10,68 Z"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.12"
-		/>
-		<!-- Sparkline stroke -->
-		<polyline
-			points="10,58 22,44 34,50 46,32 58,38 70,24 82,30 94,18 106,22"
-			fill="none"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<!-- End dot -->
-		<circle cx="106" cy="22" r="3.5" fill="var(--dry-color-fill-brand)" />
-	</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/sparkline.svelte.d.ts

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

package/dist/thumbnail/spinner.svelte

@@ -1,63 +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="spinner thumbnail" width="100%" height="100%">
-		<!-- Track ring -->
-		<circle
-			cx="60"
-			cy="40"
-			r="20"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="6"
-		/>
-		<!-- Spinner arc — short open arc showing gap -->
-		<circle
-			cx="60"
-			cy="40"
-			r="20"
-			fill="none"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="6"
-			stroke-linecap="round"
-			stroke-dasharray="88 38"
-			transform="rotate(-90 60 40)"
-		/>
-	</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/spinner.svelte.d.ts

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

package/dist/thumbnail/splitter.svelte

@@ -1,79 +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="splitter thumbnail" width="100%" height="100%">
-		<!-- Left panel -->
-		<rect
-			x="6"
-			y="8"
-			width="46"
-			height="64"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Right panel -->
-		<rect
-			x="68"
-			y="8"
-			width="46"
-			height="64"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Divider handle area -->
-		<rect
-			x="53"
-			y="28"
-			width="14"
-			height="24"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Drag handle dots -->
-		<circle cx="60" cy="36" r="1.2" fill="var(--dry-color-text-weak)" opacity="0.7" />
-		<circle cx="60" cy="40" r="1.2" fill="var(--dry-color-text-weak)" opacity="0.7" />
-		<circle cx="60" cy="44" r="1.2" fill="var(--dry-color-text-weak)" opacity="0.7" />
-	</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/splitter.svelte.d.ts

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

package/dist/thumbnail/spotlight.svelte

@@ -1,90 +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="spotlight thumbnail" width="100%" height="100%">
-		<defs>
-			<radialGradient id="spotlight-grad" cx="50%" cy="50%" r="50%">
-				<stop offset="0%" stop-color="var(--dry-color-bg-raised)" stop-opacity="1" />
-				<stop offset="60%" stop-color="var(--dry-color-text-weak)" stop-opacity="0.05" />
-				<stop offset="100%" stop-color="var(--dry-color-text-weak)" stop-opacity="0.6" />
-			</radialGradient>
-		</defs>
-		<!-- Dark background -->
-		<rect
-			x="0"
-			y="0"
-			width="120"
-			height="80"
-			rx="0"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.35"
-		/>
-		<!-- Spotlight overlay -->
-		<circle cx="60" cy="40" r="28" fill="url(#spotlight-grad)" />
-		<!-- Outer ring hint -->
-		<circle
-			cx="60"
-			cy="40"
-			r="28"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-			opacity="0.4"
-		/>
-		<!-- Content in spotlight -->
-		<rect
-			x="36"
-			y="34"
-			width="48"
-			height="5"
-			rx="2.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.6"
-		/>
-		<rect
-			x="42"
-			y="43"
-			width="36"
-			height="4"
-			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/spotlight.svelte.d.ts

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