svelora 2.1.0

package/dist/Breadcrumb/breadcrumb.variants.d.ts

@@ -0,0 +1,138 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const breadcrumbVariants: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            link: string;
+        };
+        false: {
+            link: string;
+        };
+    };
+    disabled: {
+        true: {
+            link: string;
+        };
+    };
+    to: {
+        true: string;
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string[];
+    linkLeadingIcon: string;
+    linkLabel: string;
+    separator: string;
+    separatorIcon: string;
+}, undefined, {
+    active: {
+        true: {
+            link: string;
+        };
+        false: {
+            link: string;
+        };
+    };
+    disabled: {
+        true: {
+            link: string;
+        };
+    };
+    to: {
+        true: string;
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string[];
+    linkLeadingIcon: string;
+    linkLabel: string;
+    separator: string;
+    separatorIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            link: string;
+        };
+        false: {
+            link: string;
+        };
+    };
+    disabled: {
+        true: {
+            link: string;
+        };
+    };
+    to: {
+        true: string;
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string[];
+    linkLeadingIcon: string;
+    linkLabel: string;
+    separator: string;
+    separatorIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BreadcrumbVariantProps = VariantProps<typeof breadcrumbVariants>;
+export type BreadcrumbSlots = keyof ReturnType<typeof breadcrumbVariants>;
+export declare const breadcrumbDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        active: {
+            true: {
+                link: string;
+            };
+            false: {
+                link: string;
+            };
+        };
+        disabled: {
+            true: {
+                link: string;
+            };
+        };
+        to: {
+            true: string;
+        };
+    }, {
+        root: string;
+        list: string;
+        item: string;
+        link: string[];
+        linkLeadingIcon: string;
+        linkLabel: string;
+        separator: string;
+        separatorIcon: string;
+    }, {
+        active: {
+            true: {
+                link: string;
+            };
+            false: {
+                link: string;
+            };
+        };
+        disabled: {
+            true: {
+                link: string;
+            };
+        };
+        to: {
+            true: string;
+        };
+    }, {
+        root: string;
+        list: string;
+        item: string;
+        link: string[];
+        linkLeadingIcon: string;
+        linkLabel: string;
+        separator: string;
+        separatorIcon: string;
+    }>;
+    slots: Partial<Record<BreadcrumbSlots, string>>;
+};

package/dist/Breadcrumb/breadcrumb.variants.js

