compote-ui 0.15.0 → 0.17.0

package/dist/components/tree-view/tree-view.svelte

@@ -12,6 +12,7 @@
 	import { Button, Field } from '../..';
 	import { SvelteSet } from 'svelte/reactivity';
 	import PhMagnifyingGlass from '../../icons/PhMagnifyingGlass.svelte';
+	import Icon from '@iconify/svelte';
 
 	let {
 		items = [],
@@ -171,10 +172,11 @@
 						{@render nodeCheckbox()}
 					{/if}
 					<TreeView.BranchIndicator
-						class="text-muted-foreground inline-flex items-center justify-center transition-transform duration-150 data-[state=open]:rotate-90"
+						class="text-muted-foreground inline-flex w-(--tree-icon) shrink-0 items-center justify-center transition-transform duration-150 data-[state=open]:rotate-90"
 					>
 						<PhCaretRight class="size-3.5" />
 					</TreeView.BranchIndicator>
+					{#if node.icon}<Icon icon={node.icon} class="size-4 shrink-0" />{/if}
 					<TreeView.BranchText class="flex-1 truncate">
 						{node.label}
 					</TreeView.BranchText>
@@ -194,6 +196,7 @@
 				{#if selectionMode === 'multiple'}
 					{@render nodeCheckbox()}
 				{/if}
+				{#if node.icon}<Icon icon={node.icon} class="size-4 shrink-0" />{/if}
 				<TreeView.ItemText class="flex-1 truncate">
 					{node.label}
 				</TreeView.ItemText>

package/dist/utils/collections.d.ts

@@ -9,6 +9,7 @@ export interface TreeItem {
     value: number | string;
     label: string;
     disabled?: boolean;
+    icon?: string;
     children?: TreeItem[];
 }
 export declare function createListCollection<T extends ListItem>(items: T[]): ListCollection<T>;

package/dist/utils/image-processing.d.ts

@@ -6,7 +6,7 @@ export interface ProcessImageOptions {
     maxWidth?: number;
     maxHeight?: number;
     quality?: number;
-    format?: 'image/webp' | 'image/jpeg' | 'image/png';
+    format?: 'image/webp' | 'image/jpeg' | 'image/png' | 'image/avif';
 }
 export interface CropRegion {
     x: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.15.0",
+	"version": "0.17.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -67,6 +67,7 @@
 	"dependencies": {
 		"@ark-ui/svelte": "^5.20.0",
 		"@fontsource-variable/wix-madefor-text": "^5.2.8",
+		"@iconify/svelte": "^5.2.1",
 		"runed": "^0.37.1",
 		"tailwind-merge": "^3.5.0",
 		"tailwind-variants": "^3.2.2"

package/dist/components/carousel/carousel backup.svelte

@@ -1,120 +0,0 @@
-<script lang="ts">
-	import PhArrowLeft from '../../icons/PhArrowLeft.svelte';
-	import PhArrowRight from '../../icons/PhArrowRight.svelte';
-	import PhCheck from '../../icons/PhCheck.svelte';
-	import PhImage from '../../icons/PhImage.svelte';
-	import PhStar from '../../icons/PhStar.svelte';
-	import { Carousel } from '@ark-ui/svelte/carousel';
-	import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
-
-	interface ImageItem {
-		id?: string | number;
-		src: string;
-		alt?: string;
-		is_primary?: boolean;
-		position?: number;
-	}
-
-	interface Props extends Omit<CarouselRootProps, 'slideCount'> {
-		images: ImageItem[];
-		indicator?: boolean;
-		selectable?: boolean;
-		selectedIds?: (string | number)[];
-		onSetStar?: (id: string | number) => void;
-	}
-
-	let {
-		images,
-		indicator = false,
-		selectable = false,
-		selectedIds = $bindable([]),
-		onSetStar,
-		...rootProps
-	}: Props = $props();
-
-	function toggleSelect(id: string | number) {
-		if (selectedIds.includes(id)) {
-			selectedIds = selectedIds.filter((i) => i !== id);
-		} else {
-			selectedIds = [...selectedIds, id];
-		}
-	}
-</script>
-
-{#if images.length === 0}
-	<div
-		class="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed py-12 text-center text-ink-dim"
-	>
-		<PhImage class="size-10 opacity-40" />
-		<p class="text-sm">No images yet.</p>
-	</div>
-{:else}
-	<Carousel.Root slideCount={images.length} {...rootProps}>
-		<Carousel.Control class="flex items-center gap-2">
-			<Carousel.PrevTrigger
-				class="inline-flex size-9 items-center justify-center rounded-md border bg-surface-1 shadow-sm hover:bg-surface-2 active:bg-surface-3 disabled:opacity-50"
-			>
-				<PhArrowLeft class="size-4" />
-			</Carousel.PrevTrigger>
-			<Carousel.ItemGroup class="flex flex-1 overflow-hidden rounded-lg">
-				{#each images as image, index (image.id ?? index)}
-					{@const key = image.id ?? index}
-					{@const isSelected = selectable && selectedIds.includes(key)}
-					<Carousel.Item {index} class="min-w-0 flex-[0_0_100%]">
-						<div class="group/slide relative">
-							<img
-								src={image.src}
-								alt={image.alt ?? ''}
-								class="aspect-square w-full rounded-lg bg-surface-2 object-contain"
-							/>
-							{#if onSetStar && image.id != null}
-								<button
-									class="absolute top-2 left-2 z-10 transition-opacity {image.is_primary
-										? 'opacity-100'
-										: 'opacity-0 group-hover/slide:opacity-100'}"
-									title={image.is_primary ? 'Primary image' : 'Set as primary'}
-									onclick={() => onSetStar(image.id!)}
-								>
-									<PhStar
-										class="size-5 drop-shadow {image.is_primary
-											? 'fill-yellow-400 text-yellow-400'
-											: 'text-white/70 hover:text-yellow-300'}"
-									/>
-								</button>
-							{/if}
-							{#if selectable}
-								<button
-									class="absolute top-2 right-2 z-10 flex size-6 items-center justify-center rounded-full border-2 transition-all {isSelected
-										? 'border-primary bg-primary text-white opacity-100'
-										: 'border-white/80 bg-black/40 opacity-0 group-hover/slide:opacity-100'}"
-									onclick={() => toggleSelect(key)}
-								>
-									{#if isSelected}
-										<PhCheck class="size-3.5" />
-									{/if}
-								</button>
-							{/if}
-						</div>
-					</Carousel.Item>
-				{/each}
-			</Carousel.ItemGroup>
-			<Carousel.NextTrigger
-				class="inline-flex size-9 items-center justify-center rounded-md border bg-surface-1 shadow-sm hover:bg-surface-2 active:bg-surface-3 disabled:opacity-50"
-			>
-				<PhArrowRight class="size-4" />
-			</Carousel.NextTrigger>
-		</Carousel.Control>
-		{#if indicator}
-			<Carousel.IndicatorGroup class="mt-2 flex justify-center gap-2">
-				{#each images as image, index (index)}
-					<Carousel.Indicator
-						{index}
-						class="h-15 w-15 cursor-pointer overflow-hidden rounded-sm border-2 border-transparent opacity-60 transition-all data-current:border-primary data-current:opacity-100"
-					>
-						<img src={image.src} alt={image.alt ?? ''} class="h-full w-full object-cover" />
-					</Carousel.Indicator>
-				{/each}
-			</Carousel.IndicatorGroup>
-		{/if}
-	</Carousel.Root>
-{/if}

package/dist/components/carousel/carousel backup.svelte.d.ts

@@ -1,18 +0,0 @@
-import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
-interface ImageItem {
-    id?: string | number;
-    src: string;
-    alt?: string;
-    is_primary?: boolean;
-    position?: number;
-}
-interface Props extends Omit<CarouselRootProps, 'slideCount'> {
-    images: ImageItem[];
-    indicator?: boolean;
-    selectable?: boolean;
-    selectedIds?: (string | number)[];
-    onSetStar?: (id: string | number) => void;
-}
-declare const Carouselbackup: import("svelte").Component<Props, {}, "selectedIds">;
-type Carouselbackup = ReturnType<typeof Carouselbackup>;
-export default Carouselbackup;