@immich/ui 0.2.2 → 0.4.0

package/dist/components/Stack/Stack.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { StackProps } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import { tv } from 'tailwind-variants';
+
+	const {
+		align,
+		direction = 'column',
+		wrap = false,
+		class: className,
+		gap = 2,
+		children,
+	}: StackProps = $props();
+
+	const styles = tv({
+		base: 'flex gap-2',
+		variants: {
+			direction: {
+				row: 'flex-row',
+				column: 'flex-col',
+			},
+			align: {
+				start: 'items-start',
+				center: 'items-center',
+				end: 'items-end',
+			},
+			fullWidth: {
+				true: 'w-full',
+				false: '',
+			},
+			fullHeight: {
+				true: 'h-full',
+				false: '',
+			},
+			gap: {
+				0: 'gap-0',
+				1: 'gap-1',
+				2: 'gap-2',
+				3: 'gap-3',
+				4: 'gap-4',
+				5: 'gap-5',
+				6: 'gap-6',
+				7: 'gap-7',
+				8: 'gap-8',
+			},
+			wrap: {
+				true: 'flex-wrap',
+				false: '',
+			},
+		},
+	});
+</script>
+
+<div
+	class={cleanClass(
+		styles({
+			align,
+			direction,
+			gap,
+			wrap,
+			fullWidth: direction === 'row',
+			fullHeight: direction === 'column',
+		}),
+		className,
+	)}
+>
+	{@render children()}
+</div>

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

@@ -0,0 +1,3 @@
+import type { StackProps } from '../../types.js';
+declare const Stack: import("svelte").Component<StackProps, {}, "">;
+export default Stack;

package/dist/components/Stack/VStack.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Stack from './Stack.svelte';
+	import type { VStackProps } from '../../types.js';
+
+	const { class: className, children, ...props }: VStackProps = $props();
+</script>
+
+<Stack direction="column" class={className} {...props}>
+	{@render children()}
+</Stack>

package/dist/components/Stack/VStack.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const VStack: import("svelte").Component<{
+    class?: string;
+    children: import("svelte").Snippet;
+    align?: "start" | "center" | "end";
+    gap?: import("../../types.js").Gap;
+    wrap?: boolean;
+}, {}, "">;
+export default VStack;

package/dist/components/Text/Text.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Color, Size } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		color?: Color;
+		size?: Size;
+		children: Snippet;
+		variant?: 'italic';
+		fontWeight?: 'light' | 'normal' | 'semi-bold' | 'bold';
+		class?: string;
+	};
+
+	const { color, size, fontWeight = 'normal', children, class: className }: Props = $props();
+
+	const styles = tv({
+		variants: {
+			color: {
+				primary: 'text-primary',
+				secondary: 'text-dark',
+				success: 'text-success',
+				danger: 'text-danger',
+				warning: 'text-warning',
+				info: 'text-info',
+			},
+
+			size: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+
+			fontWeight: {
+				light: 'font-light',
+				normal: 'font-normal',
+				'semi-bold': 'font-semibold',
+				bold: 'font-bold',
+			},
+		},
+	});
+</script>
+
+<p class={cleanClass(styles({ color, size, fontWeight }), className)}>
+	{@render children()}
+</p>

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

@@ -0,0 +1,11 @@
+import type { Color, Size } from '../../types.js';
+import type { Snippet } from 'svelte';
+declare const Text: import("svelte").Component<{
+    color?: Color;
+    size?: Size;
+    children: Snippet;
+    variant?: "italic";
+    fontWeight?: "light" | "normal" | "semi-bold" | "bold";
+    class?: string;
+}, {}, "">;
+export default Text;

package/dist/constants.d.ts

@@ -0,0 +1,6 @@
+export declare enum ContextKey {
+    Card = "card",
+    CardHeader = "card-header",
+    CardBody = "card-body",
+    CardFooter = "card-footer"
+}

package/dist/constants.js

