svelora 2.1.0

package/dist/Accordion/accordion.variants.js

@@ -0,0 +1,28 @@
+import { tv } from 'tailwind-variants';
+export const accordionVariants = tv({
+    slots: {
+        root: 'w-full',
+        item: 'border-b border-outline-variant last:border-b-0',
+        header: 'flex',
+        trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary min-w-0',
+        content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
+        body: 'text-sm pb-3.5',
+        leadingIcon: 'shrink-0 size-5',
+        trailingIcon: 'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
+        label: 'text-start break-words'
+    },
+    variants: {
+        disabled: {
+            true: {
+                trigger: 'cursor-not-allowed opacity-75'
+            }
+        }
+    },
+    defaultVariants: {
+        disabled: false
+    }
+});
+export const accordionDefaults = {
+    defaultVariants: accordionVariants.defaultVariants,
+    slots: {}
+};

package/dist/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion.svelte';
+export type { AccordionItem, AccordionProps } from './accordion.types.js';

package/dist/Accordion/index.js

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

package/dist/Alert/Alert.svelte

@@ -0,0 +1,131 @@
+<script lang="ts" module>
+    import type { AlertProps } from './alert.types.js'
+
+    export type Props = AlertProps
+</script>
+
+<script lang="ts">
+    import Avatar from '../Avatar/Avatar.svelte'
+    import Button from '../Button/Button.svelte'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import { alertDefaults, alertVariants } from './alert.variants.js'
+
+    const config = getComponentConfig('alert', alertDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
+
+    let {
+        ref = $bindable(null),
+        as = 'div',
+        ui,
+        title,
+        description,
+        icon,
+        avatar,
+        color = config.defaultVariants.color,
+        variant = config.defaultVariants.variant,
+        orientation = config.defaultVariants.orientation,
+        open = $bindable(true),
+        close = false,
+        closeIcon,
+        actions,
+        class: className,
+        leading,
+        titleSlot,
+        descriptionSlot,
+        actionsSlot,
+        closeSlot,
+        onClose,
+        ...restProps
+    }: Props = $props()
+
+    const resolvedCloseIcon = $derived(closeIcon ?? icons.close)
+
+    const classes = $derived.by(() => {
+        const slots = alertVariants({ variant, color, orientation, title: !!title })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+            title: slots.title({ class: [config.slots.title, ui?.title] }),
+            description: slots.description({ class: [config.slots.description, ui?.description] }),
+            icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+            avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
+            actions: slots.actions({ class: [config.slots.actions, ui?.actions] }),
+            close: slots.close({ class: [config.slots.close, ui?.close] })
+        }
+    })
+
+    const closeButtonProps = $derived(!close ? null : close === true ? {} : close)
+
+    const isVertical = $derived(orientation === 'vertical')
+    const hasActions = $derived(!!actionsSlot || (actions && actions.length > 0))
+
+    function handleClose() {
+        open = false
+        onClose?.()
+    }
+</script>
+
+{#snippet actionsContent()}
+    {#if actionsSlot}
+        {@render actionsSlot()}
+    {:else if actions && actions.length > 0}
+        <div class={classes.actions}>
+            {#each actions as action, index (index)}
+                <Button size="xs" {...action} />
+            {/each}
+        </div>
+    {/if}
+{/snippet}
+
+{#if open}
+    <svelte:element this={as} bind:this={ref} class={classes.root} role="alert" {...restProps}>
+        {#if leading}
+            {@render leading()}
+        {:else if icon}
+            <Icon name={icon} class={classes.icon} />
+        {:else if avatar}
+            <Avatar {...avatar} class={classes.avatar} />
+        {/if}
+
+        {#if title || description || titleSlot || descriptionSlot || (isVertical && hasActions)}
+            <div class={classes.wrapper}>
+                {#if titleSlot}
+                    {@render titleSlot()}
+                {:else if title}
+                    <div class={classes.title}>{title}</div>
+                {/if}
+
+                {#if descriptionSlot}
+                    {@render descriptionSlot()}
+                {:else if description}
+                    <div class={classes.description}>{description}</div>
+                {/if}
+
+                {#if isVertical}
+                    {@render actionsContent()}
+                {/if}
+            </div>
+        {/if}
+
+        {#if !isVertical}
+            {@render actionsContent()}
+        {/if}
+
+        {#if closeSlot}
+            <div class={classes.close}>
+                {@render closeSlot()}
+            </div>
+        {:else if closeButtonProps}
+            <Button
+                {...closeButtonProps}
+                icon={closeButtonProps.icon ?? resolvedCloseIcon}
+                variant={closeButtonProps.variant ?? 'link'}
+                color={closeButtonProps.color ?? 'surface'}
+                class={classes.close}
+                onclick={handleClose}
+                aria-label={closeButtonProps['aria-label'] ?? 'Close alert'}
+            />
+        {/if}
+    </svelte:element>
+{/if}

package/dist/Alert/Alert.svelte.d.ts

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

package/dist/Alert/alert.types.d.ts

@@ -0,0 +1,103 @@
+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 { ButtonProps } from '../Button/button.types.js';
+import type { AlertSlots, AlertVariantProps } from './alert.variants.js';
+export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The HTML element to render as.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific alert slots.
+     */
+    ui?: Partial<Record<AlertSlots, ClassNameValue>>;
+    /**
+     * Alert title text.
+     */
+    title?: string;
+    /**
+     * Alert description text.
+     */
+    description?: string;
+    /**
+     * Icon name to display (Iconify format).
+     * Takes precedence over avatar.
+     */
+    icon?: string;
+    /**
+     * Avatar props to display on the left side.
+     * Only rendered if icon is not provided.
+     */
+    avatar?: AvatarProps;
+    /**
+     * The color theme of the alert.
+     * @default 'primary'
+     */
+    color?: NonNullable<AlertVariantProps['color']>;
+    /**
+     * The visual style variant.
+     * @default 'solid'
+     */
+    variant?: NonNullable<AlertVariantProps['variant']>;
+    /**
+     * Layout orientation.
+     * @default 'horizontal'
+     */
+    orientation?: NonNullable<AlertVariantProps['orientation']>;
+    /**
+     * Whether the alert is visible.
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * Show close button.
+     * Pass ButtonProps to customize.
+     * @default false
+     */
+    close?: boolean | ButtonProps;
+    /**
+     * Close button icon name.
+     * @default 'lucide:x'
+     */
+    closeIcon?: string;
+    /**
+     * Action buttons configuration.
+     */
+    actions?: ButtonProps[];
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom leading content slot.
+     * Replaces icon/avatar when provided.
+     */
+    leading?: Snippet;
+    /**
+     * Custom title content slot.
+     */
+    titleSlot?: Snippet;
+    /**
+     * Custom description content slot.
+     */
+    descriptionSlot?: Snippet;
+    /**
+     * Custom actions content slot.
+     */
+    actionsSlot?: Snippet;
+    /**
+     * Custom close button content slot.
+     */
+    closeSlot?: Snippet;
+    /**
+     * Callback when close button is clicked.
+     */
+    onClose?: () => void;
+};

package/dist/Alert/alert.types.js

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

package/dist/Alert/alert.variants.d.ts

@@ -0,0 +1,213 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const alertVariants: 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;
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+    title: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    actions: string;
+    close: 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;
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+    title: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    actions: string;
+    close: 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;
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+    title: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    actions: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AlertVariantProps = VariantProps<typeof alertVariants>;
+export type AlertSlots = keyof ReturnType<typeof alertVariants>;
+export declare const alertDefaults: {
+    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;
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                actions: string;
+            };
+            vertical: {
+                root: string;
+                actions: string;
+            };
+        };
+        title: {
+            true: {
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        title: string;
+        description: string;
+        icon: string;
+        avatar: string;
+        actions: string;
+        close: 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;
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                actions: string;
+            };
+            vertical: {
+                root: string;
+                actions: string;
+            };
+        };
+        title: {
+            true: {
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        title: string;
+        description: string;
+        icon: string;
+        avatar: string;
+        actions: string;
+        close: string;
+    }>;
+    slots: Partial<Record<AlertSlots, string>>;
+};