@svelte-atoms/core 1.0.0-alpha.14

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

@@ -0,0 +1,58 @@
+<script module lang="ts">
+	export type AlertTitleProps<
+		E extends keyof HTMLElementTagNameMap = 'div',
+		B extends Base = Base
+	> = HtmlAtomProps<E, B> & {
+		children?: Snippet<[{ alert: AlertBond }]>;
+	};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import { AlertBond } from './bond.svelte';
+	import { toClassValue } from '../../utils';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { getPreset } from '../../context';
+
+	const bond = AlertBond.get();
+
+	const preset = getPreset('alert.title');
+
+	let {
+		as = preset?.as ?? ('h4' as E),
+		base = preset?.base as B,
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertTitleProps<E, B> = $props();
+
+	const titleProps = $derived({
+		...bond?.title(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	class={[
+		'alert-title text-sm leading-tight font-medium',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [klass])
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	{as}
+	{base}
+	{...titleProps}
+>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>

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

@@ -0,0 +1,32 @@
+export type AlertTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+};
+import type { Snippet } from 'svelte';
+import { AlertBond } from './bond.svelte';
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: AlertTitleProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const AlertTitle: $$IsomorphicComponent;
+type AlertTitle<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof AlertTitle<E, B>>;
+export default AlertTitle;

package/dist/components/alert/alert.css

@@ -0,0 +1,18 @@
+.alert-title {
+	grid-area: title;
+}
+.alert-description {
+	grid-area: description;
+}
+.alert-icon {
+	grid-area: icon;
+}
+.alert-content {
+	grid-area: content;
+}
+.alert-close-button {
+	grid-area: close-button;
+}
+.alert-actions {
+	grid-area: actions;
+}

package/dist/components/alert/alert.stories.svelte

@@ -0,0 +1,40 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Root from '../root/root.svelte';
+	import { Alert as AAlert } from './index';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Alert',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script>
+	import { Button } from '../button';
+
+	let dismissibleDismissed = $state(false);
+	let withActionsDismissed = $state(false);
+</script>
+
+<Story name="Alert" args={{}}>
+	{#snippet children(args)}
+		<Root class="p-4">
+			<AAlert.Root variant="info">
+				<AAlert.Icon />
+				<AAlert.Content>
+					<AAlert.Title>Info Alert</AAlert.Title>
+					<AAlert.Description>
+						This is an informational message that provides context about something.
+					</AAlert.Description>
+				</AAlert.Content>
+			</AAlert.Root>
+		</Root>
+	{/snippet}
+</Story>

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

@@ -0,0 +1,6 @@
+export default Alert;
+type Alert = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const Alert: import("svelte").Component<Record<string, never>, {}, "">;

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

@@ -0,0 +1,7 @@
+export { default as Root } from './alert-root.svelte';
+export { default as Icon } from './alert-icon.svelte';
+export { default as Title } from './alert-title.svelte';
+export { default as Description } from './alert-description.svelte';
+export { default as Content } from './alert-content.svelte';
+export { default as Actions } from './alert-actions.svelte';
+export { default as CloseButton } from './alert-close-button.svelte';

package/dist/components/alert/atoms.js

@@ -0,0 +1,7 @@
+export { default as Root } from './alert-root.svelte';
+export { default as Icon } from './alert-icon.svelte';
+export { default as Title } from './alert-title.svelte';
+export { default as Description } from './alert-description.svelte';
+export { default as Content } from './alert-content.svelte';
+export { default as Actions } from './alert-actions.svelte';
+export { default as CloseButton } from './alert-close-button.svelte';

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

@@ -0,0 +1,2 @@
+import { AlertBond } from './bond.svelte';
+export declare function alert(callback: (node: HTMLElement, bond?: AlertBond) => any): (node: HTMLElement) => any;

package/dist/components/alert/attachments.svelte.js

@@ -0,0 +1,5 @@
+import { AlertBond } from './bond.svelte';
+export function alert(callback) {
+    const bond = AlertBond.get();
+    return (node) => callback(node, bond);
+}

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

@@ -0,0 +1,65 @@
+import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
+export type AlertBondProps = BondStateProps & {
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    dismissible?: boolean;
+    dismissed?: boolean;
+    disabled?: boolean;
+    extend?: Record<string, unknown>;
+};
+export type AlertBondElements = {
+    root: HTMLElement;
+    icon: HTMLElement;
+    title: HTMLElement;
+    description: HTMLElement;
+    content: HTMLElement;
+    actions: HTMLElement;
+    closeButton: HTMLElement;
+};
+export declare class AlertBond<State extends AlertBondState<AlertBondProps> = AlertBondState<AlertBondProps>> extends Bond<AlertBondProps, State, AlertBondElements> {
+    static CONTEXT_KEY: string;
+    constructor(s: State);
+    share(): this;
+    root(props?: Record<string, unknown>): {
+        id: string;
+        role: string;
+        'aria-labelledby': string;
+        'aria-describedby': string;
+        'aria-disabled': boolean;
+        'data-variant': "success" | "error" | "info" | "warning";
+        'data-dismissed': boolean;
+        'data-dismissible': boolean;
+    };
+    icon(props?: Record<string, unknown>): {
+        id: string;
+        'aria-hidden': boolean;
+    };
+    title(props?: Record<string, unknown>): {
+        id: string;
+    };
+    description(props?: Record<string, unknown>): {
+        id: string;
+    };
+    content(props?: Record<string, unknown>): {
+        id: string;
+    };
+    actions(props?: Record<string, unknown>): {
+        id: string;
+    };
+    closeButton(props?: Record<string, unknown>): {
+        id: string;
+        type: string;
+        'aria-label': string;
+        'aria-expanded': boolean;
+        onclick: () => void;
+    };
+    static get(): AlertBond | undefined;
+    static set(bond: AlertBond): AlertBond;
+}
+export declare class AlertBondState<Props extends AlertBondProps> extends BondState<Props> {
+    constructor(props: () => Props);
+    dismiss(): void;
+    restore(): void;
+    get isDismissed(): boolean;
+    get isDismissible(): boolean;
+    get variant(): "success" | "error" | "info" | "warning";
+}

package/dist/components/alert/bond.svelte.js

@@ -0,0 +1,126 @@
+import { Bond, BondState } from '../../shared/bond.svelte';
+import { getContext, setContext } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+export class AlertBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/alert';
+    constructor(s) {
+        super(s);
+    }
+    share() {
+        return AlertBond.set(this);
+    }
+    root(props = {}) {
+        const variant = this.state.props.variant ?? 'info';
+        const dismissed = this.state.props.dismissed ?? false;
+        const disabled = this.state.props.disabled ?? false;
+        return {
+            id: `alert-root-${this.id}`,
+            role: 'alert',
+            'aria-labelledby': `alert-title-${this.id}`,
+            'aria-describedby': `alert-description-${this.id}`,
+            'aria-disabled': disabled,
+            'data-variant': variant,
+            'data-dismissed': dismissed,
+            'data-dismissible': this.state.props.dismissible ?? false,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.root = node;
+            }
+        };
+    }
+    icon(props = {}) {
+        return {
+            id: `alert-icon-${this.id}`,
+            'aria-hidden': true,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.icon = node;
+            }
+        };
+    }
+    title(props = {}) {
+        return {
+            id: `alert-title-${this.id}`,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.title = node;
+            }
+        };
+    }
+    description(props = {}) {
+        return {
+            id: `alert-description-${this.id}`,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.description = node;
+            }
+        };
+    }
+    content(props = {}) {
+        return {
+            id: `alert-content-${this.id}`,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.content = node;
+            }
+        };
+    }
+    actions(props = {}) {
+        return {
+            id: `alert-actions-${this.id}`,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.actions = node;
+            }
+        };
+    }
+    closeButton(props = {}) {
+        const dismissed = this.state.props.dismissed ?? false;
+        return {
+            id: `alert-close-button-${this.id}`,
+            type: 'button',
+            'aria-label': 'Dismiss alert',
+            'aria-expanded': !dismissed,
+            onclick: () => this.state.dismiss(),
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.closeButton = node;
+            }
+        };
+    }
+    static get() {
+        return getContext(AlertBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(AlertBond.CONTEXT_KEY, bond);
+    }
+}
+export class AlertBondState extends BondState {
+    constructor(props) {
+        super(props);
+    }
+    dismiss() {
+        if (this.props.dismissible && !this.props.disabled) {
+            // Update the dismissed state through props if mutable
+            const props = this.props;
+            if ('dismissed' in props) {
+                props.dismissed = true;
+            }
+        }
+    }
+    restore() {
+        const props = this.props;
+        if ('dismissed' in props) {
+            props.dismissed = false;
+        }
+    }
+    get isDismissed() {
+        return this.props.dismissed ?? false;
+    }
+    get isDismissible() {
+        return this.props.dismissible ?? false;
+    }
+    get variant() {
+        return this.props.variant ?? 'info';
+    }
+}

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

