compote-ui 0.19.5 → 0.21.0

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

@@ -11,6 +11,9 @@
 	}: CarouselItemProps & { children?: Snippet } = $props();
 </script>
 
-<Carousel.Item class={cn('min-w-0 flex-[0_0_100%] data-[orientation=vertical]:min-h-0', className)} {...rest}>
+<Carousel.Item
+	class={cn('min-w-0 flex-[0_0_100%] data-[orientation=vertical]:min-h-0', className)}
+	{...rest}
+>
 	{@render children?.()}
 </Carousel.Item>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import PhArrowRight from '../../icons/PhArrowRight.svelte';
+	import { PhArrowRight } from '../../icons';
 	import { Carousel } from '@ark-ui/svelte/carousel';
 	import type { CarouselNextTriggerProps } from '@ark-ui/svelte/carousel';
 	import { cn } from 'tailwind-variants';

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import PhArrowLeft from '../../icons/PhArrowLeft.svelte';
+	import { PhArrowLeft } from '../../icons';
 	import { Carousel } from '@ark-ui/svelte/carousel';
 	import type { CarouselPrevTriggerProps } from '@ark-ui/svelte/carousel';
 	import { cn } from 'tailwind-variants';

package/dist/components/checkbox/checkbox.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { Checkbox } from '@ark-ui/svelte/checkbox';
 	import type { CheckboxProps as Props } from './checkbox.types.js';
-	import PhCheck from '../../icons/PhCheck.svelte';
-	import PhMinus from '../../icons/PhMinus.svelte';
+	import { PhCheck, PhMinus } from '../../icons';
 
 	let { checked = $bindable(), label, children, ...rest }: Props = $props();
 </script>

package/dist/components/collapsible/collapsible-content.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { Collapsible } from '@ark-ui/svelte/collapsible';
+	import type { CollapsibleContentBaseProps } from '@ark-ui/svelte/collapsible';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends CollapsibleContentBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Collapsible.Content {...rest} class={cn('flex flex-col gap-2 overflow-hidden', className)}>
+	{@render children?.()}
+</Collapsible.Content>
+
+<style>
+	:global([data-scope='collapsible'][data-part='content'][data-state='open']) {
+		animation:
+			collapsible-expand-height 120ms ease-out,
+			collapsible-fade-in 120ms ease-out;
+	}
+
+	:global(
+		[data-scope='collapsible'][data-part='content'][data-state='open'][data-has-collapsed-size]
+	) {
+		animation-name: collapsible-expand-height;
+	}
+
+	:global([data-scope='collapsible'][data-part='content'][data-state='closed']) {
+		animation:
+			collapsible-collapse-height 120ms ease-out,
+			collapsible-fade-out 120ms ease-out;
+	}
+
+	:global(
+		[data-scope='collapsible'][data-part='content'][data-state='closed'][data-has-collapsed-size]
+	) {
+		animation-name: collapsible-collapse-height;
+		box-shadow: inset 0 -12px 12px -12px rgba(0, 0, 0, 0.5);
+	}
+
+	@keyframes collapsible-expand-height {
+		from {
+			height: var(--collapsed-height, 0);
+		}
+		to {
+			height: var(--height);
+		}
+	}
+
+	@keyframes collapsible-collapse-height {
+		from {
+			height: var(--height);
+		}
+		to {
+			height: var(--collapsed-height, 0);
+		}
+	}
+
+	@keyframes collapsible-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes collapsible-fade-out {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+</style>

package/dist/components/collapsible/collapsible-content.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CollapsibleContentBaseProps } from '@ark-ui/svelte/collapsible';
+interface Props extends CollapsibleContentBaseProps {
+    class?: string;
+}
+declare const CollapsibleContent: import("svelte").Component<Props, {}, "">;
+type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
+export default CollapsibleContent;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Collapsible } from '@ark-ui/svelte/collapsible';
+	import type { CollapsibleIndicatorBaseProps } from '@ark-ui/svelte/collapsible';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+	import PhCaretRight from '../../icons/PhCaretRight.svelte';
+
+	interface Props extends CollapsibleIndicatorBaseProps {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Collapsible.Indicator
+	{...rest}
+	class={cn(
+		'inline-flex items-center justify-center transition-transform duration-120 ease-in data-[state=open]:rotate-90',
+		className
+	)}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PhCaretRight class="size-4" />
+	{/if}
+</Collapsible.Indicator>

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

@@ -0,0 +1,9 @@
+import type { CollapsibleIndicatorBaseProps } from '@ark-ui/svelte/collapsible';
+import type { Snippet } from 'svelte';
+interface Props extends CollapsibleIndicatorBaseProps {
+    class?: string;
+    children?: Snippet;
+}
+declare const CollapsibleIndicator: import("svelte").Component<Props, {}, "">;
+type CollapsibleIndicator = ReturnType<typeof CollapsibleIndicator>;
+export default CollapsibleIndicator;

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Collapsible } from '@ark-ui/svelte/collapsible';
+	import type { CollapsibleRootBaseProps } from '@ark-ui/svelte/collapsible';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends CollapsibleRootBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Collapsible.Root {...rest} class={cn('w-full', className)}>
+	{@render children?.()}
+</Collapsible.Root>

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

