@x33025/sveltely 0.1.1 → 0.1.2

package/dist/components/Library/NumberField/NumberField.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { tooltip } from '../../../actions/tooltip';
+	import { surfaceStyle, type StyleProps } from '../../../style/surface';
+	import {
+		textEditorStyle,
+		type TextEditorProps,
+		type TextInputMode
+	} from '../../../style/text-editor';
+
+	type Props = {
+		value?: number | null;
+		help?: string;
+		error?: string | null;
+		disabled?: boolean;
+		placeholder?: string;
+		name?: string;
+		autocomplete?: HTMLInputAttributes['autocomplete'];
+		required?: boolean;
+		readonly?: boolean;
+		inputmode?: Extract<TextInputMode, 'numeric' | 'decimal'>;
+		min?: number;
+		max?: number;
+		step?: number | 'any';
+	} & StyleProps &
+		TextEditorProps;
+
+	let {
+		value = $bindable(null),
+		help,
+		error = null,
+		disabled = false,
+		placeholder = '',
+		name,
+		autocomplete,
+		required = false,
+		readonly = false,
+		inputmode = 'decimal',
+		min,
+		max,
+		step,
+		textAlign = 'right',
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	}: Props = $props();
+
+	const styleProps = $derived({
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	});
+	const textEditorProps = $derived({ textAlign });
+	const rootStyle = $derived.by(() =>
+		[surfaceStyle(styleProps, 'text-field'), textEditorStyle(textEditorProps)].filter(Boolean).join(' ')
+	);
+	const describedBy = $derived(help ? 'text-field-message' : undefined);
+
+	let draftValue = $state(formatValue(value));
+	let committedValue = $state(value);
+
+	$effect(() => {
+		if (value !== committedValue) {
+			draftValue = formatValue(value);
+			committedValue = value;
+		}
+	});
+
+	function formatValue(nextValue: number | null | undefined) {
+		return nextValue === null || nextValue === undefined ? '' : String(nextValue);
+	}
+
+	function handleInput(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		const nextValue = input.value;
+
+		draftValue = nextValue;
+
+		if (nextValue === '') {
+			value = null;
+			committedValue = null;
+			return;
+		}
+
+		const numericValue = Number(nextValue);
+
+		if (!input.validity.badInput && Number.isFinite(numericValue)) {
+			value = numericValue;
+			committedValue = numericValue;
+		}
+	}
+
+	function handleBlur() {
+		if (draftValue !== formatValue(value)) {
+			draftValue = formatValue(value);
+		}
+	}
+</script>
+
+<div
+	use:tooltip={{ label: error ?? '', disabled: !error }}
+	class="text-field"
+	style={rootStyle}
+	data-disabled={disabled ? 'true' : 'false'}
+	data-error={error ? 'true' : 'false'}
+>
+	<input
+		value={draftValue}
+		type="number"
+		{disabled}
+		{name}
+		{autocomplete}
+		{required}
+		{readonly}
+		{inputmode}
+		{placeholder}
+		{min}
+		{max}
+		{step}
+		aria-invalid={error ? 'true' : undefined}
+		aria-describedby={describedBy}
+		class="text-field-input"
+		oninput={handleInput}
+		onblur={handleBlur}
+	/>
+
+	{#if help}
+		<span id="text-field-message" class="text-field-message">{help}</span>
+	{/if}
+</div>
+
+<style>
+	.text-field {
+		display: inline-flex;
+		width: 100%;
+		min-width: 0;
+		flex-direction: column;
+		gap: var(--text-field-gap, calc(var(--sveltely-gap) * 0.75));
+		color: var(--text-field-color, var(--color-zinc-900));
+		font-size: var(--text-field-font-size, calc(var(--sveltely-font-size) * 0.875));
+	}
+
+	.text-field-input {
+		width: 100%;
+		min-width: 0;
+		border: 1px solid var(--text-field-border-color, var(--sveltely-border-color));
+		border-radius: var(--text-field-border-radius, var(--sveltely-border-radius));
+		background: var(--text-field-background, white);
+		color: inherit;
+		font-variant-numeric: tabular-nums;
+		line-height: 1.25rem;
+		outline: none;
+		padding:
+			var(--text-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
+			var(--text-field-padding-x, var(--sveltely-padding-x));
+		text-align: var(--text-field-text-align, start);
+		transition: color 150ms, border-color 150ms, background-color 150ms, box-shadow 150ms;
+	}
+
+	.text-field-input:focus {
+		border-color: color-mix(in oklab, var(--sveltely-primary-color) 50%, white);
+	}
+
+	.text-field-input::placeholder {
+		color: var(--color-zinc-400);
+	}
+
+	.text-field-message {
+		color: var(--color-zinc-500);
+		font-size: calc(var(--text-field-font-size, 0.875rem) * 0.857);
+		line-height: 1.25;
+	}
+
+	.text-field[data-error='true'] .text-field-input {
+		border-color: var(--color-red-500);
+	}
+
+	.text-field[data-disabled='true'] {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+</style>

package/dist/components/Library/NumberField/NumberField.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type StyleProps } from '../../../style/surface';
+import { type TextEditorProps, type TextInputMode } from '../../../style/text-editor';
+type Props = {
+    value?: number | null;
+    help?: string;
+    error?: string | null;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    required?: boolean;
+    readonly?: boolean;
+    inputmode?: Extract<TextInputMode, 'numeric' | 'decimal'>;
+    min?: number;
+    max?: number;
+    step?: number | 'any';
+} & StyleProps & TextEditorProps;
+declare const NumberField: import("svelte").Component<Props, {}, "value">;
+type NumberField = ReturnType<typeof NumberField>;
+export default NumberField;

package/dist/components/Library/NumberField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './NumberField.svelte';

package/dist/components/Library/NumberField/index.js

@@ -0,0 +1 @@
+export { default } from './NumberField.svelte';

package/dist/components/Library/ScrollView/ScrollView.svelte

@@ -1,25 +1,42 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import { surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { ScrollAxis } from '../../../style/scroll';
 
 	type Props = {
 		children: Snippet;
 		viewport?: HTMLElement | null;
-		axis?: 'vertical' | 'horizontal' | 'both';
+		axis?: ScrollAxis;
 		contentStyles?: StyleProps;
-	};
+	} & StyleProps;
 
 	let {
 		children,
 		viewport = $bindable<HTMLElement | null>(null),
 		axis = 'vertical',
 		contentStyles = {},
-		...restProps
-	}: Props & StyleProps & Record<string, unknown> = $props();
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	}: Props = $props();
 
-	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
-	const styleProps = $derived(extractedStyleProps.styleProps);
-	const props = $derived(extractedStyleProps.restProps);
+	const styleProps = $derived({
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	});
 	const viewportStyle = $derived.by(() => surfaceStyle(styleProps, 'scroll-view'));
 	const contentStyle = $derived.by(() => surfaceStyle(contentStyles, 'scroll-view-content'));
 </script>
@@ -31,7 +48,6 @@
 	class:scroll-view-horizontal={axis === 'horizontal'}
 	class:scroll-view-both={axis === 'both'}
 	style={viewportStyle}
-	{...props}
 >
 	<div class="scroll-view-content" style={contentStyle}>
 		{@render children()}

package/dist/components/Library/ScrollView/ScrollView.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 import { type StyleProps } from '../../../style/surface';
+import type { ScrollAxis } from '../../../style/scroll';
 type Props = {
     children: Snippet;
     viewport?: HTMLElement | null;
-    axis?: 'vertical' | 'horizontal' | 'both';
+    axis?: ScrollAxis;
     contentStyles?: StyleProps;
-};
-type $$ComponentProps = Props & StyleProps & Record<string, unknown>;
-declare const ScrollView: import("svelte").Component<$$ComponentProps, {}, "viewport">;
+} & StyleProps;
+declare const ScrollView: import("svelte").Component<Props, {}, "viewport">;
 type ScrollView = ReturnType<typeof ScrollView>;
 export default ScrollView;

