svelora 2.1.0

package/dist/Input/input.variants.js

@@ -0,0 +1,387 @@
+import { tv } from 'tailwind-variants';
+export const inputVariants = tv({
+    slots: {
+        root: 'relative w-full inline-flex items-center',
+        base: [
+            'w-full rounded-md border-0 bg-surface text-on-surface placeholder:text-on-surface-variant/50',
+            'disabled:cursor-not-allowed disabled:opacity-75',
+            'transition-colors',
+            'focus:outline-none'
+        ],
+        leading: 'absolute inset-y-0 start-0 flex items-center pointer-events-none',
+        leadingIcon: 'shrink-0 text-on-surface-variant/75',
+        leadingAvatar: 'shrink-0',
+        leadingAvatarSize: '',
+        trailing: 'absolute inset-y-0 end-0 flex items-center pointer-events-none',
+        trailingIcon: 'shrink-0 text-on-surface-variant/75'
+    },
+    variants: {
+        variant: {
+            outline: '',
+            soft: '',
+            subtle: '',
+            ghost: '',
+            none: ''
+        },
+        color: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        size: {
+            xs: {
+                base: 'px-2 py-1 text-xs rounded',
+                leading: 'ps-2',
+                leadingIcon: 'size-3.5',
+                leadingAvatarSize: '3xs',
+                trailing: 'pe-2',
+                trailingIcon: 'size-3.5'
+            },
+            sm: {
+                base: 'px-2.5 py-1.5 text-xs rounded-md',
+                leading: 'ps-2.5',
+                leadingIcon: 'size-4',
+                leadingAvatarSize: '3xs',
+                trailing: 'pe-2.5',
+                trailingIcon: 'size-4'
+            },
+            md: {
+                base: 'px-3 py-2 text-sm rounded-md',
+                leading: 'ps-3',
+                leadingIcon: 'size-5',
+                leadingAvatarSize: '2xs',
+                trailing: 'pe-3',
+                trailingIcon: 'size-5'
+            },
+            lg: {
+                base: 'px-4 py-2.5 text-sm rounded-md',
+                leading: 'ps-4',
+                leadingIcon: 'size-5',
+                leadingAvatarSize: '2xs',
+                trailing: 'pe-4',
+                trailingIcon: 'size-5'
+            },
+            xl: {
+                base: 'px-5 py-3 text-base rounded-lg',
+                leading: 'ps-5',
+                leadingIcon: 'size-6',
+                leadingAvatarSize: 'xs',
+                trailing: 'pe-5',
+                trailingIcon: 'size-6'
+            }
+        },
+        leading: {
+            true: ''
+        },
+        trailing: {
+            true: ''
+        },
+        highlight: {
+            true: ''
+        }
+    },
+    compoundVariants: [
+        // ========== OUTLINE VARIANTS ==========
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: {
+                base: 'ring ring-inset ring-outline-variant focus:ring-2 focus:ring-primary'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: {
+                base: 'ring ring-inset ring-outline-variant focus:ring-2 focus:ring-secondary'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'tertiary',
+            class: {
+                base: 'ring ring-inset ring-outline-variant focus:ring-2 focus:ring-tertiary'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: {
+                base: 'ring ring-inset ring-outline-variant focus:ring-2 focus:ring-success'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: {
+                base: 'ring ring-inset ring-outline-variant focus:ring-2 focus:ring-warning'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'error',
+            class: {
+                base: 'ring ring-inset ring-outline-variant focus:ring-2 focus:ring-error'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: {
+                base: 'ring ring-inset ring-outline-variant focus:ring-2 focus:ring-info'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'surface',
+            class: {
+                base: 'ring ring-inset ring-outline-variant focus:ring-2 focus:ring-outline'
+            }
+        },
+        // ========== SOFT VARIANTS ==========
+        {
+            variant: 'soft',
+            color: 'primary',
+            class: {
+                base: 'bg-primary-container/50 focus:bg-primary-container/75 focus:ring-2 focus:ring-inset focus:ring-primary'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'secondary',
+            class: {
+                base: 'bg-secondary-container/50 focus:bg-secondary-container/75 focus:ring-2 focus:ring-inset focus:ring-secondary'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'tertiary',
+            class: {
+                base: 'bg-tertiary-container/50 focus:bg-tertiary-container/75 focus:ring-2 focus:ring-inset focus:ring-tertiary'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: {
+                base: 'bg-success-container/50 focus:bg-success-container/75 focus:ring-2 focus:ring-inset focus:ring-success'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: {
+                base: 'bg-warning-container/50 focus:bg-warning-container/75 focus:ring-2 focus:ring-inset focus:ring-warning'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'error',
+            class: {
+                base: 'bg-error-container/50 focus:bg-error-container/75 focus:ring-2 focus:ring-inset focus:ring-error'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: {
+                base: 'bg-info-container/50 focus:bg-info-container/75 focus:ring-2 focus:ring-inset focus:ring-info'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'surface',
+            class: {
+                base: 'bg-surface-container-highest/50 focus:bg-surface-container-highest/75 focus:ring-2 focus:ring-inset focus:ring-outline'
+            }
+        },
+        // ========== SUBTLE VARIANTS ==========
+        {
+            variant: 'subtle',
+            color: 'primary',
+            class: {
+                base: 'ring ring-inset ring-primary/25 bg-primary-container/50 focus:ring-2 focus:ring-primary'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'secondary',
+            class: {
+                base: 'ring ring-inset ring-secondary/25 bg-secondary-container/50 focus:ring-2 focus:ring-secondary'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'tertiary',
+            class: {
+                base: 'ring ring-inset ring-tertiary/25 bg-tertiary-container/50 focus:ring-2 focus:ring-tertiary'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'success',
+            class: {
+                base: 'ring ring-inset ring-success/25 bg-success-container/50 focus:ring-2 focus:ring-success'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'warning',
+            class: {
+                base: 'ring ring-inset ring-warning/25 bg-warning-container/50 focus:ring-2 focus:ring-warning'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'error',
+            class: {
+                base: 'ring ring-inset ring-error/25 bg-error-container/50 focus:ring-2 focus:ring-error'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'info',
+            class: {
+                base: 'ring ring-inset ring-info/25 bg-info-container/50 focus:ring-2 focus:ring-info'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'surface',
+            class: {
+                base: 'ring ring-inset ring-outline-variant bg-surface-container-highest/50 focus:ring-2 focus:ring-outline'
+            }
+        },
+        // ========== GHOST VARIANTS ==========
+        {
+            variant: 'ghost',
+            color: 'primary',
+            class: {
+                base: 'bg-transparent hover:bg-primary-container/50 focus:ring-2 focus:ring-inset focus:ring-primary'
+            }
+        },
+        {
+            variant: 'ghost',
+            color: 'secondary',
+            class: {
+                base: 'bg-transparent hover:bg-secondary-container/50 focus:ring-2 focus:ring-inset focus:ring-secondary'
+            }
+        },
+        {
+            variant: 'ghost',
+            color: 'tertiary',
+            class: {
+                base: 'bg-transparent hover:bg-tertiary-container/50 focus:ring-2 focus:ring-inset focus:ring-tertiary'
+            }
+        },
+        {
+            variant: 'ghost',
+            color: 'success',
+            class: {
+                base: 'bg-transparent hover:bg-success-container/50 focus:ring-2 focus:ring-inset focus:ring-success'
+            }
+        },
+        {
+            variant: 'ghost',
+            color: 'warning',
+            class: {
+                base: 'bg-transparent hover:bg-warning-container/50 focus:ring-2 focus:ring-inset focus:ring-warning'
+            }
+        },
+        {
+            variant: 'ghost',
+            color: 'error',
+            class: {
+                base: 'bg-transparent hover:bg-error-container/50 focus:ring-2 focus:ring-inset focus:ring-error'
+            }
+        },
+        {
+            variant: 'ghost',
+            color: 'info',
+            class: {
+                base: 'bg-transparent hover:bg-info-container/50 focus:ring-2 focus:ring-inset focus:ring-info'
+            }
+        },
+        {
+            variant: 'ghost',
+            color: 'surface',
+            class: {
+                base: 'bg-transparent hover:bg-surface-container-highest/50 focus:ring-2 focus:ring-inset focus:ring-outline'
+            }
+        },
+        // ========== NONE VARIANT ==========
+        {
+            variant: 'none',
+            class: {
+                base: 'bg-transparent focus:ring-0'
+            }
+        },
+        // ========== HIGHLIGHT VARIANTS ==========
+        {
+            highlight: true,
+            color: 'primary',
+            class: { base: 'ring-2 ring-inset ring-primary' }
+        },
+        {
+            highlight: true,
+            color: 'secondary',
+            class: { base: 'ring-2 ring-inset ring-secondary' }
+        },
+        {
+            highlight: true,
+            color: 'tertiary',
+            class: { base: 'ring-2 ring-inset ring-tertiary' }
+        },
+        {
+            highlight: true,
+            color: 'success',
+            class: { base: 'ring-2 ring-inset ring-success' }
+        },
+        {
+            highlight: true,
+            color: 'warning',
+            class: { base: 'ring-2 ring-inset ring-warning' }
+        },
+        {
+            highlight: true,
+            color: 'error',
+            class: { base: 'ring-2 ring-inset ring-error' }
+        },
+        {
+            highlight: true,
+            color: 'info',
+            class: { base: 'ring-2 ring-inset ring-info' }
+        },
+        {
+            highlight: true,
+            color: 'surface',
+            class: { base: 'ring-2 ring-inset ring-outline' }
+        },
+        // ========== LEADING PADDING ADJUSTMENTS ==========
+        { leading: true, size: 'xs', class: { base: 'ps-7' } },
+        { leading: true, size: 'sm', class: { base: 'ps-8' } },
+        { leading: true, size: 'md', class: { base: 'ps-9' } },
+        { leading: true, size: 'lg', class: { base: 'ps-10' } },
+        { leading: true, size: 'xl', class: { base: 'ps-12' } },
+        // ========== TRAILING PADDING ADJUSTMENTS ==========
+        { trailing: true, size: 'xs', class: { base: 'pe-7' } },
+        { trailing: true, size: 'sm', class: { base: 'pe-8' } },
+        { trailing: true, size: 'md', class: { base: 'pe-9' } },
+        { trailing: true, size: 'lg', class: { base: 'pe-10' } },
+        { trailing: true, size: 'xl', class: { base: 'pe-12' } }
+    ],
+    defaultVariants: {
+        variant: 'outline',
+        color: 'primary',
+        size: 'md'
+    }
+});
+export const inputDefaults = {
+    defaultVariants: inputVariants.defaultVariants,
+    slots: {}
+};

package/dist/Kbd/Kbd.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+    import type { KbdProps } from './kbd.types.js'
+    import { resolveKey } from './useKbd.svelte.js'
+
+    export type Props = KbdProps
+</script>
+
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import { getComponentConfig } from '../config.js'
+    import { kbdDefaults, kbdVariants } from './kbd.variants.js'
+
+    const config = getComponentConfig('kbd', kbdDefaults)
+
+    let {
+        ref = $bindable(null),
+        as = 'kbd',
+        value,
+        color = config.defaultVariants.color,
+        size = config.defaultVariants.size,
+        variant = config.defaultVariants.variant,
+        ui,
+        class: className,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    let mounted = $state(false)
+    onMount(() => (mounted = true))
+
+    const displayValue = $derived(resolveKey(value, mounted))
+    const kbdClass = $derived(
+        kbdVariants({ color, size, variant }).base({
+            class: [config.slots.base, className, ui?.base]
+        })
+    )
+</script>
+
+<svelte:element this={as} bind:this={ref} class={kbdClass} {...restProps}>
+    {#if children}
+        {@render children()}
+    {:else if displayValue}
+        {displayValue}
+    {/if}
+</svelte:element>

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

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

package/dist/Kbd/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Kbd } from './Kbd.svelte';
+export type { KbdProps, UseKbdOptions, UseKbdReturn } from './kbd.types.js';
+export { formatShortcut, useKbd } from './useKbd.svelte.js';

package/dist/Kbd/index.js

@@ -0,0 +1,2 @@
+export { default as Kbd } from './Kbd.svelte';
+export { formatShortcut, useKbd } from './useKbd.svelte.js';

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

@@ -0,0 +1,91 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { KbdSlots, KbdVariantProps } from './kbd.variants.js';
+export type KeyboardShortcutCallback = (event: KeyboardEvent) => void;
+export interface UseKbdOptions {
+    /**
+     * Map of shortcut strings to callbacks. Supports getter for reactive shortcuts.
+     * @example { 'ctrl+k': () => openSearch(), 'escape': () => close() }
+     * @example () => mode === 'edit' ? editShortcuts : viewShortcuts
+     */
+    shortcuts?: Record<string, KeyboardShortcutCallback> | (() => Record<string, KeyboardShortcutCallback>);
+    /**
+     * Target element to attach listeners to. Supports getter for reactivity.
+     * @default window
+     */
+    target?: HTMLElement | Window | null | (() => HTMLElement | Window | null);
+    /**
+     * Whether the hook is active. Supports getter for reactivity.
+     * @default true
+     */
+    enabled?: boolean | (() => boolean);
+    /**
+     * Whether to call preventDefault() on matched shortcuts.
+     * @default true
+     */
+    preventDefault?: boolean;
+    /**
+     * Prevent modifier keys (Alt, Meta) from triggering browser default behavior
+     * (e.g., Alt activating browser menu on Windows). Enables reliable modifier tracking.
+     * @default false
+     */
+    captureModifiers?: boolean;
+    /**
+     * Whether shortcut callbacks should fire repeatedly when a key is held down.
+     * @default false
+     */
+    repeat?: boolean;
+}
+export interface UseKbdReturn {
+    /** Check if a specific key is currently pressed (case-insensitive) */
+    isPressed: (key: string) => boolean;
+    /** Reactive set of currently pressed key names (lowercase) */
+    readonly pressedKeys: ReadonlySet<string>;
+}
+export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Sets the HTML element type to render.
+     * @default 'kbd'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Key value to display. Supports special keys that auto-convert to symbols.
+     * On macOS: meta → ⌘, ctrl → ⌃, alt → ⌥, shift → ⇧
+     * On other OS: meta → Ctrl, ctrl → Ctrl, alt → Alt, shift → Shift
+     * @example "meta", "shift", "K", "enter", "escape"
+     */
+    value?: string;
+    /**
+     * Sets the color scheme applied to the kbd.
+     * @default 'surface'
+     */
+    color?: NonNullable<KbdVariantProps['color']>;
+    /**
+     * Controls the dimensions and text size of the kbd.
+     * @default 'md'
+     */
+    size?: NonNullable<KbdVariantProps['size']>;
+    /**
+     * Controls the visual style of the kbd.
+     * @default 'outline'
+     */
+    variant?: NonNullable<KbdVariantProps['variant']>;
+    /**
+     * Override styles for specific kbd slots.
+     * Available slots: base.
+     */
+    ui?: Partial<Record<KbdSlots, ClassNameValue>>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Default content slot for custom key display.
+     */
+    children?: Snippet;
+};

package/dist/Kbd/kbd.types.js

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