@ancatag/at-design 0.3.0

package/src/components/error-page.tsx

@@ -0,0 +1,368 @@
+import { ArrowLeft, Home, Search } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn";
+import { Button } from "./button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "./card";
+
+export interface ErrorPageProps {
+	/**
+	 * Error code (e.g., "404", "500", "403")
+	 */
+	code?: string;
+	/**
+	 * Main error title
+	 */
+	title?: string;
+	/**
+	 * Error description/message
+	 */
+	description?: string;
+	/**
+	 * Show home button
+	 */
+	showHomeButton?: boolean;
+	/**
+	 * Show back button
+	 */
+	showBackButton?: boolean;
+	/**
+	 * Show search button
+	 */
+	showSearchButton?: boolean;
+	/**
+	 * Custom home button label
+	 */
+	homeButtonLabel?: string;
+	/**
+	 * Custom back button label
+	 */
+	backButtonLabel?: string;
+	/**
+	 * Custom search button label
+	 */
+	searchButtonLabel?: string;
+	/**
+	 * Home button action
+	 */
+	onHomeClick?: () => void;
+	/**
+	 * Back button action
+	 */
+	onBackClick?: () => void;
+	/**
+	 * Search button action
+	 */
+	onSearchClick?: () => void;
+	/**
+	 * Custom icon component
+	 */
+	icon?: React.ComponentType<{ className?: string }>;
+	/**
+	 * Additional CSS classes
+	 */
+	className?: string;
+	/**
+	 * Show as card or full page
+	 */
+	variant?: "card" | "full";
+}
+
+/**
+ * ErrorPage - A beautiful, customizable error page component
+ *
+ * @example
+ * ```tsx
+ * <ErrorPage
+ *   code="404"
+ *   title="Page Not Found"
+ *   description="The page you're looking for doesn't exist or has been moved."
+ *   showHomeButton
+ *   showBackButton
+ * />
+ * ```
+ */
+export const ErrorPage = React.forwardRef<HTMLDivElement, ErrorPageProps>(
+	(
+		{
+			code = "404",
+			title = "Page Not Found",
+			description = "The page you're looking for doesn't exist or has been moved.",
+			showHomeButton = true,
+			showBackButton = true,
+			showSearchButton = false,
+			homeButtonLabel = "Go Home",
+			backButtonLabel = "Go Back",
+			searchButtonLabel = "Search",
+			onHomeClick,
+			onBackClick,
+			onSearchClick,
+			icon: Icon,
+			className,
+			variant = "full",
+		},
+		ref,
+	) => {
+		const handleBack = () => {
+			if (onBackClick) {
+				onBackClick();
+			} else {
+				window.history.back();
+			}
+		};
+
+		const handleHome = () => {
+			if (onHomeClick) {
+				onHomeClick();
+			} else {
+				window.location.href = "/";
+			}
+		};
+
+		const handleSearch = () => {
+			if (onSearchClick) {
+				onSearchClick();
+			}
+		};
+
+		const content = (
+			<div
+				ref={ref}
+				className={cn(
+					"flex flex-col items-center justify-center text-center",
+					variant === "card"
+						? "p-6"
+						: "min-h-screen px-4 py-16 sm:py-20 lg:py-24 sm:px-6 lg:px-8",
+					className,
+				)}
+			>
+				{/* Error Code - Much Larger with Gradient */}
+				<div className="mb-8 sm:mb-12 relative">
+					<div
+						className={cn(
+							"font-bold select-none",
+							"text-[120px] sm:text-[180px] lg:text-[240px] xl:text-[280px]",
+							"leading-none tracking-tight",
+							"bg-gradient-to-br from-primary via-primary/80 to-primary/40",
+							"bg-clip-text text-transparent",
+							"drop-shadow-2xl",
+						)}
+						style={{
+							animation: "fade-in 0.8s ease-out forwards",
+						}}
+					>
+						{code}
+					</div>
+					{/* Decorative glow effect */}
+					<div
+						className="absolute inset-0 -z-10 blur-3xl opacity-20"
+						style={{
+							background:
+								"radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)",
+						}}
+					/>
+				</div>
+
+				{/* Icon */}
+				{Icon && (
+					<div
+						className="mb-8 sm:mb-10"
+						style={{
+							animation: "fade-in 0.8s ease-out 0.2s forwards",
+							opacity: 0,
+						}}
+					>
+						<Icon className="h-20 w-20 sm:h-24 sm:w-24 lg:h-28 lg:w-28 text-muted-foreground/60" />
+					</div>
+				)}
+
+				{/* Title - Larger */}
+				<h1
+					className={cn(
+						"font-bold text-foreground mb-6 sm:mb-8",
+						"text-4xl sm:text-5xl lg:text-6xl xl:text-7xl",
+						"leading-tight tracking-tight",
+					)}
+					style={{
+						animation: "fade-in 0.8s ease-out 0.3s forwards",
+						opacity: 0,
+					}}
+				>
+					{title}
+				</h1>
+
+				{/* Description - Larger with better spacing */}
+				<p
+					className={cn(
+						"text-muted-foreground max-w-lg sm:max-w-xl lg:max-w-2xl mb-10 sm:mb-12",
+						"text-lg sm:text-xl lg:text-2xl",
+						"leading-relaxed",
+					)}
+					style={{
+						animation: "fade-in 0.8s ease-out 0.4s forwards",
+						opacity: 0,
+					}}
+				>
+					{description}
+				</p>
+
+				{/* Action Buttons - Larger with better spacing */}
+				<div
+					className={cn("flex flex-col sm:flex-row gap-4 sm:gap-5")}
+					style={{
+						animation: "fade-in 0.8s ease-out 0.5s forwards",
+						opacity: 0,
+					}}
+				>
+					{showBackButton && (
+						<Button
+							variant="outline"
+							size="lg"
+							onClick={handleBack}
+							className="min-w-[160px] sm:min-w-[180px] h-12 sm:h-14 text-base sm:text-lg"
+						>
+							<ArrowLeft className="mr-2 h-5 w-5" />
+							{backButtonLabel}
+						</Button>
+					)}
+					{showHomeButton && (
+						<Button
+							variant="default"
+							size="lg"
+							onClick={handleHome}
+							className="min-w-[160px] sm:min-w-[180px] h-12 sm:h-14 text-base sm:text-lg"
+						>
+							<Home className="mr-2 h-5 w-5" />
+							{homeButtonLabel}
+						</Button>
+					)}
+					{showSearchButton && (
+						<Button
+							variant="secondary"
+							size="lg"
+							onClick={handleSearch}
+							className="min-w-[160px] sm:min-w-[180px] h-12 sm:h-14 text-base sm:text-lg"
+						>
+							<Search className="mr-2 h-5 w-5" />
+							{searchButtonLabel}
+						</Button>
+					)}
+				</div>
+			</div>
+		);
+
+		if (variant === "card") {
+			return (
+				<Card className="max-w-2xl mx-auto">
+					<CardHeader>
+						<CardTitle className="text-center">{title}</CardTitle>
+						<CardDescription className="text-center">
+							{description}
+						</CardDescription>
+					</CardHeader>
+					<CardContent>{content}</CardContent>
+				</Card>
+			);
+		}
+
+		return content;
+	},
+);
+
+ErrorPage.displayName = "ErrorPage";
+
+/**
+ * Pre-configured 404 error page
+ */
+export const NotFoundPage = React.forwardRef<
+	HTMLDivElement,
+	Omit<ErrorPageProps, "code" | "title"> & { description?: string }
+>((props, ref) => {
+	return (
+		<ErrorPage
+			ref={ref}
+			code="404"
+			title="Page Not Found"
+			description={
+				props.description ||
+				"The page you're looking for doesn't exist or has been moved."
+			}
+			{...props}
+		/>
+	);
+});
+
+NotFoundPage.displayName = "NotFoundPage";
+
+/**
+ * Pre-configured 500 error page
+ */
+export const ServerErrorPage = React.forwardRef<
+	HTMLDivElement,
+	Omit<ErrorPageProps, "code" | "title"> & { description?: string }
+>((props, ref) => {
+	return (
+		<ErrorPage
+			ref={ref}
+			code="500"
+			title="Server Error"
+			description={
+				props.description ||
+				"Something went wrong on our end. We're working to fix it."
+			}
+			{...props}
+		/>
+	);
+});
+
+ServerErrorPage.displayName = "ServerErrorPage";
+
+/**
+ * Pre-configured 403 error page
+ */
+export const ForbiddenPage = React.forwardRef<
+	HTMLDivElement,
+	Omit<ErrorPageProps, "code" | "title"> & { description?: string }
+>((props, ref) => {
+	return (
+		<ErrorPage
+			ref={ref}
+			code="403"
+			title="Access Forbidden"
+			description={
+				props.description ||
+				"You don't have permission to access this resource."
+			}
+			{...props}
+		/>
+	);
+});
+
+ForbiddenPage.displayName = "ForbiddenPage";
+
+/**
+ * Pre-configured 401 error page
+ */
+export const UnauthorizedPage = React.forwardRef<
+	HTMLDivElement,
+	Omit<ErrorPageProps, "code" | "title"> & { description?: string }
+>((props, ref) => {
+	return (
+		<ErrorPage
+			ref={ref}
+			code="401"
+			title="Unauthorized"
+			description={
+				props.description || "You need to be logged in to access this page."
+			}
+			{...props}
+		/>
+	);
+});
+
+UnauthorizedPage.displayName = "UnauthorizedPage";

