@immich/ui 0.3.0 → 0.5.0

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,53 @@
+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);
+export type CloseButtonProps = {
+    size?: Size;
+    variant?: Variants;
+};
+type ButtonBaseProps = CloseButtonProps & {
+    class?: string;
+    color?: Color;
+    shape?: Shape;
+} & 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,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.3.0",
+	"version": "0.5.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"start": "npm run start:dev",
@@ -64,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,20 +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 border-gray-300 bg-light text-dark shadow-lg dark:border-gray-600',
-		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;

package/dist/components/CardHeader.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('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

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

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

@@ -1,7 +0,0 @@
-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/Icon.svelte

@@ -1,62 +0,0 @@
-<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 = 'transparent',
-		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

@@ -1,20 +0,0 @@
-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/index.d.ts

@@ -1,12 +0,0 @@
-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';
-export { default as Logo } from './Logo.svelte';

package/dist/components/index.js

@@ -1,12 +0,0 @@
-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';
-export { default as Logo } from './Logo.svelte';