svelora 3.0.5 → 3.0.7

package/dist/ColorPicker/ColorPicker.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { Popover } from "../Popover/index.js";
+import { Input } from "../Input/index.js";
+import Icon from "../Icon/Icon.svelte";
+import { colorPickerVariants } from "./color-picker.variants.js";
+let { value = $bindable("#000000"), placeholder = "Select color", swatches = [
+	"#ef4444",
+	"#f97316",
+	"#f59e0b",
+	"#eab308",
+	"#84cc16",
+	"#22c55e",
+	"#10b981",
+	"#14b8a6",
+	"#06b6d4",
+	"#0ea5e9",
+	"#3b82f6",
+	"#6366f1",
+	"#8b5cf6",
+	"#a855f7",
+	"#d946ef",
+	"#ec4899",
+	"#f43f5e",
+	"#ffffff",
+	"#94a3b8",
+	"#000000"
+], disabled = false, class: className, ...restProps } = $props();
+const styles = $derived(colorPickerVariants());
+// Validate hex
+let hexInput = $state(value);
+$effect(() => {
+	hexInput = value;
+});
+function handleHexInput(e) {
+	const target = e.target;
+	let val = target.value;
+	if (!val.startsWith("#")) {
+		val = "#" + val;
+	}
+	hexInput = val;
+	// Basic hex validation regex (3, 4, 6, or 8 digits)
+	if (/^#([A-Fa-f0-9]{3,4}){1,2}$/.test(val)) {
+		value = val;
+	}
+}
+function setSwatch(swatch) {
+	value = swatch;
+	hexInput = swatch;
+}
+</script>
+
+<div class={twMerge(styles.base(), className)} {...restProps}>
+    <Popover>
+        {#snippet children({ open })}
+            <div 
+                class={styles.trigger()}
+                aria-disabled={disabled}
+            >
+                <div 
+                    class={styles.colorIndicator()} 
+                    style="background-color: {value || '#000'};"
+                ></div>
+                <span class="truncate flex-1 text-left text-on-surface">
+                    {value || placeholder}
+                </span>
+                <Icon name="lucide:chevron-down" class="text-on-surface-variant w-4 h-4" />
+            </div>
+        {/snippet}
+
+        {#snippet content()}
+            <div class={styles.content()}>
+                <div class={styles.hexInputWrapper()}>
+                    <span class="text-sm font-medium">Hex</span>
+                    <Input 
+                        value={hexInput} 
+                        oninput={handleHexInput} 
+                        class="h-8 font-mono text-xs" 
+                    />
+                </div>
+                
+                <div class={styles.swatchGrid()}>
+                    {#each swatches as swatch}
+                        <button
+                            type="button"
+                            class={styles.swatch()}
+                            style="background-color: {swatch};"
+                            title={swatch}
+                            aria-label={`Select color ${swatch}`}
+                            onclick={() => setSwatch(swatch)}
+                        ></button>
+                    {/each}
+                </div>
+                
+                <div class="pt-2 border-t border-outline-variant flex flex-col gap-1">
+                    <span class="text-xs text-on-surface-variant mb-1">Custom Color</span>
+                    <!-- Native color picker wrapper -->
+                    <label class="cursor-pointer relative overflow-hidden rounded-md border border-outline-variant w-full h-8 flex items-center justify-center bg-surface-container hover:bg-surface-container-high transition-colors">
+                        <span class="text-xs font-medium z-10 pointer-events-none mix-blend-difference text-white">Pick Custom</span>
+                        <input 
+                            type="color" 
+                            bind:value
+                            class="absolute inset-0 opacity-0 w-full h-full cursor-pointer scale-150"
+                        />
+                    </label>
+                </div>
+            </div>
+        {/snippet}
+    </Popover>
+</div>

package/dist/ColorPicker/ColorPicker.svelte.d.ts

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

package/dist/ColorPicker/color-picker.types.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'value'> {
+    /**
+     * The bound color value (Hex format).
+     * @default '#000000'
+     */
+    value?: string;
+    /**
+     * Placeholder text when no color is selected.
+     * @default 'Select color'
+     */
+    placeholder?: string;
+    /**
+     * Array of predefined color swatches.
+     */
+    swatches?: string[];
+    /**
+     * Whether the color picker is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+}

package/dist/ColorPicker/color-picker.types.js

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

package/dist/ColorPicker/color-picker.variants.d.ts

@@ -0,0 +1,69 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const colorPickerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            colorIndicator?: import("tailwind-merge").ClassNameValue;
+            swatchGrid?: import("tailwind-merge").ClassNameValue;
+            swatch?: import("tailwind-merge").ClassNameValue;
+            nativeInput?: import("tailwind-merge").ClassNameValue;
+            hexInputWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            colorIndicator?: import("tailwind-merge").ClassNameValue;
+            swatchGrid?: import("tailwind-merge").ClassNameValue;
+            swatch?: import("tailwind-merge").ClassNameValue;
+            nativeInput?: import("tailwind-merge").ClassNameValue;
+            hexInputWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+    colorIndicator: string;
+    content: string;
+    swatchGrid: string;
+    swatch: string;
+    nativeInput: string;
+    hexInputWrapper: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            colorIndicator?: import("tailwind-merge").ClassNameValue;
+            swatchGrid?: import("tailwind-merge").ClassNameValue;
+            swatch?: import("tailwind-merge").ClassNameValue;
+            nativeInput?: import("tailwind-merge").ClassNameValue;
+            hexInputWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+    colorIndicator: string;
+    content: string;
+    swatchGrid: string;
+    swatch: string;
+    nativeInput: string;
+    hexInputWrapper: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    trigger: string;
+    colorIndicator: string;
+    content: string;
+    swatchGrid: string;
+    swatch: string;
+    nativeInput: string;
+    hexInputWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ColorPickerVariantProps = VariantProps<typeof colorPickerVariants>;

package/dist/ColorPicker/color-picker.variants.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const colorPickerVariants = tv({
+    slots: {
+        base: 'relative inline-flex',
+        trigger: 'flex items-center gap-2 px-3 py-2 border border-outline-variant rounded-md bg-surface text-sm w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+        colorIndicator: 'w-5 h-5 rounded border border-outline/50 shrink-0',
+        content: 'w-64 p-3 flex flex-col gap-3 bg-surface border border-outline-variant rounded-md shadow-md',
+        swatchGrid: 'grid grid-cols-6 gap-2',
+        swatch: 'w-6 h-6 rounded border border-outline/50 cursor-pointer hover:scale-110 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+        nativeInput: 'w-full h-8 cursor-pointer rounded overflow-hidden',
+        hexInputWrapper: 'flex items-center gap-2'
+    }
+});

package/dist/ColorPicker/index.d.ts

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

package/dist/ColorPicker/index.js

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

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { DateFormatter } from "@internationalized/date";
+import Icon from "../Icon/Icon.svelte";
+import Popover from "../Popover/Popover.svelte";
+import Calendar from "../Calendar/Calendar.svelte";
+import { dateRangePickerVariants } from "./date-range-picker.variants.js";
+let { value = $bindable({
+	start: undefined,
+	end: undefined
+}), placeholder = "Select date range", numberOfMonths = 2, disabled = false, class: className, onchange, ...restProps } = $props();
+let styles = $derived(dateRangePickerVariants({ disabled }));
+// Internal state for popover
+let open = $state(false);
+// Formatter for displaying dates
+const df = new DateFormatter("en-US", { dateStyle: "medium" });
+let displayText = $derived.by(() => {
+	if (value.start) {
+		if (value.end) {
+			return `${df.format(value.start.toDate("UTC"))} - ${df.format(value.end.toDate("UTC"))}`;
+		}
+		return df.format(value.start.toDate("UTC"));
+	}
+	return placeholder;
+});
+function handleDateChange(v) {
+	// Range calendar passes an object with start/end
+	const rangeValue = v;
+	value = rangeValue;
+	onchange?.(rangeValue);
+}
+</script>
+
+<Popover bind:open>
+    {#snippet children({ open })}
+        <button
+            type="button"
+            class={twMerge(styles.trigger() as string, className, !value.start && 'text-surface-500')}
+            {disabled}
+            {...restProps}
+        >
+            <div class="flex items-center gap-2 overflow-hidden">
+                <Icon name="lucide:calendar" class={styles.icon() as string} />
+                <span class={styles.triggerText() as string}>{displayText}</span>
+            </div>
+            <Icon name="lucide:chevron-down" class={styles.icon() as string} />
+        </button>
+    {/snippet}
+
+    {#snippet content()}
+        <div class={styles.popoverContent() as string}>
+            <Calendar 
+                range={true}
+                value={value as any}
+                {numberOfMonths}
+                onValueChange={handleDateChange}
+            />
+        </div>
+    {/snippet}
+</Popover>

package/dist/DateRangePicker/DateRangePicker.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DateRangePickerProps } from './date-range-picker.types.js';
+declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {}, "value">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

package/dist/DateRangePicker/date-range-picker.types.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { DateValue } from '@internationalized/date';
+export interface DateRange {
+    start: DateValue | undefined;
+    end: DateValue | undefined;
+}
+export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'value' | 'onchange'> {
+    /**
+     * The selected date range.
+     */
+    value?: DateRange;
+    /**
+     * Placeholder text when no dates are selected.
+     * @default 'Select date range'
+     */
+    placeholder?: string;
+    /**
+     * Number of months to display side-by-side.
+     * @default 2
+     */
+    numberOfMonths?: number;
+    /**
+     * Whether the picker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes for the trigger button.
+     */
+    class?: string;
+    /**
+     * Event fired when the date range changes.
+     */
+    onchange?: (value: DateRange) => void;
+}

package/dist/DateRangePicker/date-range-picker.types.js

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

package/dist/DateRangePicker/date-range-picker.variants.d.ts

@@ -0,0 +1,39 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const dateRangePickerVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    triggerText: string;
+    icon: string;
+    popoverContent: string;
+    calendarWrapper: string;
+}, undefined, {
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    triggerText: string;
+    icon: string;
+    popoverContent: string;
+    calendarWrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    triggerText: string;
+    icon: string;
+    popoverContent: string;
+    calendarWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DateRangePickerVariantProps = VariantProps<typeof dateRangePickerVariants>;

package/dist/DateRangePicker/date-range-picker.variants.js

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants';
+export const dateRangePickerVariants = tv({
+    slots: {
+        trigger: 'flex w-full items-center justify-between gap-2 px-3 py-2 text-sm text-left border border-outline-variant bg-surface-50 dark:bg-surface-900 rounded-md hover:bg-surface-100 dark:hover:bg-surface-800 focus:outline-none focus:ring-2 focus:ring-primary transition-colors',
+        triggerText: 'truncate flex-1',
+        icon: 'w-4 h-4 shrink-0 text-surface-500',
+        popoverContent: 'w-auto p-3 bg-surface-50 dark:bg-surface-900 border border-outline-variant rounded-md shadow-md',
+        calendarWrapper: 'flex flex-col sm:flex-row gap-4'
+    },
+    variants: {
+        disabled: {
+            true: {
+                trigger: 'opacity-50 cursor-not-allowed pointer-events-none'
+            }
+        }
+    },
+    defaultVariants: {
+        disabled: false
+    }
+});

package/dist/DateRangePicker/index.d.ts

@@ -0,0 +1,4 @@
+import DateRangePicker from './DateRangePicker.svelte';
+export { DateRangePicker };
+export * from './date-range-picker.types.js';
+export * from './date-range-picker.variants.js';

package/dist/DateRangePicker/index.js

@@ -0,0 +1,4 @@
+import DateRangePicker from './DateRangePicker.svelte';
+export { DateRangePicker };
+export * from './date-range-picker.types.js';
+export * from './date-range-picker.variants.js';

package/dist/Fonts/fonts.js

@@ -70,7 +70,9 @@ export function buildGoogleFontsUrl(fonts, display = 'swap') {
         .filter((family, index, source) => family.length > 0 && source.indexOf(family) === index);
     if (families.length === 0)
         return '';
-    const familyParams = families.map((f) => `family=${f}`).join('&');
+    const familyParams = families
+        .map((f) => `family=${encodeURIComponent(f).replaceAll('%2B', '+')}`)
+        .join('&');
     return `https://fonts.googleapis.com/css2?${familyParams}&display=${display}`;
 }
 export function buildFontFamily(font) {

package/dist/Link/Link.context-harness.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">import { setContext } from "svelte";
+import Link from "./Link.svelte";
+import { LINK_LOCATION_CONTEXT_KEY } from "./location-context.js";
+let { url } = $props();
+setContext(LINK_LOCATION_CONTEXT_KEY, { currentUrl: () => url });
+</script>
+
+<Link href="/from-context" />

package/dist/Link/Link.context-harness.svelte.d.ts

@@ -0,0 +1,7 @@
+import Link from './Link.svelte';
+type $$ComponentProps = {
+    url: URL;
+};
+declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/Link/Link.svelte

@@ -1,5 +1,6 @@
-<script lang="ts" module>const navigationEvent = "svelora:navigation";
-let isHistoryPatched = false;
+<script lang="ts" module>const locationSubscribers = new Set();
+let stopLocationTracking;
+let lastKnownHref = "";
 function parseUrl(url, baseUrl) {
 	try {
 		const parsed = new URL(url, baseUrl.origin);
@@ -35,60 +36,86 @@ function isPathnameMatch(linkPath, currentPath, exactMatch) {
 	const current = currentPath.replace(/\/$/, "") || "/";
 	return link === "/" ? current === "/" : current === link || current.startsWith(`${link}/`);
 }
-function dispatchNavigationEvent() {
+function dispatchLocationChange() {
 	if (typeof window === "undefined") {
 		return;
 	}
-	window.dispatchEvent(new Event(navigationEvent));
+	for (const callback of locationSubscribers) {
+		callback();
+	}
 }
-function patchHistoryMethod(method) {
-	const historyMethod = window.history[method].bind(window.history);
-	Object.defineProperty(window.history, method, {
-		configurable: true,
-		value: (...args) => {
-			historyMethod(...args);
-			dispatchNavigationEvent();
-		}
-	});
+function syncLocation(force = false) {
+	if (typeof window === "undefined") {
+		return;
+	}
+	const href = window.location.href;
+	if (!force && href === lastKnownHref) {
+		return;
+	}
+	lastKnownHref = href;
+	dispatchLocationChange();
 }
-function ensureNavigationEvents() {
-	if (typeof window === "undefined" || isHistoryPatched) {
+function scheduleLocationSync() {
+	if (typeof window === "undefined") {
+		return;
+	}
+	queueMicrotask(() => syncLocation());
+	window.setTimeout(() => syncLocation(), 0);
+	window.requestAnimationFrame(() => syncLocation());
+}
+function ensureLocationTracking() {
+	if (typeof window === "undefined" || stopLocationTracking) {
 		return;
 	}
-	isHistoryPatched = true;
-	patchHistoryMethod("pushState");
-	patchHistoryMethod("replaceState");
+	lastKnownHref = window.location.href;
+	const handleImmediateLocationChange = () => syncLocation();
+	const handleDeferredLocationChange = () => scheduleLocationSync();
+	const intervalId = window.setInterval(() => syncLocation(), 125);
+	window.addEventListener("popstate", handleImmediateLocationChange);
+	window.addEventListener("hashchange", handleImmediateLocationChange);
+	document.addEventListener("click", handleDeferredLocationChange, true);
+	stopLocationTracking = () => {
+		window.clearInterval(intervalId);
+		window.removeEventListener("popstate", handleImmediateLocationChange);
+		window.removeEventListener("hashchange", handleImmediateLocationChange);
+		document.removeEventListener("click", handleDeferredLocationChange, true);
+		stopLocationTracking = undefined;
+	};
 }
 function subscribeToLocation(callback) {
 	if (typeof window === "undefined") {
 		return () => undefined;
 	}
-	ensureNavigationEvents();
-	const handleLocationChange = () => callback();
-	handleLocationChange();
-	window.addEventListener("popstate", handleLocationChange);
-	window.addEventListener("hashchange", handleLocationChange);
-	window.addEventListener(navigationEvent, handleLocationChange);
+	ensureLocationTracking();
+	locationSubscribers.add(callback);
+	callback();
 	return () => {
-		window.removeEventListener("popstate", handleLocationChange);
-		window.removeEventListener("hashchange", handleLocationChange);
-		window.removeEventListener(navigationEvent, handleLocationChange);
+		locationSubscribers.delete(callback);
+		if (locationSubscribers.size === 0) {
+			stopLocationTracking?.();
+		}
 	};
 }
 export {};
 </script>
 
-<script lang="ts">import { onMount } from "svelte";
+<script lang="ts">import { getContext, onMount } from "svelte";
 import { twMerge } from "tailwind-merge";
 import { getComponentConfig } from "../config.js";
+import { LINK_LOCATION_CONTEXT_KEY } from "./location-context.js";
 import { linkDefaults, linkVariants } from "./link.variants.js";
 const config = getComponentConfig("link", linkDefaults);
 let { ref = $bindable(null), href, type, active, exact = false, exactQuery = false, exactHash = false, activeClass, inactiveClass, disabled = false, raw = false, external, children, class: className, ui, target, rel, onclick, ...restProps } = $props();
 const isLink = $derived(!!href);
-let currentUrl = $state(undefined);
+const locationContext = getContext(LINK_LOCATION_CONTEXT_KEY);
+let observedUrl = $state(undefined);
+const currentUrl = $derived.by(() => locationContext?.currentUrl() ?? observedUrl);
 onMount(() => {
+	if (locationContext) {
+		return;
+	}
 	return subscribeToLocation(() => {
-		currentUrl = new URL(window.location.href);
+		observedUrl = new URL(window.location.href);
 	});
 });
 const isExternal = $derived(isLink && (external ?? (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//"))));

package/dist/Link/index.d.ts

@@ -1,2 +1,4 @@
 export { default as Link } from './Link.svelte';
+export { LINK_LOCATION_CONTEXT_KEY } from './location-context.js';
+export type { LinkLocationContext } from './location-context.js';
 export type { LinkProps } from './link.types.js';

package/dist/Link/index.js

@@ -1 +1,2 @@
 export { default as Link } from './Link.svelte';
+export { LINK_LOCATION_CONTEXT_KEY } from './location-context.js';

package/dist/Link/location-context.d.ts

@@ -0,0 +1,4 @@
+export declare const LINK_LOCATION_CONTEXT_KEY: unique symbol;
+export interface LinkLocationContext {
+    currentUrl: () => URL;
+}

package/dist/Link/location-context.js

@@ -0,0 +1 @@
+export const LINK_LOCATION_CONTEXT_KEY = Symbol('svelora:link-location');

package/dist/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/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;