svelora 3.0.1 → 3.0.2

package/dist/LocaleButton/LocaleButton.svelte

@@ -0,0 +1,165 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import Button from "../Button/Button.svelte";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import DropdownMenu from "../DropdownMenu/DropdownMenu.svelte";
+import Icon from "../Icon/Icon.svelte";
+import Link from "../Link/Link.svelte";
+import { localeButtonDefaults, localeButtonVariants } from "./locale-button.variants.js";
+const config = getComponentConfig("localeButton", localeButtonDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { locales = [], locale, variant = config.defaultVariants.variant ?? "outline", color = config.defaultVariants.color ?? "surface", size = config.defaultVariants.size ?? "md", 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, class: className, ...restProps } = $props();
+const slots = localeButtonVariants();
+const classes = $derived({
+	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}
+>
+    {#snippet children({ open: isOpen, props })}
+        <Button
+            {...props}
+            {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 })}
+        <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)}
+
+                <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>
+            {/each}
+        </div>
+    {/snippet}
+</DropdownMenu>

package/dist/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, {}, "open">;
+type LocaleButton = ReturnType<typeof LocaleButton>;
+export default LocaleButton;

package/dist/LocaleButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LocaleButton } from './LocaleButton.svelte';
+export type { LocaleButtonLocale, LocaleButtonProps } from './locale-button.types.js';

package/dist/LocaleButton/index.js

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

package/dist/LocaleButton/locale-button.types.d.ts

@@ -0,0 +1,182 @@
+import type { DropdownMenuContentPropsWithoutHTML, DropdownMenuRootPropsWithoutHTML } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { ButtonVariantProps } from '../Button/button.variants.js';
+import type { LocaleButtonSlots } from './locale-button.variants.js';
+export type LocaleButtonLocale = {
+    /**
+     * Locale code used by your i18n layer, for example `en` or `th`.
+     */
+    code: string;
+    /**
+     * Full label rendered in the dropdown menu.
+     */
+    label: string;
+    /**
+     * Optional short label for the trigger, such as `EN` or `TH`.
+     */
+    shortLabel?: string;
+    /**
+     * Optional helper text shown below the label.
+     */
+    description?: string;
+    /**
+     * Optional static href for this locale.
+     */
+    href?: string;
+    /**
+     * Optional language tag forwarded to anchor items.
+     */
+    hreflang?: string;
+    /**
+     * Optional leading icon for the locale item.
+     */
+    icon?: string;
+    /**
+     * Disables this locale in the dropdown.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes for the locale item.
+     */
+    class?: ClassNameValue;
+};
+type RootProps = Pick<DropdownMenuRootPropsWithoutHTML, 'open' | 'onOpenChange'>;
+type ContentProps = Pick<DropdownMenuContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'onEscapeKeydown' | 'onInteractOutside' | 'onCloseAutoFocus' | 'forceMount' | 'loop'>;
+export type LocaleButtonProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class' | 'color'> & RootProps & ContentProps & {
+    /**
+     * Available locales shown in the menu.
+     */
+    locales: LocaleButtonLocale[];
+    /**
+     * Current active locale code.
+     */
+    locale?: string;
+    /**
+     * Controls the visual style of the trigger button.
+     * @default 'outline'
+     */
+    variant?: NonNullable<ButtonVariantProps['variant']>;
+    /**
+     * Sets the color scheme of the trigger button.
+     * @default 'surface'
+     */
+    color?: NonNullable<ButtonVariantProps['color']>;
+    /**
+     * Controls the trigger button size.
+     * @default 'md'
+     */
+    size?: NonNullable<ButtonVariantProps['size']>;
+    /**
+     * Renders a loading spinner and disables interaction.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Disables the trigger and all locale actions.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Stretches the trigger to fill the available width.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Forces equal width and height for the trigger button.
+     * @default false
+     */
+    square?: boolean;
+    /**
+     * Fallback text shown when no current locale is matched.
+     * @default 'Select language'
+     */
+    placeholder?: string;
+    /**
+     * Accessible label for the trigger button.
+     * @default 'Change language'
+     */
+    ariaLabel?: string;
+    /**
+     * Optional heading rendered above the locale list.
+     * @default 'Language'
+     */
+    menuLabel?: string;
+    /**
+     * Leading icon displayed in the trigger.
+     * @default 'lucide:languages'
+     */
+    icon?: string;
+    /**
+     * Trailing chevron icon displayed in the trigger.
+     * @default Uses `icons.chevronDown` from app config
+     */
+    chevronIcon?: string;
+    /**
+     * Whether to render the leading trigger icon.
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Whether to render the trailing chevron icon.
+     * @default true
+     */
+    showChevron?: boolean;
+    /**
+     * Whether to render the locale code badge inside the menu.
+     * @default true
+     */
+    showCode?: boolean;
+    /**
+     * Whether to render the selected locale check icon.
+     * @default true
+     */
+    showIndicator?: boolean;
+    /**
+     * Disables the currently active locale item.
+     * @default true
+     */
+    disableCurrentLocale?: boolean;
+    /**
+     * Closes the menu after selecting a locale without href navigation.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Resolves a locale-specific href, useful for Paraglide URL strategies.
+     */
+    getLocaleHref?: (locale: string, item: LocaleButtonLocale) => string | undefined;
+    /**
+     * Called when a locale is selected.
+     * Use this for integrations like `setLocale(...)`.
+     */
+    onLocaleChange?: (locale: string, item: LocaleButtonLocale) => void | Promise<void>;
+    /**
+     * Render custom trigger content.
+     */
+    children?: Snippet<[{
+        open: boolean;
+        currentLocale: LocaleButtonLocale | undefined;
+    }]>;
+    /**
+     * Whether to render the menu in a portal.
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Display an arrow alongside the dropdown.
+     * @default false
+     */
+    arrow?: boolean;
+    /**
+     * Additional CSS classes for the trigger element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override classes for LocaleButton slots.
+     */
+    ui?: Partial<Record<LocaleButtonSlots, ClassNameValue>>;
+};
+export {};

