pxengine 0.1.11 → 0.1.13

package/src/atoms/RatingAtom.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-import { Star } from "lucide-react";
-import { RatingAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-
-/**
- * RatingAtom
- * A star rating component for display or user input.
- */
-export const RatingAtom: React.FC<
-  RatingAtomType & { onChange?: (val: number) => void }
-> = ({ value, max = 5, readonly = false, className, onChange }) => {
-  const [hoverValue, setHoverValue] = React.useState<number | null>(null);
-
-  return (
-    <div className={cn("flex items-center gap-1", className)}>
-      {Array.from({ length: max }, (_, i) => {
-        const starValue = i + 1;
-        const isActive = (hoverValue ?? value) >= starValue;
-
-        return (
-          <Star
-            key={i}
-            className={cn(
-              "h-5 w-5 transition-colors",
-              isActive ? "fill-yellow-400 text-yellow-400" : "text-gray-300",
-              !readonly && "cursor-pointer hover:scale-110",
-            )}
-            onClick={() => !readonly && onChange?.(starValue)}
-            onMouseEnter={() => !readonly && setHoverValue(starValue)}
-            onMouseLeave={() => !readonly && setHoverValue(null)}
-          />
-        );
-      })}
-    </div>
-  );
-};

package/src/atoms/ResizableAtom.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
-import { ResizableAtomType, UIComponent } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-interface Props extends ResizableAtomType {
-  renderComponent: (component: UIComponent, index?: number) => React.ReactNode;
-}
-
-/**
- * ResizableAtom
- * Wraps shadcn Resizable panels for complex layouts
- */
-export const ResizableAtom: React.FC<Props> = ({
-  direction,
-  panels,
-  className,
-  renderComponent,
-}) => {
-  // Use a locally typed component to bypass DTS inference issues
-  const Group = ResizablePanelGroup as any;
-
-  return (
-    <Group
-      direction={direction}
-      className={cn(
-        "min-h-[200px] w-full rounded-lg border border-purple-100",
-        className,
-      )}
-    >
-      {panels.map((panel: any, i: number) => (
-        <React.Fragment key={i}>
-          <ResizablePanel defaultSize={panel.defaultSize} className="p-4">
-            {panel.children.map((child: any, childIdx: number) => (
-              <React.Fragment
-                key={child.id || `resizable-child-${i}-${childIdx}`}
-              >
-                {renderComponent(child)}
-              </React.Fragment>
-            ))}
-          </ResizablePanel>
-          {i < panels.length - 1 && <ResizableHandle withHandle />}
-        </React.Fragment>
-      ))}
-    </Group>
-  );
-};

package/src/atoms/ScrollAreaAtom.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { ScrollAreaAtomType, UIComponent } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-interface Props extends ScrollAreaAtomType {
-  renderComponent: (component: UIComponent) => React.ReactNode;
-}
-
-export const ScrollAreaAtom: React.FC<Props> = ({
-  maxHeight = "300px",
-  children,
-  className,
-  renderComponent,
-}) => {
-  return (
-    <ScrollArea
-      className={cn("rounded-xl border", className)}
-      style={{ height: maxHeight }}
-    >
-      <div className="p-4">
-        {children.map((child) => (
-          <React.Fragment key={child.id}>
-            {renderComponent(child)}
-          </React.Fragment>
-        ))}
-      </div>
-      <ScrollBar orientation="vertical" />
-    </ScrollArea>
-  );
-};

package/src/atoms/SeparatorAtom.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { Separator } from "@/components/ui/separator";
-import { SeparatorAtomType } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-export const SeparatorAtom: React.FC<SeparatorAtomType> = ({
-  orientation = "horizontal",
-  className,
-}) => {
-  return (
-    <Separator
-      orientation={orientation}
-      className={cn("bg-gray-100", className)}
-    />
-  );
-};

package/src/atoms/SheetAtom.tsx

@@ -1,72 +0,0 @@
-import React from "react";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-  SheetFooter,
-} from "@/components/ui/sheet";
-import { SheetAtomType, UIComponent } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-interface Props extends SheetAtomType {
-  renderComponent: (component: UIComponent) => React.ReactNode;
-}
-
-export const SheetAtom: React.FC<Props> = ({
-  side = "right",
-  title,
-  description,
-  trigger,
-  children,
-  footer,
-  className,
-  renderComponent,
-}) => {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <div className={cn("inline-block cursor-pointer", className)}>
-          {trigger.map((child) => (
-            <React.Fragment key={child.id}>
-              {renderComponent(child)}
-            </React.Fragment>
-          ))}
-        </div>
-      </SheetTrigger>
-      <SheetContent
-        side={side}
-        className="bg-white/95 backdrop-blur-md border-l-gray-100 shadow-2xl p-6"
-      >
-        <SheetHeader>
-          <SheetTitle className="text-xl font-bold text-gray-900">
-            {title}
-          </SheetTitle>
-          {description && (
-            <SheetDescription className="text-gray-500 font-medium">
-              {description}
-            </SheetDescription>
-          )}
-        </SheetHeader>
-        <div className="py-8">
-          {children.map((child) => (
-            <React.Fragment key={child.id}>
-              {renderComponent(child)}
-            </React.Fragment>
-          ))}
-        </div>
-        {footer && (
-          <SheetFooter className="absolute bottom-6 left-6 right-6">
-            {footer.map((child) => (
-              <React.Fragment key={child.id}>
-                {renderComponent(child)}
-              </React.Fragment>
-            ))}
-          </SheetFooter>
-        )}
-      </SheetContent>
-    </Sheet>
-  );
-};

