npm - sheer-ui - Versions diffs - 0.0.0 - Mend

sheer-ui 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (635) hide show

package/src/lib/components/theme-toggle/index.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import ThemeToggle from './theme-toggle.svelte';
+export { ThemeToggle };
+export { initTheme, getTheme, ThemeState } from './theme.svelte.js';
+export type { Mode } from './theme.svelte.js';

package/src/lib/components/theme-toggle/theme-toggle.svelte ADDED Viewed

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import SunIcon from '@lucide/svelte/icons/sun';
+	import MoonIcon from '@lucide/svelte/icons/moon';
+	import { getTheme } from './theme.svelte.js';
+	import { Button, type ButtonVariant } from '../button';
+	let { variant = 'ghost' }: { variant?: ButtonVariant } = $props();
+	const theme = getTheme();
+	// `theme.current` is SSR-safe (undefined on the server) and stays reactive, so `theme.toggle()`
+	// alone flips `dark` — no manual bookkeeping, and no `document` read at init that would crash during SSR.
+	let phase = $state<'idle' | 'to-dark' | 'to-light'>('idle');
+	const dark = $derived(theme.current === 'dark');
+	function toggleTheme() {
+		phase = dark ? 'to-light' : 'to-dark';
+		theme.toggle();
+	}
+</script>
+<Button onclick={toggleTheme} {variant} size="icon" class="rounded-full!">
+	<span class="stage grid *:[grid-area:1/1]" data-dark={dark} data-phase={phase} aria-hidden="true">
+		<span class="sun"><SunIcon class="size-5" /></span>
+		<span class="moon"><MoonIcon class="size-5" /></span>
+	</span>
+	<span class="sr-only">Toggle theme</span>
+</Button>
+<style>
+	/* Keyed on the stage's own attribute rather than a Tailwind `group-*` variant: `data-dark`
+	   is rendered as "true"/"false" (presence-only `[data-dark]` can't tell them apart), and a
+	   bare `.group` ancestor such as the sidebar root would capture the variant. */
+	.stage[data-dark='true'] .sun,
+	.stage[data-dark='false'] .moon {
+		opacity: 0;
+	}
+	.stage[data-phase='to-dark'] .sun,
+	.stage[data-phase='to-light'] .moon {
+		animation: theme-spin-out 600ms ease-in both;
+	}
+	.stage[data-phase='to-dark'] .moon,
+	.stage[data-phase='to-light'] .sun {
+		animation: theme-spin-in 600ms ease-out both;
+	}
+</style>

package/src/lib/components/theme-toggle/theme.svelte.ts ADDED Viewed

