sv5ui-plus 4.0.0

package/dist/components/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/components/LocaleButton/index.js

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

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

@@ -0,0 +1,208 @@
+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 { ButtonProps } from 'sv5ui';
+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 & {
+    /**
+     * Bind a reference to the underlying trigger HTMLButtonElement.
+     */
+    ref?: HTMLButtonElement | null;
+    /**
+     * 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<ButtonProps['variant']>;
+    /**
+     * Sets the color scheme of the trigger button.
+     * @default 'surface'
+     */
+    color?: NonNullable<ButtonProps['color']>;
+    /**
+     * Controls the trigger button size.
+     * @default 'md'
+     */
+    size?: NonNullable<ButtonProps['size']>;
+    /**
+     * Shrinks the dropdown menu width to fit its content (`w-fit min-w-0`).
+     * @default false
+     */
+    fit?: boolean;
+    /**
+     * 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;
+    }]>;
+    /**
+     * Render custom content for each locale item in the menu.
+     */
+    item?: Snippet<[
+        {
+            item: LocaleButtonLocale;
+            current: boolean;
+            disabled: boolean;
+            close: () => void;
+        }
+    ]>;
+    /**
+     * Render a custom menu layout entirely.
+     */
+    menu?: Snippet<[{
+        close: () => void;
+    }]>;
+    /**
+     * 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/components/LocaleButton/locale-button.types.js

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

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

@@ -0,0 +1,245 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { ButtonProps } from 'sv5ui';
+export declare const localeButtonVariants: import("tailwind-variants").TVReturnType<{
+    fit: {
+        true: {
+            menu: string;
+        };
+        false: {
+            menu: string;
+        };
+    };
+    size: {
+        xs: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        sm: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        md: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        lg: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        xl: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+    };
+}, {
+    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, {
+    fit: {
+        true: {
+            menu: string;
+        };
+        false: {
+            menu: string;
+        };
+    };
+    size: {
+        xs: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        sm: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        md: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        lg: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        xl: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+    };
+}, {
+    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").TVReturnTypeLike<{
+    fit: {
+        true: {
+            menu: string;
+        };
+        false: {
+            menu: string;
+        };
+    };
+    size: {
+        xs: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        sm: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        md: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        lg: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+        xl: {
+            triggerIcon: string;
+            triggerChevron: string;
+            menuLabel: string;
+            item: string;
+            itemLabel: string;
+            itemDescription: string;
+            itemCode: string;
+            itemIndicator: string;
+        };
+    };
+}, {
+    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;
+}>>;
+export type LocaleButtonVariantProps = VariantProps<typeof localeButtonVariants>;
+export type LocaleButtonSlots = keyof ReturnType<typeof localeButtonVariants>;
+export declare const localeButtonDefaults: {
+    defaultVariants: {
+        color: NonNullable<ButtonProps["color"]>;
+        variant: NonNullable<ButtonProps["variant"]>;
+        size: NonNullable<ButtonProps["size"]>;
+        fit?: boolean | undefined;
+    };
+    slots: Partial<Record<LocaleButtonSlots, string>>;
+};

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

@@ -0,0 +1,98 @@
+import { tv } from 'tailwind-variants';
+export const localeButtonVariants = tv({
+    slots: {
+        base: '',
+        triggerLabel: 'truncate',
+        triggerIcon: 'shrink-0',
+        triggerChevron: 'shrink-0 opacity-70',
+        menu: 'space-y-1 rounded-xl p-1',
+        menuLabel: 'font-semibold tracking-[0.14em] text-on-surface-variant uppercase',
+        item: [
+            'flex w-full items-center justify-between text-left 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',
+        itemText: 'min-w-0 space-y-0.5',
+        itemLabel: 'truncate font-medium',
+        itemDescription: 'text-on-surface-variant',
+        itemCode: 'shrink-0 rounded-md bg-surface-container font-medium text-on-surface-variant uppercase',
+        itemIndicator: 'shrink-0 text-primary'
+    },
+    variants: {
+        fit: {
+            true: {
+                menu: 'w-fit min-w-0'
+            },
+            false: {
+                menu: 'min-w-52'
+            }
+        },
+        size: {
+            xs: {
+                triggerIcon: 'size-3.5',
+                triggerChevron: 'size-3.5',
+                menuLabel: 'px-2 pt-1.5 pb-0.5 text-[10px]',
+                item: 'px-2 py-1 text-xs gap-1.5 rounded-md',
+                itemLabel: 'text-xs',
+                itemDescription: 'text-[10px]',
+                itemCode: 'px-1 py-0.5 text-[9px]',
+                itemIndicator: 'size-3'
+            },
+            sm: {
+                triggerIcon: 'size-4',
+                triggerChevron: 'size-4',
+                menuLabel: 'px-2.5 pt-2 pb-0.5 text-[11px]',
+                item: 'px-2.5 py-1.5 text-xs gap-2 rounded-md',
+                itemLabel: 'text-xs',
+                itemDescription: 'text-[11px]',
+                itemCode: 'px-1 py-0.5 text-[10px]',
+                itemIndicator: 'size-3.5'
+            },
+            md: {
+                triggerIcon: 'size-5',
+                triggerChevron: 'size-5',
+                menuLabel: 'px-3 pt-2 pb-1 text-xs',
+                item: 'px-3 py-2 text-sm gap-3 rounded-lg',
+                itemLabel: 'text-sm',
+                itemDescription: 'text-xs',
+                itemCode: 'px-1.5 py-0.5 text-[11px]',
+                itemIndicator: 'size-4'
+            },
+            lg: {
+                triggerIcon: 'size-5',
+                triggerChevron: 'size-5',
+                menuLabel: 'px-3.5 pt-2.5 pb-1 text-sm',
+                item: 'px-3.5 py-2.5 text-base gap-3.5 rounded-lg',
+                itemLabel: 'text-base',
+                itemDescription: 'text-xs',
+                itemCode: 'px-2 py-0.5 text-xs',
+                itemIndicator: 'size-5'
+            },
+            xl: {
+                triggerIcon: 'size-6',
+                triggerChevron: 'size-6',
+                menuLabel: 'px-4 pt-3 pb-1 text-sm',
+                item: 'px-4 py-3 text-lg gap-4 rounded-xl',
+                itemLabel: 'text-lg',
+                itemDescription: 'text-sm',
+                itemCode: 'px-2 py-1 text-sm',
+                itemIndicator: 'size-6'
+            }
+        }
+    },
+    defaultVariants: {
+        fit: false,
+        size: 'md'
+    }
+});
+export const localeButtonDefaults = {
+    defaultVariants: {
+        ...localeButtonVariants.defaultVariants,
+        color: 'surface',
+        variant: 'outline',
+        size: 'md'
+    },
+    slots: {}
+};

package/dist/components/Marquee/Marquee.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { marqueeVariants } from "./marquee.variants.js";
+let { direction = "left", pauseOnHover = false, duration = "40s", gap = "1rem", repeat = 2, class: className, children, ...restProps } = $props();
+let styles = $derived(marqueeVariants({
+	direction,
+	pauseOnHover
+}));
+</script>
+
+<div 
+    class={twMerge(styles.root() as string, className)} 
+    style:--gap={gap}
+    style:--duration={duration}
+    {...restProps}
+>
+    {#each Array(Math.max(2, repeat)) as _}
+        <div class={styles.content() as string}>
+            {@render children?.()}
+        </div>
+    {/each}
+</div>
+
+<style>
+    /* Injected keyframes for marquee animation since it might not be in tailwind config */
+    :global(.animate-marquee) {
+        animation: marquee var(--duration) linear infinite;
+    }
+    
+    :global(.animate-marquee-vertical) {
+        animation: marquee-vertical var(--duration) linear infinite;
+    }
+
+    @keyframes marquee {
+        0% {
+            transform: translateX(0);
+        }
+        100% {
+            transform: translateX(calc(-100% - var(--gap)));
+        }
+    }
+
+    @keyframes marquee-vertical {
+        0% {
+            transform: translateY(0);
+        }
+        100% {
+            transform: translateY(calc(-100% - var(--gap)));
+        }
+    }
+</style>

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

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

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

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

package/dist/components/Marquee/index.js

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

package/dist/components/Marquee/marquee.types.d.ts

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MarqueeVariantProps } from './marquee.variants.js';
+export interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Direction of the marquee animation.
+     * @default 'left'
+     */
+    direction?: MarqueeVariantProps['direction'];
+    /**
+     * Whether to pause the animation when hovered.
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Duration of the animation loop (e.g. '20s', '40s').
+     * @default '40s'
+     */
+    duration?: string;
+    /**
+     * Gap between items.
+     * @default '1rem'
+     */
+    gap?: string;
+    /**
+     * How many times to repeat the content. To ensure smooth looping, it should be at least 2.
+     * @default 2
+     */
+    repeat?: number;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * The content to scroll.
+     */
+    children?: Snippet;
+}

package/dist/components/Marquee/marquee.types.js

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