@immich/ui 0.1.0

package/dist/components/Button.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import type { Color, Shape, Size } from '../types.js';
+	import { cleanClass } from '../utils.js';
+	import { Button as ButtonPrimitive } from 'bits-ui';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	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: '',
+	};
+
+	const variantPlaceholder = {
+		outline: '',
+		filled: '',
+		ghost: '',
+		hero: '',
+	};
+
+	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',
+				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', {
+				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', {
+				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', {
+				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',
+			}),
+		],
+	});
+
+	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),
+	);
+</script>
+
+{#if href}
+	<a {href} class={classList} {...restProps as HTMLAnchorAttributes}>
+		{@render children?.()}
+	</a>
+{:else}
+	<ButtonPrimitive.Root
+		class={classList}
+		type={type as HTMLButtonAttributes['type']}
+		{...restProps as HTMLButtonAttributes}
+	>
+		{@render children?.()}
+	</ButtonPrimitive.Root>
+{/if}

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,4 @@
+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;

package/dist/components/CardHeader.svelte

@@ -0,0 +1,17 @@
+<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('flex flex-col space-y-1.5 rounded-t-lg p-6 pb-0', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

package/dist/components/CardTitle.svelte

@@ -0,0 +1,25 @@
+<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,
+		level = 3,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
+</script>
+
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cleanClass('text-lg font-semibold leading-none tracking-tight', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardTitle: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLElement | null | undefined;
+} & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}, {}, "ref">;
+export default CardTitle;

package/dist/components/Checkbox.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import { mdiCheck, mdiMinus } from '@mdi/js';
+	import Icon from './Icon.svelte';
+	import { tv } from 'tailwind-variants';
+	import type { Color, Shape, Size } from '../types.js';
+	import { cleanClass } from '../utils.js';
+
+	type CheckboxProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & {
+		color?: Color;
+		shape?: Shape;
+		size?: Size;
+	};
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		class: className,
+		color = 'primary',
+		shape = 'semi-round',
+		size = 'small',
+		...restProps
+	}: CheckboxProps = $props();
+
+	const container = tv({
+		base: 'ring-offset-background focus-visible:ring-ring peer box-content border 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',
+		variants: {
+			shape: {
+				rectangle: 'rounded-none',
+				'semi-round': 'rounded-lg',
+				round: 'rounded-full',
+			},
+			color: {
+				primary: 'border-primary',
+				secondary: 'border-secondary',
+				success: 'border-success',
+				danger: 'border-danger',
+				warning: 'border-warning',
+				info: 'border-info',
+			},
+			size: {
+				tiny: 'size-4',
+				small: 'size-6',
+				medium: 'size-8',
+				large: 'size-16',
+				giant: 'size-32',
+			},
+		},
+		compoundVariants: [
+			//
+			{ size: 'tiny', shape: 'semi-round', class: 'rounded' },
+			{ size: 'small', shape: 'semi-round', class: 'rounded-md' },
+			{ size: 'large', shape: 'semi-round', class: 'rounded-xl' },
+			{ size: 'giant', shape: 'semi-round', class: 'rounded-2xl' },
+		],
+	});
+
+	const parent = tv({
+		base: 'flex items-center justify-center text-current',
+		variants: {
+			size: {
+				tiny: 'size-4',
+				small: 'size-6',
+				medium: 'size-8',
+				large: 'size-16',
+				giant: 'size-32',
+			},
+		},
+	});
+
+	const icon = tv({
+		variants: {
+			fullWidth: {
+				true: 'w-full',
+			},
+			color: {
+				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',
+			},
+		},
+	});
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	class={cleanClass(container({ size, color, shape }), className)}
+	bind:checked
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<div class={parent({ size })}>
+			{#if checked === true}
+				<Icon path={mdiCheck} size="100%" class={cleanClass(icon({ color }))} />
+			{:else if checked === 'indeterminate'}
+				<Icon path={mdiMinus} size="100%" class={cleanClass(icon({ color }))} />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>

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

@@ -0,0 +1,8 @@
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+import type { Color, Shape, Size } from '../types.js';
+declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children"> & {
+    color?: Color;
+    shape?: Shape;
+    size?: Size;
+}, {}, "ref" | "checked">;
+export default Checkbox;

