pxengine 0.1.0

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "pxengine",
+  "version": "0.1.0",
+  "description": "Shadcn-based UI component library for agent-driven interfaces",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "config",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
+    "lint": "eslint src --ext .ts,.tsx",
+    "type-check": "tsc --noEmit"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "shadcn",
+    "tailwind",
+    "atomic-design",
+    "agent-ui"
+  ],
+  "author": "PXEngine Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tailwindcss": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.30",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^8.0.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "tailwindcss-animate": "^1.0.7",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^11.18.2",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.475.0",
+    "next-themes": "^0.4.6",
+    "rc-slider": "^11.1.7",
+    "react-day-picker": "^9.13.0",
+    "react-hook-form": "^7.71.1",
+    "react-resizable-panels": "^4.5.2",
+    "recharts": "^2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^2.6.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
+  }
+}

package/src/atoms/AccordionAtom.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/components/ui/accordion";
+import { AccordionAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends AccordionAtomType {
+  renderComponent: (component: UIComponent) => React.ReactNode;
+}
+
+export const AccordionAtom: React.FC<Props> = ({
+  items,
+  className,
+  renderComponent,
+}) => {
+  return (
+    <Accordion type="single" collapsible className={cn("w-full", className)}>
+      {items.map((item) => (
+        <AccordionItem
+          key={item.value}
+          value={item.value}
+          className="border-gray-100"
+        >
+          <AccordionTrigger className="text-sm font-semibold hover:no-underline hover:text-purple600 py-4">
+            {item.trigger}
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="pt-2 pb-4">
+              {item.content.map((child) => (
+                <React.Fragment key={child.id}>
+                  {renderComponent(child)}
+                </React.Fragment>
+              ))}
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};

package/src/atoms/AlertAtom.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { AlertAtomType } from "../types/schema";
+import { cn } from "@/lib/utils";
+import { AlertCircle, CheckCircle2, Info, AlertTriangle } from "lucide-react";
+
+export const AlertAtom: React.FC<AlertAtomType> = ({
+  title,
+  description,
+  variant = "default",
+  className,
+}) => {
+  const IconMap: any = {
+    default: Info,
+    destructive: AlertCircle,
+    warning: AlertTriangle,
+    info: Info,
+    success: CheckCircle2,
+  };
+
+  const Icon = IconMap[variant] || Info;
+
+  const variantMap: any = {
+    warning:
+      "border-amber-200 bg-amber-50 text-amber-900 [&>svg]:text-amber-600",
+    info: "border-blue-200 bg-blue-50 text-blue-900 [&>svg]:text-blue-600",
+    success:
+      "border-green-200 bg-green-50 text-green-900 [&>svg]:text-green-600",
+  };
+
+  const customClass = variantMap[variant] || "";
+  const shadcnVariant = ["warning", "info", "success"].includes(variant)
+    ? "default"
+    : (variant as any);
+
+  return (
+    <Alert
+      variant={shadcnVariant}
+      className={cn("rounded-2xl", customClass, className)}
+    >
+      <Icon className="h-4 w-4" />
+      <AlertTitle className="font-bold">{title}</AlertTitle>
+      {description && <AlertDescription>{description}</AlertDescription>}
+    </Alert>
+  );
+};

package/src/atoms/AlertDialogAtom.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { AlertDialogAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends AlertDialogAtomType {
+  renderComponent: (component: UIComponent) => React.ReactNode;
+  onAction?: (action: string) => void;
+}
+
+export const AlertDialogAtom: React.FC<Props> = ({
+  title,
+  description,
+  trigger,
+  confirmLabel = "Continue",
+  cancelLabel = "Cancel",
+  action,
+  onAction,
+  className,
+  renderComponent,
+}) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <div className={cn("inline-block cursor-pointer", className)}>
+          {trigger.map((child) => (
+            <React.Fragment key={child.id}>
+              {renderComponent(child)}
+            </React.Fragment>
+          ))}
+        </div>
+      </AlertDialogTrigger>
+      <AlertDialogContent className="rounded-3xl p-6 bg-white shadow-3xl border-gray-100">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="text-lg font-bold text-gray-900">
+            {title}
+          </AlertDialogTitle>
+          <AlertDialogDescription className="text-gray-500 font-medium">
+            {description}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="gap-2 sm:gap-0">
+          <AlertDialogCancel className="rounded-full border-gray-200 hover:bg-gray-50 font-semibold">
+            {cancelLabel}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={() => action && onAction?.(action)}
+            className="rounded-full bg-purple500 hover:bg-purple600 text-white font-semibold transition-all shadow-md hover:shadow-lg"
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

package/src/atoms/AspectRatioAtom.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { AspectRatioAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends AspectRatioAtomType {
+  renderComponent: (component: UIComponent) => React.ReactNode;
+}
+
+export const AspectRatioAtom: React.FC<Props> = ({
+  ratio = 16 / 9,
+  children,
+  className,
+  renderComponent,
+}) => {
+  return (
+    <div className={cn("w-full", className)}>
+      <AspectRatio ratio={ratio}>
+        {children.map((child) => (
+          <React.Fragment key={child.id}>
+            {renderComponent(child)}
+          </React.Fragment>
+        ))}
+      </AspectRatio>
+    </div>
+  );
+};

package/src/atoms/AvatarAtom.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { AvatarAtomType } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+export const AvatarAtom: React.FC<AvatarAtomType> = ({
+  src,
+  fallback,
+  alt,
+  className,
+}) => {
+  return (
+    <Avatar className={cn("h-10 w-10", className)}>
+      {src && <AvatarImage src={src} alt={alt} />}
+      <AvatarFallback className="bg-purple50 text-purple600 font-bold uppercase">
+        {fallback}
+      </AvatarFallback>
+    </Avatar>
+  );
+};

package/src/atoms/BadgeAtom.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Badge } from "@/components/ui/badge";
+import { BadgeAtomType } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+export const BadgeAtom: React.FC<BadgeAtomType> = ({
+  label,
+  variant = "default",
+  className,
+}) => {
+  const customVariants: any = {
+    purple: "bg-purple50 text-purple700 border-purple100 hover:bg-purple100",
+    green: "bg-green-50 text-green-700 border-green-100 hover:bg-green-100",
+  };
+
+  const isCustom = ["purple", "green"].includes(variant || "");
+  const shadcnVariant = isCustom ? "outline" : (variant as any);
+  const customClass = isCustom ? customVariants[variant!] : "";
+
+  return (
+    <Badge variant={shadcnVariant} className={cn(customClass, className)}>
+      {label}
+    </Badge>
+  );
+};

package/src/atoms/BreadcrumbAtom.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { BreadcrumbAtomType } from "../types/schema";
+
+export const BreadcrumbAtom: React.FC<BreadcrumbAtomType> = ({
+  items,
+  className,
+}) => {
+  return (
+    <Breadcrumb className={className}>
+      <BreadcrumbList>
+        {items.map((item, index) => (
+          <React.Fragment key={index}>
+            <BreadcrumbItem>
+              {item.isCurrent ? (
+                <BreadcrumbPage>{item.label}</BreadcrumbPage>
+              ) : (
+                <BreadcrumbLink href={item.href || "#"}>
+                  {item.label}
+                </BreadcrumbLink>
+              )}
+            </BreadcrumbItem>
+            {index < items.length - 1 && <BreadcrumbSeparator />}
+          </React.Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};

package/src/atoms/ButtonAtom.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { ButtonAtomType } from "../types/schema";
+import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react";
+
+interface Props extends ButtonAtomType {
+  onAction?: (action: string) => void;
+}
+
+/**
+ * ButtonAtom
+ * Wraps shadcn Button with schema support and premium variants
+ */
+export const ButtonAtom: React.FC<Props> = ({
+  label,
+  variant = "default",
+  size = "default",
+  action,
+  disabled = false,
+  isLoading = false,
+  onAction,
+  className,
+}) => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (action && onAction) {
+      onAction(action);
+    }
+  };
+
+  const variantMap: any = {
+    purple:
+      "bg-purple500 hover:bg-purple600 text-white shadow-md hover:shadow-lg transition-all",
+    gradient:
+      "bg-gradient-to-r from-purple500 to-indigo-600 hover:from-purple600 hover:to-indigo-700 text-white shadow-lg",
+  };
+
+  const customClass = variantMap[variant] || "";
+  const shadcnVariant = ["purple", "gradient"].includes(variant)
+    ? "default"
+    : (variant as any);
+
+  return (
+    <Button
+      variant={shadcnVariant}
+      size={size as any}
+      disabled={disabled || isLoading}
+      onClick={handleClick}
+      className={cn("rounded-full font-semibold", customClass, className)}
+    >
+      {isLoading ? (
+        <>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          {label}
+        </>
+      ) : (
+        label
+      )}
+    </Button>
+  );
+};

package/src/atoms/CalendarAtom.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Calendar } from "@/components/ui/calendar";
+import { CalendarAtomType } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+export const CalendarAtom: React.FC<CalendarAtomType> = ({
+  mode = "single",
+  selectedDate,
+  className,
+}) => {
+  // Simple conversion for demonstration
+  const date = selectedDate ? new Date(selectedDate as string) : undefined;
+
+  return (
+    <div
+      className={cn(
+        "p-3 bg-white rounded-3xl border border-gray-100 shadow-sm inline-block",
+        className,
+      )}
+    >
+      <Calendar mode={mode as any} selected={date} className="rounded-xl" />
+    </div>
+  );
+};

package/src/atoms/CardAtom.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+import { CardAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends CardAtomType {
+  renderComponent: (component: UIComponent) => React.ReactNode;
+}
+
+/**
+ * CardAtom
+ * Standardized Card wrapper for the Universal Renderer
+ */
+export const CardAtom: React.FC<Props> = ({
+  title,
+  description,
+  children,
+  footer,
+  className,
+  renderComponent,
+}) => {
+  return (
+    <Card
+      className={cn(
+        "rounded-[24px] border border-gray200 shadow-sm overflow-hidden",
+        className,
+      )}
+    >
+      {(title || description) && (
+        <CardHeader>
+          {title && (
+            <CardTitle className="text-xl font-bold text-gray-900">
+              {title}
+            </CardTitle>
+          )}
+          {description && <CardDescription>{description}</CardDescription>}
+        </CardHeader>
+      )}
+      <CardContent className="space-y-4">
+        {children.map((child) => (
+          <React.Fragment key={child.id}>
+            {renderComponent(child)}
+          </React.Fragment>
+        ))}
+      </CardContent>
+      {footer && footer.length > 0 && (
+        <CardFooter className="bg-gray-50/50 border-t border-gray-100 flex flex-wrap gap-2 pt-6">
+          {footer.map((footerChild) => (
+            <React.Fragment key={footerChild.id}>
+              {renderComponent(footerChild)}
+            </React.Fragment>
+          ))}
+        </CardFooter>
+      )}
+    </Card>
+  );
+};

package/src/atoms/CarouselAtom.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { CarouselAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends CarouselAtomType {
+  renderComponent: (component: UIComponent) => React.ReactNode;
+}
+
+export const CarouselAtom: React.FC<Props> = ({
+  items,
+  className,
+  renderComponent,
+}) => {
+  return (
+    <Carousel className={cn("w-full max-w-xs mx-auto", className)}>
+      <CarouselContent>
+        {items.map((slide, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              {slide.map((child) => (
+                <React.Fragment key={child.id}>
+                  {renderComponent(child)}
+                </React.Fragment>
+              ))}
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  );
+};

package/src/atoms/CollapsibleAtom.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { CollapsibleAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends CollapsibleAtomType {
+  renderComponent: (component: UIComponent) => React.ReactNode;
+}
+
+export const CollapsibleAtom: React.FC<Props> = ({
+  trigger,
+  content,
+  defaultOpen = false,
+  className,
+  renderComponent,
+}) => {
+  return (
+    <Collapsible
+      defaultOpen={defaultOpen}
+      className={cn("w-full space-y-2", className)}
+    >
+      <CollapsibleTrigger asChild>
+        <div className="flex items-center justify-between space-x-4 px-4 py-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
+          {trigger.map((child) => (
+            <React.Fragment key={child.id}>
+              {renderComponent(child)}
+            </React.Fragment>
+          ))}
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="space-y-2">
+        {content.map((child) => (
+          <React.Fragment key={child.id}>
+            {renderComponent(child)}
+          </React.Fragment>
+        ))}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

package/src/atoms/CommandAtom.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import { CommandAtomType } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+export const CommandAtom: React.FC<CommandAtomType> = ({
+  placeholder = "Search...",
+  groups,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-gray-100 shadow-lg overflow-hidden bg-white max-w-[400px]",
+        className,
+      )}
+    >
+      <Command>
+        <CommandInput placeholder={placeholder} />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          {groups.map((group, i) => (
+            <React.Fragment key={i}>
+              <CommandGroup heading={group.heading}>
+                {group.items.map((item, j) => (
+                  <CommandItem key={j} value={item.value}>
+                    <span>{item.label}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              {i < groups.length - 1 && <CommandSeparator />}
+            </React.Fragment>
+          ))}
+        </CommandList>
+      </Command>
+    </div>
+  );
+};