@dryui/ui 0.2.2 → 0.3.0

package/dist/thumbnail/amenity-grid.svelte

@@ -1,236 +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="amenity grid thumbnail" width="100%" height="100%">
-		<!-- Row 1 icons -->
-		<circle
-			cx="20"
-			cy="22"
-			r="10"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.15"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<path
-			d="M16 22 Q20 16 24 22"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			fill="none"
-			stroke-linecap="round"
-		/>
-		<line
-			x1="20"
-			y1="22"
-			x2="20"
-			y2="27"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			stroke-linecap="round"
-		/>
-		<rect
-			x="13"
-			y="34"
-			width="14"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-
-		<circle
-			cx="60"
-			cy="22"
-			r="10"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.15"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="56"
-			y="18"
-			width="8"
-			height="5"
-			rx="1"
-			fill="none"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-		/>
-		<line x1="58" y1="23" x2="58" y2="27" stroke="var(--dry-color-text-weak)" stroke-width="1.5" />
-		<line x1="62" y1="23" x2="62" y2="27" stroke="var(--dry-color-text-weak)" stroke-width="1.5" />
-		<rect
-			x="53"
-			y="34"
-			width="14"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-
-		<circle
-			cx="100"
-			cy="22"
-			r="10"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.15"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<circle
-			cx="100"
-			cy="20"
-			r="3"
-			fill="none"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-		/>
-		<path
-			d="M95 28 Q100 24 105 28"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			fill="none"
-			stroke-linecap="round"
-		/>
-		<rect
-			x="93"
-			y="34"
-			width="14"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-
-		<!-- Row 2 icons -->
-		<circle
-			cx="20"
-			cy="58"
-			r="10"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.15"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<path
-			d="M17 58 L17 54 Q20 52 23 54 L23 58"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			fill="none"
-			stroke-linecap="round"
-		/>
-		<line
-			x1="16"
-			y1="62"
-			x2="24"
-			y2="62"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			stroke-linecap="round"
-		/>
-		<rect
-			x="13"
-			y="70"
-			width="14"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-
-		<circle
-			cx="60"
-			cy="58"
-			r="10"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.12"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1"
-		/>
-		<path
-			d="M56 58 L59 61 L64 55"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-			fill="none"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<rect
-			x="53"
-			y="70"
-			width="14"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-
-		<circle
-			cx="100"
-			cy="58"
-			r="10"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.15"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="96"
-			y="54"
-			width="8"
-			height="9"
-			rx="1"
-			fill="none"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-		/>
-		<line x1="98" y1="57" x2="102" y2="57" stroke="var(--dry-color-text-weak)" stroke-width="1" />
-		<line x1="98" y1="60" x2="102" y2="60" stroke="var(--dry-color-text-weak)" stroke-width="1" />
-		<rect
-			x="93"
-			y="70"
-			width="14"
-			height="3"
-			rx="1.5"
-			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/amenity-grid.svelte.d.ts

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

package/dist/thumbnail/app-frame.svelte.d.ts

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

package/dist/thumbnail/apply-size.d.ts

@@ -1,3 +0,0 @@
-export declare function applySizeVars(node: HTMLElement, size: number | string): {
-    update: (newSize: number | string) => void;
-};

package/dist/thumbnail/apply-size.js

@@ -1,14 +0,0 @@
-function apply(node, size) {
-    if (typeof size === 'number') {
-        node.style.setProperty('--thumbnail-w', `${size}px`);
-        node.style.setProperty('--thumbnail-h', `${Math.round(size / 1.5)}px`);
-    }
-    else {
-        node.style.removeProperty('--thumbnail-w');
-        node.style.removeProperty('--thumbnail-h');
-    }
-}
-export function applySizeVars(node, size) {
-    apply(node, size);
-    return { update: (newSize) => apply(node, newSize) };
-}

package/dist/thumbnail/aspect-ratio.svelte

