@dryui/ui 0.2.2 → 0.3.0

package/dist/thumbnail/toast.svelte

@@ -1,105 +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="toast thumbnail" width="100%" height="100%">
-		<!-- Toast card, positioned bottom-right -->
-		<rect
-			x="34"
-			y="46"
-			width="78"
-			height="24"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Shadow hint -->
-		<rect
-			x="36"
-			y="48"
-			width="78"
-			height="24"
-			rx="5"
-			fill="var(--dry-color-stroke-weak)"
-			opacity="0.2"
-		/>
-		<!-- Toast card (redrawn on top of shadow) -->
-		<rect
-			x="34"
-			y="44"
-			width="78"
-			height="24"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Check icon circle -->
-		<circle cx="48" cy="56" r="6" fill="var(--dry-color-fill-brand)" opacity="0.15" />
-		<!-- Checkmark -->
-		<polyline
-			points="45,56 47.5,58.5 51.5,53.5"
-			fill="none"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.8"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<!-- Message line -->
-		<rect
-			x="60"
-			y="52"
-			width="42"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.8"
-		/>
-		<!-- Sub-line -->
-		<rect
-			x="60"
-			y="59"
-			width="28"
-			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/toast.svelte.d.ts

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

package/dist/thumbnail/toggle-group.svelte

@@ -1,76 +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="toggle-group thumbnail" width="100%" height="100%">
-		<!-- Outer border -->
-		<rect
-			x="10"
-			y="28"
-			width="100"
-			height="24"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Dividers -->
-		<line
-			x1="43"
-			y1="28"
-			x2="43"
-			y2="52"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<line
-			x1="77"
-			y1="28"
-			x2="77"
-			y2="52"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Active segment (middle) -->
-		<rect x="43" y="28" width="34" height="24" fill="var(--dry-color-fill-brand)" opacity="0.15" />
-		<!-- Label lines -->
-		<rect x="17" y="38" width="18" height="3" rx="1.5" fill="var(--dry-color-text-weak)" />
-		<rect x="51" y="38" width="18" height="3" rx="1.5" fill="var(--dry-color-fill-brand)" />
-		<rect x="85" y="38" width="18" height="3" rx="1.5" fill="var(--dry-color-text-weak)" />
-	</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/toggle-group.svelte.d.ts

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

package/dist/thumbnail/toggle.svelte

@@ -1,46 +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="toggle thumbnail" width="100%" height="100%">
-		<!-- Toggle track (on state) -->
-		<rect x="30" y="31" width="60" height="18" rx="9" fill="var(--dry-color-fill-brand)" />
-		<!-- Knob on right (on position) -->
-		<circle cx="81" cy="40" r="7" fill="var(--dry-color-bg-raised)" />
-	</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/toggle.svelte.d.ts

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

package/dist/thumbnail/token-preview.svelte.d.ts

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

package/dist/thumbnail/toolbar.svelte

@@ -1,109 +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="toolbar thumbnail" width="100%" height="100%">
-		<!-- Toolbar bar -->
-		<rect
-			x="6"
-			y="28"
-			width="108"
-			height="24"
-			rx="3"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<!-- Icon button squares group 1 -->
-		<rect
-			x="12"
-			y="33"
-			width="14"
-			height="14"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-		<rect
-			x="29"
-			y="33"
-			width="14"
-			height="14"
-			rx="2"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.7"
-		/>
-		<rect
-			x="46"
-			y="33"
-			width="14"
-			height="14"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-		<!-- Vertical separator -->
-		<line
-			x1="66"
-			y1="34"
-			x2="66"
-			y2="54"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Icon button squares group 2 -->
-		<rect
-			x="71"
-			y="33"
-			width="14"
-			height="14"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-		<rect
-			x="88"
-			y="33"
-			width="14"
-			height="14"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-	</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/toolbar.svelte.d.ts

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

package/dist/thumbnail/tooltip.svelte

@@ -1,85 +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="tooltip thumbnail" width="100%" height="100%">
-		<!-- Background surface -->
-		<rect x="0" y="0" width="120" height="80" fill="var(--dry-color-bg-raised)" />
-		<!-- Trigger element (icon button) -->
-		<circle
-			cx="60"
-			cy="62"
-			r="10"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.15"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<circle cx="60" cy="59" r="1.5" fill="var(--dry-color-text-weak)" opacity="0.7" />
-		<rect
-			x="58.5"
-			y="62"
-			width="3"
-			height="4"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.7"
-		/>
-		<!-- Tooltip label -->
-		<rect
-			x="26"
-			y="24"
-			width="68"
-			height="18"
-			rx="4"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.9"
-		/>
-		<rect
-			x="34"
-			y="30"
-			width="52"
-			height="3.5"
-			rx="1.5"
-			fill="var(--dry-color-bg-raised)"
-			opacity="0.9"
-		/>
-		<!-- Arrow pointing down -->
-		<polygon points="60,44 55,50 65,50" fill="var(--dry-color-text-weak)" opacity="0.9" />
-	</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/tooltip.svelte.d.ts

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

package/dist/thumbnail/tour.svelte

@@ -1,149 +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="tour thumbnail" width="100%" height="100%">
-		<!-- Background surface -->
-		<rect x="0" y="0" width="120" height="80" fill="var(--dry-color-bg-raised)" />
-		<!-- Page content (faint) -->
-		<rect
-			x="8"
-			y="8"
-			width="50"
-			height="8"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.15"
-		/>
-		<rect
-			x="8"
-			y="20"
-			width="70"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.1"
-		/>
-		<!-- Highlighted target element -->
-		<rect
-			x="8"
-			y="30"
-			width="46"
-			height="20"
-			rx="4"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.1"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="2"
-		/>
-		<rect
-			x="14"
-			y="37"
-			width="28"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.5"
-		/>
-		<!-- Arrow from target to tooltip -->
-		<line
-			x1="56"
-			y1="40"
-			x2="62"
-			y2="34"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-			stroke-linecap="round"
-			opacity="0.6"
-		/>
-		<!-- Tooltip step card -->
-		<rect
-			x="62"
-			y="20"
-			width="50"
-			height="34"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-		/>
-		<!-- Step title -->
-		<rect
-			x="68"
-			y="26"
-			width="32"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.85"
-		/>
-		<!-- Step body -->
-		<rect
-			x="68"
-			y="34"
-			width="36"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="68"
-			y="40"
-			width="28"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-		<!-- Step indicator dots -->
-		<circle cx="71" cy="63" r="3" fill="var(--dry-color-fill-brand)" opacity="0.9" />
-		<circle cx="80" cy="63" r="3" fill="var(--dry-color-stroke-weak)" />
-		<circle cx="89" cy="63" r="3" fill="var(--dry-color-stroke-weak)" />
-		<!-- Next button -->
-		<rect
-			x="96"
-			y="59"
-			width="16"
-			height="8"
-			rx="3"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.8"
-		/>
-	</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/tour.svelte.d.ts

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