sheer-ui 0.4.2 → 0.5.0

package/dist/blocks/time-picker/time-slots.d.ts

@@ -0,0 +1,27 @@
+export type TimeSlot = {
+    value: string;
+    label: string;
+};
+export type SlotRange = {
+    start: string;
+    end: string;
+};
+export type TimeSlotPreset = 'business' | 'extended' | 'full' | 'custom';
+/** Sign of (time1 − time2): negative if earlier, 0 if equal or either is malformed, positive if later. */
+export declare function compareTime(time1: string, time2: string): number;
+export declare const isTimeInRange: (time: string, minTime: string, maxTime: string) => boolean;
+/** Duration in minutes from startTime to endTime (0 if either is malformed). */
+export declare function getTimeDuration(startTime: string, endTime: string): number;
+export declare function generateTimeSlots(startHour: number, endHour: number, interval: number, use24Hour?: boolean): TimeSlot[];
+export declare const b_HOURS: TimeSlot[];
+export declare const EXTENDED_HOURS: TimeSlot[];
+type ResolveTimeSlotsOptions = {
+    slots: TimeSlot[] | undefined;
+    preset: TimeSlotPreset;
+    interval: number;
+    startHour: number;
+    endHour: number;
+    use24Hour?: boolean;
+};
+export declare const resolveTimeSlots: ({ slots, preset, interval, startHour, endHour, use24Hour }: ResolveTimeSlotsOptions) => TimeSlot[];
+export {};

package/dist/blocks/time-picker/time-slots.js

@@ -0,0 +1,46 @@
+/**
+ * Time-slot helpers for the time-picker components — comparison, duration, and slot generation over
+ * ISO 8601 "HH:MM" wall-clock strings. Block-internal; the minute math and `formatTimeDisplay` (the
+ * wire/display formatter) live in `../../time`.
+ */
+import { tryTimeToMinutes, minutesToTime, formatTimeDisplay } from '../../time';
+/** Sign of (time1 − time2): negative if earlier, 0 if equal or either is malformed, positive if later. */
+export function compareTime(time1, time2) {
+    const a = tryTimeToMinutes(time1);
+    const b = tryTimeToMinutes(time2);
+    if (a === null || b === null)
+        return 0;
+    return a - b;
+}
+export const isTimeInRange = (time, minTime, maxTime) => compareTime(time, minTime) >= 0 && compareTime(time, maxTime) <= 0;
+/** Duration in minutes from startTime to endTime (0 if either is malformed). */
+export function getTimeDuration(startTime, endTime) {
+    const start = tryTimeToMinutes(startTime);
+    const end = tryTimeToMinutes(endTime);
+    if (start === null || end === null)
+        return 0;
+    return end - start;
+}
+export function generateTimeSlots(startHour, endHour, interval, use24Hour = false) {
+    const slots = [];
+    const span = (endHour - startHour) * 60;
+    // `elapsed` bounds the loop in minutes (so endHour === 24 works); `minutesToTime` wraps at midnight
+    // and zero-pads for us.
+    for (let elapsed = 0; elapsed < span; elapsed += interval) {
+        const min = startHour * 60 + elapsed;
+        slots.push({ value: minutesToTime(min), label: formatTimeDisplay(min, { use24Hour }) });
+    }
+    return slots;
+}
+export const b_HOURS = generateTimeSlots(9, 17, 60);
+export const EXTENDED_HOURS = generateTimeSlots(7, 21, 60);
+export const resolveTimeSlots = ({ slots, preset, interval, startHour, endHour, use24Hour = false }) => {
+    if (slots)
+        return slots;
+    // the baked constants carry 12-hour labels; 24-hour display regenerates the preset
+    if (preset === 'business')
+        return use24Hour ? generateTimeSlots(9, 17, 60, true) : b_HOURS;
+    if (preset === 'extended')
+        return use24Hour ? generateTimeSlots(7, 21, 60, true) : EXTENDED_HOURS;
+    return preset === 'full' ? generateTimeSlots(0, 24, interval, use24Hour) : generateTimeSlots(startHour, endHour, interval, use24Hour);
+};

