@a2ui-sdk/react 0.0.0

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

@@ -0,0 +1,31 @@
+import { jsx as h } from "react/jsx-runtime";
+import { memo as x } from "react";
+import { useStringBinding as l } from "../../hooks/useDataBinding.js";
+import { cn as c } from "../../../lib/utils.js";
+const e = {
+  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"
+}, d = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  caption: "span",
+  body: "p"
+}, p = x(function({
+  surfaceId: n,
+  component: i
+}) {
+  const t = i, s = l(n, t.text, ""), o = t.variant ?? "body", m = c(e[o] || e.body), r = d[o] || "p", a = t.weight ? { flexGrow: t.weight } : void 0;
+  return /* @__PURE__ */ h(r, { className: m, style: a, children: s });
+});
+p.displayName = "A2UI.Text";
+export {
+  p as TextComponent
+};

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

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

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * Display components exports.
+ */
+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.9/components/index.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType } from 'react';
+import { A2UIComponentProps } from '../contexts/ComponentsMapContext';
+export { ComponentRenderer, registerComponent } from './ComponentRenderer';
+export { UnknownComponent } from './UnknownComponent';
+export { TextComponent, ImageComponent, IconComponent, VideoComponent, AudioPlayerComponent, DividerComponent, } from './display';
+export { RowComponent, ColumnComponent, ListComponent, CardComponent, TabsComponent, ModalComponent, TemplateRenderer, } from './layout';
+export { ButtonComponent, TextFieldComponent, CheckBoxComponent, ChoicePickerComponent, SliderComponent, DateTimeInputComponent, } from './interactive';
+/**
+ * Default component registry mapping component type names to React components.
+ * Contains all 18 standard catalog components.
+ */
+export declare const componentRegistry: Record<string, ComponentType<A2UIComponentProps>>;

package/dist/0.9/components/index.js

@@ -0,0 +1,68 @@
+import { TextComponent as o } from "./display/TextComponent.js";
+import { ImageComponent as m } from "./display/ImageComponent.js";
+import { IconComponent as e } from "./display/IconComponent.js";
+import { VideoComponent as t } from "./display/VideoComponent.js";
+import { AudioPlayerComponent as r } from "./display/AudioPlayerComponent.js";
+import { DividerComponent as n } from "./display/DividerComponent.js";
+import { RowComponent as p } from "./layout/RowComponent.js";
+import { ColumnComponent as i } from "./layout/ColumnComponent.js";
+import { ListComponent as C } from "./layout/ListComponent.js";
+import { CardComponent as f } from "./layout/CardComponent.js";
+import { TabsComponent as d } from "./layout/TabsComponent.js";
+import { ModalComponent as a } from "./layout/ModalComponent.js";
+import { TemplateRenderer as z } from "./layout/TemplateRenderer.js";
+import { ButtonComponent as l } from "./interactive/ButtonComponent.js";
+import { TextFieldComponent as c } from "./interactive/TextFieldComponent.js";
+import { CheckBoxComponent as x } from "./interactive/CheckBoxComponent.js";
+import { ChoicePickerComponent as T } from "./interactive/ChoicePickerComponent.js";
+import { SliderComponent as u } from "./interactive/SliderComponent.js";
+import { DateTimeInputComponent as s } from "./interactive/DateTimeInputComponent.js";
+import { ComponentRenderer as G } from "./ComponentRenderer.js";
+import { UnknownComponent as J } from "./UnknownComponent.js";
+const U = {
+  // Display components (6)
+  Text: o,
+  Image: m,
+  Icon: e,
+  Video: t,
+  AudioPlayer: r,
+  Divider: n,
+  // Layout components (6)
+  Row: p,
+  Column: i,
+  List: C,
+  Card: f,
+  Tabs: d,
+  Modal: a,
+  // Interactive components (6)
+  Button: l,
+  TextField: c,
+  CheckBox: x,
+  ChoicePicker: T,
+  Slider: u,
+  DateTimeInput: s
+};
+export {
+  r as AudioPlayerComponent,
+  l as ButtonComponent,
+  f as CardComponent,
+  x as CheckBoxComponent,
+  T as ChoicePickerComponent,
+  i as ColumnComponent,
+  G as ComponentRenderer,
+  s as DateTimeInputComponent,
+  n as DividerComponent,
+  e as IconComponent,
+  m as ImageComponent,
+  C as ListComponent,
+  a as ModalComponent,
+  p as RowComponent,
+  u as SliderComponent,
+  d as TabsComponent,
+  z as TemplateRenderer,
+  o as TextComponent,
+  c as TextFieldComponent,
+  J as UnknownComponent,
+  t as VideoComponent,
+  U as componentRegistry
+};

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

