@x33025/sveltely 0.0.58 → 0.1.0

package/dist/components/Library/Sheet/Sheet.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { portalContent } from '../../../actions/portal';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+interface Props {
+		trigger?: Snippet;
+		open?: boolean;
+		label?: string;
+		onClose?: () => void;
+		maxWidth?: string;
+		children?: Snippet;
+	}
+
+	let {
+		trigger,
+		open = $bindable(false),
+		label = 'Dialog',
+		onClose,
+		maxWidth = '32rem',
+		children,
+		...restProps
+	}: Props & StyleProps & Record<string, unknown> = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'sheet'));
+	const panelStyle = $derived.by(() => {
+		const declarations = [`max-width: ${maxWidth};`];
+		const stylePropDeclarations = surfaceStyle(styleProps, 'sheet');
+		if (stylePropDeclarations) declarations.push(stylePropDeclarations);
+		return declarations.join(' ');
+	});
+
+	function close() {
+		if (!open) return;
+		open = false;
+		onClose?.();
+	}
+
+	function show() {
+		open = true;
+	}
+
+	$effect(() => {
+		if (!open) return;
+		const onKey = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') close();
+		};
+		window.addEventListener('keydown', onKey);
+		return () => window.removeEventListener('keydown', onKey);
+	});
+</script>
+
+{#if trigger}
+	<button type="button" class="sheet-trigger" style={rootStyle} onclick={show}>
+		{@render trigger()}
+	</button>
+{/if}
+
+{#if open}
+	<div class="center fixed inset-0 z-50 flex" use:portalContent>
+		<button
+			type="button"
+			aria-label="Close dialog"
+			class="sheet-overlay absolute inset-0"
+			onclick={close}
+		></button>
+		<div
+			role="dialog"
+			aria-modal="true"
+			aria-label={label}
+			style={panelStyle}
+			class="sheet relative z-10 flex max-h-full w-full flex-col overflow-auto"
+		>
+			<div class="flex-1">
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.sheet-trigger {
+		display: inline-flex;
+		align-items: center;
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: white;
+		color: var(--color-zinc-800);
+		gap: var(--sveltely-gap);
+		padding: calc(var(--sveltely-padding-y) * 0.67) var(--sveltely-padding-x);
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		transition: color 150ms, border-color 150ms, background-color 150ms;
+	}
+
+	.sheet-trigger:hover {
+		background: var(--sveltely-hover-color);
+	}
+
+	.sheet {
+		border-radius: var(--sveltely-border-radius);
+		background: white;
+		padding: calc(var(--sveltely-padding-y) * 1.33) calc(var(--sveltely-padding-x) * 1.33);
+	}
+
+	.sheet-overlay {
+		background: rgb(0 0 0 / 0.2);
+		backdrop-filter: blur(4px);
+	}
+</style>

package/dist/components/{Sheet → Library/Sheet}/Sheet.svelte.d.ts

@@ -1,12 +1,14 @@
 import type { Snippet } from 'svelte';
+import { type StyleProps } from '../../../style/surface';
 interface Props {
+    trigger?: Snippet;
     open?: boolean;
     label?: string;
     onClose?: () => void;
-    class?: string;
     maxWidth?: string;
     children?: Snippet;
 }
-declare const Sheet: import("svelte").Component<Props, {}, "open">;
+type $$ComponentProps = Props & StyleProps & Record<string, unknown>;
+declare const Sheet: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Sheet = ReturnType<typeof Sheet>;
 export default Sheet;

package/dist/components/{Slider.demo.svelte → Library/Slider/Slider.demo.svelte}

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Slider',
-		description: 'Range input with shared slider styling.',
-		isProminent: false
+		description: 'Range input with shared slider styling.'
 	};
 </script>
 
@@ -13,6 +12,6 @@
 </script>
 
 <div class="vstack w-full max-w-sm gap-2">
-	<Slider bind:value min={0} max={100} class="w-full" />
+	<Slider bind:value min={0} max={100} />
 	<p class="text-xs text-zinc-500">Value: {value}</p>
 </div>

package/dist/components/{Slider.demo.svelte.d.ts → Library/Slider/Slider.demo.svelte.d.ts}

@@ -1,7 +1,6 @@
 export declare const demo: {
     name: string;
     description: string;
-    isProminent: boolean;
 };
 import Slider from './Slider.svelte';
 declare const Slider: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/Library/Slider/Slider.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	let {
+		value = $bindable(0),
+		min = 0,
+		max = 100,
+		step = 1,
+		disabled = false,
+		...props
+	}: {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number | string;
+		disabled?: boolean;
+	} & StyleProps & Record<string, unknown> = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(props));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const inputProps = $derived(extractedStyleProps.restProps);
+
+	const percent = $derived.by(() => {
+		const minValue = Number(min);
+		const maxValue = Number(max);
+		const currentValue = Number(value);
+		const range = maxValue - minValue;
+		if (!Number.isFinite(range) || range <= 0) return 0;
+		const raw = ((currentValue - minValue) / range) * 100;
+		return Math.max(0, Math.min(100, raw));
+	});
+
+	const sliderStyle = $derived.by(() => {
+		const declarations = [`--slider-pct: ${percent}%;`];
+		const stylePropDeclarations = surfaceStyle(styleProps, 'slider');
+		if (stylePropDeclarations) declarations.push(stylePropDeclarations);
+		return declarations.join(' ');
+	});
+</script>
+
+<input
+	type="range"
+	bind:value
+	{min}
+	{max}
+	{step}
+	{disabled}
+	class="slider"
+	style={sliderStyle}
+	{...inputProps}
+/>
+
+<style>
+	.slider {
+		--slider-track-height: 6px;
+		--slider-thumb-size: 16px;
+		--slider-thumb-ring-width: clamp(1px, calc((var(--sveltely-inset) * 0.333333) + 1px), 6px);
+		appearance: none;
+		width: 100%;
+		height: var(--slider-track-height);
+		border-radius: var(--sveltely-border-radius);
+		background: transparent;
+		outline: none;
+		cursor: pointer;
+	}
+
+	.slider:focus-visible {
+		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 35%, white);
+		outline-offset: 4px;
+	}
+
+	.slider:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.slider::-webkit-slider-runnable-track {
+		height: var(--slider-track-height);
+		border-radius: var(--sveltely-border-radius);
+		background: linear-gradient(
+			to right,
+			var(--sveltely-primary-color) 0%,
+			var(--sveltely-primary-color) var(--slider-pct),
+			var(--color-zinc-300) var(--slider-pct),
+			var(--color-zinc-300) 100%
+		);
+	}
+
+	.slider::-webkit-slider-thumb {
+		appearance: none;
+		box-sizing: border-box;
+		width: var(--slider-thumb-size);
+		height: var(--slider-thumb-size);
+		border-radius: var(--sveltely-border-radius);
+		border: var(--slider-thumb-ring-width) solid var(--color-white);
+		background: var(--sveltely-primary-color);
+		margin-top: calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2);
+	}
+
+	.slider::-moz-range-track {
+		height: var(--slider-track-height);
+		border: none;
+		border-radius: var(--sveltely-border-radius);
+		background: var(--color-zinc-300);
+	}
+
+	.slider::-moz-range-progress {
+		height: var(--slider-track-height);
+		border: none;
+		border-radius: var(--sveltely-border-radius);
+		background: var(--sveltely-primary-color);
+	}
+
+	.slider::-moz-range-thumb {
+		box-sizing: border-box;
+		width: var(--slider-thumb-size);
+		height: var(--slider-thumb-size);
+		border-radius: var(--sveltely-border-radius);
+		border: var(--slider-thumb-ring-width) solid var(--color-white);
+		background: var(--sveltely-primary-color);
+	}
+</style>

