pxengine 0.1.9 → 0.1.11

package/src/types/atoms.ts

@@ -7,7 +7,7 @@ export type GapSize = "none" | "sm" | "md" | "lg" | "xl";
 export type TextVariant = "h1" | "h2" | "h3" | "h4" | "p" | "small" | "muted" | "label";
 export type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "purple" | "gradient";
 export type ButtonSize = "default" | "sm" | "lg" | "icon" | "xl";
-export type InputType = "text" | "email" | "password" | "number" | "search" | "tel" | "url" | "textarea" | "select" | "slider" | "checkbox" | "switch" | "radio" | "otp" | "date";
+export type InputType = "text" | "email" | "password" | "number" | "search" | "tel" | "url" | "textarea" | "select" | "slider" | "checkbox" | "switch" | "radio" | "otp" | "date" | "dropdown";
 
 export interface BaseAtom {
   id: string;
@@ -46,6 +46,57 @@ export interface ToggleAtomType extends BaseAtom {
   label: string;
   pressed?: boolean;
   disabled?: boolean;
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "outline";
+}
+
+export interface CheckboxAtomType extends BaseAtom {
+  type: "checkbox";
+  label?: string;
+  checked?: boolean;
+  disabled?: boolean;
+}
+
+export interface SwitchAtomType extends BaseAtom {
+  type: "switch";
+  label?: string;
+  checked?: boolean;
+  disabled?: boolean;
+}
+
+export interface LabelAtomType extends BaseAtom {
+  type: "label";
+  content: string;
+  htmlFor?: string;
+}
+
+export interface SliderAtomType extends BaseAtom {
+  type: "slider";
+  defaultValue?: number[];
+  max?: number;
+  min?: number;
+  step?: number;
+  disabled?: boolean;
+}
+
+export interface RadioGroupAtomType extends BaseAtom {
+  type: "radio-group";
+  options: Array<{ label: string; value: string }>;
+  defaultValue?: string;
+  disabled?: boolean;
+}
+
+export interface DropdownMenuAtomType extends BaseAtom {
+  type: "dropdown-menu";
+  trigger: any;
+  items: Array<{
+    label: string;
+    value: string;
+    icon?: string;
+    action?: string;
+    disabled?: boolean;
+    isDestructive?: boolean;
+  }>;
 }
 
 // ============================================================================
@@ -97,6 +148,18 @@ export interface SeparatorAtomType extends BaseAtom {
   orientation?: "horizontal" | "vertical";
 }
 
+export interface KbdAtomType extends BaseAtom {
+  type: "kbd";
+  keys: string[];
+}
+
+export interface RatingAtomType extends BaseAtom {
+  type: "rating";
+  value: number;
+  max?: number;
+  readonly?: boolean;
+}
+
 export interface ScrollAreaAtomType extends BaseAtom {
   type: "scroll-area";
   maxHeight?: string;
@@ -209,6 +272,39 @@ export interface AlertDialogAtomType extends BaseAtom {
   action?: string;
 }
 
+export interface DrawerAtomType extends BaseAtom {
+  type: "drawer";
+  side?: "top" | "bottom" | "left" | "right";
+  title?: string;
+  description?: string;
+  trigger: any[];
+  children: any[];
+}
+
+export interface ContextMenuAtomType extends BaseAtom {
+  type: "context-menu";
+  trigger: any[];
+  items: Array<{
+    label: string;
+    value: string;
+    icon?: string;
+    action?: string;
+    disabled?: boolean;
+    isDestructive?: boolean;
+  }>;
+}
+
+export interface TimelineAtomType extends BaseAtom {
+  type: "timeline";
+  items: Array<{
+    title: string;
+    description?: string;
+    timestamp?: string;
+    status?: "completed" | "active" | "upcoming";
+    icon?: string;
+  }>;
+}
+
 // ============================================================================
 // NAVIGATION ATOMS
 // ============================================================================
@@ -266,6 +362,43 @@ export interface CalendarAtomType extends BaseAtom {
   selectedDate?: string | string[];
 }
 
+export interface InputOTPAtomType extends BaseAtom {
+  type: "input-otp";
+  length: number;
+  placeholder?: string;
+}
+
+export interface ResizableAtomType extends BaseAtom {
+  type: "resizable";
+  direction: "horizontal" | "vertical";
+  panels: Array<{
+    defaultSize: number;
+    children: any[];
+  }>;
+}
+
+export interface VideoAtomType extends BaseAtom {
+  type: "video";
+  src: string;
+  poster?: string;
+  autoplay?: boolean;
+  controls?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+}
+
+export interface ChartAtomType extends BaseAtom {
+  type: "chart";
+  chartType: "bar" | "line" | "area" | "pie" | "radar" | "radial";
+  data: any[];
+  config: Record<string, { label: string; color: string }>;
+  XAxisKey?: string;
+  YAxisKey?: string;
+  showTooltip?: boolean;
+  showLegend?: boolean;
+  stacked?: boolean;
+}
+
 export type UIAtom =
   | ButtonAtomType
   | InputAtomType
@@ -298,4 +431,19 @@ export type UIAtom =
   | CommandAtomType
   | FormInputAtomType
   | FormSelectAtomType
-  | FormTextareaAtomType;
+  | FormTextareaAtomType
+  | CheckboxAtomType
+  | SwitchAtomType
+  | LabelAtomType
+  | SliderAtomType
+  | RadioGroupAtomType
+  | DropdownMenuAtomType
+  | ContextMenuAtomType
+  | DrawerAtomType
+  | InputOTPAtomType
+  | KbdAtomType
+  | ResizableAtomType
+  | RatingAtomType
+  | TimelineAtomType
+  | VideoAtomType
+  | ChartAtomType;

package/src/types/molecules.ts

@@ -47,8 +47,233 @@ export interface ActionButtonAtom extends BaseMolecule {
   action?: string;
 }
 
+// ============================================================================
+// GENERIC MOLECULES
+// ============================================================================
+
+export interface StatsGridMolecule extends BaseMolecule {
+  type: "stats-grid";
+  items: Array<{
+    label: string;
+    value: string | number;
+    trend?: string;
+    trendDirection?: "up" | "down" | "neutral";
+    icon?: string;
+  }>;
+}
+
+export interface EmptyStateMolecule extends BaseMolecule {
+  type: "empty-state";
+  title: string;
+  description: string;
+  icon?: string;
+  actionLabel?: string;
+  action?: string;
+}
+
+export interface LoadingOverlayMolecule extends BaseMolecule {
+  type: "loading-overlay";
+  message?: string;
+}
+
+// ============================================================================
+// CREATOR DISCOVERY MOLECULES
+// ============================================================================
+
+export interface PlatformIconGroupMolecule extends BaseMolecule {
+  type: "platform-icon-group";
+  platforms: Array<{
+    platform: "instagram" | "tiktok" | "youtube" | "twitter";
+    url?: string;
+    handle?: string;
+  }>;
+}
+
+export interface CreatorProfileSummaryMolecule extends BaseMolecule {
+  type: "creator-profile-summary";
+  avatarSrc?: string;
+  name: string;
+  followerCount?: string | number;
+  engagementRate?: string | number;
+}
+
+export interface AudienceMetricCardMolecule extends BaseMolecule {
+  type: "audience-metric-card";
+  title: string;
+  metrics: Array<{
+    label: string;
+    value: string | number;
+    percentage?: number;
+  }>;
+}
+
+// ============================================================================
+// PHASE 2 GENERIC MOLECULES
+// ============================================================================
+
+export interface FilterBarMolecule extends BaseMolecule {
+  type: "filter-bar";
+  filters: Array<{
+    label: string;
+    value: string;
+    active?: boolean;
+  }>;
+  showSearch?: boolean;
+}
+
+export interface FileUploadMolecule extends BaseMolecule {
+  type: "file-upload";
+  title: string;
+  accept?: string;
+  multiple?: boolean;
+}
+
+export interface TagCloudMolecule extends BaseMolecule {
+  type: "tag-cloud";
+  tags: Array<{
+    label: string;
+    value: string;
+    count?: number;
+  }>;
+}
+
+// ============================================================================
+// PHASE 2 CREATOR DISCOVERY MOLECULES
+// ============================================================================
+
+export interface CreatorGridCardMolecule extends BaseMolecule {
+  type: "creator-grid-card";
+  bannerSrc?: string;
+  avatarSrc?: string;
+  name: string;
+  handle: string;
+  metrics: Array<{
+    label: string;
+    value: string | number;
+  }>;
+  platforms: string[];
+}
+
+export interface BrandAffinityGroupMolecule extends BaseMolecule {
+  type: "brand-affinity-group";
+  brands: Array<{
+    name: string;
+    logoSrc: string;
+  }>;
+}
+
+export interface ContentPreviewGalleryMolecule extends BaseMolecule {
+  type: "content-preview-gallery";
+  items: Array<{
+    thumbnail: string;
+    type: "video" | "image";
+    url?: string;
+  }>;
+}
+
+// ============================================================================
+// PHASE 3 GENERIC MOLECULES
+// ============================================================================
+
+export interface DataGridMolecule extends BaseMolecule {
+  type: "data-grid";
+  columns: Array<{
+    header: string;
+    accessorKey: string;
+    type?: "text" | "number" | "badge" | "date" | "avatar";
+  }>;
+  data: any[];
+  pageSize?: number;
+}
+
+export interface StepWizardMolecule extends BaseMolecule {
+  type: "step-wizard";
+  steps: Array<{
+    title: string;
+    description?: string;
+  }>;
+  currentStep: number;
+}
+
+export interface NotificationListMolecule extends BaseMolecule {
+  type: "notification-list";
+  notifications: Array<{
+    id: string;
+    title: string;
+    description?: string;
+    timestamp: string;
+    type: "info" | "success" | "warning" | "error";
+    read?: boolean;
+  }>;
+}
+
+// ============================================================================
+// PHASE 3 CREATOR DISCOVERY MOLECULES
+// ============================================================================
+
+export interface AudienceDemographicsCardMolecule extends BaseMolecule {
+  type: "audience-demographics-card";
+  title: string;
+  data: any[];
+  config: Record<string, { label: string; color: string }>;
+  demographicType: "age" | "gender" | "location";
+}
+
+export interface GrowthChartCardMolecule extends BaseMolecule {
+  type: "growth-chart-card";
+  title: string;
+  data: any[];
+  config: Record<string, { label: string; color: string }>;
+  metric: string;
+  period: string;
+}
+
+export interface TopPostsGridMolecule extends BaseMolecule {
+  type: "top-posts-grid";
+  posts: Array<{
+    thumbnail: string;
+    url: string;
+    engagement: string;
+    likes: string;
+    comments: string;
+    date: string;
+  }>;
+}
+
+export interface CreatorActionHeaderMolecule extends BaseMolecule {
+  type: "creator-action-header";
+  bannerSrc?: string;
+  avatarSrc?: string;
+  name: string;
+  handle: string;
+  actions: Array<{
+    label: string;
+    variant?: string;
+    action?: string;
+  }>;
+}
+
 export type UIMolecule =
   | CampaignSeedCardAtom
   | SearchSpecCardAtom
   | MCQCardAtom
-  | ActionButtonAtom;
+  | ActionButtonAtom
+  | StatsGridMolecule
+  | EmptyStateMolecule
+  | LoadingOverlayMolecule
+  | PlatformIconGroupMolecule
+  | CreatorProfileSummaryMolecule
+  | AudienceMetricCardMolecule
+  | FilterBarMolecule
+  | FileUploadMolecule
+  | TagCloudMolecule
+  | CreatorGridCardMolecule
+  | BrandAffinityGroupMolecule
+  | ContentPreviewGalleryMolecule
+  | DataGridMolecule
+  | StepWizardMolecule
+  | NotificationListMolecule
+  | AudienceDemographicsCardMolecule
+  | GrowthChartCardMolecule
+  | TopPostsGridMolecule
+  | CreatorActionHeaderMolecule;