@a2ui-sdk/react 0.0.0

package/dist/0.8/A2UIRenderer.d.ts

@@ -0,0 +1,31 @@
+import { ActionHandler } from '@a2ui-sdk/types/0.8';
+/**
+ * Props for A2UIRenderer.
+ */
+export interface A2UIRendererProps {
+    /** Callback when an action is dispatched */
+    onAction?: ActionHandler;
+}
+/**
+ * Component for rendering A2UI surfaces.
+ *
+ * Renders all surfaces from the A2UI context. Must be used within an A2UIProvider.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <A2UIProvider messages={messages}>
+ *   <A2UIRenderer onAction={handleAction} />
+ * </A2UIProvider>
+ *
+ * // With custom middleware for hooks access
+ * <A2UIProvider messages={messages}>
+ *   <MyCustomComponent />
+ *   <A2UIRenderer onAction={handleAction} />
+ * </A2UIProvider>
+ * ```
+ */
+export declare function A2UIRenderer({ onAction }: A2UIRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace A2UIRenderer {
+    var displayName: string;
+}

package/dist/0.8/A2UIRenderer.js

@@ -0,0 +1,19 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useSurfaceContext as m } from "./contexts/SurfaceContext.js";
+import { ActionProvider as f } from "./contexts/ActionContext.js";
+import { ComponentRenderer as p } from "./components/ComponentRenderer.js";
+function u({ onAction: t }) {
+  const { surfaces: i } = m(), r = Array.from(i.entries());
+  return r.length === 0 ? null : /* @__PURE__ */ n(f, { onAction: t, children: r.map(([e, o]) => o.root ? /* @__PURE__ */ n(
+    p,
+    {
+      surfaceId: e,
+      componentId: o.root
+    },
+    e
+  ) : null) });
+}
+u.displayName = "A2UI.Renderer";
+export {
+  u as A2UIRenderer
+};

package/dist/0.8/components/ComponentRenderer.d.ts

