@c15t/dev-tools 0.0.1-rc.3

package/src/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import {
+	type ComponentPropsWithoutRef,
+	type ComponentRef,
+	forwardRef,
+} from 'react';
+import { cn } from '../../libs/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = forwardRef<
+	ComponentRef<typeof AccordionPrimitive.Item>,
+	ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<AccordionPrimitive.Item
+		ref={ref}
+		className={cn('border-b', className)}
+		{...props}
+	/>
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = forwardRef<
+	ComponentRef<typeof AccordionPrimitive.Trigger>,
+	ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+	<AccordionPrimitive.Header className="flex">
+		<AccordionPrimitive.Trigger
+			ref={ref}
+			className={cn(
+				'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+		</AccordionPrimitive.Trigger>
+	</AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = forwardRef<
+	ComponentRef<typeof AccordionPrimitive.Content>,
+	ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<AccordionPrimitive.Content
+		ref={ref}
+		className={cn(
+			'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+			className
+		)}
+		{...props}
+	>
+		<div className="pt-0 pb-4">{children}</div>
+	</AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import { type VariantProps, cva } from 'class-variance-authority';
+
+import { type HTMLAttributes, forwardRef } from 'react';
+import { cn } from '../../libs/utils';
+
+const alertVariants = cva(
+	'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+	{
+		variants: {
+			variant: {
+				default: 'bg-background text-foreground',
+				destructive:
+					'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+);
+
+const Alert = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = forwardRef<
+	HTMLParagraphElement,
+	HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+	<h5
+		ref={ref}
+		className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+		{...props}
+	/>
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = forwardRef<
+	HTMLParagraphElement,
+	HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn('text-sm [&_p]:leading-relaxed', className)}
+		{...props}
+	/>
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps, cva } from 'class-variance-authority';
+
+import { type ButtonHTMLAttributes, forwardRef } from 'react';
+import { cn } from '../../libs/utils';
+
+const buttonVariants = cva(
+	'inline-flex items-center justify-center rounded-md font-medium text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+				destructive:
+					'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+				outline:
+					'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-10 px-4 py-2',
+				sm: 'h-9 rounded-md px-3',
+				lg: 'h-11 rounded-md px-8',
+				icon: 'h-10 w-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	}
+);
+
+export interface ButtonProps
+	extends ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : 'button';
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, size, className }))}
+				ref={ref}
+				{...props}
+			/>
+		);
+	}
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -0,0 +1,81 @@
+import { type HTMLAttributes, forwardRef } from 'react';
+import { cn } from '../../libs/utils';
+
+const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn(
+				'rounded-lg border bg-card text-card-foreground shadow-sm',
+				className
+			)}
+			{...props}
+		/>
+	)
+);
+Card.displayName = 'Card';
+
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn('flex flex-col space-y-1.5 p-6', className)}
+			{...props}
+		/>
+	)
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = forwardRef<
+	HTMLParagraphElement,
+	HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+	<h3
+		ref={ref}
+		className={cn(
+			'font-semibold text-2xl leading-none tracking-tight',
+			className
+		)}
+		{...props}
+	/>
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = forwardRef<
+	HTMLParagraphElement,
+	HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+	<p
+		ref={ref}
+		className={cn('text-muted-foreground text-sm', className)}
+		{...props}
+	/>
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+	)
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn('flex items-center p-6 pt-0', className)}
+			{...props}
+		/>
+	)
+);
+CardFooter.displayName = 'CardFooter';
+
+export {
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardDescription,
+	CardContent,
+};

