@immich/ui 0.6.0 → 0.8.0

package/dist/components/Scrollable/Scrollable.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { cleanClass } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		class?: string;
+		children?: Snippet;
+	};
+
+	const { class: className, children }: Props = $props();
+</script>
+
+<div class={cleanClass('immich-scrollbar h-full w-full overflow-auto', className)}>
+	{@render children?.()}
+</div>
+
+<style>
+	/* width */
+	.immich-scrollbar::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+
+	/* Track */
+	.immich-scrollbar::-webkit-scrollbar-track {
+		background: #f1f1f1;
+		border-radius: 16px;
+	}
+
+	/* Handle */
+	.immich-scrollbar::-webkit-scrollbar-thumb {
+		background: rgba(85, 86, 87, 0.408);
+		border-radius: 16px;
+	}
+
+	/* Handle on hover */
+	.immich-scrollbar::-webkit-scrollbar-thumb:hover {
+		background: #4250afad;
+		border-radius: 16px;
+	}
+</style>

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

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+declare const Scrollable: import("svelte").Component<{
+    class?: string;
+    children?: Snippet;
+}, {}, "">;
+export default Scrollable;

package/dist/components/Select/Select.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import InternalSelect from '../../internal/Select.svelte';
+	import type { SelectItem, SelectProps } from '../../types.js';
+
+	type T = SelectItem;
+
+	let { value = $bindable(), onChange, ...restProps }: SelectProps<T> = $props();
+
+	const handleChange = (items: T[]) => {
+		value = items[0] as T;
+		onChange?.(value);
+	};
+</script>
+
+<InternalSelect onChange={handleChange} {...restProps} />

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

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

package/dist/components/Switch/Switch.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { getFieldContext } from '../../common/context.svelte.js';
+	import type { Color } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		checked?: boolean;
+		color?: Color;
+		disabled?: boolean;
+		class?: string;
+		onToggle?: ((checked: boolean) => void) | undefined;
+	} & HTMLInputAttributes;
+
+	let {
+		checked = $bindable(false),
+		class: className,
+		color = 'primary',
+		onToggle = undefined,
+		...restProps
+	}: Props = $props();
+
+	const {
+		label,
+		readOnly = false,
+		required = false,
+		disabled = false,
+	} = $derived(getFieldContext());
+
+	const enabled = $derived(checked && !disabled);
+
+	const handleToggle = (event: Event) => onToggle?.((event.target as HTMLInputElement).checked);
+
+	const wrapper = tv({
+		base: 'relative flex flex-col justify-center',
+		variants: {
+			disabled: {
+				true: 'cursor-not-allowed',
+				false: 'cursor-pointer',
+			},
+		},
+	});
+
+	const bar = tv({
+		base: 'w-12 h-3 my-2 rounded-full border border-transparent',
+		variants: {
+			fillColor: {
+				default: 'bg-gray-400',
+				primary: 'bg-primary/50',
+				secondary: 'bg-dark/50',
+				success: 'bg-success/50',
+				danger: 'bg-danger/50',
+				warning: 'bg-warning/50',
+				info: 'bg-info/50',
+			},
+		},
+	});
+
+	const dot = tv({
+		base: 'absolute transition-colors h-6 w-6 rounded-full transition-transform duration-[400ms]',
+		variants: {
+			checked: {
+				true: 'translate-x-6',
+				false: '',
+			},
+			fillColor: {
+				default: 'bg-gray-600',
+				primary: 'bg-primary',
+				secondary: 'bg-dark',
+				success: 'bg-success',
+				danger: 'bg-danger',
+				warning: 'bg-warning',
+				info: 'bg-info',
+			},
+		},
+	});
+</script>
+
+<label class={cleanClass(className)}>
+	{label}
+	<span class={wrapper({ disabled })}>
+		<input
+			class="hidden"
+			type="checkbox"
+			bind:checked
+			onclick={handleToggle}
+			{required}
+			aria-required={required}
+			{disabled}
+			aria-disabled={disabled}
+			readonly={readOnly}
+			aria-readonly={readOnly}
+			{...restProps}
+		/>
+		<span class={bar({ fillColor: enabled ? color : 'default' })}> </span>
+		<span class={dot({ checked: enabled, fillColor: enabled ? color : 'default' })}></span>
+	</span>
+</label>

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

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