@@ -0,0 +1,6 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * Button component - triggers actions on click.
+ * When checks are defined and fail, the button is disabled.
+ */
+export declare const ButtonComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

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

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

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

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

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

@@ -0,0 +1,41 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { memo as f, useCallback as k } from "react";
+import { useStringBinding as C, useFormBinding as g } from "../../hooks/useDataBinding.js";
+import { useValidation as v } from "../../hooks/useValidation.js";
+import { Checkbox as u } from "../../../components/ui/checkbox.js";
+import { Label as b } from "../../../components/ui/label.js";
+import { cn as B } from "../../../lib/utils.js";
+const N = f(function({
+  surfaceId: t,
+  component: m
+}) {
+  const e = m, i = C(t, e.label, ""), [a, n] = g(
+    t,
+    e.value,
+    !1
+  ), { valid: h, errors: r } = v(t, e.checks), d = k(
+    (c) => {
+      n(c);
+    },
+    [n]
+  ), l = `checkbox-${e.id}`, p = e.weight ? { flexGrow: e.weight } : void 0;
+  return /* @__PURE__ */ s("div", { className: B("flex flex-col gap-1"), style: p, children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ o(
+        u,
+        {
+          id: l,
+          checked: a,
+          onCheckedChange: d,
+          "aria-invalid": !h
+        }
+      ),
+      i && /* @__PURE__ */ o(b, { htmlFor: l, className: "cursor-pointer", children: i })
+    ] }),
+    r.length > 0 && /* @__PURE__ */ o("div", { className: "text-sm text-destructive ml-6", children: r.map((c, x) => /* @__PURE__ */ o("p", { children: c }, x)) })
+  ] });
+});
+N.displayName = "A2UI.CheckBox";
+export {
+  N as CheckBoxComponent
+};

package/dist/0.9/components/interactive/ChoicePickerComponent.d.ts

@@ -0,0 +1,7 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * ChoicePicker component - choice picker input.
+ * When variant === 'mutuallyExclusive', renders as a dropdown.
+ * When variant === 'multipleSelection' or undefined, renders as checkboxes.
+ */
+export declare const ChoicePickerComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

package/dist/0.9/components/interactive/ChoicePickerComponent.js

