svelora 3.0.0 → 3.0.2

package/dist/Timeline/Timeline.svelte

@@ -1,62 +1,83 @@
-<script lang="ts" module>import type { TimelineProps } from './timeline.types.js';
-export type Props = TimelineProps;
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import type { ClassNameValue } from 'tailwind-merge';
-import Avatar from '../Avatar/Avatar.svelte';
-import { getComponentConfig } from '../config.js';
-import Icon from '../Icon/Icon.svelte';
-import type { TimelineItemState } from './timeline.types.js';
-import { timelineDefaults, timelineVariants } from './timeline.variants.js';
-
-const config = getComponentConfig('timeline', timelineDefaults);
-let { ref = $bindable(null), as = 'div', items = [], size = config.defaultVariants.size, color = config.defaultVariants.color, orientation = config.defaultVariants.orientation, reverse = config.defaultVariants.reverse, value, class: className, ui, indicator, dateSlot, titleSlot, descriptionSlot, content, ...restProps }: Props = $props();
-type ItemUi = Partial<Record<string, ClassNameValue>>;
+<script lang="ts">import Avatar from "../Avatar/Avatar.svelte";
+import { getComponentConfig } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { timelineDefaults, timelineVariants } from "./timeline.variants.js";
+const config = getComponentConfig("timeline", timelineDefaults);
+let { ref = $bindable(null), as = "div", items = [], size = config.defaultVariants.size, color = config.defaultVariants.color, orientation = config.defaultVariants.orientation, reverse = config.defaultVariants.reverse, value, class: className, ui, indicator, dateSlot, titleSlot, descriptionSlot, content, ...restProps } = $props();
 const classes = $derived.by(() => {
-    const slots = timelineVariants({ orientation, color, size, reverse });
-    const c = config.slots;
-    // Pre-compute defaults — reused for all items without per-item ui
-    const _item = slots.item({ class: [c.item, ui?.item] });
-    const _container = slots.container({ class: [c.container, ui?.container] });
-    const _indicator = slots.indicator({ class: [c.indicator, ui?.indicator] });
-    const _separator = slots.separator({ class: [c.separator, ui?.separator] });
-    const _wrapper = slots.wrapper({ class: [c.wrapper, ui?.wrapper] });
-    const _date = slots.date({ class: [c.date, ui?.date] });
-    const _title = slots.title({ class: [c.title, ui?.title] });
-    const _description = slots.description({ class: [c.description, ui?.description] });
-    return {
-        root: slots.root({ class: [c.root, className, ui?.root] }),
-        item: (itemClass: ClassNameValue | undefined, itemUi: ItemUi | undefined) => itemClass || itemUi
-            ? slots.item({ class: [c.item, ui?.item, itemUi?.item, itemClass] })
-            : _item,
-        container: (itemUi: ItemUi | undefined) => itemUi
-            ? slots.container({ class: [c.container, ui?.container, itemUi.container] })
-            : _container,
-        indicator: (itemUi: ItemUi | undefined) => itemUi
-            ? slots.indicator({ class: [c.indicator, ui?.indicator, itemUi.indicator] })
-            : _indicator,
-        separator: (itemUi: ItemUi | undefined) => itemUi
-            ? slots.separator({ class: [c.separator, ui?.separator, itemUi.separator] })
-            : _separator,
-        wrapper: (itemUi: ItemUi | undefined) => itemUi
-            ? slots.wrapper({ class: [c.wrapper, ui?.wrapper, itemUi.wrapper] })
-            : _wrapper,
-        date: (itemUi: ItemUi | undefined) => itemUi?.date ? slots.date({ class: [c.date, ui?.date, itemUi.date] }) : _date,
-        title: (itemUi: ItemUi | undefined) => itemUi?.title ? slots.title({ class: [c.title, ui?.title, itemUi.title] }) : _title,
-        description: (itemUi: ItemUi | undefined) => itemUi?.description
-            ? slots.description({
-                class: [c.description, ui?.description, itemUi.description]
-            })
-            : _description
-    };
+	const slots = timelineVariants({
+		orientation,
+		color,
+		size,
+		reverse
+	});
+	const c = config.slots;
+	// Pre-compute defaults — reused for all items without per-item ui
+	const _item = slots.item({ class: [c.item, ui?.item] });
+	const _container = slots.container({ class: [c.container, ui?.container] });
+	const _indicator = slots.indicator({ class: [c.indicator, ui?.indicator] });
+	const _separator = slots.separator({ class: [c.separator, ui?.separator] });
+	const _wrapper = slots.wrapper({ class: [c.wrapper, ui?.wrapper] });
+	const _date = slots.date({ class: [c.date, ui?.date] });
+	const _title = slots.title({ class: [c.title, ui?.title] });
+	const _description = slots.description({ class: [c.description, ui?.description] });
+	return {
+		root: slots.root({ class: [
+			c.root,
+			className,
+			ui?.root
+		] }),
+		item: (itemClass, itemUi) => itemClass || itemUi ? slots.item({ class: [
+			c.item,
+			ui?.item,
+			itemUi?.item,
+			itemClass
+		] }) : _item,
+		container: (itemUi) => itemUi ? slots.container({ class: [
+			c.container,
+			ui?.container,
+			itemUi.container
+		] }) : _container,
+		indicator: (itemUi) => itemUi ? slots.indicator({ class: [
+			c.indicator,
+			ui?.indicator,
+			itemUi.indicator
+		] }) : _indicator,
+		separator: (itemUi) => itemUi ? slots.separator({ class: [
+			c.separator,
+			ui?.separator,
+			itemUi.separator
+		] }) : _separator,
+		wrapper: (itemUi) => itemUi ? slots.wrapper({ class: [
+			c.wrapper,
+			ui?.wrapper,
+			itemUi.wrapper
+		] }) : _wrapper,
+		date: (itemUi) => itemUi?.date ? slots.date({ class: [
+			c.date,
+			ui?.date,
+			itemUi.date
+		] }) : _date,
+		title: (itemUi) => itemUi?.title ? slots.title({ class: [
+			c.title,
+			ui?.title,
+			itemUi.title
+		] }) : _title,
+		description: (itemUi) => itemUi?.description ? slots.description({ class: [
+			c.description,
+			ui?.description,
+			itemUi.description
+		] }) : _description
+	};
 });
 const activeIndex = $derived(value !== undefined ? items.findIndex((item) => item.value === value) : -1);
