@dryui/theme-wizard 1.0.0

package/dist/steps/Shape.svelte

@@ -0,0 +1,121 @@
+<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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,115 @@
+<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

@@ -0,0 +1,18 @@
+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;

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dryui/theme-wizard",
+  "version": "1.0.0",
+  "author": "Rob Balfre",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rob-balfre/dryui.git",
+    "directory": "packages/theme-wizard"
+  },
+  "homepage": "https://github.com/rob-balfre/dryui#readme",
+  "bugs": {
+    "url": "https://github.com/rob-balfre/dryui/issues"
+  },
+  "type": "module",
+  "svelte": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "svelte": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./engine": {
+      "types": "./src/engine/index.ts",
+      "default": "./src/engine/index.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "svelte-package -i src",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "peerDependencies": {
+    "@dryui/primitives": "workspace:*",
+    "@dryui/ui": "workspace:*",
+    "lucide-svelte": ">=1.0.1",
+    "svelte": "^5.55.1"
+  },
+  "devDependencies": {
+    "@dryui/lint": "workspace:*",
+    "@dryui/primitives": "workspace:*",
+    "@dryui/ui": "workspace:*",
+    "lucide-svelte": "^1.0.1",
+    "svelte": "^5.55.1",
+    "@sveltejs/package": "^2.5.7",
+    "svelte-check": "^4.4.5",
+    "bun-types": "^1.3.11",
+    "typescript": "^6.0.2"
+  }
+}