sv5ui-plus 4.0.0

package/dist/components/Fonts/fonts.js

@@ -0,0 +1,126 @@
+const defaultSansFallback = "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+const defaultMonoFallback = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace";
+export const defaultFontFamilies = [
+    {
+        name: 'Inter',
+        variable: '--font-sans-family',
+        weights: [400, 500, 600, 700]
+    },
+    {
+        name: 'Inter',
+        variable: '--font-heading-family',
+        weights: [400, 500, 600, 700]
+    },
+    {
+        name: 'JetBrains Mono',
+        variable: '--font-mono-family',
+        weights: [400, 500, 700]
+    }
+];
+export const fontsDefaults = {
+    families: defaultFontFamilies,
+    display: 'swap',
+    preconnect: true
+};
+function isLocalFont(font) {
+    return font.provider === 'local';
+}
+function normalizeFontName(name) {
+    return name.trim().replace(/\s+/g, ' ');
+}
+function getFontWeights(weights) {
+    const normalized = (weights ?? [400]).filter((weight, index, source) => Number.isInteger(weight) &&
+        weight >= 100 &&
+        weight <= 900 &&
+        source.indexOf(weight) === index);
+    return normalized.length > 0 ? [...normalized].sort((a, b) => a - b) : [400];
+}
+function getFontStyles(styles) {
+    const normalized = (styles ?? ['normal']).filter((style, index, source) => (style === 'normal' || style === 'italic') && source.indexOf(style) === index);
+    if (normalized.length === 0)
+        return ['normal'];
+    if (normalized.includes('normal') && normalized.includes('italic')) {
+        return ['normal', 'italic'];
+    }
+    return normalized[0] === 'italic' ? ['italic'] : ['normal'];
+}
+function encodeFamilyName(name) {
+    return normalizeFontName(name).replaceAll(' ', '+');
+}
+function escapeFontName(name) {
+    return name.replaceAll('\\', '\\\\').replaceAll("'", "\\'");
+}
+function getDefaultFallback(variable) {
+    return variable?.includes('mono') ? defaultMonoFallback : defaultSansFallback;
+}
+function buildFamilyQuery(font) {
+    const name = encodeFamilyName(font.name);
+    const weights = getFontWeights(font.weights);
+    const styles = getFontStyles(font.styles);
+    if (styles.length === 1 && styles[0] === 'normal') {
+        return `${name}:wght@${weights.join(';')}`;
+    }
+    const pairs = styles.flatMap((style) => weights.map((weight) => `${style === 'italic' ? 1 : 0},${weight}`));
+    return `${name}:ital,wght@${pairs.join(';')}`;
+}
+export function buildGoogleFontsUrl(fonts, display = 'swap') {
+    const families = fonts
+        .filter((font) => !isLocalFont(font))
+        .map((font) => buildFamilyQuery(font))
+        .filter((family, index, source) => family.length > 0 && source.indexOf(family) === index);
+    if (families.length === 0)
+        return '';
+    const familyParams = families
+        .map((f) => `family=${encodeURIComponent(f).replaceAll('%2B', '+')}`)
+        .join('&');
+    return `https://fonts.googleapis.com/css2?${familyParams}&display=${display}`;
+}
+export function buildFontFamily(font) {
+    const family = `'${escapeFontName(normalizeFontName(font.name))}'`;
+    return `${family}, ${font.fallback ?? getDefaultFallback(font.variable)}`;
+}
+function buildLocalFontSourceReference(source) {
+    const url = `url('${source.src.replaceAll("'", "\\'")}')`;
+    return source.format ? `${url} format('${source.format}')` : url;
+}
+export function buildLocalFontFaceCss(fonts, defaultDisplay = 'swap') {
+    const declarations = fonts.filter(isLocalFont).flatMap((font) => font.sources.map((source) => {
+        const lines = [
+            '@font-face {',
+            `    font-family: '${escapeFontName(normalizeFontName(font.name))}';`,
+            `    src: ${buildLocalFontSourceReference(source)};`,
+            `    font-display: ${font.display ?? defaultDisplay};`,
+            `    font-style: ${source.style ?? 'normal'};`,
+            `    font-weight: ${source.weight ?? 400};`
+        ];
+        if (source.unicodeRange) {
+            lines.push(`    unicode-range: ${source.unicodeRange};`);
+        }
+        lines.push('}');
+        return lines.join('\n');
+    }));
+    return declarations.join('\n\n');
+}
+export function buildFontVariablesCss(fonts) {
+    const declarations = fonts
+        .filter((font) => typeof font.variable === 'string' && font.variable.length > 2)
+        .map((font) => `    ${font.variable}: ${buildFontFamily(font)};`);
+    if (declarations.length === 0)
+        return '';
+    return `:root {\n${declarations.join('\n')}\n}`;
+}
+export function resolveFontsOptions(config) {
+    if (config === false)
+        return false;
+    if (config === true) {
+        return fontsDefaults;
+    }
+    if (config && typeof config === 'object') {
+        return {
+            families: config.families ?? fontsDefaults.families,
+            display: config.display ?? fontsDefaults.display,
+            preconnect: config.preconnect ?? fontsDefaults.preconnect
+        };
+    }
+    return fontsDefaults;
+}