package/dist/components/Text/Text.svelte

@@ -5,7 +5,7 @@
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
-		color?: Color;
+		color?: Color | 'muted';
 		class?: string;
 		size?: Size;
 		children: Snippet;
@@ -13,11 +13,19 @@
 		fontWeight?: 'light' | 'normal' | 'semi-bold' | 'bold';
 	};
 
-	const { color, size, fontWeight = 'normal', children, class: className }: Props = $props();
+	const {
+		color,
+		size,
+		variant,
+		fontWeight = 'normal',
+		children,
+		class: className,
+	}: Props = $props();
 
 	const styles = tv({
 		variants: {
 			color: {
+				muted: 'text-gray-600 dark:text-gray-400',
 				primary: 'text-primary',
 				secondary: 'text-dark',
 				success: 'text-success',
@@ -26,6 +34,10 @@
 				info: 'text-info',
 			},
 
+			variant: {
+				italic: 'italic',
+			},
+
 			size: {
 				tiny: 'text-xs',
 				small: 'text-sm',
@@ -44,6 +56,6 @@
 	});
 </script>
 
-<p class={cleanClass(styles({ color, size, fontWeight }), className)}>
+<p class={cleanClass(styles({ color, size, fontWeight, variant }), className)}>
 	{@render children()}
 </p>

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

@@ -1,7 +1,7 @@
 import type { Color, Size } from '../../types.js';
 import type { Snippet } from 'svelte';
 declare const Text: import("svelte").Component<{
-    color?: Color;
+    color?: Color | "muted";
     class?: string;
     size?: Size;
     children: Snippet;

package/dist/constants.d.ts

@@ -1,6 +1,9 @@
 export declare enum ChildKey {
     Field = "field",
     HelperText = "helped-text",
+    AppShell = "app-shell",
+    AppShellHeader = "app-shell-header",
+    AppShellSidebar = "app-shell-sidebar",
     Card = "card",
     CardHeader = "card-header",
     CardBody = "card-body",

package/dist/constants.js

@@ -2,6 +2,9 @@ export var ChildKey;
 (function (ChildKey) {
     ChildKey["Field"] = "field";
     ChildKey["HelperText"] = "helped-text";
+    ChildKey["AppShell"] = "app-shell";
+    ChildKey["AppShellHeader"] = "app-shell-header";
+    ChildKey["AppShellSidebar"] = "app-shell-sidebar";
     ChildKey["Card"] = "card";
     ChildKey["CardHeader"] = "card-header";
     ChildKey["CardBody"] = "card-body";

package/dist/index.d.ts

@@ -1,4 +1,17 @@
+export { default as appStoreBadge } from './assets/appstore-badge.svg';
+export { default as fdroidBadge } from './assets/fdroid-badge.svg';
+export { default as immichLogoInlineDark } from './assets/immich-logo-inline-dark.svg';
+export { default as immichLogoInlineLight } from './assets/immich-logo-inline-light.svg';
+export { default as immichLogoStackedDark } from './assets/immich-logo-stacked-dark.svg';
+export { default as immichLogoStackedLight } from './assets/immich-logo-stacked-light.svg';
+export { default as immichLogoJson } from './assets/immich-logo.json';
+export { default as immichLogo } from './assets/immich-logo.svg';
+export { default as playStoreBadge } from './assets/playstore-badge.png';
 export { default as Alert } from './components/Alert/Alert.svelte';
+export { default as AppShell } from './components/AppShell/AppShell.svelte';
+export { default as AppShellHeader } from './components/AppShell/AppShellHeader.svelte';
+export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
+export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Card } from './components/Card/Card.svelte';
 export { default as CardBody } from './components/Card/CardBody.svelte';
@@ -7,19 +20,31 @@ export { default as CardFooter } from './components/Card/CardFooter.svelte';
 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 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 Link } from './components/Link/Link.svelte';
+export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
+export { default as MultiSelect } from './components/MultiSelect/MultiSelect.svelte';
+export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
+export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
+export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
+export { default as Select } from './components/Select/Select.svelte';
 export { default as HStack } from './components/Stack/HStack.svelte';
 export { default as Stack } from './components/Stack/Stack.svelte';
 export { default as VStack } from './components/Stack/VStack.svelte';
 export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
+export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Text } from './components/Text/Text.svelte';
+export * from './services/theme.svelte.js';
 export * from './types.js';
+export * from './utilities/byte-units.js';

package/dist/index.js

@@ -1,4 +1,19 @@
+// files
+export { default as appStoreBadge } from './assets/appstore-badge.svg';
+export { default as fdroidBadge } from './assets/fdroid-badge.svg';
+export { default as immichLogoInlineDark } from './assets/immich-logo-inline-dark.svg';
+export { default as immichLogoInlineLight } from './assets/immich-logo-inline-light.svg';
+export { default as immichLogoStackedDark } from './assets/immich-logo-stacked-dark.svg';
+export { default as immichLogoStackedLight } from './assets/immich-logo-stacked-light.svg';
+export { default as immichLogoJson } from './assets/immich-logo.json';
+export { default as immichLogo } from './assets/immich-logo.svg';
+export { default as playStoreBadge } from './assets/playstore-badge.png';
+// components
 export { default as Alert } from './components/Alert/Alert.svelte';
+export { default as AppShell } from './components/AppShell/AppShell.svelte';
+export { default as AppShellHeader } from './components/AppShell/AppShellHeader.svelte';
+export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
+export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Card } from './components/Card/Card.svelte';
 export { default as CardBody } from './components/Card/CardBody.svelte';
@@ -7,19 +22,32 @@ export { default as CardFooter } from './components/Card/CardFooter.svelte';
 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 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 Link } from './components/Link/Link.svelte';
+export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
+export { default as MultiSelect } from './components/MultiSelect/MultiSelect.svelte';
+export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
+export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
+export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
+export { default as Select } from './components/Select/Select.svelte';
 export { default as HStack } from './components/Stack/HStack.svelte';
 export { default as Stack } from './components/Stack/Stack.svelte';
 export { default as VStack } from './components/Stack/VStack.svelte';
 export { default as SupporterBadge } from './components/SupporterBadge/SupporterBadge.svelte';
+export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Text } from './components/Text/Text.svelte';
+// helpers
+export * from './services/theme.svelte.js';
 export * from './types.js';
