pxengine 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxengine",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "description": "Shadcn-based UI component library for agent-driven interfaces",
   "main": "./dist/index.cjs",
@@ -32,12 +32,12 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2"
   },
   "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",

package/src/atoms/CardAtom.tsx

@@ -11,7 +11,7 @@ import { CardAtomType, UIComponent } from "../types/schema";
 import { cn } from "@/lib/utils";
 
 interface Props extends CardAtomType {
-  renderComponent: (component: UIComponent) => React.ReactNode;
+  renderComponent: (component: UIComponent, index?: number) => React.ReactNode;
 }
 
 /**
@@ -36,7 +36,7 @@ export const CardAtom: React.FC<Props> = ({
       {(title || description) && (
         <CardHeader>
           {title && (
-            <CardTitle className="text-xl font-bold text-gray-900">
+            <CardTitle className="text-xl font-bold text-gray900">
               {title}
             </CardTitle>
           )}
@@ -44,17 +44,17 @@ export const CardAtom: React.FC<Props> = ({
         </CardHeader>
       )}
       <CardContent className="space-y-4">
-        {children.map((child) => (
-          <React.Fragment key={child.id}>
-            {renderComponent(child)}
+        {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-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)}
+        <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>

package/src/atoms/FormInputAtom.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useForm } from "react-hook-form";
+import { cn } from "@/lib/utils";
+
+export interface FormInputAtomType {
+  type: "FormInput";
+  name: string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  defaultValue?: string;
+  required?: boolean;
+  inputType?:
+    | "text"
+    | "email"
+    | "password"
+    | "number"
+    | "tel"
+    | "url"
+    | "date"
+    | "time";
+  className?: string;
+  id?: string;
+}
+
+interface FormInputAtomProps extends Omit<FormInputAtomType, "type"> {
+  renderComponent?: any;
+  children?: any;
+}
+
+/**
+ * FormInputAtom
+ *
+ * Self-contained form input component that properly wraps FormField, FormItem, FormLabel, and FormControl.
+ * This component provides the necessary React Context for form components to work correctly.
+ *
+ * Features:
+ * - Handles all form context requirements internally
+ * - Supports various input types (text, email, password, etc.)
+ * - Includes validation support through react-hook-form
+ * - Schema-safe for dynamic rendering via PXEngineRenderer
+ */
+export const FormInputAtom: React.FC<FormInputAtomProps> = ({
+  name,
+  label,
+  placeholder,
+  description,
+  defaultValue = "",
+  required = false,
+  inputType = "text",
+  className,
+  id,
+}) => {
+  // Create a local form context for this field
+  const form = useForm({
+    defaultValues: {
+      [name]: defaultValue,
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <FormField
+        control={form.control}
+        name={name}
+        rules={{
+          required: required ? `${label || name} is required` : undefined,
+        }}
+        render={({ field }) => (
+          <FormItem className={cn("w-full", className)}>
+            {label && <FormLabel>{label}</FormLabel>}
+            <FormControl>
+              <Input
+                type={inputType}
+                placeholder={placeholder}
+                id={id || `form-input-${name}`}
+                {...field}
+              />
+            </FormControl>
+            {description && <FormDescription>{description}</FormDescription>}
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </Form>
+  );
+};

package/src/atoms/FormSelectAtom.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useForm } from "react-hook-form";
+import { cn } from "@/lib/utils";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface FormSelectAtomType {
+  type: "FormSelect";
+  name: string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  defaultValue?: string;
+  required?: boolean;
+  options: SelectOption[];
+  className?: string;
+  id?: string;
+}
+
+interface FormSelectAtomProps extends Omit<FormSelectAtomType, "type"> {
+  renderComponent?: any;
+  children?: any;
+}
+
+/**
+ * FormSelectAtom
+ *
+ * Self-contained form select component that properly wraps FormField, FormItem, FormLabel, FormControl, and Select.
+ * This component provides the necessary React Context for both form and select components to work correctly.
+ *
+ * Features:
+ * - Handles all form and select context requirements internally
+ * - Supports dynamic options list
+ * - Includes validation support through react-hook-form
+ * - Schema-safe for dynamic rendering via PXEngineRenderer
+ */
+export const FormSelectAtom: React.FC<FormSelectAtomProps> = ({
+  name,
+  label,
+  placeholder = "Select an option",
+  description,
+  defaultValue = "",
+  required = false,
+  options = [],
+  className,
+  id,
+}) => {
+  // Create a local form context for this field
+  const form = useForm({
+    defaultValues: {
+      [name]: defaultValue,
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <FormField
+        control={form.control}
+        name={name}
+        rules={{
+          required: required ? `${label || name} is required` : undefined,
+        }}
+        render={({ field }) => (
+          <FormItem className={cn("w-full", className)}>
+            {label && <FormLabel>{label}</FormLabel>}
+            <Select onValueChange={field.onChange} defaultValue={field.value}>
+              <FormControl>
+                <SelectTrigger id={id || `form-select-${name}`}>
+                  <SelectValue placeholder={placeholder} />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                {options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {description && <FormDescription>{description}</FormDescription>}
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </Form>
+  );
+};

package/src/atoms/FormTextareaAtom.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { useForm } from "react-hook-form";
+import { cn } from "@/lib/utils";
+
+export interface FormTextareaAtomType {
+  type: "FormTextarea";
+  name: string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  defaultValue?: string;
+  required?: boolean;
+  rows?: number;
+  className?: string;
+  id?: string;
+}
+
+interface FormTextareaAtomProps extends Omit<FormTextareaAtomType, "type"> {
+  renderComponent?: any;
+  children?: any;
+}
+
+/**
+ * FormTextareaAtom
+ *
+ * Self-contained form textarea component that properly wraps FormField, FormItem, FormLabel, and FormControl.
+ * This component provides the necessary React Context for form components to work correctly.
+ *
+ * Features:
+ * - Handles all form context requirements internally
+ * - Supports configurable rows
+ * - Includes validation support through react-hook-form
+ * - Schema-safe for dynamic rendering via PXEngineRenderer
+ */
+export const FormTextareaAtom: React.FC<FormTextareaAtomProps> = ({
+  name,
+  label,
+  placeholder,
+  description,
+  defaultValue = "",
+  required = false,
+  rows = 3,
+  className,
+  id,
+}) => {
+  // Create a local form context for this field
+  const form = useForm({
+    defaultValues: {
+      [name]: defaultValue,
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <FormField
+        control={form.control}
+        name={name}
+        rules={{
+          required: required ? `${label || name} is required` : undefined,
+        }}
+        render={({ field }) => (
+          <FormItem className={cn("w-full", className)}>
+            {label && <FormLabel>{label}</FormLabel>}
+            <FormControl>
+              <Textarea
+                placeholder={placeholder}
+                rows={rows}
+                id={id || `form-textarea-${name}`}
+                {...field}
+              />
+            </FormControl>
+            {description && <FormDescription>{description}</FormDescription>}
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </Form>
+  );
+};

package/src/atoms/LayoutAtom.tsx

@@ -3,7 +3,7 @@ import { LayoutAtomType, UIComponent } from "../types/schema";
 import { cn } from "@/lib/utils";
 
 interface Props extends LayoutAtomType {
-  renderComponent: (component: UIComponent) => React.ReactNode;
+  renderComponent: (component: UIComponent, index?: number) => React.ReactNode;
 }
 
 /**
@@ -35,8 +35,10 @@ export const LayoutAtom: React.FC<Props> = ({
 
   return (
     <div className={classes}>
-      {children.map((child) => (
-        <React.Fragment key={child.id}>{renderComponent(child)}</React.Fragment>
+      {children.map((child, index) => (
+        <React.Fragment key={child.id || `layout-item-${index}`}>
+          {renderComponent(child, index)}
+        </React.Fragment>
       ))}
     </div>
   );

package/src/atoms/TextAtom.tsx

@@ -12,14 +12,14 @@ export const TextAtom: React.FC<TextAtomType> = ({
   className,
 }) => {
   const baseStyles: Record<string, string> = {
-    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray-900",
-    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-gray-900",
-    h3: "scroll-m-20 text-2xl font-semibold tracking-tight text-gray-900",
-    h4: "scroll-m-20 text-xl font-semibold tracking-tight text-gray-900",
-    p: "leading-7 [&:not(:first-child)]:mt-6 text-gray-700",
-    small: "text-sm font-medium leading-none text-gray-600",
+    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-gray-400 uppercase tracking-widest pl-1",
+    label: "text-[10px] font-bold text-gray400 uppercase tracking-widest pl-1",
   };
 
   const Component =

package/src/atoms/index.ts

@@ -26,3 +26,7 @@ export * from "./SpinnerAtom";
 export * from "./CalendarAtom";
 export * from "./PaginationAtom";
 export * from "./CommandAtom";
+// Form Atoms - self-contained with context wrappers
+export * from "./FormInputAtom";
+export * from "./FormSelectAtom";
+export * from "./FormTextareaAtom";

package/src/components/ui/index.ts

@@ -0,0 +1,54 @@
+// Auto-generated index file for UI components
+export * from "./accordion";
+export * from "./alert-dialog";
+export * from "./alert";
+export * from "./aspect-ratio";
+export * from "./avatar";
+export * from "./badge";
+export * from "./breadcrumb";
+export * from "./button-group";
+export * from "./button";
+export * from "./calendar";
+export * from "./card";
+export * from "./carousel";
+export * from "./chart";
+export * from "./checkbox";
+export * from "./collapsible";
+export * from "./command";
+export * from "./context-menu";
+export * from "./dialog";
+export * from "./drawer";
+export * from "./dropdown-menu";
+export * from "./empty";
+export * from "./field";
+export * from "./form";
+export * from "./hover-card";
+export * from "./input-group";
+export * from "./input-otp";
+export * from "./input";
+export * from "./item";
+export * from "./kbd";
+export * from "./label";
+export * from "./menubar";
+export * from "./navigation-menu";
+export * from "./pagination";
+export * from "./popover";
+export * from "./progress";
+export * from "./radio-group";
+export * from "./resizable";
+export * from "./scroll-area";
+export * from "./select";
+export * from "./separator";
+export * from "./sheet";
+export * from "./sidebar";
+export * from "./skeleton";
+export * from "./slider";
+export * from "./sonner";
+export * from "./spinner";
+export * from "./switch";
+export * from "./table";
+export * from "./tabs";
+export * from "./textarea";
+export * from "./toggle-group";
+export * from "./toggle";
+export * from "./tooltip";

package/src/molecules/generic/ActionButton/ActionButton.tsx

@@ -113,7 +113,7 @@ export const ActionButton = React.memo<ActionButtonProps>(
             variant="ghost"
             size="icon"
             onClick={onPause}
-            className="h-10 w-10 rounded-full hover:bg-gray-100 text-gray-500"
+            className="h-10 w-10 rounded-full hover:bg-gray200 text-gray600"
             title={isPaused ? "Resume auto-proceed" : "Pause auto-proceed"}
           >
             {isPaused ? (