@immich/ui 0.10.0 → 0.11.0

package/dist/components/Avatar/Avatar.svelte

@@ -24,11 +24,11 @@
 		base: 'flex h-full w-full select-none items-center justify-center font-medium',
 		variants: {
 			size: {
-				tiny: 'w-5 h-5 text-xs',
-				small: 'w-7 h-7 text-sm',
-				medium: 'w-10 h-10 text-md',
-				large: 'w-12 h-12 text-lg',
-				giant: 'w-16 h-16 text-xl',
+				tiny: 'h-5 w-5 text-xs',
+				small: 'h-7 w-7 text-sm',
+				medium: 'text-md h-10 w-10',
+				large: 'h-12 w-12 text-lg',
+				giant: 'h-16 w-16 text-xl',
 			},
 			color: {
 				primary: 'bg-primary text-light',
@@ -46,7 +46,7 @@
 	});
 
 	const wrapper = tv({
-		base: 'overflow-hidden shadow-md rounded rounded-full',
+		base: 'overflow-hidden rounded-full shadow-md',
 	});
 
 	const getInitials = (name: string) => {

package/dist/components/Card/Card.svelte

@@ -44,11 +44,11 @@
 	});
 
 	const cardStyles = tv({
-		base: 'flex flex-col w-full h-full',
+		base: 'flex h-full w-full flex-col',
 		variants: {
 			color: {
 				primary: 'bg-primary/25 dark:bg-primary/25',
-				secondary: 'bg-dark/5 dark:bg-dark/25 text-dark',
+				secondary: 'bg-dark/5 text-dark dark:bg-dark/25',
 				success: 'bg-success/15 dark:bg-success/30',
 				danger: 'bg-danger/15 dark:bg-danger/50',
 				warning: 'bg-warning/25 dark:bg-warning/50',

package/dist/components/CloseButton/CloseButton.svelte

@@ -1,9 +1,23 @@
 <script lang="ts">
 	import IconButton from '../IconButton/IconButton.svelte';
+	import { t } from '../../services/translation.svelte.js';
 	import type { CloseButtonProps } from '../../types.js';
 	import { mdiClose } from '@mdi/js';
 
-	const { size = 'medium', variant = 'ghost', ...restProps }: CloseButtonProps = $props();
+	const {
+		size = 'medium',
+		variant = 'ghost',
+		translations,
+		...restProps
+	}: CloseButtonProps = $props();
 </script>
 
-<IconButton {...restProps} icon={mdiClose} shape="round" {variant} {size} color="secondary" />
+<IconButton
+	{...restProps}
+	icon={mdiClose}
+	shape="round"
+	{variant}
+	{size}
+	color="secondary"
+	title={t('close', translations)}
+/>

package/dist/components/Code/Code.svelte

@@ -32,7 +32,7 @@
 
 			filledColor: {
 				false: '',
-				muted: 'bg-gray-600 dark:bg-gray-800 text-light',
+				muted: 'bg-gray-600 text-light dark:bg-gray-800',
 				primary: 'bg-primary text-light',
 				secondary: 'bg-dark text-light',
 				success: 'bg-success text-light',

package/dist/components/Form/Checkbox.svelte

@@ -32,7 +32,7 @@
 	} = $derived(getFieldContext());
 
 	const containerStyles = tv({
-		base: 'border-2 ring-offset-background focus-visible:ring-ring peer box-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50 overflow-hidden',
+		base: 'ring-offset-background focus-visible:ring-ring peer box-content overflow-hidden border-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',

package/dist/components/Form/Input.svelte

@@ -36,7 +36,7 @@
 	});
 
 	const inputStyles = tv({
-		base: 'w-full outline-none disabled:cursor-not-allowed bg-gray-200 dark:bg-gray-600 disabled:bg-gray-300 disabled:text-gray-200 dark:disabled:bg-gray-800 aria-readonly:text-dark/50 dark:aria-readonly:text-dark/75',
+		base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-200 aria-readonly:text-dark/50 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:aria-readonly:text-dark/75',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',

package/dist/components/Form/PasswordInput.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import Input from './Input.svelte';
 	import IconButton from '../IconButton/IconButton.svelte';
+	import { t } from '../../services/translation.svelte.js';
 	import type { PasswordInputProps } from '../../types.js';
 	import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';
 
 	let {
 		value = $bindable<string>(),
-		showLabel = 'Show password',
-		hideLabel = 'Hide password',
+		translations,
 		isVisible = $bindable<boolean>(false),
 		color = 'secondary',
 		...props
@@ -24,7 +24,7 @@
 				class="m-1"
 				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
 				onclick={() => (isVisible = !isVisible)}
-				title={isVisible ? hideLabel : showLabel}
+				title={isVisible ? t('hidePassword', translations) : t('showPassword', translations)}
 			></IconButton>
 		{/if}
 	{/snippet}

package/dist/components/Kbd/Kbd.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Color, Size } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		size?: Size;
+		color?: Color;
+		class?: string;
+		children?: Snippet;
+	} & HTMLAttributes<HTMLElement>;
+
+	const { class: className, size = 'small', children, ...restProps }: Props = $props();
+
+	const styles = tv({
+		base: 'flex flex-col rounded-md border border-b-2 bg-subtle px-1 font-mono text-dark shadow',
+		variants: {
+			size: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+		},
+	});
+</script>
+
+<kbd class={cleanClass(styles({ size }), className)} {...restProps}>
+	{@render children?.()}
+</kbd>

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

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

package/dist/components/Modal/Modal.svelte

@@ -32,7 +32,7 @@
 	}: Props = $props();
 
 	const modalStyles = tv({
-		base: 'flex  rounded-none border border-subtle bg-subtle  sm:rounded-2xl',
+		base: 'flex rounded-none border border-subtle bg-subtle sm:rounded-2xl',
 		variants: {
 			size: {
 				tiny: 'h-full sm:h-min md:max-w-64',

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

@@ -3,7 +3,6 @@ import { type Snippet } from 'svelte';
 declare const Modal: import("svelte").Component<{
     open?: boolean;
     onOpenChange?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
-    controlledOpen?: boolean;
 } & {
     children?: Snippet | undefined;
 } & {

package/dist/components/Navbar/NavbarItem.svelte

@@ -12,7 +12,7 @@
 	let { href, title, active = false, ...iconProps }: Props = $props();
 
 	const styles = tv({
-		base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 pl-5 group-hover:sm:px-5 md:px-5',
+		base: 'flex w-full place-items-center gap-4 rounded-r-full py-3 pl-5 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5 md:px-5',
 		variants: {
 			active: {
 				true: 'bg-primary/10 text-primary',

package/dist/components/SupporterBadge/SupporterBadge.svelte

@@ -24,7 +24,7 @@
 	};
 
 	const containerStyles = tv({
-		base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg  transition-all',
+		base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg transition-all',
 		variants: {
 			size: {
 				tiny: 'px-2 py-1',
@@ -34,8 +34,8 @@
 				giant: 'px-3 py-2',
 			},
 			effect: {
-				hover: 'border border-dark/25 supporter-effect-hover',
-				always: 'shadow supporter-effect',
+				hover: 'supporter-effect-hover border border-dark/25',
+				always: 'supporter-effect shadow',
 			},
 		},
 	});

package/dist/components/Switch/Switch.svelte

@@ -43,7 +43,7 @@
 	});
 
 	const bar = tv({
-		base: 'w-12 h-3 my-2 rounded-full border border-transparent',
+		base: 'my-2 h-3 w-12 rounded-full border border-transparent',
 		variants: {
 			fillColor: {
 				default: 'bg-gray-400',
@@ -58,7 +58,7 @@
 	});
 
 	const dot = tv({
-		base: 'absolute transition-colors h-6 w-6 rounded-full transition-transform duration-[400ms]',
+		base: 'absolute h-6 w-6 rounded-full transition-transform duration-[400ms]',
 		variants: {
 			checked: {
 				true: 'translate-x-6',

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import IconButton from '../IconButton/IconButton.svelte';
+	import { theme } from '../../services/theme.svelte.js';
+	import { Theme, type Size, type Variants } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
+
+	type Props = {
+		size?: Size;
+		class?: string;
+		variant?: Variants;
+		onChange?: (theme: Theme) => void;
+	};
+
+	const { variant = 'ghost', size, class: className, onChange }: Props = $props();
+
+	const handleToggleTheme = () => {
+		theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
+		onChange?.(theme.value);
+	};
+
+	const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);
+</script>
+
+<IconButton
+	shape="round"
+	color="primary"
+	{size}
+	{variant}
+	icon={themeIcon}
+	onclick={handleToggleTheme}
+	class={cleanClass(className)}
+/>

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

@@ -0,0 +1,8 @@
+import { Theme, type Size, type Variants } from '../../types.js';
+declare const ThemeSwitcher: import("svelte").Component<{
+    size?: Size;
+    class?: string;
+    variant?: Variants;
+    onChange?: (theme: Theme) => void;
+}, {}, "">;
+export default ThemeSwitcher;

package/dist/index.d.ts

@@ -19,9 +19,6 @@ export { default as CardDescription } from './components/Card/CardDescription.sv
 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 Modal } from './components/Modal/Modal.svelte';
-export { default as ModalBody } from './components/Modal/ModalBody.svelte';
-export { default as ModalFooter } from './components/Modal/ModalFooter.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';
@@ -34,9 +31,13 @@ export { default as FormatBytes } from './components/FormatBytes/FormatBytes.sve
 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 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 Modal } from './components/Modal/Modal.svelte';
+export { default as ModalBody } from './components/Modal/ModalBody.svelte';
+export { default as ModalFooter } from './components/Modal/ModalFooter.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';
@@ -48,6 +49,8 @@ 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 { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
 export * from './services/theme.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
+export * from './services/translation.svelte.js';

package/dist/index.js

@@ -21,9 +21,6 @@ export { default as CardDescription } from './components/Card/CardDescription.sv
 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 Modal } from './components/Modal/Modal.svelte';
-export { default as ModalBody } from './components/Modal/ModalBody.svelte';
-export { default as ModalFooter } from './components/Modal/ModalFooter.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';
@@ -36,9 +33,13 @@ export { default as FormatBytes } from './components/FormatBytes/FormatBytes.sve
 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 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 Modal } from './components/Modal/Modal.svelte';
+export { default as ModalBody } from './components/Modal/ModalBody.svelte';
+export { default as ModalFooter } from './components/Modal/ModalFooter.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';
@@ -50,7 +51,9 @@ 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 { default as ThemeSwitcher } from './components/ThemeSwitcher/ThemeSwitcher.svelte';
 // helpers
 export * from './services/theme.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
+export * from './services/translation.svelte.js';

package/dist/internal/Button.svelte

@@ -57,7 +57,7 @@
 			iconSize: {
 				tiny: 'h-4 w-4 text-xs',
 				small: 'h-6 w-6 text-sm',
-				medium: 'h-8 w-8 text-md',
+				medium: 'text-md h-8 w-8',
 				large: 'h-10 w-10 text-lg',
 				giant: 'h-12 w-12 text-lg',
 			},
@@ -77,12 +77,12 @@
 				info: 'bg-info text-light hover:bg-info/80',
 			},
 			outlineColor: {
-				primary: 'bg-primary/10 text-primary border border-primary hover:bg-primary/20',
-				secondary: 'bg-dark/10 text-dark border border-dark hover:bg-dark/20',
-				success: 'bg-success/10 text-success border border-success hover:bg-success/20',
-				danger: 'bg-danger/10 text-danger border border-danger hover:bg-danger/20',
-				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',
+				primary: 'border border-primary bg-primary/10 text-primary hover:bg-primary/20',
+				secondary: 'border border-dark bg-dark/10 text-dark hover:bg-dark/20',
+				success: 'border border-success bg-success/10 text-success hover:bg-success/20',
+				danger: 'border border-danger bg-danger/10 text-danger hover:bg-danger/20',
+				warning: 'border border-warning bg-warning/10 text-warning hover:bg-warning/20',
+				info: 'border border-info bg-info/10 text-info hover:bg-info/20',
 			},
 			ghostColor: {
 				primary: 'text-primary hover:bg-primary/10',

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

@@ -0,0 +1,11 @@
+import type { TranslationProps } from '../types.js';
+declare const defaultTranslations: {
+    close: string;
+    showPassword: string;
+    hidePassword: string;
+};
+export type Translations = typeof defaultTranslations;
+export declare const translate: <T extends keyof Translations>(key: T, overrides?: TranslationProps<T>) => string;
+export declare const t: <T extends keyof Translations>(key: T, overrides?: TranslationProps<T>) => string;
+export declare const setTranslations: (newTranslations: Partial<Translations>) => void;
+export {};

package/dist/services/translation.svelte.js

@@ -0,0 +1,11 @@
+const defaultTranslations = {
+    close: 'Close',
+    showPassword: 'Show password',
+    hidePassword: 'Hide password',
+};
+let translations = $state(defaultTranslations);
+export const translate = (key, overrides) => overrides?.[key] ?? translations[key];
+export const t = translate;
+export const setTranslations = (newTranslations) => {
+    translations = { ...defaultTranslations, ...newTranslations };
+};

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type { Translations } from './services/translation.svelte.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
@@ -13,6 +14,9 @@ export declare enum Theme {
     Light = "light",
     Dark = "dark"
 }
+export type TranslationProps<T extends keyof Translations> = {
+    [K in T]?: string;
+};
 export type IconProps = {
     icon: string;
     title?: string;
@@ -47,6 +51,7 @@ export type CloseButtonProps = {
     size?: Size;
     variant?: Variants;
     class?: string;
+    translations?: TranslationProps<'close'>;
 } & ButtonOrAnchor;
 export type IconButtonProps = ButtonBase & {
     icon: string;
@@ -91,8 +96,7 @@ export type InputProps = BaseInputProps & {
     trailingIcon?: Snippet;
 };
 export type PasswordInputProps = BaseInputProps & {
-    showLabel?: string;
-    hideLabel?: string;
+    translations?: TranslationProps<'showPassword' | 'hidePassword'>;
     isVisible?: boolean;
 };
 export type SelectItem = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.10.0",
+	"version": "0.11.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",
@@ -53,7 +53,7 @@
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.5",
-		"publint": "^0.2.0",
+		"publint": "^0.3.0",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"svelte-highlight": "^7.8.0",