package/dist/components/Fonts/fonts.types.d.ts

@@ -0,0 +1,40 @@
+export type GoogleFontStyle = 'normal' | 'italic';
+export type GoogleFontDisplay = 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+export type FontProvider = 'google' | 'local';
+export type GoogleFontDefinition = {
+    provider?: 'google';
+    name: string;
+    weights?: number[];
+    styles?: GoogleFontStyle[];
+    variable?: `--${string}`;
+    fallback?: string;
+};
+export type LocalFontSourceFormat = 'woff2' | 'woff' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg';
+export type LocalFontSource = {
+    src: string;
+    format?: LocalFontSourceFormat;
+    weight?: number | `${number} ${number}`;
+    style?: GoogleFontStyle;
+    unicodeRange?: string;
+};
+export type LocalFontDefinition = {
+    provider: 'local';
+    name: string;
+    sources: LocalFontSource[];
+    variable?: `--${string}`;
+    fallback?: string;
+    display?: GoogleFontDisplay;
+};
+export type FontDefinition = GoogleFontDefinition | LocalFontDefinition;
+export type FontsOptions = {
+    families?: FontDefinition[];
+    display?: GoogleFontDisplay;
+    preconnect?: boolean;
+};
+export type FontsConfig = boolean | FontsOptions;
+export type FontsProps = {
+    fonts?: FontDefinition[];
+    families?: FontDefinition[];
+    display?: GoogleFontDisplay;
+    preconnect?: boolean;
+};

package/dist/components/Fonts/fonts.types.js

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

package/dist/components/Fonts/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Fonts } from './Fonts.svelte';
+export { buildFontFamily, buildFontVariablesCss, buildGoogleFontsUrl, buildLocalFontFaceCss, defaultFontFamilies, fontsDefaults, resolveFontsOptions } from './fonts.js';
+export type { FontDefinition, FontsConfig, FontsOptions, GoogleFontDefinition, GoogleFontDisplay, GoogleFontStyle, LocalFontDefinition, LocalFontSource, LocalFontSourceFormat, FontsProps, FontProvider } from './fonts.types.js';

package/dist/components/Fonts/index.js

@@ -0,0 +1,2 @@
+export { default as Fonts } from './Fonts.svelte';
+export { buildFontFamily, buildFontVariablesCss, buildGoogleFontsUrl, buildLocalFontFaceCss, defaultFontFamilies, fontsDefaults, resolveFontsOptions } from './fonts.js';

package/dist/components/List/List.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { setContext } from "svelte";
+import { listVariants } from "./list.variants.js";
+let { variant = "default", class: className, children, ...restProps } = $props();
+let styles = $derived(listVariants({ variant }));
+// Pass the variant down to children if needed, or just let them style themselves
+// Since the variant affects the parent 'base', but 'bordered' also affects 'item',
+// we should provide the list context so ListItems know the current variant.
+setContext("list-variant", () => variant);
+</script>
+
+<ul class={twMerge(styles.base(), className)} {...restProps}>
+    {@render children?.()}
+</ul>

package/dist/components/List/List.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ListProps } from './list.types.js';
+declare const List: import("svelte").Component<ListProps, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/components/List/ListItem.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { getContext } from "svelte";
+import { listVariants } from "./list.variants.js";
+let { title, description, interactive = false, disabled = false, href, target, class: className, leading, trailing, children, ...restProps } = $props();
+// Get the parent list variant, default to 'default' if used outside a List
+const getListVariant = getContext("list-variant");
+let parentVariant = $derived(getListVariant ? getListVariant() : "default");
+// Determine if it should be interactive automatically if it's a link
+let isInteractive = $derived(interactive || !!href);
+let styles = $derived(listVariants({
+	variant: parentVariant,
+	interactive: isInteractive,
+	disabled
+}));
+// Using svelte:element with conditional tags and spreading restProps causes TS errors.
+// We use a snippet to keep the markup DRY while using explicit if/else tags.
+</script>
+
+{#snippet contentWrapper()}
+    {#if leading}
+        <div class={styles.leading()}>
+            {@render leading()}
+        </div>
+    {/if}
+
+    <div class={styles.itemContent()}>
+        {#if children}
+            {@render children()}
+        {:else}
+            {#if title}
+                <div class={styles.itemTitle()}>{title}</div>
+            {/if}
+            {#if description}
+                <div class={styles.itemDescription()}>{description}</div>
+            {/if}
+        {/if}
+    </div>
+
+    {#if trailing}
+        <div class={styles.trailing()}>
+            {@render trailing()}
+        </div>
+    {/if}
+{/snippet}
+
+<li>
+    {#if href}
+        <a 
+            {href}
+            {target}
+            class={twMerge(styles.item(), className)}
+            {...restProps as any}
+        >
+            {@render contentWrapper()}
+        </a>
+    {:else}
+        <div 
+            class={twMerge(styles.item(), className)}
+            {...restProps as any}
+        >
+            {@render contentWrapper()}
+        </div>
+    {/if}
+</li>

package/dist/components/List/ListItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ListItemProps } from './list.types.js';
+declare const ListItem: import("svelte").Component<ListItemProps, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/components/List/index.d.ts

@@ -0,0 +1,5 @@
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+export { List, ListItem };
+export * from './list.types.js';
+export * from './list.variants.js';

package/dist/components/List/index.js

@@ -0,0 +1,5 @@
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+export { List, ListItem };
+export * from './list.types.js';
+export * from './list.variants.js';

package/dist/components/List/list.types.d.ts

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLLiAttributes } from 'svelte/elements';
+import type { ListVariantProps } from './list.variants.js';
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * The variant of the list.
+     * @default 'default'
+     */
+    variant?: ListVariantProps['variant'];
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Content of the list.
+     */
+    children?: Snippet;
+}
+export interface ListItemProps extends HTMLLiAttributes {
+    /**
+     * Title of the list item.
+     */
+    title?: string;
+    /**
+     * Description below the title.
+     */
+    description?: string;
+    /**
+     * Whether the item is interactive (hover/active states).
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional href. If provided, the item renders as an anchor tag `<a>`.
+     */
+    href?: string;
+    /**
+     * Target attribute for the anchor tag if `href` is provided.
+     */
+    target?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Snippet for the leading section (e.g., Avatar, Icon).
+     */
+    leading?: Snippet;
+    /**
+     * Snippet for the trailing section (e.g., Badge, Chevron, Switch).
+     */
+    trailing?: Snippet;
+    /**
+     * Snippet to replace the default title/description content completely.
+     */
+    children?: Snippet;
+}

package/dist/components/List/list.types.js

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

package/dist/components/List/list.variants.d.ts

@@ -0,0 +1,99 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const listVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+            item: string;
+        };
+        separated: {
+            base: string;
+            item: string;
+        };
+    };
+    interactive: {
+        true: {
+            item: string;
+        };
+    };
+    disabled: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    itemContent: string;
+    itemTitle: string;
+    itemDescription: string;
+    leading: string;
+    trailing: string;
+}, undefined, {
+    variant: {
+        default: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+            item: string;
+        };
+        separated: {
+            base: string;
+            item: string;
+        };
+    };
+    interactive: {
+        true: {
+            item: string;
+        };
+    };
+    disabled: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    itemContent: string;
+    itemTitle: string;
+    itemDescription: string;
+    leading: string;
+    trailing: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+            item: string;
+        };
+        separated: {
+            base: string;
+            item: string;
+        };
+    };
+    interactive: {
+        true: {
+            item: string;
+        };
+    };
+    disabled: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    itemContent: string;
+    itemTitle: string;
+    itemDescription: string;
+    leading: string;
+    trailing: string;
+}>>;
+export type ListVariantProps = VariantProps<typeof listVariants>;

package/dist/components/List/list.variants.js