package/dist/components/Icon.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Color } from '../types.js';
+	import { cleanClass } from '../utils.js';
+	import type { AriaRole } from 'svelte/elements';
+
+	type IconProps = {
+		path: string;
+		size?: string;
+		color?: Color | 'currentColor' | string;
+		flipped?: boolean;
+		class?: string;
+		viewBox?: string;
+		role?: AriaRole;
+		title?: string;
+		description?: string;
+		ariaHidden?: boolean;
+		ariaLabel?: string;
+		ariaLabelledby?: string;
+		strokeWidth?: number;
+		strokeColor?: string;
+		spin?: false;
+	};
+
+	const {
+		size = '1em',
+		viewBox = '0 0 24 24',
+		class: className = '',
+		flipped = false,
+		spin = false,
+		role = 'img',
+		ariaLabelledby,
+		strokeColor = 'currentColor',
+		strokeWidth = 2,
+		ariaLabel = '',
+		ariaHidden = false,
+		title,
+		path,
+		color = 'currentColor',
+		description,
+	}: IconProps = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	{viewBox}
+	class={cleanClass(className, flipped && '-scale-x-100', spin && 'animate-spin')}
+	{role}
+	stroke={strokeColor}
+	stroke-width={strokeWidth}
+	aria-label={ariaLabel}
+	aria-hidden={ariaHidden}
+	aria-labelledby={ariaLabelledby}
+>
+	{#if title}
+		<title>{title}</title>
+	{/if}
+	{#if description}
+		<desc>{description}</desc>
+	{/if}
+	<path d={path} fill={color} />
+</svg>

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

@@ -0,0 +1,20 @@
+import type { Color } from '../types.js';
+import type { AriaRole } from 'svelte/elements';
+declare const Icon: import("svelte").Component<{
+    path: string;
+    size?: string;
+    color?: Color | "currentColor" | string;
+    flipped?: boolean;
+    class?: string;
+    viewBox?: string;
+    role?: AriaRole;
+    title?: string;
+    description?: string;
+    ariaHidden?: boolean;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
+    spin?: false;
+}, {}, "">;
+export default Icon;

package/dist/components/Input.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { WithElementRef } from 'bits-ui';
+	import { cleanClass } from '../utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLInputAttributes> = $props();
+</script>
+
+<input
+	bind:this={ref}
+	class={cleanClass(
+		'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		className,
+	)}
+	bind:value
+	{...restProps}
+/>

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

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

package/dist/components/Label.svelte

@@ -0,0 +1,19 @@
+<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/Label.svelte.d.ts

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

package/dist/components/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Button } from './Button.svelte';
+export { default as Card } from './Card.svelte';
+export { default as CardBody } from './CardBody.svelte';
+export { default as CardDescription } from './CardDescription.svelte';
+export { default as CardFooter } from './CardFooter.svelte';
+export { default as CardHeader } from './CardHeader.svelte';
+export { default as CardTitle } from './CardTitle.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Label } from './Label.svelte';

package/dist/components/index.js

@@ -0,0 +1,11 @@
+export { default as Button } from './Button.svelte';
+export { default as Card } from './Card.svelte';
+export { default as CardBody } from './CardBody.svelte';
+export { default as CardDescription } from './CardDescription.svelte';
+export { default as CardFooter } from './CardFooter.svelte';
+export { default as CardHeader } from './CardHeader.svelte';
+export { default as CardTitle } from './CardTitle.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Label } from './Label.svelte';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
+export type Shape = 'rectangle' | 'semi-round' | 'round';

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1 @@
+export declare const cleanClass: (...classNames: unknown[]) => string;

package/dist/utils.js

@@ -0,0 +1,10 @@
+export const cleanClass = (...classNames) => {
+    return classNames
+        .filter((className) => {
+        if (!className || typeof className === 'boolean') {
+            return false;
+        }
+        return typeof className === 'string';
+    })
+        .join(' ');
+};