@immich/ui 0.14.2 → 0.16.0

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

@@ -1,10 +1,12 @@
 import type { Color, Size } from '../../types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-declare const Kbd: import("svelte").Component<{
+type Props = {
     size?: Size;
     color?: Color;
     class?: string;
     children?: Snippet;
-} & HTMLAttributes<HTMLElement>, {}, "">;
+} & HTMLAttributes<HTMLElement>;
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
 export default Kbd;

package/dist/components/Label/Label.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { styles } from '../../styles.js';
+	import type { LabelProps } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+
+	const { label, size, color, class: className, children, ...restProps }: LabelProps = $props();
+</script>
+
+<label class={cleanClass(styles.label({ size, color }), className)} {...restProps}>
+	{#if label}{label}{/if}
+	{@render children?.()}
+</label>

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

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

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

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
-declare const Link: import("svelte").Component<{
+type Props = {
     class?: string;
     children: Snippet;
     href: string;
-} & HTMLAnchorAttributes, {}, "">;
+} & HTMLAnchorAttributes;
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
 export default Link;

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

@@ -1,7 +1,9 @@
 import type { Color, Size } from '../../types.js';
-declare const LoadingSpinner: import("svelte").Component<{
+interface Props {
     size?: Size;
     color?: Color;
     class?: string;
-}, {}, "">;
+}
+declare const LoadingSpinner: import("svelte").Component<Props, {}, "">;
+type LoadingSpinner = ReturnType<typeof LoadingSpinner>;
 export default LoadingSpinner;

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

@@ -1,7 +1,9 @@
 import { type Size } from '../../types.js';
-declare const Logo: import("svelte").Component<{
-    size?: Size | "landing";
-    variant?: "stacked" | "inline" | "logo" | "icon";
+type Props = {
+    size?: Size | 'landing';
+    variant?: 'stacked' | 'inline' | 'logo' | 'icon';
     class?: string;
-}, {}, "">;
+};
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
 export default Logo;

package/dist/components/Modal/Modal.svelte

@@ -13,7 +13,7 @@
 	import { type Snippet } from 'svelte';
 	import { tv } from 'tailwind-variants';
 
-	type Props = Dialog.RootProps & {
+	type Props = {
 		title: string;
 		size?: ModalSize;
 		class?: string;
@@ -26,11 +26,10 @@
 	let {
 		title,
 		size = 'medium',
-		open = $bindable(true),
+		open = true,
 		onClose,
 		class: className,
 		children,
-		...restProps
 	}: Props = $props();
 
 	const modalStyles = tv({
@@ -51,14 +50,14 @@
 	const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
 	const footerChildren = $derived(getChildSnippet(ChildKey.ModalFooter));
 
-	const handleClose = () => {
-		open = false;
-		onClose?.();
-		restProps?.onOpenChange?.(false);
+	const onChange = (value: boolean) => {
+		if (!value) {
+			onClose?.();
+		}
 	};
 </script>
 
-<Dialog.Root bind:open {...restProps}>
+<Dialog.Root {open} onOpenChange={onChange}>
 	<Dialog.Portal>
 		<Dialog.Overlay class="absolute left-0 top-0 flex h-dvh w-screen backdrop-blur" />
 		<Dialog.Content
@@ -71,7 +70,9 @@
 					<CardHeader class="border-0 py-2">
 						<div class="flex items-center justify-between">
 							<CardTitle>{title}</CardTitle>
-							<CloseButton size="large" onclick={handleClose} />
+							<Dialog.Close>
+								<CloseButton size="large" onclick={() => onChange(false)} />
+							</Dialog.Close>
 						</div>
 					</CardHeader>
 

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

@@ -1,11 +1,6 @@
 import type { ModalSize } from '../../types.js';
 import { type Snippet } from 'svelte';
-declare const Modal: import("svelte").Component<{
-    open?: boolean;
-    onOpenChange?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
-} & {
-    children?: Snippet | undefined;
-} & {
+type Props = {
     title: string;
     size?: ModalSize;
     class?: string;
@@ -13,5 +8,7 @@ declare const Modal: import("svelte").Component<{
     expandable?: boolean;
     children: Snippet;
     onClose?: () => void;
-}, {}, "open">;
+};
+declare const Modal: import("svelte").Component<Props, {}, "">;
+type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/components/Modal/ModalBody.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { Snippet } from 'svelte';
-declare const ModalBody: import("svelte").Component<{
+type Props = {
     children: Snippet;
-}, {}, "">;
+};
+declare const ModalBody: import("svelte").Component<Props, {}, "">;
+type ModalBody = ReturnType<typeof ModalBody>;
 export default ModalBody;

package/dist/components/Modal/ModalFooter.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { Snippet } from 'svelte';
-declare const ModalFooter: import("svelte").Component<{
+type Props = {
     children: Snippet;
-}, {}, "">;
+};
+declare const ModalFooter: import("svelte").Component<Props, {}, "">;
+type ModalFooter = ReturnType<typeof ModalFooter>;
 export default ModalFooter;

package/dist/components/Modal/ModalHeader.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { Snippet } from 'svelte';
-declare const ModalHeader: import("svelte").Component<{
+type Props = {
     children: Snippet;
-}, {}, "">;
+};
+declare const ModalHeader: import("svelte").Component<Props, {}, "">;
+type ModalHeader = ReturnType<typeof ModalHeader>;
 export default ModalHeader;

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

@@ -1,3 +1,4 @@
 import type { MultiSelectProps, SelectItem } from '../../types.js';
 declare const MultiSelect: import("svelte").Component<MultiSelectProps<SelectItem>, {}, "value">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
 export default MultiSelect;

package/dist/components/Navbar/NavbarGroup.svelte.d.ts

@@ -1,4 +1,6 @@
-declare const NavbarGroup: import("svelte").Component<{
+type Props = {
     title: string;
-}, {}, "">;
+};
+declare const NavbarGroup: import("svelte").Component<Props, {}, "">;
+type NavbarGroup = ReturnType<typeof NavbarGroup>;
 export default NavbarGroup;

package/dist/components/Navbar/NavbarItem.svelte

@@ -12,7 +12,7 @@
 		isActive?: () => boolean;
 	} & { icon?: string & Omit<IconProps, 'icon'> };
 
-	const startsWithHref = () => page.url.pathname.startsWith(href);
+	const matchesPath = () => page.url.pathname === href;
 
 	let {
 		href,
@@ -23,7 +23,7 @@
 		...iconProps
 	}: Props = $props();
 
-	const isActive = isActiveOverride ?? startsWithHref;
+	const isActive = isActiveOverride ?? matchesPath;
 	let active = $derived(activeOverride ?? isActive());
 
 	const styles = tv({

package/dist/components/Navbar/NavbarItem.svelte.d.ts

@@ -1,11 +1,13 @@
 import type { IconProps } from '../../types.js';
-declare const NavbarItem: import("svelte").Component<{
+type Props = {
     title: string;
     active?: boolean;
     href: string;
-    variant?: "compact";
+    variant?: 'compact';
     isActive?: () => boolean;
 } & {
-    icon?: string & Omit<IconProps, "icon">;
-}, {}, "">;
+    icon?: string & Omit<IconProps, 'icon'>;
+};
+declare const NavbarItem: import("svelte").Component<Props, {}, "">;
+type NavbarItem = ReturnType<typeof NavbarItem>;
 export default NavbarItem;

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

@@ -1,7 +1,9 @@
 import type { Snippet } from 'svelte';
-declare const Scrollable: import("svelte").Component<{
+type Props = {
     class?: string;
     children?: Snippet;
     transition?: TransitionEvent;
-}, {}, "">;
+};
+declare const Scrollable: import("svelte").Component<Props, {}, "">;
+type Scrollable = ReturnType<typeof Scrollable>;
 export default Scrollable;

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

@@ -1,3 +1,4 @@
 import type { SelectItem, SelectProps } from '../../types.js';
 declare const Select: import("svelte").Component<SelectProps<SelectItem>, {}, "value">;
+type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/components/Stack/HStack.svelte.d.ts

@@ -6,4 +6,5 @@ declare const HStack: import("svelte").Component<{
     fullWidth?: boolean;
     fullHeight?: boolean;
 }, {}, "">;
+type HStack = ReturnType<typeof HStack>;
 export default HStack;

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

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

package/dist/components/Stack/VStack.svelte.d.ts

@@ -6,4 +6,5 @@ declare const VStack: import("svelte").Component<{
     fullWidth?: boolean;
     fullHeight?: boolean;
 }, {}, "">;
+type VStack = ReturnType<typeof VStack>;
 export default VStack;

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

@@ -1,9 +1,11 @@
 import type { Size } from '../../types.js';
 import type { Snippet } from 'svelte';
-declare const SupporterBadge: import("svelte").Component<{
-    effect?: "hover" | "always";
+type Props = {
+    effect?: 'hover' | 'always';
     text?: string;
     size?: Size;
     children?: Snippet;
-}, {}, "">;
+};
+declare const SupporterBadge: import("svelte").Component<Props, {}, "">;
+type SupporterBadge = ReturnType<typeof SupporterBadge>;
 export default SupporterBadge;

package/dist/components/Switch/Switch.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { getFieldContext } from '../../common/context.svelte.js';
+	import Label from '../Label/Label.svelte';
 	import type { Color } from '../../types.js';
-	import { cleanClass } from '../../utils.js';
+	import { cleanClass, generateId } from '../../utils.js';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { tv } from 'tailwind-variants';
 
@@ -11,22 +12,19 @@
 		disabled?: boolean;
 		class?: string;
 		onToggle?: ((checked: boolean) => void) | undefined;
-	} & HTMLInputAttributes;
+		inputSize?: HTMLInputAttributes['size'];
+	} & Omit<HTMLInputAttributes, 'size'>;
 
 	let {
 		checked = $bindable(false),
 		class: className,
 		color = 'primary',
 		onToggle = undefined,
+		inputSize,
 		...restProps
 	}: Props = $props();
 
-	const {
-		label,
-		readOnly = false,
-		required = false,
-		disabled = false,
-	} = $derived(getFieldContext());
+	const { readOnly, required, disabled, label, ...labelProps } = $derived(getFieldContext());
 
 	const enabled = $derived(checked && !disabled);
 
@@ -75,12 +73,21 @@
 			},
 		},
 	});
+
+	const id = generateId();
+	const inputId = `input-${id}`;
+	const labelId = `label-${id}`;
 </script>
 
-<label class={cleanClass(className)}>
-	{label}
-	<span class={wrapper({ disabled })}>
+<div class="flex w-full justify-between gap-1">
+	{#if label}
+		<Label id={labelId} for={inputId} {label} {...labelProps} />
+	{/if}
+
+	<span class={cleanClass(wrapper({ disabled }), className)}>
 		<input
+			id={inputId}
+			aria-labelledby={label && labelId}
 			class="hidden"
 			type="checkbox"
 			bind:checked
@@ -91,9 +98,10 @@
 			aria-disabled={disabled}
 			readonly={readOnly}
 			aria-readonly={readOnly}
+			size={inputSize}
 			{...restProps}
 		/>
 		<span class={bar({ fillColor: enabled ? color : 'default' })}> </span>
 		<span class={dot({ checked: enabled, fillColor: enabled ? color : 'default' })}></span>
 	</span>
-</label>
+</div>

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

@@ -1,10 +1,13 @@
 import type { Color } from '../../types.js';
 import type { HTMLInputAttributes } from 'svelte/elements';
-declare const Switch: import("svelte").Component<{
+type Props = {
     checked?: boolean;
     color?: Color;
     disabled?: boolean;
     class?: string;
     onToggle?: ((checked: boolean) => void) | undefined;
-} & HTMLInputAttributes, {}, "checked">;
+    inputSize?: HTMLInputAttributes['size'];
+} & Omit<HTMLInputAttributes, 'size'>;
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
 export default Switch;

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

@@ -1,11 +1,13 @@
 import type { Size, TextColor } from '../../types.js';
 import type { Snippet } from 'svelte';
-declare const Text: import("svelte").Component<{
+type Props = {
     color?: TextColor;
     class?: string;
     size?: Size;
     children: Snippet;
-    variant?: "italic";
-    fontWeight?: "light" | "normal" | "semi-bold" | "bold";
-}, {}, "">;
+    variant?: 'italic';
+    fontWeight?: 'light' | 'normal' | 'semi-bold' | 'bold';
+};
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
 	import IconButton from '../IconButton/IconButton.svelte';
 	import { theme } from '../../services/theme.svelte.js';
-	import { Theme, type Color, type Size, type Variants } from '../../types.js';
+	import { t } from '../../services/translation.svelte.js';
+	import {
+		Theme,
+		type Color,
+		type Size,
+		type TranslationProps,
+		type Variants,
+	} from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
 
@@ -10,6 +17,7 @@
 		class?: string;
 		color?: Color;
 		variant?: Variants;
+		translations?: TranslationProps<'darkTheme'>;
 		onChange?: (theme: Theme) => void;
 	};
 
@@ -18,6 +26,7 @@
 		variant = 'ghost',
 		size,
 		class: className,
+		translations,
 		onChange,
 	}: Props = $props();
 
@@ -37,4 +46,7 @@
 	icon={themeIcon}
 	onclick={handleToggleTheme}
 	class={cleanClass(className)}
+	aria-label={t('darkTheme', translations)}
+	role="switch"
+	aria-checked={theme.value === Theme.Dark}
 />

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

@@ -1,9 +1,12 @@
-import { Theme, type Color, type Size, type Variants } from '../../types.js';
-declare const ThemeSwitcher: import("svelte").Component<{
+import { Theme, type Color, type Size, type TranslationProps, type Variants } from '../../types.js';
+type Props = {
     size?: Size;
     class?: string;
     color?: Color;
     variant?: Variants;
+    translations?: TranslationProps<'darkTheme'>;
     onChange?: (theme: Theme) => void;
-}, {}, "">;
+};
+declare const ThemeSwitcher: import("svelte").Component<Props, {}, "">;
+type ThemeSwitcher = ReturnType<typeof ThemeSwitcher>;
 export default ThemeSwitcher;

package/dist/index.d.ts

@@ -21,17 +21,18 @@ export { default as CardHeader } from './components/Card/CardHeader.svelte';
 export { default as CardTitle } from './components/Card/CardTitle.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
+export { default as Container } from './components/Container/Container.svelte';
 export { default as Checkbox } from './components/Form/Checkbox.svelte';
 export { default as Field } from './components/Form/Field.svelte';
 export { default as HelperText } from './components/Form/HelperText.svelte';
 export { default as Input } from './components/Form/Input.svelte';
-export { default as Label } from './components/Form/Label.svelte';
 export { default as PasswordInput } from './components/Form/PasswordInput.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';
 export { default as Heading } from './components/Heading/Heading.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IconButton } from './components/IconButton/IconButton.svelte';
 export { default as Kbd } from './components/Kbd/Kbd.svelte';
+export { default as Label } from './components/Label/Label.svelte';
 export { default as Link } from './components/Link/Link.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
@@ -51,6 +52,6 @@ export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Text } from './components/Text/Text.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
 export * from './services/theme.svelte.js';