-function getState(index: number): TimelineItemState {
-    if (activeIndex === -1)
-        return 'pending';
-    if (index === activeIndex)
-        return 'active';
-    return index < activeIndex ? 'completed' : 'pending';
+function getState(index) {
+	if (activeIndex === -1) return "pending";
+	if (index === activeIndex) return "active";
+	return index < activeIndex ? "completed" : "pending";
 }
 </script>
 

package/dist/Toast/Toaster.svelte

@@ -1,30 +1,13 @@
-<script lang="ts" module>
-    import type { ToasterProps } from './toast.types.js'
-
-    export type Props = ToasterProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    // biome-ignore lint/correctness/noUnusedImports: used in template below
-    import { Toaster as SonnerToaster } from 'svelte-sonner'
-    import { getComponentConfig } from '../config.js'
-    import { toastDefaults } from './toast.variants.js'
-
-    const config = getComponentConfig('toast', toastDefaults)
-
-    let {
-        variant = config.defaultVariants.variant,
-        position = 'bottom-right',
-        visibleToasts = 3,
-        duration = 5000,
-        closeButton = true,
-        expand = false,
-        gap = 14,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const toasterClass = $derived([`ps-toast-${variant}`, className].filter(Boolean).join(' '))
+<script lang="ts">// biome-ignore lint/correctness/noUnusedImports: used in template below
+import { Toaster as SonnerToaster } from "svelte-sonner";
+import { getComponentConfig } from "../config.js";
+import { toastDefaults } from "./toast.variants.js";
+const config = getComponentConfig("toast", toastDefaults);
+let { variant = config.defaultVariants.variant, position = "bottom-right", visibleToasts = 3, duration = 5e3, closeButton = true, expand = false, gap = 14, class: className, ...restProps } = $props();
+const toasterClass = $derived([`ps-toast-${variant}`, className].filter(Boolean).join(" "));
 </script>
 
 <SonnerToaster

package/dist/Tooltip/Tooltip.svelte

@@ -1,71 +1,39 @@
-<script lang="ts" module>
-    import type { TooltipProps } from './tooltip.types.js'
-
-    export type Props = TooltipProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Tooltip } from 'bits-ui'
-    import { getComponentConfig } from '../config.js'
-    import Kbd from '../Kbd/Kbd.svelte'
-    import { tooltipDefaults, tooltipVariants } from './tooltip.variants.js'
-
-    const config = getComponentConfig('tooltip', tooltipDefaults)
-
-    let {
-        ref = $bindable(null),
-        open = $bindable(false),
-        onOpenChange,
-        delayDuration,
-        disableHoverableContent,
-        disableCloseOnTriggerClick,
-        ignoreNonKeyboardFocus,
-        disabled = false,
-        side = 'bottom',
-        sideOffset = 8,
-        align = 'center',
-        alignOffset = 0,
-        avoidCollisions = true,
-        collisionBoundary,
-        collisionPadding = 8,
-        sticky = 'partial',
-        hideWhenDetached = false,
-        onEscapeKeydown,
-        forceMount,
-        text,
-        kbds,
-        arrow = false,
-        transition = config.defaultVariants.transition ?? true,
-        portal = true,
-        ui,
-        class: className,
-        children,
-        content: contentSlot,
-        ...restProps
-    }: Props = $props()
-
-    // Pre-compute booleans
-    const hasText = $derived(!!text)
-    const hasKbds = $derived(!!kbds?.length)
-    const hasContent = $derived(hasText || hasKbds || !!contentSlot)
-
-    // Compute variant classes
-    const variantSlots = $derived(tooltipVariants({ transition }))
-    const kbdsSize = (config.slots.kbdsSize ?? 'sm') as 'sm' | 'md' | 'lg'
-    const classes = $derived({
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
-        arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] }),
-        text: variantSlots.text({ class: [config.slots.text, ui?.text] }),
-        kbds: variantSlots.kbds({ class: [config.slots.kbds, ui?.kbds] })
-    })
-
-    // Arrow props
-    const arrowProps = $derived.by(() => {
-        if (typeof arrow === 'object') {
-            return { width: 12, height: 6, ...arrow }
-        }
-        return { width: 12, height: 6 }
-    })
+<script lang="ts">import { Tooltip } from "bits-ui";
+import { getComponentConfig } from "../config.js";
+import Kbd from "../Kbd/Kbd.svelte";
+import { tooltipDefaults, tooltipVariants } from "./tooltip.variants.js";
+const config = getComponentConfig("tooltip", tooltipDefaults);
+let { ref = $bindable(null), open = $bindable(false), onOpenChange, delayDuration, disableHoverableContent, disableCloseOnTriggerClick, ignoreNonKeyboardFocus, disabled = false, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, avoidCollisions = true, collisionBoundary, collisionPadding = 8, sticky = "partial", hideWhenDetached = false, onEscapeKeydown, forceMount, text, kbds, arrow = false, transition = config.defaultVariants.transition ?? true, portal = true, ui, class: className, children, content: contentSlot, ...restProps } = $props();
+// Pre-compute booleans
+const hasText = $derived(!!text);
+const hasKbds = $derived(!!kbds?.length);
+const hasContent = $derived(hasText || hasKbds || !!contentSlot);
+// Compute variant classes
+const variantSlots = $derived(tooltipVariants({ transition }));
+const kbdsSize = config.slots.kbdsSize ?? "sm";
+const classes = $derived({
+	content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+	arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] }),
+	text: variantSlots.text({ class: [config.slots.text, ui?.text] }),
+	kbds: variantSlots.kbds({ class: [config.slots.kbds, ui?.kbds] })
+});
+// Arrow props
+const arrowProps = $derived.by(() => {
+	if (typeof arrow === "object") {
+		return {
+			width: 12,
+			height: 6,
+			...arrow
+		};
+	}
+	return {
+		width: 12,
+		height: 6
+	};
+});
 </script>
 
 {#snippet tooltipContent()}

package/dist/Tooltip/Tooltip.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { TooltipProps } from './tooltip.types.js';
 export type Props = TooltipProps;
 import { Tooltip } from 'bits-ui';
-declare const Tooltip: import("svelte").Component<TooltipProps, {}, "ref" | "open">;
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "open" | "ref">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/Tooltip/TooltipTestWrapper.svelte

@@ -1,8 +1,5 @@
-<script lang="ts">
-    import Tooltip from './Tooltip.svelte'
-    import type { TooltipProps } from './tooltip.types.js'
-
-    let props: TooltipProps = $props()
+<script lang="ts">import Tooltip from "./Tooltip.svelte";
+let props = $props();
 </script>
 
 <Tooltip {...props} />

package/dist/User/User.svelte

@@ -1,54 +1,38 @@
-<script lang="ts" module>
-    import type { UserProps } from './user.types.js'
-
-    export type Props = UserProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import Avatar from '../Avatar/Avatar.svelte'
-    import Chip from '../Chip/Chip.svelte'
-    import { getComponentConfig } from '../config.js'
-    import Link from '../Link/Link.svelte'
-    import { userDefaults, userVariants } from './user.variants.js'
-
-    const config = getComponentConfig('user', userDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        name,
-        description,
-        avatar,
-        chip,
-        size = config.defaultVariants.size,
-        orientation = config.defaultVariants.orientation,
-        href,
-        class: className,
-        avatarSlot,
-        nameSlot,
-        descriptionSlot,
-        ...restProps
-    }: Props = $props()
-
-    const isClickable = $derived(!!href || !!restProps.onclick)
-
-    const classes = $derived.by(() => {
-        const slots = userVariants({ size, orientation, clickable: isClickable })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-            name: slots.name({ class: [config.slots.name, ui?.name] }),
-            description: slots.description({ class: [config.slots.description, ui?.description] }),
-            avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] })
-        }
-    })
-
-    const mergedAvatarProps = $derived(
-        avatar ? { alt: name, size: size as typeof avatar.size, ...avatar } : undefined
-    )
-
-    const chipProps = $derived(chip && avatar ? (chip === true ? {} : chip) : null)
+<script lang="ts">import Avatar from "../Avatar/Avatar.svelte";
+import Chip from "../Chip/Chip.svelte";
+import { getComponentConfig } from "../config.js";
+import Link from "../Link/Link.svelte";
+import { userDefaults, userVariants } from "./user.variants.js";
+const config = getComponentConfig("user", userDefaults);
+let { ref = $bindable(null), as = "div", ui, name, description, avatar, chip, size = config.defaultVariants.size, orientation = config.defaultVariants.orientation, href, class: className, avatarSlot, nameSlot, descriptionSlot, ...restProps } = $props();
+const isClickable = $derived(!!href || !!restProps.onclick);
+const classes = $derived.by(() => {
+	const slots = userVariants({
+		size,
+		orientation,
+		clickable: isClickable
+	});
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			ui?.root
+		] }),
+		wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+		name: slots.name({ class: [config.slots.name, ui?.name] }),
+		description: slots.description({ class: [config.slots.description, ui?.description] }),
+		avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] })
+	};
+});
+const mergedAvatarProps = $derived(avatar ? {
+	alt: name,
+	size,
+	...avatar
+} : undefined);
+const chipProps = $derived(chip && avatar ? chip === true ? {} : chip : null);
 </script>
 
 {#snippet userContent()}

package/dist/docs/navigation.d.ts

@@ -11,7 +11,7 @@ export type DocsGroup = {
 };
 export declare const docsMeta: {
     readonly name: "Svelora";
-    readonly version: "v2.2.0";
+    readonly version: `v${string}`;
     readonly npmCommand: "npm install svelora";
     readonly githubHref: "https://github.com/asphum/svelora";
 };

package/dist/docs/navigation.js

@@ -1,6 +1,7 @@
+import packageJson from '../../../package.json' with { type: 'json' };
 export const docsMeta = {
     name: 'Svelora',
-    version: 'v2.2.0',
+    version: `v${packageJson.version}`,
     npmCommand: 'npm install svelora',
     githubHref: 'https://github.com/asphum/svelora'
 };
@@ -97,6 +98,12 @@ export const docsComponentGroups = [
                 legacyHref: '/link',
                 icon: 'lucide:link'
             },
+            {
+                title: 'LocaleButton',
+                href: '/docs/components/locale-button',
+                legacyHref: '/locale-button',
+                icon: 'lucide:languages'
+            },
             {
                 title: 'Kbd',
                 href: '/docs/components/kbd',

package/dist/hooks/HookContextProbe.svelte

@@ -1,7 +1,5 @@
-<script lang="ts">
-    import { useFormField } from './useFormField.svelte.js'
-
-    const ctx = useFormField()
+<script lang="ts">import { useFormField } from "./useFormField.svelte.js";
+const ctx = useFormField();
 </script>
 
 <div data-name={ctx?.name ?? 'none'} data-has={String(!!ctx)}>probe</div>

package/dist/hooks/HookContextProvider.svelte

@@ -1,9 +1,11 @@
-<script lang="ts">
-    import { setContext } from 'svelte'
-    import HookContextProbe from './HookContextProbe.svelte'
-    import { FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js'
-
-    setContext(FORM_FIELD_CONTEXT_KEY, { name: 'email', size: 'md', ariaId: 'ff' })
+<script lang="ts">import { setContext } from "svelte";
+import HookContextProbe from "./HookContextProbe.svelte";
+import { FORM_FIELD_CONTEXT_KEY } from "./useFormField.svelte.js";
+setContext(FORM_FIELD_CONTEXT_KEY, {
+	name: "email",
+	size: "md",
+	ariaId: "ff"
+});
 </script>
 
 <HookContextProbe />

package/dist/hooks/HookEmitProbe.svelte

@@ -1,14 +1,11 @@
-<script lang="ts">
-    import { useFormFieldEmit } from './useFormField.svelte.js'
-
-    const emit = useFormFieldEmit()
-
-    function fireAll() {
-        emit.onBlur()
-        emit.onFocus()
-        emit.onChange()
-        emit.onInput()
-    }
+<script lang="ts">import { useFormFieldEmit } from "./useFormField.svelte.js";
+const emit = useFormFieldEmit();
+function fireAll() {
+	emit.onBlur();
+	emit.onFocus();
+	emit.onChange();
+	emit.onInput();
+}
 </script>
 
 <button data-testid="fire" onclick={fireAll}>fire</button>

package/dist/i18n.d.ts

@@ -0,0 +1,2 @@
+import type { LocaleButtonLocale } from './LocaleButton/index.js';
+export declare function buildLocaleOptions(): LocaleButtonLocale[];

package/dist/i18n.js

@@ -0,0 +1,19 @@
+import { locales } from './paraglide/runtime.js';
+const localeMeta = {
+    en: {
+        label: 'English',
+        shortLabel: 'EN'
+    },
+    th: {
+        label: 'Thai',
+        shortLabel: 'TH'
+    }
+};
+export function buildLocaleOptions() {
+    return locales.map((locale) => ({
+        code: locale,
+        label: localeMeta[locale].label,
+        shortLabel: localeMeta[locale].shortLabel,
+        hreflang: locale
+    }));
+}

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export * from './Icon/index.js';
 export * from './Input/index.js';
 export * from './Kbd/index.js';
 export * from './Link/index.js';
+export * from './LocaleButton/index.js';
 export * from './Modal/index.js';
 export * from './Pagination/index.js';
 export * from './PinInput/index.js';

package/dist/index.js

@@ -35,6 +35,7 @@ export * from './Icon/index.js';
 export * from './Input/index.js';
 export * from './Kbd/index.js';
 export * from './Link/index.js';
+export * from './LocaleButton/index.js';
 export * from './Modal/index.js';
 export * from './Pagination/index.js';
 export * from './PinInput/index.js';