package/dist/blocks/user-avatar/UserAvatar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ClassValue } from 'svelte/elements';
+type $$ComponentProps = {
+    name: {
+        f_name?: string | null;
+        l_name?: string | null;
+    };
+    src?: string;
+    class?: ClassValue;
+    fallbackClass?: ClassValue;
+    cacheBust?: number;
+};
+declare const UserAvatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type UserAvatar = ReturnType<typeof UserAvatar>;
+export default UserAvatar;

package/dist/blocks/user-avatar/index.js

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

package/dist/blocks/verification-code-field/VerificationCodeField.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type RootProps as PinInputRootProps } from '../../components/pin-input';
+type Props = Omit<PinInputRootProps, 'children' | 'maxlength' | 'value'> & {
+    value?: string;
+    maxlength?: number;
+    invalid?: boolean;
+    errors?: {
+        message?: string;
+    }[];
+    description?: Snippet;
+    ondirty?: () => void;
+};
+declare const VerificationCodeField: import("svelte").Component<Props, {}, "value">;
+type VerificationCodeField = ReturnType<typeof VerificationCodeField>;
+export default VerificationCodeField;

package/dist/blocks/verification-code-field/index.js

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

package/dist/components/accordion/components/accordion-content.svelte.d.ts

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

package/dist/components/accordion/components/accordion-item.svelte.d.ts

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

package/dist/components/accordion/components/accordion-trigger.svelte.d.ts

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

package/dist/components/accordion/components/accordion.svelte.d.ts

@@ -0,0 +1,6 @@
+import { SelectionValue } from '../../../internal/selection.svelte.js';
+export declare const useAccordion: () => SelectionValue, setAccordion: (context: SelectionValue) => SelectionValue;
+import type { AccordionRootProps } from '../types.js';
+declare const Accordion: import("svelte").Component<AccordionRootProps, {}, "ref" | "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from './components/accordion.svelte';
+export { default as Item } from './components/accordion-item.svelte';
+export { default as Trigger } from './components/accordion-trigger.svelte';
+export { default as Content } from './components/accordion-content.svelte';
+export type { AccordionRootProps as RootProps, AccordionItemProps as ItemProps, AccordionTriggerProps as TriggerProps, AccordionContentProps as ContentProps, } from './types.js';

package/dist/components/accordion/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from './components/accordion.svelte';
+export { default as Item } from './components/accordion-item.svelte';
+export { default as Trigger } from './components/accordion-trigger.svelte';
+export { default as Content } from './components/accordion-content.svelte';

package/dist/components/accordion/types.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
+import type { WithElementRef } from '../../internal/utils.js';
+import type { SelectionType } from '../../internal/selection.svelte.js';
+export type AccordionRootProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    /** 'single' keeps one item open: opening an item closes the open one. Fixed at mount. */
+    type?: SelectionType;
+    /** The open item value(s) — string for single, string[] for multiple. Bindable. */
+    value?: string | string[];
+};
+export type AccordionItemProps = WithElementRef<SvelteHTMLElements['details'], HTMLDetailsElement> & {
+    value: string;
+    disabled?: boolean;
+};
+export type AccordionTriggerProps = WithElementRef<SvelteHTMLElements['summary']>;
+export type AccordionContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/dist/components/accordion/types.js

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

package/dist/components/alert/alert-action.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../internal/utils.js';
+declare const AlertAction: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AlertAction = ReturnType<typeof AlertAction>;
+export default AlertAction;

package/dist/components/alert/alert-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../internal/utils.js';
+declare const AlertDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AlertDescription = ReturnType<typeof AlertDescription>;
+export default AlertDescription;