@@ -0,0 +1,7 @@
+import type { CollapsibleRootBaseProps } from '@ark-ui/svelte/collapsible';
+interface Props extends CollapsibleRootBaseProps {
+    class?: string;
+}
+declare const CollapsibleRoot: import("svelte").Component<Props, {}, "">;
+type CollapsibleRoot = ReturnType<typeof CollapsibleRoot>;
+export default CollapsibleRoot;

package/dist/components/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Collapsible } from '@ark-ui/svelte/collapsible';
+	import type { CollapsibleTriggerBaseProps } from '@ark-ui/svelte/collapsible';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends CollapsibleTriggerBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Collapsible.Trigger
+	{...rest}
+	class={cn(
+		'flex w-full cursor-pointer items-center justify-between gap-3 rounded-md border border-border bg-transparent px-3 py-2.5 text-start text-sm font-medium text-ink transition-colors outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:grayscale',
+		className
+	)}
+>
+	{@render children?.()}
+</Collapsible.Trigger>

package/dist/components/collapsible/collapsible-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CollapsibleTriggerBaseProps } from '@ark-ui/svelte/collapsible';
+interface Props extends CollapsibleTriggerBaseProps {
+    class?: string;
+}
+declare const CollapsibleTrigger: import("svelte").Component<Props, {}, "">;
+type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
+export default CollapsibleTrigger;

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

@@ -0,0 +1,4 @@
+export { default as Root } from './collapsible-root.svelte';
+export { default as Trigger } from './collapsible-trigger.svelte';
+export { default as Indicator } from './collapsible-indicator.svelte';
+export { default as Content } from './collapsible-content.svelte';

package/dist/components/collapsible/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from './collapsible-root.svelte';
+export { default as Trigger } from './collapsible-trigger.svelte';
+export { default as Indicator } from './collapsible-indicator.svelte';
+export { default as Content } from './collapsible-content.svelte';

package/dist/components/combobox/combobox.svelte

