svelora 2.1.0

package/dist/Toast/toast.js

@@ -0,0 +1,73 @@
+import { mount, unmount } from 'svelte';
+import { toast as sonnerToast } from 'svelte-sonner';
+import Avatar from '../Avatar/Avatar.svelte';
+import Icon from '../Icon/Icon.svelte';
+function createIconComponent(name) {
+    function SvelteSonnerIcon(anchor) {
+        if (!anchor.parentNode)
+            return { destroy() { } };
+        const instance = mount(Icon, {
+            target: anchor.parentNode,
+            anchor,
+            props: { name, size: '18' }
+        });
+        return {
+            destroy() {
+                unmount(instance);
+            }
+        };
+    }
+    return SvelteSonnerIcon;
+}
+function createAvatarComponent(props) {
+    function SvelteSonnerAvatar(anchor) {
+        if (!anchor.parentNode)
+            return { destroy() { } };
+        const instance = mount(Avatar, {
+            target: anchor.parentNode,
+            anchor,
+            props: { size: 'sm', ...props }
+        });
+        return {
+            destroy() {
+                unmount(instance);
+            }
+        };
+    }
+    return SvelteSonnerAvatar;
+}
+function resolveOptions(data) {
+    if (!data)
+        return data;
+    const { color, icon, avatar, ...rest } = data;
+    const resolved = { ...rest };
+    // Color -> class
+    if (color) {
+        const existing = resolved.class ?? '';
+        resolved.class = `${existing} ps-color-${color}`.trim();
+    }
+    // Avatar takes priority over icon
+    if (avatar) {
+        resolved.icon = createAvatarComponent(avatar);
+    }
+    else if (typeof icon === 'string') {
+        resolved.icon = createIconComponent(icon);
+    }
+    else if (icon !== undefined) {
+        resolved.icon = icon;
+    }
+    return resolved;
+}
+function toastFn(message, data) {
+    return sonnerToast(message, resolveOptions(data));
+}
+toastFn.success = (message, data) => sonnerToast.success(message, resolveOptions(data));
+toastFn.error = (message, data) => sonnerToast.error(message, resolveOptions(data));
+toastFn.warning = (message, data) => sonnerToast.warning(message, resolveOptions(data));
+toastFn.info = (message, data) => sonnerToast.info(message, resolveOptions(data));
+toastFn.loading = (message, data) => sonnerToast.loading(message, resolveOptions(data));
+toastFn.promise = sonnerToast.promise;
+toastFn.dismiss = sonnerToast.dismiss;
+toastFn.custom = sonnerToast.custom;
+toastFn.message = sonnerToast.message;
+export { toastFn as toast };

package/dist/Toast/toast.types.d.ts

@@ -0,0 +1,19 @@
+import type { ToasterProps as SonnerToasterProps } from 'svelte-sonner';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { ToastVariant } from './toast.variants.js';
+export type ToasterProps = Omit<SonnerToasterProps, 'class' | 'toastOptions' | 'richColors'> & {
+    /**
+     * The visual style variant.
+     * - `outline`: Border with surface background, semantic border accent per type (default)
+     * - `soft`: Light tinted background per type
+     * - `subtle`: Light tinted background + semantic border per type
+     * - `solid`: Full semantic color background per type
+     * - `accent`: Left color stripe with surface background
+     * @default 'outline'
+     */
+    variant?: ToastVariant;
+    /**
+     * Additional CSS classes for the toaster container.
+     */
+    class?: ClassNameValue;
+};

package/dist/Toast/toast.types.js

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

package/dist/Toast/toast.variants.d.ts

@@ -0,0 +1,7 @@
+export type ToastVariant = 'solid' | 'outline' | 'soft' | 'subtle' | 'accent';
+export type ToastColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info';
+export declare const toastDefaults: {
+    defaultVariants: {
+        variant: ToastVariant;
+    };
+};

package/dist/Toast/toast.variants.js