@@ -0,0 +1,80 @@
+import { jsxs as m, jsx as e, Fragment as V } from "react/jsx-runtime";
+import { memo as F, useCallback as S } from "react";
+import { useStringBinding as k, useFormBinding as P } from "../../hooks/useDataBinding.js";
+import { useValidation as w } from "../../hooks/useValidation.js";
+import { Select as T, SelectTrigger as $, SelectValue as j, SelectContent as B, SelectItem as L } from "../../../components/ui/select.js";
+import { Checkbox as E } from "../../../components/ui/checkbox.js";
+import { Label as p } from "../../../components/ui/label.js";
+import { cn as v } from "../../../lib/utils.js";
+function b({
+  surfaceId: g,
+  label: c
+}) {
+  const d = k(g, c, "");
+  return /* @__PURE__ */ e(V, { children: d });
+}
+const G = F(function({
+  surfaceId: c,
+  component: d
+}) {
+  const r = d, o = k(c, r.label, ""), x = (r.variant ?? "multipleSelection") === "mutuallyExclusive", { valid: f, errors: s } = w(c, r.checks), [t, a] = P(
+    c,
+    r.value,
+    x ? "" : []
+  ), y = S(
+    (l) => {
+      a(l);
+    },
+    [a]
+  ), N = S(
+    (l, i) => {
+      const n = Array.isArray(t) ? t : t ? [t] : [];
+      a(i ? [...n, l] : n.filter((u) => u !== l));
+    },
+    [t, a]
+  ), h = `choicepicker-${r.id}`, C = r.weight ? { flexGrow: r.weight } : void 0;
+  if (!r.options || r.options.length === 0)
+    return null;
+  if (x) {
+    const l = Array.isArray(t) ? t[0] || "" : t;
+    return /* @__PURE__ */ m("div", { className: v("flex flex-col gap-2"), style: C, children: [
+      o && /* @__PURE__ */ e(p, { htmlFor: h, children: o }),
+      /* @__PURE__ */ m(T, { value: l, onValueChange: y, children: [
+        /* @__PURE__ */ e(
+          $,
+          {
+            id: h,
+            className: v(!f && "border-destructive"),
+            "aria-invalid": !f,
+            children: /* @__PURE__ */ e(j, { placeholder: "Select an option" })
+          }
+        ),
+        /* @__PURE__ */ e(B, { children: r.options.map((i) => /* @__PURE__ */ e(L, { value: i.value, children: /* @__PURE__ */ e(b, { surfaceId: c, label: i.label }) }, i.value)) })
+      ] }),
+      s.length > 0 && /* @__PURE__ */ e("div", { className: "text-sm text-destructive", children: s.map((i, n) => /* @__PURE__ */ e("p", { children: i }, n)) })
+    ] });
+  }
+  const A = Array.isArray(t) ? t : t ? [t] : [];
+  return /* @__PURE__ */ m("div", { className: v("flex flex-col gap-2"), style: C, children: [
+    o && /* @__PURE__ */ e(p, { children: o }),
+    r.options.map((l) => {
+      const i = A.includes(l.value), n = `${h}-${l.value}`;
+      return /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(
+          E,
+          {
+            id: n,
+            checked: i,
+            onCheckedChange: (u) => N(l.value, u === !0)
+          }
+        ),
+        /* @__PURE__ */ e(p, { htmlFor: n, className: "cursor-pointer", children: /* @__PURE__ */ e(b, { surfaceId: c, label: l.label }) })
+      ] }, l.value);
+    }),
+    s.length > 0 && /* @__PURE__ */ e("div", { className: "text-sm text-destructive", children: s.map((l, i) => /* @__PURE__ */ e("p", { children: l }, i)) })
+  ] });
+});
+G.displayName = "A2UI.ChoicePicker";
+export {
+  G as ChoicePickerComponent
+};

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

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

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

@@ -0,0 +1,50 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { memo as k, useCallback as w } from "react";
+import { CalendarIcon as y, ClockIcon as T } from "lucide-react";
+import { useStringBinding as C, useFormBinding as D } from "../../hooks/useDataBinding.js";
+import { useValidation as I } from "../../hooks/useValidation.js";
+import { cn as m } from "../../../lib/utils.js";
+import { Label as N } from "../../../components/ui/label.js";
+const V = k(function({
+  surfaceId: i,
+  component: p
+}) {
+  const e = p, a = C(i, e.label, ""), r = e.enableDate ?? !0, u = e.enableTime ?? !1, { valid: o, errors: l } = I(i, e.checks), [b, d] = D(
+    i,
+    e.value,
+    ""
+  ), f = w(
+    (n) => {
+      d(n.target.value);
+    },
+    [d]
+  ), s = `datetime-${e.id}`, g = r && u ? "datetime-local" : r ? "date" : "time", v = r ? y : T, h = e.weight ? { flexGrow: e.weight } : void 0;
+  return /* @__PURE__ */ c("div", { className: m("flex flex-col gap-2"), style: h, children: [
+    a && /* @__PURE__ */ t(N, { htmlFor: s, children: a }),
+    /* @__PURE__ */ c("div", { className: "relative", children: [
+      /* @__PURE__ */ t(
+        "input",
+        {
+          id: s,
+          type: g,
+          value: b,
+          onChange: f,
+          "aria-invalid": !o,
+          className: m(
+            "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",
+            !o && "border-destructive"
+          )
+        }
+      ),
+      /* @__PURE__ */ t(v, { className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" })
+    ] }),
+    l.length > 0 && /* @__PURE__ */ t("div", { className: "text-sm text-destructive", children: l.map((n, x) => /* @__PURE__ */ t("p", { children: n }, x)) })
+  ] });
+});
+V.displayName = "A2UI.DateTimeInput";
+export {
+  V as DateTimeInputComponent
+};

package/dist/0.9/components/interactive/SliderComponent.d.ts

@@ -0,0 +1,6 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * Slider component - range slider input.
+ * Note: In 0.9, minValue/maxValue are renamed to min/max.
+ */
+export declare const SliderComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

package/dist/0.9/components/interactive/SliderComponent.js

@@ -0,0 +1,47 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { memo as g, useCallback as v } from "react";
+import { useStringBinding as S, useFormBinding as b } from "../../hooks/useDataBinding.js";
+import { useValidation as C } from "../../hooks/useValidation.js";
+import { Slider as N } from "../../../components/ui/slider.js";
+import { Label as w } from "../../../components/ui/label.js";
+import { cn as y } from "../../../lib/utils.js";
+const V = g(function({
+  surfaceId: n,
+  component: p
+}) {
+  const e = p, o = S(n, e.label, ""), l = e.min ?? 0, r = e.max ?? 100, { valid: h, errors: s } = C(n, e.checks), [m, a] = b(
+    n,
+    e.value,
+    l
+  ), f = v(
+    (t) => {
+      t.length > 0 && a(t[0]);
+    },
+    [a]
+  ), d = `slider-${e.id}`, x = e.weight ? { flexGrow: e.weight } : void 0;
+  return /* @__PURE__ */ c("div", { className: y("flex flex-col gap-2 py-2"), style: x, children: [
+    o && /* @__PURE__ */ i(w, { htmlFor: d, children: o }),
+    /* @__PURE__ */ i(
+      N,
+      {
+        id: d,
+        value: [m],
+        onValueChange: f,
+        min: l,
+        max: r,
+        step: 1,
+        "aria-invalid": !h
+      }
+    ),
+    /* @__PURE__ */ c("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ i("span", { children: l }),
+      /* @__PURE__ */ i("span", { className: "font-medium text-foreground", children: m }),
+      /* @__PURE__ */ i("span", { children: r })
+    ] }),
+    s.length > 0 && /* @__PURE__ */ i("div", { className: "text-sm text-destructive", children: s.map((t, u) => /* @__PURE__ */ i("p", { children: t }, u)) })
+  ] });
+});
+V.displayName = "A2UI.Slider";
+export {
+  V as SliderComponent
+};

