svelora 2.1.0

package/dist/Badge/badge.variants.d.ts

@@ -0,0 +1,303 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        sm: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        xl: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+    };
+    square: {
+        true: string;
+    };
+}, {
+    base: string;
+    label: string;
+    leadingIcon: string;
+    leadingAvatar: string;
+    leadingAvatarSize: string;
+    trailingIcon: string;
+}, undefined, {
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        sm: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        xl: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+    };
+    square: {
+        true: string;
+    };
+}, {
+    base: string;
+    label: string;
+    leadingIcon: string;
+    leadingAvatar: string;
+    leadingAvatarSize: string;
+    trailingIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        sm: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        xl: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+    };
+    square: {
+        true: string;
+    };
+}, {
+    base: string;
+    label: string;
+    leadingIcon: string;
+    leadingAvatar: string;
+    leadingAvatarSize: string;
+    trailingIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BadgeVariantProps = VariantProps<typeof badgeVariants>;
+export type BadgeSlots = keyof ReturnType<typeof badgeVariants>;
+export declare const badgeDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+        };
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            xs: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            sm: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            md: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            lg: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            xl: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+        };
+        square: {
+            true: string;
+        };
+    }, {
+        base: string;
+        label: string;
+        leadingIcon: string;
+        leadingAvatar: string;
+        leadingAvatarSize: string;
+        trailingIcon: string;
+    }, {
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+        };
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            xs: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            sm: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            md: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            lg: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            xl: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+        };
+        square: {
+            true: string;
+        };
+    }, {
+        base: string;
+        label: string;
+        leadingIcon: string;
+        leadingAvatar: string;
+        leadingAvatarSize: string;
+        trailingIcon: string;
+    }>;
+    slots: Partial<Record<BadgeSlots, string>>;
+};

package/dist/Badge/badge.variants.js