@@ -0,0 +1,7 @@
+export var ContextKey;
+(function (ContextKey) {
+    ContextKey["Card"] = "card";
+    ContextKey["CardHeader"] = "card-header";
+    ContextKey["CardBody"] = "card-body";
+    ContextKey["CardFooter"] = "card-footer";
+})(ContextKey || (ContextKey = {}));

package/dist/index.d.ts

@@ -1 +1,20 @@
-export * from './components/index.js';
+export { default as Alert } from './components/Alert/Alert.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';
+export { default as CardDescription } from './components/Card/CardDescription.svelte';
+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 Checkbox } from './components/Form/Checkbox.svelte';
+export { default as Input } from './components/Form/Input.svelte';
+export { default as Label } from './components/Form/Label.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 Logo } from './components/Logo/Logo.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 Text } from './components/Text/Text.svelte';
+export * from './types.js';

package/dist/index.js

@@ -1 +1,20 @@
-export * from './components/index.js';
+export { default as Alert } from './components/Alert/Alert.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';
+export { default as CardDescription } from './components/Card/CardDescription.svelte';
+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 Checkbox } from './components/Form/Checkbox.svelte';
+export { default as Input } from './components/Form/Input.svelte';
+export { default as Label } from './components/Form/Label.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 Logo } from './components/Logo/Logo.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 Text } from './components/Text/Text.svelte';
+export * from './types.js';

package/dist/{components → internal}/Button.svelte

@@ -1,114 +1,122 @@
 <script lang="ts">
-	import type { Color, Shape, Size } from '../types.js';
+	import type { ButtonProps } from '../types.js';
 	import { cleanClass } from '../utils.js';
 	import { Button as ButtonPrimitive } from 'bits-ui';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
 
-	type ButtonVariant = 'filled' | 'outline' | 'ghost' | 'hero';
-	type ButtonProps = {
-		class?: string;
-		color?: Color;
-		size?: Size;
-		shape?: Shape;
-		variant?: ButtonVariant;
-		fullWidth?: boolean;
-	} & (({ href?: never } & HTMLButtonAttributes) | ({ href: string } & HTMLAnchorAttributes));
-
-	const asOverride = (variant: ButtonVariant, colors: Record<Color, string>) =>
-		(Object.keys(colors) as Color[]).map((color) => ({ variant, color, class: colors[color] }));
-
-	const colorPlaceholder = {
-		primary: '',
-		secondary: '',
-		success: '',
-		danger: '',
-		warning: '',
-		info: '',
+	type InternalButtonProps = ButtonProps & {
+		/** when true, button width to height ratio is 1:1 */
+		icon?: boolean;
 	};
 
-	const variantPlaceholder = {
-		outline: '',
-		filled: '',
-		ghost: '',
-		hero: '',
-	};
+	const {
+		type = 'button',
+		href,
+		variant = 'filled',
+		color = 'primary',
+		shape = 'semi-round',
+		size = 'medium',
+		fullWidth = false,
+		icon = false,
+		class: className = '',
+		children,
+		...restProps
+	}: InternalButtonProps = $props();
 
 	const buttonVariants = tv({
 		base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',
-				'semi-round': 'rounded-lg',
+				'semi-round': 'rounded-xl',
 				round: 'rounded-full',
 			},
-			size: {
-				tiny: 'px-2 py-1 text-xs',
-				small: 'px-2 py-1 text-sm',
-				medium: 'px-4 py-2 text-md',
-				large: 'px-4 py-2 text-lg',
-				giant: 'px-8 py-4 text-xl',
-			},
 			fullWidth: {
 				true: 'w-full',
 			},
-			color: colorPlaceholder,
-			variant: variantPlaceholder,
-		},
-		compoundVariants: [
-			...asOverride('filled', {
+			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',
+			},
+			textSize: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+			iconSize: {
+				tiny: 'h-4 w-4 text-xs',
+				small: 'h-6 w-6 text-sm',
+				medium: 'h-8 w-8 text-md',
+				large: 'h-10 w-10 text-lg',
+				giant: 'h-12 w-12 text-lg',
+			},
+			roundedSize: {
+				tiny: 'rounded-md',
+				small: 'rounded-md',
+				medium: 'rounded-lg',
+				large: 'rounded-lg',
+				giant: 'rounded-lg',
+			},
+			filledColor: {
 				primary: 'bg-primary text-light hover:bg-primary/80',
 				secondary: 'bg-dark text-light hover:bg-dark/80',
 				success: 'bg-success text-light hover:bg-success/80',
 				danger: 'bg-danger text-light hover:bg-danger/80',
 				warning: 'bg-warning text-light hover:bg-warning/80',
 				info: 'bg-info text-light hover:bg-info/80',
-			}),
-
-			...asOverride('outline', {
+			},
+			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',
-			}),
-
-			...asOverride('ghost', {
-				primary: 'text-primary hover:bg-primary/10',
-				secondary: 'text-dark hover:bg-dark/10',
-				success: 'text-success hover:bg-success/10',
-				danger: 'text-danger hover:bg-danger/10',
-				warning: 'text-warning hover:bg-warning/10',
-				info: 'text-info hover:bg-info/10',
-			}),
-
-			...asOverride('hero', {
+			},
+			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',
+				success: 'text-success hover:bg-success/10',
+				danger: 'text-danger hover:bg-danger/10',
+				warning: 'text-warning hover:bg-warning/10',
+				info: 'text-info hover:bg-info/10',
+			},
+		},
 	});
 
