@dryui/theme-wizard 3.0.0 → 5.0.0

package/dist/steps/Shape.svelte

@@ -1,121 +0,0 @@
-<script lang="ts">
-	import { Card } from '@dryui/ui/card';
-	import { SegmentedControl } from '@dryui/ui/segmented-control';
-	import { Text } from '@dryui/ui/text';
-	import { wizardState, setRadiusPreset, setDensity } from '../state.svelte.js';
-	import type { RadiusPreset } from '../state.svelte.js';
-
-	const PRESETS: { value: RadiusPreset; label: string; description: string }[] = [
-		{ value: 'sharp', label: 'Sharp', description: 'Tight corners' },
-		{ value: 'soft', label: 'Soft', description: 'Gentle corners' },
-		{ value: 'rounded', label: 'Rounded', description: 'Friendly surfaces' },
-		{ value: 'pill', label: 'Pill', description: 'Capsule shapes' }
-	];
-</script>
-
-<section class="shape-section">
-	<div class="corner-grid">
-		{#each PRESETS as preset (preset.value)}
-			<Card.Root
-				as="button"
-				variant="interactive"
-				size="sm"
-				selected={wizardState.shape.radiusPreset === preset.value}
-				onclick={() => setRadiusPreset(preset.value)}
-			>
-				<Card.Content>
-					<div class="corner-option">
-						<div class="shape-hint" data-shape={preset.value}></div>
-						<div class="corner-meta">
-							<Text as="span" size="sm" weight="semibold">{preset.label}</Text>
-							<Text as="span" size="xs" color="muted">{preset.description}</Text>
-						</div>
-					</div>
-				</Card.Content>
-			</Card.Root>
-		{/each}
-	</div>
-
-	<div class="density-control">
-		<Text as="span" size="sm" weight="semibold">Spacing density</Text>
-		<SegmentedControl.Root value={wizardState.shape.density}>
-			<SegmentedControl.Item value="compact" onclick={() => setDensity('compact')}>
-				Compact
-			</SegmentedControl.Item>
-			<SegmentedControl.Item value="default" onclick={() => setDensity('default')}>
-				Default
-			</SegmentedControl.Item>
-			<SegmentedControl.Item value="spacious" onclick={() => setDensity('spacious')}>
-				Spacious
-			</SegmentedControl.Item>
-		</SegmentedControl.Root>
-	</div>
-</section>
-
-<style>
-	.shape-section {
-		display: grid;
-		gap: var(--dry-space-5);
-		container-type: inline-size;
-	}
-
-	.corner-grid {
-		display: grid;
-		grid-template-columns: repeat(4, minmax(0, 1fr));
-		gap: var(--dry-space-4);
-	}
-
-	.corner-option {
-		display: grid;
-		gap: var(--dry-space-3);
-		justify-items: start;
-	}
-
-	.corner-meta {
-		display: grid;
-		gap: var(--dry-space-1);
-	}
-
-	.shape-hint {
-		aspect-ratio: 1;
-		height: 2.5rem;
-		border: 2px solid var(--dry-color-stroke-strong);
-		background: var(--dry-color-bg-base);
-		transition: border-radius 0.2s ease;
-	}
-
-	.shape-hint[data-shape='sharp'] {
-		border-radius: 2px;
-	}
-
-	.shape-hint[data-shape='soft'] {
-		border-radius: 8px;
-	}
-
-	.shape-hint[data-shape='rounded'] {
-		border-radius: 16px;
-	}
-
-	.shape-hint[data-shape='pill'] {
-		border-radius: 9999px;
-	}
-
-	.density-control {
-		display: grid;
-		grid-template-columns: auto minmax(0, 20rem);
-		align-items: center;
-		gap: var(--dry-space-4);
-	}
-
-	@container (max-width: 40rem) {
-		.corner-grid {
-			grid-template-columns: repeat(2, minmax(0, 1fr));
-		}
-	}
-
-	@container (max-width: 30rem) {
-		.density-control {
-			grid-template-columns: 1fr;
-		}
-	}
-</style>

package/dist/steps/Shape.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Shape: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Shape = InstanceType<typeof Shape>;
-export default Shape;

package/dist/steps/Typography.svelte

@@ -1,115 +0,0 @@
-<script lang="ts">
-	import { Card } from '@dryui/ui/card';
-	import { SegmentedControl } from '@dryui/ui/segmented-control';
-	import { Text } from '@dryui/ui/text';
-	import {
-		FONT_STACKS,
-		setFontPreset,
-		setTypeScale,
-		wizardState,
-		type FontPreset
-	} from '../state.svelte.js';
-
-	const FONT_SAMPLES: Record<FontPreset, string> = {
-		System: 'Fast, neutral, and familiar',
-		Humanist: 'Warm curves for readable product copy',
-		Geometric: 'Sharper rhythm with a modern edge',
-		Classical: 'Refined without turning formal',
-		Serif: 'Editorial and literary by default',
-		Mono: 'Technical, precise, and utilitarian'
-	};
-
-	const FONT_PRESETS = (Object.keys(FONT_STACKS) as FontPreset[]).map((name) => ({
-		name,
-		stack: FONT_STACKS[name],
-		sample: FONT_SAMPLES[name]
-	}));
-</script>
-
-<section class="typography-section">
-	<div class="font-grid">
-		{#each FONT_PRESETS as preset (preset.name)}
-			<Card.Root
-				as="button"
-				variant="interactive"
-				size="sm"
-				selected={wizardState.typography.fontPreset === preset.name}
-				onclick={() => setFontPreset(preset.name)}
-			>
-				<Card.Content>
-					<div class="font-option" style:--_stack={preset.stack}>
-						<span class="font-display">Ag</span>
-						<div class="font-meta">
-							<Text as="span" size="sm" weight="semibold">{preset.name}</Text>
-							<Text as="span" size="xs" color="muted">{preset.sample}</Text>
-						</div>
-					</div>
-				</Card.Content>
-			</Card.Root>
-		{/each}
-	</div>
-
-	<div class="scale-control">
-		<Text as="span" size="sm" weight="semibold">Type scale</Text>
-		<SegmentedControl.Root value={wizardState.typography.scale}>
-			<SegmentedControl.Item value="compact" onclick={() => setTypeScale('compact')}>
-				Compact
-			</SegmentedControl.Item>
-			<SegmentedControl.Item value="default" onclick={() => setTypeScale('default')}>
-				Default
-			</SegmentedControl.Item>
-			<SegmentedControl.Item value="spacious" onclick={() => setTypeScale('spacious')}>
-				Spacious
-			</SegmentedControl.Item>
-		</SegmentedControl.Root>
-	</div>
-</section>
-
-<style>
-	.typography-section {
-		display: grid;
-		gap: var(--dry-space-5);
-		container-type: inline-size;
-	}
-
-	.font-grid {
-		display: grid;
-		grid-template-columns: repeat(3, minmax(0, 1fr));
-		gap: var(--dry-space-4);
-	}
-
-	.font-option {
-		display: grid;
-		gap: var(--dry-space-2);
-	}
-
-	.font-display {
-		font-family: var(--_stack, inherit);
-		font-size: 2rem;
-		line-height: 1;
-	}
-
-	.font-meta {
-		display: grid;
-		gap: var(--dry-space-1);
-	}
-
-	.scale-control {
-		display: grid;
-		grid-template-columns: auto minmax(0, 20rem);
-		align-items: center;
-		gap: var(--dry-space-4);
-	}
-
-	@container (max-width: 40rem) {
-		.font-grid {
-			grid-template-columns: repeat(2, minmax(0, 1fr));
-		}
-	}
-
-	@container (max-width: 30rem) {
-		.scale-control {
-			grid-template-columns: 1fr;
-		}
-	}
-</style>

package/dist/steps/Typography.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Typography: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Typography = InstanceType<typeof Typography>;
-export default Typography;