compote-ui 0.31.1 → 0.32.0

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/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>;

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

@@ -1,14 +1,12 @@
 <script lang="ts">
 	import { Tooltip } from '@ark-ui/svelte/tooltip';
-	import type { TooltipTriggerBaseProps } from '@ark-ui/svelte/tooltip';
-	import type { Snippet } from 'svelte';
+	import type { TooltipTriggerProps } from '@ark-ui/svelte/tooltip';
 	import { button, type ButtonSize, type ButtonVariant } from '../button/button.variants';
 
-	type Props = TooltipTriggerBaseProps & {
+	type Props = Omit<TooltipTriggerProps, 'class'> & {
 		variant?: ButtonVariant;
 		size?: ButtonSize;
 		class?: string;
-		children?: Snippet;
 	};
 
 	const {

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

@@ -1,11 +1,9 @@
-import type { TooltipTriggerBaseProps } from '@ark-ui/svelte/tooltip';
-import type { Snippet } from 'svelte';
+import type { TooltipTriggerProps } from '@ark-ui/svelte/tooltip';
 import { type ButtonSize, type ButtonVariant } from '../button/button.variants';
-type Props = TooltipTriggerBaseProps & {
+type Props = Omit<TooltipTriggerProps, 'class'> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
     class?: string;
-    children?: Snippet;
 };
 declare const TooltipTrigger: import("svelte").Component<Props, {}, "">;
 type TooltipTrigger = ReturnType<typeof TooltipTrigger>;

package/dist/components/tree-view/tree-view.svelte

@@ -112,7 +112,7 @@
 				{#snippet render(tree)}
 					<Button
 						variant="outline"
-						size="icon"
+						size="icon-lg"
 						title="Collapse all"
 						onclick={() => tree().collapse()}
 					>

package/dist/index.d.ts

@@ -30,6 +30,8 @@ export { default as Splitter } from './components/splitter/splitter.svelte';
 export type { SplitterPanelConfig, SplitterProps } from './components/splitter/types';
 export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
+export { default as Toggle } from './components/toggle/toggle.svelte';
+export type { ToggleProps, ToggleSize } from './components/toggle/types';
 export * as ToggleGroup from './components/toggle-group';
 export * as Menu from './components/menu';
 export * as Tooltip from './components/tooltip';

package/dist/index.js

@@ -23,6 +23,7 @@ export { default as Select } from './components/select/select.svelte';
 export { default as Splitter } from './components/splitter/splitter.svelte';
 export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
+export { default as Toggle } from './components/toggle/toggle.svelte';
 export * as ToggleGroup from './components/toggle-group';
 export * as Menu from './components/menu';
 export * as Tooltip from './components/tooltip';

package/dist/theme.css

@@ -19,7 +19,7 @@
 	--compote-ink: light-dark(var(--gray-15), var(--gray-1));
 	--compote-ink-dim: light-dark(var(--gray-11), var(--gray-5));
 	--compote-ink-inverse: white;
-	--compote-surface-3: light-dark(var(--gray-5), var(--gray-11));
+	--compote-surface-3: light-dark(var(--gray-5), var(--gray-10));
 	--compote-surface-2: light-dark(var(--gray-4), var(--gray-12));
 	--compote-surface-1: light-dark(var(--gray-3), var(--gray-13));
 	--compote-surface-document: light-dark(var(--gray-2), var(--gray-14));

package/package.json

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