@fastwork/xosmoz-svelte 0.0.21

package/dist/docs/foundation/Themes.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Themes: import("svelte").Component<Record<string, never>, {}, "">;
+type Themes = ReturnType<typeof Themes>;
+export default Themes;

package/dist/docs/foundation/Typography.svelte

@@ -0,0 +1,622 @@
+<script lang="ts">
+	import { typography } from '@fastwork/xosmoz-theme'
+	import type { TypographyToken } from '@fastwork/xosmoz-theme'
+	import { createClipboardHandler } from '../../utils/clipboard'
+
+	// Track copied state
+	let copiedVar = $state('')
+
+	// Sample text for previews
+	let sampleText = $state(
+		'สวัสดี The quick brown fox jumps over the lazy dog',
+	)
+
+	// Create clipboard handler with state management
+	const copyToClipboard = createClipboardHandler(
+		() => copiedVar,
+		(val) => (copiedVar = val),
+	)
+
+	// Helper to convert camelCase to kebab-case
+	function toKebabCase(str: string) {
+		return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+	}
+
+	// Token display type
+	interface TokenDisplay extends TypographyToken {
+		name: string
+		cssVar: string
+	}
+
+	// Helper to create token entry
+	function createToken(key: string, token: TypographyToken): TokenDisplay {
+		return {
+			name: key,
+			cssVar: `--xz-font-${toKebabCase(key)}`,
+			...token,
+		}
+	}
+
+	// Typography groups for display (filtered from typography.font)
+	const typographyGroups = [
+		{
+			title: 'Headings',
+			description: 'Large display text for page and section headers.',
+			tokens: Object.entries(typography.font)
+				.filter(([key]) => key.startsWith('heading'))
+				.map(([key, token]) =>
+					createToken(key, token as TypographyToken),
+				),
+		},
+		{
+			title: 'Titles',
+			description: 'Medium-sized text for card headers and subsections.',
+			tokens: Object.entries(typography.font)
+				.filter(([key]) => key.startsWith('title'))
+				.map(([key, token]) =>
+					createToken(key, token as TypographyToken),
+				),
+		},
+		{
+			title: 'Subtitles',
+			description:
+				'Supporting text with bold and regular weight variants.',
+			tokens: Object.entries(typography.font)
+				.filter(([key]) => key.startsWith('subtitle'))
+				.map(([key, token]) =>
+					createToken(key, token as TypographyToken),
+				),
+		},
+		{
+			title: 'Body',
+			description: 'Standard text for paragraphs and general content.',
+			tokens: Object.entries(typography.font)
+				.filter(([key]) => key.startsWith('body'))
+				.map(([key, token]) =>
+					createToken(key, token as TypographyToken),
+				),
+		},
+	]
+</script>
+
+<div class="typography-page">
+	<div class="header">
+		<h1>Typography</h1>
+		<p class="lead">
+			Font shorthand tokens for the CSS <code>font</code> property. Each token
+			combines weight, size/line-height, and font-family.
+		</p>
+		<div class="usage-examples">
+			<span class="usage-label">CSS</span>
+			<pre class="usage-code"><code
+					>{`.element {
+  font: var(--xz-font-heading1);
+
+  font-size: var(--xz-font-size-400);
+  font-family: var(--xz-font-family-primary);
+  line-height: var(--xz-line-height-150pct);
+}`}</code
+				></pre>
+			<span class="usage-label">JS</span>
+			<pre class="usage-code"><code
+					>{`import { typography } from '@fastwork/xosmoz-theme';
+
+typography.font.heading1;
+
+typography.fontSize[400];
+typography.fontFamily.primary;
+typography.lineHeight['150pct'];`}</code
+				></pre>
+		</div>
+		<div class="sample-text-input">
+			<label for="sample-text">Preview text</label>
+			<input
+				id="sample-text"
+				type="text"
+				bind:value={sampleText}
+				placeholder="Enter sample text..."
+			/>
+		</div>
+	</div>
+
+	<!-- Typography Groups -->
+	{#each typographyGroups as group (group.title)}
+		<section class="typography-group">
+			<div class="group-header">
+				<h2>{group.title}</h2>
+				<span class="group-desc">{group.description}</span>
+			</div>
+
+			<div class="token-table">
+				<div class="table-header">
+					<div class="col-token">Token</div>
+					<div class="col-weight">Weight</div>
+					<div class="col-size">Desktop</div>
+					<div class="col-size">Mobile</div>
+					<div class="col-preview">Preview</div>
+				</div>
+
+				{#each group.tokens as token (token.name)}
+					<div class="table-row">
+						<div class="col-token">
+							<button
+								class="token-btn"
+								class:copied={copiedVar === token.cssVar}
+								onclick={() => copyToClipboard(token.cssVar)}
+								title="Click to copy"
+							>
+								{token.cssVar}
+							</button>
+						</div>
+						<div class="col-weight">{token.fontWeight}</div>
+						<div class="col-size">{token.fontSize.desktop}</div>
+						<div class="col-size">{token.fontSize.mobile}</div>
+						<div class="col-preview">
+							<span
+								class="preview-text"
+								style="font: {token.fontWeight} {token.fontSize
+									.desktop}/{token.lineHeight} {token.fontFamily};"
+							>
+								{sampleText}
+							</span>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</section>
+	{/each}
+
+	<!-- Font Size Scale Reference -->
+	<section class="scale-section">
+		<h2>Font Size Scale</h2>
+		<p class="scale-desc">
+			Use <code>--xz-font-size-{'{key}'}</code> for individual font sizes.
+		</p>
+		<div class="scale-table">
+			<div class="scale-header">
+				<div class="scale-col-var">CSS Variable</div>
+				<div class="scale-col-value">Value</div>
+				<div class="scale-col-px">Pixels</div>
+			</div>
+			{#each Object.entries(typography.fontSize) as [key, value] (key)}
+				{@const cssVar = `--xz-font-size-${key}`}
+				{@const pxValue = parseFloat(value) * 16}
+				<div class="scale-row">
+					<button
+						class="scale-var"
+						class:copied={copiedVar === cssVar}
+						onclick={() => copyToClipboard(cssVar)}
+						title="Click to copy"
+					>
+						{cssVar}
+					</button>
+					<span class="scale-val">{value}</span>
+					<span class="scale-px">{pxValue}px</span>
+				</div>
+			{/each}
+		</div>
+	</section>
+
+	<!-- Line Height Reference -->
+	<section class="scale-section">
+		<h2>Line Height</h2>
+		<p class="scale-desc">
+			Use <code>--xz-line-height-{'{key}'}</code> for line heights.
+		</p>
+		<div class="scale-table">
+			<div class="scale-header">
+				<div class="scale-col-var">CSS Variable</div>
+				<div class="scale-col-value">Value</div>
+			</div>
+			{#each Object.entries(typography.lineHeight) as [key, value] (key)}
+				{@const cssVar = `--xz-line-height-${key}`}
+				<div class="scale-row">
+					<button
+						class="scale-var"
+						class:copied={copiedVar === cssVar}
+						onclick={() => copyToClipboard(cssVar)}
+						title="Click to copy"
+					>
+						{cssVar}
+					</button>
+					<span class="scale-val">{value}</span>
+				</div>
+			{/each}
+		</div>
+	</section>
+
+	<!-- Font Family Reference -->
+	<section class="scale-section">
+		<h2>Font Family</h2>
+		<p class="scale-desc">
+			Use <code>--xz-font-family-{'{key}'}</code> for font families.
+		</p>
+		<div class="font-family-list">
+			{#each Object.entries(typography.fontFamily) as [key, value] (key)}
+				{@const cssVar = `--xz-font-family-${key}`}
+				<div class="font-family-item">
+					<div class="font-family-header">
+						<button
+							class="scale-var"
+							class:copied={copiedVar === cssVar}
+							onclick={() => copyToClipboard(cssVar)}
+							title="Click to copy"
+						>
+							{cssVar}
+						</button>
+					</div>
+					<p
+						class="font-family-preview"
+						style="font-family: {value};"
+					>
+						{sampleText}
+					</p>
+					<code class="font-family-value">{value}</code>
+				</div>
+			{/each}
+		</div>
+	</section>
+</div>
+
+<style>
+	.typography-page {
+		background-color: var(--xz-color-bg-100);
+		font-family: var(--xz-font-family-primary, system-ui);
+		padding: 1.5rem;
+		max-width: 100%;
+	}
+
+	.header {
+		margin-bottom: 2rem;
+	}
+
+	h1 {
+		font-size: 2rem;
+		font-weight: 700;
+		margin-bottom: 0.5rem;
+		color: var(--xz-color-text);
+	}
+
+	h2 {
+		font-size: 1.125rem;
+		font-weight: 600;
+		color: var(--xz-color-text);
+		margin: 0;
+	}
+
+	.lead {
+		font-size: 0.9375rem;
+		color: var(--xz-color-content-200);
+		line-height: 1.5;
+		margin-bottom: 0.75rem;
+	}
+
+	.lead code {
+		background: var(--xz-color-bg-300);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.875em;
+	}
+
+	.usage-examples {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-top: 0.75rem;
+	}
+
+	.usage-label {
+		font-size: 0.5625rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--xz-color-content-200);
+		background: var(--xz-color-bg-300);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+		align-self: flex-start;
+	}
+
+	.usage-code {
+		margin: 0 0 0.5rem 0;
+		background: var(--xz-color-bg-200);
+		padding: 0.625rem 0.875rem;
+		border-radius: 0.25rem;
+		overflow-x: auto;
+	}
+
+	.usage-code code {
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.8125rem;
+		color: var(--xz-color-content-100);
+		line-height: 1.6;
+		white-space: pre;
+	}
+
+	/* Sample Text Input */
+	.sample-text-input {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		margin-top: 1rem;
+	}
+
+	.sample-text-input label {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--xz-color-content-200);
+		white-space: nowrap;
+	}
+
+	.sample-text-input input {
+		flex: 1;
+		max-width: 400px;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		font-family: inherit;
+		color: var(--xz-color-text);
+		background: var(--xz-color-bg-200);
+		border: 1px solid var(--xz-color-line-100);
+		border-radius: 0.375rem;
+		outline: none;
+		transition:
+			border-color 0.15s,
+			box-shadow 0.15s;
+	}
+
+	.sample-text-input input:focus {
+		border-color: var(--xz-color-primary-content-100);
+		box-shadow: 0 0 0 2px
+			var(--xz-color-primary-bg-100, rgba(59, 130, 246, 0.2));
+	}
+
+	.sample-text-input input::placeholder {
+		color: var(--xz-color-content-200);
+		opacity: 0.6;
+	}
+
+	/* Typography Groups */
+	.typography-group {
+		margin-bottom: 2rem;
+	}
+
+	.group-header {
+		display: flex;
+		align-items: baseline;
+		gap: 0.75rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.group-desc {
+		font-size: 0.8125rem;
+		color: var(--xz-color-content-200);
+	}
+
+	/* Token Table */
+	.token-table {
+		border: 1px solid var(--xz-color-line-100);
+		border-radius: 0.375rem;
+		overflow: hidden;
+	}
+
+	.table-header {
+		display: grid;
+		grid-template-columns: 240px 60px 70px 70px minmax(0, 1fr);
+		gap: 0.75rem;
+		padding: 0.5rem 0.75rem;
+		background: var(--xz-color-bg-300);
+		font-size: 0.6875rem;
+		font-weight: 600;
+		color: var(--xz-color-content-200);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.table-row {
+		display: grid;
+		grid-template-columns: 240px 60px 70px 70px minmax(0, 1fr);
+		gap: 0.75rem;
+		padding: 0.5rem 0.75rem;
+		align-items: center;
+		border-top: 1px solid var(--xz-color-line-100);
+		transition: background-color 0.1s;
+	}
+
+	.table-row:hover {
+		background: var(--xz-color-bg-200);
+	}
+
+	.col-weight,
+	.col-size {
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.8125rem;
+		color: var(--xz-color-content-100);
+	}
+
+	.col-preview {
+		overflow-x: auto;
+		max-width: 100%;
+	}
+
+	.token-btn {
+		background: none;
+		border: none;
+		padding: 0.25rem 0.5rem;
+		margin-left: -0.5rem;
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--xz-color-primary-content-100);
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: all 0.1s;
+		text-align: left;
+	}
+
+	.token-btn:hover {
+		background: var(--xz-color-bg-300);
+	}
+
+	.token-btn.copied {
+		background: var(--xz-color-success-bg-100, #22c55e);
+		color: white;
+	}
+
+	.preview-text {
+		color: var(--xz-color-text);
+		white-space: nowrap;
+		display: block;
+	}
+
+	/* Scale Section */
+	.scale-section {
+		margin-top: 2rem;
+	}
+
+	.scale-section h2 {
+		margin-bottom: 0.5rem;
+	}
+
+	.scale-desc {
+		font-size: 0.8125rem;
+		color: var(--xz-color-content-200);
+		margin-bottom: 0.75rem;
+	}
+
+	.scale-desc code {
+		background: var(--xz-color-bg-300);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.875em;
+	}
+
+	.scale-table {
+		border: 1px solid var(--xz-color-line-100);
+		border-radius: 0.375rem;
+		overflow: hidden;
+	}
+
+	.scale-header {
+		display: grid;
+		grid-template-columns: 1fr 80px 60px;
+		gap: 0.75rem;
+		padding: 0.5rem 0.75rem;
+		background: var(--xz-color-bg-300);
+		font-size: 0.6875rem;
+		font-weight: 600;
+		color: var(--xz-color-content-200);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.scale-row {
+		display: grid;
+		grid-template-columns: 1fr 80px 60px;
+		gap: 0.75rem;
+		padding: 0.375rem 0.75rem;
+		align-items: center;
+		border-top: 1px solid var(--xz-color-line-100);
+	}
+
+	.scale-row:hover {
+		background: var(--xz-color-bg-200);
+	}
+
+	.scale-var {
+		background: none;
+		border: none;
+		padding: 0.25rem 0.5rem;
+		margin-left: -0.5rem;
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.8125rem;
+		color: var(--xz-color-primary-content-100);
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: all 0.1s;
+		text-align: left;
+	}
+
+	.scale-var:hover {
+		background: var(--xz-color-bg-300);
+	}
+
+	.scale-var.copied {
+		background: var(--xz-color-success-bg-100, #22c55e);
+		color: white;
+	}
+
+	.scale-val,
+	.scale-px {
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.8125rem;
+		color: var(--xz-color-content-100);
+	}
+
+	/* Font Family Section */
+	.font-family-list {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.font-family-item {
+		border: 1px solid var(--xz-color-line-100);
+		border-radius: 0.375rem;
+		overflow: hidden;
+	}
+
+	.font-family-header {
+		padding: 0.5rem 0.75rem;
+		background: var(--xz-color-bg-300);
+	}
+
+	.font-family-preview {
+		padding: 0.75rem;
+		font-size: 1.25rem;
+		color: var(--xz-color-text);
+		margin: 0;
+	}
+
+	.font-family-value {
+		display: block;
+		padding: 0.5rem 0.75rem;
+		font-family: var(--xz-font-family-mono, monospace);
+		font-size: 0.75rem;
+		color: var(--xz-color-content-200);
+		background: var(--xz-color-bg-200);
+		word-break: break-all;
+	}
+
+	/* Responsive */
+	@media (max-width: 900px) {
+		.table-header {
+			display: none;
+		}
+
+		.table-row {
+			grid-template-columns: 1fr;
+			gap: 0.25rem;
+			padding: 0.75rem;
+		}
+
+		.col-token {
+			order: 1;
+		}
+
+		.col-preview {
+			order: 2;
+			margin-top: 0.25rem;
+		}
+
+		.col-weight,
+		.col-size {
+			display: none;
+		}
+
+		.token-btn {
+			margin-left: 0;
+		}
+	}
+</style>

package/dist/docs/foundation/Typography.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Typography: import("svelte").Component<Record<string, never>, {}, "">;
+type Typography = ReturnType<typeof Typography>;
+export default Typography;

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @fastwork/xosmoz-svelte
+ * Svelte 5 components for the Xosmoz design system
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Button } from '@fastwork/xosmoz-svelte';
+ * </script>
+ *
+ * <Button variant="primary" size="medium">Click me</Button>
+ * ```
+ *
+ * @example CSS Setup
+ * ```ts
+ * // In your app's entry point or layout
+ * import '@fastwork/xosmoz-svelte/styles.css';
+ * ```
+ */
+export { default as Button } from './components/Button.svelte';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './components/Button.svelte';

package/dist/index.js

@@ -0,0 +1,21 @@
+/**
+ * @fastwork/xosmoz-svelte
+ * Svelte 5 components for the Xosmoz design system
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Button } from '@fastwork/xosmoz-svelte';
+ * </script>
+ *
+ * <Button variant="primary" size="medium">Click me</Button>
+ * ```
+ *
+ * @example CSS Setup
+ * ```ts
+ * // In your app's entry point or layout
+ * import '@fastwork/xosmoz-svelte/styles.css';
+ * ```
+ */
+// Components
+export { default as Button } from './components/Button.svelte';

package/dist/styles.css

@@ -0,0 +1,25 @@
+/**
+ * Xosmoz Svelte Component Styles
+ *
+ * This file imports all required styles for xosmoz-svelte components.
+ *
+ * Usage in your app:
+ *
+ * Option 1: Import this file (includes theme and component styles)
+ *   import '@fastwork/xosmoz-svelte/styles.css';
+ *
+ * Option 2: Import individually for more control
+ *   import '@fastwork/xosmoz-theme/base.css';
+ *   import '@fastwork/xosmoz-theme/themes.css';
+ *   import '@fastwork/xosmoz-css/component.css';
+ */
+
+/* Base styles and design tokens */
+@import '@fastwork/xosmoz-theme/base.css';
+
+/* Theme CSS (light & dark mode support) */
+@import '@fastwork/xosmoz-theme/themes.css';
+
+/* Component styles */
+@import '@fastwork/xosmoz-css/component.css';
+