@dryui/ui 0.2.2 → 0.3.0

package/dist/thumbnail/multi-select-combobox.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="multi-select-combobox thumbnail" width="100%" height="100%">
-		<!-- Input rect -->
-		<rect
-			x="10"
-			y="22"
-			width="100"
-			height="26"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Pill chip 1 -->
-		<rect
-			x="16"
-			y="29"
-			width="24"
-			height="11"
-			rx="5"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.2"
-		/>
-		<rect
-			x="19"
-			y="33"
-			width="14"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.7"
-		/>
-		<!-- x on chip 1 -->
-		<line
-			x1="35"
-			y1="32"
-			x2="37"
-			y2="34"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.2"
-			stroke-linecap="round"
-			opacity="0.7"
-		/>
-		<line
-			x1="37"
-			y1="32"
-			x2="35"
-			y2="34"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.2"
-			stroke-linecap="round"
-			opacity="0.7"
-		/>
-		<!-- Pill chip 2 -->
-		<rect
-			x="43"
-			y="29"
-			width="26"
-			height="11"
-			rx="5"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.2"
-		/>
-		<rect
-			x="46"
-			y="33"
-			width="16"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.7"
-		/>
-		<!-- x on chip 2 -->
-		<line
-			x1="64"
-			y1="32"
-			x2="66"
-			y2="34"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.2"
-			stroke-linecap="round"
-			opacity="0.7"
-		/>
-		<line
-			x1="66"
-			y1="32"
-			x2="64"
-			y2="34"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.2"
-			stroke-linecap="round"
-			opacity="0.7"
-		/>
-		<!-- Chevron down -->
-		<polyline
-			points="97,32 102,37 107,32"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-			stroke-linecap="round"
-			stroke-linejoin="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/multi-select-combobox.svelte.d.ts

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

package/dist/thumbnail/navigation-menu.svelte

@@ -1,102 +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="navigation-menu thumbnail" width="100%" height="100%">
-		<!-- Panel background -->
-		<rect
-			x="10"
-			y="8"
-			width="100"
-			height="64"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<!-- Active indicator bar -->
-		<rect x="10" y="20" width="3" height="12" rx="1" fill="var(--dry-color-fill-brand)" />
-		<!-- Active item -->
-		<rect
-			x="18"
-			y="23"
-			width="50"
-			height="7"
-			rx="2"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.15"
-		/>
-		<rect
-			x="22"
-			y="25"
-			width="32"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.7"
-		/>
-		<!-- Other items -->
-		<rect
-			x="22"
-			y="37"
-			width="36"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<rect
-			x="22"
-			y="48"
-			width="28"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<rect
-			x="22"
-			y="59"
-			width="40"
-			height="5"
-			rx="1"
-			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/navigation-menu.svelte.d.ts

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

package/dist/thumbnail/noise.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="noise thumbnail" width="100%" height="100%">
-		<!-- Background rect -->
-		<rect
-			x="8"
-			y="8"
-			width="104"
-			height="64"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Scattered small dots to represent noise texture -->
-		<circle cx="20" cy="20" r="1.2" fill="var(--dry-color-text-weak)" opacity="0.6" />
-		<circle cx="35" cy="15" r="1" fill="var(--dry-color-text-weak)" opacity="0.5" />
-		<circle cx="50" cy="24" r="1.4" fill="var(--dry-color-text-weak)" opacity="0.7" />
-		<circle cx="68" cy="18" r="1" fill="var(--dry-color-text-weak)" opacity="0.4" />
-		<circle cx="82" cy="22" r="1.2" fill="var(--dry-color-text-weak)" opacity="0.6" />
-		<circle cx="100" cy="17" r="1" fill="var(--dry-color-text-weak)" opacity="0.5" />
-		<circle cx="25" cy="36" r="1.3" fill="var(--dry-color-text-weak)" opacity="0.5" />
-		<circle cx="44" cy="40" r="1" fill="var(--dry-color-text-weak)" opacity="0.6" />
-		<circle cx="60" cy="34" r="1.5" fill="var(--dry-color-text-weak)" opacity="0.4" />
-		<circle cx="76" cy="42" r="1" fill="var(--dry-color-text-weak)" opacity="0.7" />
-		<circle cx="92" cy="36" r="1.2" fill="var(--dry-color-text-weak)" opacity="0.5" />
-		<circle cx="108" cy="40" r="1" fill="var(--dry-color-text-weak)" opacity="0.4" />
-		<circle cx="18" cy="54" r="1" fill="var(--dry-color-text-weak)" opacity="0.5" />
-		<circle cx="38" cy="58" r="1.3" fill="var(--dry-color-text-weak)" opacity="0.6" />
-		<circle cx="55" cy="52" r="1" fill="var(--dry-color-text-weak)" opacity="0.4" />
-		<circle cx="72" cy="60" r="1.2" fill="var(--dry-color-text-weak)" opacity="0.7" />
-		<circle cx="88" cy="56" r="1" fill="var(--dry-color-text-weak)" opacity="0.5" />
-		<circle cx="104" cy="62" r="1.4" 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/noise.svelte.d.ts

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

