@dryui/ui 0.2.2 → 0.3.0

package/dist/thumbnail/date-time-input.svelte

@@ -1,182 +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="date-time-input thumbnail" width="100%" height="100%">
-		<!-- Input rect -->
-		<rect
-			x="8"
-			y="26"
-			width="104"
-			height="28"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Date segment group -->
-		<rect
-			x="13"
-			y="33"
-			width="10"
-			height="10"
-			rx="2"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.15"
-		/>
-		<rect
-			x="14"
-			y="36"
-			width="8"
-			height="4"
-			rx="1"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.6"
-		/>
-		<rect
-			x="25"
-			y="36"
-			width="3"
-			height="4"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="30"
-			y="33"
-			width="10"
-			height="10"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.1"
-		/>
-		<rect
-			x="31"
-			y="36"
-			width="8"
-			height="4"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.35"
-		/>
-		<rect
-			x="42"
-			y="36"
-			width="3"
-			height="4"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="47"
-			y="33"
-			width="14"
-			height="10"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.1"
-		/>
-		<rect
-			x="48"
-			y="36"
-			width="12"
-			height="4"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.35"
-		/>
-		<!-- Spacer -->
-		<rect
-			x="63"
-			y="36"
-			width="4"
-			height="4"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.2"
-		/>
-		<!-- Time segment group -->
-		<rect
-			x="69"
-			y="33"
-			width="10"
-			height="10"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.1"
-		/>
-		<rect
-			x="70"
-			y="36"
-			width="8"
-			height="4"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.35"
-		/>
-		<rect
-			x="81"
-			y="36"
-			width="3"
-			height="4"
-			rx="1"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<rect
-			x="86"
-			y="33"
-			width="10"
-			height="10"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.1"
-		/>
-		<rect
-			x="87"
-			y="36"
-			width="8"
-			height="4"
-			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/date-time-input.svelte.d.ts

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

package/dist/thumbnail/description-list.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="description-list thumbnail" width="100%" height="100%">
-		<!-- Row 1: label -->
-		<rect
-			x="12"
-			y="10"
-			width="22"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Row 1: value -->
-		<rect
-			x="12"
-			y="17"
-			width="60"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.75"
-		/>
-		<line
-			x1="12"
-			y1="25"
-			x2="108"
-			y2="25"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-			opacity="0.5"
-		/>
-
-		<!-- Row 2: label -->
-		<rect
-			x="12"
-			y="29"
-			width="28"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Row 2: value -->
-		<rect
-			x="12"
-			y="36"
-			width="76"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.75"
-		/>
-		<line
-			x1="12"
-			y1="44"
-			x2="108"
-			y2="44"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-			opacity="0.5"
-		/>
-
-		<!-- Row 3: label -->
-		<rect
-			x="12"
-			y="48"
-			width="18"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.5"
-		/>
-		<!-- Row 3: value -->
-		<rect
-			x="12"
-			y="55"
-			width="50"
-			height="4"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.75"
-		/>
-		<line
-			x1="12"
-			y1="63"
-			x2="108"
-			y2="63"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-			opacity="0.5"
-		/>
-
-		<!-- Row 4: label -->
-		<rect
-			x="12"
-			y="67"
-			width="24"
-			height="4"
-			rx="2"
-			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/description-list.svelte.d.ts

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

package/dist/thumbnail/dialog.svelte

@@ -1,136 +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="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="18"
-			y="10"
-			width="84"
-			height="60"
-			rx="5"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Title line -->
-		<rect
-			x="26"
-			y="19"
-			width="44"
-			height="5"
-			rx="2"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.9"
-		/>
-		<!-- Close X -->
-		<line
-			x1="93"
-			y1="17"
-			x2="98"
-			y2="22"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			stroke-linecap="round"
-		/>
-		<line
-			x1="98"
-			y1="17"
-			x2="93"
-			y2="22"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			stroke-linecap="round"
-		/>
-		<!-- Separator -->
-		<line x1="18" y1="29" x2="102" y2="29" stroke="var(--dry-color-stroke-weak)" stroke-width="1" />
-		<!-- Content lines -->
-		<rect
-			x="26"
-			y="34"
-			width="68"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.45"
-		/>
-		<rect
-			x="26"
-			y="41"
-			width="58"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.45"
-		/>
-		<rect
-			x="26"
-			y="48"
-			width="48"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-		<!-- Footer separator -->
-		<line x1="18" y1="57" x2="102" y2="57" stroke="var(--dry-color-stroke-weak)" stroke-width="1" />
-		<!-- Footer buttons -->
-		<rect
-			x="26"
-			y="61"
-			width="26"
-			height="7"
-			rx="3"
-			fill="none"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1"
-		/>
-		<rect
-			x="68"
-			y="61"
-			width="26"
-			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/dialog.svelte.d.ts

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

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

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

package/dist/thumbnail/drag-and-drop.svelte

@@ -1,139 +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="drag-and-drop thumbnail" width="100%" height="100%">
-		<!-- Background surface -->
-		<rect x="0" y="0" width="120" height="80" fill="var(--dry-color-bg-raised)" />
-		<!-- Draggable card -->
-		<rect
-			x="8"
-			y="18"
-			width="46"
-			height="32"
-			rx="4"
-			fill="var(--dry-color-bg-raised)"
-			stroke="var(--dry-color-stroke-weak)"
-			stroke-width="1.5"
-		/>
-		<!-- Grip handle lines -->
-		<line
-			x1="20"
-			y1="29"
-			x2="32"
-			y2="29"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="2"
-			stroke-linecap="round"
-			opacity="0.5"
-		/>
-		<line
-			x1="20"
-			y1="34"
-			x2="32"
-			y2="34"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="2"
-			stroke-linecap="round"
-			opacity="0.5"
-		/>
-		<line
-			x1="20"
-			y1="39"
-			x2="32"
-			y2="39"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="2"
-			stroke-linecap="round"
-			opacity="0.5"
-		/>
-		<!-- Card content line -->
-		<rect
-			x="36"
-			y="31"
-			width="14"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.4"
-		/>
-		<rect
-			x="36"
-			y="37"
-			width="10"
-			height="3"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.3"
-		/>
-		<!-- Drop zone (dashed border) -->
-		<rect
-			x="66"
-			y="18"
-			width="46"
-			height="44"
-			rx="4"
-			fill="var(--dry-color-fill-brand)"
-			opacity="0.06"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="1.5"
-			stroke-dasharray="4,3"
-		/>
-		<!-- Drop zone inner hint -->
-		<line
-			x1="89"
-			y1="32"
-			x2="89"
-			y2="46"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="2"
-			stroke-linecap="round"
-			opacity="0.5"
-		/>
-		<line
-			x1="82"
-			y1="39"
-			x2="96"
-			y2="39"
-			stroke="var(--dry-color-fill-brand)"
-			stroke-width="2"
-			stroke-linecap="round"
-			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/drag-and-drop.svelte.d.ts

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