@@ -0,0 +1,81 @@
+// Light/dark/system theme. Replaces the vendored mode-watcher engine.
+//
+// `ThemeState` holds the reactive preference (`pref`: `'light' | 'dark'`, or `null` to
+// follow the OS) and the resolved mode shown (`current`). "System" is the absence of a
+// stored value — it is never persisted, just resolved from the OS at read time.
+// It is created once per app via `initTheme()` in a root layout and
+// shared through context with `getTheme()` — so its constructor runs in a component
+// context, where the apply/persist/sync `$effect`s are legal (no `$effect.root`) and
+// are torn down with the layout. Pre-paint application that prevents FOUC lives in
+// each app's `app.html` <head>. The `.dark` class drives `color-scheme` via CSS; the
+// inline `style.colorScheme` only keeps that override consistent with the FOUC script
+// (inline beats the CSS rule).
+import { MediaQuery } from 'svelte/reactivity';
+import { on } from 'svelte/events';
+import { createContext } from 'svelte';
+import { BROWSER } from 'esm-env';
+export type Mode = 'light' | 'dark';
+const KEY = 'mode';
+const isMode = (value: unknown): value is Mode => value === 'light' || value === 'dark';
+function readStored(): Mode | null {
+	if (!BROWSER) return null;
+	const saved = localStorage.getItem(KEY);
+	return isMode(saved) ? saved : null;
+}
+export class ThemeState {
+	/** Explicit choice, or `null` to follow the OS ("system"). A "system" token is never stored. */
+	pref = $state<Mode | null>(readStored());
+	// matchMedia touches `window`, so only construct in the browser.
+	#system = BROWSER ? new MediaQuery('prefers-color-scheme: dark') : null;
+	constructor() {
+		if (!BROWSER) return;
+		// Apply the resolved mode to <html>; first paint is handled by app.html.
+		$effect(() => {
+			const dark = this.current === 'dark';
+			const el = document.documentElement;
+			el.classList.toggle('dark', dark);
+			el.style.colorScheme = dark ? 'dark' : 'light';
+		});
+		// Persist an explicit choice; following the OS is the absence of a stored value.
+		$effect(() => {
+			if (this.pref) localStorage.setItem(KEY, this.pref);
+			else localStorage.removeItem(KEY);
+		});
+		// Adopt changes from other tabs (a new choice, or cleared back to "system").
+		$effect(() =>
+			on(window, 'storage', (e) => {
+				if (e.key === KEY) this.pref = isMode(e.newValue) ? e.newValue : null;
+			}),
+		);
+	}
+	/**
+	 * The resolved mode actually shown: `'light' | 'dark'`, or `undefined` during SSR.
+	 * Follows the OS when `pref` is `null`.
+	 */
+	get current(): Mode | undefined {
+		if (!BROWSER) return undefined;
+		return this.pref ?? (this.#system!.current ? 'dark' : 'light');
+	}
+	toggle(): void {
+		this.pref = this.current === 'dark' ? 'light' : 'dark';
+	}
+}
+const [getTheme, setTheme] = createContext<ThemeState>();
+/** Create and provide the theme. Call once in a root layout's `<script>`. */
+export const initTheme = (): ThemeState => setTheme(new ThemeState());
+/** Read the theme provided by `initTheme()`. Call during init of any descendant. */
+export { getTheme };

package/src/lib/components/time-field/components/time-field-hidden-input.svelte ADDED Viewed

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { TimeFieldHiddenInputState } from "../time-field.svelte.js";
+	const hiddenInputState = TimeFieldHiddenInputState.create();
+</script>
+{#if hiddenInputState.shouldRender}
+	<input {...hiddenInputState.props} class="sr-only" aria-hidden="true" tabindex={-1} />
+{/if}

package/src/lib/components/time-field/components/time-field-input.svelte ADDED Viewed

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { TimeFieldInputState } from '../time-field.svelte.js';
+	import type { TimeFieldInputProps } from '../types.js';
+	import DateFieldHiddenInput from './time-field-hidden-input.svelte';
+	import { createId } from '../../../internal/create-id.js';
+	const uid = $props.id();
+	let { id = createId(uid), ref = $bindable(null), name = '', children, child, ...restProps }: TimeFieldInputProps = $props();
+	const inputState = TimeFieldInputState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		name: boxWith(() => name),
+	});
+	const mergedProps = $derived(mergeProps(restProps, inputState.props));
+</script>
+{#if child}
+	{@render child({ props: mergedProps, segments: inputState.root.segmentContents })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.({ segments: inputState.root.segmentContents })}
+	</div>
+{/if}
+<DateFieldHiddenInput />

package/src/lib/components/time-field/components/time-field-label.svelte ADDED Viewed

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { TimeFieldLabelState } from '../time-field.svelte.js';
+	import type { TimeFieldLabelProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+	const uid = $props.id();
+	let { id = createId(uid), ref = $bindable(null), children, child, ...restProps }: TimeFieldLabelProps = $props();
+	const labelState = TimeFieldLabelState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+	const mergedProps = $derived(mergeProps(restProps, labelState.props));
+</script>
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/time-field/components/time-field-segment.svelte ADDED Viewed

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { TimeFieldSegmentState } from '../time-field.svelte.js';
+	import type { TimeFieldSegmentProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+	const uid = $props.id();
+	let { id = createId(uid), ref = $bindable(null), children, child, part, ...restProps }: TimeFieldSegmentProps = $props();
+	const segmentState = TimeFieldSegmentState.create(part, {
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+	const mergedProps = $derived(mergeProps(restProps, segmentState.props as Record<string, unknown>));
+</script>
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>
+		{@render children?.()}
+	</span>
+{/if}

package/src/lib/components/time-field/components/time-field.svelte ADDED Viewed

@@ -0,0 +1,99 @@
+<script lang="ts" module>
+	import type { TimeValue } from '../../../internal/date-time/types.js';
+	import type { Time } from '@internationalized/date';
+	type T = unknown;
+</script>
+<script lang="ts" generics="T extends TimeValue = Time">
+	import { untrack } from 'svelte';
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { TimeFieldRootState } from '../time-field.svelte.js';
+	import type { TimeFieldRootProps } from '../types.js';
+	import { getDefaultTime } from '../../../internal/date-time/utils.js';
+	import { resolveLocaleProp } from '../../../internal/prop-resolvers.js';
+	import { createId } from '../../../internal/create-id.js';
+	let {
+		disabled = false,
+		granularity,
+		hideTimeZone = false,
+		hourCycle,
+		locale,
+		maxValue,
+		minValue,
+		onPlaceholderChange = () => {},
+		onValueChange = () => {},
+		validate = () => {},
+		onInvalid = () => {},
+		placeholder = $bindable(),
+		value = $bindable(),
+		readonly = false,
+		readonlySegments = [],
+		required = false,
+		errorMessageId,
+		children,
+	}: TimeFieldRootProps<T> = $props();
+	function repairUndefinedControlledPlaceholder() {
+		if (placeholder !== undefined) return;
+		const defaultPlaceholder = getDefaultTime({
+			granularity,
+			defaultValue: value,
+		});
+		placeholder = defaultPlaceholder;
+	}
+	// SSR/initial setup. Segment state requires a writable TimeValue placeholder.
+	repairUndefinedControlledPlaceholder();
+	/**
+	 * Parent spread-prop resets can make the bindable placeholder undefined again.
+	 * Repairing it is intentional: this is writable segment/focus state, and
+	 * parents using bind:placeholder should observe the repaired value.
+	 */
+	$effect.pre(() => {
+		placeholder;
+		untrack(() => {
+			repairUndefinedControlledPlaceholder();
+		});
+	});
+	const uid = $props.id();
+	TimeFieldRootState.create({
+		descriptionId: createId('description', uid),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange(v);
+			},
+		),
+		placeholder: boxWith(
+			() => placeholder as TimeValue,
+			(v) => {
+				placeholder = v;
+				onPlaceholderChange(v);
+			},
+		),
+		disabled: boxWith(() => disabled),
+		granularity: boxWith(() => granularity),
+		hideTimeZone: boxWith(() => hideTimeZone),
+		hourCycle: boxWith(() => hourCycle),
+		locale: resolveLocaleProp(() => locale),
+		maxValue: boxWith(() => maxValue),
+		minValue: boxWith(() => minValue),
+		validate: boxWith(() => validate),
+		readonly: boxWith(() => readonly),
+		readonlySegments: boxWith(() => readonlySegments),
+		required: boxWith(() => required),
+		onInvalid: boxWith(() => onInvalid),
+		errorMessageId: boxWith(() => errorMessageId),
+		isInvalidProp: boxWith(() => undefined),
+	});
+</script>
+{@render children?.()}

package/src/lib/components/time-field/index.ts ADDED Viewed

@@ -0,0 +1,11 @@
+export { default as Root } from './components/time-field.svelte';
+export { default as Input } from './components/time-field-input.svelte';
+export { default as Label } from './components/time-field-label.svelte';
+export { default as Segment } from './components/time-field-segment.svelte';
+export type {
+	TimeFieldRootProps as RootProps,
+	TimeFieldInputProps as InputProps,
+	TimeFieldLabelProps as LabelProps,
+	TimeFieldSegmentProps as SegmentProps,
+} from './types.js';