-	const {
-		type = 'button',
-		href,
-		variant = 'filled',
-		color = 'primary',
-		shape = 'semi-round',
-		size = 'medium',
-		fullWidth = false,
-		class: className = '',
-		children,
-		...restProps
-	}: ButtonProps = $props();
-
 	const classList = $derived(
-		cleanClass(buttonVariants({ variant, color, shape, size, fullWidth }), className),
+		cleanClass(
+			twMerge(
+				buttonVariants({
+					shape,
+					fullWidth,
+					textPadding: icon ? undefined : size,
+					textSize: size,
+					iconSize: icon ? size : undefined,
+					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,
+			),
+		),
 	);
 </script>
 

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

@@ -0,0 +1,6 @@
+import type { ButtonProps } from '../types.js';
+declare const Button: import("svelte").Component<ButtonProps & {
+    /** when true, button width to height ratio is 1:1 */
+    icon?: boolean;
+}, {}, "">;
+export default Button;

package/dist/internal/Child.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { ContextKey } from '../constants.js';
+	import { withPrefix } from '../utils.js';
+	import { getContext, type Snippet } from 'svelte';
+
+	type ContextType = { register: (key: ContextKey, snippet: Snippet) => void };
+	type Props = {
+		for: ContextKey;
+		as: ContextKey;
+		children: Snippet;
+	};
+
+	const { for: key, as, children }: Props = $props();
+
+	const context = getContext<ContextType>(withPrefix(key));
+	if (context) {
+		context.register(as, children);
+	} else {
+		console.log('Unable to find context for key:', key);
+	}
+</script>

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

@@ -0,0 +1,8 @@
+import { ContextKey } from '../constants.js';
+import { type Snippet } from 'svelte';
+declare const Child: import("svelte").Component<{
+    for: ContextKey;
+    as: ContextKey;
+    children: Snippet;
+}, {}, "">;
+export default Child;

package/dist/types.d.ts

@@ -1,3 +1,51 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 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 Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+type ButtonOrAnchor = ({
+    href?: never;
+} & HTMLButtonAttributes) | ({
+    href: string;
+} & HTMLAnchorAttributes);
+type ButtonBaseProps = {
+    class?: string;
+    color?: Color;
+    size?: Size;
+    shape?: Shape;
+    variant?: Variants;
+} & ButtonOrAnchor;
+export type IconProps = {
+    icon: string;
+    title?: string;
+    description?: string;
+    size?: string;
+    color?: Color | 'currentColor' | string;
+    flipped?: boolean;
+    flopped?: boolean;
+    spin?: boolean;
+    class?: string;
+    viewBox?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
+};
+export type IconButtonProps = ButtonBaseProps & IconProps;
+export type ButtonProps = ButtonBaseProps & {
+    fullWidth?: boolean;
+};
+type StackBaseProps = {
+    class?: string;
+    children: Snippet;
+    align?: 'start' | 'center' | 'end';
+    gap?: Gap;
+    wrap?: boolean;
+};
+export type StackProps = StackBaseProps & {
+    direction?: 'row' | 'column';
+};
+export type HStackProps = StackBaseProps;
+export type VStackProps = StackBaseProps;
+export {};

package/dist/utils.d.ts

@@ -1 +1,3 @@
+import type { ContextKey } from './constants.js';
 export declare const cleanClass: (...classNames: unknown[]) => string;
+export declare const withPrefix: (key: ContextKey) => string;

package/dist/utils.js

@@ -8,3 +8,4 @@ export const cleanClass = (...classNames) => {
     })
         .join(' ');
 };