package/dist/components/alert/alert-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../internal/utils.js';
+declare const AlertTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AlertTitle = ReturnType<typeof AlertTitle>;
+export default AlertTitle;

package/dist/components/alert/alert.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from 'overrule';
+export declare const alertVariants: import("overrule").VariantFn<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}>;
+export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../internal/utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/alert/index.d.ts

@@ -0,0 +1,6 @@
+import Root from './alert.svelte';
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
+import Action from './alert-action.svelte';
+export { alertVariants, type AlertVariant } from './alert.svelte';
+export { Root, Description, Title, Action, Root as Alert, Description as AlertDescription, Title as AlertTitle, Action as AlertAction, };

package/dist/components/alert/index.js

@@ -0,0 +1,8 @@
+import Root from './alert.svelte';
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
+import Action from './alert-action.svelte';
+export { alertVariants } from './alert.svelte';
+export { Root, Description, Title, Action, 
+//
+Root as Alert, Description as AlertDescription, Title as AlertTitle, Action as AlertAction, };

package/dist/components/avatar/avatar.svelte.d.ts

@@ -0,0 +1,64 @@
+import { DOMContext } from '../../internal/tools/index.js';
+import type { HTMLImgAttributes } from 'svelte/elements';
+import type { AvatarImageLoadingStatus } from './types.js';
+import type { RefAttachment, RefOpts } from '../../internal/types.js';
+type CrossOrigin = HTMLImgAttributes['crossorigin'];
+type ReferrerPolicy = HTMLImgAttributes['referrerpolicy'];
+type AvatarImageSrc = string | null | undefined;
+interface AvatarRootStateOpts extends RefOpts {
+    readonly delayMs: number;
+    loadingStatus: AvatarImageLoadingStatus;
+}
+export declare class AvatarRootState {
+    static create(opts: AvatarRootStateOpts): AvatarRootState;
+    readonly opts: AvatarRootStateOpts;
+    readonly domContext: DOMContext;
+    readonly attachment: RefAttachment;
+    constructor(opts: AvatarRootStateOpts);
+    loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy): (() => void) | undefined;
+    props: {
+        readonly id: string;
+        readonly 'data-status': AvatarImageLoadingStatus;
+    };
+}
+interface AvatarImageStateOpts extends RefOpts {
+    readonly src: AvatarImageSrc;
+    readonly crossOrigin: CrossOrigin;
+    readonly referrerPolicy: ReferrerPolicy;
+}
+export declare class AvatarImageState {
+    static create(opts: AvatarImageStateOpts): AvatarImageState;
+    readonly opts: AvatarImageStateOpts;
+    readonly root: AvatarRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: AvatarImageStateOpts, root: AvatarRootState);
+    readonly props: {
+        readonly id: string;
+        readonly style: {
+            readonly display: "none" | "block";
+        };
+        readonly 'data-status': AvatarImageLoadingStatus;
+        readonly src: AvatarImageSrc;
+        readonly crossorigin: "" | "anonymous" | "use-credentials" | null | undefined;
+        readonly referrerpolicy: globalThis.ReferrerPolicy | null | undefined;
+    };
+}
+interface AvatarFallbackStateOpts extends RefOpts {
+}
+export declare class AvatarFallbackState {
+    static create(opts: AvatarFallbackStateOpts): AvatarFallbackState;
+    readonly opts: AvatarFallbackStateOpts;
+    readonly root: AvatarRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: AvatarFallbackStateOpts, root: AvatarRootState);
+    readonly style: {
+        display: string;
+    } | undefined;
+    readonly props: {
+        readonly style: {
+            display: string;
+        } | undefined;
+        readonly 'data-status': AvatarImageLoadingStatus;
+    };
+}
+export {};

package/dist/components/avatar/avatar.svelte.js