@@ -1,64 +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="aspect-ratio thumbnail" width="100%" height="100%">
-		<!-- Dashed border rect -->
-		<rect
-			x="10"
-			y="10"
-			width="100"
-			height="60"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-			stroke-dasharray="4 3"
-		/>
-		<!-- "16:9" label -->
-		<text
-			x="60"
-			y="44"
-			text-anchor="middle"
-			dominant-baseline="middle"
-			font-size="11"
-			font-family="sans-serif"
-			fill="var(--dry-color-text-weak)">16:9</text
-		>
-	</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/aspect-ratio.svelte.d.ts

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

package/dist/thumbnail/aurora.svelte

@@ -1,88 +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="aurora thumbnail" width="100%" height="100%">
-		<defs>
-			<clipPath id="aurora-clip">
-				<rect x="0" y="0" width="120" height="80" />
-			</clipPath>
-		</defs>
-		<!-- Background -->
-		<rect x="0" y="0" width="120" height="80" rx="3" fill="var(--dry-color-bg-raised)" />
-		<!-- Overlapping translucent blobs -->
-		<ellipse
-			cx="42"
-			cy="42"
-			rx="34"
-			ry="28"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.18"
-			clip-path="url(#aurora-clip)"
-		/>
-		<ellipse
-			cx="72"
-			cy="32"
-			rx="30"
-			ry="26"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.22"
-			clip-path="url(#aurora-clip)"
-		/>
-		<ellipse
-			cx="80"
-			cy="56"
-			rx="28"
-			ry="22"
-			fill="var(--dry-color-stroke-weak)"
-			opacity="0.25"
-			clip-path="url(#aurora-clip)"
-		/>
-		<!-- Subtle border -->
-		<rect
-			x="0"
-			y="0"
-			width="120"
-			height="80"
-			rx="3"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-	</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/aurora.svelte.d.ts

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

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

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

package/dist/thumbnail/avatar.svelte

@@ -1,60 +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="avatar thumbnail" width="100%" height="100%">
-		<circle cx="60" cy="40" r="26" fill="var(--dry-color-fill-brand)" opacity="0.2" />
-		<circle
-			cx="60"
-			cy="40"
-			r="26"
-			fill="none"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-		/>
-		<text
-			x="60"
-			y="46"
-			text-anchor="middle"
-			font-size="18"
-			font-weight="600"
-			fill="var(--dry-color-fill-brand)"
-			font-family="sans-serif">AB</text
-		>
-	</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/avatar.svelte.d.ts

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

package/dist/thumbnail/backdrop.svelte

@@ -1,73 +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="backdrop thumbnail" width="100%" height="100%">
-		<!-- Background page content (faint) -->
-		<rect x="0" y="0" width="120" height="80" fill="var(--dry-color-bg-raised)" />
-		<rect
-			x="10"
-			y="10"
-			width="60"
-			height="5"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-		<rect
-			x="10"
-			y="20"
-			width="100"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.2"
-		/>
-		<rect
-			x="10"
-			y="27"
-			width="80"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.2"
-		/>
-		<!-- Semi-transparent overlay -->
-		<rect x="0" y="0" width="120" height="80" fill="var(--dry-color-stroke-weak)" opacity="0.45" />
-	</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/backdrop.svelte.d.ts

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

package/dist/thumbnail/badge.svelte

@@ -1,100 +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="badge thumbnail" width="100%" height="100%">
-		<!-- Primary badge -->
-		<rect
-			x="28"
-			y="28"
-			width="44"
-			height="16"
-			rx="8"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.2"
-		/>
-		<rect
-			x="28"
-			y="28"
-			width="44"
-			height="16"
-			rx="8"
-			fill="none"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-		/>
-		<text
-			x="50"
-			y="40"
-			text-anchor="middle"
-			font-size="9"
-			font-weight="600"
-			fill="var(--dry-color-fill-brand)"
-			font-family="sans-serif">New</text
-		>
-
-		<!-- Secondary badge -->
-		<rect
-			x="78"
-			y="30"
-			width="36"
-			height="12"
-			rx="6"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.15"
-		/>
-		<rect
-			x="78"
-			y="30"
-			width="36"
-			height="12"
-			rx="6"
-			fill="none"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1"
-		/>
-		<text
-			x="96"
-			y="40"
-			text-anchor="middle"
-			font-size="8"
-			fill="var(--dry-color-text-weak)"
-			font-family="sans-serif">Draft</text
-		>
-	</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>