compote-ui 0.25.10 → 0.27.0

package/dist/components/avatar/avatar.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { Avatar } from '@ark-ui/svelte/avatar';
+	import { cn } from 'tailwind-variants';
+	import type { AvatarProps, AvatarSize } from './avatar.types';
+
+	const sizeClasses: Record<AvatarSize, string> = {
+		sm: 'size-8 text-xs',
+		md: 'size-10 text-sm',
+		lg: 'size-12 text-base',
+		xl: 'size-16 text-lg'
+	};
+
+	function getInitials(name: string): string {
+		return name
+			.trim()
+			.split(/\s+/)
+			.slice(0, 2)
+			.map((w) => w[0])
+			.join('')
+			.toUpperCase();
+	}
+
+	let {
+		src,
+		alt,
+		fallback,
+		size = 'md',
+		class: className,
+		...rest
+	}: AvatarProps & { class?: string } = $props();
+
+	const displayFallback = $derived(fallback ? getInitials(fallback) : '');
+</script>
+
+<Avatar.Root
+	class={cn(
+		'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-surface-2 font-medium text-ink select-none',
+		sizeClasses[size],
+		className
+	)}
+	{...rest}
+>
+	<Avatar.Image
+		{src}
+		{alt}
+		class="h-full w-full rounded-[inherit] object-cover data-[state=hidden]:hidden"
+	/>
+	<Avatar.Fallback class="data-[state=hidden]:hidden">
+		{displayFallback}
+	</Avatar.Fallback>
+</Avatar.Root>

package/dist/components/avatar/avatar.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Avatar } from '@ark-ui/svelte/avatar';
+import type { AvatarProps } from './avatar.types';
+type $$ComponentProps = AvatarProps & {
+    class?: string;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/avatar/avatar.types.d.ts

@@ -0,0 +1,8 @@
+import type { AvatarRootBaseProps } from '@ark-ui/svelte/avatar';
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface AvatarProps extends Omit<AvatarRootBaseProps, 'children' | 'asChild' | 'ref'> {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: AvatarSize;
+}

package/dist/components/avatar/avatar.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as Avatar } from './avatar.svelte';
+export type { AvatarProps, AvatarSize } from './avatar.types';

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { default as Avatar } from './avatar.svelte';

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

@@ -112,9 +112,7 @@
 				>
 					<PhArrowClockwise class="size-4" />
 				</Button>
-				<Button variant="outline" size="sm" onclick={handleTrim} disabled={trimming}>
-					Trim
-				</Button>
+				<Button variant="outline" size="sm" onclick={handleTrim} disabled={trimming}>Trim</Button>
 			</div>
 		</div>
 		<p>Width: {cropData.width}px / Height: {cropData.height}px</p>

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

@@ -1,4 +1,6 @@
 export { default as Root } from './tabs.svelte';
+export { default as List } from './tab-list.svelte';
 export { default as Trigger } from './tab-trigger.svelte';
+export { default as Indicator } from './tab-indicator.svelte';
 export { default as Content } from './tab-content.svelte';
 export type { TabsProps } from './types';

package/dist/components/tabs/index.js

@@ -1,3 +1,5 @@
 export { default as Root } from './tabs.svelte';
+export { default as List } from './tab-list.svelte';
 export { default as Trigger } from './tab-trigger.svelte';
+export { default as Indicator } from './tab-indicator.svelte';
 export { default as Content } from './tab-content.svelte';

package/dist/components/tabs/tab-content.svelte

@@ -12,7 +12,7 @@
 <Tabs.Content
 	{...rest}
 	class={className ??
-		'flex-1 pt-4 outline-none data-[orientation=vertical]:pt-0 data-[orientation=vertical]:pl-4'}
+		'flex-1 pt-4 outline-none focus-visible:rounded-sm focus-visible:outline-2 focus-visible:-outline-offset-2 data-[orientation=vertical]:pt-0 data-[orientation=vertical]:pl-4'}
 >
 	{@render children?.()}
 </Tabs.Content>

