@immich/ui 0.8.0 → 0.9.0

package/dist/components/Alert/Alert.svelte

@@ -3,7 +3,8 @@
 	import CardHeader from '../Card/CardHeader.svelte';
 	import Icon from '../Icon/Icon.svelte';
 	import Text from '../Text/Text.svelte';
-	import type { Color } from '../../types.js';
+	import CloseButton from '../CloseButton/CloseButton.svelte';
+	import type { Color, Size } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import {
 		mdiAlertOutline,
@@ -15,13 +16,55 @@
 
 	type Props = {
 		color?: Color;
+		size?: Size;
 		icon?: string | false;
 		title?: string;
 		class?: string;
+		duration?: number;
+		closable?: boolean;
+		controlled?: boolean;
+		onClose?: () => void;
 		children?: Snippet;
 	};
 
-	const { color = 'info', icon: iconOverride, title, class: className, children }: Props = $props();
+	const {
+		color = 'primary',
+		icon: iconOverride,
+		size = 'large',
+		title,
+		class: className,
+		duration,
+		controlled,
+		closable,
+		onClose,
+		children,
+	}: Props = $props();
+
+	let open = $state(true);
+
+	const iconSizes: Record<Size, string> = {
+		tiny: '1em',
+		small: '1.25em',
+		medium: '1.5em',
+		large: '1.75em',
+		giant: '1.85em',
+	};
+
+	const handleClose = () => {
+		if (!open) {
+			return;
+		}
+
+		if (!controlled) {
+			open = false;
+		}
+
+		onClose?.();
+	};
+
+	if (duration) {
+		setTimeout(handleClose, duration);
+	}
 
 	const icons: Partial<Record<Color, string>> = {
 		success: mdiCheckCircleOutline,
@@ -34,23 +77,32 @@
 	);
 </script>
 
-<Card {color} variant="subtle" class={cleanClass(className)}>
-	<CardHeader>
-		<div class={cleanClass('flex gap-2')}>
-			{#if icon}
-				<div>
-					<Icon {icon} size="1.5em" class="h-7" />
-				</div>
-			{/if}
+{#if open}
+	<Card {color} variant="subtle" class={cleanClass(className)}>
+		<CardHeader>
+			<div class="flex justify-between">
+				<div class={cleanClass('flex gap-2')}>
+					{#if icon}
+						<div>
+							<Icon {icon} size={iconSizes[size]} />
+						</div>
+					{/if}
 
-			<div class="flex flex-col gap-2">
-				{#if title}
-					<Text size="large" fontWeight={children ? 'bold' : undefined}>{title}</Text>
-				{/if}
-				{#if children}
-					{@render children()}
+					<div class="flex flex-col gap-2">
+						{#if title}
+							<Text {size} fontWeight={children ? 'bold' : undefined}>{title}</Text>
+						{/if}
+						{#if children}
+							{@render children()}
+						{/if}
+					</div>
+				</div>
+				{#if closable || onClose}
+					<div>
+						<CloseButton onclick={handleClose} />
+					</div>
 				{/if}
 			</div>
-		</div>
-	</CardHeader>
-</Card>
+		</CardHeader>
+	</Card>
+{/if}

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

@@ -1,10 +1,15 @@
-import type { Color } from '../../types.js';
+import type { Color, Size } from '../../types.js';
 import type { Snippet } from 'svelte';
 declare const Alert: import("svelte").Component<{
     color?: Color;
+    size?: Size;
     icon?: string | false;
     title?: string;
     class?: string;
+    duration?: number;
+    closable?: boolean;
+    controlled?: boolean;
+    onClose?: () => void;
     children?: Snippet;
 }, {}, "">;
 export default Alert;

package/dist/components/Card/Card.svelte

@@ -44,9 +44,9 @@
 			},
 			subtleColor: {
 				primary: 'bg-primary/25 dark:bg-primary/25',
-				secondary: 'bg-dark/15 text-dark',
+				secondary: 'bg-dark/5 dark:bg-dark/25 text-dark',
 				success: 'bg-success/15 dark:bg-success/30',
-				danger: 'bg-danger/25 dark:bg-danger/50',
+				danger: 'bg-danger/15 dark:bg-danger/50',
 				warning: 'bg-warning/25 dark:bg-warning/50',
 				info: 'bg-info/25 dark:bg-info/50',
 			},

package/dist/components/CloseButton/CloseButton.svelte

@@ -3,7 +3,7 @@
 	import type { CloseButtonProps } from '../../types.js';
 	import { mdiClose } from '@mdi/js';
 
-	const { size = 'medium', variant = 'ghost' }: CloseButtonProps = $props();
+	const { size = 'medium', variant = 'ghost', ...restProps }: CloseButtonProps = $props();
 </script>
 
-<IconButton icon={mdiClose} color="secondary" shape="round" {variant} {size} />
+<IconButton {...restProps} icon={mdiClose} shape="round" {variant} {size} color="secondary" />

package/dist/components/Code/Code.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { Color, Size } from '../../types.js';
+	import type { Size, TextColor } from '../../types.js';
 	import type { Snippet } from 'svelte';
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
-		color?: Color | 'muted';
+		color?: TextColor;
 		size?: Size;
 		variant?: 'filled';
 		children: Snippet;

package/dist/components/Code/Code.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 Code: import("svelte").Component<{
-    color?: Color | "muted";
+    color?: TextColor;
     size?: Size;
     variant?: "filled";
     children: Snippet;

package/dist/components/Form/HelperText.svelte

@@ -2,17 +2,17 @@
 	import Text from '../Text/Text.svelte';
 	import { ChildKey } from '../../constants.js';
 	import Child from '../../internal/Child.svelte';
-	import type { Color } from '../../types.js';
+	import type { TextColor } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
-		color?: Color;
+		color?: TextColor;
 		class?: string;
 		children?: Snippet;
 	};
 
-	let { class: className, children, color }: Props = $props();
+	let { class: className, children, color = 'muted' }: Props = $props();
 </script>
 
 <Child for={ChildKey.Field} as={ChildKey.HelperText}>

package/dist/components/Form/HelperText.svelte.d.ts

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

package/dist/components/Heading/Heading.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { Color, HeadingSize } from '../../types.js';
+	import type { HeadingColor, HeadingSize } from '../../types.js';
 	import { cleanClass } from '../../utils.js';
 	import type { Snippet } from 'svelte';
 	import { tv } from 'tailwind-variants';
 
 	type Props = {
 		size: HeadingSize;
-		color?: Color | 'muted';
+		color?: HeadingColor;
 		class?: string;
 
 		children: Snippet;

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

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

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 | 'muted';
+		color?: TextColor;
 		class?: string;
 		size?: Size;
 		children: Snippet;

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 | "muted";
+    color?: TextColor;
     class?: string;
     size?: Size;
     children: Snippet;

package/dist/types.d.ts

@@ -1,6 +1,8 @@
 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';
@@ -10,20 +12,6 @@ export declare enum Theme {
     Light = "light",
     Dark = "dark"
 }
-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 type IconProps = {
     icon: string;
     title?: string;
@@ -38,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;

package/package.json

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