package/dist/components/Library/Spacer/Spacer.svelte

@@ -0,0 +1,7 @@
+<div class="spacer"></div>
+
+<style>
+	.spacer {
+		flex: 1 1 auto;
+	}
+</style>

package/dist/components/Library/Spacer/Spacer.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Spacer;
+type Spacer = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Spacer: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/components/Library/Spacer/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Spacer.svelte';

package/dist/components/Library/Spacer/index.js

@@ -0,0 +1 @@
+export { default } from './Spacer.svelte';

package/dist/components/Library/TextField/TextField.demo.svelte

@@ -0,0 +1,14 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'TextField',
+		description: 'Token-aware text input with help and error states.'
+	};
+</script>
+
+<script lang="ts">
+	import TextField from './TextField.svelte';
+
+	let value = $state('Sveltely');
+</script>
+
+<TextField bind:value placeholder="Enter name" help="Value: {value}" />

package/dist/components/Library/TextField/TextField.demo.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import TextField from './TextField.svelte';
+declare const TextField: import("svelte").Component<Record<string, never>, {}, "">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/dist/components/Library/TextField/TextField.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { tooltip } from '../../../actions/tooltip';
+	import { surfaceStyle, type StyleProps } from '../../../style/surface';
+	import {
+		textEditorStyle,
+		type TextEditorProps,
+		type TextFieldType,
+		type TextInputMode
+	} from '../../../style/text-editor';
+
+	type Props = {
+		value?: string;
+		help?: string;
+		error?: string | null;
+		type?: TextFieldType;
+		disabled?: boolean;
+		placeholder?: string;
+		name?: string;
+		autocomplete?: HTMLInputAttributes['autocomplete'];
+		required?: boolean;
+		readonly?: boolean;
+		inputmode?: TextInputMode;
+	} & StyleProps &
+		TextEditorProps;
+
+	let {
+		value = $bindable(''),
+		help,
+		error = null,
+		type = 'text',
+		disabled = false,
+		placeholder = '',
+		name,
+		autocomplete,
+		required = false,
+		readonly = false,
+		inputmode,
+		textAlign,
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	}: Props = $props();
+
+	const styleProps = $derived({
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	});
+	const textEditorProps = $derived({ textAlign });
+	const rootStyle = $derived.by(() =>
+		[surfaceStyle(styleProps, 'text-field'), textEditorStyle(textEditorProps)].filter(Boolean).join(' ')
+	);
+	const describedBy = $derived(help ? 'text-field-message' : undefined);
+</script>
+
+<div
+	use:tooltip={{ label: error ?? '', disabled: !error }}
+	class="text-field"
+	style={rootStyle}
+	data-disabled={disabled ? 'true' : 'false'}
+	data-error={error ? 'true' : 'false'}
+>
+	<input
+		bind:value
+		{type}
+		{disabled}
+		{name}
+		{autocomplete}
+		{required}
+		{readonly}
+		{inputmode}
+		{placeholder}
+		aria-invalid={error ? 'true' : undefined}
+		aria-describedby={describedBy}
+		class="text-field-input"
+	/>
+
+	{#if help}
+		<span id="text-field-message" class="text-field-message">{help}</span>
+	{/if}
+</div>
+
+<style>
+	.text-field {
+		display: inline-flex;
+		width: 100%;
+		min-width: 0;
+		flex-direction: column;
+		gap: var(--text-field-gap, calc(var(--sveltely-gap) * 0.75));
+		color: var(--text-field-color, var(--color-zinc-900));
+		font-size: var(--text-field-font-size, calc(var(--sveltely-font-size) * 0.875));
+	}
+
+	.text-field-input {
+		width: 100%;
+		min-width: 0;
+		border: 1px solid var(--text-field-border-color, var(--sveltely-border-color));
+		border-radius: var(--text-field-border-radius, var(--sveltely-border-radius));
+		background: var(--text-field-background, white);
+		color: inherit;
+		line-height: 1.25rem;
+		outline: none;
+		padding:
+			var(--text-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
+			var(--text-field-padding-x, var(--sveltely-padding-x));
+		text-align: var(--text-field-text-align, start);
+		transition: color 150ms, border-color 150ms, background-color 150ms, box-shadow 150ms;
+	}
+
+	.text-field-input:focus {
+		border-color: color-mix(in oklab, var(--sveltely-primary-color) 50%, white);
+	}
+
+	.text-field-input::placeholder {
+		color: var(--color-zinc-400);
+	}
+
+	.text-field-message {
+		color: var(--color-zinc-500);
+		font-size: calc(var(--text-field-font-size, 0.875rem) * 0.857);
+		line-height: 1.25;
+	}
+
+	.text-field[data-error='true'] .text-field-input {
+		border-color: var(--color-red-500);
+	}
+
+	.text-field[data-error='true'] .text-field-message {
+		color: var(--color-red-600);
+	}
+
+	.text-field[data-disabled='true'] {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+</style>

package/dist/components/Library/TextField/TextField.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type StyleProps } from '../../../style/surface';
+import { type TextEditorProps, type TextFieldType, type TextInputMode } from '../../../style/text-editor';
+type Props = {
+    value?: string;
+    help?: string;
+    error?: string | null;
+    type?: TextFieldType;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    required?: boolean;
+    readonly?: boolean;
+    inputmode?: TextInputMode;
+} & StyleProps & TextEditorProps;
+declare const TextField: import("svelte").Component<Props, {}, "value">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/dist/components/Library/TextField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TextField.svelte';

package/dist/components/Library/TextField/index.js

@@ -0,0 +1 @@
+export { default } from './TextField.svelte';

package/dist/components/Library/VStack/VStack.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+	} & LayoutProps &
+		StyleProps;
+
+	let { children, ...restProps }: Props = $props();
+
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const layoutProps = $derived(extractedLayoutProps.layoutProps);
+	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
+	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const rootStyle = $derived.by(() =>
+		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'stack')].filter(Boolean).join(' ')
+	);
+</script>
+
+<div class="vstack" style={rootStyle}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.vstack {
+		display: flex;
+		min-width: min-content;
+		min-height: min-content;
+		flex-direction: column;
+		gap: var(--stack-gap, 0px);
+		border-radius: var(--stack-border-radius, 0px);
+		padding:
+			var(--stack-padding-y, 0px)
+			var(--stack-padding-x, 0px);
+		font-size: var(--stack-font-size, inherit);
+		--divider-width: 100%;
+		--divider-height: 1px;
+		--divider-align-self: auto;
+	}
+</style>

