compote-ui 0.14.0 → 0.16.0

package/dist/components/card/card-header.svelte

@@ -5,6 +5,6 @@
 	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class={cn('flex flex-col gap-1.5 p-6', className)} {...rest}>
+<div class={cn('flex flex-col gap-1.5 pb-4', className)} {...rest}>
 	{@render children?.()}
 </div>

package/dist/components/card/card-title.svelte

@@ -5,6 +5,6 @@
 	let { class: className, children, ...rest }: HTMLAttributes<HTMLHeadingElement> = $props();
 </script>
 
-<h3 class={cn('text-base font-semibold leading-none', className)} {...rest}>
+<h3 class={cn('text-lg font-semibold', className)} {...rest}>
 	{@render children?.()}
 </h3>

package/dist/components/carousel/carousel-control.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselControlProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselControlProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.Control
+	class={cn(
+		'flex items-center gap-2 data-[justify=center]:justify-center data-[orientation=vertical]:flex-col',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.Control>

package/dist/components/carousel/carousel-control.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselControlProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselControlProps & {
+    children?: Snippet;
+};
+declare const CarouselControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselControl = ReturnType<typeof CarouselControl>;
+export default CarouselControl;

package/dist/components/carousel/carousel-indicator-group.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselIndicatorGroupProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselIndicatorGroupProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.IndicatorGroup
+	class={cn('flex justify-center gap-2 data-[orientation=vertical]:flex-col', className)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.IndicatorGroup>

package/dist/components/carousel/carousel-indicator-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselIndicatorGroupProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselIndicatorGroupProps & {
+    children?: Snippet;
+};
+declare const CarouselIndicatorGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselIndicatorGroup = ReturnType<typeof CarouselIndicatorGroup>;
+export default CarouselIndicatorGroup;

package/dist/components/carousel/carousel-indicator.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselIndicatorProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		thumbnail = false,
+		...rest
+	}: CarouselIndicatorProps & { children?: Snippet; thumbnail?: boolean } = $props();
+</script>
+
+<Carousel.Indicator
+	class={cn(
+		thumbnail
+			? 'h-14 w-14 cursor-pointer overflow-hidden rounded-sm border-2 border-transparent opacity-60 transition-all data-current:border-primary data-current:opacity-100 [&_img]:h-full [&_img]:w-full [&_img]:object-cover'
+			: 'size-2 cursor-pointer rounded-full border-0 bg-surface-3 p-0 data-current:bg-primary',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.Indicator>

package/dist/components/carousel/carousel-indicator.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CarouselIndicatorProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselIndicatorProps & {
+    children?: Snippet;
+    thumbnail?: boolean;
+};
+declare const CarouselIndicator: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselIndicator = ReturnType<typeof CarouselIndicator>;
+export default CarouselIndicator;

package/dist/components/carousel/carousel-item-group.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselItemGroupProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselItemGroupProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.ItemGroup
+	class={cn(
+		'flex min-w-0 flex-1 overflow-hidden rounded-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.ItemGroup>

package/dist/components/carousel/carousel-item-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselItemGroupProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselItemGroupProps & {
+    children?: Snippet;
+};
+declare const CarouselItemGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselItemGroup = ReturnType<typeof CarouselItemGroup>;
+export default CarouselItemGroup;

package/dist/components/carousel/carousel-item.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselItemProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselItemProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.Item class={cn('min-w-0 flex-[0_0_100%]', className)} {...rest}>
+	{@render children?.()}
+</Carousel.Item>

package/dist/components/carousel/carousel-item.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselItemProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselItemProps & {
+    children?: Snippet;
+};
+declare const CarouselItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselItem = ReturnType<typeof CarouselItem>;
+export default CarouselItem;

package/dist/components/carousel/carousel-next-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import PhArrowRight from '../../icons/PhArrowRight.svelte';
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselNextTriggerProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselNextTriggerProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.NextTrigger
+	class={cn(
+		'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',
+		className
+	)}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PhArrowRight class="size-4" />
+	{/if}
+</Carousel.NextTrigger>

package/dist/components/carousel/carousel-next-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselNextTriggerProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselNextTriggerProps & {
+    children?: Snippet;
+};
+declare const CarouselNextTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselNextTrigger = ReturnType<typeof CarouselNextTrigger>;
+export default CarouselNextTrigger;

package/dist/components/carousel/carousel-prev-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import PhArrowLeft from '../../icons/PhArrowLeft.svelte';
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselPrevTriggerProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselPrevTriggerProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.PrevTrigger
+	class={cn(
+		'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',
+		className
+	)}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PhArrowLeft class="size-4" />
+	{/if}
+</Carousel.PrevTrigger>

package/dist/components/carousel/carousel-prev-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselPrevTriggerProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselPrevTriggerProps & {
+    children?: Snippet;
+};
+declare const CarouselPrevTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselPrevTrigger = ReturnType<typeof CarouselPrevTrigger>;
+export default CarouselPrevTrigger;

package/dist/components/carousel/carousel-root.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselRootProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.Root
+	class={cn('flex flex-col gap-2 data-[orientation=vertical]:flex-row', className)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.Root>

package/dist/components/carousel/carousel-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselRootProps & {
+    children?: Snippet;
+};
+declare const CarouselRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselRoot = ReturnType<typeof CarouselRoot>;
+export default CarouselRoot;

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Root } from './carousel-root.svelte';
+export { default as Control } from './carousel-control.svelte';
+export { default as PrevTrigger } from './carousel-prev-trigger.svelte';
+export { default as NextTrigger } from './carousel-next-trigger.svelte';
+export { default as ItemGroup } from './carousel-item-group.svelte';
+export { default as Item } from './carousel-item.svelte';
+export { default as IndicatorGroup } from './carousel-indicator-group.svelte';
+export { default as Indicator } from './carousel-indicator.svelte';

package/dist/components/carousel/index.js

@@ -0,0 +1,8 @@
+export { default as Root } from './carousel-root.svelte';
+export { default as Control } from './carousel-control.svelte';
+export { default as PrevTrigger } from './carousel-prev-trigger.svelte';
+export { default as NextTrigger } from './carousel-next-trigger.svelte';
+export { default as ItemGroup } from './carousel-item-group.svelte';
+export { default as Item } from './carousel-item.svelte';
+export { default as IndicatorGroup } from './carousel-indicator-group.svelte';
+export { default as Indicator } from './carousel-indicator.svelte';

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/index.d.ts

@@ -3,7 +3,7 @@ export { default as LinkButton } from './components/button/link-button.svelte';
 export * as Card from './components/card';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
 export type { ProcessImageOptions, CropRegion } from './utils/image-processing';
-export { default as Carousel } from './components/carousel/carousel.svelte';
+export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';

package/dist/index.js

@@ -3,7 +3,7 @@ export { default as Button } from './components/button/button.svelte';
 export { default as LinkButton } from './components/button/link-button.svelte';
 export * as Card from './components/card';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
-export { default as Carousel } from './components/carousel/carousel.svelte';
+export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.14.0",
+	"version": "0.16.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -35,18 +35,18 @@
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^2.0.3",
+		"@eslint/compat": "^2.0.4",
 		"@eslint/js": "^10.0.1",
 		"@iconify-json/ph": "^1.2.2",
 		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/kit": "^2.56.1",
 		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@sveltejs/vite-plugin-svelte": "6.2.4",
 		"@tailwindcss/vite": "^4.1.18",
 		"@types/node": "^22",
-		"eslint": "^10.0.3",
+		"eslint": "^10.2.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.15.2",
+		"eslint-plugin-svelte": "^3.17.0",
 		"globals": "^17.4.0",
 		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.4.1",
@@ -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.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.svelte.d.ts

@@ -1,19 +0,0 @@
-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;
-}
-declare const Carousel: import("svelte").Component<Props, {}, "selectedIds">;
-type Carousel = ReturnType<typeof Carousel>;
-export default Carousel;