+export * from './utilities/byte-units.js';

package/dist/internal/Button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import type { ButtonProps } from '../types.js';
+	import LoadingSpinner from '../components/LoadingSpinner/LoadingSpinner.svelte';
+	import type { ButtonProps, Size } from '../types.js';
 	import { cleanClass } from '../utils.js';
 	import { Button as ButtonPrimitive } from 'bits-ui';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
@@ -18,6 +19,7 @@
 		color = 'primary',
 		shape = 'semi-round',
 		size = 'medium',
+		loading = false,
 		fullWidth = false,
 		icon = false,
 		class: className = '',
@@ -25,6 +27,8 @@
 		...restProps
 	}: InternalButtonProps = $props();
 
+	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',
 		variants: {
@@ -58,11 +62,11 @@
 				giant: 'h-12 w-12 text-lg',
 			},
 			roundedSize: {
-				tiny: 'rounded-md',
-				small: 'rounded-md',
-				medium: 'rounded-lg',
-				large: 'rounded-lg',
-				giant: 'rounded-lg',
+				tiny: 'rounded-lg',
+				small: 'rounded-lg',
+				medium: 'rounded-xl',
+				large: 'rounded-xl',
+				giant: 'rounded-2xl',
 			},
 			filledColor: {
 				primary: 'bg-primary text-light hover:bg-primary/80',
@@ -80,14 +84,6 @@
 				warning: 'bg-warning/10 text-warning border border-warning hover:bg-warning/20',
 				info: 'bg-info/10 text-info border border-info hover:bg-info/20',
 			},
