a2ui-react 0.3.0 → 0.5.0
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 +9 -29
- package/dist/index.d.mts +32 -2
- package/dist/index.d.ts +32 -2
- package/dist/index.js +571 -13
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +556 -16
- package/dist/index.mjs.map +1 -1
- package/dist/theme.css +42 -0
- package/package.json +2 -1
package/dist/index.mjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React7 from 'react';
|
|
2
|
-
import { createContext, useContext, useCallback, useSyncExternalStore, useMemo, useState,
|
|
2
|
+
import { createContext, useContext, useCallback, useSyncExternalStore, useMemo, useState, useRef, useEffect, useId, isValidElement } from 'react';
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { Slot } from '@radix-ui/react-slot';
|
|
5
5
|
import { cva } from 'class-variance-authority';
|
|
6
6
|
import { clsx } from 'clsx';
|
|
7
7
|
import { twMerge } from 'tailwind-merge';
|
|
8
8
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
9
|
-
import { X, ChevronDown, ChevronUp, Check, Copy, Trash, Edit, Minus, Plus, Menu, Search, Settings, Download, ThumbsUp, Bookmark, Share, Star, Heart, HelpCircle, Moon, Sun, Bell, Phone, Mail, User, Home, ChevronRight, ChevronLeft, Flame, Zap, Square, Pause, Play, Cloud, icons } from 'lucide-react';
|
|
9
|
+
import { X, ChevronDown, ChevronUp, Check, Copy, Trash, Edit, Minus, Plus, Menu, Search, Settings, Download, ThumbsUp, Bookmark, Share, Star, Heart, HelpCircle, Moon, Sun, Bell, Phone, Mail, User, Home, ChevronRight, ChevronLeft, Flame, Zap, Square, Pause, Play, Cloud, icons, Loader2, Info, AlertCircle, XCircle, CheckCircle, Circle } from 'lucide-react';
|
|
10
10
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
11
11
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
12
12
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
@@ -16,6 +16,7 @@ import * as RechartsPrimitive from 'recharts';
|
|
|
16
16
|
import { AreaChart, CartesianGrid, XAxis, YAxis, Area, BarChart, Bar, Cell, LineChart, Line, PieChart, Pie } from 'recharts';
|
|
17
17
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
18
18
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
19
|
+
import ReactMarkdown from 'react-markdown';
|
|
19
20
|
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
20
21
|
|
|
21
22
|
// ../core/dist/index.mjs
|
|
@@ -663,8 +664,13 @@ function A2UISurface({
|
|
|
663
664
|
const surface = useSurface(surfaceId);
|
|
664
665
|
const [loading, setLoading] = useState(false);
|
|
665
666
|
const [error, setError] = useState(null);
|
|
667
|
+
const processedMessagesRef = useRef(null);
|
|
666
668
|
useEffect(() => {
|
|
667
669
|
if (messages) {
|
|
670
|
+
if (messages === processedMessagesRef.current) {
|
|
671
|
+
return;
|
|
672
|
+
}
|
|
673
|
+
processedMessagesRef.current = messages;
|
|
668
674
|
try {
|
|
669
675
|
for (const message of messages) {
|
|
670
676
|
processMessage(message, store);
|
|
@@ -1068,10 +1074,10 @@ function useReducedMotion() {
|
|
|
1068
1074
|
return prefersReducedMotion;
|
|
1069
1075
|
}
|
|
1070
1076
|
var variantStyles = {
|
|
1071
|
-
info: "bg-
|
|
1072
|
-
warning: "bg-
|
|
1073
|
-
error: "bg-
|
|
1074
|
-
success: "bg-
|
|
1077
|
+
info: "bg-info border-info-border text-info-foreground",
|
|
1078
|
+
warning: "bg-warning border-warning-border text-warning-foreground",
|
|
1079
|
+
error: "bg-error border-error-border text-error-foreground",
|
|
1080
|
+
success: "bg-success border-success-border text-success-foreground"
|
|
1075
1081
|
};
|
|
1076
1082
|
var variantIcons = {
|
|
1077
1083
|
info: "\u{1F4A1}",
|
|
@@ -1087,6 +1093,7 @@ var AlertRenderer = {
|
|
|
1087
1093
|
"div",
|
|
1088
1094
|
{
|
|
1089
1095
|
id,
|
|
1096
|
+
"data-a2ui-component": "Alert",
|
|
1090
1097
|
role: "alert",
|
|
1091
1098
|
className: cn("relative rounded-lg border p-4", variantStyles[variant]),
|
|
1092
1099
|
children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
|
|
@@ -1102,7 +1109,7 @@ var AlertRenderer = {
|
|
|
1102
1109
|
example: {
|
|
1103
1110
|
name: "Alert",
|
|
1104
1111
|
description: "Accessible alert component with screen reader announcement",
|
|
1105
|
-
category: "
|
|
1112
|
+
category: "display",
|
|
1106
1113
|
messages: [
|
|
1107
1114
|
{ createSurface: { surfaceId: "alert-example", root: "col-1" } },
|
|
1108
1115
|
{
|
|
@@ -1598,7 +1605,7 @@ var ProgressRenderer = {
|
|
|
1598
1605
|
const value = component.value;
|
|
1599
1606
|
const isIndeterminate = value === void 0;
|
|
1600
1607
|
const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
|
|
1601
|
-
return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-1", children: [
|
|
1608
|
+
return /* @__PURE__ */ jsxs("div", { "data-a2ui-component": "Progress", className: "w-full space-y-1", children: [
|
|
1602
1609
|
component.label && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
|
|
1603
1610
|
/* @__PURE__ */ jsx("span", { children: component.label }),
|
|
1604
1611
|
!isIndeterminate && /* @__PURE__ */ jsxs("span", { children: [
|
|
@@ -1634,7 +1641,7 @@ var ProgressRenderer = {
|
|
|
1634
1641
|
example: {
|
|
1635
1642
|
name: "Progress",
|
|
1636
1643
|
description: "Accessible progress indicator with determinate and indeterminate states",
|
|
1637
|
-
category: "
|
|
1644
|
+
category: "display",
|
|
1638
1645
|
messages: [
|
|
1639
1646
|
{ createSurface: { surfaceId: "progress-example", root: "col-1" } },
|
|
1640
1647
|
{
|
|
@@ -4737,14 +4744,14 @@ var TextScrambleRenderer = {
|
|
|
4737
4744
|
type: "TextScramble",
|
|
4738
4745
|
render: ({ component }) => {
|
|
4739
4746
|
const [displayText, setDisplayText] = useState(component.content);
|
|
4740
|
-
const
|
|
4747
|
+
const isAnimatingRef = useRef(false);
|
|
4741
4748
|
const prefersReducedMotion = useReducedMotion();
|
|
4742
4749
|
const speed = component.speed || 30;
|
|
4743
4750
|
const characters = component.characters || defaultCharacters;
|
|
4744
4751
|
const trigger = component.trigger || "mount";
|
|
4745
|
-
const scramble = () => {
|
|
4746
|
-
if (prefersReducedMotion ||
|
|
4747
|
-
|
|
4752
|
+
const scramble = useCallback(() => {
|
|
4753
|
+
if (prefersReducedMotion || isAnimatingRef.current) return;
|
|
4754
|
+
isAnimatingRef.current = true;
|
|
4748
4755
|
const target = component.content;
|
|
4749
4756
|
const length = target.length;
|
|
4750
4757
|
let iteration = 0;
|
|
@@ -4763,10 +4770,10 @@ var TextScrambleRenderer = {
|
|
|
4763
4770
|
if (iteration >= maxIterations) {
|
|
4764
4771
|
clearInterval(interval);
|
|
4765
4772
|
setDisplayText(target);
|
|
4766
|
-
|
|
4773
|
+
isAnimatingRef.current = false;
|
|
4767
4774
|
}
|
|
4768
4775
|
}, speed);
|
|
4769
|
-
};
|
|
4776
|
+
}, [component.content, characters, speed, prefersReducedMotion]);
|
|
4770
4777
|
useEffect(() => {
|
|
4771
4778
|
if (trigger === "mount") {
|
|
4772
4779
|
scramble();
|
|
@@ -7008,6 +7015,155 @@ var ModalRenderer = {
|
|
|
7008
7015
|
]
|
|
7009
7016
|
}
|
|
7010
7017
|
};
|
|
7018
|
+
var StepperRenderer = {
|
|
7019
|
+
type: "Stepper",
|
|
7020
|
+
render: ({ component, id }) => {
|
|
7021
|
+
const orientation = component.orientation || "horizontal";
|
|
7022
|
+
const activeStep = component.activeStep ?? 0;
|
|
7023
|
+
const getStepStatus = (index, step) => {
|
|
7024
|
+
if (step.status) return step.status;
|
|
7025
|
+
if (index < activeStep) return "completed";
|
|
7026
|
+
if (index === activeStep) return "current";
|
|
7027
|
+
return "pending";
|
|
7028
|
+
};
|
|
7029
|
+
const statusStyles = {
|
|
7030
|
+
pending: "border-muted-foreground/30 bg-background text-muted-foreground",
|
|
7031
|
+
current: "border-primary bg-primary text-primary-foreground",
|
|
7032
|
+
completed: "border-primary bg-primary text-primary-foreground",
|
|
7033
|
+
error: "border-destructive bg-destructive text-destructive-foreground"
|
|
7034
|
+
};
|
|
7035
|
+
const StatusIcon = ({ status }) => {
|
|
7036
|
+
switch (status) {
|
|
7037
|
+
case "completed":
|
|
7038
|
+
return /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" });
|
|
7039
|
+
case "error":
|
|
7040
|
+
return /* @__PURE__ */ jsx(X, { className: "h-4 w-4" });
|
|
7041
|
+
default:
|
|
7042
|
+
return /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" });
|
|
7043
|
+
}
|
|
7044
|
+
};
|
|
7045
|
+
return /* @__PURE__ */ jsx(
|
|
7046
|
+
"div",
|
|
7047
|
+
{
|
|
7048
|
+
id,
|
|
7049
|
+
"data-a2ui-component": "Stepper",
|
|
7050
|
+
className: cn(
|
|
7051
|
+
"flex",
|
|
7052
|
+
orientation === "horizontal" ? "flex-row items-start" : "flex-col"
|
|
7053
|
+
),
|
|
7054
|
+
role: "list",
|
|
7055
|
+
"aria-label": "Progress steps",
|
|
7056
|
+
children: component.steps.map((step, index) => {
|
|
7057
|
+
const status = getStepStatus(index, step);
|
|
7058
|
+
const isLast = index === component.steps.length - 1;
|
|
7059
|
+
return /* @__PURE__ */ jsxs(
|
|
7060
|
+
"div",
|
|
7061
|
+
{
|
|
7062
|
+
className: cn(
|
|
7063
|
+
"flex",
|
|
7064
|
+
orientation === "horizontal" ? "flex-1 flex-col items-center" : "flex-row items-start"
|
|
7065
|
+
),
|
|
7066
|
+
role: "listitem",
|
|
7067
|
+
"aria-current": status === "current" ? "step" : void 0,
|
|
7068
|
+
children: [
|
|
7069
|
+
/* @__PURE__ */ jsxs(
|
|
7070
|
+
"div",
|
|
7071
|
+
{
|
|
7072
|
+
className: cn(
|
|
7073
|
+
"flex items-center",
|
|
7074
|
+
orientation === "horizontal" ? "flex-col" : "flex-row"
|
|
7075
|
+
),
|
|
7076
|
+
children: [
|
|
7077
|
+
/* @__PURE__ */ jsx(
|
|
7078
|
+
"div",
|
|
7079
|
+
{
|
|
7080
|
+
className: cn(
|
|
7081
|
+
"flex h-8 w-8 items-center justify-center rounded-full border-2 transition-colors",
|
|
7082
|
+
statusStyles[status]
|
|
7083
|
+
),
|
|
7084
|
+
children: /* @__PURE__ */ jsx(StatusIcon, { status })
|
|
7085
|
+
}
|
|
7086
|
+
),
|
|
7087
|
+
!isLast && /* @__PURE__ */ jsx(
|
|
7088
|
+
"div",
|
|
7089
|
+
{
|
|
7090
|
+
className: cn(
|
|
7091
|
+
"transition-colors",
|
|
7092
|
+
orientation === "horizontal" ? "mt-4 h-0.5 w-full min-w-[40px]" : "ml-4 h-full min-h-[40px] w-0.5",
|
|
7093
|
+
index < activeStep ? "bg-primary" : "bg-muted-foreground/30"
|
|
7094
|
+
)
|
|
7095
|
+
}
|
|
7096
|
+
)
|
|
7097
|
+
]
|
|
7098
|
+
}
|
|
7099
|
+
),
|
|
7100
|
+
/* @__PURE__ */ jsxs(
|
|
7101
|
+
"div",
|
|
7102
|
+
{
|
|
7103
|
+
className: cn(
|
|
7104
|
+
"text-center",
|
|
7105
|
+
orientation === "horizontal" ? "mt-2" : "ml-4"
|
|
7106
|
+
),
|
|
7107
|
+
children: [
|
|
7108
|
+
/* @__PURE__ */ jsx(
|
|
7109
|
+
"div",
|
|
7110
|
+
{
|
|
7111
|
+
className: cn(
|
|
7112
|
+
"text-sm font-medium",
|
|
7113
|
+
status === "current" ? "text-foreground" : "text-muted-foreground"
|
|
7114
|
+
),
|
|
7115
|
+
children: step.label
|
|
7116
|
+
}
|
|
7117
|
+
),
|
|
7118
|
+
step.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: step.description })
|
|
7119
|
+
]
|
|
7120
|
+
}
|
|
7121
|
+
)
|
|
7122
|
+
]
|
|
7123
|
+
},
|
|
7124
|
+
step.id
|
|
7125
|
+
);
|
|
7126
|
+
})
|
|
7127
|
+
}
|
|
7128
|
+
);
|
|
7129
|
+
},
|
|
7130
|
+
example: {
|
|
7131
|
+
name: "Stepper",
|
|
7132
|
+
description: "Step-by-step progress indicator for wizards and multi-step forms",
|
|
7133
|
+
category: "container",
|
|
7134
|
+
messages: [
|
|
7135
|
+
{ createSurface: { surfaceId: "stepper-demo", root: "root" } },
|
|
7136
|
+
{
|
|
7137
|
+
updateComponents: {
|
|
7138
|
+
surfaceId: "stepper-demo",
|
|
7139
|
+
components: [
|
|
7140
|
+
{
|
|
7141
|
+
id: "root",
|
|
7142
|
+
component: {
|
|
7143
|
+
type: "Column",
|
|
7144
|
+
id: "root",
|
|
7145
|
+
children: ["stepper"]
|
|
7146
|
+
}
|
|
7147
|
+
},
|
|
7148
|
+
{
|
|
7149
|
+
id: "stepper",
|
|
7150
|
+
component: {
|
|
7151
|
+
type: "Stepper",
|
|
7152
|
+
id: "stepper",
|
|
7153
|
+
activeStep: 1,
|
|
7154
|
+
steps: [
|
|
7155
|
+
{ id: "step1", label: "Account", description: "Create your account" },
|
|
7156
|
+
{ id: "step2", label: "Profile", description: "Set up your profile" },
|
|
7157
|
+
{ id: "step3", label: "Review", description: "Review and submit" }
|
|
7158
|
+
]
|
|
7159
|
+
}
|
|
7160
|
+
}
|
|
7161
|
+
]
|
|
7162
|
+
}
|
|
7163
|
+
}
|
|
7164
|
+
]
|
|
7165
|
+
}
|
|
7166
|
+
};
|
|
7011
7167
|
var TabsRenderer = {
|
|
7012
7168
|
type: "Tabs",
|
|
7013
7169
|
render: ({ component, children }) => {
|
|
@@ -7526,6 +7682,267 @@ var ImageRenderer = {
|
|
|
7526
7682
|
]
|
|
7527
7683
|
}
|
|
7528
7684
|
};
|
|
7685
|
+
var MarkdownRenderer = {
|
|
7686
|
+
type: "Markdown",
|
|
7687
|
+
render: ({ component, data }) => {
|
|
7688
|
+
const content = component.dataPath ? data.get(component.dataPath) ?? component.text : component.text;
|
|
7689
|
+
return /* @__PURE__ */ jsx(
|
|
7690
|
+
"div",
|
|
7691
|
+
{
|
|
7692
|
+
"data-a2ui-component": "Markdown",
|
|
7693
|
+
className: cn(
|
|
7694
|
+
"prose prose-sm dark:prose-invert max-w-none",
|
|
7695
|
+
// Headings
|
|
7696
|
+
"prose-headings:font-semibold prose-headings:tracking-tight",
|
|
7697
|
+
"prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl",
|
|
7698
|
+
// Links
|
|
7699
|
+
"prose-a:text-primary prose-a:no-underline hover:prose-a:underline",
|
|
7700
|
+
// Code
|
|
7701
|
+
"prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm",
|
|
7702
|
+
"prose-pre:bg-muted prose-pre:border prose-pre:border-border",
|
|
7703
|
+
// Lists
|
|
7704
|
+
"prose-ul:my-2 prose-ol:my-2 prose-li:my-0",
|
|
7705
|
+
// Blockquotes
|
|
7706
|
+
"prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground"
|
|
7707
|
+
),
|
|
7708
|
+
children: /* @__PURE__ */ jsx(ReactMarkdown, { children: content || "" })
|
|
7709
|
+
}
|
|
7710
|
+
);
|
|
7711
|
+
},
|
|
7712
|
+
example: {
|
|
7713
|
+
name: "Markdown",
|
|
7714
|
+
description: "Renders markdown content with full formatting support",
|
|
7715
|
+
category: "display",
|
|
7716
|
+
messages: [
|
|
7717
|
+
{ createSurface: { surfaceId: "markdown-demo", root: "root" } },
|
|
7718
|
+
{
|
|
7719
|
+
updateComponents: {
|
|
7720
|
+
surfaceId: "markdown-demo",
|
|
7721
|
+
components: [
|
|
7722
|
+
{
|
|
7723
|
+
id: "root",
|
|
7724
|
+
component: {
|
|
7725
|
+
type: "Column",
|
|
7726
|
+
id: "root",
|
|
7727
|
+
children: ["md"]
|
|
7728
|
+
}
|
|
7729
|
+
},
|
|
7730
|
+
{
|
|
7731
|
+
id: "md",
|
|
7732
|
+
component: {
|
|
7733
|
+
type: "Markdown",
|
|
7734
|
+
id: "md",
|
|
7735
|
+
text: `# Markdown Demo
|
|
7736
|
+
|
|
7737
|
+
This is a **bold** and *italic* text example.
|
|
7738
|
+
|
|
7739
|
+
## Features
|
|
7740
|
+
|
|
7741
|
+
- Headings (h1-h6)
|
|
7742
|
+
- **Bold** and *italic* text
|
|
7743
|
+
- [Links](https://example.com)
|
|
7744
|
+
- Lists (ordered and unordered)
|
|
7745
|
+
|
|
7746
|
+
### Code
|
|
7747
|
+
|
|
7748
|
+
Inline \`code\` and code blocks:
|
|
7749
|
+
|
|
7750
|
+
\`\`\`javascript
|
|
7751
|
+
const hello = "world";
|
|
7752
|
+
\`\`\`
|
|
7753
|
+
|
|
7754
|
+
> Blockquotes are also supported!
|
|
7755
|
+
`
|
|
7756
|
+
}
|
|
7757
|
+
}
|
|
7758
|
+
]
|
|
7759
|
+
}
|
|
7760
|
+
}
|
|
7761
|
+
]
|
|
7762
|
+
}
|
|
7763
|
+
};
|
|
7764
|
+
var SkeletonRenderer = {
|
|
7765
|
+
type: "Skeleton",
|
|
7766
|
+
render: ({ component, id }) => {
|
|
7767
|
+
const variant = component.variant || "rectangular";
|
|
7768
|
+
const variantClasses = {
|
|
7769
|
+
text: "rounded",
|
|
7770
|
+
circular: "rounded-full",
|
|
7771
|
+
rectangular: "rounded-md"
|
|
7772
|
+
};
|
|
7773
|
+
return /* @__PURE__ */ jsx(
|
|
7774
|
+
"div",
|
|
7775
|
+
{
|
|
7776
|
+
id,
|
|
7777
|
+
"data-a2ui-component": "Skeleton",
|
|
7778
|
+
role: "status",
|
|
7779
|
+
"aria-label": "Loading content",
|
|
7780
|
+
className: cn(
|
|
7781
|
+
"animate-pulse bg-muted",
|
|
7782
|
+
variantClasses[variant]
|
|
7783
|
+
),
|
|
7784
|
+
style: {
|
|
7785
|
+
width: component.width || "100%",
|
|
7786
|
+
height: component.height || (variant === "text" ? "1rem" : "100px")
|
|
7787
|
+
},
|
|
7788
|
+
children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
|
|
7789
|
+
}
|
|
7790
|
+
);
|
|
7791
|
+
},
|
|
7792
|
+
example: {
|
|
7793
|
+
name: "Skeleton",
|
|
7794
|
+
description: "Content placeholder while loading",
|
|
7795
|
+
category: "display",
|
|
7796
|
+
messages: [
|
|
7797
|
+
{ createSurface: { surfaceId: "skeleton-demo", root: "root" } },
|
|
7798
|
+
{
|
|
7799
|
+
updateComponents: {
|
|
7800
|
+
surfaceId: "skeleton-demo",
|
|
7801
|
+
components: [
|
|
7802
|
+
{
|
|
7803
|
+
id: "root",
|
|
7804
|
+
component: {
|
|
7805
|
+
type: "Column",
|
|
7806
|
+
id: "root",
|
|
7807
|
+
children: ["card-skeleton"]
|
|
7808
|
+
}
|
|
7809
|
+
},
|
|
7810
|
+
{
|
|
7811
|
+
id: "card-skeleton",
|
|
7812
|
+
component: {
|
|
7813
|
+
type: "Row",
|
|
7814
|
+
id: "card-skeleton",
|
|
7815
|
+
children: ["avatar", "content"],
|
|
7816
|
+
alignment: "start"
|
|
7817
|
+
}
|
|
7818
|
+
},
|
|
7819
|
+
{
|
|
7820
|
+
id: "avatar",
|
|
7821
|
+
component: {
|
|
7822
|
+
type: "Skeleton",
|
|
7823
|
+
id: "avatar",
|
|
7824
|
+
variant: "circular",
|
|
7825
|
+
width: "48px",
|
|
7826
|
+
height: "48px"
|
|
7827
|
+
}
|
|
7828
|
+
},
|
|
7829
|
+
{
|
|
7830
|
+
id: "content",
|
|
7831
|
+
component: {
|
|
7832
|
+
type: "Column",
|
|
7833
|
+
id: "content",
|
|
7834
|
+
children: ["line1", "line2"]
|
|
7835
|
+
}
|
|
7836
|
+
},
|
|
7837
|
+
{
|
|
7838
|
+
id: "line1",
|
|
7839
|
+
component: {
|
|
7840
|
+
type: "Skeleton",
|
|
7841
|
+
id: "line1",
|
|
7842
|
+
variant: "text",
|
|
7843
|
+
width: "200px",
|
|
7844
|
+
height: "1rem"
|
|
7845
|
+
}
|
|
7846
|
+
},
|
|
7847
|
+
{
|
|
7848
|
+
id: "line2",
|
|
7849
|
+
component: {
|
|
7850
|
+
type: "Skeleton",
|
|
7851
|
+
id: "line2",
|
|
7852
|
+
variant: "text",
|
|
7853
|
+
width: "150px",
|
|
7854
|
+
height: "1rem"
|
|
7855
|
+
}
|
|
7856
|
+
}
|
|
7857
|
+
]
|
|
7858
|
+
}
|
|
7859
|
+
}
|
|
7860
|
+
]
|
|
7861
|
+
}
|
|
7862
|
+
};
|
|
7863
|
+
var sizeClasses = {
|
|
7864
|
+
sm: "h-4 w-4",
|
|
7865
|
+
md: "h-6 w-6",
|
|
7866
|
+
lg: "h-10 w-10"
|
|
7867
|
+
};
|
|
7868
|
+
var SpinnerRenderer = {
|
|
7869
|
+
type: "Spinner",
|
|
7870
|
+
render: ({ component, id }) => {
|
|
7871
|
+
const size = component.size || "md";
|
|
7872
|
+
return /* @__PURE__ */ jsxs(
|
|
7873
|
+
"div",
|
|
7874
|
+
{
|
|
7875
|
+
id,
|
|
7876
|
+
"data-a2ui-component": "Spinner",
|
|
7877
|
+
role: "status",
|
|
7878
|
+
"aria-label": component.label || "Loading",
|
|
7879
|
+
className: "inline-flex items-center justify-center",
|
|
7880
|
+
children: [
|
|
7881
|
+
/* @__PURE__ */ jsx(
|
|
7882
|
+
Loader2,
|
|
7883
|
+
{
|
|
7884
|
+
className: cn("animate-spin text-muted-foreground", sizeClasses[size]),
|
|
7885
|
+
"aria-hidden": "true"
|
|
7886
|
+
}
|
|
7887
|
+
),
|
|
7888
|
+
component.label && /* @__PURE__ */ jsx("span", { className: "sr-only", children: component.label })
|
|
7889
|
+
]
|
|
7890
|
+
}
|
|
7891
|
+
);
|
|
7892
|
+
},
|
|
7893
|
+
example: {
|
|
7894
|
+
name: "Spinner",
|
|
7895
|
+
description: "Loading indicator with different sizes",
|
|
7896
|
+
category: "display",
|
|
7897
|
+
messages: [
|
|
7898
|
+
{ createSurface: { surfaceId: "spinner-demo", root: "root" } },
|
|
7899
|
+
{
|
|
7900
|
+
updateComponents: {
|
|
7901
|
+
surfaceId: "spinner-demo",
|
|
7902
|
+
components: [
|
|
7903
|
+
{
|
|
7904
|
+
id: "root",
|
|
7905
|
+
component: {
|
|
7906
|
+
type: "Row",
|
|
7907
|
+
id: "root",
|
|
7908
|
+
children: ["spinner-sm", "spinner-md", "spinner-lg"],
|
|
7909
|
+
distribution: "spaceAround",
|
|
7910
|
+
alignment: "center"
|
|
7911
|
+
}
|
|
7912
|
+
},
|
|
7913
|
+
{
|
|
7914
|
+
id: "spinner-sm",
|
|
7915
|
+
component: {
|
|
7916
|
+
type: "Spinner",
|
|
7917
|
+
id: "spinner-sm",
|
|
7918
|
+
size: "sm",
|
|
7919
|
+
label: "Loading small"
|
|
7920
|
+
}
|
|
7921
|
+
},
|
|
7922
|
+
{
|
|
7923
|
+
id: "spinner-md",
|
|
7924
|
+
component: {
|
|
7925
|
+
type: "Spinner",
|
|
7926
|
+
id: "spinner-md",
|
|
7927
|
+
size: "md",
|
|
7928
|
+
label: "Loading medium"
|
|
7929
|
+
}
|
|
7930
|
+
},
|
|
7931
|
+
{
|
|
7932
|
+
id: "spinner-lg",
|
|
7933
|
+
component: {
|
|
7934
|
+
type: "Spinner",
|
|
7935
|
+
id: "spinner-lg",
|
|
7936
|
+
size: "lg",
|
|
7937
|
+
label: "Loading large"
|
|
7938
|
+
}
|
|
7939
|
+
}
|
|
7940
|
+
]
|
|
7941
|
+
}
|
|
7942
|
+
}
|
|
7943
|
+
]
|
|
7944
|
+
}
|
|
7945
|
+
};
|
|
7529
7946
|
var TextRenderer = {
|
|
7530
7947
|
type: "Text",
|
|
7531
7948
|
render: ({ component, data }) => {
|
|
@@ -7639,6 +8056,122 @@ var TextRenderer = {
|
|
|
7639
8056
|
]
|
|
7640
8057
|
}
|
|
7641
8058
|
};
|
|
8059
|
+
var variantStyles2 = {
|
|
8060
|
+
default: "bg-background border-border",
|
|
8061
|
+
success: "bg-success border-success-border text-success-foreground",
|
|
8062
|
+
error: "bg-error border-error-border text-error-foreground",
|
|
8063
|
+
warning: "bg-warning border-warning-border text-warning-foreground",
|
|
8064
|
+
info: "bg-info border-info-border text-info-foreground"
|
|
8065
|
+
};
|
|
8066
|
+
var variantIcons2 = {
|
|
8067
|
+
default: null,
|
|
8068
|
+
success: CheckCircle,
|
|
8069
|
+
error: XCircle,
|
|
8070
|
+
warning: AlertCircle,
|
|
8071
|
+
info: Info
|
|
8072
|
+
};
|
|
8073
|
+
var ToastRenderer = {
|
|
8074
|
+
type: "Toast",
|
|
8075
|
+
render: ({ component, id, onAction }) => {
|
|
8076
|
+
const variant = component.variant || "default";
|
|
8077
|
+
const Icon2 = variantIcons2[variant];
|
|
8078
|
+
return /* @__PURE__ */ jsxs(
|
|
8079
|
+
"div",
|
|
8080
|
+
{
|
|
8081
|
+
id,
|
|
8082
|
+
"data-a2ui-component": "Toast",
|
|
8083
|
+
role: "alert",
|
|
8084
|
+
"aria-live": "polite",
|
|
8085
|
+
className: cn(
|
|
8086
|
+
"pointer-events-auto relative flex w-full max-w-sm items-start gap-3 rounded-lg border p-4 shadow-lg",
|
|
8087
|
+
variantStyles2[variant]
|
|
8088
|
+
),
|
|
8089
|
+
children: [
|
|
8090
|
+
Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5 flex-shrink-0 mt-0.5", "aria-hidden": "true" }),
|
|
8091
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
|
|
8092
|
+
component.title && /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: component.title }),
|
|
8093
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: component.message }),
|
|
8094
|
+
component.actionLabel && component.action && /* @__PURE__ */ jsx(
|
|
8095
|
+
"button",
|
|
8096
|
+
{
|
|
8097
|
+
type: "button",
|
|
8098
|
+
onClick: () => onAction?.({ type: component.action, payload: { id: component.id } }),
|
|
8099
|
+
className: "text-sm font-medium text-primary hover:underline mt-2",
|
|
8100
|
+
children: component.actionLabel
|
|
8101
|
+
}
|
|
8102
|
+
)
|
|
8103
|
+
] }),
|
|
8104
|
+
/* @__PURE__ */ jsx(
|
|
8105
|
+
"button",
|
|
8106
|
+
{
|
|
8107
|
+
type: "button",
|
|
8108
|
+
onClick: () => onAction?.({ type: "toast.dismiss", payload: { id: component.id } }),
|
|
8109
|
+
className: "absolute right-2 top-2 rounded-md p-1 text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
|
|
8110
|
+
"aria-label": "Dismiss",
|
|
8111
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
|
|
8112
|
+
}
|
|
8113
|
+
)
|
|
8114
|
+
]
|
|
8115
|
+
}
|
|
8116
|
+
);
|
|
8117
|
+
},
|
|
8118
|
+
example: {
|
|
8119
|
+
name: "Toast",
|
|
8120
|
+
description: "Notification toast with variants and optional action",
|
|
8121
|
+
category: "display",
|
|
8122
|
+
messages: [
|
|
8123
|
+
{ createSurface: { surfaceId: "toast-demo", root: "root" } },
|
|
8124
|
+
{
|
|
8125
|
+
updateComponents: {
|
|
8126
|
+
surfaceId: "toast-demo",
|
|
8127
|
+
components: [
|
|
8128
|
+
{
|
|
8129
|
+
id: "root",
|
|
8130
|
+
component: {
|
|
8131
|
+
type: "Column",
|
|
8132
|
+
id: "root",
|
|
8133
|
+
children: ["toast-success", "toast-error", "toast-info"]
|
|
8134
|
+
}
|
|
8135
|
+
},
|
|
8136
|
+
{
|
|
8137
|
+
id: "toast-success",
|
|
8138
|
+
component: {
|
|
8139
|
+
type: "Toast",
|
|
8140
|
+
id: "toast-success",
|
|
8141
|
+
variant: "success",
|
|
8142
|
+
title: "Success!",
|
|
8143
|
+
message: "Your changes have been saved."
|
|
8144
|
+
}
|
|
8145
|
+
},
|
|
8146
|
+
{
|
|
8147
|
+
id: "toast-error",
|
|
8148
|
+
component: {
|
|
8149
|
+
type: "Toast",
|
|
8150
|
+
id: "toast-error",
|
|
8151
|
+
variant: "error",
|
|
8152
|
+
title: "Error",
|
|
8153
|
+
message: "Something went wrong. Please try again.",
|
|
8154
|
+
actionLabel: "Retry",
|
|
8155
|
+
action: "retry"
|
|
8156
|
+
}
|
|
8157
|
+
},
|
|
8158
|
+
{
|
|
8159
|
+
id: "toast-info",
|
|
8160
|
+
component: {
|
|
8161
|
+
type: "Toast",
|
|
8162
|
+
id: "toast-info",
|
|
8163
|
+
variant: "info",
|
|
8164
|
+
message: "New version available!",
|
|
8165
|
+
actionLabel: "Update",
|
|
8166
|
+
action: "update"
|
|
8167
|
+
}
|
|
8168
|
+
}
|
|
8169
|
+
]
|
|
8170
|
+
}
|
|
8171
|
+
}
|
|
8172
|
+
]
|
|
8173
|
+
}
|
|
8174
|
+
};
|
|
7642
8175
|
var VideoRenderer = {
|
|
7643
8176
|
type: "Video",
|
|
7644
8177
|
render: ({ component }) => {
|
|
@@ -8919,6 +9452,12 @@ var shadcnRenderers = [
|
|
|
8919
9452
|
ColumnRenderer,
|
|
8920
9453
|
// Display
|
|
8921
9454
|
TextRenderer,
|
|
9455
|
+
MarkdownRenderer,
|
|
9456
|
+
SpinnerRenderer,
|
|
9457
|
+
SkeletonRenderer,
|
|
9458
|
+
ToastRenderer,
|
|
9459
|
+
AlertRenderer,
|
|
9460
|
+
ProgressRenderer,
|
|
8922
9461
|
ImageRenderer,
|
|
8923
9462
|
IconRenderer,
|
|
8924
9463
|
DividerRenderer,
|
|
@@ -8937,6 +9476,7 @@ var shadcnRenderers = [
|
|
|
8937
9476
|
CardRenderer,
|
|
8938
9477
|
ModalRenderer,
|
|
8939
9478
|
TabsRenderer,
|
|
9479
|
+
StepperRenderer,
|
|
8940
9480
|
ListRenderer,
|
|
8941
9481
|
// Charts
|
|
8942
9482
|
PieChartRenderer,
|
|
@@ -9072,6 +9612,6 @@ function createCompleteRegistry() {
|
|
|
9072
9612
|
// src/index.ts
|
|
9073
9613
|
var version = "0.1.0";
|
|
9074
9614
|
|
|
9075
|
-
export { A2UIContext, A2UIProvider, A2UISurface, AlertRenderer, AnimatedAccordionRenderer, AnimatedAvatarGroupRenderer, AnimatedButtonOverride, AnimatedCardOverride, AnimatedCardRenderer, AnimatedCheckboxOverride, AnimatedDialogRenderer, AnimatedModalOverride, AnimatedSelectOverride, AnimatedTabsOverride, AnimatedTabsRenderer, AnimatedTextOverride, AnimatedTooltipRenderer, AreaChartRenderer, ArticleRenderer, AsideRenderer, AuroraBackgroundRenderer, BarChartRenderer, BlurRevealTextRenderer, BubbleBackgroundRenderer, Button, Checkbox, ComponentRenderer, CopyButtonRenderer, CountUpRenderer, CursorRenderer, DEFAULT_CHART_COLORS, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, FireworksBackgroundRenderer, FlipButtonRenderer, FlipCardRenderer, FooterRenderer, GlowButtonRenderer, GradientBackgroundRenderer, GradientTextRenderer, GravityStarsBackgroundRenderer, HeaderRenderer, HexagonBackgroundRenderer, HoleBackgroundRenderer, IconButtonRenderer, Input, Label, LineChartRenderer, LiquidButtonRenderer, LiveRegionRenderer, MagneticButtonRenderer, MainRenderer, MessageParseError, MorphingIconRenderer, NavRenderer, ParticlesBackgroundRenderer, PieChartRenderer, ProgressRenderer, RippleButtonRenderer, SectionRenderer, ShimmerButtonRenderer, SkipLinkRenderer, SpotlightRenderer, StarsBackgroundRenderer, Tabs, TabsContent, TabsList, TabsTrigger, TextScrambleRenderer, Textarea, ThemeTogglerButtonRenderer, TypewriterTextRenderer, a11yRenderers, allAnimatedRenderers, allRenderers, animatedOverrides, animatedRenderers, buildChartConfig, buildMessages, buttonVariants, c, chartRenderers, cn, createAccessibleRegistry, createAnimatedRegistry, createCompleteRegistry, createFullyAnimatedRegistry, createRegistry, createShadcnRegistry, createStore, createStreamParser, getChartColor, getChartData, getDataByPath, isBeginRenderingMessage, isDataModelUpdateMessage, isDeleteSurfaceMessage, isSurfaceUpdateMessage, parseJSONL, parseMessage, setDataByPath, shadcnRenderers, transformToRechartsData, useA2UI, useAction, useContainerDimensions, useDataBinding, useReducedMotion, useSurface, version };
|
|
9615
|
+
export { A2UIContext, A2UIProvider, A2UISurface, AlertRenderer, AnimatedAccordionRenderer, AnimatedAvatarGroupRenderer, AnimatedButtonOverride, AnimatedCardOverride, AnimatedCardRenderer, AnimatedCheckboxOverride, AnimatedDialogRenderer, AnimatedModalOverride, AnimatedSelectOverride, AnimatedTabsOverride, AnimatedTabsRenderer, AnimatedTextOverride, AnimatedTooltipRenderer, AreaChartRenderer, ArticleRenderer, AsideRenderer, AudioPlayerRenderer, AuroraBackgroundRenderer, BarChartRenderer, BlurRevealTextRenderer, BubbleBackgroundRenderer, Button, CardRenderer, Checkbox, ComponentRenderer, CopyButtonRenderer, CountUpRenderer, CursorRenderer, DEFAULT_CHART_COLORS, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerRenderer, FireworksBackgroundRenderer, FlipButtonRenderer, FlipCardRenderer, FooterRenderer, GlowButtonRenderer, GradientBackgroundRenderer, GradientTextRenderer, GravityStarsBackgroundRenderer, HeaderRenderer, HexagonBackgroundRenderer, HoleBackgroundRenderer, IconButtonRenderer, IconRenderer, ImageRenderer, Input, Label, LineChartRenderer, LiquidButtonRenderer, ListRenderer, LiveRegionRenderer, MagneticButtonRenderer, MainRenderer, MarkdownRenderer, MessageParseError, ModalRenderer, MorphingIconRenderer, NavRenderer, ParticlesBackgroundRenderer, PieChartRenderer, ProgressRenderer, RippleButtonRenderer, SectionRenderer, ShimmerButtonRenderer, SkeletonRenderer, SkipLinkRenderer, SpinnerRenderer, SpotlightRenderer, StarsBackgroundRenderer, StepperRenderer, Tabs, TabsContent, TabsList, TabsRenderer, TabsTrigger, TextRenderer, TextScrambleRenderer, Textarea, ThemeTogglerButtonRenderer, ToastRenderer, TypewriterTextRenderer, VideoRenderer, a11yRenderers, allAnimatedRenderers, allRenderers, animatedOverrides, animatedRenderers, buildChartConfig, buildMessages, buttonVariants, c, chartRenderers, cn, createAccessibleRegistry, createAnimatedRegistry, createCompleteRegistry, createFullyAnimatedRegistry, createRegistry, createShadcnRegistry, createStore, createStreamParser, getChartColor, getChartData, getDataByPath, isBeginRenderingMessage, isDataModelUpdateMessage, isDeleteSurfaceMessage, isSurfaceUpdateMessage, parseJSONL, parseMessage, setDataByPath, shadcnRenderers, transformToRechartsData, useA2UI, useAction, useContainerDimensions, useDataBinding, useReducedMotion, useSurface, version };
|
|
9076
9616
|
//# sourceMappingURL=index.mjs.map
|
|
9077
9617
|
//# sourceMappingURL=index.mjs.map
|