npm - @dryui/ui - Versions diffs - 1.5.0 → 1.6.0 - Mend

@dryui/ui 1.5.0 → 1.6.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 (86) hide show

package/dist/app-frame/app-frame.svelte +10 -3
package/dist/button-group/context.svelte.js +4 -7
package/dist/calendar/calendar-root.svelte +15 -32
package/dist/chip-group/context.svelte.d.ts +2 -4
package/dist/chip-group/context.svelte.js +2 -9
package/dist/context-menu/context-menu-content.svelte +24 -12
package/dist/context-menu/context-menu-group.svelte +3 -2
package/dist/context-menu/context-menu-item.svelte +8 -61
package/dist/context-menu/context-menu-label.svelte +3 -11
package/dist/context-menu/context-menu-root.svelte +10 -29
package/dist/context-menu/context-menu-separator.svelte +2 -9
package/dist/context-menu/context.svelte.d.ts +2 -12
package/dist/date-picker/datepicker-content.svelte +11 -81
package/dist/date-picker/datepicker-content.svelte.d.ts +1 -1
package/dist/date-picker/datepicker-input-root.svelte +39 -47
package/dist/date-range-picker/date-range-picker-content.svelte +11 -75
package/dist/date-range-picker/date-range-picker-content.svelte.d.ts +1 -1
package/dist/date-range-picker/date-range-picker-root.svelte +44 -49
package/dist/drag-and-drop/group-context.svelte.d.ts +1 -1
package/dist/drag-and-drop/group-context.svelte.js +4 -4
package/dist/dropdown-menu/context.svelte.d.ts +2 -8
package/dist/dropdown-menu/dropdown-menu-content.svelte +15 -3
package/dist/dropdown-menu/dropdown-menu-group.svelte +3 -2
package/dist/dropdown-menu/dropdown-menu-item.svelte +8 -61
package/dist/dropdown-menu/dropdown-menu-label.svelte +3 -11
package/dist/dropdown-menu/dropdown-menu-root.svelte +10 -21
package/dist/dropdown-menu/dropdown-menu-separator.svelte +2 -9
package/dist/flip-card/context.svelte.d.ts +5 -0
package/dist/flip-card/context.svelte.js +2 -0
package/dist/flip-card/flip-card-back.svelte +2 -2
package/dist/flip-card/flip-card-root.svelte +42 -15
package/dist/heading/heading.svelte +10 -1
package/dist/heading/heading.svelte.d.ts +1 -0
package/dist/heading/index.d.ts +1 -0
package/dist/hover-card/hover-card-content.svelte +9 -21
package/dist/hover-card/hover-card-root.svelte +2 -2
package/dist/hover-card/hover-card-root.svelte.d.ts +4 -0
package/dist/index.d.ts +2 -0
package/dist/index.js +1 -0
package/dist/internal/anchored-overlay-content.svelte.d.ts +20 -0
package/dist/internal/anchored-overlay-content.svelte.js +28 -0
package/dist/internal/date-family-controller.svelte.d.ts +45 -0
package/dist/internal/date-family-controller.svelte.js +99 -0
package/dist/internal/menu-group.svelte +15 -0
package/dist/internal/menu-group.svelte.d.ts +9 -0
package/dist/internal/menu-item.svelte +82 -0
package/dist/internal/menu-item.svelte.d.ts +11 -0
package/dist/internal/menu-label.svelte +24 -0
package/dist/internal/menu-label.svelte.d.ts +9 -0
package/dist/internal/menu-root-state.svelte.d.ts +24 -0
package/dist/internal/menu-root-state.svelte.js +42 -0
package/dist/internal/menu-separator.svelte +19 -0
package/dist/internal/menu-separator.svelte.d.ts +7 -0
package/dist/internal/motion.js +12 -1
package/dist/internal/picker-popover-content.svelte +112 -0
package/dist/internal/picker-popover-content.svelte.d.ts +16 -0
package/dist/link-preview/link-preview-content.svelte +7 -10
package/dist/list/list-item-icon.svelte +3 -3
package/dist/list/list-item-icon.svelte.d.ts +1 -1
package/dist/list/list-item-text.svelte +3 -3
package/dist/list/list-item-text.svelte.d.ts +1 -1
package/dist/list/list-item.svelte +58 -35
package/dist/list/list-item.svelte.d.ts +8 -2
package/dist/popover/popover-content.svelte +9 -11
package/dist/range-calendar/range-calendar-root.svelte +13 -19
package/dist/text/index.d.ts +1 -0
package/dist/text/text.svelte +3 -1
package/dist/text/text.svelte.d.ts +1 -0
package/dist/theme-toggle/index.d.ts +18 -0
package/dist/theme-toggle/index.js +3 -0
package/dist/theme-toggle/theme-controller.svelte.d.ts +54 -0
package/dist/theme-toggle/theme-controller.svelte.js +121 -0
package/dist/theme-toggle/theme-flash.d.ts +16 -0
package/dist/theme-toggle/theme-flash.js +38 -0
package/dist/theme-toggle/theme-toggle.svelte +189 -0
package/dist/theme-toggle/theme-toggle.svelte.d.ts +40 -0
package/dist/tooltip/tooltip-content.svelte +8 -10
package/dist/typography/heading.svelte +13 -89
package/dist/typography/heading.svelte.d.ts +3 -8
package/dist/typography/index.d.ts +8 -7
package/dist/typography/text.svelte +12 -84
package/dist/typography/text.svelte.d.ts +3 -10
package/package.json +7 -2
package/skills/dryui/SKILL.md +18 -5
package/skills/dryui/rules/composition.md +1 -1
package/skills/dryui/rules/theming.md +1 -2