@@ -0,0 +1,109 @@
+import { createContext, untrack } from 'svelte';
+import { DOMContext, attachRef } from '../../internal/tools/index.js';
+import { createBitsAttrs } from '../../internal/attrs.js';
+const avatarAttrs = createBitsAttrs({
+    component: 'avatar',
+    parts: ['root', 'image', 'fallback'],
+});
+const [getAvatarRoot, setAvatarRoot] = createContext();
+export class AvatarRootState {
+    static create(opts) {
+        return setAvatarRoot(new AvatarRootState(opts));
+    }
+    opts;
+    domContext;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.domContext = new DOMContext(() => opts.ref);
+        this.loadImage = this.loadImage.bind(this);
+        this.attachment = attachRef((v) => (opts.ref = v));
+    }
+    loadImage(src, crossorigin, referrerPolicy) {
+        if (this.opts.loadingStatus === 'loaded')
+            return;
+        let imageTimerId;
+        const image = new Image();
+        image.src = src;
+        if (crossorigin !== undefined)
+            image.crossOrigin = crossorigin;
+        if (referrerPolicy)
+            image.referrerPolicy = referrerPolicy;
+        this.opts.loadingStatus = 'loading';
+        image.onload = () => {
+            imageTimerId = this.domContext.setTimeout(() => {
+                this.opts.loadingStatus = 'loaded';
+            }, this.opts.delayMs);
+        };
+        image.onerror = () => {
+            this.opts.loadingStatus = 'error';
+        };
+        return () => {
+            if (!imageTimerId)
+                return;
+            this.domContext.clearTimeout(imageTimerId);
+        };
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        [avatarAttrs.root]: '',
+        'data-status': this.opts.loadingStatus,
+        ...this.attachment,
+    }));
+}
+export class AvatarImageState {
+    static create(opts) {
+        return new AvatarImageState(opts, getAvatarRoot());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef((v) => (opts.ref = v));
+        $effect.pre(() => {
+            const src = this.opts.src;
+            const crossOrigin = this.opts.crossOrigin;
+            untrack(() => {
+                if (!src) {
+                    this.root.opts.loadingStatus = 'error';
+                    return;
+                }
+                this.root.loadImage(src, crossOrigin, this.opts.referrerPolicy);
+            });
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        style: {
+            display: this.root.opts.loadingStatus === 'loaded' ? 'block' : 'none',
+        },
+        'data-status': this.root.opts.loadingStatus,
+        [avatarAttrs.image]: '',
+        src: this.opts.src,
+        crossorigin: this.opts.crossOrigin,
+        referrerpolicy: this.opts.referrerPolicy,
+        ...this.attachment,
+    }));
+}
+export class AvatarFallbackState {
+    static create(opts) {
+        return new AvatarFallbackState(opts, getAvatarRoot());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef((v) => (opts.ref = v));
+    }
+    style = $derived.by(() => (this.root.opts.loadingStatus === 'loaded' ? { display: 'none' } : undefined));
+    props = $derived.by(() => ({
+        style: this.style,
+        'data-status': this.root.opts.loadingStatus,
+        [avatarAttrs.fallback]: '',
+        ...this.attachment,
+    }));
+}