package/dist/thumbnail/notification-center.svelte

@@ -1,152 +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="notification-center thumbnail" width="100%" height="100%">
-		<!-- Background surface -->
-		<rect x="0" y="0" width="120" height="80" fill="var(--dry-color-bg-raised)" />
-		<!-- Bell icon body -->
-		<path
-			d="M18,12 Q18,7 24,7 Q30,7 30,12 L31,22 Q34,24 34,27 L14,27 Q14,24 17,22 Z"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Bell bottom clapper -->
-		<path
-			d="M21,27 Q21,30 24,30 Q27,30 27,27"
-			fill="none"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.2"
-			opacity="0.5"
-		/>
-		<!-- Badge dot -->
-		<circle cx="31" cy="8" r="4" fill="var(--dry-color-fill-brand)" />
-		<!-- Floating panel -->
-		<rect
-			x="38"
-			y="6"
-			width="74"
-			height="68"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Panel title -->
-		<rect
-			x="46"
-			y="13"
-			width="36"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.9"
-		/>
-		<!-- Notification items -->
-		<rect
-			x="44"
-			y="22"
-			width="62"
-			height="13"
-			rx="3"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.1"
-		/>
-		<circle cx="51" cy="28" r="4" fill="var(--dry-color-text-weak)" opacity="0.3" />
-		<rect
-			x="58"
-			y="25"
-			width="34"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.75"
-		/>
-		<rect
-			x="58"
-			y="31"
-			width="24"
-			height="2.5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-
-		<rect x="44" y="39" width="62" height="13" rx="3" fill="var(--dry-color-bg-raised)" />
-		<circle cx="51" cy="45" r="4" fill="var(--dry-color-text-weak)" opacity="0.3" />
-		<rect
-			x="58"
-			y="42"
-			width="28"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.6"
-		/>
-		<rect
-			x="58"
-			y="48"
-			width="20"
-			height="2.5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.35"
-		/>
-
-		<rect x="44" y="56" width="62" height="13" rx="3" fill="var(--dry-color-bg-raised)" />
-		<circle cx="51" cy="62" r="4" fill="var(--dry-color-text-weak)" opacity="0.3" />
-		<rect
-			x="58"
-			y="59"
-			width="32"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.6"
-		/>
-		<rect
-			x="58"
-			y="65"
-			width="22"
-			height="2.5"
-			rx="1"
-			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/notification-center.svelte.d.ts

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

package/dist/thumbnail/number-input.svelte

@@ -1,113 +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="number-input thumbnail" width="100%" height="100%">
-		<!-- Decrement button -->
-		<rect
-			x="8"
-			y="28"
-			width="22"
-			height="24"
-			rx="4"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.2"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<line
-			x1="14"
-			y1="40"
-			x2="24"
-			y2="40"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="2"
-			stroke-linecap="round"
-		/>
-		<!-- Value input -->
-		<rect
-			x="34"
-			y="28"
-			width="52"
-			height="24"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<rect
-			x="50"
-			y="37"
-			width="20"
-			height="5"
-			rx="2"
-			fill="var(--dry-color-stroke-weak)"
-			opacity="0.6"
-		/>
-		<!-- Increment button -->
-		<rect
-			x="90"
-			y="28"
-			width="22"
-			height="24"
-			rx="4"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.2"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<line
-			x1="96"
-			y1="40"
-			x2="106"
-			y2="40"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="2"
-			stroke-linecap="round"
-		/>
-		<line
-			x1="101"
-			y1="35"
-			x2="101"
-			y2="45"
-			stroke="var(--dry-color-stroke-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/number-input.svelte.d.ts

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

package/dist/thumbnail/option-swatch-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="OptionSwatchGroup 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)">
-			OptionSwatchGroup
-		</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/option-swatch-group.svelte.d.ts

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

package/dist/thumbnail/page-header.svelte.d.ts

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