compote-ui 0.31.0 → 0.32.0

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

@@ -1,18 +1,14 @@
 <script lang="ts">
 	import { Drawer } from '@ark-ui/svelte/drawer';
-	import type { DrawerRootProps, DrawerOpenChangeDetails } from '@ark-ui/svelte/drawer';
+	import type { DrawerRootProps } from '@ark-ui/svelte/drawer';
 
 	interface Props extends Omit<DrawerRootProps, 'open' | 'onOpenChange'> {
 		open?: boolean;
 	}
 
 	let { children, open = $bindable(), ...rest }: Props = $props();
-
-	const handleOpenChange = (details: DrawerOpenChangeDetails) => {
-		open = details.open;
-	};
 </script>
 
-<Drawer.Root {open} onOpenChange={handleOpenChange} {...rest}>
+<Drawer.Root bind:open {...rest}>
 	{@render children?.()}
 </Drawer.Root>

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

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerTitleBaseProps } from '@ark-ui/svelte/drawer';
+	import type { ClassValue } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
 
 	interface Props extends DrawerTitleBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<Drawer.Title {...rest} class={className ?? 'mb-2 text-lg leading-7 font-medium text-ink'}>
+<Drawer.Title {...rest} class={cn('mb-2 text-lg leading-7 font-medium text-ink', className)}>
 	{@render children?.()}
 </Drawer.Title>

