@ancatag/at-design 0.3.0

package/src/components/responsive-table.tsx

@@ -0,0 +1,191 @@
+import { ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn";
+import { Button } from "./button";
+
+export interface ResponsiveTableColumn<T> {
+	key: string;
+	header: string;
+	render: (item: T) => React.ReactNode;
+	mobileLabel?: string; // Label for mobile card view
+	hideOnMobile?: boolean;
+}
+
+export interface ResponsiveTableProps<T> {
+	data: T[];
+	columns: ResponsiveTableColumn<T>[];
+	keyExtractor: (item: T) => string;
+	onRowClick?: (item: T) => void;
+	className?: string;
+	emptyMessage?: string;
+}
+
+/**
+ * Responsive table component that shows as table on desktop and cards on mobile
+ */
+export function ResponsiveTable<T>({
+	data,
+	columns,
+	keyExtractor,
+	onRowClick,
+	className,
+	emptyMessage = "No data available",
+}: ResponsiveTableProps<T>) {
+	const [expandedRows, setExpandedRows] = React.useState<Set<string>>(
+		new Set(),
+	);
+
+	const toggleRow = (key: string) => {
+		setExpandedRows((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) {
+				next.delete(key);
+			} else {
+				next.add(key);
+			}
+			return next;
+		});
+	};
+
+	const visibleColumns = columns.filter((col) => !col.hideOnMobile);
+
+	if (data.length === 0) {
+		return (
+			<div className="text-center py-12 text-muted-foreground">
+				{emptyMessage}
+			</div>
+		);
+	}
+
+	return (
+		<div className={cn("w-full", className)}>
+			{/* Desktop Table View */}
+			<div className="hidden md:block rounded-md border overflow-hidden">
+				<table className="w-full">
+					<thead className="bg-muted/50">
+						<tr>
+							{columns.map((column) => (
+								<th
+									key={column.key}
+									className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider"
+								>
+									{column.header}
+								</th>
+							))}
+						</tr>
+					</thead>
+					<tbody className="divide-y divide-border">
+						{data.map((item) => {
+							const key = keyExtractor(item);
+							return (
+								<tr
+									key={key}
+									onClick={() => onRowClick?.(item)}
+									className={cn(
+										"hover:bg-muted/50 transition-colors",
+										onRowClick && "cursor-pointer",
+									)}
+								>
+									{columns.map((column) => (
+										<td key={column.key} className="px-4 py-3 text-sm">
+											{column.render(item)}
+										</td>
+									))}
+								</tr>
+							);
+						})}
+					</tbody>
+				</table>
+			</div>
+
+			{/* Mobile Card View */}
+			<div className="md:hidden space-y-3">
+				{data.map((item) => {
+					const key = keyExtractor(item);
+					const isExpanded = expandedRows.has(key);
+					const primaryColumns = visibleColumns.slice(0, 2);
+					const secondaryColumns = visibleColumns.slice(2);
+
+					return (
+						<div
+							key={key}
+							className={cn(
+								"border rounded-lg overflow-hidden transition-all",
+								onRowClick && "cursor-pointer",
+							)}
+							onClick={() => {
+								if (secondaryColumns.length > 0) {
+									toggleRow(key);
+								} else {
+									onRowClick?.(item);
+								}
+							}}
+						>
+							{/* Primary Info */}
+							<div className="p-4 space-y-2">
+								{primaryColumns.map((column) => (
+									<div
+										key={column.key}
+										className="flex items-start justify-between gap-2"
+									>
+										<span className="text-xs font-medium text-muted-foreground min-w-[80px]">
+											{column.mobileLabel || column.header}:
+										</span>
+										<div className="flex-1 text-right text-sm">
+											{column.render(item)}
+										</div>
+									</div>
+								))}
+							</div>
+
+							{/* Expandable Secondary Info */}
+							{secondaryColumns.length > 0 && (
+								<>
+									<Button
+										variant="ghost"
+										size="sm"
+										className="w-full h-10 rounded-none border-t"
+										onClick={(e) => {
+											e.stopPropagation();
+											toggleRow(key);
+										}}
+									>
+										{isExpanded ? (
+											<>
+												<ChevronUp className="h-4 w-4 mr-2" />
+												Hide Details
+											</>
+										) : (
+											<>
+												<ChevronDown className="h-4 w-4 mr-2" />
+												Show Details
+											</>
+										)}
+									</Button>
+
+									{isExpanded && (
+										<div className="p-4 pt-0 space-y-2 border-t bg-muted/30">
+											{secondaryColumns.map((column) => (
+												<div
+													key={column.key}
+													className="flex items-start justify-between gap-2"
+												>
+													<span className="text-xs font-medium text-muted-foreground min-w-[80px]">
+														{column.mobileLabel || column.header}:
+													</span>
+													<div className="flex-1 text-right text-sm">
+														{column.render(item)}
+													</div>
+												</div>
+											))}
+										</div>
+									)}
+								</>
+							)}
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}

package/src/components/select.tsx

@@ -0,0 +1,158 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<ChevronDown className="h-4 w-4 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollUpButton
+		ref={ref}
+		className={cn(
+			"flex cursor-default items-center justify-center py-1",
+			className,
+		)}
+		{...props}
+	>
+		<ChevronUp className="h-4 w-4" />
+	</SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollDownButton
+		ref={ref}
+		className={cn(
+			"flex cursor-default items-center justify-center py-1",
+			className,
+		)}
+		{...props}
+	>
+		<ChevronDown className="h-4 w-4" />
+	</SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+	SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content
+			ref={ref}
+			className={cn(
+				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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",
+				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}
+			{...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)]",
+				)}
+			>
+				{children}
+			</SelectPrimitive.Viewport>
+			<SelectScrollDownButton />
+		</SelectPrimitive.Content>
+	</SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Label
+		ref={ref}
+		className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+		{...props}
+	/>
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<SelectPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</SelectPrimitive.ItemIndicator>
+		</span>
+
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+	</SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+	Select,
+	SelectGroup,
+	SelectValue,
+	SelectTrigger,
+	SelectContent,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+	SelectScrollUpButton,
+	SelectScrollDownButton,
+};

package/src/components/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "../utils/cn";
+
+function Skeleton({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			className={cn("animate-pulse rounded-md bg-muted", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Skeleton };

package/src/components/slider.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex w-full touch-none select-none items-center",
+			className,
+		)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+			<SliderPrimitive.Range className="absolute h-full bg-primary" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background 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" />
+	</SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

package/src/components/stat-card.tsx

@@ -0,0 +1,69 @@
+import type { LucideIcon } from "lucide-react";
+import React from "react";
+
+export interface StatCardProps {
+	icon: LucideIcon;
+	value: string | number;
+	label: string;
+	iconColor?: string;
+	iconBgColor?: string;
+	onClick?: () => void;
+	action?: React.ReactNode;
+}
+
+/**
+ * Apple-inspired stat card with icon and value
+ * Clean, minimal, centered layout
+ */
+export function StatCard({
+	icon: Icon,
+	value,
+	label,
+	iconColor = "text-blue-600 dark:text-blue-400",
+	iconBgColor = "bg-blue-500/10",
+	onClick,
+	action,
+}: StatCardProps) {
+	const isClickable = !!onClick;
+
+	return (
+		<div
+			className={`
+        flex flex-col items-center gap-4 rounded-2xl border border-border/50 
+        bg-card p-8 text-center shadow-sm transition-all duration-300
+        ${isClickable ? "cursor-pointer hover:shadow-lg hover:scale-[1.02] active:scale-[0.98]" : ""}
+      `}
+			onClick={onClick}
+			{...(isClickable && {
+				role: "button",
+				tabIndex: 0,
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						onClick?.();
+					}
+				},
+			})}
+		>
+			{/* Icon Circle */}
+			<div
+				className={`flex h-14 w-14 items-center justify-center rounded-full ${iconBgColor} transition-transform duration-300 ${isClickable ? "group-hover:scale-110" : ""}`}
+			>
+				<Icon className={`h-7 w-7 ${iconColor}`} strokeWidth={2} />
+			</div>
+
+			{/* Value */}
+			<div>
+				<div className="text-4xl font-bold tabular-nums tracking-tight text-foreground">
+					{value}
+				</div>
+				<div className="mt-2 text-sm font-medium text-muted-foreground">
+					{label}
+				</div>
+			</div>
+
+			{/* Optional Action */}
+			{action && <div className="mt-2 w-full">{action}</div>}
+		</div>
+	);
+}

package/src/components/switch.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+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-6 w-11 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/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+const Table = React.forwardRef<
+	HTMLTableElement,
+	React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+	<div className="relative w-full overflow-auto">
+		<table
+			ref={ref}
+			className={cn("w-full caption-bottom text-sm", className)}
+			{...props}
+		/>
+	</div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<tbody
+		ref={ref}
+		className={cn("[&_tr:last-child]:border-0", className)}
+		{...props}
+	/>
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<tfoot
+		ref={ref}
+		className={cn(
+			"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+	HTMLTableRowElement,
+	React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+	<tr
+		ref={ref}
+		className={cn(
+			"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+	HTMLTableCellElement,
+	React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<th
+		ref={ref}
+		className={cn(
+			"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+	HTMLTableCellElement,
+	React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<td
+		ref={ref}
+		className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+		{...props}
+	/>
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+	HTMLTableCaptionElement,
+	React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+	<caption
+		ref={ref}
+		className={cn("mt-4 text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+	Table,
+	TableHeader,
+	TableBody,
+	TableFooter,
+	TableHead,
+	TableRow,
+	TableCell,
+	TableCaption,
+};

package/src/components/tabs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/components/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+export interface TextareaProps
+	extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<textarea
+				className={cn(
+					"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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}
+			/>
+		);
+	},
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };