sv5ui-plus 4.0.0

package/dist/components/NavigationMenu/navigation-menu.variants.js

@@ -0,0 +1,287 @@
+import { tv } from 'tailwind-variants';
+export const navigationMenuVariants = tv({
+    slots: {
+        root: 'relative',
+        list: 'relative isolate min-w-0',
+        highlight: 'absolute z-0 rounded-full transition-all duration-200',
+        item: 'min-w-0',
+        label: 'w-full flex items-center gap-1.5 px-2.5 pt-3 pb-1 font-semibold text-sm text-on-surface-variant',
+        separator: 'shrink-0 bg-outline-variant',
+        link: [
+            'group relative w-full flex items-center gap-1.5 font-medium text-sm rounded-md',
+            'text-on-surface-variant',
+            'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset',
+            'data-disabled:cursor-not-allowed data-disabled:opacity-60'
+        ],
+        linkLeadingIcon: 'shrink-0',
+        linkLeadingAvatar: 'shrink-0',
+        linkLabel: 'truncate',
+        linkLabelExternalIcon: 'size-3.5 shrink-0 text-on-surface-variant/70',
+        linkTrailing: 'ms-auto inline-flex items-center gap-1.5',
+        linkTrailingBadge: 'shrink-0',
+        linkTrailingIcon: 'size-5 shrink-0 transform transition-transform duration-200',
+        childList: 'grid gap-0.5 p-2',
+        childLabel: 'font-semibold text-sm text-on-surface-variant px-2 py-1.5',
+        childItem: 'min-w-0',
+        childLink: [
+            'group relative w-full flex items-start gap-2.5 px-2.5 py-2 rounded-lg',
+            'text-sm text-on-surface-variant',
+            'transition-colors hover:bg-surface-container-high hover:text-on-surface',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
+            'data-[active]:bg-surface-container-high data-[active]:text-on-surface'
+        ],
+        childLinkWrapper: 'min-w-0 flex flex-col gap-0.5',
+        childLinkIcon: 'size-5 shrink-0 mt-0.5 text-on-surface-variant group-hover:text-primary',
+        childLinkLabel: 'font-medium text-on-surface truncate',
+        childLinkDescription: 'text-xs text-on-surface-variant/80 line-clamp-2',
+        childGroup: 'min-w-0',
+        childGroupLabel: 'px-2.5 pt-1 pb-1.5 font-semibold text-sm text-on-surface-variant',
+        childGroupList: 'grid gap-0.5',
+        linkBadgeDot: 'absolute top-1 end-1 size-2 rounded-full bg-error ring-2 ring-surface',
+        itemActions: 'absolute end-1.5 top-1/2 z-10 -translate-y-1/2 inline-flex items-center opacity-0 transition-opacity focus-within:opacity-100 group-hover/nav-row:opacity-100 has-[[data-state=open]]:opacity-100',
+        labelActions: 'ms-auto inline-flex items-center',
+        content: [
+            'top-0 left-0 w-full sm:absolute sm:w-auto',
+            'data-[motion=from-start]:animate-[nav-from-start_250ms_ease]',
+            'data-[motion=from-end]:animate-[nav-from-end_250ms_ease]',
+            'data-[motion=to-start]:animate-[nav-to-start_250ms_ease]',
+            'data-[motion=to-end]:animate-[nav-to-end_250ms_ease]'
+        ],
+        viewportWrapper: 'absolute top-full left-0 z-50 flex w-full justify-start pt-1.5 [perspective:2000px]',
+        viewport: [
+            'relative h-(--bits-navigation-menu-viewport-height) w-full origin-[top_center] overflow-hidden sm:w-(--bits-navigation-menu-viewport-width)',
+            'rounded-xl border border-outline-variant bg-surface-container-low shadow-lg',
+            'transition-[width,height] duration-200',
+            'data-[state=open]:animate-[nav-scale-in_200ms_ease]',
+            'data-[state=closed]:animate-[nav-scale-out_200ms_ease]'
+        ],
+        indicator: [
+            'top-full z-50 flex h-2 items-end justify-center overflow-hidden',
+            'data-[state=visible]:animate-[fade-in_150ms_ease]',
+            'data-[state=hidden]:animate-[fade-out_150ms_ease]'
+        ],
+        arrow: 'relative top-[60%] size-2 rotate-45 rounded-tl-sm border-t border-l border-outline-variant bg-surface-container-low',
+        toggle: '',
+        childTrigger: 'group ms-auto inline-flex items-center justify-center transition-transform duration-200'
+    },
+    variants: {
+        variant: {
+            pill: '',
+            link: ''
+        },
+        color: {
+            primary: { highlight: 'bg-primary' },
+            secondary: { highlight: 'bg-secondary' },
+            tertiary: { highlight: 'bg-tertiary' },
+            success: { highlight: 'bg-success' },
+            warning: { highlight: 'bg-warning' },
+            error: { highlight: 'bg-error' },
+            info: { highlight: 'bg-info' },
+            surface: { highlight: 'bg-on-surface-variant' }
+        },
+        orientation: {
+            horizontal: {
+                root: 'w-full',
+                list: 'flex items-center gap-1 overflow-x-auto scrollbar-thin',
+                separator: 'mx-1 h-5 w-px self-center',
+                highlight: 'bottom-0 h-0.5'
+            },
+            vertical: {
+                root: 'w-full',
+                list: 'flex flex-col gap-0.5',
+                item: 'flex flex-col',
+                separator: 'my-1 h-px w-full',
+                childList: 'ms-3.5 mt-0.5 gap-0.5 border-s border-outline-variant p-0 ps-2',
+                highlight: 'start-0 w-0.5'
+            }
+        },
+        highlight: {
+            true: '',
+            false: ''
+        },
+        collapsed: {
+            true: {
+                link: 'justify-center',
+                linkLabel: 'sr-only',
+                linkTrailing: 'hidden'
+            },
+            false: ''
+        },
+        stacked: {
+            true: '',
+            false: ''
+        },
+        contentOrientation: {
+            horizontal: {},
+            vertical: {}
+        },
+        disabled: {
+            true: '',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        {
+            orientation: 'horizontal',
+            class: {
+                item: 'shrink-0',
+                link: 'w-auto px-2.5 py-1.5',
+                label: 'w-auto shrink-0 whitespace-nowrap',
+                childList: 'min-w-60'
+            }
+        },
+        {
+            orientation: 'horizontal',
+            contentOrientation: 'horizontal',
+            class: { childList: 'sm:w-128 sm:grid-cols-2' }
+        },
+        {
+            orientation: 'vertical',
+            class: { link: 'px-2.5 py-1.5' }
+        },
+        {
+            stacked: true,
+            class: {
+                link: 'flex-col justify-center gap-1 py-2',
+                linkLabel: 'text-xs leading-tight',
+                linkTrailing: 'hidden'
+            }
+        },
+        {
+            orientation: 'horizontal',
+            stacked: true,
+            class: {
+                list: 'justify-around overflow-visible',
+                item: 'flex-1',
+                link: 'w-full'
+            }
+        },
+        {
+            collapsed: true,
+            stacked: true,
+            class: { linkLabel: 'not-sr-only text-xs leading-tight' }
+        },
+        {
+            variant: 'pill',
+            class: {
+                link: 'hover:bg-surface-container-high hover:text-on-surface data-[state=open]:bg-surface-container-high'
+            }
+        },
+        {
+            variant: 'link',
+            class: {
+                link: 'hover:text-on-surface data-[state=open]:text-on-surface'
+            }
+        },
+        {
+            variant: 'pill',
+            color: 'primary',
+            class: {
+                link: 'data-[active]:bg-primary-container data-[active]:text-on-primary-container focus-visible:ring-primary'
+            }
+        },
+        {
+            variant: 'pill',
+            color: 'secondary',
+            class: {
+                link: 'data-[active]:bg-secondary-container data-[active]:text-on-secondary-container focus-visible:ring-secondary'
+            }
+        },
+        {
+            variant: 'pill',
+            color: 'tertiary',
+            class: {
+                link: 'data-[active]:bg-tertiary-container data-[active]:text-on-tertiary-container focus-visible:ring-tertiary'
+            }
+        },
+        {
+            variant: 'pill',
+            color: 'success',
+            class: {
+                link: 'data-[active]:bg-success-container data-[active]:text-on-success-container focus-visible:ring-success'
+            }
+        },
+        {
+            variant: 'pill',
+            color: 'warning',
+            class: {
+                link: 'data-[active]:bg-warning-container data-[active]:text-on-warning-container focus-visible:ring-warning'
+            }
+        },
+        {
+            variant: 'pill',
+            color: 'error',
+            class: {
+                link: 'data-[active]:bg-error-container data-[active]:text-on-error-container focus-visible:ring-error'
+            }
+        },
+        {
+            variant: 'pill',
+            color: 'info',
+            class: {
+                link: 'data-[active]:bg-info-container data-[active]:text-on-info-container focus-visible:ring-info'
+            }
+        },
+        {
+            variant: 'pill',
+            color: 'surface',
+            class: {
+                link: 'data-[active]:bg-surface-container-high data-[active]:text-on-surface focus-visible:ring-outline'
+            }
+        },
+        {
+            variant: 'link',
+            color: 'primary',
+            class: { link: 'data-[active]:text-primary focus-visible:ring-primary' }
+        },
+        {
+            variant: 'link',
+            color: 'secondary',
+            class: { link: 'data-[active]:text-secondary focus-visible:ring-secondary' }
+        },
+        {
+            variant: 'link',
+            color: 'tertiary',
+            class: { link: 'data-[active]:text-tertiary focus-visible:ring-tertiary' }
+        },
+        {
+            variant: 'link',
+            color: 'success',
+            class: { link: 'data-[active]:text-success focus-visible:ring-success' }
+        },
+        {
+            variant: 'link',
+            color: 'warning',
+            class: { link: 'data-[active]:text-warning focus-visible:ring-warning' }
+        },
+        {
+            variant: 'link',
+            color: 'error',
+            class: { link: 'data-[active]:text-error focus-visible:ring-error' }
+        },
+        {
+            variant: 'link',
+            color: 'info',
+            class: { link: 'data-[active]:text-info focus-visible:ring-info' }
+        },
+        {
+            variant: 'link',
+            color: 'surface',
+            class: { link: 'data-[active]:text-on-surface focus-visible:ring-outline' }
+        }
+    ],
+    defaultVariants: {
+        variant: 'pill',
+        color: 'primary',
+        orientation: 'horizontal',
+        highlight: false,
+        collapsed: false,
+        stacked: false,
+        contentOrientation: 'horizontal',
+        disabled: false
+    }
+});
+export const navigationMenuDefaults = {
+    defaultVariants: navigationMenuVariants.defaultVariants,
+    slots: {}
+};

package/dist/components/NumberTicker/NumberTicker.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { onMount } from "svelte";
+import { numberTickerVariants } from "./number-ticker.variants.js";
+let { value, duration = 2e3, decimals = 0, delay = 0, class: className, ...restProps } = $props();
+let styles = $derived(numberTickerVariants());
+let displayValue = $state(0);
+let isVisible = $state(false);
+let nodeRef = $state(null);
+// Easing function (easeOutExpo)
+const easeOutExpo = (x) => {
+	return x === 1 ? 1 : 1 - 2 ** (-10 * x);
+};
+onMount(() => {
+	if (!nodeRef) return;
+	let startTime = null;
+	let animationFrame;
+	const animate = (timestamp) => {
+		if (!startTime) startTime = timestamp;
+		const progress = timestamp - startTime;
+		if (progress < duration) {
+			const percentage = progress / duration;
+			const easedProgress = easeOutExpo(percentage);
+			displayValue = value * easedProgress;
+			animationFrame = requestAnimationFrame(animate);
+		} else {
+			displayValue = value;
+		}
+	};
+	const observer = new IntersectionObserver((entries) => {
+		if (entries[0].isIntersecting && !isVisible) {
+			isVisible = true;
+			setTimeout(() => {
+				animationFrame = requestAnimationFrame(animate);
+			}, delay);
+		}
+	}, { threshold: .1 });
+	observer.observe(nodeRef);
+	return () => {
+		observer.disconnect();
+		if (animationFrame) cancelAnimationFrame(animationFrame);
+	};
+});
+// Re-animate if value changes significantly (optional)
+$effect(() => {
+	if (isVisible && value !== undefined) {}
+});
+let formattedValue = $derived(new Intl.NumberFormat("en-US", {
+	minimumFractionDigits: decimals,
+	maximumFractionDigits: decimals
+}).format(displayValue));
+</script>
+
+<span 
+    bind:this={nodeRef}
+    class={twMerge(styles.base() as string, className)} 
+    {...restProps}
+>
+    {formattedValue}
+</span>

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

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

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

@@ -0,0 +1,4 @@
+import NumberTicker from './NumberTicker.svelte';
+export { NumberTicker };
+export * from './number-ticker.types.js';
+export * from './number-ticker.variants.js';

package/dist/components/NumberTicker/index.js

@@ -0,0 +1,4 @@
+import NumberTicker from './NumberTicker.svelte';
+export { NumberTicker };
+export * from './number-ticker.types.js';
+export * from './number-ticker.variants.js';

package/dist/components/NumberTicker/number-ticker.types.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface NumberTickerProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The target number to animate to.
+     */
+    value: number;
+    /**
+     * Duration of the animation in milliseconds.
+     * @default 2000
+     */
+    duration?: number;
+    /**
+     * Whether to show decimal places.
+     * @default 0
+     */
+    decimals?: number;
+    /**
+     * Start delay in milliseconds.
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+}

package/dist/components/NumberTicker/number-ticker.types.js

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

package/dist/components/NumberTicker/number-ticker.variants.d.ts

@@ -0,0 +1,27 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const numberTickerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    base: string;
+}>>;
+export type NumberTickerVariantProps = VariantProps<typeof numberTickerVariants>;

package/dist/components/NumberTicker/number-ticker.variants.js

@@ -0,0 +1,6 @@
+import { tv } from 'tailwind-variants';
+export const numberTickerVariants = tv({
+    slots: {
+        base: 'inline-block font-mono tracking-wider tabular-nums text-surface-900 dark:text-surface-50'
+    }
+});

package/dist/components/PasswordInput/PasswordInput.svelte

@@ -0,0 +1,182 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { getComponentConfig } from "../../config.js";
+import { Icon } from "sv5ui";
+import { Input } from "sv5ui";
+import { passwordInputVariants, passwordInputDefaults } from "./password-input.variants.js";
+const config = getComponentConfig("passwordInput", passwordInputDefaults);
+let { ref = $bindable(null), value = $bindable(""), showStrength = false, strengthFn, strengthLabels = [
+	"Very Weak",
+	"Weak",
+	"Fair",
+	"Good",
+	"Strong"
+], segmentIcon, maskChar, hideIcon = "lucide:eye-off", showIcon = "lucide:eye", hideLabel = "Hide password", showLabel = "Show password", size = config.defaultVariants.size ?? "md", color = config.defaultVariants.color ?? "primary", variant = config.defaultVariants.variant ?? "outline", class: className, ui, name, oninput, ...restProps } = $props();
+let isVisible = $state(false);
+function toggleVisibility() {
+	isVisible = !isVisible;
+}
+const useMaskChar = $derived(!!maskChar && maskChar !== "•" && !isVisible);
+const displayValue = $derived(useMaskChar ? (maskChar ?? "✦").repeat(String(value ?? "").length) : String(value ?? ""));
+function handleInput(e) {
+	if (useMaskChar) {
+		const input = e.currentTarget;
+		const newStr = input.value;
+		const oldVal = String(value ?? "");
+		const char = maskChar ?? "✦";
+		let prefixCount = 0;
+		let suffixCount = 0;
+		let inserted = "";
+		// Check if user inserted non-mask text (typing or pasting)
+		const firstNonMask = newStr.indexOf(char === "" ? "✦" : char);
+		const hasMaskChars = firstNonMask !== -1;
+		if (!hasMaskChars) {
+			// All mask chars were replaced/deleted
+			inserted = newStr;
+			prefixCount = 0;
+			suffixCount = 0;
+		} else {
+			// Count leading mask chars
+			while (prefixCount < newStr.length && newStr[prefixCount] === char) {
+				prefixCount++;
+			}
+			// Count trailing mask chars
+			while (suffixCount < newStr.length - prefixCount && newStr[newStr.length - 1 - suffixCount] === char) {
+				suffixCount++;
+			}
+			// Extract inserted text between prefix and suffix mask chars
+			inserted = newStr.slice(prefixCount, newStr.length - suffixCount);
+			// Deletion only case (no inserted text)
+			if (inserted === "" && newStr.length < oldVal.length) {
+				const cursorPos = input.selectionStart ?? prefixCount;
+				prefixCount = cursorPos;
+				suffixCount = newStr.length - cursorPos;
+			}
+		}
+		const head = oldVal.slice(0, prefixCount);
+		const tail = oldVal.slice(Math.max(prefixCount, oldVal.length - suffixCount));
+		value = head + inserted + tail;
+		const updatedVal = String(value ?? "");
+		input.value = char.repeat(updatedVal.length);
+		const newCursorPos = prefixCount + inserted.length;
+		try {
+			input.setSelectionRange(newCursorPos, newCursorPos);
+		} catch {}
+	} else {
+		value = e.currentTarget.value;
+	}
+	oninput?.(e);
+}
+// Built-in strength heuristic: returns -1 when empty, 0–4 otherwise.
+function calculateStrength(pwd) {
+	if (!pwd) return -1;
+	let score = 0;
+	if (pwd.length >= 8) score += 1;
+	if (/[A-Z]/.test(pwd) && /[a-z]/.test(pwd)) score += 1;
+	if (/[0-9]/.test(pwd)) score += 1;
+	if (/[^A-Za-z0-9]/.test(pwd)) score += 1;
+	return score;
+}
+const strength = $derived(strengthFn ? strengthFn(String(value ?? "")) : calculateStrength(String(value ?? "")));
+function getSegmentBgColor(index, currentStrength) {
+	if (currentStrength <= 0 || index >= currentStrength) {
+		return "bg-surface-200 dark:bg-surface-700";
+	}
+	if (currentStrength === 1) return "bg-error-500";
+	if (currentStrength === 2) return "bg-warning-500";
+	if (currentStrength === 3) return "bg-success-400";
+	return "bg-success-500";
+}
+function getSegmentTextColor(index, currentStrength) {
+	if (currentStrength <= 0 || index >= currentStrength) {
+		return "text-surface-200 dark:text-surface-700";
+	}
+	if (currentStrength === 1) return "text-error-500";
+	if (currentStrength === 2) return "text-warning-500";
+	if (currentStrength === 3) return "text-success-400";
+	return "text-success-500";
+}
+const variantSlots = $derived(passwordInputVariants({
+	size,
+	color,
+	variant
+}));
+const classes = $derived({
+	root: variantSlots.root({ class: [
+		config.slots.root,
+		className,
+		ui?.root
+	] }),
+	inputWrapper: variantSlots.inputWrapper({ class: [config.slots.inputWrapper, ui?.inputWrapper] }),
+	toggleBtn: variantSlots.toggleBtn({ class: [config.slots.toggleBtn, ui?.toggleBtn] }),
+	toggleIcon: variantSlots.toggleIcon({ class: [config.slots.toggleIcon, ui?.toggleIcon] }),
+	meterWrapper: variantSlots.meterWrapper({ class: [config.slots.meterWrapper, ui?.meterWrapper] }),
+	meterSegment: variantSlots.meterSegment({ class: [config.slots.meterSegment, ui?.meterSegment] }),
+	meterIcon: variantSlots.meterIcon({ class: [config.slots.meterIcon, ui?.meterIcon] }),
+	strengthText: variantSlots.strengthText({ class: [config.slots.strengthText, ui?.strengthText] })
+});
+</script>
+
+<div class={classes.root}>
+    {#if useMaskChar && name}
+        <input type="hidden" {name} value={value ?? ''} />
+    {/if}
+    <div class={classes.inputWrapper}>
+        <Input
+            {...restProps}
+            bind:ref
+            name={useMaskChar ? undefined : name}
+            value={useMaskChar ? displayValue : value}
+            {size}
+            {color}
+            {variant}
+            type={useMaskChar || isVisible ? 'text' : 'password'}
+            class="w-full"
+            oninput={handleInput}
+            ui={{
+                base: ui?.base,
+                root: ui?.inputRoot,
+                leading: ui?.leading,
+                leadingIcon: ui?.leadingIcon,
+                trailing: ui?.trailing,
+                trailingIcon: ui?.trailingIcon
+            }}
+            trailing
+        />
+
+        <button
+            type="button"
+            class={classes.toggleBtn}
+            onclick={toggleVisibility}
+            aria-label={isVisible ? hideLabel : showLabel}
+            aria-pressed={isVisible}
+        >
+            {#if isVisible}
+                <Icon name={hideIcon} class={classes.toggleIcon} />
+            {:else}
+                <Icon name={showIcon} class={classes.toggleIcon} />
+            {/if}
+        </button>
+    </div>
+
+    {#if showStrength && String(value ?? '').length > 0}
+        <div>
+            <div class={classes.meterWrapper}>
+                {#each { length: 4 } as _, i (i)}
+                    {#if segmentIcon}
+                        <Icon
+                            name={segmentIcon}
+                            class="{classes.meterIcon} {getSegmentTextColor(i, strength)}"
+                        />
+                    {:else}
+                        <div class="{classes.meterSegment} {getSegmentBgColor(i, strength)}"></div>
+                    {/if}
+                {/each}
+            </div>
+            <p class={classes.strengthText}>
+                {strengthLabels[Math.max(0, strength)]}
+            </p>
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,5 @@
+import type { PasswordInputProps } from './password-input.types.js';
+export type Props = PasswordInputProps;
+declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "value" | "ref">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

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

@@ -0,0 +1,2 @@
+export { default as PasswordInput } from './PasswordInput.svelte';
+export type { PasswordInputProps } from './password-input.types.js';

package/dist/components/PasswordInput/index.js

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