sv5ui 0.0.1

package/dist/Kbd/kbd.variants.d.ts

@@ -0,0 +1,118 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const kbdVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+}, undefined, "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase", {
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+}, undefined, "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase", unknown, unknown, undefined>>;
+/** Static key symbols (same across all platforms) */
+export declare const kbdKeysMap: Record<string, string>;
+/** Platform-specific key mappings */
+export declare const kbdKeysPlatformMap: Record<string, {
+    mac: string;
+    other: string;
+}>;
+export type KbdVariantProps = VariantProps<typeof kbdVariants>;
+export declare const kbdDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        color: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+        };
+    }, undefined, {
+        color: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+        };
+    }, undefined>;
+};

package/dist/Kbd/kbd.variants.js

@@ -0,0 +1,96 @@
+import { tv } from 'tailwind-variants';
+export const kbdVariants = tv({
+    base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase',
+    variants: {
+        color: {
+            primary: '',
+            secondary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        size: {
+            sm: 'h-4 min-w-4 text-[10px]',
+            md: 'h-5 min-w-5 text-[11px]',
+            lg: 'h-6 min-w-6 text-[12px]'
+        },
+        variant: {
+            solid: '',
+            outline: 'ring ring-inset',
+            soft: '',
+            subtle: 'ring ring-inset'
+        }
+    },
+    compoundVariants: [
+        // Solid variants
+        { color: 'primary', variant: 'solid', class: 'bg-primary text-on-primary' },
+        { color: 'secondary', variant: 'solid', class: 'bg-secondary text-on-secondary' },
+        { color: 'success', variant: 'solid', class: 'bg-success text-on-success' },
+        { color: 'warning', variant: 'solid', class: 'bg-warning text-on-warning' },
+        { color: 'error', variant: 'solid', class: 'bg-error text-on-error' },
+        { color: 'info', variant: 'solid', class: 'bg-info text-on-info' },
+        { color: 'surface', variant: 'solid', class: 'bg-inverse-surface text-inverse-on-surface' },
+        // Outline variants
+        { color: 'primary', variant: 'outline', class: 'ring-primary/50 text-primary' },
+        { color: 'secondary', variant: 'outline', class: 'ring-secondary/50 text-secondary' },
+        { color: 'success', variant: 'outline', class: 'ring-success/50 text-success' },
+        { color: 'warning', variant: 'outline', class: 'ring-warning/50 text-warning' },
+        { color: 'error', variant: 'outline', class: 'ring-error/50 text-error' },
+        { color: 'info', variant: 'outline', class: 'ring-info/50 text-info' },
+        { color: 'surface', variant: 'outline', class: 'ring-outline-variant text-on-surface-variant' },
+        // Soft variants
+        { color: 'primary', variant: 'soft', class: 'bg-primary-container text-on-primary-container' },
+        { color: 'secondary', variant: 'soft', class: 'bg-secondary-container text-on-secondary-container' },
+        { color: 'success', variant: 'soft', class: 'bg-success-container text-on-success-container' },
+        { color: 'warning', variant: 'soft', class: 'bg-warning-container text-on-warning-container' },
+        { color: 'error', variant: 'soft', class: 'bg-error-container text-on-error-container' },
+        { color: 'info', variant: 'soft', class: 'bg-info-container text-on-info-container' },
+        { color: 'surface', variant: 'soft', class: 'bg-surface-container-highest text-on-surface' },
+        // Subtle variants
+        { color: 'primary', variant: 'subtle', class: 'ring-primary/25 bg-primary-container text-on-primary-container' },
+        { color: 'secondary', variant: 'subtle', class: 'ring-secondary/25 bg-secondary-container text-on-secondary-container' },
+        { color: 'success', variant: 'subtle', class: 'ring-success/25 bg-success-container text-on-success-container' },
+        { color: 'warning', variant: 'subtle', class: 'ring-warning/25 bg-warning-container text-on-warning-container' },
+        { color: 'error', variant: 'subtle', class: 'ring-error/25 bg-error-container text-on-error-container' },
+        { color: 'info', variant: 'subtle', class: 'ring-info/25 bg-info-container text-on-info-container' },
+        { color: 'surface', variant: 'subtle', class: 'ring-outline-variant bg-surface-container-highest text-on-surface' }
+    ],
+    defaultVariants: {
+        color: 'surface',
+        size: 'md',
+        variant: 'outline'
+    }
+});
+/** Static key symbols (same across all platforms) */
+export const kbdKeysMap = {
+    command: '⌘',
+    shift: '⇧',
+    control: '⌃',
+    option: '⌥',
+    enter: '↵',
+    delete: '⌦',
+    backspace: '⌫',
+    escape: 'Esc',
+    tab: '⇥',
+    capslock: '⇪',
+    arrowup: '↑',
+    arrowright: '→',
+    arrowdown: '↓',
+    arrowleft: '←',
+    pageup: '⇞',
+    pagedown: '⇟',
+    home: '↖',
+    end: '↘',
+    space: '␣'
+};
+/** Platform-specific key mappings */
+export const kbdKeysPlatformMap = {
+    meta: { mac: '⌘', other: 'Ctrl' },
+    ctrl: { mac: '⌃', other: 'Ctrl' },
+    alt: { mac: '⌥', other: 'Alt' }
+};
+export const kbdDefaults = {
+    defaultVariants: kbdVariants.defaultVariants
+};

package/dist/Kbd/useKbd.svelte.d.ts

@@ -0,0 +1,29 @@
+import { kbdKeysMap, kbdKeysPlatformMap } from './kbd.variants.js';
+import type { UseKbdOptions, UseKbdReturn } from './kbd.types.js';
+/** @internal */
+export declare const __resetPlatformCache: () => void;
+export declare const isMac: boolean;
+export declare function resolveKey(value: string | undefined): string | null;
+export declare function resolveShortcut(shortcut: string | undefined): string[];
+export declare function formatShortcut(shortcut: string | undefined, separator?: string): string;
+export declare function normalizeKey(eventKey: string): string;
+export declare function parseShortcutBinding(shortcut: string): {
+    modifiers: {
+        ctrl: boolean;
+        shift: boolean;
+        alt: boolean;
+        meta: boolean;
+    };
+    key: string;
+};
+export declare function matchesShortcut(event: KeyboardEvent, binding: {
+    modifiers: {
+        ctrl: boolean;
+        shift: boolean;
+        alt: boolean;
+        meta: boolean;
+    };
+    key: string;
+}): boolean;
+export declare function useKbd(options?: UseKbdOptions): UseKbdReturn;
+export { kbdKeysMap, kbdKeysPlatformMap };

package/dist/Kbd/useKbd.svelte.js

@@ -0,0 +1,245 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { kbdKeysMap, kbdKeysPlatformMap } from './kbd.variants.js';
+let cachedIsMac;
+const detectPlatform = () => {
+    if (cachedIsMac === undefined) {
+        cachedIsMac = typeof navigator !== 'undefined' && /Macintosh|Mac OS|iPhone|iPad|iPod/i.test(navigator.userAgent);
+    }
+    return cachedIsMac;
+};
+/** @internal */
+export const __resetPlatformCache = () => {
+    cachedIsMac = undefined;
+};
+export const isMac = detectPlatform();
+export function resolveKey(value) {
+    if (!value)
+        return null;
+    const key = value.toLowerCase();
+    if (key in kbdKeysPlatformMap) {
+        return isMac ? kbdKeysPlatformMap[key].mac : kbdKeysPlatformMap[key].other;
+    }
+    return kbdKeysMap[key] ?? value;
+}
+export function resolveShortcut(shortcut) {
+    if (!shortcut)
+        return [];
+    return shortcut
+        .split('+')
+        .map((key) => resolveKey(key.trim()))
+        .filter((key) => key !== null);
+}
+export function formatShortcut(shortcut, separator = ' + ') {
+    return resolveShortcut(shortcut).join(separator);
+}
+const KEY_NORMALIZE = {
+    control: 'ctrl',
+    ' ': 'space'
+};
+export function normalizeKey(eventKey) {
+    const lower = eventKey.toLowerCase();
+    return KEY_NORMALIZE[lower] ?? lower;
+}
+const CAPTURABLE_MODIFIERS = { alt: true, meta: true };
+const MODIFIER_PROPS = [
+    ['ctrl', 'ctrlKey'],
+    ['shift', 'shiftKey'],
+    ['alt', 'altKey'],
+    ['meta', 'metaKey']
+];
+const kbdRegistry = {
+    handlers: [],
+    active: false,
+    register(cb) {
+        this.handlers.push(cb);
+        if (!this.active && typeof window !== 'undefined') {
+            window.addEventListener('keydown', this._onKeyDown);
+            window.addEventListener('keyup', this._onKeyUp);
+            window.addEventListener('blur', this._onBlur);
+            document.addEventListener('visibilitychange', this._onVisibility);
+            this.active = true;
+        }
+    },
+    unregister(cb) {
+        const idx = this.handlers.indexOf(cb);
+        if (idx !== -1)
+            this.handlers.splice(idx, 1);
+        if (this.handlers.length === 0 && this.active) {
+            window.removeEventListener('keydown', this._onKeyDown);
+            window.removeEventListener('keyup', this._onKeyUp);
+            window.removeEventListener('blur', this._onBlur);
+            document.removeEventListener('visibilitychange', this._onVisibility);
+            this.active = false;
+        }
+    },
+    _onKeyDown(event) {
+        for (let i = 0; i < kbdRegistry.handlers.length; i++) {
+            kbdRegistry.handlers[i].keydown(event);
+        }
+    },
+    _onKeyUp(event) {
+        for (let i = 0; i < kbdRegistry.handlers.length; i++) {
+            kbdRegistry.handlers[i].keyup(event);
+        }
+    },
+    _onBlur() {
+        for (let i = 0; i < kbdRegistry.handlers.length; i++) {
+            kbdRegistry.handlers[i].clear();
+        }
+    },
+    _onVisibility() {
+        if (document.hidden)
+            kbdRegistry._onBlur();
+    }
+};
+export function parseShortcutBinding(shortcut) {
+    const parts = shortcut.toLowerCase().split('+').map((s) => s.trim()).filter(Boolean);
+    const modifiers = { ctrl: false, shift: false, alt: false, meta: false };
+    let key = '';
+    for (const part of parts) {
+        if (part === 'ctrl' || part === 'control') {
+            modifiers.ctrl = true;
+        }
+        else if (part === 'shift') {
+            modifiers.shift = true;
+        }
+        else if (part === 'alt') {
+            modifiers.alt = true;
+        }
+        else if (part === 'meta' || part === 'cmd' || part === 'command') {
+            modifiers.meta = true;
+        }
+        else {
+            key = part;
+        }
+    }
+    return { modifiers, key };
+}
+export function matchesShortcut(event, binding) {
+    if (normalizeKey(event.key) !== binding.key)
+        return false;
+    if (event.ctrlKey !== binding.modifiers.ctrl)
+        return false;
+    if (event.shiftKey !== binding.modifiers.shift)
+        return false;
+    if (event.altKey !== binding.modifiers.alt)
+        return false;
+    if (event.metaKey !== binding.modifiers.meta)
+        return false;
+    return true;
+}
+function parseShortcuts(shortcuts) {
+    return Object.entries(shortcuts).map(([shortcut, callback]) => ({
+        ...parseShortcutBinding(shortcut),
+        callback
+    }));
+}
+export function useKbd(options = {}) {
+    const _pressedKeys = new SvelteSet();
+    let _shortcutsRef;
+    let _parsedShortcuts = [];
+    if (typeof options.shortcuts !== 'function' && options.shortcuts) {
+        _shortcutsRef = options.shortcuts;
+        _parsedShortcuts = parseShortcuts(options.shortcuts);
+    }
+    function getParsedShortcuts() {
+        if (typeof options.shortcuts !== 'function')
+            return _parsedShortcuts;
+        const current = options.shortcuts();
+        if (current !== _shortcutsRef) {
+            _shortcutsRef = current;
+            _parsedShortcuts = parseShortcuts(current);
+        }
+        return _parsedShortcuts;
+    }
+    function getEnabled() {
+        return typeof options.enabled === 'function' ? options.enabled() : (options.enabled ?? true);
+    }
+    function getTarget() {
+        const t = typeof options.target === 'function' ? options.target() : options.target;
+        return t ?? (typeof window !== 'undefined' ? window : null);
+    }
+    /** Sync modifier state from event booleans to fix missed keyup (e.g. Alt+Tab) */
+    function reconcileModifiers(event) {
+        for (const [key, prop] of MODIFIER_PROPS) {
+            if (event[prop])
+                _pressedKeys.add(key);
+            else
+                _pressedKeys.delete(key);
+        }
+    }
+    function handleKeyDown(event) {
+        if (!getEnabled())
+            return;
+        reconcileModifiers(event);
+        const key = normalizeKey(event.key);
+        _pressedKeys.add(key);
+        if (options.captureModifiers && key in CAPTURABLE_MODIFIERS) {
+            event.preventDefault();
+        }
+        if (event.repeat && !options.repeat)
+            return;
+        const bindings = getParsedShortcuts();
+        for (const binding of bindings) {
+            if (matchesShortcut(event, binding)) {
+                if (options.preventDefault !== false) {
+                    event.preventDefault();
+                }
+                binding.callback(event);
+            }
+        }
+    }
+    function handleKeyUp(event) {
+        if (!getEnabled())
+            return;
+        reconcileModifiers(event);
+        const key = normalizeKey(event.key);
+        _pressedKeys.delete(key);
+    }
+    function handleClear() {
+        _pressedKeys.clear();
+    }
+    $effect(() => {
+        if (!getEnabled()) {
+            _pressedKeys.clear();
+            return;
+        }
+        const target = getTarget();
+        if (!target)
+            return;
+        const isWindowTarget = typeof window !== 'undefined' && target === window;
+        const callbacks = {
+            keydown: handleKeyDown,
+            keyup: handleKeyUp,
+            clear: handleClear
+        };
+        if (isWindowTarget) {
+            kbdRegistry.register(callbacks);
+            return () => {
+                kbdRegistry.unregister(callbacks);
+                _pressedKeys.clear();
+            };
+        }
+        else {
+            const clearOnly = { keydown: () => { }, keyup: () => { }, clear: handleClear };
+            target.addEventListener('keydown', handleKeyDown);
+            target.addEventListener('keyup', handleKeyUp);
+            kbdRegistry.register(clearOnly);
+            return () => {
+                target.removeEventListener('keydown', handleKeyDown);
+                target.removeEventListener('keyup', handleKeyUp);
+                kbdRegistry.unregister(clearOnly);
+                _pressedKeys.clear();
+            };
+        }
+    });
+    return {
+        isPressed(key) {
+            return _pressedKeys.has(normalizeKey(key));
+        },
+        get pressedKeys() {
+            return _pressedKeys;
+        }
+    };
+}
+export { kbdKeysMap, kbdKeysPlatformMap };

package/dist/Link/Link.svelte

@@ -0,0 +1,117 @@
+<script lang="ts" module>
+    import type { LinkProps } from './link.types.js'
+
+    export type Props = LinkProps
+
+    function parseUrl(url: string, baseUrl: URL) {
+        try {
+            const parsed = new URL(url, baseUrl.origin)
+            return {
+                pathname: parsed.pathname,
+                query: parsed.searchParams,
+                hash: parsed.hash
+            }
+        } catch {
+            return {
+                pathname: url,
+                query: new URLSearchParams(),
+                hash: ''
+            }
+        }
+    }
+
+    function isQueryMatch(linkQuery: URLSearchParams, currentQuery: URLSearchParams, mode: boolean | 'partial'): boolean {
+        if (mode === false) return true
+        if (mode === 'partial') {
+            for (const [key, value] of linkQuery) {
+                if (currentQuery.get(key) !== value) return false
+            }
+            return true
+        }
+        return linkQuery.toString() === currentQuery.toString()
+    }
+
+    function isPathnameMatch(linkPath: string, currentPath: string, exactMatch: boolean): boolean {
+        if (exactMatch) return linkPath === currentPath
+
+        const link = linkPath.replace(/\/$/, '') || '/'
+        const current = currentPath.replace(/\/$/, '') || '/'
+
+        return link === '/'
+            ? current === '/'
+            : current === link || current.startsWith(link + '/')
+    }
+</script>
+
+<script lang="ts">
+    import { page } from '$app/state'
+    import { linkVariants, linkDefaults } from './link.variants.js'
+    import { getComponentConfig } from '../config.js'
+
+    const config = getComponentConfig('link', linkDefaults)
+
+    let {
+        href,
+        color = config.defaultVariants.color,
+        active,
+        exact = false,
+        exactQuery = false,
+        exactHash = false,
+        activeClass,
+        inactiveClass,
+        disabled = false,
+        raw = false,
+        external,
+        children,
+        class: className,
+        ui,
+        target,
+        rel,
+        ...restProps
+    }: Props = $props()
+
+    const isExternal = $derived(
+        external ?? (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//'))
+    )
+
+    const resolvedTarget = $derived(target ?? (isExternal ? '_blank' : undefined))
+
+    const resolvedRel = $derived(
+        rel ?? (isExternal || resolvedTarget === '_blank' ? 'noopener noreferrer' : undefined)
+    )
+
+    const isActive = $derived.by(() => {
+        if (active !== undefined) return active
+        if (!page.url || isExternal) return false
+
+        const link = parseUrl(href, page.url)
+
+        if (exactHash && link.hash !== page.url.hash) return false
+        if (!isQueryMatch(link.query, page.url.searchParams, exactQuery)) return false
+
+        return isPathnameMatch(link.pathname, page.url.pathname, exact)
+    })
+
+    const baseClass = $derived.by(() => {
+        const stateClass = isActive ? activeClass : inactiveClass
+        if (raw) return [className, stateClass].filter(Boolean).join(' ')
+
+        const slots = linkVariants({ color, active: isActive, disabled, raw })
+        return slots.base({ class: [config.slots.base, stateClass, className, ui?.base] })
+    })
+
+    const ariaCurrent = $derived(isActive && exact ? ('page' as const) : undefined)
+</script>
+
+<a
+    href={disabled ? undefined : href}
+    class={baseClass}
+    target={resolvedTarget}
+    rel={resolvedRel}
+    aria-disabled={disabled ? 'true' : undefined}
+    aria-current={ariaCurrent}
+    tabindex={disabled ? -1 : undefined}
+    {...restProps}
+>
+    {@render children?.()}
+</a>

package/dist/Link/Link.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { LinkProps } from './link.types.js';
+export type Props = LinkProps;
+declare const Link: import("svelte").Component<LinkProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Link } from './Link.svelte';
+export type { LinkProps } from './link.types.js';

package/dist/Link/index.js

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

package/dist/Link/link.types.d.ts

@@ -0,0 +1,68 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import type { LinkVariantProps, LinkSlots } from './link.variants.js';
+import type { ClassNameValue } from 'tailwind-merge';
+export type LinkProps = Omit<HTMLAnchorAttributes, 'class' | 'href'> & {
+    /**
+     * The destination URL for the anchor element.
+     */
+    href: string;
+    /**
+     * Sets the color scheme applied to the link.
+     * @default 'primary'
+     */
+    color?: NonNullable<LinkVariantProps['color']>;
+    /**
+     * Overrides the auto-detected active state.
+     * When omitted, the active state is inferred from the current route.
+     */
+    active?: boolean;
+    /**
+     * Requires an exact pathname match for active state detection.
+     * @default false
+     */
+    exact?: boolean;
+    /**
+     * Controls query parameter matching for active state detection.
+     * - `true` — requires an exact match of all query parameters.
+     * - `'partial'` — link's query params must be a subset of the current route.
+     * - `false` — query parameters are ignored.
+     * @default false
+     */
+    exactQuery?: boolean | 'partial';
+    /**
+     * Requires an exact hash match for active state detection.
+     * @default false
+     */
+    exactHash?: boolean;
+    /**
+     * Additional CSS class applied when the link is active.
+     */
+    activeClass?: string;
+    /**
+     * Additional CSS class applied when the link is inactive.
+     */
+    inactiveClass?: string;
+    /**
+     * Disables the link and prevents navigation.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Strips all default styling, applying only `class`, `activeClass`, and `inactiveClass`.
+     * @default false
+     */
+    raw?: boolean;
+    /**
+     * Treats the link as external, adding `rel="noopener noreferrer"` and `target="_blank"`.
+     * Auto-detected from the `href` when omitted.
+     */
+    external?: boolean;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific link slots.
+     */
+    ui?: Partial<Record<LinkSlots, ClassNameValue>>;
+};

package/dist/Link/link.types.js

@@ -0,0 +1 @@
+export {};