@dryui/ui 0.2.2 → 0.3.0

package/dist/thumbnail/system-map.svelte

@@ -1,154 +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="system-map thumbnail" width="100%" height="100%">
-		<rect
-			x="5"
-			y="6"
-			width="34"
-			height="68"
-			rx="9"
-			fill="color-mix(in srgb, var(--dry-color-fill-brand) 10%, var(--dry-color-bg-raised))"
-			stroke="color-mix(in srgb, var(--dry-color-fill-brand) 30%, var(--dry-color-stroke-weak))"
-		/>
-		<rect
-			x="43"
-			y="6"
-			width="34"
-			height="68"
-			rx="9"
-			fill="color-mix(in srgb, var(--dry-color-fill-success) 10%, var(--dry-color-bg-raised))"
-			stroke="color-mix(in srgb, var(--dry-color-fill-success) 30%, var(--dry-color-stroke-weak))"
-		/>
-		<rect
-			x="81"
-			y="6"
-			width="34"
-			height="68"
-			rx="9"
-			fill="color-mix(in srgb, var(--dry-color-fill-info) 10%, var(--dry-color-bg-raised))"
-			stroke="color-mix(in srgb, var(--dry-color-fill-info) 30%, var(--dry-color-stroke-weak))"
-		/>
-
-		<rect x="11" y="17" width="22" height="4" rx="999" fill="var(--dry-color-fill-brand)" />
-		<rect
-			x="17"
-			y="28"
-			width="14"
-			height="12"
-			rx="4"
-			fill="var(--dry-color-bg-base)"
-			stroke="var(--dry-color-stroke-weak)"
-		/>
-		<rect
-			x="15"
-			y="46"
-			width="18"
-			height="10"
-			rx="4"
-			fill="var(--dry-color-bg-base)"
-			stroke="var(--dry-color-stroke-weak)"
-		/>
-
-		<rect x="49" y="17" width="22" height="4" rx="999" fill="var(--dry-color-fill-success)" />
-		<rect
-			x="55"
-			y="24"
-			width="16"
-			height="12"
-			rx="4"
-			fill="var(--dry-color-bg-base)"
-			stroke="var(--dry-color-stroke-weak)"
-		/>
-		<rect
-			x="51"
-			y="42"
-			width="18"
-			height="12"
-			rx="4"
-			fill="var(--dry-color-bg-base)"
-			stroke="var(--dry-color-stroke-weak)"
-		/>
-		<rect
-			x="57"
-			y="60"
-			width="14"
-			height="8"
-			rx="4"
-			fill="var(--dry-color-bg-base)"
-			stroke="var(--dry-color-stroke-weak)"
-		/>
-
-		<rect x="87" y="17" width="22" height="4" rx="999" fill="var(--dry-color-fill-info)" />
-		<rect
-			x="91"
-			y="32"
-			width="14"
-			height="12"
-			rx="4"
-			fill="var(--dry-color-bg-base)"
-			stroke="var(--dry-color-stroke-weak)"
-		/>
-		<rect
-			x="87"
-			y="52"
-			width="18"
-			height="10"
-			rx="4"
-			fill="var(--dry-color-bg-base)"
-			stroke="var(--dry-color-stroke-weak)"
-		/>
-
-		<path
-			d="M 31 34 C 39 34, 43 30, 51 30"
-			fill="none"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="2"
-			stroke-linecap="round"
-		/>
-		<path
-			d="M 69 48 C 77 48, 81 38, 91 38"
-			fill="none"
-			stroke="var(--dry-color-fill-success)"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-dasharray="5 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/system-map.svelte.d.ts

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

package/dist/thumbnail/table-of-contents.svelte