@@ -0,0 +1,39 @@
+import { ComponentType } from 'react';
+import { BaseComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * Component registry mapping component type names to React components.
+ */
+export declare const componentRegistry: Record<string, ComponentType<BaseComponentProps & Record<string, unknown>>>;
+/**
+ * Props for ComponentRenderer.
+ */
+export interface ComponentRendererProps {
+    surfaceId: string;
+    componentId: string;
+}
+/**
+ * Renders a component based on its type from the component registry.
+ * Supports custom component overrides via ComponentsMapContext.
+ *
+ * @example
+ * ```tsx
+ * // Render a component by ID
+ * <ComponentRenderer surfaceId="surface-1" componentId="text-1" />
+ * ```
+ */
+export declare const ComponentRenderer: import('react').NamedExoticComponent<ComponentRendererProps>;
+/**
+ * Registers a custom component type.
+ *
+ * @param type - The component type name
+ * @param component - The React component to register
+ *
+ * @example
+ * ```tsx
+ * registerComponent('CustomChart', ({ surfaceId, data }) => {
+ *   const chartData = useDataBinding(surfaceId, data, []);
+ *   return <Chart data={chartData} />;
+ * });
+ * ```
+ */
+export declare function registerComponent(type: string, component: ComponentType<BaseComponentProps & Record<string, unknown>>): void;

package/dist/0.8/components/ComponentRenderer.js

@@ -0,0 +1,76 @@
+import { jsx as C } from "react/jsx-runtime";
+import { memo as f, useContext as l } from "react";
+import { useComponent as s } from "../hooks/useComponent.js";
+import { ComponentsMapContext as u } from "../contexts/ComponentsMapContext.js";
+import { TextComponent as a } from "./display/TextComponent.js";
+import { ImageComponent as c } from "./display/ImageComponent.js";
+import { IconComponent as d } from "./display/IconComponent.js";
+import { VideoComponent as x } from "./display/VideoComponent.js";
+import { AudioPlayerComponent as T } from "./display/AudioPlayerComponent.js";
+import { DividerComponent as h } from "./display/DividerComponent.js";
+import { RowComponent as w } from "./layout/RowComponent.js";
+import { ColumnComponent as g } from "./layout/ColumnComponent.js";
+import { ListComponent as y } from "./layout/ListComponent.js";
+import { CardComponent as A } from "./layout/CardComponent.js";
+import { TabsComponent as M } from "./layout/TabsComponent.js";
+import { ModalComponent as R } from "./layout/ModalComponent.js";
+import { ButtonComponent as I } from "./interactive/ButtonComponent.js";
+import { CheckBoxComponent as U } from "./interactive/CheckBoxComponent.js";
+import { TextFieldComponent as B } from "./interactive/TextFieldComponent.js";
+import { DateTimeInputComponent as D } from "./interactive/DateTimeInputComponent.js";
+import { MultipleChoiceComponent as $ } from "./interactive/MultipleChoiceComponent.js";
+import { SliderComponent as b } from "./interactive/SliderComponent.js";
+const k = {
+  // Display components
+  Text: a,
+  Image: c,
+  Icon: d,
+  Video: x,
+  AudioPlayer: T,
+  Divider: h,
+  // Layout components
+  Row: w,
+  Column: g,
+  List: y,
+  Card: A,
+  Tabs: M,
+  Modal: R,
+  // Interactive components
+  Button: I,
+  CheckBox: U,
+  TextField: B,
+  DateTimeInput: D,
+  MultipleChoice: $,
+  Slider: b
+}, j = f(function({
+  surfaceId: t,
+  componentId: o
+}) {
+  const e = s(t, o), r = l(u);
+  if (!e)
+    return console.warn(
+      `A2UI: Component not found: ${o} on surface ${t}`
+    ), null;
+  const p = Object.entries(e.component);
+  if (p.length === 0)
+    return console.warn(`A2UI: Component ${o} has no type definition`), null;
+  const [m, i] = p[0];
+  let n;
+  return r ? n = r.getComponent(m) : n = k[m], n ? (
+    // eslint-disable-next-line react-hooks/static-components
+    /* @__PURE__ */ C(
+      n,
+      {
+        surfaceId: t,
+        componentId: o,
+        weight: e.weight,
+        ...i
+      }
+    )
+  ) : (console.warn(`A2UI: Unknown component type: ${m}`), null);
+});
+j.displayName = "A2UI.ComponentRenderer";
+export {
+  j as ComponentRenderer,
+  k as componentRegistry
+};

package/dist/0.8/components/UnknownComponent.d.ts

@@ -0,0 +1,18 @@
+import { BaseComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * Props for UnknownComponent.
+ */
+export interface UnknownComponentProps extends BaseComponentProps {
+    /** The unknown component type name */
+    componentType: string;
+}
+/**
+ * Placeholder component for unknown types in development mode.
+ *
+ * Displays a warning box with the unknown component type name
+ * to help developers identify configuration issues.
+ */
+export declare function UnknownComponent({ componentId, componentType, }: UnknownComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UnknownComponent {
+    var displayName: string;
+}

package/dist/0.8/components/display/AudioPlayerComponent.d.ts

@@ -0,0 +1,5 @@
+import { AudioPlayerComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * AudioPlayer component for playing audio content.
+ */
+export declare const AudioPlayerComponent: import('react').NamedExoticComponent<AudioPlayerComponentProps>;

package/dist/0.8/components/display/AudioPlayerComponent.js

@@ -0,0 +1,19 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { memo as m } from "react";
+import { useDataBinding as n } from "../../hooks/useDataBinding.js";
+import { cn as a } from "../../../lib/utils.js";
+const u = m(function({
+  surfaceId: o,
+  url: i,
+  description: l
+}) {
+  const e = n(o, i, ""), r = n(o, l, "");
+  return e ? /* @__PURE__ */ s("div", { className: a("flex flex-col gap-2"), children: [
+    r && /* @__PURE__ */ t("p", { className: "text-sm text-muted-foreground", children: r }),
+    /* @__PURE__ */ t("audio", { src: e, controls: !0, className: "w-full", children: "Your browser does not support the audio element." })
+  ] }) : null;
+});
+u.displayName = "A2UI.AudioPlayer";
+export {
+  u as AudioPlayerComponent
+};

package/dist/0.8/components/display/DividerComponent.d.ts

@@ -0,0 +1,5 @@
+import { DividerComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * Divider component for visual separation.
+ */
+export declare const DividerComponent: import('react').NamedExoticComponent<DividerComponentProps>;

package/dist/0.8/components/display/DividerComponent.js

@@ -0,0 +1,18 @@
+import { jsx as r } from "react/jsx-runtime";
+import { memo as t } from "react";
+import { Separator as e } from "../../../components/ui/separator.js";
+const i = t(function({
+  axis: o = "horizontal"
+}) {
+  return /* @__PURE__ */ r(
+    e,
+    {
+      orientation: o,
+      className: o === "vertical" ? "self-stretch h-auto!" : "w-full"
+    }
+  );
+});
+i.displayName = "A2UI.Divider";
+export {
+  i as DividerComponent
+};

package/dist/0.8/components/display/IconComponent.d.ts

@@ -0,0 +1,5 @@
+import { IconComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * Icon component for displaying icons from the A2UI icon set.
+ */
+export declare const IconComponent: import('react').NamedExoticComponent<IconComponentProps>;

package/dist/0.8/components/display/IconComponent.js

@@ -0,0 +1,68 @@
+import { jsx as t } from "react/jsx-runtime";
+import { memo as i } from "react";
+import { useDataBinding as l } from "../../hooks/useDataBinding.js";
+import { AlertTriangle as c, EyeOff as f, Eye as s, Upload as m, StarOff as p, StarHalf as d, Star as h, ShoppingCart as C, Share2 as u, Settings as w, Send as O, Search as g, RefreshCw as k, Printer as y, Image as H, Phone as o, User as I, CreditCard as S, Bell as U, BellOff as A, MoreHorizontal as M, MoreVertical as P, Menu as v, Mail as B, Unlock as D, Lock as F, MapPin as N, Info as T, Home as b, HelpCircle as x, Folder as z, HeartOff as E, Heart as L, AlertCircle as R, CalendarDays as V, Pencil as j, Download as X, Trash2 as $, X as q, Check as G, Camera as J, Calendar as K, Paperclip as Q, ArrowRight as W, ArrowLeft as Y, Plus as Z, UserCircle as _ } from "lucide-react";
+import { cn as ee } from "../../../lib/utils.js";
+const re = {
+  accountCircle: _,
+  add: Z,
+  arrowBack: Y,
+  arrowForward: W,
+  attachFile: Q,
+  calendarToday: K,
+  call: o,
+  camera: J,
+  check: G,
+  close: q,
+  delete: $,
+  download: X,
+  edit: j,
+  event: V,
+  error: R,
+  favorite: L,
+  favoriteOff: E,
+  folder: z,
+  help: x,
+  home: b,
+  info: T,
+  locationOn: N,
+  lock: F,
+  lockOpen: D,
+  mail: B,
+  menu: v,
+  moreVert: P,
+  moreHoriz: M,
+  notificationsOff: A,
+  notifications: U,
+  payment: S,
+  person: I,
+  phone: o,
+  photo: H,
+  print: y,
+  refresh: k,
+  search: g,
+  send: O,
+  settings: w,
+  share: u,
+  shoppingCart: C,
+  star: h,
+  starHalf: d,
+  starOff: p,
+  upload: m,
+  visibility: s,
+  visibilityOff: f,
+  warning: c
+}, oe = i(function({
+  surfaceId: a,
+  name: n
+}) {
+  const e = l(a, n, "");
+  if (!e)
+    return null;
+  const r = re[e];
+  return r ? /* @__PURE__ */ t(r, { className: ee("w-5 h-5") }) : (console.warn(`A2UI: Unknown icon name: ${e}`), null);
+});
+oe.displayName = "A2UI.Icon";
+export {
+  oe as IconComponent
+};

package/dist/0.8/components/display/ImageComponent.d.ts

@@ -0,0 +1,6 @@
+import { ImageComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * Image component for displaying images.
+ * Supports different sizes via usageHint and object-fit via fit property.
+ */
+export declare const ImageComponent: import('react').NamedExoticComponent<ImageComponentProps>;

package/dist/0.8/components/display/ImageComponent.js

@@ -0,0 +1,36 @@
+import { jsx as l } from "react/jsx-runtime";
+import { memo as m } from "react";
+import { useDataBinding as i } from "../../hooks/useDataBinding.js";
+import { cn as s } from "../../../lib/utils.js";
+const t = {
+  contain: "object-contain",
+  cover: "object-cover",
+  fill: "object-fill",
+  none: "object-none",
+  "scale-down": "object-scale-down"
+}, u = {
+  icon: "w-6 h-6",
+  avatar: "w-10 h-10 rounded-full",
+  smallFeature: "w-16 h-16",
+  mediumFeature: "w-32 h-32",
+  largeFeature: "w-48 h-48",
+  header: "w-full h-48"
+}, f = m(function({
+  surfaceId: n,
+  url: a,
+  fit: r = "cover",
+  usageHint: e
+}) {
+  const o = i(n, a, "");
+  if (!o)
+    return null;
+  const c = s(
+    t[r] || t.cover,
+    e && u[e]
+  );
+  return /* @__PURE__ */ l("img", { src: o, alt: "", className: c, loading: "lazy" });
+});
+f.displayName = "A2UI.Image";
+export {
+  f as ImageComponent
+};

package/dist/0.8/components/display/TextComponent.d.ts

@@ -0,0 +1,6 @@
+import { TextComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * Text component for displaying text content.
+ * Supports basic Markdown formatting and different text styles via usageHint.
+ */
+export declare const TextComponent: import('react').NamedExoticComponent<TextComponentProps>;

package/dist/0.8/components/display/TextComponent.js

@@ -0,0 +1,32 @@
+import { jsx as h } from "react/jsx-runtime";
+import { memo as x } from "react";
+import { useDataBinding as l } from "../../hooks/useDataBinding.js";
+import { cn as r } from "../../../lib/utils.js";
+const o = {
+  h1: "text-3xl font-bold tracking-tight",
+  h2: "text-2xl font-semibold tracking-tight",
+  h3: "text-xl font-semibold",
+  h4: "text-lg font-semibold",
+  h5: "text-base font-semibold",
+  caption: "text-sm text-muted-foreground",
+  body: "text-base"
+}, a = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  caption: "span",
+  body: "p"
+}, c = x(function({
+  surfaceId: e,
+  text: n,
+  usageHint: t = "body"
+}) {
+  const m = l(e, n, ""), s = r(o[t] || o.body), i = a[t] || "p";
+  return /* @__PURE__ */ h(i, { className: s, children: m });
+});
+c.displayName = "A2UI.Text";
+export {
+  c as TextComponent
+};

package/dist/0.8/components/display/VideoComponent.d.ts

@@ -0,0 +1,5 @@
+import { VideoComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * Video component for displaying video content.
+ */
+export declare const VideoComponent: import('react').NamedExoticComponent<VideoComponentProps>;

package/dist/0.8/components/display/VideoComponent.js

@@ -0,0 +1,18 @@
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { memo as i } from "react";
+import { useDataBinding as s } from "../../hooks/useDataBinding.js";
+import { cn as m } from "../../../lib/utils.js";
+const d = i(function({
+  surfaceId: r,
+  url: e
+}) {
+  const o = s(r, e, "");
+  return o ? /* @__PURE__ */ t("video", { src: o, controls: !0, className: m("w-full rounded-lg"), children: [
+    /* @__PURE__ */ n("track", { kind: "captions" }),
+    "Your browser does not support the video tag."
+  ] }) : null;
+});
+d.displayName = "A2UI.Video";
+export {
+  d as VideoComponent
+};

package/dist/0.8/components/display/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A2UI React Renderer - Display Components
+ */
+export { TextComponent } from './TextComponent';
+export { ImageComponent } from './ImageComponent';
+export { IconComponent } from './IconComponent';
+export { VideoComponent } from './VideoComponent';
+export { AudioPlayerComponent } from './AudioPlayerComponent';
+export { DividerComponent } from './DividerComponent';

package/dist/0.8/components/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A2UI React Renderer - Components Exports
+ */
+export { ComponentRenderer, registerComponent } from './ComponentRenderer';
+export * from './display';
+export * from './layout';
+export * from './interactive';

package/dist/0.8/components/interactive/ButtonComponent.d.ts

@@ -0,0 +1,5 @@
+import { ButtonComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * Button component - triggers actions on click.
+ */
+export declare const ButtonComponent: import('react').NamedExoticComponent<ButtonComponentProps>;

package/dist/0.8/components/interactive/ButtonComponent.js

@@ -0,0 +1,29 @@
+import { jsx as m } from "react/jsx-runtime";
+import { memo as p, useCallback as s } from "react";
+import { useDispatchAction as c } from "../../hooks/useDispatchAction.js";
+import { Button as u } from "../../../components/ui/button.js";
+import { ComponentRenderer as a } from "../ComponentRenderer.js";
+const f = p(function({
+  surfaceId: t,
+  componentId: n,
+  child: e,
+  primary: r = !1,
+  action: o
+}) {
+  const i = c(), l = s(() => {
+    o && i(t, n, o);
+  }, [i, t, n, o]);
+  return /* @__PURE__ */ m(
+    u,
+    {
+      variant: r ? "default" : "outline",
+      onClick: l,
+      className: "inline-flex items-center justify-center",
+      children: e ? /* @__PURE__ */ m(a, { surfaceId: t, componentId: e }) : "Button"
+    }
+  );
+});
+f.displayName = "A2UI.Button";
+export {
+  f as ButtonComponent
+};

package/dist/0.8/components/interactive/CheckBoxComponent.d.ts

@@ -0,0 +1,5 @@
+import { CheckBoxComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * CheckBox component - checkbox input with label.
+ */
+export declare const CheckBoxComponent: import('react').NamedExoticComponent<CheckBoxComponentProps>;

package/dist/0.8/components/interactive/CheckBoxComponent.js

@@ -0,0 +1,27 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { memo as p, useCallback as C } from "react";
+import { useDataBinding as d, useFormBinding as x } from "../../hooks/useDataBinding.js";
+import { Checkbox as k } from "../../../components/ui/checkbox.js";
+import { Label as f } from "../../../components/ui/label.js";
+import { cn as b } from "../../../lib/utils.js";
+const g = p(function({
+  surfaceId: e,
+  componentId: m,
+  label: r,
+  value: s
+}) {
+  const o = d(e, r, ""), [i, n] = x(e, s, !1), a = C(
+    (h) => {
+      n(h);
+    },
+    [n]
+  ), c = `checkbox-${m}`;
+  return /* @__PURE__ */ l("div", { className: b("flex items-center gap-3"), children: [
+    /* @__PURE__ */ t(k, { id: c, checked: i, onCheckedChange: a }),
+    o && /* @__PURE__ */ t(f, { htmlFor: c, className: "cursor-pointer", children: o })
+  ] });
+});
+g.displayName = "A2UI.CheckBox";
+export {
+  g as CheckBoxComponent
+};

package/dist/0.8/components/interactive/DateTimeInputComponent.d.ts

@@ -0,0 +1,5 @@
+import { DateTimeInputComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * DateTimeInput component - date/time picker using native HTML5 inputs.
+ */
+export declare const DateTimeInputComponent: import('react').NamedExoticComponent<DateTimeInputComponentProps>;

package/dist/0.8/components/interactive/DateTimeInputComponent.js

@@ -0,0 +1,46 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { memo as x, useCallback as h } from "react";
+import { CalendarIcon as k, ClockIcon as v } from "lucide-react";
+import { useDataBinding as w, useFormBinding as y } from "../../hooks/useDataBinding.js";
+import { cn as l } from "../../../lib/utils.js";
+import { Label as C } from "../../../components/ui/label.js";
+const I = x(function({
+  surfaceId: t,
+  componentId: d,
+  label: c,
+  value: s,
+  enableDate: e = !0,
+  enableTime: p = !1
+}) {
+  const r = w(t, c, ""), [m, n] = y(t, s, ""), u = h(
+    (g) => {
+      n(g.target.value);
+    },
+    [n]
+  ), o = `datetime-${d}`, f = e && p ? "datetime-local" : e ? "date" : "time", b = e ? k : v;
+  return /* @__PURE__ */ a("div", { className: l("flex flex-col gap-2"), children: [
+    r && /* @__PURE__ */ i(C, { htmlFor: o, children: r }),
+    /* @__PURE__ */ a("div", { className: "relative", children: [
+      /* @__PURE__ */ i(
+        "input",
+        {
+          id: o,
+          type: f,
+          value: m,
+          onChange: u,
+          className: l(
+            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+            "pr-9 [&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-0 [&::-webkit-calendar-picker-indicator]:w-9 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+          )
+        }
+      ),
+      /* @__PURE__ */ i(b, { className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" })
+    ] })
+  ] });
+});
+I.displayName = "A2UI.DateTimeInput";
+export {
+  I as DateTimeInputComponent
+};

package/dist/0.8/components/interactive/MultipleChoiceComponent.d.ts

@@ -0,0 +1,7 @@
+import { MultipleChoiceComponentProps } from '@a2ui-sdk/types/0.8';
+/**
+ * MultipleChoice component - dropdown/select input.
+ * When maxAllowedSelections === 1, renders as a dropdown.
+ * When maxAllowedSelections > 1 or undefined, renders as checkboxes for multi-select.
+ */
+export declare const MultipleChoiceComponent: import('react').NamedExoticComponent<MultipleChoiceComponentProps>;