@agentuity/workbench 0.0.64 → 0.0.66

package/src/components/ui/progress.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '../../lib/utils';
+
+function Progress({
+	className,
+	value,
+	...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+	return (
+		<ProgressPrimitive.Root
+			data-slot="progress"
+			className={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
+			{...props}
+		>
+			<ProgressPrimitive.Indicator
+				data-slot="progress-indicator"
+				className="bg-primary h-full w-full flex-1 transition-all"
+				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+			/>
+		</ProgressPrimitive.Root>
+	);
+}
+
+export { Progress };

package/src/components/ui/resizable-provider.tsx

@@ -0,0 +1,83 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type PanelSizes = Record<string, number[]>;
+
+type ResizableProviderProps = {
+	children: React.ReactNode;
+	storageKey?: string;
+};
+
+type ResizableProviderState = {
+	panelSizes: PanelSizes;
+	setPanelSizes: (groupId: string, sizes: number[]) => void;
+	getPanelSizes: (groupId: string) => number[] | undefined;
+	resetPanelSizes: (groupId?: string) => void;
+};
+
+const initialState: ResizableProviderState = {
+	panelSizes: {},
+	setPanelSizes: () => null,
+	getPanelSizes: () => undefined,
+	resetPanelSizes: () => null,
+};
+
+const ResizableProviderContext = createContext<ResizableProviderState>(initialState);
+
+export function ResizableProvider({
+	children,
+	storageKey = 'agentuity-workbench-panel-sizes',
+	...props
+}: ResizableProviderProps) {
+	const [panelSizes, setPanelSizesState] = useState<PanelSizes>(() => {
+		try {
+			const stored = localStorage.getItem(storageKey);
+
+			return stored ? JSON.parse(stored) : {};
+		} catch {
+			return {};
+		}
+	});
+
+	useEffect(() => {
+		localStorage.setItem(storageKey, JSON.stringify(panelSizes));
+	}, [panelSizes, storageKey]);
+
+	const value = {
+		panelSizes,
+		setPanelSizes: (groupId: string, sizes: number[]) => {
+			const roundedSizes = sizes.map((size) => Math.round(size));
+
+			setPanelSizesState((prev) => ({
+				...prev,
+				[groupId]: roundedSizes,
+			}));
+		},
+		getPanelSizes: (groupId: string) => panelSizes[groupId],
+		resetPanelSizes: (groupId?: string) => {
+			if (groupId) {
+				setPanelSizesState((prev) => {
+					const { [groupId]: _, ...rest } = prev;
+					return rest;
+				});
+			} else {
+				setPanelSizesState({});
+			}
+		},
+	};
+
+	return (
+		<ResizableProviderContext.Provider {...props} value={value}>
+			{children}
+		</ResizableProviderContext.Provider>
+	);
+}
+
+export const useResizable = () => {
+	const context = useContext(ResizableProviderContext);
+
+	if (context === undefined) {
+		throw new Error('useResizable must be used within a ResizableProvider');
+	}
+
+	return context;
+};

package/src/components/ui/resizable.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { GripVerticalIcon } from 'lucide-react';
+import type * as React from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+import { cn } from '../../lib/utils';
+
+function ResizablePanelGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+	return (
+		<ResizablePrimitive.PanelGroup
+			data-slot="resizable-panel-group"
+			className={cn(
+				'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+	return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+	withHandle,
+	className,
+	...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+	withHandle?: boolean;
+}) {
+	return (
+		<ResizablePrimitive.PanelResizeHandle
+			data-slot="resizable-handle"
+			className={cn(
+				'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+				className
+			)}
+			{...props}
+		>
+			{withHandle && (
+				<div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+					<GripVerticalIcon className="size-2.5" />
+				</div>
+			)}
+		</ResizablePrimitive.PanelResizeHandle>
+	);
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '../../lib/utils';
+
+function ScrollArea({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+	return (
+		<ScrollAreaPrimitive.Root
+			data-slot="scroll-area"
+			className={cn('relative', className)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.Viewport
+				data-slot="scroll-area-viewport"
+				className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+			>
+				{children}
+			</ScrollAreaPrimitive.Viewport>
+			<ScrollBar />
+			<ScrollAreaPrimitive.Corner />
+		</ScrollAreaPrimitive.Root>
+	);
+}
+
+function ScrollBar({
+	className,
+	orientation = 'vertical',
+	...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+	return (
+		<ScrollAreaPrimitive.ScrollAreaScrollbar
+			data-slot="scroll-area-scrollbar"
+			orientation={orientation}
+			className={cn(
+				'flex touch-none p-px transition-colors select-none',
+				orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
+				orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+				className
+			)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.ScrollAreaThumb
+				data-slot="scroll-area-thumb"
+				className="bg-border relative flex-1 rounded-full"
+			/>
+		</ScrollAreaPrimitive.ScrollAreaScrollbar>
+	);
+}
+
+export { ScrollArea, ScrollBar };

package/src/components/ui/select.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import type * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+	return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+	className,
+	size = 'default',
+	children,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+	size?: 'sm' | 'default';
+}) {
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<ChevronDownIcon className="size-4 opacity-50" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	);
+}
+
+function SelectContent({
+	className,
+	children,
+	position = 'popper',
+	align = 'center',
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				data-slot="select-content"
+				className={cn(
+					'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+					position === 'popper' &&
+						'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+					className
+				)}
+				position={position}
+				align={align}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					className={cn(
+						'p-1',
+						position === 'popper' &&
+							'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+	return (
+		<SelectPrimitive.Label
+			data-slot="select-label"
+			className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className
+			)}
+			{...props}
+		>
+			<span className="absolute right-2 flex size-3.5 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	);
+}
+
+function SelectSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectScrollUpButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+	return (
+		<SelectPrimitive.ScrollUpButton
+			data-slot="select-scroll-up-button"
+			className={cn('flex cursor-default items-center justify-center py-1', className)}
+			{...props}
+		>
+			<ChevronUpIcon className="size-4" />
+		</SelectPrimitive.ScrollUpButton>
+	);
+}
+
+function SelectScrollDownButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+	return (
+		<SelectPrimitive.ScrollDownButton
+			data-slot="select-scroll-down-button"
+			className={cn('flex cursor-default items-center justify-center py-1', className)}
+			{...props}
+		>
+			<ChevronDownIcon className="size-4" />
+		</SelectPrimitive.ScrollDownButton>
+	);
+}
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};

package/src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '../../lib/utils';
+
+function Separator({
+	className,
+	orientation = 'horizontal',
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Separator };

package/src/components/ui/switch.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+import { cn } from '../../lib/utils';
+
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			className={cn(
+				'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className={cn(
+					'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	);
+}
+
+export { Switch };

package/src/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../../lib/utils';
+
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			className={cn('flex flex-col gap-2', className)}
+			{...props}
+		/>
+	);
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			className={cn(
+				'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+	return (
+		<TabsPrimitive.Trigger
+			data-slot="tabs-trigger"
+			className={cn(
+				"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+	return (
+		<TabsPrimitive.Content
+			data-slot="tabs-content"
+			className={cn('flex-1 outline-none', className)}
+			{...props}
+		/>
+	);
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Textarea };

package/src/components/ui/theme-provider.tsx

@@ -0,0 +1,71 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+	children: React.ReactNode;
+	defaultTheme?: Theme;
+	storageKey?: string;
+};
+
+type ThemeProviderState = {
+	theme: Theme;
+	setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+	theme: 'system',
+	setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+	children,
+	defaultTheme = 'system',
+	storageKey = 'workbench-ui-theme',
+	...props
+}: ThemeProviderProps) {
+	const [theme, setTheme] = useState<Theme>(
+		() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+	);
+
+	useEffect(() => {
+		const root = window.document.documentElement;
+
+		root.classList.remove('light', 'dark');
+
+		if (theme === 'system') {
+			const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+				? 'dark'
+				: 'light';
+
+			root.classList.add(systemTheme);
+			return;
+		}
+
+		root.classList.add(theme);
+	}, [theme]);
+
+	const value = {
+		theme,
+		setTheme: (theme: Theme) => {
+			localStorage.setItem(storageKey, theme);
+			setTheme(theme);
+		},
+	};
+
+	return (
+		<ThemeProviderContext.Provider {...props} value={value}>
+			{children}
+		</ThemeProviderContext.Provider>
+	);
+}
+
+export const useTheme = () => {
+	const context = useContext(ThemeProviderContext);
+
+	if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+
+	return context;
+};

package/src/components/ui/theme-toggle.tsx

@@ -0,0 +1,30 @@
+import { Moon, Sun } from 'lucide-react';
+import { Button } from './button';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from './dropdown-menu';
+import { useTheme } from './theme-provider';
+
+export function ThemeToggle() {
+	const { setTheme } = useTheme();
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="ghost" size="icon">
+					<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+					<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+					<span className="sr-only">Toggle theme</span>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}

package/src/components/ui/toggle.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const toggleVariants = cva(
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline:
+					'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+			},
+			size: {
+				default: 'h-9 px-2 min-w-9',
+				sm: 'h-8 px-1.5 min-w-8',
+				lg: 'h-10 px-2.5 min-w-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	}
+);
+
+function Toggle({
+	className,
+	variant,
+	size,
+	...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
+	return (
+		<TogglePrimitive.Root
+			data-slot="toggle"
+			className={cn(toggleVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Toggle, toggleVariants };