@dryui/ui 0.2.1 → 0.3.0

package/dist/thumbnail/passenger-class-selector.svelte

@@ -1,142 +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="passenger class selector thumbnail"
-		width="100%"
-		height="100%"
-	>
-		<!-- Dropdown trigger -->
-		<rect
-			x="16"
-			y="24"
-			width="88"
-			height="32"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Person icon -->
-		<circle
-			cx="32"
-			cy="34"
-			r="5"
-			fill="none"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-		/>
-		<path
-			d="M24 48 Q24 42 32 42 Q40 42 40 48"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			fill="none"
-			stroke-linecap="round"
-		/>
-		<!-- Count badge -->
-		<circle
-			cx="42"
-			cy="30"
-			r="5"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.15"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1"
-		/>
-		<rect
-			x="39"
-			y="28"
-			width="6"
-			height="4"
-			rx="1.5"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.6"
-		/>
-		<!-- Class text bar -->
-		<rect
-			x="52"
-			y="30"
-			width="32"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<rect
-			x="52"
-			y="37"
-			width="22"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-		<!-- Chevron -->
-		<path
-			d="M94 36 L99 41 L104 36"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			fill="none"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<!-- Dropdown hint -->
-		<rect
-			x="16"
-			y="58"
-			width="88"
-			height="16"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-			opacity="0.7"
-		/>
-		<rect
-			x="24"
-			y="63"
-			width="32"
-			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/passenger-class-selector.svelte.d.ts

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

package/dist/thumbnail/payment-card-input.svelte

@@ -1,172 +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="payment card input thumbnail" width="100%" height="100%">
-		<!-- Card input field -->
-		<rect
-			x="8"
-			y="20"
-			width="104"
-			height="24"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Credit card icon -->
-		<rect
-			x="14"
-			y="25"
-			width="16"
-			height="12"
-			rx="2"
-			fill="none"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-		/>
-		<line x1="14" y1="29" x2="30" y2="29" stroke="var(--dry-color-text-weak)" stroke-width="2" />
-		<rect
-			x="15"
-			y="32"
-			width="5"
-			height="2"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<!-- Segmented number groups -->
-		<rect
-			x="34"
-			y="28"
-			width="14"
-			height="4"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="51"
-			y="28"
-			width="14"
-			height="4"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="68"
-			y="28"
-			width="14"
-			height="4"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<!-- Cursor + last group partial -->
-		<rect
-			x="85"
-			y="28"
-			width="8"
-			height="4"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-		<line
-			x1="95"
-			y1="26"
-			x2="95"
-			y2="38"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-			stroke-linecap="round"
-		/>
-		<!-- Expiry + CVV row -->
-		<rect
-			x="8"
-			y="50"
-			width="46"
-			height="16"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="14"
-			y="55"
-			width="28"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="62"
-			y="50"
-			width="50"
-			height="16"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="68"
-			y="55"
-			width="18"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<!-- Card type icon -->
-		<rect
-			x="100"
-			y="53"
-			width="10"
-			height="7"
-			rx="1.5"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.3"
-		/>
-		<circle cx="103" cy="56.5" r="3" fill="var(--dry-color-fill-brand)" opacity="0.4" />
-		<circle cx="107" cy="56.5" r="3" fill="var(--dry-color-fill-brand)" opacity="0.6" />
-	</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/payment-card-input.svelte.d.ts

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

package/dist/thumbnail/phone-input.svelte

@@ -1,103 +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="phone-input thumbnail" width="100%" height="100%">
-		<!-- Full input container -->
-		<rect
-			x="10"
-			y="28"
-			width="100"
-			height="24"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Flag prefix -->
-		<rect
-			x="15"
-			y="33"
-			width="16"
-			height="14"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.25"
-		/>
-		<!-- Flag stripes -->
-		<rect
-			x="15"
-			y="33"
-			width="16"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.45"
-		/>
-		<!-- Chevron beside flag -->
-		<polyline
-			points="33,38 36,41 39,38"
-			fill="none"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			opacity="0.6"
-		/>
-		<!-- Divider -->
-		<line
-			x1="42"
-			y1="32"
-			x2="42"
-			y2="48"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-			opacity="0.4"
-		/>
-		<!-- Phone number text -->
-		<rect
-			x="46"
-			y="37"
-			width="54"
-			height="5"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.35"
-		/>
-	</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/phone-input.svelte.d.ts

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

package/dist/thumbnail/pin-input.svelte

@@ -1,72 +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="pin-input thumbnail" width="100%" height="100%">
-		<!-- 5 PIN boxes -->
-		{#each Array(5) as _, i}
-			<rect
-				x={10 + i * 22}
-				y="26"
-				width="18"
-				height="28"
-				rx="4"
-				fill={i === 0 ? 'var(--dry-color-fill-brand)' : 'var(--dry-color-bg-raised)'}
-				stroke={i === 1 ? 'var(--dry-color-fill-brand)' : 'var(--dry-color-stroke-weak)'}
-				stroke-width="1.5"
-				opacity={i === 0 ? 0.2 : 1}
-			/>
-			{#if i === 0}
-				<!-- Filled digit dot -->
-				<circle cx={19 + i * 22} cy="40" r="4" fill="var(--dry-color-fill-brand)" opacity="0.7" />
-			{:else if i === 1}
-				<!-- Active cursor -->
-				<line
-					x1={19 + i * 22}
-					y1="32"
-					x2={19 + i * 22}
-					y2="48"
-					stroke="var(--dry-color-fill-brand)"
-					stroke-width="1.5"
-					stroke-linecap="round"
-					opacity="0.8"
-				/>
-			{/if}
-		{/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/pin-input.svelte.d.ts

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

package/dist/thumbnail/popover.svelte

@@ -1,122 +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="popover thumbnail" width="100%" height="100%">
-		<!-- Background surface -->
-		<rect x="0" y="0" width="120" height="80" fill="var(--dry-color-bg-raised)" />
-		<!-- Trigger button -->
-		<rect
-			x="40"
-			y="60"
-			width="40"
-			height="13"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-		/>
-		<rect
-			x="48"
-			y="64"
-			width="24"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.7"
-		/>
-		<!-- Arrow pointer (triangle pointing down toward trigger) -->
-		<polygon
-			points="60,57 55,50 65,50"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-			stroke-linejoin="round"
-		/>
-		<!-- Popover card (above trigger) -->
-		<rect
-			x="18"
-			y="10"
-			width="84"
-			height="42"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Mask the arrow-card overlap -->
-		<rect x="19" y="49" width="82" height="3" fill="var(--dry-color-bg-raised)" />
-		<!-- Content lines -->
-		<rect
-			x="26"
-			y="18"
-			width="44"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.9"
-		/>
-		<rect
-			x="26"
-			y="27"
-			width="68"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.45"
-		/>
-		<rect
-			x="26"
-			y="34"
-			width="54"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.35"
-		/>
-		<rect
-			x="26"
-			y="41"
-			width="40"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.25"
-		/>
-	</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/popover.svelte.d.ts

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