pxengine 0.1.11 → 0.1.13

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "pxengine",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "description": "Shadcn-based UI component library for agent-driven interfaces",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
-    "dist",
-    "config",
-    "src"
+    "dist"
   ],
   "scripts": {
     "build": "tsup && npm run generate-metadata",

package/config/tailwind-preset.js

@@ -1,106 +0,0 @@
-/**
- * @pxengine/ui Tailwind Preset
- * 
- * This file allows consumers of the @pxengine/ui library to easily inherit 
- * the custom theme, colors, and animations required for the components.
- * 
- * Usage in tailwind.config.js:
- * presets: [require("@pxengine/ui/config/tailwind-preset")]
- */
-
-module.exports = {
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      fontFamily: {
-        sans: ["Inter", "system-ui", "sans-serif"],
-        noto: ["Noto Sans", "system-ui", "sans-serif"],
-        grotesk: ["Space Grotesk", "system-ui", "sans-serif"],
-        roboto: ["Roboto", "system-ui", "sans-serif"],
-      },
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        // Custom PXEngine colors
-        gray25: "var(--gray25)",
-        gray50: "var(--gray50)",
-        gray100: "var(--gray100)",
-        gray200: "var(--gray200)",
-        gray300: "var(--gray300)",
-        gray400: "var(--gray400)",
-        gray500: "var(--gray500)",
-        gray600: "var(--gray600)",
-        gray700: "var(--gray700)",
-        gray800: "var(--gray800)",
-        gray900: "var(--gray900)",
-        purple100: "var(--purple100)",
-        purple200: "var(--purple200)",
-        purple500: "var(--purple500)",
-        purpleText: "var(--purple-text)",
-        purple50: "var(--purple50)",
-        purple20: "var(--purple20)",
-        purpleBorder: "var(--purple-border)",
-        purpleLight: "var(--purpleLight)",
-        purpleText1: "var(--purple-text-1)",
-        purpleText2: "var(--purple-text-2)",
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-};

package/src/atoms/AccordionAtom.tsx

@@ -1,44 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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-primary/10 text-primary border-primary/20 hover:bg-primary/20",
-    green:
-      "bg-emerald-500/10 text-emerald-500 border-emerald-500/20 hover:bg-emerald-500/20",
-  };
-
-  const isCustom = ["purple", "green"].includes(variant || "");
-  const shadcnVariant = isCustom ? "outline" : (variant as any);
-  const customClass = isCustom ? customVariants[variant!] : "";
-
-  return (
-    <Badge
-      variant={shadcnVariant}
-      className={cn(
-        "rounded-full px-3 py-0.5 font-bold transition-all",
-        customClass,
-        className,
-      )}
-    >
-      {label}
-    </Badge>
-  );
-};

package/src/atoms/BreadcrumbAtom.tsx

@@ -1,36 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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-primary text-primary-foreground hover:bg-primary/90 shadow-[0_4px_14px_0_hsl(var(--primary)/30%)] transition-all active:scale-95 font-bold",
-    gradient:
-      "bg-gradient-to-r from-primary via-purple-500 to-indigo-600 text-primary-foreground hover:opacity-95 shadow-[0_4px_14px_0_hsl(var(--primary)/40%)] active:scale-95 font-bold",
-  };
-
-  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

@@ -1,24 +0,0 @@
-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-4 bg-background/80 backdrop-blur-xl rounded-[28px] border border-border/50 shadow-[0_20px_50px_rgba(0,0,0,0.1)] inline-block transition-all hover:shadow-[0_20px_60px_rgba(0,0,0,0.15)] ring-1 ring-border/5",
-        className,
-      )}
-    >
-      <Calendar mode={mode as any} selected={date} className="rounded-xl" />
-    </div>
-  );
-};

package/src/atoms/CardAtom.tsx

@@ -1,64 +0,0 @@
-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, index?: number) => 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-[32px] border border-border/50 bg-card/80 text-card-foreground shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden backdrop-blur-xl ring-1 ring-border/5",
-        className,
-      )}
-    >
-      {(title || description) && (
-        <CardHeader>
-          {title && (
-            <CardTitle className="text-xl font-bold text-gray900">
-              {title}
-            </CardTitle>
-          )}
-          {description && <CardDescription>{description}</CardDescription>}
-        </CardHeader>
-      )}
-      <CardContent className="space-y-4">
-        {children.map((child, index) => (
-          <React.Fragment key={child.id || `card-content-${index}`}>
-            {renderComponent(child, index)}
-          </React.Fragment>
-        ))}
-      </CardContent>
-      {footer && footer.length > 0 && (
-        <CardFooter className="bg-gray50/50 border-t border-gray200 flex flex-wrap gap-2 pt-6">
-          {footer.map((footerChild, index) => (
-            <React.Fragment key={footerChild.id || `card-footer-${index}`}>
-              {renderComponent(footerChild, index)}
-            </React.Fragment>
-          ))}
-        </CardFooter>
-      )}
-    </Card>
-  );
-};

package/src/atoms/CarouselAtom.tsx

@@ -1,40 +0,0 @@
-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>
-  );
-};