package/src/components/glass-card.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+export interface GlassCardProps {
+	children: React.ReactNode;
+	className?: string;
+	gradient?: "blue" | "purple" | "pink" | "none";
+}
+
+const gradientClasses = {
+	blue: "from-blue-500/5 to-cyan-500/5",
+	purple: "from-purple-500/5 to-pink-500/5",
+	pink: "from-pink-500/5 to-rose-500/5",
+	none: "",
+};
+
+/**
+ * Apple-inspired glass morphism card
+ * Frosted glass effect with subtle gradients
+ */
+export function GlassCard({
+	children,
+	className = "",
+	gradient = "none",
+}: GlassCardProps) {
+	return (
+		<div
+			className={`relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 p-8 shadow-2xl backdrop-blur-2xl dark:bg-black/20 ${className}`}
+		>
+			{gradient !== "none" && (
+				<div
+					className={`absolute inset-0 bg-gradient-to-br ${gradientClasses[gradient]}`}
+				/>
+			)}
+			<div className="relative z-10">{children}</div>
+		</div>
+	);
+}

package/src/components/icon-badge.tsx

@@ -0,0 +1,126 @@
+import type { LucideIcon } from "lucide-react";
+
+export interface IconBadgeProps {
+	icon: LucideIcon;
+	value: string | number;
+	label?: string;
+	size?: "sm" | "md" | "lg";
+	variant?: "blue" | "yellow" | "green" | "red" | "purple";
+	onClick?: () => void;
+}
+
+const sizeClasses = {
+	sm: {
+		container: "gap-2 px-3 py-1.5",
+		icon: "h-4 w-4",
+		value: "text-sm",
+		label: "text-xs",
+	},
+	md: {
+		container: "gap-2.5 px-3.5 py-2",
+		icon: "h-4 w-4",
+		value: "text-sm",
+		label: "text-xs",
+	},
+	lg: {
+		container: "gap-3 px-4 py-2.5",
+		icon: "h-5 w-5",
+		value: "text-base",
+		label: "text-sm",
+	},
+};
+
+const variantClasses = {
+	blue: {
+		container:
+			"border-blue-200/50 bg-blue-50/50 dark:border-blue-900/30 dark:bg-blue-950/20",
+		icon: "text-blue-600 dark:text-blue-400",
+		value: "text-blue-700 dark:text-blue-300",
+		label: "text-blue-600/70 dark:text-blue-400/70",
+	},
+	yellow: {
+		container:
+			"border-yellow-200/50 bg-yellow-50/50 dark:border-yellow-900/30 dark:bg-yellow-950/20",
+		icon: "text-yellow-600 dark:text-yellow-400",
+		value: "text-yellow-700 dark:text-yellow-300",
+		label: "text-yellow-600/70 dark:text-yellow-400/70",
+	},
+	green: {
+		container:
+			"border-green-200/50 bg-green-50/50 dark:border-green-900/30 dark:bg-green-950/20",
+		icon: "text-green-600 dark:text-green-400",
+		value: "text-green-700 dark:text-green-300",
+		label: "text-green-600/70 dark:text-green-400/70",
+	},
+	red: {
+		container:
+			"border-red-200/50 bg-red-50/50 dark:border-red-900/30 dark:bg-red-950/20",
+		icon: "text-red-600 dark:text-red-400",
+		value: "text-red-700 dark:text-red-300",
+		label: "text-red-600/70 dark:text-red-400/70",
+	},
+	purple: {
+		container:
+			"border-purple-200/50 bg-purple-50/50 dark:border-purple-900/30 dark:bg-purple-950/20",
+		icon: "text-purple-600 dark:text-purple-400",
+		value: "text-purple-700 dark:text-purple-300",
+		label: "text-purple-600/70 dark:text-purple-400/70",
+	},
+};
+
+/**
+ * Apple-inspired icon badge for displaying token balances and stats
+ * Subtle borders, clean rounded design
+ */
+export function IconBadge({
+	icon: Icon,
+	value,
+	label,
+	size = "md",
+	variant = "blue",
+	onClick,
+}: IconBadgeProps) {
+	const sizeStyle = sizeClasses[size];
+	const variantStyle = variantClasses[variant];
+	const isClickable = !!onClick;
+
+	return (
+		<div
+			className={`
+        flex items-center rounded-xl border transition-all duration-200
+        ${sizeStyle.container} ${variantStyle.container}
+        ${isClickable ? "cursor-pointer hover:shadow-md active:scale-95" : ""}
+      `}
+			onClick={onClick}
+			{...(isClickable && {
+				role: "button",
+				tabIndex: 0,
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						onClick?.();
+					}
+				},
+			})}
+		>
+			<Icon
+				className={`${sizeStyle.icon} ${variantStyle.icon}`}
+				strokeWidth={2}
+			/>
+			<div className="flex flex-col">
+				<div
+					className={`font-semibold tabular-nums ${sizeStyle.value} ${variantStyle.value}`}
+				>
+					{value}
+				</div>
+				{label && (
+					<div
+						className={`font-medium ${sizeStyle.label} ${variantStyle.label}`}
+					>
+						{label}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/components/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+export interface InputProps
+	extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, type, ...props }, ref) => {
+		return (
+			<input
+				type={type}
+				className={cn(
+					"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+					className,
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/components/label.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+const labelVariants = cva(
+	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+		VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+	<LabelPrimitive.Root
+		ref={ref}
+		className={cn(labelVariants(), className)}
+		{...props}
+	/>
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/components/progress.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+const Progress = React.forwardRef<
+	React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+	<ProgressPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+			className,
+		)}
+		{...props}
+	>
+		<ProgressPrimitive.Indicator
+			className="h-full w-full flex-1 bg-primary transition-all"
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+		/>
+	</ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

package/src/components/radio-group.tsx

@@ -0,0 +1,42 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+const RadioGroup = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Root
+			className={cn("grid gap-2", className)}
+			{...props}
+			ref={ref}
+		/>
+	);
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+				<Circle className="h-2.5 w-2.5 fill-current text-current" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	);
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };