compote-ui 0.20.0 → 0.21.1

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/listbox/listbox.svelte

@@ -45,17 +45,15 @@
 	);
 
 	const stringValue = $derived(value?.map(String) ?? []);
-
-	function handleValueChange(details: Parameters<NonNullable<Props['onValueChange']>>[0]) {
-		value = details.value as unknown as T[];
-		onValueChange?.(details);
-	}
 </script>
 
 <Listbox.Root
 	value={stringValue}
 	{collection}
-	onValueChange={handleValueChange}
+	onValueChange={(details) => {
+		value = details.value as unknown as T[];
+		onValueChange?.(details);
+	}}
 	{...restProps}
 	class={cn('flex h-full w-full flex-col gap-1.5 overflow-hidden p-0.5', className)}
 >
@@ -69,21 +67,23 @@
 			class="h-8 w-full rounded-xs border border-surface-3 bg-transparent px-2.5 text-sm outline-none placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-ring"
 		/>
 	{/if}
-	<Listbox.Content class="flex min-h-0 w-full flex-1 flex-col gap-1 overflow-y-auto outline-none">
+	<Listbox.Content class="flex min-h-0 w-full flex-1 flex-col overflow-y-auto outline-none">
 		{#if hasGroups}
 			{#each collection.group() as [type, group] (type)}
-				<Listbox.ItemGroup class="flex flex-col gap-1 px-1 py-1">
-					<Listbox.ItemGroupLabel class="flex h-10 items-center text-sm font-medium text-ink-dim">
+				<Listbox.ItemGroup class="flex flex-col">
+					<Listbox.ItemGroupLabel
+						class="px-2 py-1.5 text-xs font-semibold tracking-wide text-ink-dim uppercase"
+					>
 						{type}
 					</Listbox.ItemGroupLabel>
 					{#each group as item (item.value)}
 						<Listbox.Item
 							{item}
-							class="flex cursor-pointer items-center justify-between rounded-xs px-2.5 py-1.5 text-sm font-medium transition-all duration-150 hover:bg-surface-2 data-disabled:opacity-50 data-highlighted:bg-surface-2"
+							class="flex min-h-8 cursor-pointer items-center justify-between gap-2 rounded-xs px-2 text-sm transition-colors outline-none select-none hover:bg-surface-2 data-disabled:opacity-50 data-highlighted:bg-surface-2 data-[state=checked]:text-primary"
 						>
 							<Listbox.ItemText class="flex-1 truncate">{item.label}</Listbox.ItemText>
 							<Listbox.ItemIndicator
-								class="h-5 w-5 text-primary data-[state=checked]:flex data-[state=unchecked]:hidden"
+								class="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary data-[state=unchecked]:hidden"
 							>
 								<PhCheck />
 							</Listbox.ItemIndicator>
@@ -95,11 +95,11 @@
 			{#each collection.items as item (item.value)}
 				<Listbox.Item
 					{item}
-					class="flex cursor-pointer items-center justify-between rounded-xs px-2.5 py-1.5 text-sm font-medium transition-all duration-150 hover:bg-surface-2 data-disabled:opacity-50 data-highlighted:bg-surface-2"
+					class="flex min-h-8 cursor-pointer items-center justify-between gap-2 rounded-xs px-2 text-sm transition-colors outline-none select-none hover:bg-surface-2 data-disabled:opacity-50 data-highlighted:bg-surface-2 data-[state=checked]:text-primary"
 				>
 					<Listbox.ItemText class="flex-1 truncate">{item.label}</Listbox.ItemText>
 					<Listbox.ItemIndicator
-						class="h-5 w-5 text-primary data-[state=checked]:flex data-[state=unchecked]:hidden"
+						class="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary data-[state=unchecked]:hidden"
 					>
 						<PhCheck />
 					</Listbox.ItemIndicator>

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

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