svelora 3.0.5 → 3.0.7

package/dist/Menu/menu.types.d.ts

@@ -0,0 +1,82 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { MenuVariantProps } from './menu.variants.js';
+export interface MenuItemBase {
+    /**
+     * Text to display in the menu item.
+     */
+    label?: string;
+    /**
+     * Icon to display before the label.
+     */
+    icon?: string;
+    /**
+     * Whether the menu item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the menu item is active/selected.
+     */
+    active?: boolean;
+    /**
+     * Additional CSS classes.
+     */
+    class?: ClassNameValue;
+}
+export interface MenuActionItem extends MenuItemBase {
+    type?: 'action' | 'item';
+    /**
+     * The URL to navigate to when the item is clicked.
+     */
+    href?: string;
+    /**
+     * Click handler for the item.
+     */
+    onClick?: (event: MouseEvent) => void;
+    /**
+     * Target attribute for link items.
+     */
+    target?: string;
+}
+export interface MenuGroupItem extends MenuItemBase {
+    type: 'group';
+    /**
+     * Child items to display when the group is expanded.
+     */
+    items: MenuItems;
+    /**
+     * Whether the group is currently open/expanded.
+     */
+    open?: boolean;
+}
+export type MenuItemType = MenuActionItem | MenuGroupItem;
+export type MenuItems = MenuItemType[];
+export interface MenuProps {
+    /**
+     * The array of menu items to render.
+     */
+    items?: MenuItems;
+    /**
+     * Style variant of the menu.
+     */
+    variant?: MenuVariantProps['variant'];
+    /**
+     * Whether the menu allows multiple groups to be open at once (false)
+     * or acts as an accordion, closing other groups when one opens (true).
+     * @default false
+     */
+    accordion?: boolean;
+    /**
+     * Auto-detect active state from current URL if using SvelteKit.
+     * @default false
+     */
+    autoActive?: boolean;
+    /**
+     * Additional CSS classes.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom slot for completely custom rendering of items.
+     */
+    children?: Snippet;
+}

package/dist/Menu/menu.types.js

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

package/dist/Menu/menu.variants.d.ts

@@ -0,0 +1,46 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const menuVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+    };
+}, {
+    base: string;
+    group: string;
+    groupTrigger: string[];
+    groupTriggerActive: string;
+    groupContent: string;
+    item: string[];
+    itemActive: string;
+    icon: string;
+    chevron: string;
+}, undefined, {
+    variant: {
+        default: {};
+    };
+}, {
+    base: string;
+    group: string;
+    groupTrigger: string[];
+    groupTriggerActive: string;
+    groupContent: string;
+    item: string[];
+    itemActive: string;
+    icon: string;
+    chevron: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+    };
+}, {
+    base: string;
+    group: string;
+    groupTrigger: string[];
+    groupTriggerActive: string;
+    groupContent: string;
+    item: string[];
+    itemActive: string;
+    icon: string;
+    chevron: string;
+}, undefined, unknown, unknown, undefined>>;
+export type MenuVariantProps = VariantProps<typeof menuVariants>;
+export type MenuSlots = keyof typeof menuVariants.slots;

