svelora 2.1.0

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

@@ -0,0 +1,180 @@
+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: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    variant: {
+        solid: string;
+        outline: {
+            base: string;
+        };
+        soft: string;
+        subtle: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    variant: {
+        solid: string;
+        outline: {
+            base: string;
+        };
+        soft: string;
+        subtle: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    variant: {
+        solid: string;
+        outline: {
+            base: string;
+        };
+        soft: string;
+        subtle: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, 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 type KbdSlots = keyof ReturnType<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: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+        };
+        variant: {
+            solid: string;
+            outline: {
+                base: string;
+            };
+            soft: string;
+            subtle: {
+                base: string;
+            };
+        };
+    }, {
+        base: string;
+    }, {
+        color: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+        };
+        variant: {
+            solid: string;
+            outline: {
+                base: string;
+            };
+            soft: string;
+            subtle: {
+                base: string;
+            };
+        };
+    }, {
+        base: string;
+    }>;
+    slots: Partial<Record<KbdSlots, string>>;
+};

package/dist/Kbd/kbd.variants.js

@@ -0,0 +1,168 @@
+import { tv } from 'tailwind-variants';
+export const kbdVariants = tv({
+    slots: {
+        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: { base: 'h-4 min-w-4 text-[10px]' },
+            md: { base: 'h-5 min-w-5 text-[11px]' },
+            lg: { base: 'h-6 min-w-6 text-[12px]' }
+        },
+        variant: {
+            solid: '',
+            outline: { base: 'ring ring-inset' },
+            soft: '',
+            subtle: { base: 'ring ring-inset' }
+        }
+    },
+    compoundVariants: [
+        // Solid variants
+        { color: 'primary', variant: 'solid', class: { base: 'bg-primary text-on-primary' } },
+        { color: 'secondary', variant: 'solid', class: { base: 'bg-secondary text-on-secondary' } },
+        { color: 'success', variant: 'solid', class: { base: 'bg-success text-on-success' } },
+        { color: 'warning', variant: 'solid', class: { base: 'bg-warning text-on-warning' } },
+        { color: 'error', variant: 'solid', class: { base: 'bg-error text-on-error' } },
+        { color: 'info', variant: 'solid', class: { base: 'bg-info text-on-info' } },
+        {
+            color: 'surface',
+            variant: 'solid',
+            class: { base: 'bg-inverse-surface text-inverse-on-surface' }
+        },
+        // Outline variants
+        { color: 'primary', variant: 'outline', class: { base: 'ring-primary/50 text-primary' } },
+        {
+            color: 'secondary',
+            variant: 'outline',
+            class: { base: 'ring-secondary/50 text-secondary' }
+        },
+        { color: 'success', variant: 'outline', class: { base: 'ring-success/50 text-success' } },
+        { color: 'warning', variant: 'outline', class: { base: 'ring-warning/50 text-warning' } },
+        { color: 'error', variant: 'outline', class: { base: 'ring-error/50 text-error' } },
+        { color: 'info', variant: 'outline', class: { base: 'ring-info/50 text-info' } },
+        {
+            color: 'surface',
+            variant: 'outline',
+            class: { base: 'ring-outline-variant text-on-surface-variant' }
+        },
+        // Soft variants
+        {
+            color: 'primary',
+            variant: 'soft',
+            class: { base: 'bg-primary-container text-on-primary-container' }
+        },
+        {
+            color: 'secondary',
+            variant: 'soft',
+            class: { base: 'bg-secondary-container text-on-secondary-container' }
+        },
+        {
+            color: 'success',
+            variant: 'soft',
+            class: { base: 'bg-success-container text-on-success-container' }
+        },
+        {
+            color: 'warning',
+            variant: 'soft',
+            class: { base: 'bg-warning-container text-on-warning-container' }
+        },
+        {
+            color: 'error',
+            variant: 'soft',
+            class: { base: 'bg-error-container text-on-error-container' }
+        },
+        {
+            color: 'info',
+            variant: 'soft',
+            class: { base: 'bg-info-container text-on-info-container' }
+        },
+        {
+            color: 'surface',
+            variant: 'soft',
+            class: { base: 'bg-surface-container-highest text-on-surface' }
+        },
+        // Subtle variants
+        {
+            color: 'primary',
+            variant: 'subtle',
+            class: { base: 'ring-primary/25 bg-primary-container text-on-primary-container' }
+        },
+        {
+            color: 'secondary',
+            variant: 'subtle',
+            class: { base: 'ring-secondary/25 bg-secondary-container text-on-secondary-container' }
+        },
+        {
+            color: 'success',
+            variant: 'subtle',
+            class: { base: 'ring-success/25 bg-success-container text-on-success-container' }
+        },
+        {
+            color: 'warning',
+            variant: 'subtle',
+            class: { base: 'ring-warning/25 bg-warning-container text-on-warning-container' }
+        },
+        {
+            color: 'error',
+            variant: 'subtle',
+            class: { base: 'ring-error/25 bg-error-container text-on-error-container' }
+        },
+        {
+            color: 'info',
+            variant: 'subtle',
+            class: { base: 'ring-info/25 bg-info-container text-on-info-container' }
+        },
+        {
+            color: 'surface',
+            variant: 'subtle',
+            class: { base: '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: '⌥',
+    win: '⊞',
+    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,
+    slots: {}
+};

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

@@ -0,0 +1,29 @@
+import type { UseKbdOptions, UseKbdReturn } from './kbd.types.js';
+import { kbdKeysMap, kbdKeysPlatformMap } from './kbd.variants.js';
+export declare function isMac(): boolean;
+/** @internal */
+export declare const __resetPlatformCache: () => void;
+export declare function resolveKey(value: string | undefined, platformReady?: boolean): 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,248 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { kbdKeysMap, kbdKeysPlatformMap } from './kbd.variants.js';
+let cachedIsMac;
+export function isMac() {
+    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 function resolveKey(value, platformReady = true) {
+    if (!value)
+        return null;
+    const key = value.toLowerCase();
+    if (key in kbdKeysPlatformMap) {
+        if (!platformReady)
+            return null;
+        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 = new Set(['alt', 'meta']);
+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();
+    const { captureModifiers = false, repeat: allowRepeat = false, preventDefault: shouldPrevent = true } = options;
+    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);
+    }
+    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 (captureModifiers && CAPTURABLE_MODIFIERS.has(key)) {
+            event.preventDefault();
+        }
+        if (event.repeat && !allowRepeat)
+            return;
+        for (const binding of getParsedShortcuts()) {
+            if (matchesShortcut(event, binding)) {
+                if (shouldPrevent)
+                    event.preventDefault();
+                binding.callback(event);
+            }
+        }
+    }
+    function handleKeyUp(event) {
+        if (!getEnabled())
+            return;
+        reconcileModifiers(event);
+        _pressedKeys.delete(normalizeKey(event.key));
+    }
+    function handleClear() {
+        _pressedKeys.clear();
+    }
+    const callbacks = {
+        keydown: handleKeyDown,
+        keyup: handleKeyUp,
+        clear: handleClear
+    };
+    const clearOnlyCallbacks = {
+        keydown: () => { },
+        keyup: () => { },
+        clear: handleClear
+    };
+    $effect(() => {
+        if (!getEnabled()) {
+            _pressedKeys.clear();
+            return;
+        }
+        const target = getTarget();
+        if (!target)
+            return;
+        if (typeof window !== 'undefined' && target === window) {
+            kbdRegistry.register(callbacks);
+            return () => {
+                kbdRegistry.unregister(callbacks);
+                _pressedKeys.clear();
+            };
+        }
+        target.addEventListener('keydown', handleKeyDown);
+        target.addEventListener('keyup', handleKeyUp);
+        kbdRegistry.register(clearOnlyCallbacks);
+        return () => {
+            target.removeEventListener('keydown', handleKeyDown);
+            target.removeEventListener('keyup', handleKeyUp);
+            kbdRegistry.unregister(clearOnlyCallbacks);
+            _pressedKeys.clear();
+        };
+    });
+    return {
+        isPressed: (key) => _pressedKeys.has(normalizeKey(key)),
+        get pressedKeys() {
+            return _pressedKeys;
+        }
+    };
+}
+export { kbdKeysMap, kbdKeysPlatformMap };