package/dist/0.9/components/interactive/TextFieldComponent.d.ts

@@ -0,0 +1,5 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * TextField component - text input with label.
+ */
+export declare const TextFieldComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

package/dist/0.9/components/interactive/TextFieldComponent.js

@@ -0,0 +1,57 @@
+import { jsxs as T, jsx as t } from "react/jsx-runtime";
+import { memo as f, useCallback as b } from "react";
+import { useStringBinding as C, useFormBinding as F } from "../../hooks/useDataBinding.js";
+import { useValidation as y } from "../../hooks/useValidation.js";
+import { Input as N } from "../../../components/ui/input.js";
+import { Textarea as w } from "../../../components/ui/textarea.js";
+import { Label as j } from "../../../components/ui/label.js";
+import { cn as a } from "../../../lib/utils.js";
+const k = {
+  shortText: "text",
+  longText: "text",
+  // Uses textarea
+  number: "number",
+  obscured: "password"
+}, B = f(function({
+  surfaceId: n,
+  component: x
+}) {
+  const e = x, s = C(n, e.label, ""), [l, m] = F(
+    n,
+    e.value,
+    ""
+  ), { valid: o, errors: c } = y(n, e.checks), d = b(
+    (r) => {
+      m(r.target.value);
+    },
+    [m]
+  ), i = `textfield-${e.id}`, p = e.variant ?? "shortText", u = k[p] || "text", h = p === "longText", g = e.weight ? { flexGrow: e.weight } : void 0;
+  return /* @__PURE__ */ T("div", { className: a("flex flex-col gap-2"), style: g, children: [
+    s && /* @__PURE__ */ t(j, { htmlFor: i, children: s }),
+    h ? /* @__PURE__ */ t(
+      w,
+      {
+        id: i,
+        value: l,
+        onChange: d,
+        className: a("min-h-[100px]", !o && "border-destructive"),
+        "aria-invalid": !o
+      }
+    ) : /* @__PURE__ */ t(
+      N,
+      {
+        id: i,
+        type: u,
+        value: l,
+        onChange: d,
+        className: a(!o && "border-destructive"),
+        "aria-invalid": !o
+      }
+    ),
+    c.length > 0 && /* @__PURE__ */ t("div", { className: "text-sm text-destructive", children: c.map((r, v) => /* @__PURE__ */ t("p", { children: r }, v)) })
+  ] });
+});
+B.displayName = "A2UI.TextField";
+export {
+  B as TextFieldComponent
+};