@@ -6,9 +6,7 @@
 	import type { ComboboxProps } from './types';
 	import { createListCollection, type ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
-	import PhCaretDown from '../../icons/PhCaretDown.svelte';
-	import PhCheck from '../../icons/PhCheck.svelte';
-	import PhX from '../../icons/PhX.svelte';
+	import { PhCaretDown, PhCheck, PhX } from '../../icons';
 
 	let {
 		value = $bindable(),

package/dist/components/dialog/alert-dialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import PhX from '../../icons/PhX.svelte';
+	import { PhX } from '../../icons';
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import type { AlertDialogProps } from './dialog.types';

package/dist/components/dialog/dialog.svelte

@@ -2,7 +2,7 @@
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { cn } from 'tailwind-variants';
-	import PhX from '../../icons/PhX.svelte';
+	import { PhX } from '../../icons';
 	import type { DialogProps } from './dialog.types';
 
 	let {

package/dist/components/file-upload/file-upload-dropzone.svelte

@@ -2,7 +2,7 @@
 	import { FileUpload } from '@ark-ui/svelte/file-upload';
 	import { getAcceptAttribute } from './utils';
 	import type { FileUploadDropzoneProps } from './types';
-	import PhUploadSimple from '../../icons/PhUploadSimple.svelte';
+	import { PhUploadSimple } from '../../icons';
 
 	let {
 		fileType,

package/dist/components/file-upload/file-upload.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { FileUpload, type FileUploadFileError } from '@ark-ui/svelte/file-upload';
-	import PhX from '../../icons/PhX.svelte';
+	import { PhX } from '../../icons';
 	import type { FileUploadProps } from './types';
 	import { getAcceptAttribute } from './utils';
 	import { getFileIcon } from './icons';

package/dist/components/file-upload/icons.js

@@ -1,10 +1,4 @@
-import PhFile from '../../icons/PhFile.svelte';
-import PhFileArchive from '../../icons/PhFileArchive.svelte';
-import PhFileText from '../../icons/PhFileText.svelte';
-import PhImage from '../../icons/PhImage.svelte';
-import PhMicrosoftExcelLogo from '../../icons/PhMicrosoftExcelLogo.svelte';
-import PhVideoCamera from '../../icons/PhVideoCamera.svelte';
-import PhHeadphones from '../../icons/PhHeadphones.svelte';
+import { PhFile, PhFileArchive, PhFileText, PhHeadphones, PhImage, PhMicrosoftExcelLogo, PhVideoCamera } from '../../icons';
 export const getFileIcon = (file) => {
     const fileType = file.type;
     const fileName = file.name;

package/dist/components/image-cropper/image-cropper.svelte

@@ -4,11 +4,14 @@
 	import { Button } from '../..';
 	import { cropImage } from '../../utils/image-processing';
 	import type { ProcessImageOptions } from '../../utils/image-processing';
+	import { PhArrowClockwise, PhArrowCounterClockwise } from '../../icons';
 
 	let {
 		src,
 		alt = 'Image',
 		aspectRatio = $bindable(),
+		rotation = $bindable(0),
+		onRotationChange,
 		// eslint-disable-next-line no-useless-assignment
 		getCroppedImage = $bindable(),
 		// eslint-disable-next-line no-useless-assignment
@@ -41,7 +44,15 @@
 		};
 	});
 
-	const imageCropper = useImageCropper(() => ({ ...cropperProps, aspectRatio }));
+	const imageCropper = useImageCropper(() => ({
+		...cropperProps,
+		aspectRatio,
+		rotation,
+		onRotationChange: (e) => {
+			rotation = e.rotation;
+			onRotationChange?.(e);
+		}
+	}));
 
 	// eslint-disable-next-line no-useless-assignment
 	getCroppedImage = (options) => imageCropper().getCroppedImage(options);
@@ -56,25 +67,47 @@
 
 <div>
 	<div class="mb-2 flex flex-wrap items-center justify-between gap-1.5">
-		<div>
-			{#each ASPECT_RATIO_OPTIONS as option (option.label)}
+		<div class="flex flex-wrap items-center gap-1.5">
+			<div>
+				{#each ASPECT_RATIO_OPTIONS as option (option.label)}
+					<Button
+						variant={aspectRatio === option.value ? 'default' : 'outline'}
+						size="sm"
+						onclick={() => {
+							aspectRatio = option.value;
+						}}
+					>
+						{option.label}
+					</Button>
+				{/each}
+			</div>
+			<div class="flex gap-1">
+				<Button
+					variant="outline"
+					size="sm"
+					onclick={() => {
+						rotation -= 90;
+					}}
+				>
+					<PhArrowCounterClockwise class="size-4" />
+				</Button>
 				<Button
-					variant={aspectRatio === option.value ? 'default' : 'outline'}
+					variant="outline"
 					size="sm"
 					onclick={() => {
-						aspectRatio = option.value;
+						rotation += 90;
 					}}
 				>
-					{option.label}
+					<PhArrowClockwise class="size-4" />
 				</Button>
-			{/each}
+			</div>
 		</div>
 		<p>Width: {cropData.width}px / Height: {cropData.height}px</p>
 	</div>
 
 	<ImageCropper.RootProvider value={imageCropper}>
 		<ImageCropper.Viewport
-			class="relative overflow-hidden rounded-lg bg-surface-2 max-h-[60vh]"
+			class="relative max-h-[60vh] overflow-hidden rounded-lg bg-surface-2"
 			style={imageAspectRatio ? `aspect-ratio: ${imageAspectRatio}` : 'aspect-ratio: 1'}
 		>
 			<ImageCropper.Image
@@ -87,7 +120,9 @@
 				class="cursor-move border-2 border-white/50 [box-shadow:0_0_0_9999px_rgb(0_0_0/0.5)] outline-none focus-visible:border-primary data-dragging:cursor-grabbing data-dragging:border-white/80"
 			>
 				{#each ImageCropper.handles as position (position)}
-					{@const isCorner = ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(position)}
+					{@const isCorner = ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(
+						position
+					)}
 					<ImageCropper.Handle
 						{position}
 						class="group absolute flex size-5 touch-none items-center justify-center
@@ -102,12 +137,12 @@
 					>
 						{#if isCorner}
 							<div
-								class="size-2 shadow-sm transition-transform group-hover:scale-110
-                  group-data-[position=top-left]:border-l-2 group-data-[position=top-left]:border-t-2
-                  group-data-[position=top-right]:border-r-2 group-data-[position=top-right]:border-t-2
-                  group-data-[position=bottom-right]:border-r-2 group-data-[position=bottom-right]:border-b-2
-                  group-data-[position=bottom-left]:border-l-2 group-data-[position=bottom-left]:border-b-2
-                  border-white"
+								class="size-2 border-white shadow-sm transition-transform
+	                  group-hover:scale-110 group-data-[position=bottom-left]:border-b-2
+	                  group-data-[position=bottom-left]:border-l-2 group-data-[position=bottom-right]:border-r-2
+	                  group-data-[position=bottom-right]:border-b-2 group-data-[position=top-left]:border-t-2
+	                  group-data-[position=top-left]:border-l-2 group-data-[position=top-right]:border-t-2
+	                  group-data-[position=top-right]:border-r-2"
 							></div>
 						{:else}
 							<div

package/dist/components/image-cropper/image-cropper.svelte.d.ts

@@ -1,5 +1,5 @@
 import { ImageCropper } from '@ark-ui/svelte/image-cropper';
 import type { ImageCropperProps } from './types';
-declare const ImageCropper: import("svelte").Component<ImageCropperProps, {}, "getCropData" | "aspectRatio" | "getCroppedImage" | "getProcessedImage">;
+declare const ImageCropper: import("svelte").Component<ImageCropperProps, {}, "getCropData" | "aspectRatio" | "rotation" | "getCroppedImage" | "getProcessedImage">;
 type ImageCropper = ReturnType<typeof ImageCropper>;
 export default ImageCropper;

package/dist/components/listbox/listbox.svelte

@@ -9,7 +9,7 @@
 	import type { ListboxProps } from './types';
 	import type { ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
-	import PhCheck from '../../icons/PhCheck.svelte';
+	import { PhCheck } from '../../icons';
 
 	type Props = ListboxProps<T>;
 

package/dist/components/menu/menu-checkbox-item.svelte

@@ -4,7 +4,7 @@
 	import type { Snippet } from 'svelte';
 	import { cn } from 'tailwind-variants';
 	import MenuItemIndicator from './menu-item-indicator.svelte';
-	import PhCheck from '../../icons/PhCheck.svelte';
+	import { PhCheck } from '../../icons';
 
 	type IndicatorSnippet = { indicator?: Snippet };
 

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

@@ -3,7 +3,7 @@
 	import type { MenuIndicatorBaseProps } from '@ark-ui/svelte/menu';
 	import type { Snippet } from 'svelte';
 	import { cn } from 'tailwind-variants';
-	import PhCaretDown from '../../icons/PhCaretDown.svelte';
+	import { PhCaretDown } from '../../icons';
 
 	type Props = MenuIndicatorBaseProps & { class?: string; children?: Snippet };
 

package/dist/components/number-input/number-input.svelte

@@ -2,8 +2,7 @@
 	import { Field } from '@ark-ui/svelte/field';
 	import { NumberInput } from '@ark-ui/svelte/number-input';
 	import type { NumberInputProps } from './types';
-	import PhCaretDown from '../../icons/PhCaretDown.svelte';
-	import PhCaretUp from '../../icons/PhCaretUp.svelte';
+	import { PhCaretDown, PhCaretUp } from '../../icons';
 	import { useLocaleContext } from '@ark-ui/svelte/locale';
 
 	let {

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Root } from './scroll-area-root.svelte';
+export { default as Viewport } from './scroll-area-viewport.svelte';
+export { default as Content } from './scroll-area-content.svelte';
+export { default as Scrollbar } from './scroll-area-scrollbar.svelte';
+export { default as Thumb } from './scroll-area-thumb.svelte';
+export { default as Corner } from './scroll-area-corner.svelte';

package/dist/components/scroll-area/index.js

@@ -0,0 +1,6 @@
+export { default as Root } from './scroll-area-root.svelte';
+export { default as Viewport } from './scroll-area-viewport.svelte';
+export { default as Content } from './scroll-area-content.svelte';
+export { default as Scrollbar } from './scroll-area-scrollbar.svelte';
+export { default as Thumb } from './scroll-area-thumb.svelte';
+export { default as Corner } from './scroll-area-corner.svelte';

package/dist/components/scroll-area/scroll-area-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ScrollArea } from '@ark-ui/svelte/scroll-area';
+	import type { ScrollAreaContentBaseProps } from '@ark-ui/svelte/scroll-area';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends ScrollAreaContentBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<ScrollArea.Content {...rest} class={cn('', className)}>
+	{@render children?.()}
+</ScrollArea.Content>

package/dist/components/scroll-area/scroll-area-content.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ScrollAreaContentBaseProps } from '@ark-ui/svelte/scroll-area';
+interface Props extends ScrollAreaContentBaseProps {
+    class?: string;
+}
+declare const ScrollAreaContent: import("svelte").Component<Props, {}, "">;
+type ScrollAreaContent = ReturnType<typeof ScrollAreaContent>;
+export default ScrollAreaContent;

package/dist/components/scroll-area/scroll-area-corner.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { ScrollArea } from '@ark-ui/svelte/scroll-area';
+	import type { ScrollAreaCornerBaseProps } from '@ark-ui/svelte/scroll-area';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends ScrollAreaCornerBaseProps {
+		class?: string;
+	}
+
+	let { class: className, ...rest }: Props = $props();
+</script>
+
+<ScrollArea.Corner {...rest} class={cn('bg-transparent', className)} />

package/dist/components/scroll-area/scroll-area-corner.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ScrollAreaCornerBaseProps } from '@ark-ui/svelte/scroll-area';
+interface Props extends ScrollAreaCornerBaseProps {
+    class?: string;
+}
+declare const ScrollAreaCorner: import("svelte").Component<Props, {}, "">;
+type ScrollAreaCorner = ReturnType<typeof ScrollAreaCorner>;
+export default ScrollAreaCorner;

package/dist/components/scroll-area/scroll-area-root.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ScrollArea } from '@ark-ui/svelte/scroll-area';
+	import type { ScrollAreaRootBaseProps } from '@ark-ui/svelte/scroll-area';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends ScrollAreaRootBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<ScrollArea.Root {...rest} class={cn('relative overflow-hidden', className)}>
+	{@render children?.()}
+</ScrollArea.Root>

package/dist/components/scroll-area/scroll-area-root.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ScrollAreaRootBaseProps } from '@ark-ui/svelte/scroll-area';
+interface Props extends ScrollAreaRootBaseProps {
+    class?: string;
+}
+declare const ScrollAreaRoot: import("svelte").Component<Props, {}, "">;
+type ScrollAreaRoot = ReturnType<typeof ScrollAreaRoot>;
+export default ScrollAreaRoot;

package/dist/components/scroll-area/scroll-area-scrollbar.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { ScrollArea } from '@ark-ui/svelte/scroll-area';
+	import type { ScrollAreaScrollbarBaseProps } from '@ark-ui/svelte/scroll-area';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends ScrollAreaScrollbarBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<ScrollArea.Scrollbar
+	{...rest}
+	class={cn(
+		'group pointer-events-none relative m-2 flex rounded-md bg-well opacity-0 transition-opacity duration-150',
+		'data-hover:pointer-events-auto data-hover:opacity-100',
+		'data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0',
+		'data-[orientation=vertical]:w-1 data-[orientation=vertical]:[&:not([data-overflow-y])]:hidden',
+		'data-[orientation=vertical]:before:absolute data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=vertical]:before:content-[""]',
+		'data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:[&:not([data-overflow-x])]:hidden',
+		'data-[orientation=horizontal]:before:absolute data-[orientation=horizontal]:before:-bottom-2 data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:content-[""]',
+		className
+	)}
+>
+	{@render children?.()}
+</ScrollArea.Scrollbar>

package/dist/components/scroll-area/scroll-area-scrollbar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ScrollAreaScrollbarBaseProps } from '@ark-ui/svelte/scroll-area';
+interface Props extends ScrollAreaScrollbarBaseProps {
+    class?: string;
+}
+declare const ScrollAreaScrollbar: import("svelte").Component<Props, {}, "">;
+type ScrollAreaScrollbar = ReturnType<typeof ScrollAreaScrollbar>;
+export default ScrollAreaScrollbar;

package/dist/components/scroll-area/scroll-area-thumb.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ScrollArea } from '@ark-ui/svelte/scroll-area';
+	import type { ScrollAreaThumbBaseProps } from '@ark-ui/svelte/scroll-area';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends ScrollAreaThumbBaseProps {
+		class?: string;
+	}
+
+	let { class: className, ...rest }: Props = $props();
+</script>
+
+<ScrollArea.Thumb
+	{...rest}
+	class={cn(
+		'w-full rounded-[inherit] bg-border',
+		'group-data-[orientation=horizontal]:h-full group-data-[orientation=horizontal]:w-auto',
+		className
+	)}
+/>

package/dist/components/scroll-area/scroll-area-thumb.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ScrollAreaThumbBaseProps } from '@ark-ui/svelte/scroll-area';
+interface Props extends ScrollAreaThumbBaseProps {
+    class?: string;
+}
+declare const ScrollAreaThumb: import("svelte").Component<Props, {}, "">;
+type ScrollAreaThumb = ReturnType<typeof ScrollAreaThumb>;
+export default ScrollAreaThumb;

