@dryui/ui 0.2.2 → 0.3.0

package/dist/thumbnail/mask-reveal.svelte

@@ -1,55 +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="MaskReveal thumbnail" width="100%" height="100%">
-		<rect
-			x="5"
-			y="5"
-			width="110"
-			height="70"
-			rx="8"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<text x="60" y="44" text-anchor="middle" font-size="10" fill="var(--dry-color-text-weak)">
-			MaskReveal
-		</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/mask-reveal.svelte.d.ts

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

package/dist/thumbnail/mega-menu.svelte

@@ -1,176 +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="mega-menu thumbnail" width="100%" height="100%">
-		<!-- Top nav bar -->
-		<rect
-			x="0"
-			y="6"
-			width="120"
-			height="18"
-			rx="0"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<!-- Nav items in bar -->
-		<rect
-			x="8"
-			y="11"
-			width="16"
-			height="8"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<rect
-			x="28"
-			y="11"
-			width="16"
-			height="8"
-			rx="1"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.8"
-		/>
-		<rect
-			x="48"
-			y="11"
-			width="16"
-			height="8"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Dropdown panel -->
-		<rect
-			x="10"
-			y="26"
-			width="100"
-			height="46"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<!-- Column 1 items -->
-		<rect
-			x="16"
-			y="32"
-			width="24"
-			height="6"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.6"
-		/>
-		<rect
-			x="16"
-			y="41"
-			width="20"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="16"
-			y="49"
-			width="22"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="16"
-			y="57"
-			width="18"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<!-- Column 2 items -->
-		<rect
-			x="52"
-			y="32"
-			width="24"
-			height="6"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.6"
-		/>
-		<rect
-			x="52"
-			y="41"
-			width="20"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="52"
-			y="49"
-			width="22"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<!-- Column 3 items -->
-		<rect
-			x="86"
-			y="32"
-			width="18"
-			height="6"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.6"
-		/>
-		<rect
-			x="86"
-			y="41"
-			width="16"
-			height="5"
-			rx="1"
-			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/mega-menu.svelte.d.ts

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

package/dist/thumbnail/menubar.svelte

@@ -1,99 +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="menubar thumbnail" width="100%" height="100%">
-		<!-- Menubar background -->
-		<rect
-			x="0"
-			y="28"
-			width="120"
-			height="24"
-			rx="0"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<!-- Menu items evenly spaced -->
-		<rect
-			x="8"
-			y="33"
-			width="18"
-			height="14"
-			rx="2"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.8"
-		/>
-		<rect
-			x="32"
-			y="35"
-			width="16"
-			height="10"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<rect
-			x="54"
-			y="35"
-			width="16"
-			height="10"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<rect
-			x="76"
-			y="35"
-			width="16"
-			height="10"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<rect
-			x="98"
-			y="35"
-			width="14"
-			height="10"
-			rx="2"
-			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/menubar.svelte.d.ts

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

package/dist/thumbnail/multi-city-search-form.svelte

@@ -1,241 +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="multi-city search form thumbnail"
-		width="100%"
-		height="100%"
-	>
-		<!-- Row 1 -->
-		<rect
-			x="8"
-			y="8"
-			width="46"
-			height="14"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="12"
-			y="12"
-			width="30"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.45"
-		/>
-		<rect
-			x="58"
-			y="8"
-			width="46"
-			height="14"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="62"
-			y="12"
-			width="30"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.45"
-		/>
-		<!-- Arrow between -->
-		<path
-			d="M52 15 L56 15 M54 13 L56 15 L54 17"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.2"
-			fill="none"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-
-		<!-- Row 2 -->
-		<rect
-			x="8"
-			y="26"
-			width="46"
-			height="14"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="12"
-			y="30"
-			width="28"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.45"
-		/>
-		<rect
-			x="58"
-			y="26"
-			width="46"
-			height="14"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="62"
-			y="30"
-			width="26"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.45"
-		/>
-		<path
-			d="M52 33 L56 33 M54 31 L56 33 L54 35"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.2"
-			fill="none"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-
-		<!-- Row 3 (third city) -->
-		<rect
-			x="8"
-			y="44"
-			width="46"
-			height="14"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="12"
-			y="48"
-			width="32"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.45"
-		/>
-		<rect
-			x="58"
-			y="44"
-			width="46"
-			height="14"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="62"
-			y="48"
-			width="24"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.45"
-		/>
-		<path
-			d="M52 51 L56 51 M54 49 L56 51 L54 53"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.2"
-			fill="none"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-
-		<!-- Add city button -->
-		<rect
-			x="8"
-			y="63"
-			width="48"
-			height="10"
-			rx="3"
-			fill="none"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.2"
-			stroke-dasharray="2,1.5"
-		/>
-		<line
-			x1="28"
-			y1="68"
-			x2="36"
-			y2="68"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-			stroke-linecap="round"
-		/>
-		<line
-			x1="32"
-			y1="64"
-			x2="32"
-			y2="72"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-			stroke-linecap="round"
-		/>
-		<!-- Search button -->
-		<rect
-			x="62"
-			y="63"
-			width="50"
-			height="10"
-			rx="3"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.8"
-		/>
-		<rect
-			x="72"
-			y="66"
-			width="24"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-bg-raised)"
-			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/multi-city-search-form.svelte.d.ts

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