+export * from './services/translation.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
-export * from './services/translation.svelte.js';

package/dist/index.js

@@ -23,17 +23,18 @@ export { default as CardHeader } from './components/Card/CardHeader.svelte';
 export { default as CardTitle } from './components/Card/CardTitle.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
+export { default as Container } from './components/Container/Container.svelte';
 export { default as Checkbox } from './components/Form/Checkbox.svelte';
 export { default as Field } from './components/Form/Field.svelte';
 export { default as HelperText } from './components/Form/HelperText.svelte';
 export { default as Input } from './components/Form/Input.svelte';
-export { default as Label } from './components/Form/Label.svelte';
 export { default as PasswordInput } from './components/Form/PasswordInput.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';
 export { default as Heading } from './components/Heading/Heading.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IconButton } from './components/IconButton/IconButton.svelte';
 export { default as Kbd } from './components/Kbd/Kbd.svelte';
+export { default as Label } from './components/Label/Label.svelte';
 export { default as Link } from './components/Link/Link.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
@@ -54,6 +55,6 @@ export { default as Text } from './components/Text/Text.svelte';
 export { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
 // helpers
 export * from './services/theme.svelte.js';
+export * from './services/translation.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
-export * from './services/translation.svelte.js';

package/dist/internal/Button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Icon from '../components/Icon/Icon.svelte';
 	import LoadingSpinner from '../components/LoadingSpinner/LoadingSpinner.svelte';
 	import type { ButtonProps, Size } from '../types.js';
 	import { cleanClass } from '../utils.js';
@@ -21,6 +22,8 @@
 		size = 'medium',
 		loading = false,
 		fullWidth = false,
+		leadingIcon,
+		trailingIcon,
 		icon = false,
 		class: className = '',
 		children,
@@ -30,8 +33,12 @@
 	const disabled = $derived((restProps as HTMLButtonAttributes).disabled || loading);
 
 	const buttonVariants = tv({
-		base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+		base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 		variants: {
+			disabled: {
+				true: 'disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50',
+				false: '',
+			},
 			shape: {
 				rectangle: 'rounded-none',
 				'semi-round': 'rounded-xl',
@@ -55,11 +62,11 @@
 				giant: 'text-xl',
 			},
 			iconSize: {
-				tiny: 'h-4 w-4 text-xs',
-				small: 'h-6 w-6 text-sm',
-				medium: 'text-md h-8 w-8',
-				large: 'h-10 w-10 text-lg',
-				giant: 'h-12 w-12 text-lg',
+				tiny: 'h-6 w-6',
+				small: 'h-8 w-8',
+				medium: 'h-10 w-10',
+				large: 'h-12 w-12',
+				giant: 'h-14 w-14',
 			},
 			roundedSize: {
 				tiny: 'rounded-lg',
@@ -112,6 +119,7 @@
 					textPadding: icon ? undefined : size,
 					textSize: size,
 					iconSize: icon ? size : undefined,
+					disabled,
 					roundedSize: shape === 'semi-round' ? size : undefined,
 					filledColor: variant === 'filled' ? color : undefined,
 					outlineColor: variant === 'outline' ? color : undefined,
@@ -123,9 +131,26 @@
 	);
 </script>
 
+{#snippet content()}
+	{#if leadingIcon && !loading}
+		<Icon size="1.15rem" icon={leadingIcon} aria-hidden />
+	{/if}
+	{@render children?.()}
+	{#if trailingIcon}
+		<Icon size="1.15rem" icon={trailingIcon} aria-hidden />
+	{/if}
+{/snippet}
+
 {#if href}
-	<a {href} class={classList} {...restProps as HTMLAnchorAttributes}>
-		{@render children?.()}
+	<a {href} class={classList} aria-disabled={disabled} {...restProps as HTMLAnchorAttributes}>
+		{#if loading}
+			<div class="flex items-center justify-center gap-2">
+				<LoadingSpinner {color} size={spinnerSizes[size]} />
+				{@render content()}
+			</div>
+		{:else}
+			{@render content()}
+		{/if}
 	</a>
 {:else}
 	<ButtonPrimitive.Root
@@ -138,10 +163,10 @@
 		{#if loading}
 			<div class="flex items-center justify-center gap-2">
 				<LoadingSpinner {color} size={spinnerSizes[size]} />
-				{@render children?.()}
+				{@render content()}
 			</div>
 		{:else}
-			{@render children?.()}
+			{@render content()}
 		{/if}
 	</ButtonPrimitive.Root>
 {/if}

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

@@ -1,6 +1,8 @@
 import type { ButtonProps } from '../types.js';
-declare const Button: import("svelte").Component<ButtonProps & {
+type InternalButtonProps = ButtonProps & {
     /** when true, button width to height ratio is 1:1 */
     icon?: boolean;
-}, {}, "">;
+};
+declare const Button: import("svelte").Component<InternalButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/internal/Child.svelte.d.ts

@@ -1,9 +1,11 @@
 import { ChildKey } from '../constants.js';
 import { type Snippet } from 'svelte';
-declare const Child: import("svelte").Component<{
+type Props = {
     for: ChildKey;
     as: ChildKey;
     class?: string;
     children: Snippet;
-}, {}, "">;
+};
+declare const Child: import("svelte").Component<Props, {}, "">;
+type Child = ReturnType<typeof Child>;
 export default Child;