package/src/components/ui/expandable-tabs.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import type { LucideIcon } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useOnClickOutside } from 'usehooks-ts';
+import { cn } from '../../libs/utils';
+
+interface Tab {
+	title: string;
+	icon: LucideIcon;
+	type?: never;
+}
+
+interface Separator {
+	type: 'separator';
+	title?: never;
+	icon?: never;
+}
+
+type TabItem = Tab | Separator;
+
+interface ExpandableTabsProps {
+	tabs: TabItem[];
+	className?: string;
+	activeColor?: string;
+	onChange?: (index: number | null) => void;
+}
+
+const buttonVariants = {
+	initial: {
+		gap: 0,
+		paddingLeft: '.5rem',
+		paddingRight: '.5rem',
+	},
+	animate: (isSelected: boolean) => ({
+		gap: isSelected ? '.5rem' : 0,
+		paddingLeft: isSelected ? '1rem' : '.5rem',
+		paddingRight: isSelected ? '1rem' : '.5rem',
+	}),
+};
+
+const spanVariants = {
+	initial: { width: 0, opacity: 0 },
+	animate: { width: 'auto', opacity: 1 },
+	exit: { width: 0, opacity: 0 },
+};
+
+const transition = { delay: 0.1, type: 'spring', bounce: 0, duration: 0.6 };
+
+const Separator = memo(() => (
+	<div className="mx-1 h-[24px] w-[1.2px] bg-border" aria-hidden="true" />
+));
+Separator.displayName = 'Separator';
+
+const TabButton = memo(
+	({
+		tab,
+		index,
+		isSelected,
+		activeColor,
+		onClick,
+	}: {
+		tab: Tab;
+		index: number;
+		isSelected: boolean;
+		activeColor: string;
+		onClick: (index: number) => void;
+	}) => {
+		const Icon = tab.icon;
+
+		return (
+			<motion.button
+				variants={buttonVariants}
+				initial={false}
+				animate="animate"
+				custom={isSelected}
+				onClick={() => onClick(index)}
+				transition={transition}
+				className={cn(
+					'relative flex flex-grow items-center justify-center rounded-xl px-4 py-2 font-medium text-sm transition-colors duration-300',
+					isSelected
+						? cn('bg-muted', activeColor)
+						: 'text-muted-foreground hover:bg-muted hover:text-foreground'
+				)}
+			>
+				<Icon size={20} />
+				<AnimatePresence initial={false}>
+					{isSelected && (
+						<motion.span
+							variants={spanVariants}
+							initial="initial"
+							animate="animate"
+							exit="exit"
+							transition={transition}
+							className="overflow-hidden whitespace-nowrap"
+						>
+							{tab.title}
+						</motion.span>
+					)}
+				</AnimatePresence>
+			</motion.button>
+		);
+	}
+);
+TabButton.displayName = 'TabButton';
+
+export function ExpandableTabs({
+	tabs,
+	className,
+	activeColor = 'text-primary',
+	onChange,
+}: ExpandableTabsProps) {
+	const [selected, setSelected] = useState<number | null>(0);
+	const outsideClickRef = useRef<HTMLDivElement>(null);
+
+	const handleInitialChange = useCallback(() => {
+		onChange?.(0);
+	}, [onChange]);
+
+	useEffect(() => {
+		handleInitialChange();
+	}, [handleInitialChange]);
+
+	const handleOutsideClick = useCallback(() => {
+		setSelected(null);
+		onChange?.(null);
+	}, [onChange]);
+
+	//@ts-expect-error
+	useOnClickOutside(outsideClickRef, handleOutsideClick);
+
+	const handleSelect = useCallback(
+		(index: number) => {
+			setSelected(index);
+			onChange?.(index);
+		},
+		[onChange]
+	);
+
+	const containerClassName = useMemo(
+		() =>
+			cn(
+				'flex flex-wrap items-center gap-2 rounded-2xl border bg-background p-1 shadow-sm',
+				className
+			),
+		[className]
+	);
+
+	return (
+		<div ref={outsideClickRef} className={containerClassName}>
+			{tabs.map((tab, index) =>
+				tab.type === 'separator' ? (
+					<Separator
+						key={`separator-${
+							// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+							index
+						}`}
+					/>
+				) : (
+					<TabButton
+						key={`${tab.title}-${index}`}
+						tab={tab}
+						index={index}
+						isSelected={selected === index}
+						activeColor={activeColor}
+						onClick={handleSelect}
+					/>
+				)
+			)}
+		</div>
+	);
+}

package/src/components/ui/overlay.tsx

@@ -0,0 +1,21 @@
+import { AnimatePresence, motion } from 'motion/react';
+import type { FC } from 'react';
+
+interface OverlayProps {
+	show: boolean;
+}
+
+export const Overlay: FC<OverlayProps> = ({ show }) => {
+	return (
+		<AnimatePresence>
+			{show && (
+				<motion.div
+					className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-overlay p-4 backdrop-blur-[10px] data-[state=closed]:animate-out data-[state=open]:animate-in"
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					exit={{ opacity: 0 }}
+				/>
+			)}
+		</AnimatePresence>
+	);
+};

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