@@ -0,0 +1,53 @@
+import { tv } from 'tailwind-variants';
+export const breadcrumbVariants = tv({
+    slots: {
+        root: 'relative min-w-0',
+        list: 'flex items-center gap-1.5',
+        item: 'flex min-w-0 items-center',
+        link: [
+            'group relative flex items-center gap-1.5 text-sm min-w-0',
+            'focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+        ],
+        linkLeadingIcon: 'shrink-0 size-5',
+        linkLabel: 'truncate',
+        separator: 'flex',
+        separatorIcon: 'shrink-0 size-5 text-on-surface-variant/60'
+    },
+    variants: {
+        active: {
+            true: {
+                link: 'text-primary font-semibold'
+            },
+            false: {
+                link: 'text-on-surface-variant font-medium'
+            }
+        },
+        disabled: {
+            true: {
+                link: 'cursor-not-allowed opacity-75'
+            }
+        },
+        to: {
+            true: ''
+        }
+    },
+    compoundVariants: [
+        {
+            active: false,
+            disabled: false,
+            to: true,
+            class: {
+                link: 'hover:text-on-surface transition-colors'
+            }
+        }
+    ],
+    defaultVariants: {
+        active: false,
+        disabled: false,
+        to: false
+    }
+});
+export const breadcrumbDefaults = {
+    defaultVariants: breadcrumbVariants.defaultVariants,
+    slots: {}
+};

package/dist/Breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export type { BreadcrumbItem, BreadcrumbProps } from './breadcrumb.types.js';

package/dist/Breadcrumb/index.js

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

package/dist/Button/Button.svelte

@@ -0,0 +1,177 @@
+<script lang="ts" module>
+    import type { ButtonProps } from './button.types.js'
+
+    export type Props = ButtonProps
+</script>
+
+<script lang="ts">
+    import { getContext } from 'svelte'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import type { AvatarSize } from '../Avatar/avatar.types.js'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import type { FieldGroupVariantProps } from '../FieldGroup/field-group.variants.js'
+    import { fieldGroupVariant } from '../FieldGroup/field-group.variants.js'
+    import Icon from '../Icon/Icon.svelte'
+    import Link from '../Link/Link.svelte'
+    import { buttonDefaults, buttonVariants } from './button.variants.js'
+
+    const config = getComponentConfig('button', buttonDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
+
+    let {
+        ref = $bindable(null),
+        ui,
+        color = config.defaultVariants.color,
+        variant = config.defaultVariants.variant,
+        size,
+        label,
+        loading = false,
+        loadingAuto = false,
+        loadingIcon = icons.loading,
+        disabled = false,
+        block = false,
+        square = false,
+        icon,
+        leadingIcon,
+        trailingIcon,
+        trailing = false,
+        avatar,
+        href,
+        type,
+        external,
+        active,
+        exact = false,
+        activeColor,
+        activeVariant,
+        activeClass,
+        inactiveClass,
+        leadingSlot,
+        trailingSlot,
+        children,
+        class: className,
+        onclick,
+        ...restProps
+    }: Props = $props()
+
+    const fieldGroupContext = getContext<
+        | {
+              orientation: NonNullable<FieldGroupVariantProps['orientation']>
+              size: NonNullable<FieldGroupVariantProps['size']>
+          }
+        | undefined
+    >('fieldGroup')
+
+    const resolvedSize = $derived(size ?? fieldGroupContext?.size ?? config.defaultVariants.size)
+    const fieldGroupClass = $derived(
+        fieldGroupContext
+            ? fieldGroupVariant.fieldGroup[fieldGroupContext.orientation ?? 'horizontal']
+            : undefined
+    )
+
+    let autoLoading = $state(false)
+    let pendingPromise: Promise<unknown> | null = null
+    const isLoading = $derived(loading || autoLoading)
+
+    const isIconOnly = $derived(square || (!label && !children))
+    const isLeading = $derived((!!icon && !trailing) || (isLoading && !trailing) || !!leadingIcon)
+    const isTrailing = $derived((!!icon && trailing) || (isLoading && trailing) || !!trailingIcon)
+
+    const spinLeading = $derived(isLoading && !trailing)
+    const spinTrailing = $derived(isLoading && trailing)
+
+    const leadingIconName = $derived(
+        spinLeading ? loadingIcon : leadingIcon || (!trailing ? icon : undefined)
+    )
+    const trailingIconName = $derived(
+        spinTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
+    )
+
+    const resolvedColor = $derived(active && activeColor ? activeColor : color)
+    const resolvedVariant = $derived(active && activeVariant ? activeVariant : variant)
+
+    const classes = $derived.by(() => {
+        const slots = buttonVariants({
+            variant: resolvedVariant,
+            color: resolvedColor,
+            size: resolvedSize,
+            block,
+            square: isIconOnly,
+            loading: isLoading,
+            leading: spinLeading,
+            trailing: spinTrailing
+        })
+        return {
+            base: slots.base({ class: [config.slots.base, fieldGroupClass, className, ui?.base] }),
+            label: slots.label({ class: [config.slots.label, ui?.label] }),
+            leadingIcon: slots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] }),
+            trailingIcon: slots.trailingIcon({
+                class: [config.slots.trailingIcon, ui?.trailingIcon]
+            }),
+            leadingAvatar: slots.leadingAvatar({
+                class: [config.slots.leadingAvatar, ui?.leadingAvatar]
+            }),
+            leadingAvatarSize: slots.leadingAvatarSize() as AvatarSize
+        }
+    })
+
+    function handleClick(e: MouseEvent) {
+        if (disabled || isLoading) {
+            e.preventDefault()
+            e.stopPropagation()
+            return
+        }
+
+        if (typeof onclick === 'function') {
+            const result = (onclick as (e: MouseEvent) => unknown)(e)
+
+            if (loadingAuto && result instanceof Promise) {
+                autoLoading = true
+                pendingPromise = result
+                result.then(
+                    () => {
+                        if (pendingPromise === result) autoLoading = false
+                    },
+                    () => {
+                        if (pendingPromise === result) autoLoading = false
+                    }
+                )
+            }
+        }
+    }
+</script>
+
+<Link
+    {...restProps}
+    bind:ref
+    {href}
+    {type}
+    {external}
+    {active}
+    {exact}
+    {activeClass}
+    {inactiveClass}
+    raw
+    disabled={disabled || isLoading}
+    class={classes.base}
+    onclick={handleClick}
+>
+    {#if leadingSlot}
+        {@render leadingSlot()}
+    {:else if isLeading && leadingIconName}
+        <Icon name={leadingIconName} class={classes.leadingIcon} />
+    {:else if avatar}
+        <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
+    {/if}
+
+    {#if label}
+        <span class={classes.label}>{label}</span>
+    {:else if children}
+        <span class={classes.label}>{@render children()}</span>
+    {/if}
+
+    {#if trailingSlot}
+        {@render trailingSlot()}
+    {:else if isTrailing && trailingIconName}
+        <Icon name={trailingIconName} class={classes.trailingIcon} />
+    {/if}
+</Link>

package/dist/Button/Button.svelte.d.ts

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

package/dist/Button/button.types.d.ts

@@ -0,0 +1,151 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { AvatarProps } from '../Avatar/avatar.types.js';
+import type { ButtonSlots, ButtonVariantProps } from './button.variants.js';
+export type ButtonProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'color'> & Pick<HTMLButtonAttributes, 'name' | 'value' | 'form' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'popovertarget' | 'popovertargetaction'> & Pick<HTMLAnchorAttributes, 'download' | 'hreflang' | 'ping' | 'media' | 'referrerpolicy'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Controls the visual style of the button.
+     * @default 'solid'
+     */
+    variant?: NonNullable<ButtonVariantProps['variant']>;
+    /**
+     * Sets the color scheme applied to the button.
+     * @default 'primary'
+     */
+    color?: NonNullable<ButtonVariantProps['color']>;
+    /**
+     * Controls the dimensions and text size of the button.
+     * @default 'md'
+     */
+    size?: NonNullable<ButtonVariantProps['size']>;
+    /**
+     * Text content displayed inside the button.
+     * Use this as a shorthand instead of the `children` snippet.
+     */
+    label?: string;
+    /**
+     * Renders a loading spinner and disables interaction.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Automatically shows loading state while the onclick handler's Promise is pending.
+     * @default false
+     */
+    loadingAuto?: boolean;
+    /**
+     * Icon displayed as the loading indicator.
+     * Supports any valid Iconify icon name.
+     * @default Uses `icons.loading` from app config
+     */
+    loadingIcon?: string;
+    /**
+     * Disables the button and prevents interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Stretches the button to fill the full width of its container.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Forces equal width and height, ideal for icon-only buttons.
+     * @default false
+     */
+    square?: boolean;
+    /**
+     * Renders the button in icon-only mode without a label.
+     * Supports any valid Iconify icon name.
+     */
+    icon?: string;
+    /**
+     * Icon placed before the label.
+     * Supports any valid Iconify icon name.
+     */
+    leadingIcon?: string;
+    /**
+     * Icon placed after the label.
+     * Supports any valid Iconify icon name.
+     */
+    trailingIcon?: string;
+    /**
+     * Moves the icon to the trailing (right) side.
+     * Only takes effect when using the `icon` prop.
+     * @default false
+     */
+    trailing?: boolean;
+    /**
+     * Avatar displayed before the label.
+     * Takes precedence over `leadingIcon`.
+     */
+    avatar?: AvatarProps;
+    /**
+     * The destination URL. When provided, renders as an anchor element.
+     */
+    href?: string;
+    /**
+     * The button type attribute. Only applies when rendering as `<button>`.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Treats the link as external, adding `rel="noopener noreferrer"` and `target="_blank"`.
+     * Auto-detected from the `href` when omitted.
+     */
+    external?: boolean;
+    /**
+     * Overrides the auto-detected active state.
+     */
+    active?: boolean;
+    /**
+     * Requires an exact pathname match for active state detection.
+     * @default false
+     */
+    exact?: boolean;
+    /**
+     * Color scheme applied when the button is active.
+     * Falls back to the `color` prop when omitted.
+     */
+    activeColor?: NonNullable<ButtonVariantProps['color']>;
+    /**
+     * Visual style applied when the button is active.
+     * Falls back to the `variant` prop when omitted.
+     */
+    activeVariant?: NonNullable<ButtonVariantProps['variant']>;
+    /**
+     * Additional CSS class applied when the button link is active.
+     */
+    activeClass?: string;
+    /**
+     * Additional CSS class applied when the button link is inactive.
+     */
+    inactiveClass?: string;
+    /**
+     * Custom content rendered before the label.
+     * Takes precedence over `avatar` and `leadingIcon`.
+     */
+    leadingSlot?: Snippet;
+    /**
+     * Custom content rendered after the label.
+     * Takes precedence over `trailingIcon`.
+     */
+    trailingSlot?: Snippet;
+    /**
+     * Custom content for the button label area.
+     */
+    children?: Snippet;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific button slots.
+     */
+    ui?: Partial<Record<Exclude<ButtonSlots, 'leadingAvatarSize'>, ClassNameValue>>;
+};

package/dist/Button/button.types.js

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