@a2ui-sdk/react 0.1.0 → 0.2.0

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

@@ -1,9 +1,9 @@
-import { jsx as i } from "react/jsx-runtime";
-import { memo as t } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import { memo as i } from "react";
 import { useStringBinding 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 g, Search as O, RefreshCw as S, Printer as k, Image as y, Phone as o, User as H, CreditCard as I, Bell as U, BellOff as A, MoreHorizontal as M, MoreVertical as P, Menu as v, Mail as B, Unlock as F, Lock as N, MapPin as T, Info as b, Home as x, HelpCircle as z, Folder as D, 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 = {
+import { cn as rr } from "../../../lib/utils.js";
+const er = {
   accountCircle: _,
   add: Z,
   arrowBack: Y,
@@ -52,17 +52,17 @@ const re = {
   visibility: s,
   visibilityOff: f,
   warning: c
-}, oe = t(function({
+}, or = i(function({
   surfaceId: n,
-  component: a
+  name: a
 }) {
-  const e = l(n, a.name, "");
-  if (!e)
+  const r = l(n, a, "");
+  if (!r)
     return null;
-  const r = re[e];
-  return r ? /* @__PURE__ */ i(r, { className: ee("w-5 h-5") }) : (console.warn(`[A2UI 0.9] Unknown icon name: ${e}`), null);
+  const e = er[r];
+  return e ? /* @__PURE__ */ t(e, { className: rr("w-5 h-5") }) : (console.warn(`[A2UI 0.9] Unknown icon name: ${r}`), null);
 });
-oe.displayName = "A2UI.Icon";
+or.displayName = "A2UI.Icon";
 export {
-  oe as IconComponent
+  or as IconComponent
 };

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

@@ -1,6 +1,7 @@
-import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+import { ImageComponentProps } from '@a2ui-sdk/types/0.9/standard-catalog';
+import { A2UIComponentProps } from '../types';
 /**
  * Image component for displaying images.
  * Supports different sizes via variant and object-fit via fit property.
  */
-export declare const ImageComponent: import('react').NamedExoticComponent<A2UIComponentProps>;
+export declare const ImageComponent: import('react').NamedExoticComponent<A2UIComponentProps<ImageComponentProps>>;

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

@@ -1,43 +1,46 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { memo as s } from "react";
 import { useStringBinding as f } from "../../hooks/useDataBinding.js";
 import { cn as u } from "../../../lib/utils.js";
-const n = {
+const t = {
   contain: "object-contain",
   cover: "object-cover",
   fill: "object-fill",
   none: "object-none",
   "scale-down": "object-scale-down"
-}, g = {
+}, d = {
   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"
-}, w = s(function({
+}, g = s(function({
   surfaceId: r,
-  component: a
+  url: l,
+  fit: a = "cover",
+  variant: o,
+  weight: e
 }) {
-  const o = a, e = f(r, o.url, "");
-  if (!e)
+  const n = f(r, l, "");
+  if (!n)
     return null;
-  const i = o.fit ?? "cover", t = o.variant, c = o.weight ? { flexGrow: o.weight } : void 0, l = u(
-    n[i] || n.cover,
-    t && g[t]
+  const c = e ? { flexGrow: e } : void 0, m = u(
+    t[a] || t.cover,
+    o && d[o]
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ i(
     "img",
     {
-      src: e,
+      src: n,
       alt: "",
-      className: l,
+      className: m,
       style: c,
       loading: "lazy"
     }
   );
 });
-w.displayName = "A2UI.Image";
+g.displayName = "A2UI.Image";
 export {
-  w as ImageComponent
+  g as ImageComponent
 };

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

@@ -1,6 +1,7 @@
-import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+import { TextComponentProps } from '@a2ui-sdk/types/0.9/standard-catalog';
+import { A2UIComponentProps } from '../types';
 /**
  * Text component for displaying text content.
  * Supports different text styles via variant.
  */
-export declare const TextComponent: import('react').NamedExoticComponent<A2UIComponentProps>;
+export declare const TextComponent: import('react').NamedExoticComponent<A2UIComponentProps<TextComponentProps>>;

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

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

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

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

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

@@ -1,22 +1,23 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { jsxs as i, 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
+  url: n,
+  weight: o
 }) {
-  const o = t, r = m(e, o.url, "");
+  const r = m(e, n, "");
   if (!r)
     return null;
-  const i = o.weight ? { flexGrow: o.weight } : void 0;
-  return /* @__PURE__ */ n(
+  const t = o ? { flexGrow: o } : void 0;
+  return /* @__PURE__ */ i(
     "video",
     {
       src: r,
       controls: !0,
       className: l("w-full rounded-lg"),
-      style: i,
+      style: t,
       children: [
         /* @__PURE__ */ s("track", { kind: "captions" }),
         "Your browser does not support the video tag."

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

@@ -1,12 +1,8 @@
-import { ComponentType } from 'react';
-import { A2UIComponentProps } from '../contexts/ComponentsMapContext';
-export { ComponentRenderer, registerComponent } from './ComponentRenderer';
+/**
+ * Components exports and registry.
+ */
+export { ComponentRenderer } 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/interactive/ButtonComponent.d.ts

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

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

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

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

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

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

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

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

@@ -1,7 +1,8 @@
-import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+import { ChoicePickerComponentProps } from '@a2ui-sdk/types/0.9/standard-catalog';
+import { A2UIComponentProps } from '../types';
 /**
  * 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>;
+export declare const ChoicePickerComponent: import('react').NamedExoticComponent<A2UIComponentProps<ChoicePickerComponentProps>>;

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

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

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

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

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

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