@@ -0,0 +1,259 @@
+import { tv } from 'tailwind-variants';
+export const badgeVariants = tv({
+    slots: {
+        base: 'font-medium inline-flex items-center',
+        label: 'truncate',
+        leadingIcon: 'shrink-0',
+        leadingAvatar: 'shrink-0',
+        leadingAvatarSize: '',
+        trailingIcon: 'shrink-0'
+    },
+    variants: {
+        variant: {
+            solid: '',
+            outline: '',
+            soft: '',
+            subtle: ''
+        },
+        color: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        size: {
+            xs: {
+                base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm',
+                leadingIcon: 'size-3',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-3'
+            },
+            sm: {
+                base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm',
+                leadingIcon: 'size-3',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-3'
+            },
+            md: {
+                base: 'text-xs px-2 py-1 gap-1 rounded-md',
+                leadingIcon: 'size-4',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-4'
+            },
+            lg: {
+                base: 'text-sm px-2 py-1 gap-1.5 rounded-md',
+                leadingIcon: 'size-5',
+                leadingAvatarSize: '2xs',
+                trailingIcon: 'size-5'
+            },
+            xl: {
+                base: 'text-base px-2.5 py-1 gap-1.5 rounded-md',
+                leadingIcon: 'size-6',
+                leadingAvatarSize: '2xs',
+                trailingIcon: 'size-6'
+            }
+        },
+        square: {
+            true: ''
+        }
+    },
+    compoundVariants: [
+        // ========== SOLID VARIANTS ==========
+        {
+            variant: 'solid',
+            color: 'primary',
+            class: { base: 'bg-primary text-on-primary' }
+        },
+        {
+            variant: 'solid',
+            color: 'secondary',
+            class: { base: 'bg-secondary text-on-secondary' }
+        },
+        {
+            variant: 'solid',
+            color: 'tertiary',
+            class: { base: 'bg-tertiary text-on-tertiary' }
+        },
+        {
+            variant: 'solid',
+            color: 'success',
+            class: { base: 'bg-success text-on-success' }
+        },
+        {
+            variant: 'solid',
+            color: 'warning',
+            class: { base: 'bg-warning text-on-warning' }
+        },
+        {
+            variant: 'solid',
+            color: 'error',
+            class: { base: 'bg-error text-on-error' }
+        },
+        {
+            variant: 'solid',
+            color: 'info',
+            class: { base: 'bg-info text-on-info' }
+        },
+        {
+            variant: 'solid',
+            color: 'surface',
+            class: { base: 'bg-inverse-surface text-inverse-on-surface' }
+        },
+        // ========== OUTLINE VARIANTS ==========
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: { base: 'text-primary ring ring-inset ring-primary/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: { base: 'text-secondary ring ring-inset ring-secondary/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'tertiary',
+            class: { base: 'text-tertiary ring ring-inset ring-tertiary/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: { base: 'text-success ring ring-inset ring-success/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: { base: 'text-warning ring ring-inset ring-warning/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'error',
+            class: { base: 'text-error ring ring-inset ring-error/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: { base: 'text-info ring ring-inset ring-info/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'surface',
+            class: { base: 'text-on-surface-variant ring ring-inset ring-outline-variant' }
+        },
+        // ========== SOFT VARIANTS ==========
+        {
+            variant: 'soft',
+            color: 'primary',
+            class: { base: 'bg-primary-container text-on-primary-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'secondary',
+            class: { base: 'bg-secondary-container text-on-secondary-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'tertiary',
+            class: { base: 'bg-tertiary-container text-on-tertiary-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: { base: 'bg-success-container text-on-success-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: { base: 'bg-warning-container text-on-warning-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'error',
+            class: { base: 'bg-error-container text-on-error-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: { base: 'bg-info-container text-on-info-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'surface',
+            class: { base: 'bg-surface-container-highest text-on-surface' }
+        },
+        // ========== SUBTLE VARIANTS ==========
+        {
+            variant: 'subtle',
+            color: 'primary',
+            class: {
+                base: 'bg-primary-container text-on-primary-container ring ring-inset ring-primary/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'secondary',
+            class: {
+                base: 'bg-secondary-container text-on-secondary-container ring ring-inset ring-secondary/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'tertiary',
+            class: {
+                base: 'bg-tertiary-container text-on-tertiary-container ring ring-inset ring-tertiary/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'success',
+            class: {
+                base: 'bg-success-container text-on-success-container ring ring-inset ring-success/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'warning',
+            class: {
+                base: 'bg-warning-container text-on-warning-container ring ring-inset ring-warning/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'error',
+            class: {
+                base: 'bg-error-container text-on-error-container ring ring-inset ring-error/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'info',
+            class: { base: 'bg-info-container text-on-info-container ring ring-inset ring-info/25' }
+        },
+        {
+            variant: 'subtle',
+            color: 'surface',
+            class: {
+                base: 'bg-surface-container-highest text-on-surface ring ring-inset ring-outline-variant'
+            }
+        },
+        // ========== SQUARE SIZE ADJUSTMENTS ==========
+        { square: true, size: 'xs', class: { base: 'p-0.5' } },
+        { square: true, size: 'sm', class: { base: 'p-1' } },
+        { square: true, size: 'md', class: { base: 'p-1' } },
+        { square: true, size: 'lg', class: { base: 'p-1' } },
+        { square: true, size: 'xl', class: { base: 'p-1' } }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        variant: 'solid',
+        size: 'md'
+    }
+});
+export const badgeDefaults = {
+    defaultVariants: badgeVariants.defaultVariants,
+    slots: {}
+};

package/dist/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.svelte';
+export type { BadgeProps } from './badge.types.js';

package/dist/Badge/index.js

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

package/dist/Banner/Banner.svelte

@@ -0,0 +1,130 @@
+<script lang="ts" module>import type { BannerProps } from './banner.types.js';
+export type Props = BannerProps;
+</script>
+
+<script lang="ts">import { useId } from 'bits-ui';
+import Button from '../Button/Button.svelte';
+import { getComponentConfig, iconsDefaults } from '../config.js';
+import Icon from '../Icon/Icon.svelte';
+import { bannerDefaults, bannerVariants } from './banner.variants.js';
+
+const config = getComponentConfig('banner', bannerDefaults);
+const icons = getComponentConfig('icons', iconsDefaults);
+let { ref = $bindable(null), as = 'div', id, title, icon, color = config.defaultVariants.color, to, target, close = false, closeIcon, actions, open = $bindable(true), onClose, class: className, ui, leading, titleSlot, actionsSlot, closeSlot, ...restProps }: Props = $props();
+const fallbackId = useId('banner-');
+const effectiveId = $derived(id ?? fallbackId);
+let dismissed = $state(false);
+function storageKey(rawId: string) {
+    return `ps-banner-${rawId.replace(/[^\w-]/g, '-')}`;
+}
+$effect(() => {
+    void open;
+    if (!id || typeof window === 'undefined') {
+        dismissed = false;
+        return;
+    }
+    dismissed = localStorage.getItem(storageKey(id)) === '1';
+});
+const visible = $derived(open && !dismissed);
+const isClickable = $derived(!!to);
+const resolvedCloseIcon = $derived(closeIcon ?? icons.close);
+const closeButtonProps = $derived(!close ? null : close === true ? {} : close);
+const classes = $derived.by(() => {
+    const slots = bannerVariants({ color, to: isClickable });
+    const c = config.slots;
+    const u = ui ?? {};
+    return {
+        root: slots.root({ class: [c.root, className, u.root] }),
+        container: slots.container({ class: [c.container, u.container] }),
+        left: slots.left({ class: [c.left, u.left] }),
+        center: slots.center({ class: [c.center, u.center] }),
+        right: slots.right({ class: [c.right, u.right] }),
+        icon: slots.icon({ class: [c.icon, u.icon] }),
+        title: slots.title({ class: [c.title, u.title] }),
+        actions: slots.actions({ class: [c.actions, u.actions] }),
+        close: slots.close({ class: [c.close, u.close] })
+    };
+});
+function handleClose(event: Event | undefined) {
+    event?.stopPropagation();
+    if (id && typeof window !== 'undefined') {
+        localStorage.setItem(storageKey(id), '1');
+    }
+    open = false;
+    onClose?.();
+}
+</script>
+
+{#if visible}
+    <svelte:element
+        this={as}
+        bind:this={ref}
+        class={classes.root}
+        role={isClickable ? undefined : 'region'}
+        aria-label={isClickable || titleSlot ? undefined : title}
+        data-banner-id={effectiveId}
+        {...restProps}
+    >
+        {#if isClickable}
+            <!-- eslint-disable svelte/no-navigation-without-resolve -->
+            <a
+                href={to}
+                {target}
+                class="absolute inset-0 z-0 rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-inset"
+                aria-label={title}
+                data-banner-link
+            ></a>
+            <!-- eslint-enable svelte/no-navigation-without-resolve -->
+        {/if}
+
+        <div class={classes.container}>
+            <div class={classes.left} aria-hidden="true"></div>
+
+            <div class={classes.center}>
+                {#if leading}
+                    {@render leading()}
+                {:else if icon}
+                    <Icon name={icon} class={classes.icon} />
+                {/if}
+
+                {#if titleSlot}
+                    {@render titleSlot()}
+                {:else if title}
+                    <span class={classes.title}>{title}</span>
+                {/if}
+
+                {#if actionsSlot}
+                    {@render actionsSlot()}
+                {:else if actions && actions.length > 0}
+                    <div
+                        class="{classes.actions} relative z-10"
+                        onclick={(e) => e.stopPropagation()}
+                        role="presentation"
+                    >
+                        {#each actions as action, i (i)}
+                            <Button size="xs" variant="ghost" color="surface" {...action} />
+                        {/each}
+                    </div>
+                {/if}
+            </div>
+
+            <div class="{classes.right} relative z-10">
+                {#if closeSlot}
+                    {@render closeSlot()}
+                {:else if closeButtonProps}
+                    <Button
+                        size="xs"
+                        variant="ghost"
+                        color="surface"
+                        square
+                        {...closeButtonProps}
+                        icon={closeButtonProps.icon ?? resolvedCloseIcon}
+                        class={classes.close}
+                        onclick={handleClose}
+                        aria-label={closeButtonProps['aria-label'] ?? 'Dismiss banner'}
+                    />
+                {/if}
+            </div>
+        </div>
+    </svelte:element>
+{/if}

package/dist/Banner/Banner.svelte.d.ts

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