package/dist/components/{Slider.svelte.d.ts → Library/Slider/Slider.svelte.d.ts}

@@ -1,12 +1,11 @@
+import { type StyleProps } from '../../../style/surface';
 type $$ComponentProps = {
     value?: number;
     min?: number;
     max?: number;
     step?: number | string;
     disabled?: boolean;
-    class?: string;
-    style?: string;
-} & Record<string, unknown>;
+} & StyleProps & Record<string, unknown>;
 declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

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

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

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

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

package/dist/components/{Spinner.demo.svelte → Library/Spinner/Spinner.demo.svelte}

@@ -9,4 +9,6 @@
 	import Spinner from './Spinner.svelte';
 </script>
 
-<Spinner class="size-6 text-zinc-700" />
+<div class="text-zinc-700">
+	<Spinner />
+</div>

package/dist/components/Library/Spinner/Spinner.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { LoaderIcon } from '@lucide/svelte';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	let {
+		size = 'calc(var(--sveltely-font-size) * 1.143)',
+		...props
+	}: {
+		size?: number | string;
+	} & StyleProps & Record<string, unknown> = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(props));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const iconProps = $derived(extractedStyleProps.restProps);
+	const spinnerStyle = $derived.by(() => {
+		const declarations = [
+			`width: ${typeof size === 'number' ? `${size}px` : size};`,
+			`height: ${typeof size === 'number' ? `${size}px` : size};`
+		];
+		const stylePropDeclarations = surfaceStyle(styleProps, 'spinner');
+		if (stylePropDeclarations) declarations.push(stylePropDeclarations);
+		return declarations.join(' ');
+	});
+</script>
+
+<LoaderIcon
+	role="status"
+	aria-label="Loading"
+	class="animate-spin"
+	style={spinnerStyle}
+	{...iconProps}
+/>