package/dist/components/scroll-area/scroll-area-viewport.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { ScrollArea } from '@ark-ui/svelte/scroll-area';
+	import type { ScrollAreaViewportBaseProps } from '@ark-ui/svelte/scroll-area';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends ScrollAreaViewportBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<ScrollArea.Viewport
+	{...rest}
+	class={cn(
+		'h-full overscroll-contain outline-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+		'focus-visible:ring-2 focus-visible:ring-ring',
+		className
+	)}
+>
+	{@render children?.()}
+</ScrollArea.Viewport>

package/dist/components/scroll-area/scroll-area-viewport.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ScrollAreaViewportBaseProps } from '@ark-ui/svelte/scroll-area';
+interface Props extends ScrollAreaViewportBaseProps {
+    class?: string;
+}
+declare const ScrollAreaViewport: import("svelte").Component<Props, {}, "">;
+type ScrollAreaViewport = ReturnType<typeof ScrollAreaViewport>;
+export default ScrollAreaViewport;

package/dist/components/select/select.svelte

@@ -5,8 +5,7 @@
 	import type { SelectProps } from './types';
 	import { createListCollection, type ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
-	import PhCaretDown from '../../icons/PhCaretDown.svelte';
-	import PhCheck from '../../icons/PhCheck.svelte';
+	import { PhCaretDown, PhCheck } from '../../icons';
 
 	let {
 		value = $bindable(),

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

@@ -4,14 +4,17 @@
 	import type { TreeViewProps } from './types';
 	import { createTreeCollection, type TreeItem } from '../../utils/collections';
 	import { Debounced } from 'runed';
-	import PhX from '../../icons/PhX.svelte';
-	import PhCaretRight from '../../icons/PhCaretRight.svelte';
-	import PhMinus from '../../icons/PhMinus.svelte';
-	import PhCheck from '../../icons/PhCheck.svelte';
-	import PhArrowsInSimple from '../../icons/PhArrowsInSimple.svelte';
+	import {
+		PhArrowsInSimple,
+		PhCaretRight,
+		PhCheck,
+		PhMagnifyingGlass,
+		PhMinus,
+		PhX
+	} from '../../icons';
 	import { Button, Field } from '../..';
 	import { SvelteSet } from 'svelte/reactivity';
-	import PhMagnifyingGlass from '../../icons/PhMagnifyingGlass.svelte';
+
 	import Icon from '@iconify/svelte';
 
 	let {
@@ -165,7 +168,7 @@
 		{#if node.children}
 			<TreeView.Branch class="relative">
 				<TreeView.BranchControl
-					class="hover:bg-accent data-selected:bg-accent data-selected:text-accent-foreground data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:pointer-events-none flex w-full cursor-pointer items-center gap-2 rounded-md py-1.5 pr-3 text-sm select-none"
+					class="hover:bg-accent data-selected:bg-accent data-selected:text-accent-foreground flex w-full cursor-pointer items-center gap-2 rounded-md py-1.5 pr-3 text-sm select-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50"
 					style="padding-inline-start: calc(var(--tree-px) + (var(--depth) - 1) * (var(--tree-indent) + var(--tree-icon) * 0.5))"
 				>
 					{#if selectionMode === 'multiple'}
@@ -190,7 +193,7 @@
 			</TreeView.Branch>
 		{:else}
 			<TreeView.Item
-				class="hover:bg-accent data-selected:bg-accent data-selected:text-accent-foreground data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:pointer-events-none flex w-full cursor-pointer items-center gap-2 rounded-md py-1.5 pr-3 text-sm select-none"
+				class="hover:bg-accent data-selected:bg-accent data-selected:text-accent-foreground flex w-full cursor-pointer items-center gap-2 rounded-md py-1.5 pr-3 text-sm select-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50"
 				style="padding-inline-start: calc(var(--tree-px) + (var(--depth) - 1) * (var(--tree-indent) + var(--tree-icon) * 0.5) + var(--tree-icon) + var(--tree-gap))"
 			>
 				{#if selectionMode === 'multiple'}

package/dist/icons/PhArrowClockwise.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M240 56v48a8 8 0 0 1-8 8h-48a8 8 0 0 1 0-16h27.4l-26.59-24.36l-.25-.24a80 80 0 1 0-1.67 114.78a8 8 0 0 1 11 11.63A95.44 95.44 0 0 1 128 224h-1.32a96 96 0 1 1 69.07-164L224 85.8V56a8 8 0 1 1 16 0"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhArrowClockwise.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhArrowClockwise: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhArrowClockwise = ReturnType<typeof PhArrowClockwise>;
+export default PhArrowClockwise;

package/dist/icons/PhArrowCounterClockwise.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M224 128a96 96 0 0 1-94.71 96H128a95.38 95.38 0 0 1-65.9-26.2a8 8 0 0 1 11-11.63a80 80 0 1 0-1.67-114.78a3 3 0 0 1-.26.25L44.59 96H72a8 8 0 0 1 0 16H24a8 8 0 0 1-8-8V56a8 8 0 0 1 16 0v29.8L60.25 60A96 96 0 0 1 224 128"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhArrowCounterClockwise.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhArrowCounterClockwise: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhArrowCounterClockwise = ReturnType<typeof PhArrowCounterClockwise>;
+export default PhArrowCounterClockwise;

package/dist/icons/index.d.ts

@@ -0,0 +1,23 @@
+export { default as PhArrowClockwise } from './PhArrowClockwise.svelte';
+export { default as PhArrowCounterClockwise } from './PhArrowCounterClockwise.svelte';
+export { default as PhArrowLeft } from './PhArrowLeft.svelte';
+export { default as PhArrowRight } from './PhArrowRight.svelte';
+export { default as PhArrowsInSimple } from './PhArrowsInSimple.svelte';
+export { default as PhCaretDown } from './PhCaretDown.svelte';
+export { default as PhCaretRight } from './PhCaretRight.svelte';
+export { default as PhCaretUp } from './PhCaretUp.svelte';
+export { default as PhCheck } from './PhCheck.svelte';
+export { default as PhFile } from './PhFile.svelte';
+export { default as PhFileArchive } from './PhFileArchive.svelte';
+export { default as PhFileText } from './PhFileText.svelte';
+export { default as PhHeadphones } from './PhHeadphones.svelte';
+export { default as PhImage } from './PhImage.svelte';
+export { default as PhListMagnifyingGlass } from './PhListMagnifyingGlass.svelte';
+export { default as PhMagnifyingGlass } from './PhMagnifyingGlass.svelte';
+export { default as PhMicrosoftExcelLogo } from './PhMicrosoftExcelLogo.svelte';
+export { default as PhMinus } from './PhMinus.svelte';
+export { default as PhStar } from './PhStar.svelte';
+export { default as PhUploadSimple } from './PhUploadSimple.svelte';
+export { default as PhUser } from './PhUser.svelte';
+export { default as PhVideoCamera } from './PhVideoCamera.svelte';
+export { default as PhX } from './PhX.svelte';

package/dist/icons/index.js

@@ -0,0 +1,23 @@
+export { default as PhArrowClockwise } from './PhArrowClockwise.svelte';
+export { default as PhArrowCounterClockwise } from './PhArrowCounterClockwise.svelte';
+export { default as PhArrowLeft } from './PhArrowLeft.svelte';
+export { default as PhArrowRight } from './PhArrowRight.svelte';
+export { default as PhArrowsInSimple } from './PhArrowsInSimple.svelte';
+export { default as PhCaretDown } from './PhCaretDown.svelte';
+export { default as PhCaretRight } from './PhCaretRight.svelte';
+export { default as PhCaretUp } from './PhCaretUp.svelte';
+export { default as PhCheck } from './PhCheck.svelte';
+export { default as PhFile } from './PhFile.svelte';
+export { default as PhFileArchive } from './PhFileArchive.svelte';
+export { default as PhFileText } from './PhFileText.svelte';
+export { default as PhHeadphones } from './PhHeadphones.svelte';
+export { default as PhImage } from './PhImage.svelte';
+export { default as PhListMagnifyingGlass } from './PhListMagnifyingGlass.svelte';
+export { default as PhMagnifyingGlass } from './PhMagnifyingGlass.svelte';
+export { default as PhMicrosoftExcelLogo } from './PhMicrosoftExcelLogo.svelte';
+export { default as PhMinus } from './PhMinus.svelte';
+export { default as PhStar } from './PhStar.svelte';
+export { default as PhUploadSimple } from './PhUploadSimple.svelte';
+export { default as PhUser } from './PhUser.svelte';
+export { default as PhVideoCamera } from './PhVideoCamera.svelte';
+export { default as PhX } from './PhX.svelte';

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 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 * as Collapsible from './components/collapsible';
+export * as ScrollArea from './components/scroll-area';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
 export type { ProcessImageOptions, CropRegion } from './utils/image-processing';
 export * as Carousel from './components/carousel';

package/dist/index.js

@@ -2,6 +2,8 @@
 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 * as Collapsible from './components/collapsible';
+export * as ScrollArea from './components/scroll-area';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
 export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';

package/dist/utils/image-processing.js

@@ -123,7 +123,9 @@ export async function cropImage(src, crop, opts) {
     let canvas = document.createElement('canvas');
     canvas.width = crop.width;
     canvas.height = crop.height;
-    canvas.getContext('2d').drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
+    canvas
+        .getContext('2d')
+        .drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
     if (trim)
         canvas = applyTrim(canvas, trimThreshold);
     canvas = scaleCanvas(canvas, maxWidth, maxHeight);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.19.5",
+	"version": "0.21.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",