package/dist/components/avatar/components/avatar-fallback.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { AvatarFallbackProps } from '../types.js';
+	import { AvatarFallbackState } from '../avatar.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, id = createId(uid), ref = $bindable(null), ...restProps }: AvatarFallbackProps = $props();
+
+	const fallbackState = AvatarFallbackState.create({
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'avatar-fallback',
+				class: 'bg-muted grid size-full place-items-center rounded-full',
+			},
+			restProps,
+			fallbackState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>
+		{@render children?.()}
+	</span>
+{/if}

package/dist/components/avatar/components/avatar-fallback.svelte.d.ts

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

package/dist/components/avatar/components/avatar-image.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { AvatarImageProps } from '../types.js';
+	import { AvatarImageState } from '../avatar.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		src,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		crossorigin = undefined,
+		referrerpolicy = undefined,
+		...restProps
+	}: AvatarImageProps = $props();
+
+	const imageState = AvatarImageState.create({
+		get src() {
+			return src;
+		},
+		get id() {
+			return id;
+		},
+		get crossOrigin() {
+			return crossorigin;
+		},
+		get referrerPolicy() {
+			return referrerpolicy;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'avatar-image',
+				class: 'aspect-square size-full',
+			},
+			restProps,
+			imageState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<img {...mergedProps} {src} />
+{/if}

package/dist/components/avatar/components/avatar-image.svelte.d.ts

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

package/dist/components/avatar/components/avatar.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { AvatarRootProps } from '../types.js';
+	import { AvatarRootState } from '../avatar.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		delayMs = 0,
+		loadingStatus = $bindable('loading'),
+		onLoadingStatusChange,
+		child,
+		children,
+		id = createId(uid),
+		ref = $bindable(null),
+		...restProps
+	}: AvatarRootProps = $props();
+
+	const rootState = AvatarRootState.create({
+		get delayMs() {
+			return delayMs;
+		},
+		get loadingStatus() {
+			return loadingStatus;
+		},
+		set loadingStatus(v) {
+			if (loadingStatus === v) return;
+			loadingStatus = v;
+			onLoadingStatusChange?.(v);
+		},
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'avatar',
+				class: 'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+			},
+			restProps,
+			rootState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/avatar/components/avatar.svelte.d.ts

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

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Root } from './components/avatar.svelte';
+export { default as Image } from './components/avatar-image.svelte';
+export { default as Fallback } from './components/avatar-fallback.svelte';
+export type { AvatarRootProps as RootProps, AvatarImageProps as ImageProps, AvatarFallbackProps as FallbackProps, } from './types.js';

package/dist/components/avatar/index.js

@@ -0,0 +1,3 @@
+export { default as Root } from './components/avatar.svelte';
+export { default as Image } from './components/avatar-image.svelte';
+export { default as Fallback } from './components/avatar-fallback.svelte';

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

@@ -0,0 +1,32 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes, BitsPrimitiveImgAttributes, BitsPrimitiveSpanAttributes } from "../../internal/attribute-types.js";
+export type AvatarImageLoadingStatus = "loading" | "loaded" | "error";
+export type AvatarRootPropsWithoutHTML = WithChild<{
+    /**
+     * The delay in milliseconds to wait before showing the avatar once
+     * the image has loaded. This can be used to prevent sudden flickering
+     * of the image if it loads quickly.
+     *
+     * @default 0
+     */
+    delayMs?: number;
+    /**
+     * The loading status of the image.
+     *
+     * If you are confident that the image exists and will load successfully, you can
+     * set this to `"loaded"` to skip the loading process (which shows the fallback)
+     * and immediately show the image.
+     *
+     * @default "loading"
+     */
+    loadingStatus?: AvatarImageLoadingStatus;
+    /**
+     * A callback invoked when the loading status of the image changes.
+     */
+    onLoadingStatusChange?: OnChangeFn<AvatarImageLoadingStatus>;
+}>;
+export type AvatarRootProps = AvatarRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AvatarRootPropsWithoutHTML>;
+export type AvatarImagePropsWithoutHTML = WithChild;
+export type AvatarImageProps = AvatarImagePropsWithoutHTML & Without<BitsPrimitiveImgAttributes, AvatarImagePropsWithoutHTML>;
+export type AvatarFallbackPropsWithoutHTML = WithChild;
+export type AvatarFallbackProps = AvatarFallbackPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, AvatarFallbackPropsWithoutHTML>;

package/dist/components/avatar/types.js

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

package/dist/components/badge/badge.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type VariantProps } from 'overrule';
+export declare const badgeVariants: import("overrule").VariantFn<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+}>;
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../internal/utils.js';
+type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/badge/index.js

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