@@ -0,0 +1,5 @@
+export const toastDefaults = {
+    defaultVariants: {
+        variant: 'outline'
+    }
+};

package/dist/Tooltip/Tooltip.svelte

@@ -0,0 +1,151 @@
+<script lang="ts" module>
+    import type { TooltipProps } from './tooltip.types.js'
+
+    export type Props = TooltipProps
+</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>
+
+{#snippet tooltipContent()}
+    {#if contentSlot}
+        {@render contentSlot()}
+    {:else}
+        {#if hasText}
+            <span class={classes.text}>{text}</span>
+        {/if}
+
+        {#if hasKbds}
+            <span class={classes.kbds}>
+                {#each kbds as kbd, index (index)}
+                    {#if index > 0}
+                        <span class="mx-0.5 text-inverse-on-surface/60">·</span>
+                    {/if}
+                    {#if typeof kbd === 'string'}
+                        <Kbd value={kbd} size={kbdsSize} variant="soft" color="surface" />
+                    {:else}
+                        <Kbd size={kbdsSize} variant="soft" color="surface" {...kbd} />
+                    {/if}
+                {/each}
+            </span>
+        {/if}
+    {/if}
+{/snippet}
+
+{#snippet tooltipContentEl()}
+    <Tooltip.Content
+        bind:ref
+        {side}
+        {sideOffset}
+        {align}
+        {alignOffset}
+        {avoidCollisions}
+        {collisionBoundary}
+        {collisionPadding}
+        {sticky}
+        {hideWhenDetached}
+        {onEscapeKeydown}
+        {forceMount}
+        class={classes.content}
+        {...restProps}
+    >
+        {@render tooltipContent()}
+
+        {#if arrow}
+            <Tooltip.Arrow
+                width={arrowProps.width}
+                height={arrowProps.height}
+                class={classes.arrow}
+            />
+        {/if}
+    </Tooltip.Content>
+{/snippet}
+
+<Tooltip.Provider {delayDuration} {disableHoverableContent}>
+    <Tooltip.Root
+        bind:open
+        {onOpenChange}
+        {disableCloseOnTriggerClick}
+        {ignoreNonKeyboardFocus}
+        disabled={disabled || !hasContent}
+    >
+        {#if children}
+            <Tooltip.Trigger>
+                {#snippet child({ props })}
+                    <span {...props} class={[className]}>
+                        {@render children({ open })}
+                    </span>
+                {/snippet}
+            </Tooltip.Trigger>
+        {/if}
+
+        {#if portal}
+            <Tooltip.Portal>
+                {@render tooltipContentEl()}
+            </Tooltip.Portal>
+        {:else}
+            {@render tooltipContentEl()}
+        {/if}
+    </Tooltip.Root>
+</Tooltip.Provider>

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

@@ -0,0 +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">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/Tooltip/TooltipTestWrapper.svelte

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

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

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

package/dist/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip.svelte';
+export type { TooltipProps } from './tooltip.types.js';

package/dist/Tooltip/index.js

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

package/dist/Tooltip/tooltip.types.d.ts

@@ -0,0 +1,62 @@
+import type { TooltipArrowPropsWithoutHTML, TooltipContentPropsWithoutHTML, TooltipProviderPropsWithoutHTML, TooltipRootPropsWithoutHTML } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { KbdProps } from '../Kbd/kbd.types.js';
+import type { TooltipSlots, TooltipVariantProps } from './tooltip.variants.js';
+export type TooltipAlign = 'start' | 'center' | 'end';
+type ProviderProps = Pick<TooltipProviderPropsWithoutHTML, 'delayDuration' | 'disableHoverableContent'>;
+type RootProps = Pick<TooltipRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'disableCloseOnTriggerClick' | 'ignoreNonKeyboardFocus' | 'disabled'>;
+type ContentProps = Pick<TooltipContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'onEscapeKeydown' | 'forceMount'>;
+export interface TooltipProps extends ProviderProps, RootProps, ContentProps {
+    /** Custom data attributes are forwarded to the content element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
+    /**
+     * Bindable reference to the content DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The text content of the tooltip.
+     */
+    text?: string;
+    /**
+     * The keyboard keys to display in the tooltip.
+     * Can be an array of key strings or KbdProps objects.
+     * @example ['meta', 'k'] or [{ value: 'meta' }, { value: 'k' }]
+     */
+    kbds?: (string | Pick<KbdProps, 'value' | 'size' | 'variant' | 'color'>)[];
+    /**
+     * Display an arrow alongside the tooltip.
+     * Can be a boolean or arrow props for customization.
+     * @default false
+     */
+    arrow?: boolean | Pick<TooltipArrowPropsWithoutHTML, 'width' | 'height'>;
+    /**
+     * Animate the tooltip on open and close.
+     * @default true
+     */
+    transition?: TooltipVariantProps['transition'];
+    /**
+     * Render the tooltip in a portal.
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Additional CSS class for the trigger wrapper.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override classes for tooltip slots.
+     */
+    ui?: Partial<Record<TooltipSlots, ClassNameValue>>;
+    /**
+     * Trigger content (the element that triggers the tooltip).
+     */
+    children?: Snippet<[{
+        open: boolean;
+    }]>;
+    /**
+     * Custom tooltip content.
+     */
+    content?: Snippet;
+}
+export {};

package/dist/Tooltip/tooltip.types.js

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

package/dist/Tooltip/tooltip.variants.d.ts

@@ -0,0 +1,68 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const tooltipVariants: import("tailwind-variants").TVReturnType<{
+    transition: {
+        true: {
+            content: string[];
+        };
+    };
+}, {
+    content: string[];
+    arrow: string;
+    text: string;
+    kbds: string;
+    kbdsSize: string;
+}, undefined, {
+    transition: {
+        true: {
+            content: string[];
+        };
+    };
+}, {
+    content: string[];
+    arrow: string;
+    text: string;
+    kbds: string;
+    kbdsSize: string;
+}, import("tailwind-variants").TVReturnType<{
+    transition: {
+        true: {
+            content: string[];
+        };
+    };
+}, {
+    content: string[];
+    arrow: string;
+    text: string;
+    kbds: string;
+    kbdsSize: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TooltipVariantProps = VariantProps<typeof tooltipVariants>;
+export type TooltipSlots = keyof ReturnType<typeof tooltipVariants>;
+export declare const tooltipDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        transition: {
+            true: {
+                content: string[];
+            };
+        };
+    }, {
+        content: string[];
+        arrow: string;
+        text: string;
+        kbds: string;
+        kbdsSize: string;
+    }, {
+        transition: {
+            true: {
+                content: string[];
+            };
+        };
+    }, {
+        content: string[];
+        arrow: string;
+        text: string;
+        kbds: string;
+        kbdsSize: string;
+    }>;
+    slots: Partial<Record<TooltipSlots, string>>;
+};

package/dist/Tooltip/tooltip.variants.js

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+export const tooltipVariants = tv({
+    slots: {
+        content: [
+            'z-50 flex items-center gap-1.5',
+            'bg-inverse-surface text-inverse-on-surface',
+            'shadow-sm rounded-md',
+            'px-2.5 py-1.5 text-xs',
+            'select-none pointer-events-auto'
+        ],
+        arrow: 'fill-inverse-surface text-inverse-surface',
+        text: 'truncate',
+        kbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
+        kbdsSize: 'sm'
+    },
+    variants: {
+        transition: {
+            true: {
+                content: [
+                    'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',
+                    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+                    'data-[side=top]:slide-in-from-bottom-2 data-[side=right]:slide-in-from-left-2',
+                    'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2'
+                ]
+            }
+        }
+    },
+    defaultVariants: {
+        transition: true
+    }
+});
+export const tooltipDefaults = {
+    defaultVariants: tooltipVariants.defaultVariants,
+    slots: {}
+};

package/dist/User/User.svelte

@@ -0,0 +1,98 @@
+<script lang="ts" module>
+    import type { UserProps } from './user.types.js'
+
+    export type Props = UserProps
+</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>
+
+{#snippet userContent()}
+    {#if avatarSlot}
+        {@render avatarSlot()}
+    {:else if mergedAvatarProps}
+        {#if chipProps}
+            <Chip {size} inset {...chipProps}>
+                <Avatar {...mergedAvatarProps} class={classes.avatar} />
+            </Chip>
+        {:else}
+            <Avatar {...mergedAvatarProps} class={classes.avatar} />
+        {/if}
+    {/if}
+
+    {#if name || description || nameSlot || descriptionSlot}
+        <div class={classes.wrapper}>
+            {#if nameSlot}
+                {@render nameSlot()}
+            {:else if name}
+                <p class={classes.name}>{name}</p>
+            {/if}
+
+            {#if descriptionSlot}
+                {@render descriptionSlot()}
+            {:else if description}
+                <p class={classes.description}>{description}</p>
+            {/if}
+        </div>
+    {/if}
+{/snippet}
+
+{#if href}
+    <Link bind:ref {href} raw class={classes.root} data-orientation={orientation} {...restProps}>
+        {@render userContent()}
+    </Link>
+{:else}
+    <svelte:element
+        this={as}
+        bind:this={ref}
+        class={classes.root}
+        data-orientation={orientation}
+        {...restProps}
+    >
+        {@render userContent()}
+    </svelte:element>
+{/if}

package/dist/User/User.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { UserProps } from './user.types.js';
+export type Props = UserProps;
+declare const User: import("svelte").Component<UserProps, {}, "ref">;
+type User = ReturnType<typeof User>;
+export default User;

package/dist/User/index.d.ts

@@ -0,0 +1,2 @@
+export { default as User } from './User.svelte';
+export type { UserProps } from './user.types.js';

package/dist/User/index.js

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

package/dist/User/user.types.d.ts

@@ -0,0 +1,78 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { AvatarProps } from '../Avatar/avatar.types.js';
+import type { ChipProps } from '../Chip/chip.types.js';
+import type { LinkProps } from '../Link/link.types.js';
+import type { UserSlots, UserVariantProps } from './user.variants.js';
+export type UserProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Sets the HTML element type to render.
+     * Ignored when `href` is provided.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific user slots.
+     * Available slots: root, wrapper, name, description, avatar.
+     */
+    ui?: Partial<Record<UserSlots, ClassNameValue>>;
+    /**
+     * Sets the display name rendered as primary text.
+     */
+    name?: string;
+    /**
+     * Sets the secondary text displayed below the name.
+     */
+    description?: string;
+    /**
+     * Configures the avatar displayed on the leading side.
+     * Passed directly to the Avatar component.
+     */
+    avatar?: AvatarProps;
+    /**
+     * Configures a status chip wrapping the avatar.
+     * Pass `true` for default chip or `ChipProps` to customize.
+     * @default false
+     */
+    chip?: boolean | ChipProps;
+    /**
+     * Controls the size of the component.
+     * Affects text sizes and avatar size mapping.
+     * @default 'md'
+     */
+    size?: NonNullable<UserVariantProps['size']>;
+    /**
+     * Sets the layout orientation.
+     * @default 'horizontal'
+     */
+    orientation?: NonNullable<UserVariantProps['orientation']>;
+    /**
+     * Sets the destination URL.
+     * Renders the component as an anchor via Link when provided.
+     */
+    href?: LinkProps['href'];
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom avatar content slot.
+     * Takes precedence over `avatar` prop.
+     */
+    avatarSlot?: Snippet;
+    /**
+     * Custom name content slot.
+     * Takes precedence over `name` prop.
+     */
+    nameSlot?: Snippet;
+    /**
+     * Custom description content slot.
+     * Takes precedence over `description` prop.
+     */
+    descriptionSlot?: Snippet;
+};

package/dist/User/user.types.js

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