package/dist/theme-toggle/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { createThemeController } from './theme-controller.svelte.js';
+export { themeFlashScript } from './theme-flash.js';
+export { default as ThemeToggle } from './theme-toggle.svelte';

package/dist/theme-toggle/theme-controller.svelte.d.ts ADDED Viewed

@@ -0,0 +1,54 @@
+export type ThemeMode = 'system' | 'light' | 'dark';
+export interface ThemeControllerOptions {
+    /**
+     * Storage key used to persist the explicit theme preference.
+     * When the user selects system mode the key is removed.
+     * Defaults to `'dryui-theme'`.
+     */
+    storageKey?: string;
+}
+export interface ThemeController {
+    /** Current stored preference: `'system'`, `'light'`, or `'dark'`. */
+    readonly mode: ThemeMode;
+    /**
+     * Whether the active rendered theme is dark. Tracks `prefers-color-scheme`
+     * when the mode is `'system'`.
+     */
+    readonly isDark: boolean;
+    /** Whether the system color-scheme preference is currently dark. */
+    readonly systemPrefersDark: boolean;
+    /** Apply an explicit mode and persist it (or clear persistence for `'system'`). */
+    setMode(mode: ThemeMode): void;
+    /** Toggle between the two rendered themes, writing an explicit preference. */
+    cycle(): void;
+    /** Return to system mode and clear any persisted preference. */
+    reset(): void;
+    /** Stop watching `matchMedia` changes. Called automatically on HMR disposal. */
+    destroy(): void;
+}
+export declare const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+export declare const DEFAULT_STORAGE_KEY = "dryui-theme";
+/**
+ * Read the stored theme mode. Exported for testing; production callers
+ * should go through `createThemeController`.
+ */
+export declare function readStoredMode(storageKey: string): ThemeMode;
+/**
+ * Persist the theme mode. When `mode === 'system'`, removes the key.
+ * Exported for testing.
+ */
+export declare function writeStoredMode(storageKey: string, mode: ThemeMode): void;
+/**
+ * Apply the mode to `<html>` via `classList.theme-auto` and `dataset.theme`.
+ * Exported for testing.
+ */
+export declare function applyModeToDom(mode: ThemeMode): void;
+/**
+ * Create a theme controller that reads the current preference from storage,
+ * applies it to `<html>`, and watches the system color-scheme for changes.
+ *
+ * The returned object exposes reactive `mode`, `isDark`, and `systemPrefersDark`
+ * properties backed by Svelte 5 `$state`, plus imperative methods for changing
+ * or resetting the mode.
+ */
+export declare function createThemeController(options?: ThemeControllerOptions): ThemeController;

