clom-renderer 1.0.0

package/dist/ClomRenderer.d.ts

@@ -0,0 +1,9 @@
+import { ClomOutput } from './types';
+interface Props {
+    /** Raw CLOM JSON output. Discriminated by the `interaction` field. */
+    data: ClomOutput;
+    onSubmit: (text: string) => void;
+    locked: boolean;
+}
+export declare function ClomRenderer({ data, onSubmit, locked }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/index.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`),t=require(`react/jsx-runtime`);var n={card:`_card_148uw_16`,field:`_field_148uw_30`,fieldLabel:`_fieldLabel_148uw_36`,required:`_required_148uw_42`,fieldInput:`_fieldInput_148uw_46`,fieldTextarea:`_fieldTextarea_148uw_47`,optionsRow:`_optionsRow_148uw_65`,optionBtn:`_optionBtn_148uw_71`,checkList:`_checkList_148uw_89`,checkItem:`_checkItem_148uw_95`,checkbox:`_checkbox_148uw_104`,submitBtn:`_submitBtn_148uw_112`,interactionTitle:`_interactionTitle_148uw_133`,hint:`_hint_148uw_140`,errorText:`_errorText_148uw_146`,addressGrid:`_addressGrid_148uw_154`,otpGrid:`_otpGrid_148uw_162`,otpBox:`_otpBox_148uw_167`,starRow:`_starRow_148uw_188`,star:`_star_148uw_188`,starActive:`_starActive_148uw_205`,fileZone:`_fileZone_148uw_212`,fileHint:`_fileHint_148uw_226`,fileName:`_fileName_148uw_231`,cardGrid:`_cardGrid_148uw_239`,cardItem:`_cardItem_148uw_245`,cardImage:`_cardImage_148uw_265`,cardBody:`_cardBody_148uw_271`,cardTitle:`_cardTitle_148uw_278`,cardSubtitle:`_cardSubtitle_148uw_284`,cardMeta:`_cardMeta_148uw_289`,cardPrice:`_cardPrice_148uw_296`,cardBadge:`_cardBadge_148uw_302`,confirmSummary:`_confirmSummary_148uw_313`,confirmKey:`_confirmKey_148uw_319`,confirmVal:`_confirmVal_148uw_327`,confirmActions:`_confirmActions_148uw_332`,cancelBtn:`_cancelBtn_148uw_339`,timeline:`_timeline_148uw_359`,timelineStep:`_timelineStep_148uw_365`,tl_completed:`_tl_completed_148uw_383`,timelineDot:`_timelineDot_148uw_387`,tl_active:`_tl_active_148uw_404`,timelineContent:`_timelineContent_148uw_409`,timelineLabel:`_timelineLabel_148uw_415`,tl_pending:`_tl_pending_148uw_421`,timelineTs:`_timelineTs_148uw_425`,slotGrid:`_slotGrid_148uw_432`,slot:`_slot_148uw_432`,slotActive:`_slotActive_148uw_456`,tableWrap:`_tableWrap_148uw_464`,dataTable:`_dataTable_148uw_470`,stepperProgress:`_stepperProgress_148uw_498`,stepperDot:`_stepperDot_148uw_505`,stepperDone:`_stepperDone_148uw_513`,stepperCurrent:`_stepperCurrent_148uw_517`,stepperLabel:`_stepperLabel_148uw_523`,stepperNav:`_stepperNav_148uw_530`};function r({data:e,onSubmit:n,locked:r}){if(r)return null;let _=e;switch(_.interaction){case`form`:return(0,t.jsx)(i,{title:_.title,fields:_.fields,onSubmit:n});case`address`:return(0,t.jsx)(i,{title:_.title??`Delivery Address`,fields:_.fields,onSubmit:n});case`select`:return(0,t.jsx)(a,{options:_.options,onSubmit:n});case`multiselect`:return(0,t.jsx)(o,{options:_.options,onSubmit:n});case`date_picker`:return(0,t.jsx)(s,{label:_.label,minDate:_.min_date,maxDate:_.max_date,onSubmit:n});case`otp`:return(0,t.jsx)(c,{label:_.label,length:_.length??6,hint:_.hint,onSubmit:n});case`rating`:return(0,t.jsx)(l,{label:_.label,max:_.max??5,labels:_.labels,onSubmit:n});case`file_upload`:return(0,t.jsx)(u,{label:_.label,accept:_.accept,maxMb:_.max_mb??10,onSubmit:n});case`card_grid`:return(0,t.jsx)(d,{title:_.title,cards:_.cards,onSubmit:n});case`confirmation_card`:return(0,t.jsx)(f,{title:_.title,summary:_.summary,actions:_.actions,onSubmit:n});case`timeline`:return(0,t.jsx)(p,{title:_.title,steps:_.steps});case`slot_picker`:return(0,t.jsx)(m,{title:_.title,slots:_.slots,onSubmit:n});case`data_table`:return(0,t.jsx)(h,{title:_.title,columns:_.columns,rows:_.rows});case`stepper`:return(0,t.jsx)(g,{title:_.title,steps:_.steps,currentStep:_.current_step,onSubmit:n});default:return null}}function i({title:r,fields:i,onSubmit:a}){let[o,s]=(0,e.useState)(()=>Object.fromEntries(i.map(e=>[e.key,e.prefilled_value??``])));function c(){let e=i.map(e=>`${e.label}: ${o[e.key]??``}`).filter((e,t)=>o[i[t].key]?.trim());e.length!==0&&a(e.join(`
+`))}let l=i.filter(e=>e.required).every(e=>o[e.key]?.trim());return(0,t.jsxs)(`div`,{className:n.card,children:[r&&(0,t.jsx)(`p`,{className:n.interactionTitle,children:r}),(0,t.jsx)(`div`,{className:n.addressGrid,children:i.map(e=>(0,t.jsxs)(`div`,{className:n.field,children:[(0,t.jsxs)(`label`,{className:n.fieldLabel,children:[e.label,e.required&&(0,t.jsx)(`span`,{className:n.required,children:` *`})]}),e.type===`textarea`?(0,t.jsx)(`textarea`,{className:n.fieldTextarea,rows:3,value:o[e.key]??``,onChange:t=>s(n=>({...n,[e.key]:t.target.value}))}):(0,t.jsx)(`input`,{className:n.fieldInput,type:e.type===`date_picker`?`date`:e.type===`file_upload`?`file`:e.type,value:o[e.key]??``,onChange:t=>s(n=>({...n,[e.key]:t.target.value}))})]},e.key))}),(0,t.jsx)(`button`,{className:n.submitBtn,onClick:c,disabled:!l,children:`Send`})]})}function a({options:e,onSubmit:r}){return(0,t.jsx)(`div`,{className:n.card,children:(0,t.jsx)(`div`,{className:n.optionsRow,children:e.map(e=>(0,t.jsx)(`button`,{className:n.optionBtn,onClick:()=>r(e),children:e},e))})})}function o({options:r,onSubmit:i}){let[a,o]=(0,e.useState)(new Set);function s(e){o(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}return(0,t.jsxs)(`div`,{className:n.card,children:[(0,t.jsx)(`div`,{className:n.checkList,children:r.map(e=>(0,t.jsxs)(`label`,{className:n.checkItem,children:[(0,t.jsx)(`input`,{type:`checkbox`,checked:a.has(e),onChange:()=>s(e),className:n.checkbox}),e]},e))}),(0,t.jsx)(`button`,{className:n.submitBtn,onClick:()=>i([...a].join(`, `)),disabled:a.size===0,children:`Confirm`})]})}function s({label:r,minDate:i,maxDate:a,onSubmit:o}){let[s,c]=(0,e.useState)(``);return(0,t.jsxs)(`div`,{className:n.card,children:[(0,t.jsx)(`label`,{className:n.fieldLabel,children:r}),(0,t.jsx)(`input`,{type:`date`,className:n.fieldInput,value:s,min:i,max:a,onChange:e=>c(e.target.value)}),(0,t.jsx)(`button`,{className:n.submitBtn,onClick:()=>o(`${r}: ${s}`),disabled:!s,children:`Confirm`})]})}function c({label:r,length:i,hint:a,onSubmit:o}){let[s,c]=(0,e.useState)(Array(i).fill(``)),l=(0,e.useRef)([]);function u(e,t){let n=t.replace(/\D/g,``).slice(-1),r=[...s];r[e]=n,c(r),n&&e<i-1&&l.current[e+1]?.focus()}function d(e,t){t.key===`Backspace`&&!s[e]&&e>0&&l.current[e-1]?.focus()}function f(e){let t=e.clipboardData.getData(`text`).replace(/\D/g,``).slice(0,i);t.length>0&&(c([...t.split(``),...Array(i-t.length).fill(``)]),l.current[Math.min(t.length,i-1)]?.focus()),e.preventDefault()}let p=s.join(``);return(0,t.jsxs)(`div`,{className:n.card,children:[(0,t.jsx)(`p`,{className:n.fieldLabel,children:r}),a&&(0,t.jsx)(`p`,{className:n.hint,children:a}),(0,t.jsx)(`div`,{className:n.otpGrid,onPaste:f,children:s.map((e,r)=>(0,t.jsx)(`input`,{ref:e=>{l.current[r]=e},className:n.otpBox,type:`text`,inputMode:`numeric`,maxLength:1,value:e,onChange:e=>u(r,e.target.value),onKeyDown:e=>d(r,e)},r))}),(0,t.jsx)(`button`,{className:n.submitBtn,onClick:()=>o(`${r}: ${p}`),disabled:p.length<i,children:`Verify`})]})}function l({label:r,max:i,labels:a,onSubmit:o}){let[s,c]=(0,e.useState)(0),[l,u]=(0,e.useState)(0);function d(e){u(e),o(`${r}: ${e}/${i}${a?.[e-1]?` (${a[e-1]})`:``}`)}return(0,t.jsxs)(`div`,{className:n.card,children:[(0,t.jsx)(`p`,{className:n.fieldLabel,children:r}),(0,t.jsx)(`div`,{className:n.starRow,children:Array.from({length:i},(e,t)=>t+1).map(e=>(0,t.jsx)(`button`,{className:`${n.star} ${e<=(s||l)?n.starActive:``}`,onMouseEnter:()=>c(e),onMouseLeave:()=>c(0),onClick:()=>d(e),"aria-label":`${e} star${e===1?``:`s`}`,children:`★`},e))}),a&&s>0&&(0,t.jsx)(`p`,{className:n.hint,children:a[s-1]})]})}function u({label:r,accept:i,maxMb:a,onSubmit:o}){let[s,c]=(0,e.useState)(null),[l,u]=(0,e.useState)(null),d=(0,e.useRef)(null);function f(e){if(e.size>a*1024*1024){u(`File must be under ${a} MB`);return}u(null),c(e.name)}function p(e){let t=e.target.files?.[0];t&&f(t)}function m(e){e.preventDefault();let t=e.dataTransfer.files?.[0];t&&f(t)}return(0,t.jsxs)(`div`,{className:n.card,children:[(0,t.jsx)(`p`,{className:n.fieldLabel,children:r}),(0,t.jsxs)(`div`,{className:n.fileZone,onClick:()=>d.current?.click(),onDragOver:e=>e.preventDefault(),onDrop:m,children:[(0,t.jsx)(`input`,{ref:d,type:`file`,accept:i,style:{display:`none`},onChange:p}),s?(0,t.jsx)(`span`,{className:n.fileName,children:s}):(0,t.jsx)(`span`,{className:n.fileHint,children:`Tap to choose or drag a file here`})]}),l&&(0,t.jsx)(`p`,{className:n.errorText,children:l}),(0,t.jsx)(`button`,{className:n.submitBtn,onClick:()=>o(`${r}: ${s}`),disabled:!s,children:`Upload`})]})}function d({title:e,cards:r,onSubmit:i}){return(0,t.jsxs)(`div`,{className:n.card,children:[e&&(0,t.jsx)(`p`,{className:n.interactionTitle,children:e}),(0,t.jsx)(`div`,{className:n.cardGrid,children:r.map(e=>(0,t.jsxs)(`button`,{className:n.cardItem,onClick:()=>i(`Selected: ${e.title}`),children:[e.image&&(0,t.jsx)(`img`,{src:e.image,alt:e.title,className:n.cardImage}),(0,t.jsxs)(`div`,{className:n.cardBody,children:[(0,t.jsx)(`span`,{className:n.cardTitle,children:e.title}),e.subtitle&&(0,t.jsx)(`span`,{className:n.cardSubtitle,children:e.subtitle}),(0,t.jsxs)(`div`,{className:n.cardMeta,children:[e.price&&(0,t.jsx)(`span`,{className:n.cardPrice,children:e.price}),e.badge&&(0,t.jsx)(`span`,{className:n.cardBadge,children:e.badge})]})]})]},e.id))})]})}function f({title:e,summary:r,actions:i,onSubmit:a}){return(0,t.jsxs)(`div`,{className:n.card,children:[e&&(0,t.jsx)(`p`,{className:n.interactionTitle,children:e}),(0,t.jsx)(`table`,{className:n.confirmSummary,children:(0,t.jsx)(`tbody`,{children:Object.entries(r).map(([e,r])=>(0,t.jsxs)(`tr`,{children:[(0,t.jsx)(`td`,{className:n.confirmKey,children:e}),(0,t.jsx)(`td`,{className:n.confirmVal,children:r})]},e))})}),(0,t.jsx)(`div`,{className:n.confirmActions,children:i.map(e=>(0,t.jsx)(`button`,{className:e.value===`cancel`?n.cancelBtn:n.submitBtn,onClick:()=>a(e.label),children:e.label},e.value))})]})}function p({title:e,steps:r}){return(0,t.jsxs)(`div`,{className:n.card,children:[e&&(0,t.jsx)(`p`,{className:n.interactionTitle,children:e}),(0,t.jsx)(`div`,{className:n.timeline,children:r.map((e,r)=>(0,t.jsxs)(`div`,{className:`${n.timelineStep} ${n[`tl_${e.status}`]}`,children:[(0,t.jsx)(`div`,{className:n.timelineDot}),(0,t.jsxs)(`div`,{className:n.timelineContent,children:[(0,t.jsx)(`span`,{className:n.timelineLabel,children:e.label}),e.timestamp&&(0,t.jsx)(`span`,{className:n.timelineTs,children:e.timestamp})]})]},r))})]})}function m({title:r,slots:i,onSubmit:a}){let[o,s]=(0,e.useState)(null);return(0,t.jsxs)(`div`,{className:n.card,children:[r&&(0,t.jsx)(`p`,{className:n.interactionTitle,children:r}),(0,t.jsx)(`div`,{className:n.slotGrid,children:i.map(e=>(0,t.jsx)(`button`,{className:`${n.slot} ${o===e.id?n.slotActive:``}`,onClick:()=>s(e.id),children:e.label},e.id))}),(0,t.jsx)(`button`,{className:n.submitBtn,onClick:()=>{let e=i.find(e=>e.id===o);e&&a(`Selected slot: ${e.label}${e.datetime?` (${e.datetime})`:``}`)},disabled:!o,children:`Confirm`})]})}function h({title:e,columns:r,rows:i}){return(0,t.jsxs)(`div`,{className:n.card,children:[e&&(0,t.jsx)(`p`,{className:n.interactionTitle,children:e}),(0,t.jsx)(`div`,{className:n.tableWrap,children:(0,t.jsxs)(`table`,{className:n.dataTable,children:[(0,t.jsx)(`thead`,{children:(0,t.jsx)(`tr`,{children:r.map(e=>(0,t.jsx)(`th`,{children:e.label},e.key))})}),(0,t.jsx)(`tbody`,{children:i.map((e,n)=>(0,t.jsx)(`tr`,{children:r.map(n=>(0,t.jsx)(`td`,{children:String(e[n.key]??``)},n.key))},n))})]})})]})}function g({title:r,steps:i,currentStep:a,onSubmit:o}){let[s,c]=(0,e.useState)(a),[l,u]=(0,e.useState)(()=>Object.fromEntries(i.map(e=>[e.id,Object.fromEntries(e.fields.map(e=>[e.key,e.prefilled_value??``]))])));function d(e,t,n){u(r=>({...r,[e]:{...r[e],[t]:n}}))}function f(){let e=i[s];return e.fields.filter(e=>e.required).every(t=>l[e.id]?.[t.key]?.trim())}function p(){let e=[];for(let t of i)for(let n of t.fields){let r=l[t.id]?.[n.key];r?.trim()&&e.push(`${n.label}: ${r}`)}o(e.join(`
+`))}let m=i[s],h=s===i.length-1;return(0,t.jsxs)(`div`,{className:n.card,children:[r&&(0,t.jsx)(`p`,{className:n.interactionTitle,children:r}),(0,t.jsx)(`div`,{className:n.stepperProgress,children:i.map((e,r)=>(0,t.jsx)(`div`,{className:`${n.stepperDot} ${r<s?n.stepperDone:r===s?n.stepperCurrent:``}`},e.id))}),(0,t.jsx)(`p`,{className:n.stepperLabel,children:m.label}),(0,t.jsx)(`div`,{className:n.addressGrid,children:m.fields.map(e=>(0,t.jsxs)(`div`,{className:n.field,children:[(0,t.jsxs)(`label`,{className:n.fieldLabel,children:[e.label,e.required&&(0,t.jsx)(`span`,{className:n.required,children:` *`})]}),(0,t.jsx)(`input`,{className:n.fieldInput,type:e.type===`date_picker`?`date`:e.type,value:l[m.id]?.[e.key]??``,onChange:t=>d(m.id,e.key,t.target.value)})]},e.key))}),(0,t.jsxs)(`div`,{className:n.stepperNav,children:[s>0&&(0,t.jsx)(`button`,{className:n.cancelBtn,onClick:()=>c(e=>e-1),children:`Back`}),h?(0,t.jsx)(`button`,{className:n.submitBtn,onClick:p,disabled:!f(),children:`Submit`}):(0,t.jsx)(`button`,{className:n.submitBtn,onClick:()=>c(e=>e+1),disabled:!f(),children:`Next`})]})]})}exports.ClomRenderer=r;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { ClomRenderer } from './ClomRenderer';
+export type { ClomOutput, InteractionSpec, FormField, InteractionCard, TimelineStep, StepperStep, } from './types';

package/dist/index.js

@@ -0,0 +1,620 @@
+import { useRef as e, useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+var i = {
+	card: "_card_148uw_16",
+	field: "_field_148uw_30",
+	fieldLabel: "_fieldLabel_148uw_36",
+	required: "_required_148uw_42",
+	fieldInput: "_fieldInput_148uw_46",
+	fieldTextarea: "_fieldTextarea_148uw_47",
+	optionsRow: "_optionsRow_148uw_65",
+	optionBtn: "_optionBtn_148uw_71",
+	checkList: "_checkList_148uw_89",
+	checkItem: "_checkItem_148uw_95",
+	checkbox: "_checkbox_148uw_104",
+	submitBtn: "_submitBtn_148uw_112",
+	interactionTitle: "_interactionTitle_148uw_133",
+	hint: "_hint_148uw_140",
+	errorText: "_errorText_148uw_146",
+	addressGrid: "_addressGrid_148uw_154",
+	otpGrid: "_otpGrid_148uw_162",
+	otpBox: "_otpBox_148uw_167",
+	starRow: "_starRow_148uw_188",
+	star: "_star_148uw_188",
+	starActive: "_starActive_148uw_205",
+	fileZone: "_fileZone_148uw_212",
+	fileHint: "_fileHint_148uw_226",
+	fileName: "_fileName_148uw_231",
+	cardGrid: "_cardGrid_148uw_239",
+	cardItem: "_cardItem_148uw_245",
+	cardImage: "_cardImage_148uw_265",
+	cardBody: "_cardBody_148uw_271",
+	cardTitle: "_cardTitle_148uw_278",
+	cardSubtitle: "_cardSubtitle_148uw_284",
+	cardMeta: "_cardMeta_148uw_289",
+	cardPrice: "_cardPrice_148uw_296",
+	cardBadge: "_cardBadge_148uw_302",
+	confirmSummary: "_confirmSummary_148uw_313",
+	confirmKey: "_confirmKey_148uw_319",
+	confirmVal: "_confirmVal_148uw_327",
+	confirmActions: "_confirmActions_148uw_332",
+	cancelBtn: "_cancelBtn_148uw_339",
+	timeline: "_timeline_148uw_359",
+	timelineStep: "_timelineStep_148uw_365",
+	tl_completed: "_tl_completed_148uw_383",
+	timelineDot: "_timelineDot_148uw_387",
+	tl_active: "_tl_active_148uw_404",
+	timelineContent: "_timelineContent_148uw_409",
+	timelineLabel: "_timelineLabel_148uw_415",
+	tl_pending: "_tl_pending_148uw_421",
+	timelineTs: "_timelineTs_148uw_425",
+	slotGrid: "_slotGrid_148uw_432",
+	slot: "_slot_148uw_432",
+	slotActive: "_slotActive_148uw_456",
+	tableWrap: "_tableWrap_148uw_464",
+	dataTable: "_dataTable_148uw_470",
+	stepperProgress: "_stepperProgress_148uw_498",
+	stepperDot: "_stepperDot_148uw_505",
+	stepperDone: "_stepperDone_148uw_513",
+	stepperCurrent: "_stepperCurrent_148uw_517",
+	stepperLabel: "_stepperLabel_148uw_523",
+	stepperNav: "_stepperNav_148uw_530"
+};
+//#endregion
+//#region src/ClomRenderer.tsx
+function a({ data: e, onSubmit: t, locked: r }) {
+	if (r) return null;
+	let i = e;
+	switch (i.interaction) {
+		case "form": return /* @__PURE__ */ n(o, {
+			title: i.title,
+			fields: i.fields,
+			onSubmit: t
+		});
+		case "address": return /* @__PURE__ */ n(o, {
+			title: i.title ?? "Delivery Address",
+			fields: i.fields,
+			onSubmit: t
+		});
+		case "select": return /* @__PURE__ */ n(s, {
+			options: i.options,
+			onSubmit: t
+		});
+		case "multiselect": return /* @__PURE__ */ n(c, {
+			options: i.options,
+			onSubmit: t
+		});
+		case "date_picker": return /* @__PURE__ */ n(l, {
+			label: i.label,
+			minDate: i.min_date,
+			maxDate: i.max_date,
+			onSubmit: t
+		});
+		case "otp": return /* @__PURE__ */ n(u, {
+			label: i.label,
+			length: i.length ?? 6,
+			hint: i.hint,
+			onSubmit: t
+		});
+		case "rating": return /* @__PURE__ */ n(d, {
+			label: i.label,
+			max: i.max ?? 5,
+			labels: i.labels,
+			onSubmit: t
+		});
+		case "file_upload": return /* @__PURE__ */ n(f, {
+			label: i.label,
+			accept: i.accept,
+			maxMb: i.max_mb ?? 10,
+			onSubmit: t
+		});
+		case "card_grid": return /* @__PURE__ */ n(p, {
+			title: i.title,
+			cards: i.cards,
+			onSubmit: t
+		});
+		case "confirmation_card": return /* @__PURE__ */ n(m, {
+			title: i.title,
+			summary: i.summary,
+			actions: i.actions,
+			onSubmit: t
+		});
+		case "timeline": return /* @__PURE__ */ n(h, {
+			title: i.title,
+			steps: i.steps
+		});
+		case "slot_picker": return /* @__PURE__ */ n(g, {
+			title: i.title,
+			slots: i.slots,
+			onSubmit: t
+		});
+		case "data_table": return /* @__PURE__ */ n(_, {
+			title: i.title,
+			columns: i.columns,
+			rows: i.rows
+		});
+		case "stepper": return /* @__PURE__ */ n(v, {
+			title: i.title,
+			steps: i.steps,
+			currentStep: i.current_step,
+			onSubmit: t
+		});
+		default: return null;
+	}
+}
+function o({ title: e, fields: a, onSubmit: o }) {
+	let [s, c] = t(() => Object.fromEntries(a.map((e) => [e.key, e.prefilled_value ?? ""])));
+	function l() {
+		let e = a.map((e) => `${e.label}: ${s[e.key] ?? ""}`).filter((e, t) => s[a[t].key]?.trim());
+		e.length !== 0 && o(e.join("\n"));
+	}
+	let u = a.filter((e) => e.required).every((e) => s[e.key]?.trim());
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [
+			e && /* @__PURE__ */ n("p", {
+				className: i.interactionTitle,
+				children: e
+			}),
+			/* @__PURE__ */ n("div", {
+				className: i.addressGrid,
+				children: a.map((e) => /* @__PURE__ */ r("div", {
+					className: i.field,
+					children: [/* @__PURE__ */ r("label", {
+						className: i.fieldLabel,
+						children: [e.label, e.required && /* @__PURE__ */ n("span", {
+							className: i.required,
+							children: " *"
+						})]
+					}), e.type === "textarea" ? /* @__PURE__ */ n("textarea", {
+						className: i.fieldTextarea,
+						rows: 3,
+						value: s[e.key] ?? "",
+						onChange: (t) => c((n) => ({
+							...n,
+							[e.key]: t.target.value
+						}))
+					}) : /* @__PURE__ */ n("input", {
+						className: i.fieldInput,
+						type: e.type === "date_picker" ? "date" : e.type === "file_upload" ? "file" : e.type,
+						value: s[e.key] ?? "",
+						onChange: (t) => c((n) => ({
+							...n,
+							[e.key]: t.target.value
+						}))
+					})]
+				}, e.key))
+			}),
+			/* @__PURE__ */ n("button", {
+				className: i.submitBtn,
+				onClick: l,
+				disabled: !u,
+				children: "Send"
+			})
+		]
+	});
+}
+function s({ options: e, onSubmit: t }) {
+	return /* @__PURE__ */ n("div", {
+		className: i.card,
+		children: /* @__PURE__ */ n("div", {
+			className: i.optionsRow,
+			children: e.map((e) => /* @__PURE__ */ n("button", {
+				className: i.optionBtn,
+				onClick: () => t(e),
+				children: e
+			}, e))
+		})
+	});
+}
+function c({ options: e, onSubmit: a }) {
+	let [o, s] = t(/* @__PURE__ */ new Set());
+	function c(e) {
+		s((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [/* @__PURE__ */ n("div", {
+			className: i.checkList,
+			children: e.map((e) => /* @__PURE__ */ r("label", {
+				className: i.checkItem,
+				children: [/* @__PURE__ */ n("input", {
+					type: "checkbox",
+					checked: o.has(e),
+					onChange: () => c(e),
+					className: i.checkbox
+				}), e]
+			}, e))
+		}), /* @__PURE__ */ n("button", {
+			className: i.submitBtn,
+			onClick: () => a([...o].join(", ")),
+			disabled: o.size === 0,
+			children: "Confirm"
+		})]
+	});
+}
+function l({ label: e, minDate: a, maxDate: o, onSubmit: s }) {
+	let [c, l] = t("");
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [
+			/* @__PURE__ */ n("label", {
+				className: i.fieldLabel,
+				children: e
+			}),
+			/* @__PURE__ */ n("input", {
+				type: "date",
+				className: i.fieldInput,
+				value: c,
+				min: a,
+				max: o,
+				onChange: (e) => l(e.target.value)
+			}),
+			/* @__PURE__ */ n("button", {
+				className: i.submitBtn,
+				onClick: () => s(`${e}: ${c}`),
+				disabled: !c,
+				children: "Confirm"
+			})
+		]
+	});
+}
+function u({ label: a, length: o, hint: s, onSubmit: c }) {
+	let [l, u] = t(Array(o).fill("")), d = e([]);
+	function f(e, t) {
+		let n = t.replace(/\D/g, "").slice(-1), r = [...l];
+		r[e] = n, u(r), n && e < o - 1 && d.current[e + 1]?.focus();
+	}
+	function p(e, t) {
+		t.key === "Backspace" && !l[e] && e > 0 && d.current[e - 1]?.focus();
+	}
+	function m(e) {
+		let t = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, o);
+		t.length > 0 && (u([...t.split(""), ...Array(o - t.length).fill("")]), d.current[Math.min(t.length, o - 1)]?.focus()), e.preventDefault();
+	}
+	let h = l.join("");
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [
+			/* @__PURE__ */ n("p", {
+				className: i.fieldLabel,
+				children: a
+			}),
+			s && /* @__PURE__ */ n("p", {
+				className: i.hint,
+				children: s
+			}),
+			/* @__PURE__ */ n("div", {
+				className: i.otpGrid,
+				onPaste: m,
+				children: l.map((e, t) => /* @__PURE__ */ n("input", {
+					ref: (e) => {
+						d.current[t] = e;
+					},
+					className: i.otpBox,
+					type: "text",
+					inputMode: "numeric",
+					maxLength: 1,
+					value: e,
+					onChange: (e) => f(t, e.target.value),
+					onKeyDown: (e) => p(t, e)
+				}, t))
+			}),
+			/* @__PURE__ */ n("button", {
+				className: i.submitBtn,
+				onClick: () => c(`${a}: ${h}`),
+				disabled: h.length < o,
+				children: "Verify"
+			})
+		]
+	});
+}
+function d({ label: e, max: a, labels: o, onSubmit: s }) {
+	let [c, l] = t(0), [u, d] = t(0);
+	function f(t) {
+		d(t), s(`${e}: ${t}/${a}${o?.[t - 1] ? ` (${o[t - 1]})` : ""}`);
+	}
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [
+			/* @__PURE__ */ n("p", {
+				className: i.fieldLabel,
+				children: e
+			}),
+			/* @__PURE__ */ n("div", {
+				className: i.starRow,
+				children: Array.from({ length: a }, (e, t) => t + 1).map((e) => /* @__PURE__ */ n("button", {
+					className: `${i.star} ${e <= (c || u) ? i.starActive : ""}`,
+					onMouseEnter: () => l(e),
+					onMouseLeave: () => l(0),
+					onClick: () => f(e),
+					"aria-label": `${e} star${e === 1 ? "" : "s"}`,
+					children: "★"
+				}, e))
+			}),
+			o && c > 0 && /* @__PURE__ */ n("p", {
+				className: i.hint,
+				children: o[c - 1]
+			})
+		]
+	});
+}
+function f({ label: a, accept: o, maxMb: s, onSubmit: c }) {
+	let [l, u] = t(null), [d, f] = t(null), p = e(null);
+	function m(e) {
+		if (e.size > s * 1024 * 1024) {
+			f(`File must be under ${s} MB`);
+			return;
+		}
+		f(null), u(e.name);
+	}
+	function h(e) {
+		let t = e.target.files?.[0];
+		t && m(t);
+	}
+	function g(e) {
+		e.preventDefault();
+		let t = e.dataTransfer.files?.[0];
+		t && m(t);
+	}
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [
+			/* @__PURE__ */ n("p", {
+				className: i.fieldLabel,
+				children: a
+			}),
+			/* @__PURE__ */ r("div", {
+				className: i.fileZone,
+				onClick: () => p.current?.click(),
+				onDragOver: (e) => e.preventDefault(),
+				onDrop: g,
+				children: [/* @__PURE__ */ n("input", {
+					ref: p,
+					type: "file",
+					accept: o,
+					style: { display: "none" },
+					onChange: h
+				}), l ? /* @__PURE__ */ n("span", {
+					className: i.fileName,
+					children: l
+				}) : /* @__PURE__ */ n("span", {
+					className: i.fileHint,
+					children: "Tap to choose or drag a file here"
+				})]
+			}),
+			d && /* @__PURE__ */ n("p", {
+				className: i.errorText,
+				children: d
+			}),
+			/* @__PURE__ */ n("button", {
+				className: i.submitBtn,
+				onClick: () => c(`${a}: ${l}`),
+				disabled: !l,
+				children: "Upload"
+			})
+		]
+	});
+}
+function p({ title: e, cards: t, onSubmit: a }) {
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [e && /* @__PURE__ */ n("p", {
+			className: i.interactionTitle,
+			children: e
+		}), /* @__PURE__ */ n("div", {
+			className: i.cardGrid,
+			children: t.map((e) => /* @__PURE__ */ r("button", {
+				className: i.cardItem,
+				onClick: () => a(`Selected: ${e.title}`),
+				children: [e.image && /* @__PURE__ */ n("img", {
+					src: e.image,
+					alt: e.title,
+					className: i.cardImage
+				}), /* @__PURE__ */ r("div", {
+					className: i.cardBody,
+					children: [
+						/* @__PURE__ */ n("span", {
+							className: i.cardTitle,
+							children: e.title
+						}),
+						e.subtitle && /* @__PURE__ */ n("span", {
+							className: i.cardSubtitle,
+							children: e.subtitle
+						}),
+						/* @__PURE__ */ r("div", {
+							className: i.cardMeta,
+							children: [e.price && /* @__PURE__ */ n("span", {
+								className: i.cardPrice,
+								children: e.price
+							}), e.badge && /* @__PURE__ */ n("span", {
+								className: i.cardBadge,
+								children: e.badge
+							})]
+						})
+					]
+				})]
+			}, e.id))
+		})]
+	});
+}
+function m({ title: e, summary: t, actions: a, onSubmit: o }) {
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [
+			e && /* @__PURE__ */ n("p", {
+				className: i.interactionTitle,
+				children: e
+			}),
+			/* @__PURE__ */ n("table", {
+				className: i.confirmSummary,
+				children: /* @__PURE__ */ n("tbody", { children: Object.entries(t).map(([e, t]) => /* @__PURE__ */ r("tr", { children: [/* @__PURE__ */ n("td", {
+					className: i.confirmKey,
+					children: e
+				}), /* @__PURE__ */ n("td", {
+					className: i.confirmVal,
+					children: t
+				})] }, e)) })
+			}),
+			/* @__PURE__ */ n("div", {
+				className: i.confirmActions,
+				children: a.map((e) => /* @__PURE__ */ n("button", {
+					className: e.value === "cancel" ? i.cancelBtn : i.submitBtn,
+					onClick: () => o(e.label),
+					children: e.label
+				}, e.value))
+			})
+		]
+	});
+}
+function h({ title: e, steps: t }) {
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [e && /* @__PURE__ */ n("p", {
+			className: i.interactionTitle,
+			children: e
+		}), /* @__PURE__ */ n("div", {
+			className: i.timeline,
+			children: t.map((e, t) => /* @__PURE__ */ r("div", {
+				className: `${i.timelineStep} ${i[`tl_${e.status}`]}`,
+				children: [/* @__PURE__ */ n("div", { className: i.timelineDot }), /* @__PURE__ */ r("div", {
+					className: i.timelineContent,
+					children: [/* @__PURE__ */ n("span", {
+						className: i.timelineLabel,
+						children: e.label
+					}), e.timestamp && /* @__PURE__ */ n("span", {
+						className: i.timelineTs,
+						children: e.timestamp
+					})]
+				})]
+			}, t))
+		})]
+	});
+}
+function g({ title: e, slots: a, onSubmit: o }) {
+	let [s, c] = t(null);
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [
+			e && /* @__PURE__ */ n("p", {
+				className: i.interactionTitle,
+				children: e
+			}),
+			/* @__PURE__ */ n("div", {
+				className: i.slotGrid,
+				children: a.map((e) => /* @__PURE__ */ n("button", {
+					className: `${i.slot} ${s === e.id ? i.slotActive : ""}`,
+					onClick: () => c(e.id),
+					children: e.label
+				}, e.id))
+			}),
+			/* @__PURE__ */ n("button", {
+				className: i.submitBtn,
+				onClick: () => {
+					let e = a.find((e) => e.id === s);
+					e && o(`Selected slot: ${e.label}${e.datetime ? ` (${e.datetime})` : ""}`);
+				},
+				disabled: !s,
+				children: "Confirm"
+			})
+		]
+	});
+}
+function _({ title: e, columns: t, rows: a }) {
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [e && /* @__PURE__ */ n("p", {
+			className: i.interactionTitle,
+			children: e
+		}), /* @__PURE__ */ n("div", {
+			className: i.tableWrap,
+			children: /* @__PURE__ */ r("table", {
+				className: i.dataTable,
+				children: [/* @__PURE__ */ n("thead", { children: /* @__PURE__ */ n("tr", { children: t.map((e) => /* @__PURE__ */ n("th", { children: e.label }, e.key)) }) }), /* @__PURE__ */ n("tbody", { children: a.map((e, r) => /* @__PURE__ */ n("tr", { children: t.map((t) => /* @__PURE__ */ n("td", { children: String(e[t.key] ?? "") }, t.key)) }, r)) })]
+			})
+		})]
+	});
+}
+function v({ title: e, steps: a, currentStep: o, onSubmit: s }) {
+	let [c, l] = t(o), [u, d] = t(() => Object.fromEntries(a.map((e) => [e.id, Object.fromEntries(e.fields.map((e) => [e.key, e.prefilled_value ?? ""]))])));
+	function f(e, t, n) {
+		d((r) => ({
+			...r,
+			[e]: {
+				...r[e],
+				[t]: n
+			}
+		}));
+	}
+	function p() {
+		let e = a[c];
+		return e.fields.filter((e) => e.required).every((t) => u[e.id]?.[t.key]?.trim());
+	}
+	function m() {
+		let e = [];
+		for (let t of a) for (let n of t.fields) {
+			let r = u[t.id]?.[n.key];
+			r?.trim() && e.push(`${n.label}: ${r}`);
+		}
+		s(e.join("\n"));
+	}
+	let h = a[c], g = c === a.length - 1;
+	return /* @__PURE__ */ r("div", {
+		className: i.card,
+		children: [
+			e && /* @__PURE__ */ n("p", {
+				className: i.interactionTitle,
+				children: e
+			}),
+			/* @__PURE__ */ n("div", {
+				className: i.stepperProgress,
+				children: a.map((e, t) => /* @__PURE__ */ n("div", { className: `${i.stepperDot} ${t < c ? i.stepperDone : t === c ? i.stepperCurrent : ""}` }, e.id))
+			}),
+			/* @__PURE__ */ n("p", {
+				className: i.stepperLabel,
+				children: h.label
+			}),
+			/* @__PURE__ */ n("div", {
+				className: i.addressGrid,
+				children: h.fields.map((e) => /* @__PURE__ */ r("div", {
+					className: i.field,
+					children: [/* @__PURE__ */ r("label", {
+						className: i.fieldLabel,
+						children: [e.label, e.required && /* @__PURE__ */ n("span", {
+							className: i.required,
+							children: " *"
+						})]
+					}), /* @__PURE__ */ n("input", {
+						className: i.fieldInput,
+						type: e.type === "date_picker" ? "date" : e.type,
+						value: u[h.id]?.[e.key] ?? "",
+						onChange: (t) => f(h.id, e.key, t.target.value)
+					})]
+				}, e.key))
+			}),
+			/* @__PURE__ */ r("div", {
+				className: i.stepperNav,
+				children: [c > 0 && /* @__PURE__ */ n("button", {
+					className: i.cancelBtn,
+					onClick: () => l((e) => e - 1),
+					children: "Back"
+				}), g ? /* @__PURE__ */ n("button", {
+					className: i.submitBtn,
+					onClick: m,
+					disabled: !p(),
+					children: "Submit"
+				}) : /* @__PURE__ */ n("button", {
+					className: i.submitBtn,
+					onClick: () => l((e) => e + 1),
+					disabled: !p(),
+					children: "Next"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { a as ClomRenderer };

package/dist/style.css

@@ -0,0 +1,2 @@
+:root{--clom-bg:var(--bg,#0f0f13);--clom-surface:var(--surface,#1a1a24);--clom-border:var(--border,#2a2a3a);--clom-text:var(--text,#e8e8f0);--clom-text-muted:var(--text-muted,#7a7a9a);--clom-accent:var(--accent,#6366f1);--clom-accent2:var(--accent2,#8b5cf6)}._card_148uw_16{background:var(--clom-surface);border:1.5px solid var(--clom-border);border-radius:4px 1rem 1rem;flex-direction:column;align-self:flex-start;gap:.625rem;max-width:min(85%,420px);margin-top:-.25rem;padding:.875rem;display:flex}._field_148uw_30{flex-direction:column;gap:.25rem;display:flex}._fieldLabel_148uw_36{color:var(--clom-text-muted);font-size:.8125rem;font-weight:500}._required_148uw_42{color:var(--clom-accent)}._fieldInput_148uw_46,._fieldTextarea_148uw_47{border:1.5px solid var(--clom-border);background:var(--clom-bg);color:var(--clom-text);resize:vertical;border-radius:.625rem;outline:none;padding:.5rem .75rem;font-family:inherit;font-size:.9rem;transition:border-color .15s}._fieldInput_148uw_46:focus,._fieldTextarea_148uw_47:focus{border-color:var(--clom-accent)}._optionsRow_148uw_65{flex-wrap:wrap;gap:.5rem;display:flex}._optionBtn_148uw_71{border:1.5px solid var(--clom-accent);color:var(--clom-accent);cursor:pointer;background:0 0;border-radius:9999px;padding:.4rem .875rem;font-family:inherit;font-size:.875rem;font-weight:500;transition:background .15s,color .15s}._optionBtn_148uw_71:hover{background:var(--clom-accent);color:#fff}._checkList_148uw_89{flex-direction:column;gap:.375rem;display:flex}._checkItem_148uw_95{cursor:pointer;color:var(--clom-text);align-items:center;gap:.5rem;font-size:.9rem;display:flex}._checkbox_148uw_104{accent-color:var(--clom-accent);cursor:pointer;flex-shrink:0;width:16px;height:16px}._submitBtn_148uw_112{background:linear-gradient(135deg, var(--clom-accent), var(--clom-accent2));color:#fff;cursor:pointer;border:none;border-radius:9999px;align-self:flex-end;padding:.5rem 1.5rem;font-family:inherit;font-size:.875rem;font-weight:600;transition:opacity .15s}._submitBtn_148uw_112:disabled{opacity:.45;cursor:not-allowed}._interactionTitle_148uw_133{color:var(--clom-text);margin:0 0 .25rem;font-size:.875rem;font-weight:600}._hint_148uw_140{color:var(--clom-text-muted);margin:0;font-size:.8rem}._errorText_148uw_146{color:#ef4444;margin:0;font-size:.8rem}._addressGrid_148uw_154{flex-direction:column;gap:.5rem;display:flex}._otpGrid_148uw_162{gap:.4rem;display:flex}._otpBox_148uw_167{text-align:center;border:1.5px solid var(--clom-border);background:var(--clom-bg);width:2.4rem;height:2.8rem;color:var(--clom-text);border-radius:.5rem;outline:none;font-family:inherit;font-size:1.125rem;font-weight:600;transition:border-color .15s}._otpBox_148uw_167:focus{border-color:var(--clom-accent)}._starRow_148uw_188{gap:.25rem;display:flex}._star_148uw_188{cursor:pointer;color:var(--clom-border);background:0 0;border:none;padding:0;font-size:1.75rem;line-height:1;transition:color .1s,transform .1s}._star_148uw_188:hover,._starActive_148uw_205{color:#f59e0b;transform:scale(1.15)}._fileZone_148uw_212{border:1.5px dashed var(--clom-border);text-align:center;cursor:pointer;border-radius:.75rem;padding:1.25rem 1rem;transition:border-color .15s,background .15s}._fileZone_148uw_212:hover{border-color:var(--clom-accent);background:color-mix(in srgb, var(--clom-accent) 5%, transparent)}._fileHint_148uw_226{color:var(--clom-text-muted);font-size:.85rem}._fileName_148uw_231{color:var(--clom-accent);font-size:.85rem;font-weight:500}._cardGrid_148uw_239{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;display:grid}._cardItem_148uw_245{background:var(--clom-bg);border:1.5px solid var(--clom-border);cursor:pointer;text-align:left;border-radius:.75rem;flex-direction:column;align-items:flex-start;padding:0;font-family:inherit;transition:border-color .15s,box-shadow .15s;display:flex;overflow:hidden}._cardItem_148uw_245:hover{border-color:var(--clom-accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--clom-accent) 20%, transparent)}._cardImage_148uw_265{aspect-ratio:4/3;object-fit:cover;width:100%}._cardBody_148uw_271{flex-direction:column;gap:.2rem;padding:.5rem;display:flex}._cardTitle_148uw_278{color:var(--clom-text);font-size:.85rem;font-weight:600}._cardSubtitle_148uw_284{color:var(--clom-text-muted);font-size:.775rem}._cardMeta_148uw_289{align-items:center;gap:.375rem;margin-top:.125rem;display:flex}._cardPrice_148uw_296{color:var(--clom-accent);font-size:.8rem;font-weight:600}._cardBadge_148uw_302{background:color-mix(in srgb, var(--clom-accent) 15%, transparent);color:var(--clom-accent);border-radius:9999px;padding:.1rem .4rem;font-size:.7rem;font-weight:500}._confirmSummary_148uw_313{border-collapse:collapse;width:100%;font-size:.875rem}._confirmKey_148uw_319{color:var(--clom-text-muted);vertical-align:top;white-space:nowrap;padding:.25rem .5rem .25rem 0;font-weight:500}._confirmVal_148uw_327{color:var(--clom-text);padding:.25rem 0}._confirmActions_148uw_332{justify-content:flex-end;gap:.5rem;margin-top:.25rem;display:flex}._cancelBtn_148uw_339{border:1.5px solid var(--clom-border);color:var(--clom-text-muted);cursor:pointer;background:0 0;border-radius:9999px;padding:.5rem 1.25rem;font-family:inherit;font-size:.875rem;font-weight:600;transition:border-color .15s,color .15s}._cancelBtn_148uw_339:hover{border-color:var(--clom-text-muted);color:var(--clom-text)}._timeline_148uw_359{flex-direction:column;gap:0;display:flex}._timelineStep_148uw_365{align-items:flex-start;gap:.625rem;padding-bottom:.75rem;display:flex;position:relative}._timelineStep_148uw_365:not(:last-child):after{content:"";background:var(--clom-border);width:2px;position:absolute;top:16px;bottom:0;left:7px}._timelineStep_148uw_365._tl_completed_148uw_383:after{background:var(--clom-accent)}._timelineDot_148uw_387{border:2px solid var(--clom-border);background:var(--clom-bg);z-index:1;border-radius:50%;flex-shrink:0;width:16px;height:16px;margin-top:1px;position:relative}._tl_completed_148uw_383 ._timelineDot_148uw_387{background:var(--clom-accent);border-color:var(--clom-accent)}._tl_active_148uw_404 ._timelineDot_148uw_387{border-color:var(--clom-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--clom-accent) 20%, transparent)}._timelineContent_148uw_409{flex-direction:column;gap:.1rem;display:flex}._timelineLabel_148uw_415{color:var(--clom-text);font-size:.875rem;font-weight:500}._tl_pending_148uw_421 ._timelineLabel_148uw_415{color:var(--clom-text-muted)}._timelineTs_148uw_425{color:var(--clom-text-muted);font-size:.75rem}._slotGrid_148uw_432{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.4rem;display:grid}._slot_148uw_432{border:1.5px solid var(--clom-border);background:var(--clom-bg);color:var(--clom-text);cursor:pointer;text-align:center;border-radius:.5rem;padding:.45rem .5rem;font-family:inherit;font-size:.825rem;font-weight:500;transition:border-color .15s,background .15s,color .15s}._slot_148uw_432:hover{border-color:var(--clom-accent)}._slotActive_148uw_456{border-color:var(--clom-accent);background:color-mix(in srgb, var(--clom-accent) 12%, transparent);color:var(--clom-accent)}._tableWrap_148uw_464{border:1.5px solid var(--clom-border);border-radius:.5rem;overflow-x:auto}._dataTable_148uw_470{border-collapse:collapse;width:100%;font-size:.825rem}._dataTable_148uw_470 th{background:var(--clom-surface);color:var(--clom-text-muted);text-align:left;border-bottom:1px solid var(--clom-border);white-space:nowrap;padding:.4rem .625rem;font-weight:600}._dataTable_148uw_470 td{color:var(--clom-text);border-bottom:1px solid var(--clom-border);padding:.35rem .625rem}._dataTable_148uw_470 tr:last-child td{border-bottom:none}._stepperProgress_148uw_498{align-items:center;gap:.375rem;margin-bottom:.25rem;display:flex}._stepperDot_148uw_505{background:var(--clom-border);border-radius:50%;width:8px;height:8px;transition:background .2s}._stepperDone_148uw_513{background:var(--clom-accent)}._stepperCurrent_148uw_517{background:var(--clom-accent2);border-radius:4px;width:20px}._stepperLabel_148uw_523{color:var(--clom-text-muted);margin:0 0 .25rem;font-size:.8125rem;font-weight:600}._stepperNav_148uw_530{justify-content:flex-end;gap:.5rem;margin-top:.25rem;display:flex}
+/*$vite$:1*/

package/dist/types.d.ts

@@ -0,0 +1,107 @@
+export interface FormField {
+    key: string;
+    label: string;
+    type: "text" | "email" | "tel" | "number" | "textarea" | "date_picker" | "file_upload" | "otp" | "rating";
+    required: boolean;
+    prefilled_value?: string;
+    rating_max?: number;
+    otp_length?: number;
+    accept?: string;
+}
+export interface InteractionCard {
+    id: string;
+    title: string;
+    subtitle?: string;
+    image?: string;
+    price?: string;
+    badge?: string;
+}
+export interface TimelineStep {
+    label: string;
+    status: "completed" | "active" | "pending";
+    timestamp?: string;
+}
+export interface StepperStep {
+    id: string;
+    label: string;
+    fields: FormField[];
+}
+export type InteractionSpec = {
+    interaction: "form";
+    title?: string;
+    fields: FormField[];
+} | {
+    interaction: "select";
+    options: string[];
+} | {
+    interaction: "multiselect";
+    options: string[];
+} | {
+    interaction: "address";
+    title?: string;
+    prefilled?: Record<string, string>;
+    fields: FormField[];
+} | {
+    interaction: "date_picker";
+    label: string;
+    min_date?: string;
+    max_date?: string;
+} | {
+    interaction: "otp";
+    label: string;
+    length?: number;
+    hint?: string;
+} | {
+    interaction: "rating";
+    label: string;
+    max?: number;
+    labels?: string[];
+} | {
+    interaction: "file_upload";
+    label: string;
+    accept?: string;
+    max_mb?: number;
+} | {
+    interaction: "card_grid";
+    title?: string;
+    cards: InteractionCard[];
+} | {
+    interaction: "confirmation_card";
+    title?: string;
+    summary: Record<string, string>;
+    actions: {
+        label: string;
+        value: string;
+    }[];
+} | {
+    interaction: "timeline";
+    title?: string;
+    steps: TimelineStep[];
+} | {
+    interaction: "slot_picker";
+    title?: string;
+    slots: {
+        id: string;
+        label: string;
+        datetime?: string;
+    }[];
+    date_label?: string;
+} | {
+    interaction: "data_table";
+    title?: string;
+    columns: {
+        key: string;
+        label: string;
+    }[];
+    rows: Record<string, unknown>[];
+} | {
+    interaction: "stepper";
+    title?: string;
+    steps: StepperStep[];
+    current_step: number;
+};
+/**
+ * Raw CLOM output — discriminated by the `interaction` field.
+ * Any extra metadata fields CLOM appends are passed through and ignored by the renderer.
+ */
+export type ClomOutput = InteractionSpec & Record<string, unknown>;

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "clom-renderer",
+  "version": "1.0.0",
+  "description": "React component library for rendering CLOM protocol interactions",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}