sv5ui 0.0.1

package/dist/Empty/empty.variants.js

@@ -0,0 +1,364 @@
+import { tv } from 'tailwind-variants';
+export const emptyVariants = tv({
+    slots: {
+        root: 'flex flex-col items-center justify-center rounded-lg text-center',
+        icon: 'shrink-0',
+        avatar: 'shrink-0',
+        title: 'font-medium',
+        description: '',
+        actions: 'flex flex-wrap items-center justify-center gap-2'
+    },
+    variants: {
+        variant: {
+            solid: '',
+            outline: '',
+            soft: '',
+            subtle: ''
+        },
+        color: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        size: {
+            xs: {
+                root: 'gap-2 p-4',
+                icon: 'size-8',
+                title: 'text-sm',
+                description: 'text-xs'
+            },
+            sm: {
+                root: 'gap-2.5 p-5',
+                icon: 'size-10',
+                title: 'text-sm',
+                description: 'text-xs'
+            },
+            md: {
+                root: 'gap-3 p-6',
+                icon: 'size-12',
+                title: 'text-base',
+                description: 'text-sm'
+            },
+            lg: {
+                root: 'gap-4 p-8',
+                icon: 'size-14',
+                title: 'text-lg',
+                description: 'text-sm'
+            },
+            xl: {
+                root: 'gap-5 p-10',
+                icon: 'size-16',
+                title: 'text-xl',
+                description: 'text-base'
+            }
+        }
+    },
+    compoundVariants: [
+        // ========== SOLID VARIANTS ==========
+        {
+            variant: 'solid',
+            color: 'primary',
+            class: {
+                root: 'bg-primary text-on-primary',
+                icon: 'text-on-primary/70',
+                description: 'text-on-primary/80'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'secondary',
+            class: {
+                root: 'bg-secondary text-on-secondary',
+                icon: 'text-on-secondary/70',
+                description: 'text-on-secondary/80'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'tertiary',
+            class: {
+                root: 'bg-tertiary text-on-tertiary',
+                icon: 'text-on-tertiary/70',
+                description: 'text-on-tertiary/80'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'success',
+            class: {
+                root: 'bg-success text-on-success',
+                icon: 'text-on-success/70',
+                description: 'text-on-success/80'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'warning',
+            class: {
+                root: 'bg-warning text-on-warning',
+                icon: 'text-on-warning/70',
+                description: 'text-on-warning/80'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'error',
+            class: {
+                root: 'bg-error text-on-error',
+                icon: 'text-on-error/70',
+                description: 'text-on-error/80'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'info',
+            class: {
+                root: 'bg-info text-on-info',
+                icon: 'text-on-info/70',
+                description: 'text-on-info/80'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'surface',
+            class: {
+                root: 'bg-inverse-surface text-inverse-on-surface',
+                icon: 'text-inverse-on-surface/70',
+                description: 'text-inverse-on-surface/80'
+            }
+        },
+        // ========== OUTLINE VARIANTS ==========
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: {
+                root: 'ring ring-inset ring-primary/25 text-primary',
+                icon: 'text-primary/70',
+                description: 'text-primary/80'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: {
+                root: 'ring ring-inset ring-secondary/25 text-secondary',
+                icon: 'text-secondary/70',
+                description: 'text-secondary/80'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'tertiary',
+            class: {
+                root: 'ring ring-inset ring-tertiary/25 text-tertiary',
+                icon: 'text-tertiary/70',
+                description: 'text-tertiary/80'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: {
+                root: 'ring ring-inset ring-success/25 text-success',
+                icon: 'text-success/70',
+                description: 'text-success/80'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: {
+                root: 'ring ring-inset ring-warning/25 text-warning',
+                icon: 'text-warning/70',
+                description: 'text-warning/80'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'error',
+            class: {
+                root: 'ring ring-inset ring-error/25 text-error',
+                icon: 'text-error/70',
+                description: 'text-error/80'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: {
+                root: 'ring ring-inset ring-info/25 text-info',
+                icon: 'text-info/70',
+                description: 'text-info/80'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'surface',
+            class: {
+                root: 'ring ring-inset ring-outline-variant text-on-surface',
+                icon: 'text-on-surface-variant',
+                description: 'text-on-surface-variant'
+            }
+        },
+        // ========== SOFT VARIANTS ==========
+        {
+            variant: 'soft',
+            color: 'primary',
+            class: {
+                root: 'bg-primary-container text-on-primary-container',
+                icon: 'text-on-primary-container/70',
+                description: 'text-on-primary-container/80'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'secondary',
+            class: {
+                root: 'bg-secondary-container text-on-secondary-container',
+                icon: 'text-on-secondary-container/70',
+                description: 'text-on-secondary-container/80'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'tertiary',
+            class: {
+                root: 'bg-tertiary-container text-on-tertiary-container',
+                icon: 'text-on-tertiary-container/70',
+                description: 'text-on-tertiary-container/80'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: {
+                root: 'bg-success-container text-on-success-container',
+                icon: 'text-on-success-container/70',
+                description: 'text-on-success-container/80'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: {
+                root: 'bg-warning-container text-on-warning-container',
+                icon: 'text-on-warning-container/70',
+                description: 'text-on-warning-container/80'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'error',
+            class: {
+                root: 'bg-error-container text-on-error-container',
+                icon: 'text-on-error-container/70',
+                description: 'text-on-error-container/80'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: {
+                root: 'bg-info-container text-on-info-container',
+                icon: 'text-on-info-container/70',
+                description: 'text-on-info-container/80'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'surface',
+            class: {
+                root: 'bg-surface-container-highest text-on-surface',
+                icon: 'text-on-surface-variant',
+                description: 'text-on-surface-variant'
+            }
+        },
+        // ========== SUBTLE VARIANTS ==========
+        {
+            variant: 'subtle',
+            color: 'primary',
+            class: {
+                root: 'bg-primary-container text-on-primary-container ring ring-inset ring-primary/25',
+                icon: 'text-on-primary-container/70',
+                description: 'text-on-primary-container/80'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'secondary',
+            class: {
+                root: 'bg-secondary-container text-on-secondary-container ring ring-inset ring-secondary/25',
+                icon: 'text-on-secondary-container/70',
+                description: 'text-on-secondary-container/80'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'tertiary',
+            class: {
+                root: 'bg-tertiary-container text-on-tertiary-container ring ring-inset ring-tertiary/25',
+                icon: 'text-on-tertiary-container/70',
+                description: 'text-on-tertiary-container/80'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'success',
+            class: {
+                root: 'bg-success-container text-on-success-container ring ring-inset ring-success/25',
+                icon: 'text-on-success-container/70',
+                description: 'text-on-success-container/80'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'warning',
+            class: {
+                root: 'bg-warning-container text-on-warning-container ring ring-inset ring-warning/25',
+                icon: 'text-on-warning-container/70',
+                description: 'text-on-warning-container/80'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'error',
+            class: {
+                root: 'bg-error-container text-on-error-container ring ring-inset ring-error/25',
+                icon: 'text-on-error-container/70',
+                description: 'text-on-error-container/80'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'info',
+            class: {
+                root: 'bg-info-container text-on-info-container ring ring-inset ring-info/25',
+                icon: 'text-on-info-container/70',
+                description: 'text-on-info-container/80'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'surface',
+            class: {
+                root: 'bg-surface-container-highest text-on-surface ring ring-inset ring-outline-variant',
+                icon: 'text-on-surface-variant',
+                description: 'text-on-surface-variant'
+            }
+        }
+    ],
+    defaultVariants: {
+        variant: 'outline',
+        color: 'surface',
+        size: 'md'
+    }
+});
+export const emptyDefaults = {
+    defaultVariants: emptyVariants.defaultVariants,
+    slots: {}
+};

package/dist/Empty/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Empty } from './Empty.svelte';
+export type { EmptyProps } from './empty.types.js';

package/dist/Empty/index.js

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

package/dist/Icon/Icon.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+    import type { IconProps } from './icon.types.js'
+
+    export type Props = IconProps
+</script>
+
+<script lang="ts">
+    import Icon from '@iconify/svelte'
+
+    let {
+        name,
+        size = 24,
+        color,
+        flipH = false,
+        flipV = false,
+        rotate = 0,
+        class: className,
+        ...restProps
+    }: Props = $props()
+
+    const flip = $derived.by(() => {
+        if (flipH && flipV) return 'horizontal,vertical'
+        if (flipH) return 'horizontal'
+        if (flipV) return 'vertical'
+        return undefined
+    })
+
+    const rotateValue = $derived(rotate ? rotate / 90 : undefined)
+</script>
+
+<Icon
+    icon={name}
+    width={size}
+    height={size}
+    {color}
+    {flip}
+    rotate={rotateValue}
+    class="shrink-0 {className ?? ''}"
+    {...restProps}
+/>

package/dist/Icon/Icon.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { IconProps } from './icon.types.js';
+export type Props = IconProps;
+import Icon from '@iconify/svelte';
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/Icon/icon.types.d.ts

@@ -0,0 +1,37 @@
+import type { IconProps as IconifyProps } from '@iconify/svelte';
+export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height' | 'rotate' | 'flip' | 'class'> {
+    /** Additional CSS classes */
+    class?: string;
+    /**
+     * Icon name in Iconify format: "collection:icon-name"
+     * @example "lucide:home", "mdi:account", "heroicons:star"
+     * @see https://icon-sets.iconify.design/
+     */
+    name: string;
+    /**
+     * Icon size (applied to both width and height)
+     * @default "1em"
+     * @example 24, "1.5rem", "20px"
+     */
+    size?: number | string;
+    /**
+     * Icon color (CSS color value)
+     * @example "red", "#ff0000", "rgb(255, 0, 0)", "currentColor"
+     */
+    color?: string;
+    /**
+     * Flip icon horizontally
+     * @default false
+     */
+    flipH?: boolean;
+    /**
+     * Flip icon vertically
+     * @default false
+     */
+    flipV?: boolean;
+    /**
+     * Rotate icon by specified degrees
+     * @default 0
+     */
+    rotate?: 0 | 90 | 180 | 270;
+}

package/dist/Icon/icon.types.js

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

package/dist/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon.svelte';
+export type { IconProps } from './icon.types.js';

package/dist/Icon/index.js

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

package/dist/Kbd/Kbd.svelte

@@ -0,0 +1,35 @@
+<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 { kbdVariants, kbdDefaults } from './kbd.variants.js'
+    import { getComponentConfig } from '../config.js'
+
+    const config = getComponentConfig('kbd', kbdDefaults)
+
+    let {
+        as = 'kbd',
+        value,
+        color = config.defaultVariants.color,
+        size = config.defaultVariants.size,
+        variant = config.defaultVariants.variant,
+        class: className,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    const displayValue = $derived(resolveKey(value))
+    const kbdClass = $derived(kbdVariants({ color, size, variant, class: className }))
+</script>
+
+<svelte:element this={as} 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, {}, "">;
+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 } 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,77 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { 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'> & {
+    /**
+     * 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']>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+};

package/dist/Kbd/kbd.types.js

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