@@ -0,0 +1,52 @@
+'use client';
+
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import {
+	type ComponentPropsWithoutRef,
+	type ElementRef,
+	forwardRef,
+} from 'react';
+import { cn } from '../../libs/utils';
+
+const ScrollArea = forwardRef<
+	ElementRef<typeof ScrollAreaPrimitive.Root>,
+	ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+	<ScrollAreaPrimitive.Root
+		ref={ref}
+		className={cn('relative overflow-hidden', className)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+			{children}
+		</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = forwardRef<
+	ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			'flex touch-none select-none transition-colors',
+			orientation === 'vertical' &&
+				'h-full w-2.5 border-l border-l-transparent p-[1px]',
+			orientation === 'horizontal' &&
+				'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+			className
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/components/ui/switch.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as React from 'react';
+import { cn } from '../../libs/utils';
+
+const Switch = React.forwardRef<
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+	<SwitchPrimitives.Root
+		className={cn(
+			'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+			className
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+			)}
+		/>
+	</SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+import { cn } from '../../libs/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Portal>
+		<TooltipPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				'fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 animate-in overflow-hidden rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs data-[state=closed]:animate-out',
+				className
+			)}
+			{...props}
+		/>
+	</TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/wrapper.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { Shield } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+
+import { type ReactNode, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../libs/utils';
+import { Button } from './ui/button';
+import { Card } from './ui/card';
+
+/**
+ * Dev Tool Wrapper Component
+ *
+ * This component serves as both an icon and a wrapper for the development tool interface.
+ * It provides a button that, when clicked, toggles the visibility of a pop-up containing
+ * the router pages.
+ *
+ * @component
+ * @returns {JSX.Element} The rendered component
+ */
+export function DevToolWrapper({
+	children,
+	isOpen,
+	toggleOpen,
+	position = 'bottom-right',
+}: {
+	children: ReactNode;
+	isOpen: boolean;
+	toggleOpen: () => void;
+	position?: 'bottom-right' | 'top-right' | 'bottom-left' | 'top-left';
+}) {
+	// Track whether component is mounted to handle client-side only features
+	const [isMounted, setIsMounted] = useState(false);
+
+	useEffect(() => {
+		setIsMounted(true);
+		return () => setIsMounted(false);
+	}, []);
+
+	const DevToolContent = (
+		<AnimatePresence>
+			{isOpen && (
+				<motion.div
+					className="fixed inset-0 z-50 flex items-end justify-center sm:items-center"
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					exit={{ opacity: 0 }}
+				>
+					<motion.div
+						className="fixed inset-0 bg-background/10 backdrop-blur-sm"
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						onClick={toggleOpen}
+					/>
+					<motion.div
+						className={cn(
+							'fixed z-[9999]',
+							position === 'bottom-right' && 'right-4 bottom-4',
+							position === 'top-right' && 'top-4 right-4',
+							position === 'bottom-left' && 'bottom-4 left-4',
+							position === 'top-left' && 'top-4 left-4'
+						)}
+						initial={{ opacity: 0, y: 50 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: 50 }}
+						transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+					>
+						<Card className="w-[350px] shadow-lg">{children}</Card>
+					</motion.div>
+				</motion.div>
+			)}
+		</AnimatePresence>
+	);
+
+	return (
+		<>
+			<AnimatePresence>
+				{!isOpen && (
+					<motion.div
+						initial={{ scale: 0.9, opacity: 0 }}
+						animate={{ scale: 1, opacity: 1 }}
+						exit={{ scale: 0.9, opacity: 0 }}
+						className="fixed right-4 bottom-4 z-[9999]"
+					>
+						<Button
+							variant="outline"
+							size="icon"
+							className="h-10 w-10 rounded-full shadow-lg"
+							onClick={toggleOpen}
+						>
+							<Shield className="h-4 w-4" />
+						</Button>
+					</motion.div>
+				)}
+			</AnimatePresence>
+			{isMounted && createPortal(DevToolContent, document.body)}
+		</>
+	);
+}
+
+export default DevToolWrapper;