@ancatag/at-design 0.3.0

package/src/components/toast.tsx

@@ -0,0 +1,26 @@
+import type React from "react";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	return (
+		<Sonner
+			className="toaster group"
+			toastOptions={{
+				classNames: {
+					toast:
+						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+					description: "group-[.toast]:text-muted-foreground",
+					actionButton:
+						"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+					cancelButton:
+						"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+				},
+			}}
+			{...props}
+		/>
+	);
+};
+
+export { Toaster };

package/src/components/tooltip.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+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}
+			collisionPadding={8}
+			avoidCollisions={true}
+			className={cn(
+				"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-lg animate-in fade-in-0 duration-300 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-200",
+				className,
+			)}
+			{...props}
+		/>
+	</TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/index.ts

@@ -0,0 +1,136 @@
+// Form Components
+
+// Feedback Components
+export { Alert, AlertDescription, AlertTitle } from "./components/alert";
+export {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "./components/alert-dialog";
+export { Avatar, AvatarFallback, AvatarImage } from "./components/avatar";
+export { Badge, type BadgeProps, badgeVariants } from "./components/badge";
+export { BottomSheet } from "./components/bottom-sheet";
+// Action Components
+export { Button, type ButtonProps, buttonVariants } from "./components/button";
+// Display Components
+export {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "./components/card";
+export { Checkbox } from "./components/checkbox";
+export {
+	Combobox,
+	type ComboboxOption,
+	type ComboboxProps,
+} from "./components/combobox";
+// Overlay Components
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+} from "./components/dialog";
+export {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+} from "./components/dropdown-menu";
+// Error Pages
+export {
+	ErrorPage,
+	type ErrorPageProps,
+	ForbiddenPage,
+	NotFoundPage,
+	ServerErrorPage,
+	UnauthorizedPage,
+} from "./components/error-page";
+export { GlassCard, type GlassCardProps } from "./components/glass-card";
+export { IconBadge, type IconBadgeProps } from "./components/icon-badge";
+export { Input, type InputProps } from "./components/input";
+export { Label } from "./components/label";
+export { Progress } from "./components/progress";
+export { RadioGroup, RadioGroupItem } from "./components/radio-group";
+export {
+	ResponsiveTable,
+	type ResponsiveTableColumn,
+	type ResponsiveTableProps,
+} from "./components/responsive-table";
+export {
+	Sheet,
+	SheetClose,
+	SheetContent,
+	SheetDescription,
+	SheetFooter,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger,
+} from "./components/Sheet";
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+} from "./components/select";
+export { Skeleton } from "./components/skeleton";
+export { Slider } from "./components/slider";
+export { StatCard, type StatCardProps } from "./components/stat-card";
+export { Switch } from "./components/switch";
+export {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "./components/table";
+// Navigation & Layout Components
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs";
+export { Textarea, type TextareaProps } from "./components/textarea";
+export { Toaster } from "./components/toast";
+export {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "./components/tooltip";
+
+// Utilities
+export { cn } from "./utils/cn";

package/src/styles/animations.css

@@ -0,0 +1,55 @@
+/* Apple-style animations */
+@keyframes accordion-down {
+	from {
+		height: 0;
+		opacity: 0;
+	}
+	to {
+		height: var(--radix-accordion-content-height);
+		opacity: 1;
+	}
+}
+
+@keyframes accordion-up {
+	from {
+		height: var(--radix-accordion-content-height);
+		opacity: 1;
+	}
+	to {
+		height: 0;
+		opacity: 0;
+	}
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+		transform: translateY(10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes slide-in-right {
+	from {
+		opacity: 0;
+		transform: translateX(20px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+		transform: translateY(20px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

package/src/styles/base.css

@@ -0,0 +1,51 @@
+/* Global styles - Apple-inspired */
+* {
+	border-color: var(--color-border);
+}
+
+body {
+	background-color: var(--color-background);
+	color: var(--color-foreground);
+	font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
+		"SF Pro Text", "Segoe UI", sans-serif;
+	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+	line-height: 1.6;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+/* Apple-style smooth scrolling */
+html {
+	scroll-behavior: smooth;
+}
+
+/* Improved focus states */
+:focus-visible {
+	outline: 2px solid var(--color-ring);
+	outline-offset: 2px;
+}
+
+/* Selection styling */
+::selection {
+	background-color: var(--color-primary);
+	color: var(--color-primary-foreground);
+}
+
+/* Smooth transitions for everything */
+* {
+	transition-property: color, background-color, border-color, opacity, transform;
+	transition-duration: 200ms;
+	transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* Disable transitions for reduced motion */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+	}
+}

package/src/styles/tokens.css

@@ -0,0 +1,37 @@
+@theme {
+	/* Theme-agnostic color tokens - apps can override these */
+	--color-background: #ffffff;
+	--color-foreground: #000000;
+	--color-card: #ffffff;
+	--color-card-foreground: #000000;
+	--color-popover: #ffffff;
+	--color-popover-foreground: #000000;
+	--color-primary: #0071e3;
+	--color-primary-foreground: #ffffff;
+	--color-secondary: #f5f5f7;
+	--color-secondary-foreground: #000000;
+	--color-muted: #f5f5f7;
+	--color-muted-foreground: #6e6e73;
+	--color-accent: #f5f5f7;
+	--color-accent-foreground: #000000;
+	--color-destructive: #ff3b30;
+	--color-destructive-foreground: #ffffff;
+	--color-border: #d2d2d7;
+	--color-input: #d2d2d7;
+	--color-ring: #0071e3;
+
+	/* Border radius - Apple uses larger radii */
+	--radius-lg: 1rem;
+	--radius-md: 0.75rem;
+	--radius-sm: 0.5rem;
+
+	/* Animation - Apple-style smooth */
+	--animate-accordion-down: accordion-down 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+	--animate-accordion-up: accordion-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+
+	/* Apple-inspired shadows */
+	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.06);
+	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08);
+	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+}

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"declaration": true,
+		"declarationMap": true,
+		"sourceMap": true,
+		"outDir": "./dist",
+		"rootDir": "./src",
+		"jsx": "react-jsx"
+	},
+	"include": ["src/**/*"],
+	"exclude": ["dist", "node_modules", "**/*.test.ts", "**/*.spec.ts"]
+}
+
+