package/dist/components/tabs/tab-indicator.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Tabs } from '@ark-ui/svelte/tabs';
+	import type { TabIndicatorBaseProps } from '@ark-ui/svelte/tabs';
+
+	interface Props extends TabIndicatorBaseProps {
+		class?: string;
+	}
+
+	let { class: className, ...rest }: Props = $props();
+</script>
+
+<Tabs.Indicator
+	{...rest}
+	class={className ??
+		"absolute -z-10 rounded-md bg-surface-2 transition-[width,height,left,top] duration-200 ease-out data-[orientation='horizontal']:h-8 data-[orientation='horizontal']:w-(--width) data-[orientation='vertical']:h-(--height) data-[orientation='vertical']:w-full"}
+/>

package/dist/components/tabs/tab-indicator.svelte.d.ts

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

package/dist/components/tabs/tab-list.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Tabs } from '@ark-ui/svelte/tabs';
+	import type { TabListBaseProps } from '@ark-ui/svelte/tabs';
+
+	interface Props extends TabListBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Tabs.List
+	{...rest}
+	class={className ??
+		"relative isolate inline-flex gap-1 data-[orientation='horizontal']:flex-row data-[orientation='vertical']:flex-col"}
+>
+	{@render children?.()}
+</Tabs.List>

package/dist/components/tabs/tab-list.svelte.d.ts

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

package/dist/components/tabs/tab-trigger.svelte

@@ -12,7 +12,7 @@
 <Tabs.Trigger
 	{...rest}
 	class={className ??
-		'inline-flex h-8 items-center justify-center gap-2 rounded-md bg-transparent px-3 text-sm whitespace-nowrap text-ink-dim transition-colors outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 data-selected:font-medium data-selected:text-ink data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[orientation=vertical]:py-2'}
+		'inline-flex h-8 items-center justify-center gap-2 rounded-md bg-transparent px-3 text-sm whitespace-nowrap text-ink-dim transition-colors outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:grayscale data-selected:font-medium data-selected:text-ink data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[orientation=vertical]:py-2'}
 >
 	{@render children?.()}
 </Tabs.Trigger>

package/dist/components/tabs/tabs.svelte

@@ -4,11 +4,9 @@
 	import type { TabsProps } from './types';
 
 	let {
-		indicator = false,
 		value = $bindable(),
 		defaultValue,
 		orientation = 'horizontal',
-		triggers,
 		children,
 		...rootProps
 	}: TabsProps = $props();
@@ -22,18 +20,6 @@
 		{orientation}
 		class="flex data-[orientation='horizontal']:flex-col data-[orientation='vertical']:flex-row"
 	>