@@ -0,0 +1,42 @@
+import { tv } from 'tailwind-variants';
+export const listVariants = tv({
+    slots: {
+        base: 'flex flex-col w-full text-surface-900 dark:text-surface-50',
+        item: 'flex items-center justify-between w-full px-4 py-3',
+        itemContent: 'flex flex-col flex-1 min-w-0',
+        itemTitle: 'text-sm font-medium truncate',
+        itemDescription: 'text-xs text-surface-500 dark:text-surface-400 truncate mt-0.5',
+        leading: 'mr-3 shrink-0 flex items-center justify-center',
+        trailing: 'ml-3 shrink-0 flex items-center justify-center text-surface-500 dark:text-surface-400'
+    },
+    variants: {
+        variant: {
+            default: {
+                base: ''
+            },
+            bordered: {
+                base: 'border border-outline-variant rounded-lg overflow-hidden',
+                item: 'border-b border-outline-variant last:border-b-0'
+            },
+            separated: {
+                base: 'gap-2',
+                item: 'rounded-lg border border-outline-variant'
+            }
+        },
+        interactive: {
+            true: {
+                item: 'transition-colors hover:bg-surface-100 dark:hover:bg-surface-800 cursor-pointer active:bg-surface-200 dark:active:bg-surface-700'
+            }
+        },
+        disabled: {
+            true: {
+                item: 'opacity-50 cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent active:bg-transparent dark:active:bg-transparent'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        interactive: false,
+        disabled: false
+    }
+});

package/dist/components/LocaleButton/LocaleButton.svelte

@@ -0,0 +1,181 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { Button } from "sv5ui";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import { DropdownMenu } from "sv5ui";
+import { Icon } from "sv5ui";
+import { Link } from "sv5ui";
+import { localeButtonDefaults, localeButtonVariants } from "./locale-button.variants.js";
+const config = getComponentConfig("localeButton", localeButtonDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), locales = [], locale, variant = config.defaultVariants.variant ?? "outline", color = config.defaultVariants.color ?? "surface", size = config.defaultVariants.size ?? "md", fit = config.defaultVariants.fit ?? false, loading = false, disabled = false, block = false, square = false, placeholder = "Select language", ariaLabel = "Change language", menuLabel = "Language", icon = "lucide:languages", chevronIcon = icons.chevronDown, showIcon = true, showChevron = true, showCode = true, showIndicator = true, disableCurrentLocale = true, closeOnSelect = true, getLocaleHref, onLocaleChange, open = $bindable(false), onOpenChange, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, avoidCollisions = true, collisionBoundary, collisionPadding = 8, sticky = "partial", hideWhenDetached = false, onEscapeKeydown, onInteractOutside, onCloseAutoFocus, forceMount, loop = true, portal = true, arrow = false, ui, children: triggerContent, item: itemSnippet, menu: menuSnippet, class: className, ...restProps } = $props();
+const classes = $derived.by(() => {
+	const slots = localeButtonVariants({
+		size,
+		fit
+	});
+	return {
+		base: slots.base({ class: [
+			config.slots.base,
+			className,
+			ui?.base
+		] }),
+		triggerLabel: slots.triggerLabel({ class: [config.slots.triggerLabel, ui?.triggerLabel] }),
+		triggerIcon: slots.triggerIcon({ class: [config.slots.triggerIcon, ui?.triggerIcon] }),
+		triggerChevron: slots.triggerChevron({ class: [config.slots.triggerChevron, ui?.triggerChevron] }),
+		menu: slots.menu({ class: [config.slots.menu, ui?.menu] }),
+		menuLabel: slots.menuLabel({ class: [config.slots.menuLabel, ui?.menuLabel] }),
+		item: slots.item({ class: [config.slots.item, ui?.item] }),
+		itemIdle: slots.itemIdle({ class: [config.slots.itemIdle, ui?.itemIdle] }),
+		itemCurrent: slots.itemCurrent({ class: [config.slots.itemCurrent, ui?.itemCurrent] }),
+		itemLeading: slots.itemLeading({ class: [config.slots.itemLeading, ui?.itemLeading] }),
+		itemText: slots.itemText({ class: [config.slots.itemText, ui?.itemText] }),
+		itemLabel: slots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] }),
+		itemDescription: slots.itemDescription({ class: [config.slots.itemDescription, ui?.itemDescription] }),
+		itemCode: slots.itemCode({ class: [config.slots.itemCode, ui?.itemCode] }),
+		itemIndicator: slots.itemIndicator({ class: [config.slots.itemIndicator, ui?.itemIndicator] })
+	};
+});
+const currentLocale = $derived(locales.find((item) => item.code === locale) ?? locales[0]);
+const triggerLabel = $derived(currentLocale?.shortLabel ?? currentLocale?.label ?? placeholder);
+const triggerDisabled = $derived(disabled || loading || locales.length <= 1);
+function isCurrentLocale(item) {
+	return item.code === currentLocale?.code;
+}
+function getResolvedHref(item) {
+	return item.href ?? getLocaleHref?.(item.code, item);
+}
+function isItemDisabled(item) {
+	return disabled || loading || item.disabled || disableCurrentLocale && isCurrentLocale(item);
+}
+async function handleItemClick(event, item, close) {
+	if (isItemDisabled(item)) {
+		event.preventDefault();
+		event.stopPropagation();
+		return;
+	}
+	if (onLocaleChange) {
+		await onLocaleChange(item.code, item);
+	}
+	if (!getResolvedHref(item) && closeOnSelect) {
+		close();
+	}
+}
+</script>
+
+<DropdownMenu
+    bind:open
+    {onOpenChange}
+    {side}
+    {sideOffset}
+    {align}
+    {alignOffset}
+    {avoidCollisions}
+    {collisionBoundary}
+    {collisionPadding}
+    {sticky}
+    {hideWhenDetached}
+    {onEscapeKeydown}
+    {onInteractOutside}
+    {onCloseAutoFocus}
+    {forceMount}
+    {loop}
+    {portal}
+    {arrow}
+    {size}
+    ui={fit ? { content: 'w-fit min-w-0' } : undefined}
+>
+    {#snippet children({ open: isOpen, props })}
+        <Button
+            {...props}
+            bind:ref
+            {variant}
+            {color}
+            {size}
+            {loading}
+            disabled={triggerDisabled}
+            {block}
+            {square}
+            class={classes.base}
+            aria-label={ariaLabel}
+            {...restProps}
+        >
+            {#if triggerContent}
+                {@render triggerContent({ open: isOpen, currentLocale })}
+            {:else}
+                {#if showIcon}
+                    <span class={classes.triggerIcon}>
+                        <Icon name={icon} />
+                    </span>
+                {/if}
+                <span class={classes.triggerLabel}>{triggerLabel}</span>
+                {#if showChevron}
+                    <span class={classes.triggerChevron}>
+                        <Icon name={chevronIcon} />
+                    </span>
+                {/if}
+            {/if}
+        </Button>
+    {/snippet}
+
+    {#snippet content({ close })}
+        {#if menuSnippet}
+            {@render menuSnippet({ close })}
+        {:else}
+            <div class={classes.menu}>
+                {#if menuLabel}
+                    <p class={classes.menuLabel}>{menuLabel}</p>
+                {/if}
+
+                {#each locales as item (item.code)}
+                    {@const current = isCurrentLocale(item)}
+                    {@const href = getResolvedHref(item)}
+                    {@const itemDisabled = isItemDisabled(item)}
+
+                    {#if itemSnippet}
+                        {@render itemSnippet({ item, current, disabled: itemDisabled, close })}
+                    {:else}
+                        <Link
+                            href={href}
+                            hreflang={item.hreflang ?? item.code}
+                            raw
+                            role="menuitemradio"
+                            aria-checked={current}
+                            disabled={itemDisabled}
+                            class={[
+                                classes.item,
+                                current ? classes.itemCurrent : classes.itemIdle,
+                                item.class
+                            ]}
+                            onclick={(event) => handleItemClick(event, item, close)}
+                        >
+                            <span class={classes.itemLeading}>
+                                {#if item.icon}
+                                    <Icon name={item.icon} />
+                                {/if}
+                                <span class={classes.itemText}>
+                                    <span class={classes.itemLabel}>{item.label}</span>
+                                    {#if item.description}
+                                        <span class={classes.itemDescription}>{item.description}</span>
+                                    {/if}
+                                </span>
+                            </span>
+
+                            <span class="flex items-center gap-2">
+                                {#if showCode}
+                                    <span class={classes.itemCode}>{item.shortLabel ?? item.code}</span>
+                                {/if}
+                                {#if showIndicator && current}
+                                    <span class={classes.itemIndicator}>
+                                        <Icon name={icons.check} />
+                                    </span>
+                                {/if}
+                            </span>
+                        </Link>
+                    {/if}
+                {/each}
+            </div>
+        {/if}
+    {/snippet}
+</DropdownMenu>

package/dist/components/LocaleButton/LocaleButton.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { LocaleButtonProps } from './locale-button.types.js';
+export type Props = LocaleButtonProps;
+declare const LocaleButton: import("svelte").Component<LocaleButtonProps, {}, "ref" | "open">;
+type LocaleButton = ReturnType<typeof LocaleButton>;
+export default LocaleButton;