+export const withPrefix = (key) => `immich-ui-${key}`;

package/package.json

@@ -1,10 +1,11 @@
 {
 	"name": "@immich/ui",
-	"version": "0.2.2",
+	"version": "0.4.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"start": "npm run start:dev",
 		"start:dev": "vite dev",
+		"watch": "vite build --watch",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
 		"package": "npm run sync && svelte-package && publint",
@@ -63,6 +64,7 @@
 	"dependencies": {
 		"@mdi/js": "^7.4.47",
 		"bits-ui": "^1.0.0-next.46",
+		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.3.0"
 	}
 }

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

@@ -1,15 +0,0 @@
-import type { Color, Shape, Size } from '../types.js';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-declare const Button: import("svelte").Component<{
-    class?: string;
-    color?: Color;
-    size?: Size;
-    shape?: Shape;
-    variant?: "filled" | "outline" | "ghost" | "hero";
-    fullWidth?: boolean;
-} & (({
-    href?: never;
-} & HTMLButtonAttributes) | ({
-    href: string;
-} & HTMLAnchorAttributes)), {}, "">;
-export default Button;

package/dist/components/Card.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { cleanClass } from '../utils.js';
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>>;
-
-	let { ref = $bindable(null), class: className, children, ...restProps }: Props = $props();
-</script>
-
-<div
-	bind:this={ref}
-	class={cleanClass('rounded-lg border bg-light text-dark shadow-lg', className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

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

@@ -1,4 +0,0 @@
-import type { WithElementRef } from 'bits-ui';
-import type { HTMLAttributes } from 'svelte/elements';
-declare const Card: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
-export default Card;

package/dist/components/CardBody.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { cleanClass } from '../utils.js';
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div bind:this={ref} class={cleanClass('p-6', className)} {...restProps}>
-	{@render children?.()}
-</div>

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

@@ -1,4 +0,0 @@
-import type { WithElementRef } from 'bits-ui';
-import type { HTMLAttributes } from 'svelte/elements';
-declare const CardBody: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
-export default CardBody;

package/dist/components/CardDescription.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cleanClass } from '../utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
-</script>
-
-<p bind:this={ref} class={cleanClass('text-muted-foreground text-sm', className)} {...restProps}>
-	{@render children?.()}
-</p>

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

@@ -1,4 +0,0 @@
-import type { WithElementRef } from 'bits-ui';
-import type { HTMLAttributes } from 'svelte/elements';
-declare const CardDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLParagraphElement>>, {}, "ref">;
-export default CardDescription;

package/dist/components/CardFooter.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { cleanClass } from '../utils.js';
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div bind:this={ref} class={cleanClass('flex items-center p-6 pt-0', className)} {...restProps}>
-	{@render children?.()}
-</div>

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

@@ -1,4 +0,0 @@
-import type { WithElementRef } from 'bits-ui';
-import type { HTMLAttributes } from 'svelte/elements';
-declare const CardFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
-export default CardFooter;