@immich/ui 0.14.2 → 0.16.0

package/dist/internal/Select.svelte

@@ -4,11 +4,11 @@
 	import Input from '../components/Form/Input.svelte';
 	import Icon from '../components/Icon/Icon.svelte';
 	import IconButton from '../components/IconButton/IconButton.svelte';
+	import Label from '../components/Label/Label.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;
 
@@ -45,26 +45,8 @@
 
 	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 { readOnly, required, invalid, disabled, label, ...labelProps } =
+		$derived(getFieldContext());
 
 	const id = generateId();
 	const inputId = `input-${id}`;
@@ -95,7 +77,7 @@
 
 <div class={cleanClass('flex flex-col gap-1', className)} bind:this={ref}>
 	{#if label}
-		<label id={labelId} for={inputId} class={labelStyles({ size })}>{label}</label>
+		<Label id={labelId} for={inputId} {label} {...labelProps} />
 	{/if}
 
 	<Select.Root type={multiple ? 'multiple' : 'single'} {onValueChange}>
@@ -125,6 +107,7 @@
 							class="m-1"
 							icon={mdiUnfoldMoreHorizontal}
 							{disabled}
+							aria-label="Expand"
 						/>
 					{/snippet}
 				</Input>

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

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

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

@@ -3,6 +3,7 @@ declare const defaultTranslations: {
     close: string;
     showPassword: string;
     hidePassword: string;
+    darkTheme: string;
 };
 export type Translations = typeof defaultTranslations;
 export declare const translate: <T extends keyof Translations>(key: T, overrides?: TranslationProps<T>) => string;

package/dist/services/translation.svelte.js

@@ -2,6 +2,7 @@ const defaultTranslations = {
     close: 'Close',
     showPassword: 'Show password',
     hidePassword: 'Hide password',
+    darkTheme: 'Toggle dark theme',
 };
 let translations = $state(defaultTranslations);
 export const translate = (key, overrides) => overrides?.[key] ?? translations[key];

package/dist/styles.d.ts

@@ -0,0 +1,122 @@
+export declare const styles: {
+    label: import("tailwind-variants").TVReturnType<{
+        size: {
+            tiny: string;
+            small: string;
+            medium: string;
+            large: string;
+            giant: string;
+        };
+        color: {
+            muted: string;
+            primary: string;
+            secondary: string;
+            success: string;
+            danger: string;
+            warning: string;
+            info: string;
+        };
+    }, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
+        size: {
+            tiny: string;
+            small: string;
+            medium: string;
+            large: string;
+            giant: string;
+        };
+        color: {
+            muted: string;
+            primary: string;
+            secondary: string;
+            success: string;
+            danger: string;
+            warning: string;
+            info: string;
+        };
+    }, {
+        size: {
+            tiny: string;
+            small: string;
+            medium: string;
+            large: string;
+            giant: string;
+        };
+        color: {
+            muted: string;
+            primary: string;
+            secondary: string;
+            success: string;
+            danger: string;
+            warning: string;
+            info: string;
+        };
+    }>, {
+        size: {
+            tiny: string;
+            small: string;
+            medium: string;
+            large: string;
+            giant: string;
+        };
+        color: {
+            muted: string;
+            primary: string;
+            secondary: string;
+            success: string;
+            danger: string;
+            warning: string;
+            info: string;
+        };
+    }, undefined, import("tailwind-variants").TVReturnType<{
+        size: {
+            tiny: string;
+            small: string;
+            medium: string;
+            large: string;
+            giant: string;
+        };
+        color: {
+            muted: string;
+            primary: string;
+            secondary: string;
+            success: string;
+            danger: string;
+            warning: string;
+            info: string;
+        };
+    }, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
+        size: {
+            tiny: string;
+            small: string;
+            medium: string;
+            large: string;
+            giant: string;
+        };
+        color: {
+            muted: string;
+            primary: string;
+            secondary: string;
+            success: string;
+            danger: string;
+            warning: string;
+            info: string;
+        };
+    }, {
+        size: {
+            tiny: string;
+            small: string;
+            medium: string;
+            large: string;
+            giant: string;
+        };
+        color: {
+            muted: string;
+            primary: string;
+            secondary: string;
+            success: string;
+            danger: string;
+            warning: string;
+            info: string;
+        };
+    }>, unknown, unknown, undefined>>;
+};

package/dist/styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+export const styles = {
+    label: tv({
+        base: '',
+        variants: {
+            size: {
+                tiny: 'text-xs',
+                small: 'text-sm',
+                medium: 'text-md',
+                large: 'text-lg',
+                giant: 'text-xl',
+            },
+            color: {
+                muted: 'text-gray-600 dark:text-gray-400',
+                primary: 'text-primary',
+                secondary: 'text-dark',
+                success: 'text-success',
+                danger: 'text-danger',
+                warning: 'text-warning',
+                info: 'text-info',
+            },
+        },
+    }),
+};

package/dist/types.d.ts

@@ -1,11 +1,12 @@
 import type { Translations } from './services/translation.svelte.js';
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLInputAttributes, HTMLLabelAttributes } 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 ModalSize = Size | 'full';
+export type ContainerSize = ModalSize;
 export type HeadingSize = Size | 'title';
 export type Shape = 'rectangle' | 'semi-round' | 'round';
 export type Variants = 'filled' | 'outline' | 'ghost';
@@ -46,6 +47,8 @@ type ButtonBase = {
 export type ButtonProps = ButtonBase & {
     fullWidth?: boolean;
     loading?: boolean;
+    leadingIcon?: string;
+    trailingIcon?: string;
 } & ButtonOrAnchor;
 export type CloseButtonProps = {
     size?: Size;
@@ -57,6 +60,7 @@ export type IconButtonProps = ButtonBase & {
     icon: string;
     flipped?: boolean;
     flopped?: boolean;
+    'aria-label': string;
 } & ButtonOrAnchor;
 type StackBaseProps = {
     class?: string;
@@ -76,13 +80,20 @@ export type StackProps = StackBaseProps & {
 };
 export type HStackProps = StackBaseProps;
 export type VStackProps = StackBaseProps;
+export type LabelProps = {
+    label?: string;
+    class?: string;
+    size?: Size;
+    color?: TextColor;
+    children?: Snippet;
+} & HTMLLabelAttributes;
 export type FieldContext = {
     label?: string;
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;
     readOnly?: boolean;
-};
+} & LabelProps;
 type BaseInputProps = {
     class?: string;
     value?: string;

package/dist/utils.js

@@ -10,4 +10,4 @@ export const cleanClass = (...classNames) => {
 };
 export const withPrefix = (key) => `immich-ui-${key}`;
 let _count = 0;
-export const generateId = () => `id-${_count++}`;
+export const generateId = () => `ui-id-${_count++}`;

package/package.json

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

package/dist/components/Form/Label.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { cleanClass } from '../../utils.js';
-	import { Label as LabelPrimitive } from 'bits-ui';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: LabelPrimitive.RootProps = $props();
-</script>
-
-<LabelPrimitive.Root
-	bind:ref
-	class={cleanClass(
-		'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-		className,
-	)}
-	{...restProps}
-/>

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

@@ -1,3 +0,0 @@
-import { Label as LabelPrimitive } from 'bits-ui';
-declare const Label: import("svelte").Component<LabelPrimitive.RootProps, {}, "ref">;
-export default Label;