@dryui/ui 0.2.2 → 0.3.0

package/dist/thumbnail/add-on-selector.svelte

@@ -1,213 +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="add-on selector thumbnail" width="100%" height="100%">
-		<!-- Card 1 (checked) -->
-		<rect
-			x="8"
-			y="8"
-			width="32"
-			height="30"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-		/>
-		<circle cx="32" cy="14" r="6" fill="var(--dry-color-fill-brand)" opacity="0.9" />
-		<path
-			d="M29 14 L31 16 L35 12"
-			stroke="var(--dry-color-bg-raised)"
-			stroke-width="1.5"
-			fill="none"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<rect
-			x="12"
-			y="25"
-			width="20"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Card 2 (checked) -->
-		<rect
-			x="44"
-			y="8"
-			width="32"
-			height="30"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-		/>
-		<circle cx="68" cy="14" r="6" fill="var(--dry-color-fill-brand)" opacity="0.9" />
-		<path
-			d="M65 14 L67 16 L71 12"
-			stroke="var(--dry-color-bg-raised)"
-			stroke-width="1.5"
-			fill="none"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<rect
-			x="48"
-			y="25"
-			width="20"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Card 3 (unchecked) -->
-		<rect
-			x="80"
-			y="8"
-			width="32"
-			height="30"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<circle
-			cx="104"
-			cy="14"
-			r="6"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<rect
-			x="84"
-			y="25"
-			width="20"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Card 4 (unchecked) -->
-		<rect
-			x="8"
-			y="42"
-			width="32"
-			height="30"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<circle
-			cx="32"
-			cy="48"
-			r="6"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<rect
-			x="12"
-			y="59"
-			width="20"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Card 5 (unchecked) -->
-		<rect
-			x="44"
-			y="42"
-			width="32"
-			height="30"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<circle
-			cx="68"
-			cy="48"
-			r="6"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<rect
-			x="48"
-			y="59"
-			width="20"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Card 6 (checked) -->
-		<rect
-			x="80"
-			y="42"
-			width="32"
-			height="30"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-		/>
-		<circle cx="104" cy="48" r="6" fill="var(--dry-color-fill-brand)" opacity="0.9" />
-		<path
-			d="M101 48 L103 50 L107 46"
-			stroke="var(--dry-color-bg-raised)"
-			stroke-width="1.5"
-			fill="none"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<rect
-			x="84"
-			y="59"
-			width="20"
-			height="3"
-			rx="1.5"
-			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/add-on-selector.svelte.d.ts

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

package/dist/thumbnail/affix-group.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="AffixGroup thumbnail" width="100%" height="100%">
-		<rect
-			x="5"
-			y="5"
-			width="110"
-			height="70"
-			rx="8"
-			fill="var(--dry-color-surface)"
-			stroke="var(--dry-color-border)"
-			stroke-width="1"
-		/>
-		<text x="60" y="44" text-anchor="middle" font-size="10" fill="var(--dry-color-muted)">
-			AffixGroup
-		</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/affix-group.svelte.d.ts

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

package/dist/thumbnail/alert-dialog.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="alert-dialog thumbnail" width="100%" height="100%">
-		<!-- Dimmed backdrop -->
-		<rect x="0" y="0" width="120" height="80" fill="var(--dry-color-stroke-weak)" opacity="0.3" />
-		<!-- Dialog card -->
-		<rect
-			x="20"
-			y="14"
-			width="80"
-			height="52"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Warning circle icon -->
-		<circle cx="60" cy="30" r="8" fill="var(--dry-color-fill-brand)" opacity="0.15" />
-		<circle cx="60" cy="28" r="1.5" fill="var(--dry-color-fill-brand)" />
-		<rect x="58.5" y="31" width="3" height="4" rx="1" fill="var(--dry-color-fill-brand)" />
-		<!-- Title line -->
-		<rect
-			x="34"
-			y="42"
-			width="52"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.9"
-		/>
-		<!-- Body text line -->
-		<rect
-			x="38"
-			y="50"
-			width="44"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.45"
-		/>
-		<!-- Cancel button -->
-		<rect
-			x="26"
-			y="57"
-			width="28"
-			height="7"
-			rx="3"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<!-- Confirm button -->
-		<rect
-			x="66"
-			y="57"
-			width="28"
-			height="7"
-			rx="3"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.85"
-		/>
-	</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/alert-dialog.svelte.d.ts

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

package/dist/thumbnail/alert.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="alert thumbnail" width="100%" height="100%">
-		<!-- Card background -->
-		<rect
-			x="8"
-			y="22"
-			width="104"
-			height="36"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Left accent bar -->
-		<rect x="8" y="22" width="4" height="36" rx="2" fill="var(--dry-color-fill-brand)" />
-		<!-- Circle icon -->
-		<circle cx="30" cy="40" r="8" fill="var(--dry-color-fill-brand)" opacity="0.15" />
-		<circle cx="30" cy="37" r="1.5" fill="var(--dry-color-fill-brand)" />
-		<rect x="28.5" y="40" width="3" height="5" rx="1" fill="var(--dry-color-fill-brand)" />
-		<!-- Title line -->
-		<rect
-			x="46"
-			y="33"
-			width="44"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.9"
-		/>
-		<!-- Body line -->
-		<rect
-			x="46"
-			y="41"
-			width="56"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-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/alert.svelte.d.ts

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

package/dist/thumbnail/alpha-slider.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="AlphaSlider thumbnail" width="100%" height="100%">
-		<rect
-			x="5"
-			y="5"
-			width="110"
-			height="70"
-			rx="8"
-			fill="var(--dry-color-surface)"
-			stroke="var(--dry-color-border)"
-			stroke-width="1"
-		/>
-		<text x="60" y="44" text-anchor="middle" font-size="10" fill="var(--dry-color-muted)">
-			AlphaSlider
-		</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/alpha-slider.svelte.d.ts

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