package/dist/theme-toggle/theme-controller.svelte.js ADDED Viewed

@@ -0,0 +1,121 @@
+export const DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';
+export const DEFAULT_STORAGE_KEY = 'dryui-theme';
+function isBrowser() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+/**
+ * Read the stored theme mode. Exported for testing; production callers
+ * should go through `createThemeController`.
+ */
+export function readStoredMode(storageKey) {
+    if (!isBrowser())
+        return 'system';
+    try {
+        const stored = window.localStorage.getItem(storageKey);
+        if (stored === 'light' || stored === 'dark') {
+            return stored;
+        }
+        if (stored !== null) {
+            window.localStorage.removeItem(storageKey);
+        }
+    }
+    catch {
+        // Storage access can fail in private browsing contexts, so fall back to system mode.
+    }
+    return 'system';
+}
+/**
+ * Persist the theme mode. When `mode === 'system'`, removes the key.
+ * Exported for testing.
+ */
+export function writeStoredMode(storageKey, mode) {
+    if (!isBrowser())
+        return;
+    try {
+        if (mode === 'system') {
+            window.localStorage.removeItem(storageKey);
+            return;
+        }
+        window.localStorage.setItem(storageKey, mode);
+    }
+    catch {
+        // Ignore storage failures; the in-memory state still reflects the choice.
+    }
+}
+/**
+ * Apply the mode to `<html>` via `classList.theme-auto` and `dataset.theme`.
+ * Exported for testing.
+ */
+export function applyModeToDom(mode) {
+    if (!isBrowser())
+        return;
+    const root = document.documentElement;
+    if (mode === 'system') {
+        root.classList.add('theme-auto');
+        delete root.dataset.theme;
+        return;
+    }
+    root.classList.remove('theme-auto');
+    root.dataset.theme = mode;
+}
+/**
+ * Create a theme controller that reads the current preference from storage,
+ * applies it to `<html>`, and watches the system color-scheme for changes.
+ *
+ * The returned object exposes reactive `mode`, `isDark`, and `systemPrefersDark`
+ * properties backed by Svelte 5 `$state`, plus imperative methods for changing
+ * or resetting the mode.
+ */
+export function createThemeController(options = {}) {
+    const storageKey = options.storageKey ?? DEFAULT_STORAGE_KEY;
+    const initialMode = readStoredMode(storageKey);
+    let mode = $state(initialMode);
+    let systemPrefersDark = $state(false);
+    let mediaQuery = null;
+    let stopWatching = null;
+    if (isBrowser()) {
+        mediaQuery = window.matchMedia(DARK_MEDIA_QUERY);
+        systemPrefersDark = mediaQuery.matches;
+        // Align the DOM with the stored preference in case the app-level flash
+        // script was skipped or the key changed between renders.
+        applyModeToDom(initialMode);
+        const handleChange = (event) => {
+            systemPrefersDark = event.matches;
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        stopWatching = () => {
+            mediaQuery?.removeEventListener('change', handleChange);
+            stopWatching = null;
+        };
+    }
+    const isDark = $derived(mode === 'dark' || (mode === 'system' && systemPrefersDark));
+    function setMode(next) {
+        mode = next;
+        applyModeToDom(next);
+        writeStoredMode(storageKey, next);
+    }
+    function cycle() {
+        setMode(isDark ? 'light' : 'dark');
+    }
+    function reset() {
+        setMode('system');
+    }
+    function destroy() {
+        stopWatching?.();
+    }
+    return {
+        get mode() {
+            return mode;
+        },
+        get isDark() {
+            return isDark;
+        },
+        get systemPrefersDark() {
+            return systemPrefersDark;
+        },
+        setMode,
+        cycle,
+        reset,
+        destroy
+    };
+}

package/dist/theme-toggle/theme-flash.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * Build an IIFE string that synchronously applies the stored theme preference
+ * to `<html>` before the first paint. Embed the result inside a `<script>` tag
+ * in the document head, above any stylesheet imports, to prevent a flash of
+ * the wrong theme when a user has explicitly chosen light or dark.
+ *
+ * Usage:
+ * ```html
+ * <script>{@html themeFlashScript('dryui-theme')}</script>
+ * ```
+ *
+ * The script reads the given storage key, sets `html.classList.theme-auto`
+ * when no explicit preference is stored, and sets `html.dataset.theme` to
+ * `'light'` or `'dark'` otherwise. Invalid stored values are removed.
+ */
+export declare function themeFlashScript(storageKey?: string): string;

package/dist/theme-toggle/theme-flash.js ADDED Viewed

@@ -0,0 +1,38 @@
+/**
+ * Build an IIFE string that synchronously applies the stored theme preference
+ * to `<html>` before the first paint. Embed the result inside a `<script>` tag
+ * in the document head, above any stylesheet imports, to prevent a flash of
+ * the wrong theme when a user has explicitly chosen light or dark.
+ *
+ * Usage:
+ * ```html
+ * <script>{@html themeFlashScript('dryui-theme')}</script>
+ * ```
+ *
+ * The script reads the given storage key, sets `html.classList.theme-auto`
+ * when no explicit preference is stored, and sets `html.dataset.theme` to
+ * `'light'` or `'dark'` otherwise. Invalid stored values are removed.
+ */
+export function themeFlashScript(storageKey = 'dryui-theme') {
+    // Escape the storage key so it's safe to embed between JSON-style quotes.
+    const key = JSON.stringify(storageKey);
+    return `(() => {
+  const root = document.documentElement;
+  try {
+    const stored = window.localStorage.getItem(${key});
+    const explicit = stored === 'light' || stored === 'dark' ? stored : null;
+    if (!explicit && stored !== null) {
+      window.localStorage.removeItem(${key});
+    }
+    root.classList.toggle('theme-auto', explicit === null);
+    if (explicit) {
+      root.dataset.theme = explicit;
+    } else {
+      delete root.dataset.theme;
+    }
+  } catch {
+    delete root.dataset.theme;
+    root.classList.add('theme-auto');
+  }
+})();`;
+}

package/dist/theme-toggle/theme-toggle.svelte ADDED Viewed

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { onDestroy, type Snippet } from 'svelte';
+	import type { ClassValue, HTMLButtonAttributes } from 'svelte/elements';
+	import Toggle from '../toggle/toggle-button.svelte';
+	import {
+		createThemeController,
+		type ThemeController,
+		type ThemeMode
+	} from './theme-controller.svelte.js';
+	interface Props extends Omit<
+		HTMLButtonAttributes,
+		'onclick' | 'onkeydown' | 'disabled' | 'class'
+	> {
+		disabled?: boolean;
+		class?: ClassValue;
+		/**
+		 * Storage key used to persist the explicit theme preference.
+		 * Defaults to `'dryui-theme'`.
+		 */
+		storageKey?: string;
+		/** Toggle size forwarded to the underlying Toggle. */
+		size?: 'sm' | 'md' | 'lg';
+		/**
+		 * Optional pre-built controller. When provided, the component uses the
+		 * shared state instead of creating its own. Useful if multiple toggles
+		 * exist in the same app or if external code wants to read the mode.
+		 */
+		controller?: ThemeController;
+		/** Accessible label. Defaults to `'Toggle theme'`. */
+		'aria-label'?: string;
+		/**
+		 * Custom sun icon snippet. When omitted, a built-in inline SVG is used.
+		 * The icon is shown when the current theme is light.
+		 */
+		sunIcon?: Snippet;
+		/**
+		 * Custom moon icon snippet. When omitted, a built-in inline SVG is used.
+		 * The icon is shown when the current theme is dark.
+		 */
+		moonIcon?: Snippet;
+		/**
+		 * Called with the new mode after it is applied. Invoked for explicit
+		 * picks via click or reset via Alt-click / Escape.
+		 */
+		onModeChange?: (mode: ThemeMode) => void;
+	}
+	let {
+		storageKey,
+		size = 'md',
+		controller: externalController,
+		'aria-label': ariaLabel = 'Toggle theme',
+		sunIcon,
+		moonIcon,
+		onModeChange,
+		title = 'Alt-click or press Escape to return to system theme',
+		disabled,
+		...rest
+	}: Props = $props();
+	// Read `externalController` and `storageKey` once at init time on purpose.
+	// Swapping the controller or key after mount is not supported; this is an
+	// init-time choice, so the linter warning about one-shot capture is expected.
+	// svelte-ignore state_referenced_locally
+	const ownsController = externalController === undefined;
+	// svelte-ignore state_referenced_locally
+	const controller = externalController ?? createThemeController({ storageKey });
+	onDestroy(() => {
+		if (ownsController) {
+			controller.destroy();
+		}
+	});
+	type ToggleClickEvent = Parameters<NonNullable<HTMLButtonAttributes['onclick']>>[0];
+	type ToggleKeyEvent = Parameters<NonNullable<HTMLButtonAttributes['onkeydown']>>[0];
+	function handleClick(event: ToggleClickEvent) {
+		event.preventDefault();
+		if (event.altKey) {
+			controller.reset();
+			onModeChange?.('system');
+			return;
+		}
+		controller.cycle();
+		onModeChange?.(controller.mode);
+	}
+	function handleKeydown(event: ToggleKeyEvent) {
+		if (event.key !== 'Escape') return;
+		event.preventDefault();
+		controller.reset();
+		onModeChange?.('system');
+	}
+	const iconState = $derived(controller.isDark ? 'dark' : 'light');
+</script>
+<Toggle
+	aria-label={ariaLabel}
+	aria-keyshortcuts="Escape"
+	pressed={controller.isDark}
+	data-theme-switch="true"
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	{disabled}
+	{size}
+	{title}
+	{...rest}
+>
+	{#snippet icon()}
+		<span class="icons" data-mode={iconState}>
+			<span class="icon sun" aria-hidden="true">
+				{#if sunIcon}
+					{@render sunIcon()}
+				{:else}
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<circle cx="12" cy="12" r="4" />
+						<path d="M12 2v2" />
+						<path d="M12 20v2" />
+						<path d="m4.93 4.93 1.41 1.41" />
+						<path d="m17.66 17.66 1.41 1.41" />
+						<path d="M2 12h2" />
+						<path d="M20 12h2" />
+						<path d="m6.34 17.66-1.41 1.41" />
+						<path d="m19.07 4.93-1.41 1.41" />
+					</svg>
+				{/if}
+			</span>
+			<span class="icon moon" aria-hidden="true">
+				{#if moonIcon}
+					{@render moonIcon()}
+				{:else}
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+					</svg>
+				{/if}
+			</span>
+		</span>
+	{/snippet}
+</Toggle>
+<style>
+	.icons {
+		display: grid;
+		place-items: center;
+		color: var(--dry-theme-toggle-icon, currentColor);
+	}
+	.icon {
+		grid-column: 1;
+		grid-row: 1;
+		display: grid;
+		place-items: center;
+	}
+	.icon svg {
+		display: block;
+		block-size: var(--dry-theme-toggle-icon-size, 0.75rem);
+		aspect-ratio: 1;
+	}
+	.icons[data-mode='dark'] .sun {
+		display: none;
+	}
+	.icons[data-mode='light'] .moon {
+		display: none;
+	}
+</style>

package/dist/theme-toggle/theme-toggle.svelte.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { type Snippet } from 'svelte';
+import type { ClassValue, HTMLButtonAttributes } from 'svelte/elements';
+import { type ThemeController, type ThemeMode } from './theme-controller.svelte.js';
+interface Props extends Omit<HTMLButtonAttributes, 'onclick' | 'onkeydown' | 'disabled' | 'class'> {
+    disabled?: boolean;
+    class?: ClassValue;
+    /**
+     * Storage key used to persist the explicit theme preference.
+     * Defaults to `'dryui-theme'`.
+     */
+    storageKey?: string;
+    /** Toggle size forwarded to the underlying Toggle. */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Optional pre-built controller. When provided, the component uses the
+     * shared state instead of creating its own. Useful if multiple toggles
+     * exist in the same app or if external code wants to read the mode.
+     */
+    controller?: ThemeController;
+    /** Accessible label. Defaults to `'Toggle theme'`. */
+    'aria-label'?: string;
+    /**
+     * Custom sun icon snippet. When omitted, a built-in inline SVG is used.
+     * The icon is shown when the current theme is light.
+     */
+    sunIcon?: Snippet;
+    /**
+     * Custom moon icon snippet. When omitted, a built-in inline SVG is used.
+     * The icon is shown when the current theme is dark.
+     */
+    moonIcon?: Snippet;
+    /**
+     * Called with the new mode after it is applied. Invoked for explicit
+     * picks via click or reset via Alt-click / Escape.
+     */
+    onModeChange?: (mode: ThemeMode) => void;
+}
+declare const ThemeToggle: import("svelte").Component<Props, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/tooltip/tooltip-content.svelte CHANGED Viewed

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAnchoredPopover, type Placement } from '@dryui/primitives';
+	import { type Placement } from '@dryui/primitives';
+	import { createAnchoredOverlayContent } from '../internal/anchored-overlay-content.svelte.js';
 	import { getTooltipCtx } from './context.svelte.js';
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -21,25 +22,22 @@
 	const ctx = getTooltipCtx();
-	let contentEl = $state<HTMLDivElement>();
-	const popover = createAnchoredPopover({
-		triggerEl: () => ctx.triggerEl,
-		contentEl: () => contentEl ?? null,
-		open: () => ctx.open,
+	const overlay = createAnchoredOverlayContent({
+		ctx,
 		placement: () => placement,
-		offset: () => offset
+		offset: () => offset,
+		style: () => style
 	});
 </script>
 <div
-	bind:this={contentEl}
+	{@attach overlay.bindContent}
+	{@attach overlay.position}
 	id={ctx.contentId}
 	role="tooltip"
 	popover="manual"
 	data-tooltip-content
 	data-state={ctx.open ? 'open' : 'closed'}
-	use:popover.applyPosition={style}
 	class={className}
 	{...rest}
 >

package/dist/typography/heading.svelte CHANGED Viewed

@@ -1,92 +1,16 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { variantAttrs } from '@dryui/primitives';
-	interface Props extends HTMLAttributes<HTMLHeadingElement> {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-		variant?: 'default' | 'display';
-		children: Snippet;
-	}
-	let { level = 2, variant = 'default', class: className, children, ...rest }: Props = $props();
+	import type { HeadingProps } from './index.js';
+	import Heading from '../heading/heading.svelte';
+	let {
+		level = 2,
+		variant = 'default',
+		class: className,
+		children,
+		...rest
+	}: HeadingProps = $props();
 </script>
-{#if level === 1}
-	<h1 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h1>
-{:else if level === 2}
-	<h2 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h2>
-{:else if level === 3}
-	<h3 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h3>
-{:else if level === 4}
-	<h4 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h4>
-{:else if level === 5}
-	<h5 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h5>
-{:else}
-	<h6 class={className} {...variantAttrs({ level, variant })} {...rest}>
-		{@render children()}
-	</h6>
-{/if}
-<style>
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		margin: 0;
-		color: var(--dry-typography-heading-color, var(--dry-color-text-strong));
-		font-family: var(--dry-font-sans);
-		font-weight: 700;
-		line-height: var(--dry-type-heading-2-leading, 2.5rem);
-		letter-spacing: -0.03em;
-		text-wrap: balance;
-	}
-	[data-level='1'] {
-		font-size: var(--dry-type-heading-1-size, var(--dry-text-4xl-size, 2.25rem));
-		line-height: var(--dry-type-heading-1-leading, 3rem);
-	}
-	[data-level='2'] {
-		font-size: var(--dry-type-heading-2-size, var(--dry-text-3xl-size, 1.875rem));
-		line-height: var(--dry-type-heading-2-leading, 2.5rem);
-	}
-	[data-level='3'] {
-		font-size: var(--dry-type-heading-3-size, var(--dry-text-2xl-size, 1.5rem));
-		line-height: var(--dry-type-heading-3-leading, 2rem);
-	}
-	[data-level='4'] {
-		font-size: var(--dry-type-heading-4-size, var(--dry-text-xl-size, 1.25rem));
-		line-height: var(--dry-type-heading-4-leading, 1.75rem);
-	}
-	[data-level='5'] {
-		font-size: var(--dry-type-small-size, var(--dry-text-lg-size, 1.125rem));
-		line-height: var(--dry-type-small-leading, 1.5rem);
-	}
-	[data-level='6'] {
-		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		line-height: var(--dry-type-tiny-leading, 1.25rem);
-	}
-	[data-variant='display'] {
-		font-size: var(--dry-type-display-size, var(--dry-text-4xl-size, 2.25rem));
-		line-height: var(--dry-type-display-leading, 4rem);
-		letter-spacing: -0.04em;
-	}
-</style>
+<Heading {level} {variant} {className} {...rest}>
+	{@render children()}
+</Heading>

package/dist/typography/heading.svelte.d.ts CHANGED Viewed

@@ -1,10 +1,5 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLHeadingElement> {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    variant?: 'default' | 'display';
-    children: Snippet;
-}
-declare const Heading: import("svelte").Component<Props, {}, "">;
+import type { HeadingProps } from './index.js';
+import Heading from '../heading/heading.svelte';
+declare const Heading: import("svelte").Component<HeadingProps, {}, "">;
 type Heading = ReturnType<typeof Heading>;
 export default Heading;

package/dist/typography/index.d.ts CHANGED Viewed

@@ -1,12 +1,13 @@
-import type { HeadingProps as PrimitiveHeadingProps, TextProps as PrimitiveTextProps } from '@dryui/primitives';
-export interface HeadingProps extends PrimitiveHeadingProps {
-    variant?: 'default' | 'display';
-}
+import type { TextProps as SharedTextProps } from '../text/index.js';
+export type { HeadingProps } from '../heading/index.js';
 export type { CodeProps, BlockquoteProps } from '@dryui/primitives';
-export interface TextProps extends PrimitiveTextProps {
+export interface TextProps extends Omit<SharedTextProps, 'color' | 'variant'> {
     color?: 'default' | 'muted' | 'secondary';
-    variant?: 'default' | 'muted' | 'secondary';
-    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'muted' | 'secondary' | 'label';
+    size?: SharedTextProps['size'];
+    font?: SharedTextProps['font'];
+    weight?: SharedTextProps['weight'];
+    className?: SharedTextProps['className'];
 }
 import TypographyHeading from './heading.svelte';
 import TypographyText from './text.svelte';