@immich/ui 0.11.0 → 0.12.1

package/dist/components/Card/Card.svelte

@@ -48,7 +48,7 @@
 		variants: {
 			color: {
 				primary: 'bg-primary/25 dark:bg-primary/25',
-				secondary: 'bg-dark/5 text-dark dark:bg-dark/25',
+				secondary: 'bg-gray-50 text-dark dark:bg-neutral-900 dark:text-white',
 				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/Code/Code.svelte

@@ -1,16 +1,26 @@
 <script lang="ts">
 	import type { Size, TextColor } 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 = {
 		color?: TextColor;
 		size?: Size;
 		variant?: 'filled';
+		class?: string;
 		children: Snippet;
-	};
+	} & HTMLAttributes<HTMLElement>;
 
-	const { size = 'medium', variant, color = 'secondary', children }: Props = $props();
+	const {
+		class: className,
+		size = 'medium',
+		variant,
+		color = 'secondary',
+		children,
+		...restProps
+	}: Props = $props();
 
 	const styles = tv({
 		base: 'font-monospace',
@@ -33,8 +43,8 @@
 			filledColor: {
 				false: '',
 				muted: 'bg-gray-600 text-light dark:bg-gray-800',
-				primary: 'bg-primary text-light',
-				secondary: 'bg-dark text-light',
+				primary: 'bg-gray-200 text-primary dark:bg-gray-700',
+				secondary: 'bg-gray-700 text-light dark:bg-gray-200',
 				success: 'bg-success text-light',
 				danger: 'bg-danger text-light',
 				warning: 'bg-warning text-light',
@@ -53,10 +63,14 @@
 </script>
 
 <code
-	class={styles({
-		filled: variant === 'filled',
-		filledColor: variant === 'filled' && color,
-		textColor: color,
-		size,
-	})}>{@render children()}</code
+	class={cleanClass(
+		styles({
+			filled: variant === 'filled',
+			filledColor: variant === 'filled' && color,
+			textColor: color,
+			size,
+		}),
+		className,
+	)}
+	{...restProps}>{@render children()}</code
 >

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

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

package/dist/components/Form/Field.svelte

@@ -20,7 +20,7 @@
 	const helperTextChildren = $derived(getChildSnippet(ChildKey.HelperText));
 </script>
 
-<div>
+<div class="w-full">
 	{@render children()}
 	{#if helperTextChildren}
 		<div class={cleanClass('pt-1', helperTextChildren.class)}>

package/dist/components/Form/Input.svelte

@@ -44,8 +44,8 @@
 				round: 'rounded-full',
 			},
 			padding: {
-				base: 'px-3 py-2',
-				round: 'px-4 py-2',
+				base: 'px-4 py-3',
+				round: 'px-5 py-3',
 			},
 			roundedSize: {
 				tiny: 'rounded-xl',
@@ -73,12 +73,12 @@
 	const labelId = `label-${id}`;
 </script>
 
-<div class="flex flex-col gap-1" bind:this={containerRef}>
+<div class="flex w-full flex-col gap-1" bind:this={containerRef}>
 	{#if label}
 		<label id={labelId} for={inputId} class={labelStyles({ size })}>{label}</label>
 	{/if}
 
-	<div class="relative">
+	<div class="relative mt-1.5 w-full">
 		<input
 			id={label && inputId}
 			aria-labelledby={label && labelId}

package/dist/components/Heading/Heading.svelte

@@ -2,6 +2,7 @@
 	import type { HeadingColor, HeadingSize } 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 = {
@@ -10,9 +11,9 @@
 		class?: string;
 
 		children: Snippet;
-	};
+	} & HTMLAttributes<HTMLHeadingElement>;
 
-	const { color, size = 'medium', class: className, children }: Props = $props();
+	const { color, size = 'medium', class: className, children, ...restProps }: Props = $props();
 
 	const sizes = {
 		title: 'h1',
@@ -50,6 +51,6 @@
 	const classList = $derived(cleanClass(styles({ color, size }), className));
 </script>
 
-<svelte:element this={tag} class={classList} role="heading">
+<svelte:element this={tag} class={classList} role="heading" {...restProps}>
 	{@render children()}
 </svelte:element>

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

@@ -1,9 +1,10 @@
 import type { HeadingColor, HeadingSize } from '../../types.js';
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 declare const Heading: import("svelte").Component<{
     size: HeadingSize;
     color?: HeadingColor;
     class?: string;
     children: Snippet;
-}, {}, "">;
+} & HTMLAttributes<HTMLHeadingElement>, {}, "">;
 export default Heading;

package/dist/components/IconButton/IconButton.svelte

@@ -7,5 +7,5 @@
 </script>
 
 <Button icon {...buttonProps}>
-	<Icon {icon} {flipped} {flopped} size="66%"></Icon>
+	<Icon {icon} {flipped} {flopped} size="45%"></Icon>
 </Button>

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -1,18 +1,25 @@
 <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 { Theme, type Color, type Size, type Variants } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
 
 	type Props = {
 		size?: Size;
 		class?: string;
+		color?: Color;
 		variant?: Variants;
 		onChange?: (theme: Theme) => void;
 	};
 
-	const { variant = 'ghost', size, class: className, onChange }: Props = $props();
+	const {
+		color = 'primary',
+		variant = 'ghost',
+		size,
+		class: className,
+		onChange,
+	}: Props = $props();
 
 	const handleToggleTheme = () => {
 		theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
@@ -24,7 +31,7 @@
 
 <IconButton
 	shape="round"
-	color="primary"
+	{color}
 	{size}
 	{variant}
 	icon={themeIcon}

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

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

package/dist/internal/Button.svelte

@@ -41,11 +41,11 @@
 				true: 'w-full',
 			},
 			textPadding: {
-				tiny: 'px-2 py-1',
-				small: 'px-2 py-1',
-				medium: 'px-4 py-2',
-				large: 'px-4 py-2',
-				giant: 'px-8 py-4',
+				tiny: 'px-3 py-1',
+				small: 'px-4 py-1.5',
+				medium: 'px-5 py-2',
+				large: 'px-8 py-2.5',
+				giant: 'px-10 py-3',
 			},
 			textSize: {
 				tiny: 'text-xs',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.11.0",
+	"version": "0.12.1",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",