-			heroColor: {
-				primary: 'bg-gradient-to-tr from-primary to-primary/60 text-light hover:bg-primary',
-				secondary: 'bg-gradient-to-tr from-dark to-dark/60 text-light hover:bg-dark',
-				success: 'bg-gradient-to-tr from-success to-success/60 text-light hover:bg-success',
-				danger: 'bg-gradient-to-tr from-danger to-danger/60 text-light hover:bg-danger',
-				warning: 'bg-gradient-to-tr from-warning to-warning/60 text-light hover:bg-warning',
-				info: 'bg-gradient-to-tr from-info to-info/60 text-light hover:bg-info',
-			},
 			ghostColor: {
 				primary: 'text-primary hover:bg-primary/10',
 				secondary: 'text-dark hover:bg-dark/10',
@@ -99,6 +95,14 @@
 		},
 	});
 
+	const spinnerSizes: Record<Size, Size> = {
+		tiny: 'tiny',
+		small: 'tiny',
+		medium: 'small',
+		large: 'medium',
+		giant: 'large',
+	};
+
 	const classList = $derived(
 		cleanClass(
 			twMerge(
@@ -111,7 +115,6 @@
 					roundedSize: shape === 'semi-round' ? size : undefined,
 					filledColor: variant === 'filled' ? color : undefined,
 					outlineColor: variant === 'outline' ? color : undefined,
-					heroColor: variant === 'hero' ? color : undefined,
 					ghostColor: variant === 'ghost' ? color : undefined,
 				}),
 				className,
@@ -129,7 +132,16 @@
 		class={classList}
 		type={type as HTMLButtonAttributes['type']}
 		{...restProps as HTMLButtonAttributes}
+		{disabled}
+		aria-disabled={disabled}
 	>
-		{@render children?.()}
+		{#if loading}
+			<div class="flex items-center justify-center gap-2">
+				<LoadingSpinner {color} size={spinnerSizes[size]} />
+				{@render children?.()}
+			</div>
+		{:else}
+			{@render children?.()}
+		{/if}
 	</ButtonPrimitive.Root>
 {/if}

package/dist/internal/Select.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { getFieldContext } from '../common/context.svelte.js';
+	import Field from '../components/Form/Field.svelte';
+	import Input from '../components/Form/Input.svelte';
+	import Icon from '../components/Icon/Icon.svelte';
+	import IconButton from '../components/IconButton/IconButton.svelte';
+	import type { SelectCommonProps, SelectItem } from '../types.js';
+	import { cleanClass, generateId } from '../utils.js';
+	import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiUnfoldMoreHorizontal } from '@mdi/js';
+	import { Select } from 'bits-ui';
+	import { tv } from 'tailwind-variants';
+
+	type T = SelectItem;
+
+	type Props = {
+		multiple?: boolean;
+		values?: T[];
+		asLabel?: (items: T[]) => string;
+		onChange?: (values: T[]) => void;
+	} & SelectCommonProps<T>;
+
+	let {
+		data,
+		shape,
+		color = 'primary',
+		size = 'medium',
+		multiple = false,
+		values = $bindable([]),
+		onChange,
+		asLabel = (options: T[]) => options.map(({ label }) => label).join(', '),
+		placeholder,
+		class: className,
+	}: Props = $props();
+
+	const asOptions = (items: string[] | T[]) => {
+		return items.map((item) => {
+			if (typeof item === 'string') {
+				return { value: item, label: item } as T;
+			}
+
+			const label = item.label ?? item.value;
+			return { ...item, label };
+		});
+	};
+
+	const options = $derived(asOptions(data));
+
+	const {
+		label,
+		readOnly = false,
+		required = false,
+		invalid = false,
+		disabled = false,
+	} = $derived(getFieldContext());
+
+	const labelStyles = tv({
+		base: '',
+		variants: {
+			size: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+		},
+	});
+
+	const id = generateId();
+	const inputId = `input-${id}`;
+	const labelId = `label-${id}`;
+
+	const selectedLabel = $derived(asLabel(values));
+
+	let inputRef = $state<HTMLElement | null>(null);
+	let contentRef = $state<HTMLElement | null>(null);
+	let ref = $state<HTMLElement | null>(null);
+
+	$effect(() => {
+		if (ref && contentRef) {
+			contentRef.style.width = `${ref.clientWidth}px`;
+		}
+	});
+
+	const findOption = (value: string) => options.find((option) => option.value === value);
+
+	const onValueChange = (items: string[] | string) => {
+		values = multiple
+			? ((items as string[]).map(findOption) as T[])
+			: [findOption(items as string) as T].filter(Boolean);
+
+		onChange?.(values);
+	};
+</script>
+
+<div class={cleanClass('flex flex-col gap-1', className)} bind:this={ref}>
+	{#if label}
+		<label id={labelId} for={inputId} class={labelStyles({ size })}>{label}</label>
+	{/if}
+
+	<Select.Root type={multiple ? 'multiple' : 'single'} {onValueChange}>
+		<Select.Trigger
+			{disabled}
+			class="w-full items-center gap-1 rounded-lg focus-visible:outline-none"
+			aria-label={placeholder}
+		>
+			<Field {readOnly} {required} {disabled} {invalid}>
+				<Input
+					bind:containerRef={inputRef}
+					id={inputId}
+					{size}
+					{shape}
+					{color}
+					{placeholder}
+					value={selectedLabel}
+					readonly
+					aria-labelledby={labelId}
+					aria-readonly
+				>
+					{#snippet trailingIcon()}
+						<IconButton
+							variant="ghost"
+							shape="round"
+							color="secondary"
+							class="m-1"
+							icon={mdiUnfoldMoreHorizontal}
+							{disabled}
+						/>
+					{/snippet}
+				</Input>
+			</Field>
+		</Select.Trigger>
+		<Select.Portal>
+			<Select.Content
+				bind:ref={contentRef}
+				class="max-h-96 select-none rounded-xl border bg-light py-3 text-dark outline-none"
+				sideOffset={10}
+			>
+				<Select.ScrollUpButton class="flex w-full items-center justify-center">
+					<Icon icon={mdiArrowUp} />
+				</Select.ScrollUpButton>
+				<Select.Viewport>
+					{#each options as { value, label, disabled }, i (i + value)}
+						<Select.Item
+							class={cleanClass(
+								'flex h-10 w-full select-none items-center px-5 py-3 text-sm outline-none duration-75 hover:bg-subtle data-[selected]:bg-primary/10 data-[disabled]:opacity-50',
+								disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+							)}
+							{value}
+							{label}
+							{disabled}
+						>
+							{#snippet children({ selected })}
+								<div
+									class="flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors"
+								>
+									<span>{label}</span>
+								</div>
+								{#if selected}
+									<div class="ml-auto">
+										<Icon icon={mdiCheck} />
+									</div>
+								{/if}
+							{/snippet}
+						</Select.Item>
+					{/each}
+				</Select.Viewport>
+				<Select.ScrollDownButton class="flex w-full items-center justify-center">
+					<Icon icon={mdiArrowDown} />
+				</Select.ScrollDownButton>
+			</Select.Content>
+		</Select.Portal>
+	</Select.Root>
+</div>

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

@@ -0,0 +1,9 @@
+import type { SelectCommonProps, SelectItem } from '../types.js';
+import { Select } from 'bits-ui';
+declare const Select: import("svelte").Component<{
+    multiple?: boolean;
+    values?: SelectItem[];
+    asLabel?: (items: SelectItem[]) => string;
+    onChange?: (values: SelectItem[]) => void;
+} & SelectCommonProps<SelectItem>, {}, "values">;
+export default Select;

package/dist/services/theme.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '../types.js';
+export declare const theme: {
+    value: Theme;
+};
+export declare const syncToDom: () => void;

package/dist/services/theme.svelte.js

@@ -0,0 +1,13 @@
+import { Theme } from '../types.js';
+export const theme = $state({ value: Theme.Dark });
+export const syncToDom = () => {
+    switch (theme.value) {
+        case Theme.Dark: {
+            document.body.classList.add('dark');
+            break;
+        }
+        default: {
+            document.body.classList.remove('dark');
+        }
+    }
+};