package/dist/LocaleButton/locale-button.types.js

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

package/dist/LocaleButton/locale-button.variants.d.ts

@@ -0,0 +1,61 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { ButtonVariantProps } from '../Button/button.variants.js';
+export declare const localeButtonVariants: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    triggerLabel: string;
+    triggerIcon: string;
+    triggerChevron: string;
+    menu: string;
+    menuLabel: string;
+    item: string[];
+    itemIdle: string;
+    itemCurrent: string;
+    itemLeading: string;
+    itemText: string;
+    itemLabel: string;
+    itemDescription: string;
+    itemCode: string;
+    itemIndicator: string;
+}, undefined, {}, {
+    base: string;
+    triggerLabel: string;
+    triggerIcon: string;
+    triggerChevron: string;
+    menu: string;
+    menuLabel: string;
+    item: string[];
+    itemIdle: string;
+    itemCurrent: string;
+    itemLeading: string;
+    itemText: string;
+    itemLabel: string;
+    itemDescription: string;
+    itemCode: string;
+    itemIndicator: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    triggerLabel: string;
+    triggerIcon: string;
+    triggerChevron: string;
+    menu: string;
+    menuLabel: string;
+    item: string[];
+    itemIdle: string;
+    itemCurrent: string;
+    itemLeading: string;
+    itemText: string;
+    itemLabel: string;
+    itemDescription: string;
+    itemCode: string;
+    itemIndicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type LocaleButtonVariantProps = VariantProps<typeof localeButtonVariants>;
+export type LocaleButtonSlots = keyof ReturnType<typeof localeButtonVariants>;
+export declare const localeButtonDefaults: {
+    defaultVariants: {
+        color: NonNullable<ButtonVariantProps["color"]>;
+        variant: NonNullable<ButtonVariantProps["variant"]>;
+        size: NonNullable<ButtonVariantProps["size"]>;
+    };
+    slots: Partial<Record<LocaleButtonSlots, string>>;
+};

package/dist/LocaleButton/locale-button.variants.js

@@ -0,0 +1,34 @@
+import { tv } from 'tailwind-variants';
+export const localeButtonVariants = tv({
+    slots: {
+        base: '',
+        triggerLabel: 'truncate',
+        triggerIcon: 'shrink-0',
+        triggerChevron: 'shrink-0 opacity-70',
+        menu: 'min-w-52 space-y-1 rounded-xl p-1',
+        menuLabel: 'px-3 pt-2 pb-1 text-xs font-semibold tracking-[0.14em] text-on-surface-variant uppercase',
+        item: [
+            'flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors',
+            'focus-visible:ring-primary/40 focus-visible:outline-none focus-visible:ring-2'
+        ],
+        itemIdle: 'text-on-surface hover:bg-surface-container-high',
+        itemCurrent: 'bg-primary/10 text-primary',
+        itemLeading: 'flex min-w-0 items-start gap-2.5',
+        itemText: 'min-w-0 space-y-0.5',
+        itemLabel: 'truncate font-medium',
+        itemDescription: 'text-xs text-on-surface-variant',
+        itemCode: 'shrink-0 rounded-md bg-surface-container px-1.5 py-0.5 text-[11px] font-medium text-on-surface-variant uppercase',
+        itemIndicator: 'shrink-0 text-primary'
+    },
+    variants: {},
+    defaultVariants: {}
+});
+export const localeButtonDefaults = {
+    defaultVariants: {
+        ...localeButtonVariants.defaultVariants,
+        color: 'surface',
+        variant: 'outline',
+        size: 'md'
+    },
+    slots: {}
+};

package/dist/Modal/Modal.svelte

@@ -1,111 +1,57 @@
-<script lang="ts" module>
-    import type { ModalProps } from './modal.types.js'
-
-    export type Props = ModalProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Dialog } from 'bits-ui'
-    import Button from '../Button/Button.svelte'
-    import { getComponentConfig } from '../config.js'
-    import { modalDefaults, modalVariants } from './modal.variants.js'
-
-    const config = getComponentConfig('modal', modalDefaults)
-
-    let {
-        open = $bindable(false),
-        onOpenChange,
-        onOpenChangeComplete,
-        trapFocus = true,
-        preventScroll = true,
-        onOpenAutoFocus,
-        onCloseAutoFocus,
-        onEscapeKeydown,
-        onInteractOutside,
-        forceMount,
-        restoreScrollDelay,
-        title,
-        description,
-        overlay: showOverlay = config.defaultVariants.overlay ?? true,
-        scrollable = config.defaultVariants.scrollable ?? false,
-        transition = config.defaultVariants.transition ?? 'scale',
-        size = config.defaultVariants.size ?? 'md',
-        fullscreen = false,
-        portal = true,
-        close: closeProp = true,
-        dismissible = true,
-        ui,
-        class: className,
-        children,
-        content: contentSlot,
-        header: headerSlot,
-        titleSlot,
-        descriptionSlot,
-        actions: actionsSlot,
-        body: bodySlot,
-        footer: footerSlot,
-        closeSlot
-    }: Props = $props()
-
-    const resolvedSize = $derived(fullscreen ? 'full' : size)
-    const resolvedTransition = $derived(
-        transition === false ? 'none' : transition === true ? 'scale' : transition
-    )
-
-    const showClose = $derived(!!closeProp)
-    const closeProps = $derived(typeof closeProp === 'object' ? closeProp : {})
-
-    const hasTitle = $derived(!!title || !!titleSlot)
-    const hasDescription = $derived(!!description || !!descriptionSlot)
-    const hasHeading = $derived(hasTitle || hasDescription)
-    const hasHeader = $derived(
-        !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
-    )
-
-    const variantSlots = $derived(
-        modalVariants({
-            transition: resolvedTransition,
-            size: resolvedSize,
-            overlay: showOverlay,
-            scrollable
-        })
-    )
-
-    const classes = $derived({
-        overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
-        header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
-        wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-        title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
-        description: variantSlots.description({
-            class: [config.slots.description, ui?.description]
-        }),
-        actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
-        body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
-        footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
-        close: variantSlots.close({ class: [config.slots.close, ui?.close] })
-    })
-
-    const contentProps = $derived.by(() => {
-        const behavior = dismissible ? ('close' as const) : ('ignore' as const)
-        return {
-            trapFocus,
-            preventScroll,
-            escapeKeydownBehavior: behavior,
-            interactOutsideBehavior: behavior,
-            onOpenAutoFocus,
-            onCloseAutoFocus,
-            onEscapeKeydown,
-            onInteractOutside,
-            forceMount,
-            restoreScrollDelay
-        }
-    })
-
-    function handleOpenChange(value: boolean) {
-        open = value
-        onOpenChange?.(value)
-    }
+<script lang="ts">import { Dialog } from "bits-ui";
+import Button from "../Button/Button.svelte";
+import { getComponentConfig } from "../config.js";
+import { modalDefaults, modalVariants } from "./modal.variants.js";
+const config = getComponentConfig("modal", modalDefaults);
+let { open = $bindable(false), onOpenChange, onOpenChangeComplete, trapFocus = true, preventScroll = true, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeydown, onInteractOutside, forceMount, restoreScrollDelay, title, description, overlay: showOverlay = config.defaultVariants.overlay ?? true, scrollable = config.defaultVariants.scrollable ?? false, transition = config.defaultVariants.transition ?? "scale", size = config.defaultVariants.size ?? "md", fullscreen = false, portal = true, close: closeProp = true, dismissible = true, ui, class: className, children, content: contentSlot, header: headerSlot, titleSlot, descriptionSlot, actions: actionsSlot, body: bodySlot, footer: footerSlot, closeSlot } = $props();
+const resolvedSize = $derived(fullscreen ? "full" : size);
+const resolvedTransition = $derived(transition === false ? "none" : transition === true ? "scale" : transition);
+const showClose = $derived(!!closeProp);
+const closeProps = $derived(typeof closeProp === "object" ? closeProp : {});
+const hasTitle = $derived(!!title || !!titleSlot);
+const hasDescription = $derived(!!description || !!descriptionSlot);
+const hasHeading = $derived(hasTitle || hasDescription);
+const hasHeader = $derived(!!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot);
+const variantSlots = $derived(modalVariants({
+	transition: resolvedTransition,
+	size: resolvedSize,
+	overlay: showOverlay,
+	scrollable
+}));
+const classes = $derived({
+	overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
+	content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+	header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
+	wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+	title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
+	description: variantSlots.description({ class: [config.slots.description, ui?.description] }),
+	actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
+	body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
+	footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
+	close: variantSlots.close({ class: [config.slots.close, ui?.close] })
+});
+const contentProps = $derived.by(() => {
+	const behavior = dismissible ? "close" : "ignore";
+	return {
+		trapFocus,
+		preventScroll,
+		escapeKeydownBehavior: behavior,
+		interactOutsideBehavior: behavior,
+		onOpenAutoFocus,
+		onCloseAutoFocus,
+		onEscapeKeydown,
+		onInteractOutside,
+		forceMount,
+		restoreScrollDelay
+	};
+});
+function handleOpenChange(value) {
+	open = value;
+	onOpenChange?.(value);
+}
 </script>
 
 {#snippet titleEl()}

package/dist/Modal/ModalTriggerTestWrapper.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">
-    import Modal from './Modal.svelte'
+<script lang="ts">import Modal from "./Modal.svelte";
 </script>
 
 <Modal title="Trigger test" description="D">