package/dist/components/Library/VStack/VStack.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+} & LayoutProps & StyleProps;
+declare const VStack: import("svelte").Component<Props, {}, "">;
+type VStack = ReturnType<typeof VStack>;
+export default VStack;

package/dist/components/Library/VStack/index.d.ts

@@ -0,0 +1 @@
+export { default } from './VStack.svelte';

package/dist/components/Library/VStack/index.js

@@ -0,0 +1 @@
+export { default } from './VStack.svelte';

package/dist/components/Local/ComponentGrid.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { Component } from 'svelte';
+	import Grid from '../Library/Grid';
+	import GridItem from '../Library/GridItem';
 	import HeroCard from './HeroCard.svelte';
 
 	type DemoEntry = {
@@ -17,38 +19,20 @@
 	let { demos }: Props = $props();
 </script>
 
-<div
-	class="component-grid grid gap-4 overflow-auto md:grid-flow-dense md:grid-cols-2 xl:grid-cols-3"
-	style="padding: calc(var(--sveltely-padding-y) * 2) calc(var(--sveltely-padding-x) * 2);"
+<Grid
+	columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))"
+	autoRows={14}
+	gap={1}
+	paddingX="calc(var(--sveltely-padding-x) * 2)"
+	paddingY="calc(var(--sveltely-padding-y) * 2)"
+	overflow="auto"
 >
 	{#each demos as entry}
 		{@const DemoComponent = entry.component}
-		<HeroCard
-			title={entry.name}
-			description={entry.description}
-			columnSpan={entry.columnSpan ?? 1}
-			rowSpan={entry.rowSpan ?? 1}
-		>
-			<DemoComponent />
-		</HeroCard>
+		<GridItem columnSpan={entry.columnSpan ?? 1} rowSpan={entry.rowSpan ?? 1}>
+			<HeroCard title={entry.name} description={entry.description}>
+				<DemoComponent />
+			</HeroCard>
+		</GridItem>
 	{/each}
-</div>
-
-<style>
-	.component-grid :global(.hero-card) {
-		--sveltely-border-width: 1px;
-		min-height: 14rem;
-		border: 1px solid var(--sveltely-border-color);
-		border-radius: 0.75rem;
-		align-items: stretch;
-	}
-
-	.component-grid :global(.hero-card h1) {
-		font-size: 1rem;
-		line-height: 1.5rem;
-	}
-
-	.component-grid :global(.hero-card p) {
-		max-width: none;
-	}
-</style>
+</Grid>