compote-ui 0.46.4 → 0.46.5

package/dist/components/toggle/toggle.svelte

@@ -8,10 +8,11 @@
 		children,
 		pressed = $bindable(),
 		size,
+		icon,
 		...rootProps
 	}: ToggleProps = $props();
 </script>
 
-<ArkToggle.Root {...rootProps} bind:pressed class={toggle({ size, class: className as never })}>
+<ArkToggle.Root {...rootProps} bind:pressed class={toggle({ size, icon, class: className as never })}>
 	{@render children?.()}
 </ArkToggle.Root>

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

@@ -5,17 +5,26 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
+    icon: {
+        true: 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;
     };
+    icon: {
+        true: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
         md: string;
         lg: string;
     };
+    icon: {
+        true: 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

@@ -5,8 +5,16 @@ export const toggle = tv({
         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'
+            lg: 'h-9 min-w-9 gap-2 px-2.5 text-sm [&_svg]:size-5'
+        },
+        icon: {
+            true: ''
         }
     },
+    compoundVariants: [
+        { size: 'sm', icon: true, class: 'w-7 px-0 [&_svg]:size-5' },
+        { size: 'md', icon: true, class: 'w-8 px-0 [&_svg]:size-6' },
+        { size: 'lg', icon: true, class: 'w-9 px-0 [&_svg]:size-7' }
+    ],
     defaultVariants: { size: 'md' }
 });

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

@@ -4,5 +4,6 @@ import type { ToggleSize } from './toggle.variants';
 export interface ToggleProps extends ToggleRootProps {
     class?: ClassValue | null;
     size?: ToggleSize;
+    icon?: boolean;
 }
 export type { ToggleSize };

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

@@ -1,8 +1,15 @@
 import type { ToggleSize } from '../toggle/toggle.variants';
+export type ToggleGroupVariant = 'outline' | 'ghost';
 export declare const getToggleGroupContext: () => {
     readonly size: ToggleSize;
+    readonly variant: ToggleGroupVariant;
+    readonly icon: boolean;
 }, setToggleGroupContext: (context: {
     readonly size: ToggleSize;
+    readonly variant: ToggleGroupVariant;
+    readonly icon: boolean;
 }) => {
     readonly size: ToggleSize;
+    readonly variant: ToggleGroupVariant;
+    readonly icon: boolean;
 };

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

@@ -8,16 +8,23 @@
 	interface Props extends ToggleGroupItemBaseProps {
 		class?: ClassValue | null;
 		size?: ToggleSize;
+		icon?: boolean;
 	}
 
-	let { class: className, children, size, ...rest }: Props = $props();
+	let { class: className, children, size, icon, ...rest }: Props = $props();
 	const groupContext = getToggleGroupContext();
 	const itemSize = $derived(size ?? groupContext.size);
+	const itemIcon = $derived(icon ?? groupContext.icon);
+	const itemClass = $derived(
+		groupContext.variant === 'ghost'
+			? toggle({ size: itemSize, icon: itemIcon, class: className as never })
+			: toggle({ size: itemSize, icon: itemIcon, class: ['rounded-none', className] as never })
+	);
 </script>
 
 <ToggleGroup.Item
 	{...rest}
-	class={toggle({ size: itemSize, class: ['rounded-none', className] as never })}
+	class={itemClass}
 >
 	{@render children?.()}
 </ToggleGroup.Item>

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

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

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

@@ -3,11 +3,13 @@
 	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';
+	import { setToggleGroupContext, type ToggleGroupVariant } from './toggle-group-context';
 
 	interface Props extends ToggleGroupRootBaseProps {
 		class?: string;
 		size?: ToggleSize;
+		variant?: ToggleGroupVariant;
+		icon?: boolean;
 	}
 
 	let {
@@ -15,23 +17,37 @@
 		children,
 		value = $bindable(),
 		size = 'md',
+		variant = 'outline',
+		icon = false,
 		...rootProps
 	}: Props = $props();
 
 	setToggleGroupContext({
 		get size() {
 			return size;
+		},
+		get variant() {
+			return variant;
+		},
+		get icon() {
+			return icon;
 		}
 	});
+
+	const rootClass = $derived(
+		variant === 'ghost'
+			? cn('inline-flex w-fit gap-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:gap-1', className)
+			: cn(
+					'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
+				)
+	);
 </script>
 
 <ToggleGroup.Root
 	{...rootProps}
 	bind:value
-	class={cn(
-		'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
-	)}
+	class={rootClass}
 >
 	{@render children?.()}
 </ToggleGroup.Root>

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.46.4",
+	"version": "0.46.5",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",