@@ -0,0 +1,2 @@
+export * as Alert from './atoms';
+export type { AlertBondProps, AlertBondElements, AlertBond, AlertBondState } from './bond.svelte';

package/dist/components/alert/index.js

@@ -0,0 +1 @@
+export * as Alert from './atoms';

package/dist/components/atom/html-atom.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ComponentBase, HtmlAtomProps, SnippetBase } from './types';
+	import { RootBond } from '../root';
+	import { HtmlElement } from '../element';
+	import { cn } from '../../utils';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const rootBond = RootBond.get();
+
+	let {
+		class: klass = '',
+		as = 'div',
+		base = undefined,
+		children = undefined,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const isSnippet = typeof base === 'function' && base.name !== 'wrapper';
+
+	const snippet = $derived(base as SnippetBase);
+
+	const atom = rootBond?.state?.props?.renderers?.html ?? HtmlElement;
+
+	const Component = $derived(base ?? atom) as ComponentBase;
+</script>
+
+{#if isSnippet}
+	{@render snippet({ class: cn(klass), as, children, ...restProps })}
+{:else}
+	<Component class={cn(klass)} {as} {...restProps}>
+		{@render children?.()}
+	</Component>
+{/if}

package/dist/components/atom/html-atom.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: Record<string, unknown> & {
+        [key: string]: any;
+        class?: import("svelte/elements").ClassValue;
+        as?: (string & {}) | E | undefined;
+        global?: boolean;
+        initial?: import("..").NodeFunction<E> | undefined;
+        enter?: import("..").TransitionFunction<E> | undefined;
+        exit?: import("..").TransitionFunction<E> | undefined;
+        animate?: import("..").NodeFunction<E> | undefined;
+        onmount?: import("..").NodeFunction<E> | undefined;
+        ondestroy?: import("..").NodeFunction<E> | undefined;
+        children?: import("svelte").Snippet;
+    } & {
+        base?: B | undefined;
+    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const HtmlAtom: $$IsomorphicComponent;
+type HtmlAtom<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof HtmlAtom<E, B>>;
+export default HtmlAtom;

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

@@ -0,0 +1 @@
+export { default as HtmlAtom, type HtmlAtomProps, type Base, type ComponentBase, type SnippetBase } from './html-atom.svelte';

package/dist/components/atom/index.js

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

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

@@ -0,0 +1,9 @@
+import type { Component, Snippet } from 'svelte';
+import { type HtmlElementTagName } from '../element';
+import type { HtmlElementProps } from '../element/types';
+export type ComponentBase = Component;
+export type SnippetBase = Snippet;
+export type Base<Args = any> = Args extends Record<string, any> ? ComponentBase : Args extends unknown[] ? SnippetBase : never;
+export type HtmlAtomProps<E extends HtmlElementTagName = HtmlElementTagName, B extends Base<any> = Base> = HtmlElementProps<E> & {
+    base?: B;
+};

package/dist/components/atom/types.js

@@ -0,0 +1 @@
+import {} from '../element';

package/dist/components/avatar/avatar.css

@@ -0,0 +1,3 @@
+[data-type='avatar'][data-error='true'] > img {
+	display: none;
+}

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

@@ -0,0 +1,27 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import AvatarCmp from './avatar.svelte';
+	import Root from '../root/root.svelte';
+	import CalendarRegularIcon from '../../icons/icon-arrow-down.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Avatar'
+	});
+</script>
+
+<Story name="Avatar">
+	<Root>
+		{#snippet children({ args })}
+			<div class="flex h-full w-full items-center justify-center gap-4">
+				<AvatarCmp alt="Abdelhalim Riache" />
+
+				<AvatarCmp src={CalendarRegularIcon} alt="Abdelhalim Riache" />
+
+				<AvatarCmp
+					src="https://sevennaturalwonders.org/wp-content/uploads/2023/12/1-Mount-Fuji.jpg"
+					alt="Mount Fuji"
+				/>
+			</div>
+		{/snippet}
+	</Root>
+</Story>

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

@@ -0,0 +1,26 @@
+export default Avatar;
+type Avatar = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/avatar/avatar.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import { Icon } from '../icon';
+	import type { AvatarProps } from './types';
+	import './avatar.css';
+
+	let { class: klass = '', src = '', alt = '' }: AvatarProps = $props();
+
+	let hasError = $state(false);
+
+	function getInitials(value: string) {
+		return value
+			.split(' ')
+			.slice(0, 2)
+			.map((d) => d.at(0)?.toUpperCase() ?? '')
+			.join('');
+	}
+</script>
+
+<HtmlAtom
+	class={[
+		'border-border bg-card hover:bg-card/95 active:bg-card/90 relative flex aspect-square h-10 items-center justify-center overflow-hidden rounded-full border text-sm font-semibold',
+		klass
+	]}
+	data-type="avatar"
+	data-error={hasError}
+>
+	{#if typeof src === 'string'}
+		<div class="absolute inset-0 flex items-center justify-center">
+			<div>{getInitials(alt)}</div>
+		</div>
+		<img
+			class="icare-avatar-image z-[1] h-full w-full"
+			{alt}
+			role="presentation"
+			aria-hidden="true"
+			{src}
+			onerror={() => {
+				hasError = true;
+			}}
+		/>
+	{:else}
+		<Icon aria-hidden="true" class="fui-avatar-icon h-full p-[4px] text-current" {src} />
+	{/if}
+</HtmlAtom>

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

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

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

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

package/dist/components/avatar/index.js

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

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

@@ -0,0 +1,7 @@
+import type { Component } from 'svelte';
+export type AvatarProps = {
+    class?: string;
+    src?: string | Component;
+    alt?: string;
+    readonly element?: HTMLElement;
+};

package/dist/components/avatar/types.js

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

package/dist/components/badge/badge.stories.svelte

@@ -0,0 +1,17 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Root from '../root/root.svelte';
+	import { Badge as BadgeModule } from '.';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Badge'
+	});
+</script>
+
+<Story name="Badge">
+	<Root>
+		{#snippet children({ args })}
+			<BadgeModule>Badge</BadgeModule>
+		{/snippet}
+	</Root>
+</Story>

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

@@ -0,0 +1,26 @@
+export default Badge;
+type Badge = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Badge: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}