@easyops-cn/a2ui-react 0.0.1 → 0.0.3

package/dist/0.8/A2UIRenderer.d.ts

@@ -0,0 +1,49 @@
+import { ComponentType } from 'react';
+import { A2UIMessage, ActionPayload, BaseComponentProps } from './types';
+/**
+ * Type for custom component map.
+ */
+export type ComponentsMap = Map<string, ComponentType<BaseComponentProps & Record<string, unknown>>>;
+/**
+ * Props for A2UIRenderer component.
+ */
+export interface A2UIRenderProps {
+    /** Array of A2UI messages to render */
+    messages: A2UIMessage[];
+    /** Callback when an action is dispatched */
+    onAction?: (action: ActionPayload) => void;
+    /** Custom component overrides */
+    components?: ComponentsMap;
+}
+/**
+ * Main entry component for rendering A2UI messages.
+ *
+ * Processes an array of A2UIMessage objects and renders the resulting UI.
+ * Supports custom component overrides via the components prop.
+ *
+ * @param props - Component props
+ * @param props.messages - Array of A2UI messages to render
+ * @param props.onAction - Optional callback when an action is dispatched
+ * @param props.components - Optional custom component overrides
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <A2UIRenderer messages={messages} onAction={handleAction} />
+ *
+ * // With custom components
+ * const customComponents = new Map([
+ *   ['Button', CustomButton],
+ *   ['Switch', CustomSwitch],
+ * ])
+ * <A2UIRenderer
+ *   messages={messages}
+ *   onAction={handleAction}
+ *   components={customComponents}
+ * />
+ * ```
+ */
+export declare function A2UIRenderer({ messages, onAction, components, }: A2UIRenderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace A2UIRenderer {
+    var displayName: string;
+}

package/dist/0.8/A2UIRenderer.js

@@ -0,0 +1,40 @@
+import { jsx as e, Fragment as f } from "react/jsx-runtime";
+import { useEffect as p } from "react";
+import { A2UIProvider as c } from "./contexts/A2UIProvider.js";
+import { ComponentsMapProvider as a } from "./contexts/ComponentsMapContext.js";
+import { useSurfaceContext as u } from "./contexts/SurfaceContext.js";
+import { useA2UIMessageHandler as l } from "./hooks/useA2UIMessageHandler.js";
+import { componentRegistry as d, ComponentRenderer as g } from "./components/ComponentRenderer.js";
+function A({ messages: r }) {
+  const { processMessages: n, clear: o } = l(), { surfaces: t } = u();
+  p(() => {
+    o(), r && r.length > 0 && n(r);
+  }, [r, n, o]);
+  const s = Array.from(t.entries());
+  return s.length === 0 ? null : /* @__PURE__ */ e(f, { children: s.map(([i, m]) => m.root ? /* @__PURE__ */ e(
+    g,
+    {
+      surfaceId: i,
+      componentId: m.root
+    },
+    i
+  ) : null) });
+}
+function I({
+  messages: r,
+  onAction: n,
+  components: o
+}) {
+  return /* @__PURE__ */ e(c, { onAction: n, children: /* @__PURE__ */ e(
+    a,
+    {
+      components: o,
+      defaultComponents: d,
+      children: /* @__PURE__ */ e(A, { messages: r ?? [] })
+    }
+  ) });
+}
+I.displayName = "A2UI.Render";
+export {
+  I as A2UIRenderer
+};

package/dist/0.8/A2UIRenderer.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A2UIRenderer Tests
+ *
+ * Tests for the main A2UIRenderer component.
+ */
+export {};

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

@@ -0,0 +1,39 @@
+import { ComponentType } from 'react';
+import { BaseComponentProps } from '../types';
+/**
+ * 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/ComponentRenderer.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * ComponentRenderer Tests
+ *
+ * Tests for the ComponentRenderer component that routes rendering based on type.
+ */
+export {};

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

@@ -0,0 +1,18 @@
+import { BaseComponentProps } from '../types';
+/**
+ * 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 '../../types';
+/**
+ * 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 '../../types';
+/**
+ * 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 '../../types';
+/**
+ * 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,114 @@
+import { jsx as e } from "react/jsx-runtime";
+import { memo as f } from "react";
+import { useDataBinding as p } from "../../hooks/useDataBinding.js";
+import { cn as a } from "../../../lib/utils.js";
+import n from "../../../node_modules/lucide-react/dist/esm/icons/triangle-alert.js";
+import l from "../../../node_modules/lucide-react/dist/esm/icons/eye-off.js";
+import c from "../../../node_modules/lucide-react/dist/esm/icons/eye.js";
+import s from "../../../node_modules/lucide-react/dist/esm/icons/upload.js";
+import d from "../../../node_modules/lucide-react/dist/esm/icons/star-off.js";
+import h from "../../../node_modules/lucide-react/dist/esm/icons/star-half.js";
+import C from "../../../node_modules/lucide-react/dist/esm/icons/star.js";
+import u from "../../../node_modules/lucide-react/dist/esm/icons/shopping-cart.js";
+import w from "../../../node_modules/lucide-react/dist/esm/icons/share-2.js";
+import O from "../../../node_modules/lucide-react/dist/esm/icons/settings.js";
+import g from "../../../node_modules/lucide-react/dist/esm/icons/send.js";
+import k from "../../../node_modules/lucide-react/dist/esm/icons/search.js";
+import y from "../../../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
+import I from "../../../node_modules/lucide-react/dist/esm/icons/printer.js";
+import S from "../../../node_modules/lucide-react/dist/esm/icons/image.js";
+import m from "../../../node_modules/lucide-react/dist/esm/icons/phone.js";
+import A from "../../../node_modules/lucide-react/dist/esm/icons/user.js";
+import H from "../../../node_modules/lucide-react/dist/esm/icons/credit-card.js";
+import P from "../../../node_modules/lucide-react/dist/esm/icons/bell.js";
+import U from "../../../node_modules/lucide-react/dist/esm/icons/bell-off.js";
+import v from "../../../node_modules/lucide-react/dist/esm/icons/ellipsis.js";
+import M from "../../../node_modules/lucide-react/dist/esm/icons/ellipsis-vertical.js";
+import B from "../../../node_modules/lucide-react/dist/esm/icons/menu.js";
+import E from "../../../node_modules/lucide-react/dist/esm/icons/mail.js";
+import D from "../../../node_modules/lucide-react/dist/esm/icons/lock-open.js";
+import F from "../../../node_modules/lucide-react/dist/esm/icons/lock.js";
+import L from "../../../node_modules/lucide-react/dist/esm/icons/map-pin.js";
+import N from "../../../node_modules/lucide-react/dist/esm/icons/info.js";
+import T from "../../../node_modules/lucide-react/dist/esm/icons/house.js";
+import b from "../../../node_modules/lucide-react/dist/esm/icons/circle-question-mark.js";
+import x from "../../../node_modules/lucide-react/dist/esm/icons/folder.js";
+import R from "../../../node_modules/lucide-react/dist/esm/icons/heart-off.js";
+import V from "../../../node_modules/lucide-react/dist/esm/icons/heart.js";
+import j from "../../../node_modules/lucide-react/dist/esm/icons/circle-alert.js";
+import z from "../../../node_modules/lucide-react/dist/esm/icons/calendar-days.js";
+import Q from "../../../node_modules/lucide-react/dist/esm/icons/pencil.js";
+import X from "../../../node_modules/lucide-react/dist/esm/icons/download.js";
+import $ from "../../../node_modules/lucide-react/dist/esm/icons/trash-2.js";
+import q from "../../../node_modules/lucide-react/dist/esm/icons/x.js";
+import G from "../../../node_modules/lucide-react/dist/esm/icons/check.js";
+import J from "../../../node_modules/lucide-react/dist/esm/icons/camera.js";
+import K from "../../../node_modules/lucide-react/dist/esm/icons/calendar.js";
+import W from "../../../node_modules/lucide-react/dist/esm/icons/paperclip.js";
+import Y from "../../../node_modules/lucide-react/dist/esm/icons/arrow-right.js";
+import Z from "../../../node_modules/lucide-react/dist/esm/icons/arrow-left.js";
+import _ from "../../../node_modules/lucide-react/dist/esm/icons/plus.js";
+import rr from "../../../node_modules/lucide-react/dist/esm/icons/circle-user.js";
+const or = {
+  accountCircle: rr,
+  add: _,
+  arrowBack: Z,
+  arrowForward: Y,
+  attachFile: W,
+  calendarToday: K,
+  call: m,
+  camera: J,
+  check: G,
+  close: q,
+  delete: $,
+  download: X,
+  edit: Q,
+  event: z,
+  error: j,
+  favorite: V,
+  favoriteOff: R,
+  folder: x,
+  help: b,
+  home: T,
+  info: N,
+  locationOn: L,
+  lock: F,
+  lockOpen: D,
+  mail: E,
+  menu: B,
+  moreVert: M,
+  moreHoriz: v,
+  notificationsOff: U,
+  notifications: P,
+  payment: H,
+  person: A,
+  phone: m,
+  photo: S,
+  print: I,
+  refresh: y,
+  search: k,
+  send: g,
+  settings: O,
+  share: w,
+  shoppingCart: u,
+  star: C,
+  starHalf: h,
+  starOff: d,
+  upload: s,
+  visibility: c,
+  visibilityOff: l,
+  warning: n
+}, mr = f(function({
+  surfaceId: i,
+  name: t
+}) {
+  const r = p(i, t, "");
+  if (!r)
+    return null;
+  const o = or[r];
+  return o ? /* @__PURE__ */ e(o, { className: a("w-5 h-5") }) : (console.warn(`A2UI: Unknown icon name: ${r}`), null);
+});
+mr.displayName = "A2UI.Icon";
+export {
+  mr as IconComponent
+};

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

@@ -0,0 +1,6 @@
+import { ImageComponentProps } from '../../types';
+/**
+ * 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 '../../types';
+/**
+ * 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 '../../types';
+/**
+ * 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/display.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Display Components Tests
+ *
+ * Tests for TextComponent, ImageComponent, IconComponent, VideoComponent,
+ * AudioPlayerComponent, and DividerComponent.
+ */
+export {};

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 '../../types';
+/**
+ * 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 '../../types';
+/**
+ * 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 '../../types';
+/**
+ * DateTimeInput component - date/time picker using Calendar and Popover.
+ */
+export declare const DateTimeInputComponent: import('react').NamedExoticComponent<DateTimeInputComponentProps>;