@dryui/ui 0.2.2 → 0.3.0

package/dist/thumbnail/format-bytes.svelte

@@ -1,51 +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="format-bytes thumbnail" width="100%" height="100%">
-		<text
-			x="60"
-			y="46"
-			text-anchor="middle"
-			font-size="22"
-			font-weight="700"
-			fill="var(--dry-color-text-weak)"
-			font-family="sans-serif">1.5 KB</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/format-bytes.svelte.d.ts

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

package/dist/thumbnail/format-date.svelte

@@ -1,51 +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="format-date thumbnail" width="100%" height="100%">
-		<text
-			x="60"
-			y="46"
-			text-anchor="middle"
-			font-size="22"
-			font-weight="700"
-			fill="var(--dry-color-text-weak)"
-			font-family="sans-serif">Mar 24</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/format-date.svelte.d.ts

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

package/dist/thumbnail/format-number.svelte

@@ -1,51 +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="format-number thumbnail" width="100%" height="100%">
-		<text
-			x="60"
-			y="46"
-			text-anchor="middle"
-			font-size="22"
-			font-weight="700"
-			fill="var(--dry-color-text-weak)"
-			font-family="sans-serif">1,234</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/format-number.svelte.d.ts

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

package/dist/thumbnail/gauge.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="gauge thumbnail" width="100%" height="100%">
-		<!-- Background arc -->
-		<path
-			d="M18,62 A42,42 0 0,1 102,62"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="8"
-			stroke-linecap="round"
-		/>
-		<!-- Filled arc (~65%) -->
-		<path
-			d="M18,62 A42,42 0 0,1 84,26"
-			fill="none"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="8"
-			stroke-linecap="round"
-			opacity="0.85"
-		/>
-		<!-- Center point -->
-		<circle cx="60" cy="62" r="4" fill="var(--dry-color-text-weak)" opacity="0.6" />
-		<!-- Needle -->
-		<line
-			x1="60"
-			y1="62"
-			x2="82"
-			y2="29"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="2"
-			stroke-linecap="round"
-		/>
-		<!-- Center cap -->
-		<circle
-			cx="60"
-			cy="62"
-			r="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Value text -->
-		<text
-			x="60"
-			y="75"
-			text-anchor="middle"
-			font-size="10"
-			font-weight="600"
-			fill="var(--dry-color-text-weak)"
-			font-family="sans-serif">65%</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/gauge.svelte.d.ts

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

package/dist/thumbnail/glass-surface.svelte.d.ts

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

package/dist/thumbnail/glow.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="Glow 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)">
-			Glow
-		</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/glow.svelte.d.ts

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

package/dist/thumbnail/gradient-mesh.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="GradientMesh 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)">
-			GradientMesh
-		</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/gradient-mesh.svelte.d.ts

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

package/dist/thumbnail/guest-room-selector.svelte

@@ -1,214 +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="guest room selector thumbnail" width="100%" height="100%">
-		<!-- Card -->
-		<rect
-			x="14"
-			y="8"
-			width="92"
-			height="64"
-			rx="6"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Guests row -->
-		<rect
-			x="22"
-			y="18"
-			width="28"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Minus button -->
-		<rect
-			x="22"
-			y="26"
-			width="14"
-			height="14"
-			rx="3"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<line
-			x1="26"
-			y1="33"
-			x2="32"
-			y2="33"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="2"
-			stroke-linecap="round"
-		/>
-		<!-- Count -->
-		<rect
-			x="40"
-			y="29"
-			width="10"
-			height="8"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.15"
-		/>
-		<rect
-			x="42"
-			y="31"
-			width="6"
-			height="4"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Plus button -->
-		<rect
-			x="54"
-			y="26"
-			width="14"
-			height="14"
-			rx="3"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.15"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-		/>
-		<line
-			x1="58"
-			y1="33"
-			x2="64"
-			y2="33"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="2"
-			stroke-linecap="round"
-		/>
-		<line
-			x1="61"
-			y1="30"
-			x2="61"
-			y2="36"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="2"
-			stroke-linecap="round"
-		/>
-
-		<!-- Divider -->
-		<line x1="22" y1="48" x2="98" y2="48" stroke="var(--dry-color-stroke-weak)" stroke-width="1" />
-
-		<!-- Rooms row -->
-		<rect
-			x="22"
-			y="52"
-			width="22"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Minus button -->
-		<rect
-			x="22"
-			y="58"
-			width="14"
-			height="14"
-			rx="3"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<line
-			x1="26"
-			y1="65"
-			x2="32"
-			y2="65"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="2"
-			stroke-linecap="round"
-		/>
-		<!-- Count -->
-		<rect
-			x="40"
-			y="61"
-			width="10"
-			height="8"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.15"
-		/>
-		<rect
-			x="42"
-			y="63"
-			width="6"
-			height="4"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Plus button -->
-		<rect
-			x="54"
-			y="58"
-			width="14"
-			height="14"
-			rx="3"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<line
-			x1="58"
-			y1="65"
-			x2="64"
-			y2="65"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="2"
-			stroke-linecap="round"
-		/>
-		<line
-			x1="61"
-			y1="62"
-			x2="61"
-			y2="68"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="2"
-			stroke-linecap="round"
-		/>
-	</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/guest-room-selector.svelte.d.ts

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

package/dist/thumbnail/halftone.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="Halftone 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)">
-			Halftone
-		</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>