package/src/atoms/SkeletonAtom.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import { Skeleton } from "@/components/ui/skeleton";
-import { SkeletonAtomType } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-export const SkeletonAtom: React.FC<SkeletonAtomType> = ({
-  shape = "rect",
-  width,
-  height,
-  className,
-}) => {
-  return (
-    <Skeleton
-      className={cn(
-        shape === "circle" ? "rounded-full" : "rounded-md",
-        "bg-gray-100",
-        className,
-      )}
-      style={{ width, height }}
-    />
-  );
-};

package/src/atoms/SliderAtom.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { Slider } from "@/components/ui/slider";
-import { SliderAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-
-/**
- * SliderAtom
- * Wraps shadcn Slider
- */
-export const SliderAtom: React.FC<
-  SliderAtomType & { onValueChange?: (value: number[]) => void }
-> = ({
-  defaultValue = [50],
-  max = 100,
-  min = 0,
-  step = 1,
-  disabled,
-  className,
-  onValueChange,
-}) => {
-  return (
-    <Slider
-      defaultValue={defaultValue}
-      max={max}
-      min={min}
-      step={step}
-      disabled={disabled}
-      onValueChange={onValueChange}
-      className={cn("w-full py-4", className)}
-    />
-  );
-};

package/src/atoms/SpinnerAtom.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { Loader2 } from "lucide-react";
-import { SpinnerAtomType } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-export const SpinnerAtom: React.FC<SpinnerAtomType> = ({
-  size = "md",
-  className,
-}) => {
-  const sizeMap = {
-    sm: "h-4 w-4",
-    md: "h-6 w-6",
-    lg: "h-8 w-8",
-    xl: "h-12 w-12",
-  };
-
-  return (
-    <Loader2
-      className={cn(
-        "animate-spin text-purple500",
-        sizeMap[size] || sizeMap.md,
-        className,
-      )}
-    />
-  );
-};

package/src/atoms/SwitchAtom.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { Switch } from "@/components/ui/switch";
-import { SwitchAtomType } from "../types/atoms";
-import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
-
-/**
- * SwitchAtom
- * Wraps shadcn Switch with label support
- */
-export const SwitchAtom: React.FC<
-  SwitchAtomType & { onCheckedChange?: (checked: boolean) => void }
-> = ({ id, label, checked, disabled, className, onCheckedChange }) => {
-  return (
-    <div className={cn("flex items-center space-x-2", className)}>
-      <Switch
-        id={id}
-        checked={checked}
-        disabled={disabled}
-        onCheckedChange={onCheckedChange}
-      />
-      {label && (
-        <Label
-          htmlFor={id}
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
-        >
-          {label}
-        </Label>
-      )}
-    </div>
-  );
-};

package/src/atoms/TableAtom.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { TableAtomType } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-export const TableAtom: React.FC<TableAtomType> = ({
-  headers,
-  rows,
-  className,
-}) => {
-  return (
-    <div
-      className={cn(
-        "rounded-2xl border border-gray-100 overflow-hidden bg-white",
-        className,
-      )}
-    >
-      <Table>
-        <TableHeader className="bg-gray-50/50">
-          <TableRow>
-            {headers.map((header, i) => (
-              <TableHead
-                key={i}
-                className="text-xs font-bold text-gray-400 uppercase tracking-widest px-6 py-4"
-              >
-                {header}
-              </TableHead>
-            ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {rows.map((row, i) => (
-            <TableRow
-              key={i}
-              className="hover:bg-purple-50/30 transition-colors border-gray-50"
-            >
-              {row.map((cell, j) => (
-                <TableCell
-                  key={j}
-                  className="text-sm text-gray-700 px-6 py-4 font-medium"
-                >
-                  {cell}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  );
-};

package/src/atoms/TabsAtom.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { TabsAtomType, UIComponent } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-interface Props extends TabsAtomType {
-  renderComponent: (component: UIComponent) => React.ReactNode;
-}
-
-export const TabsAtom: React.FC<Props> = ({
-  defaultValue,
-  tabs,
-  className,
-  renderComponent,
-}) => {
-  return (
-    <Tabs defaultValue={defaultValue} className={cn("w-full", className)}>
-      <TabsList className="bg-gray-100/50 p-1 rounded-xl">
-        {tabs.map((tab) => (
-          <TabsTrigger
-            key={tab.value}
-            value={tab.value}
-            className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
-          >
-            {tab.label}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      {tabs.map((tab) => (
-        <TabsContent key={tab.value} value={tab.value} className="mt-4">
-          {tab.content.map((child) => (
-            <React.Fragment key={child.id}>
-              {renderComponent(child)}
-            </React.Fragment>
-          ))}
-        </TabsContent>
-      ))}
-    </Tabs>
-  );
-};

package/src/atoms/TextAtom.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import { TextAtomType } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-/**
- * TextAtom
- * Renders standardized text styles from UISchema
- */
-export const TextAtom: React.FC<TextAtomType> = ({
-  content,
-  variant = "p",
-  className,
-}) => {
-  const baseStyles: Record<string, string> = {
-    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray900",
-    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-gray900",
-    h3: "scroll-m-20 text-2xl font-semibold tracking-tight text-gray900",
-    h4: "scroll-m-20 text-xl font-semibold tracking-tight text-gray900",
-    p: "leading-7 [&:not(:first-child)]:mt-6 text-gray700",
-    small: "text-sm font-medium leading-none text-gray600",
-    muted: "text-sm text-muted-foreground",
-    label: "text-[10px] font-bold text-gray400 uppercase tracking-widest pl-1",
-  };
-
-  const Component =
-    variant === "small" || variant === "muted" || variant === "label"
-      ? "p"
-      : variant;
-
-  return (
-    <Component className={cn(baseStyles[variant], className)}>
-      {content}
-    </Component>
-  );
-};

package/src/atoms/TextareaAtom.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import { Textarea } from "@/components/ui/textarea";
-import { InputAtomType } from "../types/atoms";
-import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
-
-/**
- * TextareaAtom
- * Standalone textarea atom
- */
-export const TextareaAtom: React.FC<
-  InputAtomType & { onChange?: (val: string) => void }
-> = ({
-  id,
-  label,
-  placeholder,
-  defaultValue,
-  disabled,
-  required,
-  className,
-  onChange,
-}) => {
-  return (
-    <div className={cn("grid w-full gap-1.5", className)}>
-      {label && (
-        <Label htmlFor={id} className="font-semibold">
-          {label}
-          {required && <span className="text-red-500 ml-1">*</span>}
-        </Label>
-      )}
-      <Textarea
-        id={id}
-        placeholder={placeholder}
-        defaultValue={defaultValue}
-        disabled={disabled}
-        required={required}
-        onChange={(e) => onChange?.(e.target.value)}
-        className="min-h-[100px] border-purple-100 focus-visible:ring-purple-500 resize-none shadow-sm"
-      />
-    </div>
-  );
-};

package/src/atoms/TimelineAtom.tsx

@@ -1,77 +0,0 @@
-import React from "react";
-import { TimelineAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-import * as Icons from "lucide-react";
-
-/**
- * TimelineAtom
- * A vertical timeline primitive for processes and steps.
- */
-export const TimelineAtom: React.FC<TimelineAtomType> = ({
-  items,
-  className,
-}) => {
-  return (
-    <div
-      className={cn(
-        "space-y-6 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px before:h-full before:w-0.5 before:bg-gradient-to-b before:from-purple-500 before:via-indigo-500 before:to-gray-200 before:pointer-events-none",
-        className,
-      )}
-    >
-      {items.map((item, i) => {
-        const Icon = item.icon ? (Icons as any)[item.icon] : null;
-        const isCompleted = item.status === "completed";
-        const isActive = item.status === "active";
-
-        return (
-          <div key={i} className="relative flex items-start gap-6 group">
-            <div
-              className={cn(
-                "flex items-center justify-center w-10 h-10 rounded-full border-4 border-white shadow-sm shrink-0 z-10 transition-all group-hover:scale-110",
-                isCompleted
-                  ? "bg-purple-600 text-white"
-                  : isActive
-                    ? "bg-indigo-600 text-white ring-4 ring-indigo-50"
-                    : "bg-gray-100 text-gray-400",
-              )}
-            >
-              {Icon ? (
-                <Icon className="w-5 h-5" />
-              ) : isCompleted ? (
-                <Icons.Check className="w-5 h-5" />
-              ) : (
-                <div className="w-2 h-2 rounded-full bg-current" />
-              )}
-            </div>
-            <div className="flex flex-col gap-1 pt-0.5">
-              <div className="flex items-center gap-2">
-                <h4
-                  className={cn(
-                    "font-bold text-sm",
-                    isCompleted
-                      ? "text-gray-900"
-                      : isActive
-                        ? "text-indigo-600"
-                        : "text-gray-500",
-                  )}
-                >
-                  {item.title}
-                </h4>
-                {item.timestamp && (
-                  <span className="text-[10px] text-muted-foreground bg-gray-50 px-1.5 py-0.5 rounded-md font-medium border border-gray-100">
-                    {item.timestamp}
-                  </span>
-                )}
-              </div>
-              {item.description && (
-                <p className="text-xs text-muted-foreground leading-relaxed max-w-sm">
-                  {item.description}
-                </p>
-              )}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-};

package/src/atoms/ToggleAtom.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-import { Toggle } from "@/components/ui/toggle";
-import { ToggleAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-
-/**
- * ToggleAtom
- * Wraps shadcn Toggle
- */
-export const ToggleAtom: React.FC<
-  ToggleAtomType & { onPressedChange?: (pressed: boolean) => void }
-> = ({
-  label,
-  pressed,
-  disabled,
-  size = "md",
-  variant = "default",
-  className,
-  onPressedChange,
-}) => {
-  return (
-    <Toggle
-      pressed={pressed}
-      disabled={disabled}
-      size={size as any}
-      variant={variant as any}
-      onPressedChange={onPressedChange}
-      className={cn(
-        "data-[state=on]:bg-purple-100 data-[state=on]:text-purple-900",
-        className,
-      )}
-    >
-      {label}
-    </Toggle>
-  );
-};

package/src/atoms/TooltipAtom.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { TooltipAtomType, UIComponent } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-interface Props extends TooltipAtomType {
-  renderComponent: (component: UIComponent) => React.ReactNode;
-}
-
-export const TooltipAtom: React.FC<Props> = ({
-  content,
-  children,
-  className,
-  renderComponent,
-}) => {
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <div className={cn("inline-block", className)}>
-            {children.map((child) => (
-              <React.Fragment key={child.id}>
-                {renderComponent(child)}
-              </React.Fragment>
-            ))}
-          </div>
-        </TooltipTrigger>
-        <TooltipContent className="bg-gray-900 text-white border-none rounded-lg shadow-xl px-3 py-1.5 text-xs">
-          {content}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-};