pxengine 0.1.99 → 0.1.100
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 +24 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +24 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +121 -121
- package/dist/registry.json +0 -19331
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
|
@@ -38665,7 +38665,7 @@ var InsightSummaryCard = ({
|
|
|
38665
38665
|
children: [
|
|
38666
38666
|
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("h3", { className: "text-base font-semibold text-foreground", children: title }),
|
|
38667
38667
|
summary ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: "mt-2 text-sm text-muted-foreground leading-relaxed", children: summary }) : null,
|
|
38668
|
-
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "mt-4 space-y-2", children: insights.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
|
|
38668
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "mt-4 space-y-2", children: (Array.isArray(insights) ? insights : []).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
|
|
38669
38669
|
"div",
|
|
38670
38670
|
{
|
|
38671
38671
|
className: "rounded-xl border border-border/70 bg-background/50 px-3 py-2",
|
|
@@ -43638,7 +43638,7 @@ function PlatformMetricsBanner({
|
|
|
43638
43638
|
return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
43639
43639
|
"div",
|
|
43640
43640
|
{
|
|
43641
|
-
className: "\
|
|
43641
|
+
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 ",
|
|
43642
43642
|
style: { backgroundColor: bgColor },
|
|
43643
43643
|
children: [
|
|
43644
43644
|
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "flex flex-col items-center md:min-w-0", children: [
|
|
@@ -45052,9 +45052,28 @@ var hcLoadPromise = null;
|
|
|
45052
45052
|
function loadHighcharts() {
|
|
45053
45053
|
if (hcSingleton) return Promise.resolve(hcSingleton);
|
|
45054
45054
|
if (hcLoadPromise) return hcLoadPromise;
|
|
45055
|
-
hcLoadPromise = import("highcharts").then((m) => {
|
|
45056
|
-
|
|
45057
|
-
|
|
45055
|
+
hcLoadPromise = import("highcharts").then(async (m) => {
|
|
45056
|
+
const HC = m.default ?? m;
|
|
45057
|
+
const moduleLoaders = [
|
|
45058
|
+
() => import("highcharts/highcharts-more"),
|
|
45059
|
+
() => import("highcharts/highcharts-3d"),
|
|
45060
|
+
() => import("highcharts/modules/funnel"),
|
|
45061
|
+
() => import("highcharts/modules/sankey"),
|
|
45062
|
+
() => import("highcharts/modules/networkgraph"),
|
|
45063
|
+
() => import("highcharts/modules/heatmap"),
|
|
45064
|
+
() => import("highcharts/modules/treemap"),
|
|
45065
|
+
() => import("highcharts/modules/solid-gauge")
|
|
45066
|
+
];
|
|
45067
|
+
for (const load of moduleLoaders) {
|
|
45068
|
+
try {
|
|
45069
|
+
const mod = await load();
|
|
45070
|
+
const init = mod?.default ?? mod;
|
|
45071
|
+
if (typeof init === "function") init(HC);
|
|
45072
|
+
} catch {
|
|
45073
|
+
}
|
|
45074
|
+
}
|
|
45075
|
+
hcSingleton = HC;
|
|
45076
|
+
return HC;
|
|
45058
45077
|
});
|
|
45059
45078
|
return hcLoadPromise;
|
|
45060
45079
|
}
|