compote-ui 0.26.0 → 0.27.0

package/dist/components/avatar/avatar.svelte

@@ -20,14 +20,21 @@
 			.toUpperCase();
 	}
 
-	let { src, alt, fallback, size = 'md', class: className, ...rest }: AvatarProps & { class?: string } = $props();
+	let {
+		src,
+		alt,
+		fallback,
+		size = 'md',
+		class: className,
+		...rest
+	}: AvatarProps & { class?: string } = $props();
 
 	const displayFallback = $derived(fallback ? getInitials(fallback) : '');
 </script>
 
 <Avatar.Root
 	class={cn(
-		'inline-flex items-center justify-center relative overflow-hidden rounded-full select-none shrink-0 bg-surface-2 font-medium text-ink',
+		'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
 	)}
@@ -36,7 +43,7 @@
 	<Avatar.Image
 		{src}
 		{alt}
-		class="object-cover w-full h-full rounded-[inherit] data-[state=hidden]:hidden"
+		class="h-full w-full rounded-[inherit] object-cover data-[state=hidden]:hidden"
 	/>
 	<Avatar.Fallback class="data-[state=hidden]:hidden">
 		{displayFallback}

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

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