@immich/ui 0.7.0 → 0.9.0

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

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import type { Color, Size } from '../../types.js';
+	import type { Size, TextColor } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import type { Snippet } from 'svelte';
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
-		color?: Color;
+		color?: TextColor;
 		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 { Size, TextColor } from '../../types.js';
 import type { Snippet } from 'svelte';
 declare const Text: import("svelte").Component<{
-    color?: Color;
+    color?: TextColor;
     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,21 +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,21 +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,7 +1,7 @@
 <script lang="ts">
+	import LoadingSpinner from '../components/LoadingSpinner/LoadingSpinner.svelte';
 	import type { ButtonProps, Size } from '../types.js';
 	import { cleanClass } from '../utils.js';
-	import { LoadingSpinner } from '../index.js';
 	import { Button as ButtonPrimitive } from 'bits-ui';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
@@ -84,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',
@@ -123,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,

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');
+        }
+    }
+};

package/dist/types.d.ts

@@ -1,25 +1,17 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+export type TextColor = Color | 'muted';
+export type HeadingColor = TextColor;
 export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
 export type HeadingSize = Size | 'title';
 export type Shape = 'rectangle' | 'semi-round' | 'round';
-export type Variants = 'filled' | 'outline' | 'ghost' | 'hero';
+export type Variants = 'filled' | 'outline' | 'ghost';
 export type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-type ButtonOrAnchor = ({
-    href?: never;
-} & HTMLButtonAttributes) | ({
-    href: string;
-} & HTMLAnchorAttributes);
-export type CloseButtonProps = {
-    size?: Size;
-    variant?: Variants;
-};
-type ButtonBaseProps = CloseButtonProps & {
-    class?: string;
-    color?: Color;
-    shape?: Shape;
-} & ButtonOrAnchor;
+export declare enum Theme {
+    Light = "light",
+    Dark = "dark"
+}
 export type IconProps = {
     icon: string;
     title?: string;
@@ -34,11 +26,32 @@ export type IconProps = {
     strokeWidth?: number;
     strokeColor?: string;
 };
-export type IconButtonProps = ButtonBaseProps & IconProps;
-export type ButtonProps = ButtonBaseProps & {
+type ButtonOrAnchor = ({
+    href?: never;
+} & HTMLButtonAttributes) | ({
+    href: string;
+} & HTMLAnchorAttributes);
+type ButtonBase = {
+    size?: Size;
+    variant?: Variants;
+    class?: string;
+    color?: Color;
+    shape?: Shape;
+};
+export type ButtonProps = ButtonBase & {
     fullWidth?: boolean;
     loading?: boolean;
-};
+} & ButtonOrAnchor;
+export type CloseButtonProps = {
+    size?: Size;
+    variant?: Variants;
+    class?: string;
+} & ButtonOrAnchor;
+export type IconButtonProps = ButtonBase & {
+    icon: string;
+    flipped?: boolean;
+    flopped?: boolean;
+} & ButtonOrAnchor;
 type StackBaseProps = {
     class?: string;
     children: Snippet;
@@ -68,6 +81,7 @@ type BaseInputProps = {
     inputSize?: HTMLInputAttributes['size'];
 } & Omit<HTMLInputAttributes, 'size' | 'type'>;
 export type InputProps = BaseInputProps & {
+    containerRef?: HTMLElement | null;
     type?: HTMLInputAttributes['type'];
     trailingIcon?: Snippet;
 };
@@ -76,4 +90,25 @@ export type PasswordInputProps = BaseInputProps & {
     hideLabel?: string;
     isVisible?: boolean;
 };
+export type SelectItem = {
+    label?: string;
+    value: string;
+    disabled?: boolean;
+};
+export type SelectCommonProps<T extends SelectItem> = {
+    data: string[] | T[];
+    size?: Size;
+    color?: Color;
+    shape?: Shape;
+    placeholder?: string;
+    class?: string;
+};
+export type SelectProps<T extends SelectItem> = SelectCommonProps<T> & {
+    value?: T;
+    onChange?: (value: T) => void;
+};
+export type MultiSelectProps<T extends SelectItem> = SelectCommonProps<T> & {
+    value?: T[];
+    onChange?: (values: T[]) => void;
+};
 export {};

package/dist/types.js

@@ -1 +1,5 @@
-export {};
+export var Theme;
+(function (Theme) {
+    Theme["Light"] = "light";
+    Theme["Dark"] = "dark";
+})(Theme || (Theme = {}));

package/dist/utilities/byte-units.d.ts

@@ -0,0 +1,52 @@
+export declare const enum ByteUnit {
+    'B' = "B",
+    'KiB' = "KiB",
+    'MiB' = "MiB",
+    'GiB' = "GiB",
+    'TiB' = "TiB",
+    'PiB' = "PiB",
+    'EiB' = "EiB"
+}
+/**
+ * Convert bytes to best human readable unit and number of that unit.
+ *
+ * * For `1024` bytes, returns `1` and `KiB`.
+ * * For `1536` bytes, returns `1.5` and `KiB`.
+ *
+ * @param bytes number of bytes
+ * @param maxPrecision maximum number of decimal places, default is `1`
+ * @returns size (number) and unit (string)
+ */
+export declare function getBytesWithUnit(bytes: number, maxPrecision?: number): [number, ByteUnit];
+/**
+ * Localized number of bytes with a unit.
+ *
+ * For `1536` bytes:
+ * * en: `1.5 KiB`
+ * * de: `1,5 KiB`
+ *
+ * @param bytes number of bytes
+ * @param maxPrecision maximum number of decimal places, default is `1`
+ * @returns localized bytes with unit as string
+ */
+export declare function getByteUnitString(bytes: number, locale?: string, maxPrecision?: number): string;
+/**
+ * Convert to bytes from on a specified unit.
+ *
+ * * `1, 'GiB'`, returns `1073741824` bytes
+ *
+ * @param size value to be converted
+ * @param unit unit to convert from
+ * @returns bytes (number)
+ */
+export declare function convertToBytes(size: number, unit: ByteUnit): number;
+/**
+ * Convert from bytes to a specified unit.
+ *
+ * * `11073741824, 'GiB'`, returns `1` GiB
+ *
+ * @param bytes value to be converted
+ * @param unit unit to convert to
+ * @returns bytes (number)
+ */
+export declare function convertFromBytes(bytes: number, unit: ByteUnit): number;