package/dist/Menu/menu.variants.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const menuVariants = tv({
+    slots: {
+        base: 'flex flex-col gap-1 w-full',
+        group: 'flex flex-col w-full',
+        groupTrigger: [
+            'flex items-center justify-between w-full px-3 py-2 text-sm font-medium rounded-md',
+            'transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-outline',
+            'text-on-surface hover:bg-surface-container-highest',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+        ],
+        groupTriggerActive: 'bg-primary-container text-on-primary-container',
+        groupContent: 'flex flex-col gap-1 pl-4 mt-1',
+        item: [
+            'flex items-center w-full px-3 py-2 text-sm font-medium rounded-md',
+            'transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-outline',
+            'text-on-surface hover:bg-surface-container-highest',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+        ],
+        itemActive: 'bg-primary-container text-on-primary-container hover:bg-primary-container/90',
+        icon: 'size-5 mr-3 shrink-0',
+        chevron: 'size-4 shrink-0 transition-transform duration-200'
+    },
+    variants: {
+        variant: {
+            default: {}
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});

package/dist/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/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/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/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/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/NumberTicker/number-ticker.types.js

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

package/dist/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-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export type NumberTickerVariantProps = VariantProps<typeof numberTickerVariants>;

package/dist/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/PasswordInput/PasswordInput.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import Icon from "../Icon/Icon.svelte";
+import Input from "../Input/Input.svelte";
+import { passwordInputVariants } from "./password-input.variants.js";
+let { value = $bindable(""), showStrength = false, strengthFn, strengthLabels = [
+	"Very Weak",
+	"Weak",
+	"Fair",
+	"Good",
+	"Strong"
+], class: className, ...restProps } = $props();
+let styles = $derived(passwordInputVariants());
+let isVisible = $state(false);
+function toggleVisibility() {
+	isVisible = !isVisible;
+}
+// Basic strength calculation if none provided
+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;
+}
+let strength = $derived(strengthFn ? strengthFn(String(value ?? "")) : calculateStrength(String(value ?? "")));
+// Colors for the 4 segments based on current strength
+function getSegmentColor(index, currentStrength) {
+	if (currentStrength === -1 || index > currentStrength) return "bg-surface-200 dark:bg-surface-700";
+	if (currentStrength === 0) return "bg-error-500";
+	if (currentStrength === 1) return "bg-warning-500";
+	if (currentStrength === 2) return "bg-success-400";
+	return "bg-success-500";
+}
+</script>
+
+<div class={twMerge(styles.wrapper() as string, className)}>
+    <div class={styles.inputWrapper() as string}>
+        <Input 
+            {...restProps as any}
+            bind:value 
+            type={isVisible ? 'text' : 'password'}
+            class="w-full pr-10"
+        />
+        
+        <button
+            type="button"
+            class={styles.toggleBtn() as string}
+            onclick={toggleVisibility}
+            tabindex="-1"
+            aria-label={isVisible ? 'Hide password' : 'Show password'}
+        >
+            {#if isVisible}
+                <Icon name="lucide:eye-off" class="w-5 h-5" />
+            {:else}
+                <Icon name="lucide:eye" class="w-5 h-5" />
+            {/if}
+        </button>
+    </div>
+
+    {#if showStrength && String(value ?? '').length > 0}
+        <div>
+            <div class={styles.meterWrapper() as string}>
+                {#each Array(4) as _, i}
+                    <div class={twMerge(styles.meterSegment() as string, getSegmentColor(i, strength))}></div>
+                {/each}
+            </div>
+            <div class={styles.strengthText() as string}>
+                {strengthLabels[Math.max(0, strength)]}
+            </div>
+        </div>
+    {/if}
+</div>

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

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

package/dist/PasswordInput/index.d.ts

@@ -0,0 +1,4 @@
+import PasswordInput from './PasswordInput.svelte';
+export { PasswordInput };
+export * from './password-input.types.js';
+export * from './password-input.variants.js';

package/dist/PasswordInput/index.js

@@ -0,0 +1,4 @@
+import PasswordInput from './PasswordInput.svelte';
+export { PasswordInput };
+export * from './password-input.types.js';
+export * from './password-input.variants.js';

package/dist/PasswordInput/password-input.types.d.ts

@@ -0,0 +1,18 @@
+import type { InputProps } from '../Input/input.types.js';
+export interface PasswordInputProps extends Omit<InputProps, 'type'> {
+    /**
+     * Whether to show the password strength meter.
+     * @default false
+     */
+    showStrength?: boolean;
+    /**
+     * Custom function to calculate password strength (0 to 4).
+     * 0 = Very Weak, 4 = Very Strong.
+     */
+    strengthFn?: (password: string) => number;
+    /**
+     * Labels for the strength levels (0-4).
+     * @default ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong']
+     */
+    strengthLabels?: [string, string, string, string, string];
+}

package/dist/PasswordInput/password-input.types.js

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

package/dist/PasswordInput/password-input.variants.d.ts

@@ -0,0 +1,57 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const passwordInputVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            wrapper?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            toggleBtn?: import("tailwind-merge").ClassNameValue;
+            meterWrapper?: import("tailwind-merge").ClassNameValue;
+            meterSegment?: import("tailwind-merge").ClassNameValue;
+            strengthText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            wrapper?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            toggleBtn?: import("tailwind-merge").ClassNameValue;
+            meterWrapper?: import("tailwind-merge").ClassNameValue;
+            meterSegment?: import("tailwind-merge").ClassNameValue;
+            strengthText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    wrapper: string;
+    inputWrapper: string;
+    toggleBtn: string;
+    meterWrapper: string;
+    meterSegment: string;
+    strengthText: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            wrapper?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            toggleBtn?: import("tailwind-merge").ClassNameValue;
+            meterWrapper?: import("tailwind-merge").ClassNameValue;
+            meterSegment?: import("tailwind-merge").ClassNameValue;
+            strengthText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    wrapper: string;
+    inputWrapper: string;
+    toggleBtn: string;
+    meterWrapper: string;
+    meterSegment: string;
+    strengthText: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    wrapper: string;
+    inputWrapper: string;
+    toggleBtn: string;
+    meterWrapper: string;
+    meterSegment: string;
+    strengthText: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PasswordInputVariantProps = VariantProps<typeof passwordInputVariants>;

package/dist/PasswordInput/password-input.variants.js

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+export const passwordInputVariants = tv({
+    slots: {
+        wrapper: 'relative flex flex-col gap-2 w-full',
+        inputWrapper: 'relative flex items-center w-full',
+        toggleBtn: 'absolute right-3 text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm transition-colors',
+        meterWrapper: 'flex gap-1 h-1.5 w-full mt-1',
+        meterSegment: 'flex-1 rounded-full transition-colors duration-300',
+        strengthText: 'text-xs text-surface-500 dark:text-surface-400 mt-1 text-right'
+    }
+});

package/dist/Prose/Prose.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { proseVariants } from "./prose.variants.js";
+let { size = "base", html, class: className, children, ...restProps } = $props();
+let styles = $derived(proseVariants({ size }));
+</script>
+
+<div class={twMerge(styles.base() as string, className)} {...restProps}>
+    {#if html}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html html}
+    {/if}
+    {@render children?.()}
+</div>

package/dist/Prose/Prose.svelte.d.ts

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

package/dist/Prose/index.d.ts

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

package/dist/Prose/index.js

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

package/dist/Prose/prose.types.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ProseVariantProps } from './prose.variants.js';
+export interface ProseProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the typography text.
+     * @default 'base'
+     */
+    size?: ProseVariantProps['size'];
+    /**
+     * Html string to render. Usually coming from a markdown parser.
+     */
+    html?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Content inside the prose container.
+     */
+    children?: Snippet;
+}

package/dist/Prose/prose.types.js

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

package/dist/Prose/prose.variants.d.ts

@@ -0,0 +1,45 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const proseVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type ProseVariantProps = VariantProps<typeof proseVariants>;

package/dist/Prose/prose.variants.js

@@ -0,0 +1,45 @@
+import { tv } from 'tailwind-variants';
+export const proseVariants = tv({
+    slots: {
+        base: [
+            'text-surface-900 dark:text-surface-50 max-w-none',
+            // Paragraphs
+            '[&_p]:leading-7 [&_p]:mb-6 [&_p:last-child]:mb-0',
+            // Headings
+            '[&_h1]:text-4xl [&_h1]:font-extrabold [&_h1]:tracking-tight [&_h1]:mt-0 [&_h1]:mb-6',
+            '[&_h2]:text-3xl [&_h2]:font-semibold [&_h2]:tracking-tight [&_h2]:mt-10 [&_h2]:mb-4',
+            '[&_h3]:text-2xl [&_h3]:font-semibold [&_h3]:tracking-tight [&_h3]:mt-8 [&_h3]:mb-4',
+            '[&_h4]:text-xl [&_h4]:font-semibold [&_h4]:tracking-tight [&_h4]:mt-8 [&_h4]:mb-4',
+            // Links
+            '[&_a]:font-medium [&_a]:text-primary-600 dark:[&_a]:text-primary-400 [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary-500',
+            // Blockquotes
+            '[&_blockquote]:mt-6 [&_blockquote]:mb-6 [&_blockquote]:border-l-4 [&_blockquote]:border-primary-500 [&_blockquote]:pl-6 [&_blockquote]:italic [&_blockquote]:text-surface-700 dark:[&_blockquote]:text-surface-300',
+            // Lists
+            '[&_ul]:my-6 [&_ul]:ml-6 [&_ul]:list-disc [&_ul>li]:mt-2',
+            '[&_ol]:my-6 [&_ol]:ml-6 [&_ol]:list-decimal [&_ol>li]:mt-2',
+            // Code & Pre
+            '[&_code]:relative [&_code]:rounded [&_code]:bg-surface-200 dark:[&_code]:bg-surface-800 [&_code]:px-[0.3rem] [&_code]:py-[0.2rem] [&_code]:font-mono [&_code]:text-sm [&_code]:font-semibold',
+            '[&_pre]:mb-6 [&_pre]:mt-6 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-surface-900 [&_pre]:py-4 [&_pre]:dark:bg-surface-800',
+            '[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-surface-50 [&_pre_code]:font-normal',
+            // Images & Media
+            '[&_img]:rounded-lg [&_img]:border [&_img]:border-outline-variant [&_video]:rounded-lg',
+            // Tables
+            '[&_table]:w-full [&_table]:my-6 [&_table]:overflow-y-auto [&_table]:text-left',
+            '[&_th]:border [&_th]:border-outline-variant [&_th]:px-4 [&_th]:py-2 [&_th]:font-semibold [&_th]:bg-surface-100 dark:[&_th]:bg-surface-800',
+            '[&_td]:border [&_td]:border-outline-variant [&_td]:px-4 [&_td]:py-2',
+            '[&_tr:nth-child(even)]:bg-surface-50 dark:[&_tr:nth-child(even)]:bg-surface-900/50',
+            // HR
+            '[&_hr]:my-8 [&_hr]:border-outline-variant'
+        ]
+    },
+    variants: {
+        size: {
+            sm: { base: 'text-sm [&_h1]:text-3xl [&_h2]:text-2xl [&_h3]:text-xl' },
+            base: { base: 'text-base' },
+            lg: { base: 'text-lg [&_h1]:text-5xl [&_h2]:text-4xl [&_h3]:text-3xl' }
+        }
+    },
+    defaultVariants: {
+        size: 'base'
+    }
+});