package/dist/components/{Spinner.svelte.d.ts → Library/Spinner/Spinner.svelte.d.ts}

@@ -1,6 +1,7 @@
+import { type StyleProps } from '../../../style/surface';
 type $$ComponentProps = {
-    class?: string;
-} & Record<string, unknown>;
+    size?: number | string;
+} & StyleProps & Record<string, unknown>;
 declare const Spinner: import("svelte").Component<$$ComponentProps, {}, "">;
 type Spinner = ReturnType<typeof Spinner>;
 export default Spinner;

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

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

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

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

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

@@ -0,0 +1,20 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Switch',
+		description: 'Token-driven switch with bindable checked state.'
+	};
+</script>
+
+<script lang="ts">
+	import Switch from './Switch.svelte';
+
+	let notificationsEnabled = $state(true);
+	let weeklySummaryEnabled = $state(false);
+</script>
+
+<div class="vstack gap-3">
+	<Switch bind:checked={notificationsEnabled} label="Enable notifications" />
+	<Switch bind:checked={weeklySummaryEnabled}>
+		<span>Send weekly summary email</span>
+	</Switch>
+</div>

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

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

package/dist/components/Library/Switch/Switch.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		checked?: boolean;
+		label?: string;
+		children?: Snippet;
+	} & StyleProps &
+		Omit<HTMLInputAttributes, 'type' | 'children' | 'class' | 'style' | 'checked'>;
+
+	let {
+		checked = $bindable(false),
+		label,
+		children,
+		disabled = false,
+		...restProps
+	}: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'switch'));
+</script>
+
+<div
+	class="switch inline-flex items-center"
+	style={rootStyle}
+	data-disabled={disabled ? 'true' : 'false'}
+>
+	<label class="switch-control">
+		<input bind:checked type="checkbox" {disabled} {...props} />
+		<span class="switch-track" aria-hidden="true">
+			<span class="switch-thumb"></span>
+		</span>
+	</label>
+
+	{#if children || label}
+		<span class="switch-label">
+			{#if children}
+				{@render children()}
+			{:else if label}
+				{label}
+			{/if}
+		</span>
+	{/if}
+</div>
+
+<style>
+	.switch {
+		--switch-font-size: var(--sveltely-font-size);
+		--switch-scale: calc(var(--switch-font-size) / 1rem);
+		--switch-height: calc(
+			(var(--switch-font-size) * 0.92) + (var(--sveltely-padding-y) * 0.45 * var(--switch-scale))
+		);
+		--switch-width: calc(var(--switch-height) * 1.7);
+		--switch-resolved-inset: calc(var(--switch-inset, var(--sveltely-inset)) * 0.333333);
+		--switch-thumb-inset: min(var(--switch-resolved-inset), calc(var(--switch-height) * 0.16));
+		--switch-border-width: 1px;
+		--switch-resolved-border-radius: var(--switch-border-radius, var(--sveltely-border-radius));
+		--switch-inner-height: calc(var(--switch-height) - (var(--switch-border-width) * 2));
+		--switch-resolved-thumb-border-radius: clamp(
+			0rem,
+			calc(var(--switch-resolved-border-radius) - var(--switch-thumb-inset)),
+			var(--switch-resolved-border-radius)
+		);
+		--switch-thumb-size: calc(var(--switch-inner-height) - (var(--switch-thumb-inset) * 2));
+		--switch-thumb-left: var(--switch-thumb-inset);
+		--switch-thumb-left-checked: calc(
+			var(--switch-width) - (var(--switch-border-width) * 2) - var(--switch-thumb-size) -
+				var(--switch-thumb-inset)
+		);
+		gap: var(--switch-gap, var(--sveltely-gap));
+		font-size: var(--switch-font-size);
+		line-height: 1.25;
+		color: var(--switch-color, var(--color-zinc-800));
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.switch[data-disabled='true'] {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.switch-control {
+		cursor: inherit;
+		display: inline-block;
+		position: relative;
+		flex: 0 0 auto;
+		width: var(--switch-width);
+		height: var(--switch-height);
+		box-sizing: border-box;
+	}
+
+	.switch-control input {
+		position: absolute;
+		inset: 0;
+		margin: 0;
+		opacity: 0;
+		cursor: inherit;
+	}
+
+	.switch-track {
+		display: block;
+		width: 100%;
+		height: 100%;
+		border: var(--switch-border-width) solid var(--switch-border-color, var(--sveltely-border-color));
+		border-radius: var(--switch-resolved-border-radius);
+		background: var(--switch-background, var(--sveltely-inactive-color));
+		box-sizing: border-box;
+		position: relative;
+		overflow: hidden;
+		transition:
+			border-color 150ms,
+			background-color 150ms;
+	}
+
+	.switch-thumb {
+		display: block;
+		position: absolute;
+		left: var(--switch-thumb-left);
+		top: var(--switch-thumb-inset);
+		width: var(--switch-thumb-size);
+		height: var(--switch-thumb-size);
+		box-sizing: border-box;
+		border-radius: var(--switch-thumb-border-radius, var(--switch-resolved-thumb-border-radius));
+		background: var(--switch-thumb-background, white);
+		transition:
+			left 180ms ease,
+			background-color 150ms;
+	}
+
+	.switch:hover .switch-track {
+		background: var(--switch-hover-background, var(--sveltely-inactive-hover-color));
+	}
+
+	.switch-control input:checked + .switch-track {
+		border-color: var(--switch-checked-border-color, var(--sveltely-active-color));
+		background: var(--switch-checked-background, var(--sveltely-active-color));
+	}
+
+	.switch:hover .switch-control input:checked + .switch-track {
+		border-color: var(
+			--switch-checked-hover-border-color,
+			var(--sveltely-active-hover-color)
+		);
+		background: var(
+			--switch-checked-hover-background,
+			var(--sveltely-active-hover-color)
+		);
+	}
+
+	.switch-control input:checked + .switch-track .switch-thumb {
+		background: var(--switch-checked-thumb-background, white);
+		left: var(--switch-thumb-left-checked);
+	}
+
+	.switch-control input:focus-visible + .switch-track {
+		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 24%, white);
+		outline-offset: 2px;
+	}
+
+	.switch-label {
+		min-width: 0;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    checked?: boolean;
+    label?: string;
+    children?: Snippet;
+} & StyleProps & Omit<HTMLInputAttributes, 'type' | 'children' | 'class' | 'style' | 'checked'>;
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

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

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

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

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

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

@@ -0,0 +1,14 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'TextShimmer',
+		description: 'Animated shimmering text that follows the global font-size token.'
+	};
+</script>
+
+<script lang="ts">
+	import TextShimmer from './TextShimmer.svelte';
+</script>
+
+<div class="vstack gap-2">
+	<TextShimmer as="h2" text="Sveltely shimmer" />
+</div>

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

@@ -0,0 +1,23 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import TextShimmer from './TextShimmer.svelte';
+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 TextShimmer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TextShimmer = InstanceType<typeof TextShimmer>;
+export default TextShimmer;