-		<Tabs.List
-			class="relative isolate inline-flex gap-1 data-[orientation='horizontal']:flex-row data-[orientation='vertical']:flex-col"
-		>
-			{#if triggers}
-				{@render triggers()}
-			{/if}
-			{#if indicator}
-				<Tabs.Indicator
-					class="absolute -z-10 rounded-md bg-surface-2 transition-[width,height,left,top] duration-200 ease-out data-[orientation='horizontal']:h-8 data-[orientation='horizontal']:w-(--width) data-[orientation='vertical']:h-(--height) data-[orientation='vertical']:w-full"
-				/>
-			{/if}
-		</Tabs.List>
 		{@render children?.()}
 	</Tabs.Root>
 </ClientOnly>

package/dist/components/tabs/tabs.svelte.d.ts

@@ -1,5 +1,4 @@
 import { Tabs } from '@ark-ui/svelte/tabs';
-import type { TabsProps } from './types';
-declare const Tabs: import("svelte").Component<TabsProps, {}, "value">;
+declare const Tabs: import("svelte").Component<Tabs.RootBaseProps, {}, "value">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/components/tabs/types.d.ts

@@ -1,8 +1,2 @@
 import type { TabsRootBaseProps } from '@ark-ui/svelte/tabs';
-import type { Snippet } from 'svelte';
-export interface TabsProps extends TabsRootBaseProps {
-    /** Whether to show the animated indicator behind the active tab */
-    indicator?: boolean;
-    /** Snippet for rendering tab triggers inside the list */
-    triggers?: Snippet;
-}
+export type TabsProps = TabsRootBaseProps;

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

@@ -1,18 +1,21 @@
-<script lang="ts">
-	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
-	import type { ToggleGroupItemBaseProps } from '@ark-ui/svelte/toggle-group';
-	import { cn } from 'tailwind-variants';
-
-	interface Props extends ToggleGroupItemBaseProps {
-		class?: string;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<ToggleGroup.Item
-	{...rest}
-	class={cn('inline-flex h-8 w-8 items-center justify-center rounded-md text-sm text-ink-dim transition-colors select-none hover:bg-surface-2 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm', className)}
->
-	{@render children?.()}
-</ToggleGroup.Item>
+<script lang="ts">
+	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
+	import type { ToggleGroupItemBaseProps } from '@ark-ui/svelte/toggle-group';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends ToggleGroupItemBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<ToggleGroup.Item
+	{...rest}
+	class={cn(
+		'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm text-ink-dim transition-colors select-none hover:bg-surface-2 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm',
+		className
+	)}
+>
+	{@render children?.()}
+</ToggleGroup.Item>

package/dist/components/toggle-group/toggle-group.svelte

@@ -1,19 +1,22 @@
-<script lang="ts">
-	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
-	import type { ToggleGroupRootBaseProps } from '@ark-ui/svelte/toggle-group';
-	import { cn } from 'tailwind-variants';
-
-	interface Props extends ToggleGroupRootBaseProps {
-		class?: string;
-	}
-
-	let { class: className, children, value = $bindable(), ...rootProps }: Props = $props();
-</script>
-
-<ToggleGroup.Root
-	{...rootProps}
-	bind:value
-	class={cn('inline-flex gap-1 rounded-lg border border-border bg-surface-1 p-1 data-[orientation=vertical]:flex-col', className)}
->
-	{@render children?.()}
-</ToggleGroup.Root>
+<script lang="ts">
+	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
+	import type { ToggleGroupRootBaseProps } from '@ark-ui/svelte/toggle-group';
+	import { cn } from 'tailwind-variants';
+
+	interface Props extends ToggleGroupRootBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, value = $bindable(), ...rootProps }: Props = $props();
+</script>
+
+<ToggleGroup.Root
+	{...rootProps}
+	bind:value
+	class={cn(
+		'inline-flex gap-1 rounded-lg border border-border bg-surface-1 p-1 data-[orientation=vertical]:flex-col',
+		className
+	)}
+>
+	{@render children?.()}
+</ToggleGroup.Root>

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export { default as Avatar } from './components/avatar/avatar.svelte';
+export type { AvatarProps, AvatarSize } from './components/avatar/avatar.types';
 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';

package/dist/index.js

@@ -1,4 +1,5 @@
 // Reexport your entry components here
+export { default as Avatar } from './components/avatar/avatar.svelte';
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.25.10",
+	"version": "0.27.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -41,7 +41,7 @@
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/kit": "^2.57.1",
 		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "6.2.4",
+		"@sveltejs/vite-plugin-svelte": "7.0.0",
 		"@tailwindcss/vite": "^4.2.4",
 		"@types/node": "^22",
 		"eslint": "^10.2.1",
@@ -55,10 +55,10 @@
 		"svelte": "^5.55.4",
 		"svelte-check": "^4.4.6",
 		"tailwindcss": "^4.2.4",
-		"typescript": "^5.9.3",
+		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.58.2",
 		"unplugin-icons": "^23.0.1",
-		"vite": "^7.3.1",
+		"vite": "^8.0.10",
 		"vite-plugin-devtools-json": "^1.0.0"
 	},
 	"keywords": [