svelora 2.1.0

package/dist/Alert/alert.variants.js

@@ -0,0 +1,293 @@
+import { tv } from 'tailwind-variants';
+export const alertVariants = tv({
+    slots: {
+        root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
+        wrapper: 'min-w-0 flex-1 flex flex-col',
+        title: 'text-sm font-medium',
+        description: 'text-sm opacity-90',
+        icon: 'shrink-0 size-5',
+        avatar: 'shrink-0',
+        actions: 'flex flex-wrap gap-1.5 shrink-0',
+        close: 'p-0'
+    },
+    variants: {
+        variant: {
+            solid: '',
+            outline: '',
+            soft: '',
+            subtle: ''
+        },
+        color: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        orientation: {
+            horizontal: {
+                root: 'items-center',
+                actions: 'items-center'
+            },
+            vertical: {
+                root: 'items-start',
+                actions: 'items-start mt-2.5'
+            }
+        },
+        title: {
+            true: {
+                description: 'mt-1'
+            }
+        }
+    },
+    compoundVariants: [
+        // ========== SOLID VARIANT (button styling) ==========
+        {
+            variant: 'solid',
+            class: {
+                actions: '[&_button]:text-inherit [&_button]:border-current/30 [&_button]:hover:bg-current/10',
+                close: 'text-inherit hover:bg-current/10'
+            }
+        },
+        // ========== SOLID VARIANTS (colors) ==========
+        {
+            variant: 'solid',
+            color: 'primary',
+            class: {
+                root: 'bg-primary text-on-primary'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'secondary',
+            class: {
+                root: 'bg-secondary text-on-secondary'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'success',
+            class: {
+                root: 'bg-success text-on-success'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'warning',
+            class: {
+                root: 'bg-warning text-on-warning'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'error',
+            class: {
+                root: 'bg-error text-on-error'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'info',
+            class: {
+                root: 'bg-info text-on-info'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'tertiary',
+            class: {
+                root: 'bg-tertiary text-on-tertiary'
+            }
+        },
+        {
+            variant: 'solid',
+            color: 'surface',
+            class: {
+                root: 'bg-inverse-surface text-inverse-on-surface'
+            }
+        },
+        // ========== OUTLINE VARIANTS ==========
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: {
+                root: 'text-primary ring ring-inset ring-primary/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: {
+                root: 'text-secondary ring ring-inset ring-secondary/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: {
+                root: 'text-success ring ring-inset ring-success/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: {
+                root: 'text-warning ring ring-inset ring-warning/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'error',
+            class: {
+                root: 'text-error ring ring-inset ring-error/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: {
+                root: 'text-info ring ring-inset ring-info/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'tertiary',
+            class: {
+                root: 'text-tertiary ring ring-inset ring-tertiary/25'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'surface',
+            class: {
+                root: 'text-on-surface-variant ring ring-inset ring-outline-variant'
+            }
+        },
+        // ========== SOFT VARIANTS ==========
+        {
+            variant: 'soft',
+            color: 'primary',
+            class: {
+                root: 'bg-primary/10 text-primary'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'secondary',
+            class: {
+                root: 'bg-secondary/10 text-secondary'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: {
+                root: 'bg-success/10 text-success'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: {
+                root: 'bg-warning/10 text-warning'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'error',
+            class: {
+                root: 'bg-error/10 text-error'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: {
+                root: 'bg-info/10 text-info'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'tertiary',
+            class: {
+                root: 'bg-tertiary/10 text-tertiary'
+            }
+        },
+        {
+            variant: 'soft',
+            color: 'surface',
+            class: {
+                root: 'bg-surface-container-highest text-on-surface'
+            }
+        },
+        // ========== SUBTLE VARIANTS ==========
+        {
+            variant: 'subtle',
+            color: 'primary',
+            class: {
+                root: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'secondary',
+            class: {
+                root: 'bg-secondary/10 text-secondary ring ring-inset ring-secondary/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'success',
+            class: {
+                root: 'bg-success/10 text-success ring ring-inset ring-success/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'warning',
+            class: {
+                root: 'bg-warning/10 text-warning ring ring-inset ring-warning/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'error',
+            class: {
+                root: 'bg-error/10 text-error ring ring-inset ring-error/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'info',
+            class: {
+                root: 'bg-info/10 text-info ring ring-inset ring-info/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'tertiary',
+            class: {
+                root: 'bg-tertiary/10 text-tertiary ring ring-inset ring-tertiary/25'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'surface',
+            class: {
+                root: 'bg-surface-container-highest text-on-surface ring ring-inset ring-outline-variant'
+            }
+        }
+    ],
+    defaultVariants: {
+        variant: 'solid',
+        color: 'primary',
+        orientation: 'horizontal'
+    }
+});
+export const alertDefaults = {
+    defaultVariants: alertVariants.defaultVariants,
+    slots: {}
+};

package/dist/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert.svelte';
+export type { AlertProps } from './alert.types.js';

package/dist/Alert/index.js

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

package/dist/Avatar/Avatar.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+    import type { AvatarProps, AvatarRounded, AvatarSize } from './avatar.types.js'
+
+    export type Props = AvatarProps
+</script>
+
+<script lang="ts">
+    import { Avatar } from 'bits-ui'
+    import { getContext } from 'svelte'
+    import Chip from '../Chip/Chip.svelte'
+    import { getComponentConfig } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import { avatarDefaults, avatarSizePx, avatarVariants } from './avatar.variants.js'
+
+    const config = getComponentConfig('avatar', avatarDefaults)
+
+    let {
+        ref = $bindable(null),
+        src,
+        alt,
+        size,
+        rounded,
+        text,
+        icon,
+        chip,
+        loading,
+        delayMs = 0,
+        class: className,
+        ui,
+        fallback: fallbackSnippet,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    const groupContext = getContext<
+        { size: AvatarSize; rounded: AvatarRounded; baseClass: string } | undefined
+    >('avatarGroup')
+
+    const resolvedSize = $derived(size ?? groupContext?.size ?? config.defaultVariants.size ?? 'md')
+    const resolvedRounded = $derived(
+        rounded ?? groupContext?.rounded ?? config.defaultVariants.rounded ?? 'full'
+    )
+    const sizePx = $derived(avatarSizePx[resolvedSize])
+
+    const initials = $derived(
+        text !== undefined
+            ? text
+            : alt
+              ? alt
+                    .split(' ')
+                    .filter(Boolean)
+                    .slice(0, 2)
+                    .map((w) => w[0])
+                    .join('')
+                    .toUpperCase()
+              : ''
+    )
+
+    const chipProps = $derived(
+        chip === true
+            ? { inset: true as const }
+            : chip
+              ? { inset: true as const, ...chip }
+              : undefined
+    )
+
+    const classes = $derived.by(() => {
+        const slots = avatarVariants({ size: resolvedSize, rounded: resolvedRounded })
+        return {
+            root: slots.root({
+                class: [config.slots.root, groupContext?.baseClass, className, ui?.root]
+            }),
+            image: slots.image({ class: [config.slots.image, ui?.image] }),
+            fallback: slots.fallback({ class: [config.slots.fallback, ui?.fallback] }),
+            icon: slots.icon({ class: [config.slots.icon, ui?.icon] })
+        }
+    })
+</script>
+
+{#snippet avatarContent()}
+    <Avatar.Root {...restProps} bind:ref class={classes.root} {delayMs}>
+        {#if children}
+            {@render children()}
+        {:else}
+            {#if src}
+                <Avatar.Image
+                    {src}
+                    alt={alt ?? ''}
+                    class={classes.image}
+                    width={sizePx}
+                    height={sizePx}
+                    {loading}
+                />
+            {/if}
+            <Avatar.Fallback class={classes.fallback}>
+                {#if fallbackSnippet}
+                    {@render fallbackSnippet()}
+                {:else if initials}
+                    {initials}
+                {:else if icon}
+                    <Icon name={icon} class={classes.icon} />
+                {/if}
+            </Avatar.Fallback>
+        {/if}
+    </Avatar.Root>
+{/snippet}
+
+{#if chipProps}
+    <Chip {...chipProps}>
+        {@render avatarContent()}
+    </Chip>
+{:else}
+    {@render avatarContent()}
+{/if}

package/dist/Avatar/Avatar.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { AvatarProps } from './avatar.types.js';
+export type Props = AvatarProps;
+import { Avatar } from 'bits-ui';
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "ref">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/Avatar/avatar.types.d.ts

@@ -0,0 +1,73 @@
+import type { Avatar } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { ChipProps } from '../Chip/chip.types.js';
+import type { AvatarSize, AvatarSlots, AvatarVariantProps } from './avatar.variants.js';
+export type { AvatarSize };
+export type AvatarRounded = NonNullable<AvatarVariantProps['rounded']>;
+export type AvatarChipProps = Pick<ChipProps, 'color' | 'size' | 'position' | 'inset' | 'show' | 'text'>;
+export type AvatarProps = Omit<Avatar.RootProps, 'children'> & {
+    /**
+     * Controls the dimensions of the avatar.
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Controls the border radius of the avatar.
+     * Use `'lg'`, `'md'`, `'sm'` for square-ish avatars (e.g. organization logos).
+     * @default 'full'
+     */
+    rounded?: AvatarRounded;
+    /**
+     * URL of the image to display.
+     * The image will be shown once it loads successfully.
+     */
+    src?: string;
+    /**
+     * Alternative text describing the avatar image.
+     * Used for accessibility and to auto-generate initials as fallback.
+     */
+    alt?: string;
+    /**
+     * Text to display when no image is available.
+     * Overrides auto-generated initials from `alt`.
+     */
+    text?: string;
+    /**
+     * Iconify icon name to display as fallback when no image or text is available.
+     * @example 'lucide:user', 'mdi:account'
+     */
+    icon?: string;
+    /**
+     * Renders a Chip indicator on the avatar.
+     * Pass `true` for default chip, or an object to customize.
+     * @example true
+     * @example { color: 'success' }
+     * @example { color: 'error', position: 'bottom-right' }
+     */
+    chip?: boolean | AvatarChipProps;
+    /**
+     * Image loading strategy.
+     * Use `'lazy'` for avatars below the fold to improve page load performance.
+     * @default 'eager'
+     */
+    loading?: 'lazy' | 'eager';
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific avatar slots.
+     */
+    ui?: Partial<Record<AvatarSlots, ClassNameValue>>;
+    /**
+     * Custom fallback content to render when the image is unavailable.
+     * Overrides text, initials, and icon fallback.
+     */
+    fallback?: Snippet;
+    /**
+     * Custom content to render inside the avatar.
+     * When provided, overrides the entire avatar content (image + fallback).
+     */
+    children?: Snippet;
+};

package/dist/Avatar/avatar.types.js

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