@@ -1,101 +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="table-of-contents thumbnail" width="100%" height="100%">
-		<!-- Level 1 items -->
-		<rect
-			x="12"
-			y="12"
-			width="46"
-			height="6"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.7"
-		/>
-		<!-- Level 2 items (indented) -->
-		<rect
-			x="20"
-			y="23"
-			width="36"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.7"
-		/>
-		<rect
-			x="20"
-			y="32"
-			width="40"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<!-- Level 3 item (more indented) -->
-		<rect
-			x="28"
-			y="41"
-			width="28"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<!-- Level 1 item -->
-		<rect
-			x="12"
-			y="51"
-			width="50"
-			height="6"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.7"
-		/>
-		<!-- Level 2 item -->
-		<rect
-			x="20"
-			y="62"
-			width="38"
-			height="5"
-			rx="1"
-			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/table-of-contents.svelte.d.ts

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

package/dist/thumbnail/table.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="table thumbnail" width="100%" height="100%">
-		<!-- Outer border -->
-		<rect
-			x="6"
-			y="6"
-			width="108"
-			height="68"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Header bg -->
-		<rect
-			x="6"
-			y="6"
-			width="108"
-			height="16"
-			rx="4"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.18"
-		/>
-		<!-- Row dividers -->
-		<line x1="6" y1="22" x2="114" y2="22" stroke="var(--dry-color-stroke-weak)" stroke-width="1" />
-		<line
-			x1="6"
-			y1="38"
-			x2="114"
-			y2="38"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-			opacity="0.6"
-		/>
-		<line
-			x1="6"
-			y1="54"
-			x2="114"
-			y2="54"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-			opacity="0.6"
-		/>
-		<!-- Col dividers -->
-		<line
-			x1="44"
-			y1="6"
-			x2="44"
-			y2="74"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-			opacity="0.4"
-		/>
-		<line
-			x1="80"
-			y1="6"
-			x2="80"
-			y2="74"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-			opacity="0.4"
-		/>
-		<!-- Header text -->
-		<rect
-			x="11"
-			y="12"
-			width="20"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.7"
-		/>
-		<rect
-			x="49"
-			y="12"
-			width="18"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.7"
-		/>
-		<rect
-			x="85"
-			y="12"
-			width="22"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.7"
-		/>
-		<!-- Row 1 -->
-		<rect
-			x="11"
-			y="28"
-			width="24"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<rect
-			x="49"
-			y="28"
-			width="16"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<rect
-			x="85"
-			y="28"
-			width="20"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Row 2 -->
-		<rect
-			x="11"
-			y="44"
-			width="18"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="49"
-			y="44"
-			width="22"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="85"
-			y="44"
-			width="16"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<!-- Row 3 -->
-		<rect
-			x="11"
-			y="60"
-			width="22"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.35"
-		/>
-		<rect
-			x="49"
-			y="60"
-			width="14"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.35"
-		/>
-		<rect
-			x="85"
-			y="60"
-			width="18"
-			height="4"
-			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/table.svelte.d.ts

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

package/dist/thumbnail/tabs.svelte

@@ -1,133 +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="tabs thumbnail" width="100%" height="100%">
-		<!-- Tab labels row -->
-		<rect
-			x="8"
-			y="20"
-			width="26"
-			height="16"
-			rx="2"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<!-- Active tab -->
-		<rect
-			x="37"
-			y="20"
-			width="26"
-			height="16"
-			rx="2"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1"
-		/>
-		<!-- Active underline -->
-		<rect x="37" y="34" width="26" height="2" rx="1" fill="var(--dry-color-fill-brand)" />
-		<rect
-			x="66"
-			y="20"
-			width="26"
-			height="16"
-			rx="2"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<!-- Tab item text rects -->
-		<rect
-			x="14"
-			y="26"
-			width="14"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<rect
-			x="43"
-			y="26"
-			width="14"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.8"
-		/>
-		<rect
-			x="72"
-			y="26"
-			width="14"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Content area -->
-		<rect
-			x="8"
-			y="40"
-			width="104"
-			height="30"
-			rx="2"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="16"
-			y="48"
-			width="50"
-			height="5"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-		<rect
-			x="16"
-			y="57"
-			width="36"
-			height="5"
-			rx="1"
-			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/tabs.svelte.d.ts

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