package/dist/components/drawer/drawer-title.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DrawerTitleBaseProps } from '@ark-ui/svelte/drawer';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DrawerTitleBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DrawerTitle: import("svelte").Component<Props, {}, "">;
 type DrawerTitle = ReturnType<typeof DrawerTitle>;

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

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerTriggerBaseProps } from '@ark-ui/svelte/drawer';
+	import type { ClassValue } from 'svelte/elements';
 
 	interface Props extends DrawerTriggerBaseProps {
-		class?: string;
+		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();

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

@@ -1,6 +1,7 @@
 import type { DrawerTriggerBaseProps } from '@ark-ui/svelte/drawer';
+import type { ClassValue } from 'svelte/elements';
 interface Props extends DrawerTriggerBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 declare const DrawerTrigger: import("svelte").Component<Props, {}, "">;
 type DrawerTrigger = ReturnType<typeof DrawerTrigger>;

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

@@ -14,10 +14,10 @@
 
 <div class="relative w-full">
 	{#if startIcon}
-		<div
-			class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5 text-ink-dim"
-		>
-			{@render startIcon()}
+		<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center p-0.5 text-ink-dim">
+			<div class="flex h-full min-w-8 items-center justify-center">
+				{@render startIcon()}
+			</div>
 		</div>
 	{/if}
 	<Field.Input
@@ -31,8 +31,10 @@
 		)}
 	/>
 	{#if endIcon}
-		<div class="absolute inset-y-0 right-0 flex items-center pr-2.5">
-			{@render endIcon()}
+		<div class="absolute inset-y-0 right-0 flex items-center justify-end p-0.5">
+			<div class="flex h-full min-w-8 items-center justify-center">
+				{@render endIcon()}
+			</div>
 		</div>
 	{/if}
 </div>

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

@@ -1,30 +1,31 @@
 import type { Snippet } from 'svelte';
 import type { FieldRootBaseProps, FieldLabelBaseProps, FieldInputProps as ArkFieldInputProps, FieldTextareaProps as ArkFieldTextareaProps, FieldHelperTextBaseProps, FieldErrorTextBaseProps } from '@ark-ui/svelte/field';
+import type { ClassValue } from 'svelte/elements';
 export interface FormAdapter {
     invalid(field: string): boolean;
     isRequired(field: string): boolean;
     errors: Record<string, string[]>;
 }
 export interface FieldRootProps extends FieldRootBaseProps {
-    class?: string;
+    class?: ClassValue;
     form?: FormAdapter;
     field?: string;
     helperText?: string;
 }
 export interface FieldLabelProps extends FieldLabelBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldInputProps extends ArkFieldInputProps {
-    class?: string;
+    class?: ClassValue;
     startIcon?: Snippet;
     endIcon?: Snippet;
 }
 export interface FieldTextareaProps extends ArkFieldTextareaProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldHelperTextProps extends FieldHelperTextBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldErrorTextProps extends FieldErrorTextBaseProps {
-    class?: string;
+    class?: ClassValue;
 }

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

@@ -1,13 +1,14 @@
 import type { FieldsetRootBaseProps, FieldsetLegendBaseProps, FieldsetHelperTextBaseProps, FieldsetErrorTextBaseProps } from '@ark-ui/svelte/fieldset';
+import type { ClassValue } from 'svelte/elements';
 export interface FieldsetRootProps extends FieldsetRootBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldsetLegendProps extends FieldsetLegendBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldsetHelperTextProps extends FieldsetHelperTextBaseProps {
-    class?: string;
+    class?: ClassValue;
 }
 export interface FieldsetErrorTextProps extends FieldsetErrorTextBaseProps {
-    class?: string;
+    class?: ClassValue;
 }

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

@@ -5,9 +5,10 @@
 	import type { ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
 	import { getListboxContext } from './listbox-context';
+	import type { ClassValue } from 'svelte/elements';
 
 	type Props = ListboxContentBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		items?: Snippet<[{ items: ListItem[]; group: [string, ListItem[]][] }]>;
 	};
 

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

@@ -1,8 +1,9 @@
 import type { ListboxContentBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
 import type { ListItem } from '../../utils/collections';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxContentBaseProps & {
-    class?: string;
+    class?: ClassValue;
     items?: Snippet<[{
         items: ListItem[];
         group: [string, ListItem[]][];

package/dist/components/listbox/listbox-empty.svelte

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxEmptyBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxEmptyBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-empty.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxEmptyBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxEmptyBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxEmpty: import("svelte").Component<Props, {}, "">;

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

@@ -3,9 +3,10 @@
 	import type { ListboxInputBaseProps } from '@ark-ui/svelte/listbox';
 	import { cn } from 'tailwind-variants';
 	import { getListboxContext } from './listbox-context';
+	import type { ClassValue } from 'svelte/elements';
 
 	type Props = ListboxInputBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		placeholder?: string;
 		oninput?: (event: Event & { currentTarget: HTMLInputElement }) => void;
 	};

package/dist/components/listbox/listbox-input.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ListboxInputBaseProps } from '@ark-ui/svelte/listbox';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxInputBaseProps & {
-    class?: string;
+    class?: ClassValue;
     placeholder?: string;
     oninput?: (event: Event & {
         currentTarget: HTMLInputElement;

package/dist/components/listbox/listbox-item-group-label.svelte

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxItemGroupLabelBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxItemGroupLabelBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-item-group-label.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxItemGroupLabelBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxItemGroupLabelBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxItemGroupLabel: import("svelte").Component<Props, {}, "">;

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

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxItemGroupBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxItemGroupBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

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

@@ -1,7 +1,8 @@
 import type { ListboxItemGroupBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxItemGroupBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxItemGroup: import("svelte").Component<Props, {}, "">;

package/dist/components/listbox/listbox-item-indicator.svelte

@@ -4,9 +4,10 @@
 	import type { Snippet } from 'svelte';
 	import { cn } from 'tailwind-variants';
 	import { PhCheck } from '../../icons';
+	import type { ClassValue } from 'svelte/elements';
 
 	type Props = ListboxItemIndicatorBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-item-indicator.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxItemIndicatorBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxItemIndicatorBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxItemIndicator: import("svelte").Component<Props, {}, "">;

package/dist/components/listbox/listbox-item-text.svelte

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxItemTextBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxItemTextBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-item-text.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxItemTextBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxItemTextBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxItemText: import("svelte").Component<Props, {}, "">;

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

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxItemBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxItemBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

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

@@ -1,7 +1,8 @@
 import type { ListboxItemBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxItemBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxItem: import("svelte").Component<Props, {}, "">;

package/dist/components/listbox/listbox-label.svelte

@@ -2,10 +2,11 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxLabelBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxLabelBaseProps & {
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

package/dist/components/listbox/listbox-label.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ListboxLabelBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxLabelBaseProps & {
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
 };
 declare const ListboxLabel: import("svelte").Component<Props, {}, "">;

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

@@ -7,12 +7,13 @@
 	import type { ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
 	import { setListboxContext } from './listbox-context';
+	import type { ClassValue } from 'svelte/elements';
 
 	type Props = Omit<ListboxRootBaseProps<ListItem<T>>, 'collection' | 'value'> & {
 		items: ListItem<T>[];
 		value?: T[];
 		name?: string;
-		class?: string;
+		class?: ClassValue;
 		children?: Snippet;
 	};
 

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

@@ -1,12 +1,13 @@
 import { Listbox } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
 import type { ListItem } from '../../utils/collections';
+import type { ClassValue } from 'svelte/elements';
 declare function $$render<T extends string | number = string>(): {
     props: Omit<Listbox.RootBaseProps<ListItem<T>>, "value" | "collection"> & {
         items: ListItem<T>[];
         value?: T[];
         name?: string;
-        class?: string;
+        class?: ClassValue;
         children?: Snippet;
     };
     exports: {};

package/dist/components/listbox/listbox-value-text.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxValueTextBaseProps } from '@ark-ui/svelte/listbox';
+	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 
 	type Props = ListboxValueTextBaseProps & {
-		class?: string;
+		class?: ClassValue;
 	};
 
 	let { class: className, ...restProps }: Props = $props();

package/dist/components/listbox/listbox-value-text.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ListboxValueTextBaseProps } from '@ark-ui/svelte/listbox';
+import type { ClassValue } from 'svelte/elements';
 type Props = ListboxValueTextBaseProps & {
-    class?: string;
+    class?: ClassValue;
 };
 declare const ListboxValueText: import("svelte").Component<Props, {}, "">;
 type ListboxValueText = ReturnType<typeof ListboxValueText>;

package/dist/components/select/select.svelte

@@ -65,7 +65,7 @@
 	<Portal>
 		<Select.Positioner>
 			<Select.Content
-				class="data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 max-h-60 min-w-(--reference-width) overflow-auto rounded-md border bg-surface-document p-1 text-ink shadow-md"
+				class="z-50 max-h-60 min-w-(--reference-width) overflow-auto rounded-md border bg-surface-document p-1 text-ink shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
 			>
 				<Select.ItemGroup>
 					{#each items as item (item.value)}

package/dist/components/toggle/toggle.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Toggle as ArkToggle } from '@ark-ui/svelte/toggle';
+	import type { ToggleProps } from './types';
+	import { toggle } from './toggle.variants';
+
+	let {
+		class: className,
+		children,
+		pressed = $bindable(),
+		size,
+		...rootProps
+	}: ToggleProps = $props();
+</script>
+
+<ArkToggle.Root {...rootProps} bind:pressed class={toggle({ size, class: className as never })}>
+	{@render children?.()}
+</ArkToggle.Root>

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

@@ -0,0 +1,4 @@
+import type { ToggleProps } from './types';
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/toggle/toggle.variants.d.ts

@@ -0,0 +1,21 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const toggle: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium 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-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm [&_svg]:shrink-0", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium 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-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm [&_svg]:shrink-0", unknown, unknown, undefined>>;
+export type ToggleSize = NonNullable<VariantProps<typeof toggle>['size']>;

package/dist/components/toggle/toggle.variants.js

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+export const toggle = tv({
+    base: 'inline-flex cursor-pointer items-center justify-center rounded-md font-medium 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-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm [&_svg]:shrink-0',
+    variants: {
+        size: {
+            sm: 'h-7 min-w-7 gap-1 px-1.5 text-xs [&_svg]:size-3.5',
+            md: 'h-8 min-w-8 gap-1.5 px-2 text-sm [&_svg]:size-4',
+            lg: 'h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5'
+        }
+    },
+    defaultVariants: { size: 'md' }
+});

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

@@ -0,0 +1,8 @@
+import type { ToggleRootProps } from '@ark-ui/svelte/toggle';
+import type { ClassValue } from 'svelte/elements';
+import type { ToggleSize } from './toggle.variants';
+export interface ToggleProps extends ToggleRootProps {
+    class?: ClassValue | null;
+    size?: ToggleSize;
+}
+export type { ToggleSize };

package/dist/components/toggle/types.js

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

package/dist/components/toggle-group/toggle-group-context.d.ts

@@ -0,0 +1,8 @@
+import type { ToggleSize } from '../toggle/toggle.variants';
+export declare const getToggleGroupContext: () => {
+    readonly size: ToggleSize;
+}, setToggleGroupContext: (context: {
+    readonly size: ToggleSize;
+}) => {
+    readonly size: ToggleSize;
+};

package/dist/components/toggle-group/toggle-group-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'svelte';
+export const [getToggleGroupContext, setToggleGroupContext] = createContext();

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

@@ -1,22 +1,23 @@
 <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';
 	import type { ClassValue } from 'svelte/elements';
+	import { toggle, type ToggleSize } from '../toggle/toggle.variants';
+	import { getToggleGroupContext } from './toggle-group-context';
 
 	interface Props extends ToggleGroupItemBaseProps {
 		class?: ClassValue | null;
+		size?: ToggleSize;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, children, size, ...rest }: Props = $props();
+	const groupContext = getToggleGroupContext();
+	const itemSize = $derived(size ?? groupContext.size);
 </script>
 
 <ToggleGroup.Item
 	{...rest}
-	class={cn(
-		'inline-flex h-8 min-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 as never
-	)}
+	class={toggle({ size: itemSize, class: ['rounded-none', className] as never })}
 >
 	{@render children?.()}
 </ToggleGroup.Item>

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

@@ -1,7 +1,9 @@
 import type { ToggleGroupItemBaseProps } from '@ark-ui/svelte/toggle-group';
 import type { ClassValue } from 'svelte/elements';
+import { type ToggleSize } from '../toggle/toggle.variants';
 interface Props extends ToggleGroupItemBaseProps {
     class?: ClassValue | null;
+    size?: ToggleSize;
 }
 declare const ToggleGroupItem: import("svelte").Component<Props, {}, "">;
 type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;

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

@@ -2,19 +2,34 @@
 	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
 	import type { ToggleGroupRootBaseProps } from '@ark-ui/svelte/toggle-group';
 	import { cn } from 'tailwind-variants';
+	import type { ToggleSize } from '../toggle/toggle.variants';
+	import { setToggleGroupContext } from './toggle-group-context';
 
 	interface Props extends ToggleGroupRootBaseProps {
 		class?: string;
+		size?: ToggleSize;
 	}
 
-	let { class: className, children, value = $bindable(), ...rootProps }: Props = $props();
+	let {
+		class: className,
+		children,
+		value = $bindable(),
+		size = 'md',
+		...rootProps
+	}: Props = $props();
+
+	setToggleGroupContext({
+		get size() {
+			return size;
+		}
+	});
 </script>
 
 <ToggleGroup.Root
 	{...rootProps}
 	bind:value
 	class={cn(
-		'inline-flex gap-px rounded-lg border border-border p-0.5 data-[orientation=vertical]:flex-col',
+		'inline-flex w-fit rounded border border-border data-[orientation=vertical]:flex-col [&>:not([hidden])~:not([hidden])]:border-border data-[orientation=horizontal]:[&>:not([hidden])~:not([hidden])]:border-s data-[orientation=horizontal]:[&>:not([hidden])~:not([hidden])]:border-e-0 data-[orientation=vertical]:[&>:not([hidden])~:not([hidden])]:border-t data-[orientation=vertical]:[&>:not([hidden])~:not([hidden])]:border-b-0',
 		className
 	)}
 >

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

@@ -1,7 +1,9 @@
 import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
 import type { ToggleGroupRootBaseProps } from '@ark-ui/svelte/toggle-group';
+import type { ToggleSize } from '../toggle/toggle.variants';
 interface Props extends ToggleGroupRootBaseProps {
     class?: string;
+    size?: ToggleSize;
 }
 declare const ToggleGroup: import("svelte").Component<Props, {}, "value">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;