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/dist/index.mjs CHANGED
@@ -1,12 +1,12 @@
1
1
  import * as React7 from 'react';
2
- import { createContext, useContext, useCallback, useSyncExternalStore, useMemo, useState, useEffect, useRef, useId, isValidElement } from 'react';
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-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-100",
1072
- warning: "bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-100",
1073
- error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-100",
1074
- success: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950 dark:border-green-800 dark:text-green-100"
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: "a11y",
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: "a11y",
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 [isAnimating, setIsAnimating] = useState(false);
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 || isAnimating) return;
4747
- setIsAnimating(true);
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
- setIsAnimating(false);
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