package/dist/0.9/components/interactive/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Interactive components exports.
+ */
+export { ButtonComponent } from './ButtonComponent';
+export { TextFieldComponent } from './TextFieldComponent';
+export { CheckBoxComponent } from './CheckBoxComponent';
+export { ChoicePickerComponent } from './ChoicePickerComponent';
+export { SliderComponent } from './SliderComponent';
+export { DateTimeInputComponent } from './DateTimeInputComponent';

package/dist/0.9/components/layout/CardComponent.d.ts

@@ -0,0 +1,5 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * Card component - container with card styling.
+ */
+export declare const CardComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

package/dist/0.9/components/layout/CardComponent.js

@@ -0,0 +1,15 @@
+import { jsx as r } from "react/jsx-runtime";
+import { memo as d } from "react";
+import { Card as n, CardContent as i } from "../../../components/ui/card.js";
+import { ComponentRenderer as p } from "../ComponentRenderer.js";
+const c = d(function({
+  surfaceId: t,
+  component: m
+}) {
+  const o = m, e = o.weight ? { flexGrow: o.weight } : void 0;
+  return o.child ? /* @__PURE__ */ r(n, { style: e, children: /* @__PURE__ */ r(i, { className: "p-4", children: /* @__PURE__ */ r(p, { surfaceId: t, componentId: o.child }) }) }) : /* @__PURE__ */ r(n, { style: e });
+});
+c.displayName = "A2UI.Card";
+export {
+  c as CardComponent
+};

package/dist/0.9/components/layout/ColumnComponent.d.ts

@@ -0,0 +1,6 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * Column component - vertical flex container.
+ * Supports both static children and template binding for dynamic children.
+ */
+export declare const ColumnComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

package/dist/0.9/components/layout/ColumnComponent.js

@@ -0,0 +1,50 @@
+import { jsx as n } from "react/jsx-runtime";
+import { memo as f } from "react";
+import { useDataModel as u } from "../../hooks/useDataBinding.js";
+import { useScope as y } from "../../contexts/ScopeContext.js";
+import { cn as d } from "../../../lib/utils.js";
+import { ComponentRenderer as j } from "../ComponentRenderer.js";
+import { TemplateRenderer as h } from "./TemplateRenderer.js";
+const C = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  spaceBetween: "justify-between",
+  spaceAround: "justify-around",
+  spaceEvenly: "justify-evenly",
+  stretch: "justify-stretch"
+}, g = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+}, v = f(function({
+  surfaceId: o,
+  component: m
+}) {
+  const e = m, c = u(o), { basePath: a } = y(), l = e.justify ?? "start", p = e.align ?? "stretch", r = d(
+    "flex flex-col gap-4",
+    C[l],
+    g[p]
+  ), s = e.weight ? { flexGrow: e.weight } : void 0, t = e.children;
+  return Array.isArray(t) ? /* @__PURE__ */ n("div", { className: r, style: s, children: t.map((i) => /* @__PURE__ */ n(
+    j,
+    {
+      surfaceId: o,
+      componentId: i
+    },
+    i
+  )) }) : t && typeof t == "object" && "componentId" in t ? /* @__PURE__ */ n("div", { className: r, style: s, children: /* @__PURE__ */ n(
+    h,
+    {
+      surfaceId: o,
+      template: t,
+      dataModel: c,
+      basePath: a
+    }
+  ) }) : /* @__PURE__ */ n("div", { className: r, style: s });
+});
+v.displayName = "A2UI.Column";
+export {
+  v as ColumnComponent
+};

package/dist/0.9/components/layout/ListComponent.d.ts

@@ -0,0 +1,17 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * List component - displays children in a list layout.
+ * Supports both static children and template binding for dynamic children.
+ *
+ * @example
+ * // Static children
+ * { component: "List", id: "list-1", children: ["item-1", "item-2"] }
+ *
+ * // Template binding (dynamic children)
+ * {
+ *   component: "List",
+ *   id: "list-1",
+ *   children: { componentId: "item-template", path: "/items" }
+ * }
+ */
+export declare const ListComponent: import('react').NamedExoticComponent<A2UIComponentProps>;