pxengine 0.1.94 → 0.1.96
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -132
- package/config/tailwind-preset.js +159 -159
- package/dist/index.cjs +12 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +12 -6
- package/dist/index.mjs.map +1 -1
- package/dist/registry.json +18363 -0
- package/package.json +109 -109
package/README.md
CHANGED
|
@@ -1,132 +1,132 @@
|
|
|
1
|
-
# @pxengine-ui
|
|
2
|
-
|
|
3
|
-
> **Shadcn-based UI component library for agent-driven interfaces**
|
|
4
|
-
|
|
5
|
-
A premium UI component library built on top of shadcn/ui, designed specifically for agent-driven user interfaces and creator discovery platforms. Components follow Atomic Design principles and are optimized for schema-driven rendering.
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
## Overview
|
|
10
|
-
|
|
11
|
-
`@pxengine-ui` provides a robust foundation for building modern dashboard and AI-integrated applications:
|
|
12
|
-
|
|
13
|
-
- **Built on shadcn/ui** - Industry-standard base layer using Radix UI primitives.
|
|
14
|
-
- **Vibrant & Premium** - Custom design system with glassmorphism, smooth gradients, and rich micro-interactions.
|
|
15
|
-
- **Agent-First** - Fully schema-driven atoms ready for AI generation.
|
|
16
|
-
- **Atomic Design** - 40+ Atoms and 18+ Composed Molecules.
|
|
17
|
-
- **Zero Configuration** - Inherits Tailwind config and CSS variables from the host application.
|
|
18
|
-
|
|
19
|
-
---
|
|
20
|
-
|
|
21
|
-
## Structure
|
|
22
|
-
|
|
23
|
-
```
|
|
24
|
-
@pxengine-ui/
|
|
25
|
-
├── src/
|
|
26
|
-
│ ├── atoms/ # Foundation UI (Button, Input, Slider, etc.)
|
|
27
|
-
│ ├── molecules/ # Composed Patterns
|
|
28
|
-
│ │ ├── generic/ # Cross-domain dashboard widgets
|
|
29
|
-
│ │ └── creator-discovery/ # Niche-specific for creator search
|
|
30
|
-
│ ├── types/ # Schema & Component definitions
|
|
31
|
-
│ └── lib/ # Shared utilities
|
|
32
|
-
└── dist/ # Compiled assets & Registry
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
---
|
|
36
|
-
|
|
37
|
-
## Component Catalog
|
|
38
|
-
|
|
39
|
-
### Atoms (Foundation Primitives)
|
|
40
|
-
|
|
41
|
-
40+ accessible atoms wrapping Radix-based shadcn components:
|
|
42
|
-
|
|
43
|
-
- **Forms**: Input, Checkbox, RadioGroup, Select, Switch, Slider, Textarea, Toggle.
|
|
44
|
-
- **Navigation**: DropdownMenu, ContextMenu, Pagination, Breadcrumb, Tabs, Command.
|
|
45
|
-
- **Overlay**: Dialog, AlertDialog, Drawer, Sheet, Popover, Tooltip.
|
|
46
|
-
- **Display**: Card, Badge, Avatar, Accordion, AspectRatio, Skeleton, Separator, Progress.
|
|
47
|
-
- **Specialized**: Resizable Panels, InputOTP, Kbd (Keyboard shortcuts).
|
|
48
|
-
|
|
49
|
-
### Molecules (High-Level Patterns)
|
|
50
|
-
|
|
51
|
-
#### Generic Dashboard
|
|
52
|
-
|
|
53
|
-
- **StatsGrid**: Data visualization with trends & icons.
|
|
54
|
-
- **EmptyState**: Premium placeholder for empty results.
|
|
55
|
-
- **LoadingOverlay**: Glassmorphism backdrop with progress.
|
|
56
|
-
- **FilterBar**: Search + Multi-chip filtering.
|
|
57
|
-
- **FileUpload**: Drag-and-drop zone.
|
|
58
|
-
- **TagCloud**: Interactive interest clusters.
|
|
59
|
-
- **FormCard**: Schema-driven editable forms.
|
|
60
|
-
|
|
61
|
-
#### Creator Discovery
|
|
62
|
-
|
|
63
|
-
- **CreatorGridCard**: Detailed discovery card with banner and metrics.
|
|
64
|
-
- **AudienceMetricCard**: Specialized progress-based demographics.
|
|
65
|
-
- **BrandAffinityGroup**: Visual recently associated brand logos.
|
|
66
|
-
- **ContentPreviewGallery**: Video/Image thumbnail grids.
|
|
67
|
-
- **CreatorProfileSummary**: Compact info row for list views.
|
|
68
|
-
- **PlatformIconGroup**: Social platform reach summary.
|
|
69
|
-
- **SearchSpecCard**: Advanced filter criteria summary.
|
|
70
|
-
|
|
71
|
-
---
|
|
72
|
-
|
|
73
|
-
## Usage
|
|
74
|
-
|
|
75
|
-
### Registry-Driven Rendering
|
|
76
|
-
|
|
77
|
-
The library generates a `registry.json` that includes component metadata and schemas, allowing agents to understand what they can render.
|
|
78
|
-
|
|
79
|
-
```tsx
|
|
80
|
-
import { PXEngineRenderer } from "@/components/PXEngineRenderer";
|
|
81
|
-
|
|
82
|
-
const schema = {
|
|
83
|
-
type: "stats-grid",
|
|
84
|
-
items: [
|
|
85
|
-
{
|
|
86
|
-
label: "Total Reach",
|
|
87
|
-
value: "1.2M",
|
|
88
|
-
trend: "+12%",
|
|
89
|
-
trendDirection: "up",
|
|
90
|
-
},
|
|
91
|
-
],
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
return <PXEngineRenderer schema={schema} />;
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
### Direct Component Import
|
|
98
|
-
|
|
99
|
-
All components are exported for standard React usage:
|
|
100
|
-
|
|
101
|
-
```tsx
|
|
102
|
-
import { CreatorGridCard } from "pxengine";
|
|
103
|
-
|
|
104
|
-
<CreatorGridCard
|
|
105
|
-
name="Jane Doe"
|
|
106
|
-
handle="janedoe"
|
|
107
|
-
metrics={[{ label: "Followers", value: "500K" }]}
|
|
108
|
-
platforms={["Instagram", "TikTok"]}
|
|
109
|
-
/>;
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
---
|
|
113
|
-
|
|
114
|
-
## Design System
|
|
115
|
-
|
|
116
|
-
The library uses a specific high-end aesthetic:
|
|
117
|
-
|
|
118
|
-
- **Colors**: Indigo, Purple, and Slate primary hues.
|
|
119
|
-
- **Border Radius**: Generous `rounded-3xl` and `rounded-[32px]` for major components.
|
|
120
|
-
- **Backdrop**: Heavy use of `backdrop-blur-md` and `bg-white/60`.
|
|
121
|
-
- **Shadows**: Subtle, layered soft shadows for depth.
|
|
122
|
-
|
|
123
|
-
---
|
|
124
|
-
|
|
125
|
-
## Tech Stack
|
|
126
|
-
|
|
127
|
-
- **Framework**: React 18+ (Vite/tsup build)
|
|
128
|
-
- **Styling**: Tailwind CSS + `class-variance-authority`
|
|
129
|
-
- **Primitives**: Radix UI
|
|
130
|
-
- **Animations**: Framer Motion
|
|
131
|
-
- **Icons**: Lucide React
|
|
132
|
-
- **Data**: Recharts / Zod
|
|
1
|
+
# @pxengine-ui
|
|
2
|
+
|
|
3
|
+
> **Shadcn-based UI component library for agent-driven interfaces**
|
|
4
|
+
|
|
5
|
+
A premium UI component library built on top of shadcn/ui, designed specifically for agent-driven user interfaces and creator discovery platforms. Components follow Atomic Design principles and are optimized for schema-driven rendering.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
`@pxengine-ui` provides a robust foundation for building modern dashboard and AI-integrated applications:
|
|
12
|
+
|
|
13
|
+
- **Built on shadcn/ui** - Industry-standard base layer using Radix UI primitives.
|
|
14
|
+
- **Vibrant & Premium** - Custom design system with glassmorphism, smooth gradients, and rich micro-interactions.
|
|
15
|
+
- **Agent-First** - Fully schema-driven atoms ready for AI generation.
|
|
16
|
+
- **Atomic Design** - 40+ Atoms and 18+ Composed Molecules.
|
|
17
|
+
- **Zero Configuration** - Inherits Tailwind config and CSS variables from the host application.
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Structure
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
@pxengine-ui/
|
|
25
|
+
├── src/
|
|
26
|
+
│ ├── atoms/ # Foundation UI (Button, Input, Slider, etc.)
|
|
27
|
+
│ ├── molecules/ # Composed Patterns
|
|
28
|
+
│ │ ├── generic/ # Cross-domain dashboard widgets
|
|
29
|
+
│ │ └── creator-discovery/ # Niche-specific for creator search
|
|
30
|
+
│ ├── types/ # Schema & Component definitions
|
|
31
|
+
│ └── lib/ # Shared utilities
|
|
32
|
+
└── dist/ # Compiled assets & Registry
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## Component Catalog
|
|
38
|
+
|
|
39
|
+
### Atoms (Foundation Primitives)
|
|
40
|
+
|
|
41
|
+
40+ accessible atoms wrapping Radix-based shadcn components:
|
|
42
|
+
|
|
43
|
+
- **Forms**: Input, Checkbox, RadioGroup, Select, Switch, Slider, Textarea, Toggle.
|
|
44
|
+
- **Navigation**: DropdownMenu, ContextMenu, Pagination, Breadcrumb, Tabs, Command.
|
|
45
|
+
- **Overlay**: Dialog, AlertDialog, Drawer, Sheet, Popover, Tooltip.
|
|
46
|
+
- **Display**: Card, Badge, Avatar, Accordion, AspectRatio, Skeleton, Separator, Progress.
|
|
47
|
+
- **Specialized**: Resizable Panels, InputOTP, Kbd (Keyboard shortcuts).
|
|
48
|
+
|
|
49
|
+
### Molecules (High-Level Patterns)
|
|
50
|
+
|
|
51
|
+
#### Generic Dashboard
|
|
52
|
+
|
|
53
|
+
- **StatsGrid**: Data visualization with trends & icons.
|
|
54
|
+
- **EmptyState**: Premium placeholder for empty results.
|
|
55
|
+
- **LoadingOverlay**: Glassmorphism backdrop with progress.
|
|
56
|
+
- **FilterBar**: Search + Multi-chip filtering.
|
|
57
|
+
- **FileUpload**: Drag-and-drop zone.
|
|
58
|
+
- **TagCloud**: Interactive interest clusters.
|
|
59
|
+
- **FormCard**: Schema-driven editable forms.
|
|
60
|
+
|
|
61
|
+
#### Creator Discovery
|
|
62
|
+
|
|
63
|
+
- **CreatorGridCard**: Detailed discovery card with banner and metrics.
|
|
64
|
+
- **AudienceMetricCard**: Specialized progress-based demographics.
|
|
65
|
+
- **BrandAffinityGroup**: Visual recently associated brand logos.
|
|
66
|
+
- **ContentPreviewGallery**: Video/Image thumbnail grids.
|
|
67
|
+
- **CreatorProfileSummary**: Compact info row for list views.
|
|
68
|
+
- **PlatformIconGroup**: Social platform reach summary.
|
|
69
|
+
- **SearchSpecCard**: Advanced filter criteria summary.
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## Usage
|
|
74
|
+
|
|
75
|
+
### Registry-Driven Rendering
|
|
76
|
+
|
|
77
|
+
The library generates a `registry.json` that includes component metadata and schemas, allowing agents to understand what they can render.
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import { PXEngineRenderer } from "@/components/PXEngineRenderer";
|
|
81
|
+
|
|
82
|
+
const schema = {
|
|
83
|
+
type: "stats-grid",
|
|
84
|
+
items: [
|
|
85
|
+
{
|
|
86
|
+
label: "Total Reach",
|
|
87
|
+
value: "1.2M",
|
|
88
|
+
trend: "+12%",
|
|
89
|
+
trendDirection: "up",
|
|
90
|
+
},
|
|
91
|
+
],
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
return <PXEngineRenderer schema={schema} />;
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Direct Component Import
|
|
98
|
+
|
|
99
|
+
All components are exported for standard React usage:
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
import { CreatorGridCard } from "pxengine";
|
|
103
|
+
|
|
104
|
+
<CreatorGridCard
|
|
105
|
+
name="Jane Doe"
|
|
106
|
+
handle="janedoe"
|
|
107
|
+
metrics={[{ label: "Followers", value: "500K" }]}
|
|
108
|
+
platforms={["Instagram", "TikTok"]}
|
|
109
|
+
/>;
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
## Design System
|
|
115
|
+
|
|
116
|
+
The library uses a specific high-end aesthetic:
|
|
117
|
+
|
|
118
|
+
- **Colors**: Indigo, Purple, and Slate primary hues.
|
|
119
|
+
- **Border Radius**: Generous `rounded-3xl` and `rounded-[32px]` for major components.
|
|
120
|
+
- **Backdrop**: Heavy use of `backdrop-blur-md` and `bg-white/60`.
|
|
121
|
+
- **Shadows**: Subtle, layered soft shadows for depth.
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Tech Stack
|
|
126
|
+
|
|
127
|
+
- **Framework**: React 18+ (Vite/tsup build)
|
|
128
|
+
- **Styling**: Tailwind CSS + `class-variance-authority`
|
|
129
|
+
- **Primitives**: Radix UI
|
|
130
|
+
- **Animations**: Framer Motion
|
|
131
|
+
- **Icons**: Lucide React
|
|
132
|
+
- **Data**: Recharts / Zod
|
|
@@ -1,159 +1,159 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @pxengine/ui Tailwind Preset
|
|
3
|
-
*
|
|
4
|
-
* This file allows consumers of the @pxengine/ui library to easily inherit
|
|
5
|
-
* the custom theme, colors, and animations required for the components.
|
|
6
|
-
*
|
|
7
|
-
* Usage in tailwind.config.js:
|
|
8
|
-
* presets: [require("@pxengine/ui/config/tailwind-preset")]
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
module.exports = {
|
|
12
|
-
theme: {
|
|
13
|
-
container: {
|
|
14
|
-
center: true,
|
|
15
|
-
padding: "2rem",
|
|
16
|
-
screens: {
|
|
17
|
-
"2xl": "1400px",
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
extend: {
|
|
21
|
-
fontFamily: {
|
|
22
|
-
sans: ["Inter", "system-ui", "sans-serif"],
|
|
23
|
-
noto: ["Noto Sans", "system-ui", "sans-serif"],
|
|
24
|
-
grotesk: ["Space Grotesk", "system-ui", "sans-serif"],
|
|
25
|
-
roboto: ["Roboto", "system-ui", "sans-serif"],
|
|
26
|
-
},
|
|
27
|
-
colors: {
|
|
28
|
-
border: "hsl(var(--border))",
|
|
29
|
-
input: "hsl(var(--input))",
|
|
30
|
-
ring: "hsl(var(--ring))",
|
|
31
|
-
background: "hsl(var(--background))",
|
|
32
|
-
foreground: "hsl(var(--foreground))",
|
|
33
|
-
primary: {
|
|
34
|
-
DEFAULT: "hsl(var(--primary))",
|
|
35
|
-
foreground: "hsl(var(--primary-foreground))",
|
|
36
|
-
},
|
|
37
|
-
secondary: {
|
|
38
|
-
DEFAULT: "hsl(var(--secondary))",
|
|
39
|
-
foreground: "hsl(var(--secondary-foreground))",
|
|
40
|
-
},
|
|
41
|
-
interactive: {
|
|
42
|
-
DEFAULT: "var(--interactive)",
|
|
43
|
-
foreground: "var(--interactive-foreground)",
|
|
44
|
-
},
|
|
45
|
-
destructive: {
|
|
46
|
-
DEFAULT: "hsl(var(--destructive))",
|
|
47
|
-
foreground: "hsl(var(--destructive-foreground))",
|
|
48
|
-
},
|
|
49
|
-
muted: {
|
|
50
|
-
DEFAULT: "hsl(var(--muted))",
|
|
51
|
-
foreground: "hsl(var(--muted-foreground))",
|
|
52
|
-
},
|
|
53
|
-
accent: {
|
|
54
|
-
DEFAULT: "hsl(var(--accent))",
|
|
55
|
-
foreground: "hsl(var(--accent-foreground))",
|
|
56
|
-
},
|
|
57
|
-
popover: {
|
|
58
|
-
DEFAULT: "hsl(var(--popover))",
|
|
59
|
-
foreground: "hsl(var(--popover-foreground))",
|
|
60
|
-
},
|
|
61
|
-
card: {
|
|
62
|
-
DEFAULT: "hsl(var(--card))",
|
|
63
|
-
foreground: "hsl(var(--card-foreground))",
|
|
64
|
-
},
|
|
65
|
-
// Custom PXEngine colors
|
|
66
|
-
gray25: "var(--gray25)",
|
|
67
|
-
gray50: "var(--gray50)",
|
|
68
|
-
gray100: "var(--gray100)",
|
|
69
|
-
gray200: "var(--gray200)",
|
|
70
|
-
gray300: "var(--gray300)",
|
|
71
|
-
gray400: "var(--gray400)",
|
|
72
|
-
gray500: "var(--gray500)",
|
|
73
|
-
gray600: "var(--gray600)",
|
|
74
|
-
gray700: "var(--gray700)",
|
|
75
|
-
gray800: "var(--gray800)",
|
|
76
|
-
gray900: "var(--gray900)",
|
|
77
|
-
txtColor: "var(--txtColor)",
|
|
78
|
-
samepurple200: "#988cff",
|
|
79
|
-
purple100: "var(--purple100)",
|
|
80
|
-
purple200: "var(--purple200)",
|
|
81
|
-
purple500: "var(--purple500)",
|
|
82
|
-
purpleText: "var(--purple-text)",
|
|
83
|
-
purple50: "var(--purple50)",
|
|
84
|
-
purple20: "var(--purple20)",
|
|
85
|
-
purpleBorder2: "var(--purpleBorder2)",
|
|
86
|
-
purpleTextHover: "var(--purple-text-hover)",
|
|
87
|
-
purpleBorder: "var(--purple-border)",
|
|
88
|
-
green500: "var(--green500)",
|
|
89
|
-
grayPill: "var(--grayPill)",
|
|
90
|
-
sliderFill: "var(--slider-fill)",
|
|
91
|
-
sliderUnfill: "var(--slider-unfill)",
|
|
92
|
-
sliderButton: "var(--slider-button)",
|
|
93
|
-
lightSuccess: "#17C653",
|
|
94
|
-
lightWarning: "#DFA000",
|
|
95
|
-
success: "#5cb85c",
|
|
96
|
-
warningcolor: "var(--warning-color)",
|
|
97
|
-
label: "#071437",
|
|
98
|
-
paperBackground: "var(--paperBackground)",
|
|
99
|
-
darkModeCoal: "#0D0E12",
|
|
100
|
-
tutorialBorder: "var(--tutorialBorder)",
|
|
101
|
-
tutorialBg: "var(--tutorialBg)",
|
|
102
|
-
tutorialText: "var(--tutorialText)",
|
|
103
|
-
greenBackground: "var(--greenBackground)",
|
|
104
|
-
greenText: "var(--greenText)",
|
|
105
|
-
orangeBackground: "var(--orangeBackground)",
|
|
106
|
-
orangeText: "var(--orangeText)",
|
|
107
|
-
redBackground: "var(--redBackground)",
|
|
108
|
-
redText: "var(--redText)",
|
|
109
|
-
chart1: "var(--chart-1)",
|
|
110
|
-
chart2: "var(--chart-2)",
|
|
111
|
-
chart3: "var(--chart-3)",
|
|
112
|
-
chart4: "var(--chart-4)",
|
|
113
|
-
chart5: "var(--chart-5)",
|
|
114
|
-
primaryText: "var(--primaryText)",
|
|
115
|
-
primaryDark2: "var(--primaryDark2)",
|
|
116
|
-
purple200Dark: "var(--purple200Dark)",
|
|
117
|
-
purple20Dark: "var(--purple20Dark)",
|
|
118
|
-
purpleText1: "var(--purple-text-1)",
|
|
119
|
-
textPlaceholder: "var(--textPlaceholder)",
|
|
120
|
-
textSecondary: "var(--textSecondary)",
|
|
121
|
-
interactionBg: "var(--interaction-bg)",
|
|
122
|
-
purpleLight: "var(--purpleLight)",
|
|
123
|
-
purpleText2: "var(--purple-text-2)",
|
|
124
|
-
gold: "var(--gold)",
|
|
125
|
-
cardSurface: "var(--cardSurface)",
|
|
126
|
-
cardText: "var(--cardText)",
|
|
127
|
-
cardBorder: "var(--cardBorder)",
|
|
128
|
-
green100: "#dcfce7",
|
|
129
|
-
// Landing page colors
|
|
130
|
-
landingDarkestBlue: "var(--landing-darkest-blue)",
|
|
131
|
-
landingBlue: "var(--landing-blue)",
|
|
132
|
-
landingPurple: "var(--landing-purple)",
|
|
133
|
-
landingTextParagraph: "var(--landing-text-paragraph)",
|
|
134
|
-
landingTextHeading: "var(--landing-text-heading)",
|
|
135
|
-
landingBorderMain: "var(--landing-border-main)",
|
|
136
|
-
},
|
|
137
|
-
borderRadius: {
|
|
138
|
-
lg: "var(--radius)",
|
|
139
|
-
md: "calc(var(--radius) - 2px)",
|
|
140
|
-
sm: "calc(var(--radius) - 4px)",
|
|
141
|
-
},
|
|
142
|
-
keyframes: {
|
|
143
|
-
"accordion-down": {
|
|
144
|
-
from: { height: "0" },
|
|
145
|
-
to: { height: "var(--radix-accordion-content-height)" },
|
|
146
|
-
},
|
|
147
|
-
"accordion-up": {
|
|
148
|
-
from: { height: "var(--radix-accordion-content-height)" },
|
|
149
|
-
to: { height: "0" },
|
|
150
|
-
},
|
|
151
|
-
},
|
|
152
|
-
animation: {
|
|
153
|
-
"accordion-down": "accordion-down 0.2s ease-out",
|
|
154
|
-
"accordion-up": "accordion-up 0.2s ease-out",
|
|
155
|
-
},
|
|
156
|
-
},
|
|
157
|
-
},
|
|
158
|
-
plugins: [require("tailwindcss-animate")],
|
|
159
|
-
};
|
|
1
|
+
/**
|
|
2
|
+
* @pxengine/ui Tailwind Preset
|
|
3
|
+
*
|
|
4
|
+
* This file allows consumers of the @pxengine/ui library to easily inherit
|
|
5
|
+
* the custom theme, colors, and animations required for the components.
|
|
6
|
+
*
|
|
7
|
+
* Usage in tailwind.config.js:
|
|
8
|
+
* presets: [require("@pxengine/ui/config/tailwind-preset")]
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
module.exports = {
|
|
12
|
+
theme: {
|
|
13
|
+
container: {
|
|
14
|
+
center: true,
|
|
15
|
+
padding: "2rem",
|
|
16
|
+
screens: {
|
|
17
|
+
"2xl": "1400px",
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
extend: {
|
|
21
|
+
fontFamily: {
|
|
22
|
+
sans: ["Inter", "system-ui", "sans-serif"],
|
|
23
|
+
noto: ["Noto Sans", "system-ui", "sans-serif"],
|
|
24
|
+
grotesk: ["Space Grotesk", "system-ui", "sans-serif"],
|
|
25
|
+
roboto: ["Roboto", "system-ui", "sans-serif"],
|
|
26
|
+
},
|
|
27
|
+
colors: {
|
|
28
|
+
border: "hsl(var(--border))",
|
|
29
|
+
input: "hsl(var(--input))",
|
|
30
|
+
ring: "hsl(var(--ring))",
|
|
31
|
+
background: "hsl(var(--background))",
|
|
32
|
+
foreground: "hsl(var(--foreground))",
|
|
33
|
+
primary: {
|
|
34
|
+
DEFAULT: "hsl(var(--primary))",
|
|
35
|
+
foreground: "hsl(var(--primary-foreground))",
|
|
36
|
+
},
|
|
37
|
+
secondary: {
|
|
38
|
+
DEFAULT: "hsl(var(--secondary))",
|
|
39
|
+
foreground: "hsl(var(--secondary-foreground))",
|
|
40
|
+
},
|
|
41
|
+
interactive: {
|
|
42
|
+
DEFAULT: "var(--interactive)",
|
|
43
|
+
foreground: "var(--interactive-foreground)",
|
|
44
|
+
},
|
|
45
|
+
destructive: {
|
|
46
|
+
DEFAULT: "hsl(var(--destructive))",
|
|
47
|
+
foreground: "hsl(var(--destructive-foreground))",
|
|
48
|
+
},
|
|
49
|
+
muted: {
|
|
50
|
+
DEFAULT: "hsl(var(--muted))",
|
|
51
|
+
foreground: "hsl(var(--muted-foreground))",
|
|
52
|
+
},
|
|
53
|
+
accent: {
|
|
54
|
+
DEFAULT: "hsl(var(--accent))",
|
|
55
|
+
foreground: "hsl(var(--accent-foreground))",
|
|
56
|
+
},
|
|
57
|
+
popover: {
|
|
58
|
+
DEFAULT: "hsl(var(--popover))",
|
|
59
|
+
foreground: "hsl(var(--popover-foreground))",
|
|
60
|
+
},
|
|
61
|
+
card: {
|
|
62
|
+
DEFAULT: "hsl(var(--card))",
|
|
63
|
+
foreground: "hsl(var(--card-foreground))",
|
|
64
|
+
},
|
|
65
|
+
// Custom PXEngine colors
|
|
66
|
+
gray25: "var(--gray25)",
|
|
67
|
+
gray50: "var(--gray50)",
|
|
68
|
+
gray100: "var(--gray100)",
|
|
69
|
+
gray200: "var(--gray200)",
|
|
70
|
+
gray300: "var(--gray300)",
|
|
71
|
+
gray400: "var(--gray400)",
|
|
72
|
+
gray500: "var(--gray500)",
|
|
73
|
+
gray600: "var(--gray600)",
|
|
74
|
+
gray700: "var(--gray700)",
|
|
75
|
+
gray800: "var(--gray800)",
|
|
76
|
+
gray900: "var(--gray900)",
|
|
77
|
+
txtColor: "var(--txtColor)",
|
|
78
|
+
samepurple200: "#988cff",
|
|
79
|
+
purple100: "var(--purple100)",
|
|
80
|
+
purple200: "var(--purple200)",
|
|
81
|
+
purple500: "var(--purple500)",
|
|
82
|
+
purpleText: "var(--purple-text)",
|
|
83
|
+
purple50: "var(--purple50)",
|
|
84
|
+
purple20: "var(--purple20)",
|
|
85
|
+
purpleBorder2: "var(--purpleBorder2)",
|
|
86
|
+
purpleTextHover: "var(--purple-text-hover)",
|
|
87
|
+
purpleBorder: "var(--purple-border)",
|
|
88
|
+
green500: "var(--green500)",
|
|
89
|
+
grayPill: "var(--grayPill)",
|
|
90
|
+
sliderFill: "var(--slider-fill)",
|
|
91
|
+
sliderUnfill: "var(--slider-unfill)",
|
|
92
|
+
sliderButton: "var(--slider-button)",
|
|
93
|
+
lightSuccess: "#17C653",
|
|
94
|
+
lightWarning: "#DFA000",
|
|
95
|
+
success: "#5cb85c",
|
|
96
|
+
warningcolor: "var(--warning-color)",
|
|
97
|
+
label: "#071437",
|
|
98
|
+
paperBackground: "var(--paperBackground)",
|
|
99
|
+
darkModeCoal: "#0D0E12",
|
|
100
|
+
tutorialBorder: "var(--tutorialBorder)",
|
|
101
|
+
tutorialBg: "var(--tutorialBg)",
|
|
102
|
+
tutorialText: "var(--tutorialText)",
|
|
103
|
+
greenBackground: "var(--greenBackground)",
|
|
104
|
+
greenText: "var(--greenText)",
|
|
105
|
+
orangeBackground: "var(--orangeBackground)",
|
|
106
|
+
orangeText: "var(--orangeText)",
|
|
107
|
+
redBackground: "var(--redBackground)",
|
|
108
|
+
redText: "var(--redText)",
|
|
109
|
+
chart1: "var(--chart-1)",
|
|
110
|
+
chart2: "var(--chart-2)",
|
|
111
|
+
chart3: "var(--chart-3)",
|
|
112
|
+
chart4: "var(--chart-4)",
|
|
113
|
+
chart5: "var(--chart-5)",
|
|
114
|
+
primaryText: "var(--primaryText)",
|
|
115
|
+
primaryDark2: "var(--primaryDark2)",
|
|
116
|
+
purple200Dark: "var(--purple200Dark)",
|
|
117
|
+
purple20Dark: "var(--purple20Dark)",
|
|
118
|
+
purpleText1: "var(--purple-text-1)",
|
|
119
|
+
textPlaceholder: "var(--textPlaceholder)",
|
|
120
|
+
textSecondary: "var(--textSecondary)",
|
|
121
|
+
interactionBg: "var(--interaction-bg)",
|
|
122
|
+
purpleLight: "var(--purpleLight)",
|
|
123
|
+
purpleText2: "var(--purple-text-2)",
|
|
124
|
+
gold: "var(--gold)",
|
|
125
|
+
cardSurface: "var(--cardSurface)",
|
|
126
|
+
cardText: "var(--cardText)",
|
|
127
|
+
cardBorder: "var(--cardBorder)",
|
|
128
|
+
green100: "#dcfce7",
|
|
129
|
+
// Landing page colors
|
|
130
|
+
landingDarkestBlue: "var(--landing-darkest-blue)",
|
|
131
|
+
landingBlue: "var(--landing-blue)",
|
|
132
|
+
landingPurple: "var(--landing-purple)",
|
|
133
|
+
landingTextParagraph: "var(--landing-text-paragraph)",
|
|
134
|
+
landingTextHeading: "var(--landing-text-heading)",
|
|
135
|
+
landingBorderMain: "var(--landing-border-main)",
|
|
136
|
+
},
|
|
137
|
+
borderRadius: {
|
|
138
|
+
lg: "var(--radius)",
|
|
139
|
+
md: "calc(var(--radius) - 2px)",
|
|
140
|
+
sm: "calc(var(--radius) - 4px)",
|
|
141
|
+
},
|
|
142
|
+
keyframes: {
|
|
143
|
+
"accordion-down": {
|
|
144
|
+
from: { height: "0" },
|
|
145
|
+
to: { height: "var(--radix-accordion-content-height)" },
|
|
146
|
+
},
|
|
147
|
+
"accordion-up": {
|
|
148
|
+
from: { height: "var(--radix-accordion-content-height)" },
|
|
149
|
+
to: { height: "0" },
|
|
150
|
+
},
|
|
151
|
+
},
|
|
152
|
+
animation: {
|
|
153
|
+
"accordion-down": "accordion-down 0.2s ease-out",
|
|
154
|
+
"accordion-up": "accordion-up 0.2s ease-out",
|
|
155
|
+
},
|
|
156
|
+
},
|
|
157
|
+
},
|
|
158
|
+
plugins: [require("tailwindcss-animate")],
|
|
159
|
+
};
|
package/dist/index.cjs
CHANGED
|
@@ -35237,7 +35237,9 @@ var FileUpload = ({ title, accept, multiple, className, style, onFilesSelected }
|
|
|
35237
35237
|
{
|
|
35238
35238
|
className: cn(
|
|
35239
35239
|
"relative flex flex-col items-center justify-center p-8 border-2 border-dashed rounded-3xl transition-all",
|
|
35240
|
-
|
|
35240
|
+
// Default styling matches the creator-discovery cards (gold-on-charcoal,
|
|
35241
|
+
// theme-stable). The `--px-*` styled path overrides this when provided.
|
|
35242
|
+
!hasPxVars && (isDragging ? "border-gold bg-grayPill" : "border-cardBorder bg-cardSurface"),
|
|
35241
35243
|
className
|
|
35242
35244
|
),
|
|
35243
35245
|
style: wrapperStyle,
|
|
@@ -35258,7 +35260,7 @@ var FileUpload = ({ title, accept, multiple, className, style, onFilesSelected }
|
|
|
35258
35260
|
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
|
|
35259
35261
|
"div",
|
|
35260
35262
|
{
|
|
35261
|
-
className: cn("w-12 h-12 rounded-2xl flex items-center justify-center mb-4", !hasPxVars && "bg-
|
|
35263
|
+
className: cn("w-12 h-12 rounded-2xl flex items-center justify-center mb-4", !hasPxVars && "bg-gold/10 text-gold"),
|
|
35262
35264
|
style: hasPxVars ? { backgroundColor: "var(--px-accent-color)", color: "var(--px-accent-fg, white)", opacity: 0.15 } : void 0,
|
|
35263
35265
|
children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Upload, { className: "w-6 h-6", style: hasPxVars ? { color: "var(--px-accent-color)", opacity: 1 } : void 0 })
|
|
35264
35266
|
}
|
|
@@ -35266,12 +35268,12 @@ var FileUpload = ({ title, accept, multiple, className, style, onFilesSelected }
|
|
|
35266
35268
|
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
|
|
35267
35269
|
"h4",
|
|
35268
35270
|
{
|
|
35269
|
-
className: cn("font-bold mb-1", !hasPxVars && "text-
|
|
35271
|
+
className: cn("font-bold mb-1", !hasPxVars && "text-gold"),
|
|
35270
35272
|
style: hasPxVars ? { color: "var(--px-text-color, inherit)" } : void 0,
|
|
35271
35273
|
children: title
|
|
35272
35274
|
}
|
|
35273
35275
|
),
|
|
35274
|
-
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "text-sm
|
|
35276
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: cn("text-sm mb-6", !hasPxVars && "text-cardText"), children: "Drag and drop or click to browse" }),
|
|
35275
35277
|
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
|
|
35276
35278
|
"input",
|
|
35277
35279
|
{
|
|
@@ -35286,7 +35288,7 @@ var FileUpload = ({ title, accept, multiple, className, style, onFilesSelected }
|
|
|
35286
35288
|
Button,
|
|
35287
35289
|
{
|
|
35288
35290
|
variant: "outline",
|
|
35289
|
-
className: cn("rounded-full", !hasPxVars && "border-
|
|
35291
|
+
className: cn("rounded-full", !hasPxVars && "border-cardBorder bg-transparent text-gold hover:bg-gold/10 hover:text-gold"),
|
|
35290
35292
|
style: hasPxVars ? { borderColor: "var(--px-accent-color)", color: "var(--px-accent-color)" } : void 0,
|
|
35291
35293
|
children: "Select Files"
|
|
35292
35294
|
}
|
|
@@ -41552,6 +41554,7 @@ A: ${label}`);
|
|
|
41552
41554
|
return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
|
|
41553
41555
|
"div",
|
|
41554
41556
|
{
|
|
41557
|
+
"data-testid": "mcq-card",
|
|
41555
41558
|
className: cn(
|
|
41556
41559
|
"p-4 rounded-lg border border-gray400 bg-cardSurface w-full",
|
|
41557
41560
|
className
|
|
@@ -41565,6 +41568,8 @@ A: ${label}`);
|
|
|
41565
41568
|
return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
|
|
41566
41569
|
"div",
|
|
41567
41570
|
{
|
|
41571
|
+
"data-testid": "mcq-option",
|
|
41572
|
+
"data-option-key": key,
|
|
41568
41573
|
onClick: (e) => handleOptionClick(key, e),
|
|
41569
41574
|
className: cn(
|
|
41570
41575
|
"cursor-pointer rounded-lg p-3 transition-colors",
|
|
@@ -41601,6 +41606,7 @@ A: ${label}`);
|
|
|
41601
41606
|
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
|
|
41602
41607
|
"button",
|
|
41603
41608
|
{
|
|
41609
|
+
"data-testid": "mcq-continue",
|
|
41604
41610
|
onClick: handleProceed,
|
|
41605
41611
|
disabled: isContinueDisabled || isLoading || !selectedOption && !recommended,
|
|
41606
41612
|
className: cn(
|
|
@@ -43438,7 +43444,7 @@ function PlatformMetricsBanner({
|
|
|
43438
43444
|
return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
43439
43445
|
"div",
|
|
43440
43446
|
{
|
|
43441
|
-
className: "\n grid grid-cols-1 gap-3 rounded-xl py-4 px-4 shadow-sm\n md:flex md:overflow-x-auto md:gap-6 md:rounded-l-xl md:py-4 md:px-4 md:items-center md:gap-0 md:px-0 md:ml-8\n ",
|
|
43447
|
+
className: "\r\n grid grid-cols-1 gap-3 rounded-xl py-4 px-4 shadow-sm\r\n md:flex md:overflow-x-auto md:gap-6 md:rounded-l-xl md:py-4 md:px-4 md:items-center md:gap-0 md:px-0 md:ml-8\r\n ",
|
|
43442
43448
|
style: { backgroundColor: bgColor },
|
|
43443
43449
|
children: [
|
|
43444
43450
|
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "flex flex-col items-center md:min-w-0", children: [
|