@opennsw/jsonforms-renderers 0.0.1 → 0.0.2

package/dist/index.d.ts

@@ -8,6 +8,10 @@ import { RankedTester } from '@jsonforms/core';
 import { TesterContext } from '@jsonforms/core';
 import { UISchemaElement } from '@jsonforms/core';
 
+export declare const ArrayControl: ComponentType<OwnPropsOfControl>;
+
+export declare const ArrayControlTester: (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => number;
+
 export declare const BooleanControl: ({ data, handleChange, path, label, required, errors, schema, enabled }: ControlProps) => JSX.Element;
 
 export declare const BooleanControlTester: RankedTester;

package/dist/renderers.cjs.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("@jsonforms/core"),C=require("@jsonforms/react"),r=require("@radix-ui/themes"),v=require("react"),F=require("@radix-ui/react-icons"),N=({data:s,handleChange:u,path:t,label:g,required:p,errors:n,uischema:c,schema:l,enabled:x})=>{var m;const d=n.length===0;return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[g," ",p&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsx(r.TextField.Root,{value:s||"",onChange:b=>u(t,b.target.value),disabled:!x,placeholder:(m=c.options)==null?void 0:m.placeholder,color:d?void 0:"red",id:t}),!d&&n!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:n}),l.description&&e.jsx(r.Text,{size:"1",color:"gray",children:l.description})]})})},R=a.rankWith(1,a.isStringControl),ne=C.withJsonFormsControlProps(N),S=({data:s,handleChange:u,path:t,label:g,required:p,errors:n,uischema:c,schema:l,enabled:x})=>{var b;const d=n.length===0,m=h=>{if(h===""){u(t,void 0);return}const i=Number(h);isNaN(i)||u(t,i)};return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[g," ",p&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsx(r.TextField.Root,{type:"number",value:s??"",onChange:h=>m(h.target.value),disabled:!x,placeholder:(b=c.options)==null?void 0:b.placeholder,color:d?void 0:"red",id:t}),!d&&n!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:n}),l.description&&e.jsx(r.Text,{size:"1",color:"gray",children:l.description})]})})},$=a.rankWith(2,a.or(a.isNumberControl,a.isIntegerControl)),se=C.withJsonFormsControlProps(S),B=({data:s,handleChange:u,path:t,label:g,required:p,errors:n,schema:c,enabled:l})=>{const x=n.length===0;return e.jsxs(r.Box,{mb:"4",children:[e.jsxs(r.Flex,{gap:"2",align:"center",children:[e.jsx(r.Checkbox,{checked:!!s,onCheckedChange:d=>u(t,d===!0),disabled:!l,id:t}),e.jsxs(r.Text,{as:"label",size:"2",htmlFor:t,children:[g," ",p&&"*"]})]}),!x&&e.jsx(r.Text,{color:"red",size:"1",className:"block mt-1",children:n}),c.description&&e.jsx(r.Text,{size:"1",color:"gray",className:"block mt-1",children:c.description})]})},I=a.rankWith(2,a.isBooleanControl),le=C.withJsonFormsControlProps(B),W=({data:s,handleChange:u,path:t,label:g,required:p,errors:n,schema:c,uischema:l,enabled:x})=>{var h;const d=n.length===0;let m=[];c.enum?m=c.enum.map(i=>({value:String(i),label:String(i)})):c.oneOf&&(m=c.oneOf.map(i=>({value:String(i.const),label:i.title||String(i.const)})));const b=s!==void 0?String(s):"";return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[g," ",p&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsxs(r.Select.Root,{value:b,onValueChange:i=>u(t,i),disabled:!x,children:[e.jsx(r.Select.Trigger,{placeholder:((h=l.options)==null?void 0:h.placeholder)||"Select an option",color:d?void 0:"red",id:t}),e.jsx(r.Select.Content,{children:m.map(i=>e.jsx(r.Select.Item,{value:i.value,children:i.label},i.value))})]}),!d&&n!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:n}),c.description&&e.jsx(r.Text,{size:"1",color:"gray",children:c.description})]})})},V=a.rankWith(2,a.or(a.isEnumControl,a.isOneOfControl)),ie=C.withJsonFormsControlProps(W),P=({data:s,handleChange:u,path:t,label:g,required:p,errors:n,schema:c,enabled:l})=>{const x=n.length===0;return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[g," ",p&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsx(r.TextField.Root,{type:"date",value:s||"",onChange:d=>u(t,d.target.value),disabled:!l,color:x?void 0:"red",id:t}),!x&&n!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:n}),c.description&&e.jsx(r.Text,{size:"1",color:"gray",children:c.description})]})})},q=a.rankWith(2,a.isDateControl),ae=C.withJsonFormsControlProps(P),J=({uischema:s,schema:u,path:t,renderers:g,cells:p,enabled:n})=>{const l=s.elements;return e.jsx(r.Flex,{direction:"column",gap:"4",children:l.map((x,d)=>e.jsx(C.JsonFormsDispatch,{uischema:x,schema:u,path:t,renderers:g,cells:p,enabled:n},`${t}-${d}`))})},E=a.rankWith(1,a.uiTypeIs("VerticalLayout")),H=({uischema:s,schema:u,path:t,renderers:g,cells:p,enabled:n})=>{const l=s.elements;return e.jsx(r.Flex,{direction:"row",gap:"4",children:l.map((x,d)=>e.jsx(r.Box,{style:{flex:1},children:e.jsx(C.JsonFormsDispatch,{uischema:x,schema:u,path:t,renderers:g,cells:p,enabled:n})},`${t}-${d}`))})},A=a.rankWith(1,a.uiTypeIs("HorizontalLayout")),M=({uischema:s,schema:u,path:t,renderers:g,cells:p,enabled:n})=>{const c=s,l=c.elements;return e.jsxs(r.Card,{mb:"4",children:[c.label&&e.jsx(r.Heading,{size:"4",mb:"4",children:c.label}),e.jsx(r.Flex,{direction:"column",gap:"4",children:l.map((x,d)=>e.jsx(C.JsonFormsDispatch,{uischema:x,schema:u,path:t,renderers:g,cells:p,enabled:n},`${t}-${d}`))})]})},O=a.rankWith(1,a.uiTypeIs("Group")),G=({uischema:s,schema:u,path:t,renderers:g,cells:p,enabled:n})=>{var b;const l=s.elements.filter(h=>h.type==="Category"),[x,d]=v.useState(((b=l[0])==null?void 0:b.label)||"");if(!l.length)return null;const m=l.find(h=>h.label===x)?x:l[0].label;return e.jsxs(r.Tabs.Root,{value:m,onValueChange:d,children:[e.jsx(r.Tabs.List,{children:l.map((h,i)=>e.jsx(r.Tabs.Trigger,{value:h.label,children:h.label},`${t}-${i}`))}),e.jsx(r.Box,{pt:"3",children:l.map((h,i)=>e.jsx(r.Tabs.Content,{value:h.label,children:e.jsx(r.Flex,{direction:"column",gap:"4",children:h.elements.map((z,y)=>e.jsx(C.JsonFormsDispatch,{uischema:z,schema:u,path:t,renderers:g,cells:p,enabled:n},`${t}-${i}-${y}`))})},`${t}-${i}`))})]})},U=a.rankWith(1,a.uiTypeIs("Categorization")),ce=({data:s,handleChange:u,path:t,label:g,required:p,uischema:n,enabled:c})=>{const[l,x]=v.useState(!1),[d,m]=v.useState(null),[b,h]=v.useState(null),i=v.useRef(null),z=(n==null?void 0:n.options)||{},y=z.maxSize||5*1024*1024,f=z.accept||"image/*,application/pdf",T=c!==!1,Z=()=>b||(s?"Uploaded File":null),D=o=>{if(o.size>y){const j=(y/1048576).toFixed(0);m(`File size exceeds ${j}MB limit.`);return}const oe=f.split(",").map(j=>j.trim()).some(j=>j.endsWith("/*")?o.type.startsWith(j.slice(0,-1)):j.startsWith(".")?o.name.toLowerCase().endsWith(j.toLowerCase()):o.type===j);if(f!=="*"&&!oe&&!f.includes("*/*")){m(`Invalid file type. Accepted types: ${f}`);return}const k=new FileReader;k.onload=()=>{const j=k.result;u(t,j),h(o.name),m(null)},k.onerror=()=>{m("Failed to read file")},k.readAsDataURL(o)},w=o=>{o.preventDefault(),o.stopPropagation(),!(!T||s)&&(o.type==="dragenter"||o.type==="dragover"?x(!0):o.type==="dragleave"&&x(!1))},_=o=>{o.preventDefault(),o.stopPropagation(),x(!1),!(!T||s)&&o.dataTransfer.files&&o.dataTransfer.files[0]&&D(o.dataTransfer.files[0])},ee=o=>{o.target.files&&o.target.files[0]&&D(o.target.files[0])},re=()=>{T&&(u(t,null),h(null),m(null),i.current&&(i.current.value=""))},te=o=>{var L;T&&(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),(L=i.current)==null||L.click())};return e.jsxs(r.Box,{mb:"4",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",mb:"1",className:"block",children:[g," ",p&&"*"]}),s?e.jsx(r.Card,{size:"2",variant:"surface",className:"relative group",children:e.jsxs(r.Flex,{align:"center",gap:"3",children:[e.jsx(r.Box,{className:"bg-blue-100 p-2 rounded text-blue-600",children:e.jsx(F.FileTextIcon,{width:"20",height:"20"})}),e.jsxs(r.Box,{style:{flex:1,overflow:"hidden"},children:[e.jsx(r.Text,{size:"2",weight:"bold",className:"block truncate",children:Z()}),T?e.jsx(r.Text,{size:"1",color:"gray",children:"Ready to submit"}):e.jsx("a",{href:s,download:b||"document",className:"text-xs text-blue-600 hover:underline cursor-pointer",onClick:o=>o.stopPropagation(),children:"Download"})]}),e.jsxs(r.Flex,{align:"center",gap:"2",children:[e.jsx(F.CheckCircledIcon,{className:"text-green-600 w-5 h-5"}),T&&e.jsx(r.IconButton,{variant:"ghost",color:"gray",onClick:re,className:"hover:text-red-600 transition-colors",children:e.jsx(F.Cross2Icon,{})})]})]})}):e.jsxs("div",{className:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("@jsonforms/core"),T=require("@jsonforms/react"),r=require("@radix-ui/themes"),z=require("react"),v=require("@radix-ui/react-icons"),B=({data:l,handleChange:u,path:t,label:p,required:h,errors:o,uischema:c,schema:i,enabled:x})=>{var g;const a=o.length===0;return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[p," ",h&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsx(r.TextField.Root,{value:l||"",onChange:j=>u(t,j.target.value),disabled:!x,placeholder:(g=c.options)==null?void 0:g.placeholder,color:a?void 0:"red",id:t}),!a&&o!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:o}),i.description&&e.jsx(r.Text,{size:"1",color:"gray",children:i.description})]})})},D=s.rankWith(1,s.isStringControl),le=T.withJsonFormsControlProps(B),I=({data:l,handleChange:u,path:t,label:p,required:h,errors:o,uischema:c,schema:i,enabled:x})=>{var j;const a=o.length===0,g=m=>{if(m===""){u(t,void 0);return}const d=Number(m);isNaN(d)||u(t,d)};return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[p," ",h&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsx(r.TextField.Root,{type:"number",value:l??"",onChange:m=>g(m.target.value),disabled:!x,placeholder:(j=c.options)==null?void 0:j.placeholder,color:a?void 0:"red",id:t}),!a&&o!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:o}),i.description&&e.jsx(r.Text,{size:"1",color:"gray",children:i.description})]})})},N=s.rankWith(2,s.or(s.isNumberControl,s.isIntegerControl)),ie=T.withJsonFormsControlProps(I),S=({data:l,handleChange:u,path:t,label:p,required:h,errors:o,schema:c,enabled:i})=>{const x=o.length===0;return e.jsxs(r.Box,{mb:"4",children:[e.jsxs(r.Flex,{gap:"2",align:"center",children:[e.jsx(r.Checkbox,{checked:!!l,onCheckedChange:a=>u(t,a===!0),disabled:!i,id:t}),e.jsxs(r.Text,{as:"label",size:"2",htmlFor:t,children:[p," ",h&&"*"]})]}),!x&&e.jsx(r.Text,{color:"red",size:"1",className:"block mt-1",children:o}),c.description&&e.jsx(r.Text,{size:"1",color:"gray",className:"block mt-1",children:c.description})]})},A=s.rankWith(2,s.isBooleanControl),ae=T.withJsonFormsControlProps(S),W=({data:l,handleChange:u,path:t,label:p,required:h,errors:o,schema:c,uischema:i,enabled:x})=>{var m;const a=o.length===0;let g=[];c.enum?g=c.enum.map(d=>({value:String(d),label:String(d)})):c.oneOf&&(g=c.oneOf.map(d=>({value:String(d.const),label:d.title||String(d.const)})));const j=l!==void 0?String(l):"";return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[p," ",h&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsxs(r.Select.Root,{value:j,onValueChange:d=>u(t,d),disabled:!x,children:[e.jsx(r.Select.Trigger,{placeholder:((m=i.options)==null?void 0:m.placeholder)||"Select an option",color:a?void 0:"red",id:t}),e.jsx(r.Select.Content,{children:g.map(d=>e.jsx(r.Select.Item,{value:d.value,children:d.label},d.value))})]}),!a&&o!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:o}),c.description&&e.jsx(r.Text,{size:"1",color:"gray",children:c.description})]})})},P=s.rankWith(2,s.or(s.isEnumControl,s.isOneOfControl)),ce=T.withJsonFormsControlProps(W),V=({data:l,handleChange:u,path:t,label:p,required:h,errors:o,schema:c,enabled:i})=>{const x=o.length===0;return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[p," ",h&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsx(r.TextField.Root,{type:"date",value:l||"",onChange:a=>u(t,a.target.value),disabled:!i,color:x?void 0:"red",id:t}),!x&&o!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:o}),c.description&&e.jsx(r.Text,{size:"1",color:"gray",children:c.description})]})})},J=s.rankWith(2,s.isDateControl),de=T.withJsonFormsControlProps(V),q=({uischema:l,schema:u,path:t,renderers:p,cells:h,enabled:o})=>{const i=l.elements;return e.jsx(r.Flex,{direction:"column",gap:"4",children:i.map((x,a)=>e.jsx(T.JsonFormsDispatch,{uischema:x,schema:u,path:t,renderers:p,cells:h,enabled:o},`${t}-${a}`))})},E=s.rankWith(1,s.uiTypeIs("VerticalLayout")),H=({uischema:l,schema:u,path:t,renderers:p,cells:h,enabled:o})=>{const i=l.elements;return e.jsx(r.Flex,{direction:"row",gap:"4",children:i.map((x,a)=>e.jsx(r.Box,{style:{flex:1},children:e.jsx(T.JsonFormsDispatch,{uischema:x,schema:u,path:t,renderers:p,cells:h,enabled:o})},`${t}-${a}`))})},O=s.rankWith(1,s.uiTypeIs("HorizontalLayout")),M=({uischema:l,schema:u,path:t,renderers:p,cells:h,enabled:o})=>{const c=l,i=c.elements;return e.jsxs(r.Card,{mb:"4",children:[c.label&&e.jsx(r.Heading,{size:"4",mb:"4",children:c.label}),e.jsx(r.Flex,{direction:"column",gap:"4",children:i.map((x,a)=>e.jsx(T.JsonFormsDispatch,{uischema:x,schema:u,path:t,renderers:p,cells:h,enabled:o},`${t}-${a}`))})]})},G=s.rankWith(1,s.uiTypeIs("Group")),U=({uischema:l,schema:u,path:t,renderers:p,cells:h,enabled:o})=>{var j;const i=l.elements.filter(m=>m.type==="Category"),[x,a]=z.useState(((j=i[0])==null?void 0:j.label)||"");if(!i.length)return null;const g=i.find(m=>m.label===x)?x:i[0].label;return e.jsxs(r.Tabs.Root,{value:g,onValueChange:a,children:[e.jsx(r.Tabs.List,{children:i.map((m,d)=>e.jsx(r.Tabs.Trigger,{value:m.label,children:m.label},`${t}-${d}`))}),e.jsx(r.Box,{pt:"3",children:i.map((m,d)=>e.jsx(r.Tabs.Content,{value:m.label,children:e.jsx(r.Flex,{direction:"column",gap:"4",children:m.elements.map((F,f)=>e.jsx(T.JsonFormsDispatch,{uischema:F,schema:u,path:t,renderers:p,cells:h,enabled:o},`${t}-${d}-${f}`))})},`${t}-${d}`))})]})},K=s.rankWith(1,s.uiTypeIs("Categorization")),ue=({data:l,handleChange:u,path:t,label:p,required:h,uischema:o,enabled:c})=>{const[i,x]=z.useState(!1),[a,g]=z.useState(null),[j,m]=z.useState(null),d=z.useRef(null),F=(o==null?void 0:o.options)||{},f=F.maxSize||5*1024*1024,y=F.accept||"image/*,application/pdf",b=c!==!1,k=()=>j||(l?"Uploaded File":null),w=n=>{if(n.size>f){const C=(f/1048576).toFixed(0);g(`File size exceeds ${C}MB limit.`);return}const se=y.split(",").map(C=>C.trim()).some(C=>C.endsWith("/*")?n.type.startsWith(C.slice(0,-1)):C.startsWith(".")?n.name.toLowerCase().endsWith(C.toLowerCase()):n.type===C);if(y!=="*"&&!se&&!y.includes("*/*")){g(`Invalid file type. Accepted types: ${y}`);return}const L=new FileReader;L.onload=()=>{const C=L.result;u(t,C),m(n.name),g(null)},L.onerror=()=>{g("Failed to read file")},L.readAsDataURL(n)},R=n=>{n.preventDefault(),n.stopPropagation(),!(!b||l)&&(n.type==="dragenter"||n.type==="dragover"?x(!0):n.type==="dragleave"&&x(!1))},re=n=>{n.preventDefault(),n.stopPropagation(),x(!1),!(!b||l)&&n.dataTransfer.files&&n.dataTransfer.files[0]&&w(n.dataTransfer.files[0])},te=n=>{n.target.files&&n.target.files[0]&&w(n.target.files[0])},oe=()=>{b&&(u(t,null),m(null),g(null),d.current&&(d.current.value=""))},ne=n=>{var $;b&&(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),($=d.current)==null||$.click())};return e.jsxs(r.Box,{mb:"4",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",mb:"1",className:"block",children:[p," ",h&&"*"]}),l?e.jsx(r.Card,{size:"2",variant:"surface",className:"relative group",children:e.jsxs(r.Flex,{align:"center",gap:"3",children:[e.jsx(r.Box,{className:"bg-blue-100 p-2 rounded text-blue-600",children:e.jsx(v.FileTextIcon,{width:"20",height:"20"})}),e.jsxs(r.Box,{style:{flex:1,overflow:"hidden"},children:[e.jsx(r.Text,{size:"2",weight:"bold",className:"block truncate",children:k()}),b?e.jsx(r.Text,{size:"1",color:"gray",children:"Ready to submit"}):e.jsx("a",{href:l,download:j||"document",className:"text-xs text-blue-600 hover:underline cursor-pointer",onClick:n=>n.stopPropagation(),children:"Download"})]}),e.jsxs(r.Flex,{align:"center",gap:"2",children:[e.jsx(v.CheckCircledIcon,{className:"text-green-600 w-5 h-5"}),b&&e.jsx(r.IconButton,{variant:"ghost",color:"gray",onClick:oe,className:"hover:text-red-600 transition-colors",children:e.jsx(v.Cross2Icon,{})})]})]})}):e.jsxs("div",{className:`
             border-2 border-dashed rounded-lg p-6 text-center transition-all duration-200 ease-in-out
-            ${l?"border-blue-500 bg-blue-50":"border-gray-300 hover:border-blue-400 hover:bg-gray-50"}
-            ${d?"border-red-300 bg-red-50":""}
-            ${T?"cursor-pointer":"opacity-60 cursor-not-allowed pointer-events-none"}
-          `,onDragEnter:w,onDragLeave:w,onDragOver:w,onDrop:_,onClick:()=>{var o;return T&&((o=i.current)==null?void 0:o.click())},onKeyDown:te,role:"button",tabIndex:T?0:-1,children:[e.jsx("input",{ref:i,type:"file",className:"hidden",accept:f,onChange:ee,disabled:!T}),e.jsx(r.Flex,{direction:"column",align:"center",gap:"2",children:d?e.jsxs(e.Fragment,{children:[e.jsx(F.ExclamationTriangleIcon,{className:"w-8 h-8 text-red-500"}),e.jsx(r.Text,{size:"2",color:"red",weight:"medium",children:d}),e.jsx(r.Text,{size:"1",color:"gray",children:"Click to try again"})]}):e.jsxs(e.Fragment,{children:[e.jsx(F.UploadIcon,{className:"w-8 h-8 text-gray-400"}),e.jsx(r.Text,{size:"2",weight:"medium",children:"Click to upload or drag and drop"}),e.jsxs(r.Text,{size:"1",color:"gray",children:["Max ",Math.round(y/(1024*1024)),"MB"]})]})})]})]})},K=C.withJsonFormsControlProps(ce),Q=a.rankWith(3,a.formatIs("data-url")),X=({uischema:s,visible:u})=>{const t=s;return u===!1?null:e.jsx(r.Box,{mb:"4",children:e.jsx(r.Heading,{size:"4",children:t.text})})},Y=a.rankWith(1,a.uiTypeIs("Label")),de=[{tester:R,renderer:ne},{tester:$,renderer:se},{tester:I,renderer:le},{tester:V,renderer:ie},{tester:q,renderer:ae},{tester:E,renderer:J},{tester:A,renderer:H},{tester:O,renderer:M},{tester:U,renderer:G},{tester:Q,renderer:K},{tester:Y,renderer:X}];exports.BooleanControl=B;exports.BooleanControlTester=I;exports.CategorizationLayoutRenderer=G;exports.CategorizationLayoutTester=U;exports.DateControl=P;exports.DateControlTester=q;exports.FileControl=K;exports.FileControlTester=Q;exports.GroupLayoutRenderer=M;exports.GroupLayoutTester=O;exports.HorizontalLayoutRenderer=H;exports.HorizontalLayoutTester=A;exports.LabelRenderer=X;exports.LabelTester=Y;exports.NumberControl=S;exports.NumberControlTester=$;exports.SelectControl=W;exports.SelectControlTester=V;exports.TextControl=N;exports.TextControlTester=R;exports.VerticalLayoutRenderer=J;exports.VerticalLayoutTester=E;exports.radixRenderers=de;
+            ${i?"border-blue-500 bg-blue-50":"border-gray-300 hover:border-blue-400 hover:bg-gray-50"}
+            ${a?"border-red-300 bg-red-50":""}
+            ${b?"cursor-pointer":"opacity-60 cursor-not-allowed pointer-events-none"}
+          `,onDragEnter:R,onDragLeave:R,onDragOver:R,onDrop:re,onClick:()=>{var n;return b&&((n=d.current)==null?void 0:n.click())},onKeyDown:ne,role:"button",tabIndex:b?0:-1,children:[e.jsx("input",{ref:d,type:"file",className:"hidden",accept:y,onChange:te,disabled:!b}),e.jsx(r.Flex,{direction:"column",align:"center",gap:"2",children:a?e.jsxs(e.Fragment,{children:[e.jsx(v.ExclamationTriangleIcon,{className:"w-8 h-8 text-red-500"}),e.jsx(r.Text,{size:"2",color:"red",weight:"medium",children:a}),e.jsx(r.Text,{size:"1",color:"gray",children:"Click to try again"})]}):e.jsxs(e.Fragment,{children:[e.jsx(v.UploadIcon,{className:"w-8 h-8 text-gray-400"}),e.jsx(r.Text,{size:"2",weight:"medium",children:"Click to upload or drag and drop"}),e.jsxs(r.Text,{size:"1",color:"gray",children:["Max ",Math.round(f/(1024*1024)),"MB"]})]})})]})]})},_=T.withJsonFormsControlProps(ue),Q=s.rankWith(3,s.formatIs("data-url")),xe=({data:l,path:u,schema:t,uischema:p,enabled:h,visible:o,addItem:c,removeItems:i,rootSchema:x})=>{const a=t.items;if(o===!1||!a||typeof a!="object"||Array.isArray(a))return null;const g=a,j=Array.isArray(l)?l:[],m=t.title||"Array Items",d=()=>{const f=s.createDefaultValue(g,x);c&&c(u,f)},F=f=>{if(i){const y=i(u,[f]);y&&y()}};return e.jsx(r.Box,{mb:"6",children:e.jsxs(r.Flex,{direction:"column",gap:"4",children:[e.jsx(r.Text,{as:"div",size:"4",weight:"bold",children:m}),j.length===0&&e.jsx(r.Box,{py:"4",px:"4",style:{backgroundColor:"var(--gray-3)",borderRadius:"var(--radius-3)"},children:e.jsx(r.Text,{size:"2",color:"gray",children:"No items have been added yet."})}),j.map((f,y)=>{var k;const b=`${u}.${y}`;return e.jsx(r.Card,{size:"3",variant:"surface",children:e.jsxs(r.Flex,{direction:"column",gap:"4",children:[e.jsxs(r.Flex,{justify:"between",align:"center",children:[e.jsxs(r.Text,{size:"3",weight:"bold",children:["Item ",y+1]}),h&&e.jsxs(r.Button,{color:"red",variant:"soft",onClick:()=>F(y),title:"Remove item",children:[e.jsx(v.TrashIcon,{}),"Remove"]})]}),e.jsx(r.Box,{children:e.jsx(T.JsonFormsDispatch,{schema:g,uischema:((k=p.options)==null?void 0:k.detail)||{type:"VerticalLayout",elements:Object.keys(g.properties||{}).map(w=>({type:"Control",scope:`#/properties/${w}`}))},path:b,enabled:h,renderers:void 0,cells:void 0})})]})},b)}),h&&e.jsx(r.Box,{mt:"2",children:e.jsxs(r.Button,{variant:"surface",onClick:d,children:[e.jsx(v.PlusIcon,{}),"Add Item"]})})]})})},X=T.withJsonFormsArrayControlProps(xe),Y=s.rankWith(2,s.and(s.uiTypeIs("Control"),s.schemaTypeIs("array"))),Z=({uischema:l,visible:u})=>{const t=l;return u===!1?null:e.jsx(r.Box,{mb:"4",children:e.jsx(r.Heading,{size:"4",children:t.text})})},ee=s.rankWith(1,s.uiTypeIs("Label")),he=[{tester:D,renderer:le},{tester:N,renderer:ie},{tester:A,renderer:ae},{tester:P,renderer:ce},{tester:J,renderer:de},{tester:E,renderer:q},{tester:O,renderer:H},{tester:G,renderer:M},{tester:K,renderer:U},{tester:Q,renderer:_},{tester:Y,renderer:X},{tester:ee,renderer:Z}];exports.ArrayControl=X;exports.ArrayControlTester=Y;exports.BooleanControl=S;exports.BooleanControlTester=A;exports.CategorizationLayoutRenderer=U;exports.CategorizationLayoutTester=K;exports.DateControl=V;exports.DateControlTester=J;exports.FileControl=_;exports.FileControlTester=Q;exports.GroupLayoutRenderer=M;exports.GroupLayoutTester=G;exports.HorizontalLayoutRenderer=H;exports.HorizontalLayoutTester=O;exports.LabelRenderer=Z;exports.LabelTester=ee;exports.NumberControl=I;exports.NumberControlTester=N;exports.SelectControl=W;exports.SelectControlTester=P;exports.TextControl=B;exports.TextControlTester=D;exports.VerticalLayoutRenderer=q;exports.VerticalLayoutTester=E;exports.radixRenderers=he;

package/dist/renderers.es.js

@@ -1,328 +1,328 @@
-import { jsx as e, jsxs as h, Fragment as A } from "react/jsx-runtime";
-import { rankWith as z, isStringControl as U, or as W, isNumberControl as j, isIntegerControl as J, isBooleanControl as Q, isEnumControl as X, isOneOfControl as Y, isDateControl as Z, uiTypeIs as N, formatIs as _ } from "@jsonforms/core";
-import { withJsonFormsControlProps as T, JsonFormsDispatch as S } from "@jsonforms/react";
-import { Box as v, Flex as C, Text as c, TextField as B, Checkbox as ee, Select as k, Tabs as L, Card as M, Heading as O, IconButton as re } from "@radix-ui/themes";
-import { useState as R, useRef as te } from "react";
-import { FileTextIcon as oe, CheckCircledIcon as ne, Cross2Icon as le, ExclamationTriangleIcon as ie, UploadIcon as ce } from "@radix-ui/react-icons";
-const se = ({ data: n, handleChange: d, path: r, label: p, required: m, errors: o, uischema: s, schema: l, enabled: u }) => {
+import { jsx as e, jsxs as c, Fragment as O } from "react/jsx-runtime";
+import { rankWith as T, isStringControl as K, or as j, isNumberControl as U, isIntegerControl as _, isBooleanControl as Q, isEnumControl as X, isOneOfControl as Y, isDateControl as Z, uiTypeIs as F, formatIs as ee, createDefaultValue as re, and as te, schemaTypeIs as oe } from "@jsonforms/core";
+import { withJsonFormsControlProps as N, JsonFormsDispatch as k, withJsonFormsArrayControlProps as ne } from "@jsonforms/react";
+import { Box as f, Flex as C, Text as s, TextField as P, Checkbox as le, Select as L, Tabs as A, Card as E, Heading as M, IconButton as ie, Button as W } from "@radix-ui/themes";
+import { useState as S, useRef as ce } from "react";
+import { FileTextIcon as se, CheckCircledIcon as ae, Cross2Icon as de, ExclamationTriangleIcon as ue, UploadIcon as he, TrashIcon as me, PlusIcon as pe } from "@radix-ui/react-icons";
+const ge = ({ data: n, handleChange: u, path: r, label: g, required: m, errors: t, uischema: a, schema: l, enabled: h }) => {
   var b;
-  const a = o.length === 0;
-  return /* @__PURE__ */ e(v, { mb: "4", children: /* @__PURE__ */ h(C, { direction: "column", gap: "1", children: [
-    /* @__PURE__ */ h(c, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
-      p,
+  const i = t.length === 0;
+  return /* @__PURE__ */ e(f, { mb: "4", children: /* @__PURE__ */ c(C, { direction: "column", gap: "1", children: [
+    /* @__PURE__ */ c(s, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
+      g,
       " ",
-      m && /* @__PURE__ */ e(c, { color: "red", children: "*" })
+      m && /* @__PURE__ */ e(s, { color: "red", children: "*" })
     ] }),
     /* @__PURE__ */ e(
-      B.Root,
+      P.Root,
       {
         value: n || "",
-        onChange: (f) => d(r, f.target.value),
-        disabled: !u,
-        placeholder: (b = s.options) == null ? void 0 : b.placeholder,
-        color: a ? void 0 : "red",
+        onChange: (y) => u(r, y.target.value),
+        disabled: !h,
+        placeholder: (b = a.options) == null ? void 0 : b.placeholder,
+        color: i ? void 0 : "red",
         id: r
       }
     ),
-    !a && o !== "is a required property" && /* @__PURE__ */ e(c, { color: "red", size: "1", children: o }),
-    l.description && /* @__PURE__ */ e(c, { size: "1", color: "gray", children: l.description })
+    !i && t !== "is a required property" && /* @__PURE__ */ e(s, { color: "red", size: "1", children: t }),
+    l.description && /* @__PURE__ */ e(s, { size: "1", color: "gray", children: l.description })
   ] }) });
-}, ae = z(
+}, be = T(
   1,
-  U
-), de = T(se), ue = ({ data: n, handleChange: d, path: r, label: p, required: m, errors: o, uischema: s, schema: l, enabled: u }) => {
-  var f;
-  const a = o.length === 0, b = (g) => {
-    if (g === "") {
-      d(r, void 0);
+  K
+), ye = N(ge), fe = ({ data: n, handleChange: u, path: r, label: g, required: m, errors: t, uischema: a, schema: l, enabled: h }) => {
+  var y;
+  const i = t.length === 0, b = (p) => {
+    if (p === "") {
+      u(r, void 0);
       return;
     }
-    const i = Number(g);
-    isNaN(i) || d(r, i);
+    const d = Number(p);
+    isNaN(d) || u(r, d);
   };
-  return /* @__PURE__ */ e(v, { mb: "4", children: /* @__PURE__ */ h(C, { direction: "column", gap: "1", children: [
-    /* @__PURE__ */ h(c, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
-      p,
+  return /* @__PURE__ */ e(f, { mb: "4", children: /* @__PURE__ */ c(C, { direction: "column", gap: "1", children: [
+    /* @__PURE__ */ c(s, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
+      g,
       " ",
-      m && /* @__PURE__ */ e(c, { color: "red", children: "*" })
+      m && /* @__PURE__ */ e(s, { color: "red", children: "*" })
     ] }),
     /* @__PURE__ */ e(
-      B.Root,
+      P.Root,
       {
         type: "number",
         value: n ?? "",
-        onChange: (g) => b(g.target.value),
-        disabled: !u,
-        placeholder: (f = s.options) == null ? void 0 : f.placeholder,
-        color: a ? void 0 : "red",
+        onChange: (p) => b(p.target.value),
+        disabled: !h,
+        placeholder: (y = a.options) == null ? void 0 : y.placeholder,
+        color: i ? void 0 : "red",
         id: r
       }
     ),
-    !a && o !== "is a required property" && /* @__PURE__ */ e(c, { color: "red", size: "1", children: o }),
-    l.description && /* @__PURE__ */ e(c, { size: "1", color: "gray", children: l.description })
+    !i && t !== "is a required property" && /* @__PURE__ */ e(s, { color: "red", size: "1", children: t }),
+    l.description && /* @__PURE__ */ e(s, { size: "1", color: "gray", children: l.description })
   ] }) });
-}, he = z(
+}, Ce = T(
   2,
-  W(j, J)
-), ge = T(ue), pe = ({ data: n, handleChange: d, path: r, label: p, required: m, errors: o, schema: s, enabled: l }) => {
-  const u = o.length === 0;
-  return /* @__PURE__ */ h(v, { mb: "4", children: [
-    /* @__PURE__ */ h(C, { gap: "2", align: "center", children: [
+  j(U, _)
+), ve = N(fe), ze = ({ data: n, handleChange: u, path: r, label: g, required: m, errors: t, schema: a, enabled: l }) => {
+  const h = t.length === 0;
+  return /* @__PURE__ */ c(f, { mb: "4", children: [
+    /* @__PURE__ */ c(C, { gap: "2", align: "center", children: [
       /* @__PURE__ */ e(
-        ee,
+        le,
         {
           checked: !!n,
-          onCheckedChange: (a) => d(r, a === !0),
+          onCheckedChange: (i) => u(r, i === !0),
           disabled: !l,
           id: r
         }
       ),
-      /* @__PURE__ */ h(c, { as: "label", size: "2", htmlFor: r, children: [
-        p,
+      /* @__PURE__ */ c(s, { as: "label", size: "2", htmlFor: r, children: [
+        g,
         " ",
         m && "*"
       ] })
     ] }),
-    !u && /* @__PURE__ */ e(c, { color: "red", size: "1", className: "block mt-1", children: o }),
-    s.description && /* @__PURE__ */ e(c, { size: "1", color: "gray", className: "block mt-1", children: s.description })
+    !h && /* @__PURE__ */ e(s, { color: "red", size: "1", className: "block mt-1", children: t }),
+    a.description && /* @__PURE__ */ e(s, { size: "1", color: "gray", className: "block mt-1", children: a.description })
   ] });
-}, me = z(
+}, Te = T(
   2,
   Q
-), be = T(pe), fe = ({ data: n, handleChange: d, path: r, label: p, required: m, errors: o, schema: s, uischema: l, enabled: u }) => {
-  var g;
-  const a = o.length === 0;
+), xe = N(ze), we = ({ data: n, handleChange: u, path: r, label: g, required: m, errors: t, schema: a, uischema: l, enabled: h }) => {
+  var p;
+  const i = t.length === 0;
   let b = [];
-  s.enum ? b = s.enum.map((i) => ({ value: String(i), label: String(i) })) : s.oneOf && (b = s.oneOf.map((i) => ({
-    value: String(i.const),
-    label: i.title || String(i.const)
+  a.enum ? b = a.enum.map((d) => ({ value: String(d), label: String(d) })) : a.oneOf && (b = a.oneOf.map((d) => ({
+    value: String(d.const),
+    label: d.title || String(d.const)
   })));
-  const f = n !== void 0 ? String(n) : "";
-  return /* @__PURE__ */ e(v, { mb: "4", children: /* @__PURE__ */ h(C, { direction: "column", gap: "1", children: [
-    /* @__PURE__ */ h(c, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
-      p,
+  const y = n !== void 0 ? String(n) : "";
+  return /* @__PURE__ */ e(f, { mb: "4", children: /* @__PURE__ */ c(C, { direction: "column", gap: "1", children: [
+    /* @__PURE__ */ c(s, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
+      g,
       " ",
-      m && /* @__PURE__ */ e(c, { color: "red", children: "*" })
+      m && /* @__PURE__ */ e(s, { color: "red", children: "*" })
     ] }),
-    /* @__PURE__ */ h(
-      k.Root,
+    /* @__PURE__ */ c(
+      L.Root,
       {
-        value: f,
-        onValueChange: (i) => d(r, i),
-        disabled: !u,
+        value: y,
+        onValueChange: (d) => u(r, d),
+        disabled: !h,
         children: [
           /* @__PURE__ */ e(
-            k.Trigger,
+            L.Trigger,
             {
-              placeholder: ((g = l.options) == null ? void 0 : g.placeholder) || "Select an option",
-              color: a ? void 0 : "red",
+              placeholder: ((p = l.options) == null ? void 0 : p.placeholder) || "Select an option",
+              color: i ? void 0 : "red",
               id: r
             }
           ),
-          /* @__PURE__ */ e(k.Content, { children: b.map((i) => /* @__PURE__ */ e(k.Item, { value: i.value, children: i.label }, i.value)) })
+          /* @__PURE__ */ e(L.Content, { children: b.map((d) => /* @__PURE__ */ e(L.Item, { value: d.value, children: d.label }, d.value)) })
         ]
       }
     ),
-    !a && o !== "is a required property" && /* @__PURE__ */ e(c, { color: "red", size: "1", children: o }),
-    s.description && /* @__PURE__ */ e(c, { size: "1", color: "gray", children: s.description })
+    !i && t !== "is a required property" && /* @__PURE__ */ e(s, { color: "red", size: "1", children: t }),
+    a.description && /* @__PURE__ */ e(s, { size: "1", color: "gray", children: a.description })
   ] }) });
-}, Ce = z(
+}, $e = T(
   2,
-  W(X, Y)
-), ye = T(fe), ve = ({ data: n, handleChange: d, path: r, label: p, required: m, errors: o, schema: s, enabled: l }) => {
-  const u = o.length === 0;
-  return /* @__PURE__ */ e(v, { mb: "4", children: /* @__PURE__ */ h(C, { direction: "column", gap: "1", children: [
-    /* @__PURE__ */ h(c, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
-      p,
+  j(X, Y)
+), Fe = N(we), Ne = ({ data: n, handleChange: u, path: r, label: g, required: m, errors: t, schema: a, enabled: l }) => {
+  const h = t.length === 0;
+  return /* @__PURE__ */ e(f, { mb: "4", children: /* @__PURE__ */ c(C, { direction: "column", gap: "1", children: [
+    /* @__PURE__ */ c(s, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
+      g,
       " ",
-      m && /* @__PURE__ */ e(c, { color: "red", children: "*" })
+      m && /* @__PURE__ */ e(s, { color: "red", children: "*" })
     ] }),
     /* @__PURE__ */ e(
-      B.Root,
+      P.Root,
       {
         type: "date",
         value: n || "",
-        onChange: (a) => d(r, a.target.value),
+        onChange: (i) => u(r, i.target.value),
         disabled: !l,
-        color: u ? void 0 : "red",
+        color: h ? void 0 : "red",
         id: r
       }
     ),
-    !u && o !== "is a required property" && /* @__PURE__ */ e(c, { color: "red", size: "1", children: o }),
-    s.description && /* @__PURE__ */ e(c, { size: "1", color: "gray", children: s.description })
+    !h && t !== "is a required property" && /* @__PURE__ */ e(s, { color: "red", size: "1", children: t }),
+    a.description && /* @__PURE__ */ e(s, { size: "1", color: "gray", children: a.description })
   ] }) });
-}, ze = z(
+}, ke = T(
   2,
   Z
-), xe = T(ve), Te = ({ uischema: n, schema: d, path: r, renderers: p, cells: m, enabled: o }) => {
+), De = N(Ne), Ie = ({ uischema: n, schema: u, path: r, renderers: g, cells: m, enabled: t }) => {
   const l = n.elements;
-  return /* @__PURE__ */ e(C, { direction: "column", gap: "4", children: l.map((u, a) => /* @__PURE__ */ e(
-    S,
+  return /* @__PURE__ */ e(C, { direction: "column", gap: "4", children: l.map((h, i) => /* @__PURE__ */ e(
+    k,
     {
-      uischema: u,
-      schema: d,
+      uischema: h,
+      schema: u,
       path: r,
-      renderers: p,
+      renderers: g,
       cells: m,
-      enabled: o
+      enabled: t
     },
-    `${r}-${a}`
+    `${r}-${i}`
   )) });
-}, we = z(1, N("VerticalLayout")), Fe = ({ uischema: n, schema: d, path: r, renderers: p, cells: m, enabled: o }) => {
+}, Re = T(1, F("VerticalLayout")), Le = ({ uischema: n, schema: u, path: r, renderers: g, cells: m, enabled: t }) => {
   const l = n.elements;
-  return /* @__PURE__ */ e(C, { direction: "row", gap: "4", children: l.map((u, a) => /* @__PURE__ */ e(v, { style: { flex: 1 }, children: /* @__PURE__ */ e(
-    S,
+  return /* @__PURE__ */ e(C, { direction: "row", gap: "4", children: l.map((h, i) => /* @__PURE__ */ e(f, { style: { flex: 1 }, children: /* @__PURE__ */ e(
+    k,
     {
-      uischema: u,
-      schema: d,
+      uischema: h,
+      schema: u,
       path: r,
-      renderers: p,
+      renderers: g,
       cells: m,
-      enabled: o
+      enabled: t
     }
-  ) }, `${r}-${a}`)) });
-}, Ne = z(1, N("HorizontalLayout")), $e = ({ uischema: n, schema: d, path: r, renderers: p, cells: m, enabled: o }) => {
-  const s = n, l = s.elements;
-  return /* @__PURE__ */ h(M, { mb: "4", children: [
-    s.label && /* @__PURE__ */ e(O, { size: "4", mb: "4", children: s.label }),
-    /* @__PURE__ */ e(C, { direction: "column", gap: "4", children: l.map((u, a) => /* @__PURE__ */ e(
-      S,
+  ) }, `${r}-${i}`)) });
+}, Ae = T(1, F("HorizontalLayout")), Se = ({ uischema: n, schema: u, path: r, renderers: g, cells: m, enabled: t }) => {
+  const a = n, l = a.elements;
+  return /* @__PURE__ */ c(E, { mb: "4", children: [
+    a.label && /* @__PURE__ */ e(M, { size: "4", mb: "4", children: a.label }),
+    /* @__PURE__ */ e(C, { direction: "column", gap: "4", children: l.map((h, i) => /* @__PURE__ */ e(
+      k,
       {
-        uischema: u,
-        schema: d,
+        uischema: h,
+        schema: u,
         path: r,
-        renderers: p,
+        renderers: g,
         cells: m,
-        enabled: o
+        enabled: t
       },
-      `${r}-${a}`
+      `${r}-${i}`
     )) })
   ] });
-}, De = z(1, N("Group")), ke = ({ uischema: n, schema: d, path: r, renderers: p, cells: m, enabled: o }) => {
-  var f;
-  const l = n.elements.filter((g) => g.type === "Category"), [u, a] = R(((f = l[0]) == null ? void 0 : f.label) || "");
+}, Ve = T(1, F("Group")), Be = ({ uischema: n, schema: u, path: r, renderers: g, cells: m, enabled: t }) => {
+  var y;
+  const l = n.elements.filter((p) => p.type === "Category"), [h, i] = S(((y = l[0]) == null ? void 0 : y.label) || "");
   if (!l.length) return null;
-  const b = l.find((g) => g.label === u) ? u : l[0].label;
-  return /* @__PURE__ */ h(L.Root, { value: b, onValueChange: a, children: [
-    /* @__PURE__ */ e(L.List, { children: l.map((g, i) => /* @__PURE__ */ e(L.Trigger, { value: g.label, children: g.label }, `${r}-${i}`)) }),
-    /* @__PURE__ */ e(v, { pt: "3", children: l.map((g, i) => /* @__PURE__ */ e(L.Content, { value: g.label, children: /* @__PURE__ */ e(C, { direction: "column", gap: "4", children: g.elements.map(($, w) => /* @__PURE__ */ e(
-      S,
+  const b = l.find((p) => p.label === h) ? h : l[0].label;
+  return /* @__PURE__ */ c(A.Root, { value: b, onValueChange: i, children: [
+    /* @__PURE__ */ e(A.List, { children: l.map((p, d) => /* @__PURE__ */ e(A.Trigger, { value: p.label, children: p.label }, `${r}-${d}`)) }),
+    /* @__PURE__ */ e(f, { pt: "3", children: l.map((p, d) => /* @__PURE__ */ e(A.Content, { value: p.label, children: /* @__PURE__ */ e(C, { direction: "column", gap: "4", children: p.elements.map(($, w) => /* @__PURE__ */ e(
+      k,
       {
         uischema: $,
-        schema: d,
+        schema: u,
         path: r,
-        renderers: p,
+        renderers: g,
         cells: m,
-        enabled: o
+        enabled: t
       },
-      `${r}-${i}-${w}`
-    )) }) }, `${r}-${i}`)) })
+      `${r}-${d}-${w}`
+    )) }) }, `${r}-${d}`)) })
   ] });
-}, Le = z(1, N("Categorization")), Re = ({ data: n, handleChange: d, path: r, label: p, required: m, uischema: o, enabled: s }) => {
-  const [l, u] = R(!1), [a, b] = R(null), [f, g] = R(null), i = te(null), $ = (o == null ? void 0 : o.options) || {}, w = $.maxSize || 5 * 1024 * 1024, F = $.accept || "image/*,application/pdf", x = s !== !1, P = () => f || (n ? "Uploaded File" : null), E = (t) => {
-    if (t.size > w) {
-      const y = (w / 1048576).toFixed(0);
-      b(`File size exceeds ${y}MB limit.`);
+}, Pe = T(1, F("Categorization")), Ee = ({ data: n, handleChange: u, path: r, label: g, required: m, uischema: t, enabled: a }) => {
+  const [l, h] = S(!1), [i, b] = S(null), [y, p] = S(null), d = ce(null), $ = (t == null ? void 0 : t.options) || {}, w = $.maxSize || 5 * 1024 * 1024, z = $.accept || "image/*,application/pdf", v = a !== !1, D = () => y || (n ? "Uploaded File" : null), I = (o) => {
+    if (o.size > w) {
+      const x = (w / 1048576).toFixed(0);
+      b(`File size exceeds ${x}MB limit.`);
       return;
     }
-    const K = F.split(",").map((y) => y.trim()).some((y) => y.endsWith("/*") ? t.type.startsWith(y.slice(0, -1)) : y.startsWith(".") ? t.name.toLowerCase().endsWith(y.toLowerCase()) : t.type === y);
-    if (F !== "*" && !K && !F.includes("*/*")) {
-      b(`Invalid file type. Accepted types: ${F}`);
+    const J = z.split(",").map((x) => x.trim()).some((x) => x.endsWith("/*") ? o.type.startsWith(x.slice(0, -1)) : x.startsWith(".") ? o.name.toLowerCase().endsWith(x.toLowerCase()) : o.type === x);
+    if (z !== "*" && !J && !z.includes("*/*")) {
+      b(`Invalid file type. Accepted types: ${z}`);
       return;
     }
-    const D = new FileReader();
-    D.onload = () => {
-      const y = D.result;
-      d(r, y), g(t.name), b(null);
-    }, D.onerror = () => {
+    const R = new FileReader();
+    R.onload = () => {
+      const x = R.result;
+      u(r, x), p(o.name), b(null);
+    }, R.onerror = () => {
       b("Failed to read file");
-    }, D.readAsDataURL(t);
-  }, I = (t) => {
-    t.preventDefault(), t.stopPropagation(), !(!x || n) && (t.type === "dragenter" || t.type === "dragover" ? u(!0) : t.type === "dragleave" && u(!1));
-  }, q = (t) => {
-    t.preventDefault(), t.stopPropagation(), u(!1), !(!x || n) && t.dataTransfer.files && t.dataTransfer.files[0] && E(t.dataTransfer.files[0]);
-  }, H = (t) => {
-    t.target.files && t.target.files[0] && E(t.target.files[0]);
+    }, R.readAsDataURL(o);
+  }, V = (o) => {
+    o.preventDefault(), o.stopPropagation(), !(!v || n) && (o.type === "dragenter" || o.type === "dragover" ? h(!0) : o.type === "dragleave" && h(!1));
+  }, q = (o) => {
+    o.preventDefault(), o.stopPropagation(), h(!1), !(!v || n) && o.dataTransfer.files && o.dataTransfer.files[0] && I(o.dataTransfer.files[0]);
+  }, H = (o) => {
+    o.target.files && o.target.files[0] && I(o.target.files[0]);
   }, G = () => {
-    x && (d(r, null), g(null), b(null), i.current && (i.current.value = ""));
+    v && (u(r, null), p(null), b(null), d.current && (d.current.value = ""));
   };
-  return /* @__PURE__ */ h(v, { mb: "4", children: [
-    /* @__PURE__ */ h(c, { as: "label", size: "2", weight: "bold", mb: "1", className: "block", children: [
-      p,
+  return /* @__PURE__ */ c(f, { mb: "4", children: [
+    /* @__PURE__ */ c(s, { as: "label", size: "2", weight: "bold", mb: "1", className: "block", children: [
+      g,
       " ",
       m && "*"
     ] }),
-    n ? /* @__PURE__ */ e(M, { size: "2", variant: "surface", className: "relative group", children: /* @__PURE__ */ h(C, { align: "center", gap: "3", children: [
-      /* @__PURE__ */ e(v, { className: "bg-blue-100 p-2 rounded text-blue-600", children: /* @__PURE__ */ e(oe, { width: "20", height: "20" }) }),
-      /* @__PURE__ */ h(v, { style: { flex: 1, overflow: "hidden" }, children: [
-        /* @__PURE__ */ e(c, { size: "2", weight: "bold", className: "block truncate", children: P() }),
-        x ? /* @__PURE__ */ e(c, { size: "1", color: "gray", children: "Ready to submit" }) : /* @__PURE__ */ e(
+    n ? /* @__PURE__ */ e(E, { size: "2", variant: "surface", className: "relative group", children: /* @__PURE__ */ c(C, { align: "center", gap: "3", children: [
+      /* @__PURE__ */ e(f, { className: "bg-blue-100 p-2 rounded text-blue-600", children: /* @__PURE__ */ e(se, { width: "20", height: "20" }) }),
+      /* @__PURE__ */ c(f, { style: { flex: 1, overflow: "hidden" }, children: [
+        /* @__PURE__ */ e(s, { size: "2", weight: "bold", className: "block truncate", children: D() }),
+        v ? /* @__PURE__ */ e(s, { size: "1", color: "gray", children: "Ready to submit" }) : /* @__PURE__ */ e(
           "a",
           {
             href: n,
-            download: f || "document",
+            download: y || "document",
             className: "text-xs text-blue-600 hover:underline cursor-pointer",
-            onClick: (t) => t.stopPropagation(),
+            onClick: (o) => o.stopPropagation(),
             children: "Download"
           }
         )
       ] }),
-      /* @__PURE__ */ h(C, { align: "center", gap: "2", children: [
-        /* @__PURE__ */ e(ne, { className: "text-green-600 w-5 h-5" }),
-        x && /* @__PURE__ */ e(
-          re,
+      /* @__PURE__ */ c(C, { align: "center", gap: "2", children: [
+        /* @__PURE__ */ e(ae, { className: "text-green-600 w-5 h-5" }),
+        v && /* @__PURE__ */ e(
+          ie,
           {
             variant: "ghost",
             color: "gray",
             onClick: G,
             className: "hover:text-red-600 transition-colors",
-            children: /* @__PURE__ */ e(le, {})
+            children: /* @__PURE__ */ e(de, {})
           }
         )
       ] })
-    ] }) }) : /* @__PURE__ */ h(
+    ] }) }) : /* @__PURE__ */ c(
       "div",
       {
         className: `
             border-2 border-dashed rounded-lg p-6 text-center transition-all duration-200 ease-in-out
             ${l ? "border-blue-500 bg-blue-50" : "border-gray-300 hover:border-blue-400 hover:bg-gray-50"}
-            ${a ? "border-red-300 bg-red-50" : ""}
-            ${x ? "cursor-pointer" : "opacity-60 cursor-not-allowed pointer-events-none"}
+            ${i ? "border-red-300 bg-red-50" : ""}
+            ${v ? "cursor-pointer" : "opacity-60 cursor-not-allowed pointer-events-none"}
           `,
-        onDragEnter: I,
-        onDragLeave: I,
-        onDragOver: I,
+        onDragEnter: V,
+        onDragLeave: V,
+        onDragOver: V,
         onDrop: q,
         onClick: () => {
-          var t;
-          return x && ((t = i.current) == null ? void 0 : t.click());
+          var o;
+          return v && ((o = d.current) == null ? void 0 : o.click());
         },
-        onKeyDown: (t) => {
-          var V;
-          x && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), (V = i.current) == null || V.click());
+        onKeyDown: (o) => {
+          var B;
+          v && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), (B = d.current) == null || B.click());
         },
         role: "button",
-        tabIndex: x ? 0 : -1,
+        tabIndex: v ? 0 : -1,
         children: [
           /* @__PURE__ */ e(
             "input",
             {
-              ref: i,
+              ref: d,
               type: "file",
               className: "hidden",
-              accept: F,
+              accept: z,
               onChange: H,
-              disabled: !x
+              disabled: !v
             }
           ),
-          /* @__PURE__ */ e(C, { direction: "column", align: "center", gap: "2", children: a ? /* @__PURE__ */ h(A, { children: [
-            /* @__PURE__ */ e(ie, { className: "w-8 h-8 text-red-500" }),
-            /* @__PURE__ */ e(c, { size: "2", color: "red", weight: "medium", children: a }),
-            /* @__PURE__ */ e(c, { size: "1", color: "gray", children: "Click to try again" })
-          ] }) : /* @__PURE__ */ h(A, { children: [
-            /* @__PURE__ */ e(ce, { className: "w-8 h-8 text-gray-400" }),
-            /* @__PURE__ */ e(c, { size: "2", weight: "medium", children: "Click to upload or drag and drop" }),
-            /* @__PURE__ */ h(c, { size: "1", color: "gray", children: [
+          /* @__PURE__ */ e(C, { direction: "column", align: "center", gap: "2", children: i ? /* @__PURE__ */ c(O, { children: [
+            /* @__PURE__ */ e(ue, { className: "w-8 h-8 text-red-500" }),
+            /* @__PURE__ */ e(s, { size: "2", color: "red", weight: "medium", children: i }),
+            /* @__PURE__ */ e(s, { size: "1", color: "gray", children: "Click to try again" })
+          ] }) : /* @__PURE__ */ c(O, { children: [
+            /* @__PURE__ */ e(he, { className: "w-8 h-8 text-gray-400" }),
+            /* @__PURE__ */ e(s, { size: "2", weight: "medium", children: "Click to upload or drag and drop" }),
+            /* @__PURE__ */ c(s, { size: "1", color: "gray", children: [
               "Max ",
               Math.round(w / (1024 * 1024)),
               "MB"
@@ -332,48 +332,136 @@ const se = ({ data: n, handleChange: d, path: r, label: p, required: m, errors:
       }
     )
   ] });
-}, Se = T(Re), Ie = z(
+}, Oe = N(Ee), We = T(
   3,
   // Rank
-  _("data-url")
-), Ve = ({ uischema: n, visible: d }) => {
+  ee("data-url")
+), je = ({
+  data: n,
+  path: u,
+  schema: r,
+  uischema: g,
+  enabled: m,
+  visible: t,
+  addItem: a,
+  removeItems: l,
+  rootSchema: h
+}) => {
+  const i = r.items;
+  if (t === !1 || !i || typeof i != "object" || Array.isArray(i))
+    return null;
+  const b = i, y = Array.isArray(n) ? n : [], p = r.title || "Array Items", d = () => {
+    const w = re(b, h);
+    a && a(u, w);
+  }, $ = (w) => {
+    if (l) {
+      const z = l(u, [w]);
+      z && z();
+    }
+  };
+  return /* @__PURE__ */ e(f, { mb: "6", children: /* @__PURE__ */ c(C, { direction: "column", gap: "4", children: [
+    /* @__PURE__ */ e(s, { as: "div", size: "4", weight: "bold", children: p }),
+    y.length === 0 && /* @__PURE__ */ e(f, { py: "4", px: "4", style: { backgroundColor: "var(--gray-3)", borderRadius: "var(--radius-3)" }, children: /* @__PURE__ */ e(s, { size: "2", color: "gray", children: "No items have been added yet." }) }),
+    y.map((w, z) => {
+      var D;
+      const v = `${u}.${z}`;
+      return /* @__PURE__ */ e(E, { size: "3", variant: "surface", children: /* @__PURE__ */ c(C, { direction: "column", gap: "4", children: [
+        /* @__PURE__ */ c(C, { justify: "between", align: "center", children: [
+          /* @__PURE__ */ c(s, { size: "3", weight: "bold", children: [
+            "Item ",
+            z + 1
+          ] }),
+          m && /* @__PURE__ */ c(
+            W,
+            {
+              color: "red",
+              variant: "soft",
+              onClick: () => $(z),
+              title: "Remove item",
+              children: [
+                /* @__PURE__ */ e(me, {}),
+                "Remove"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(
+          k,
+          {
+            schema: b,
+            uischema: ((D = g.options) == null ? void 0 : D.detail) || {
+              type: "VerticalLayout",
+              elements: Object.keys(
+                b.properties || {}
+              ).map((I) => ({
+                type: "Control",
+                scope: `#/properties/${I}`
+              }))
+            },
+            path: v,
+            enabled: m,
+            renderers: void 0,
+            cells: void 0
+          }
+        ) })
+      ] }) }, v);
+    }),
+    m && /* @__PURE__ */ e(f, { mt: "2", children: /* @__PURE__ */ c(
+      W,
+      {
+        variant: "surface",
+        onClick: d,
+        children: [
+          /* @__PURE__ */ e(pe, {}),
+          "Add Item"
+        ]
+      }
+    ) })
+  ] }) });
+}, Me = ne(je), qe = T(
+  2,
+  te(F("Control"), oe("array"))
+), He = ({ uischema: n, visible: u }) => {
   const r = n;
-  return d === !1 ? null : /* @__PURE__ */ e(v, { mb: "4", children: /* @__PURE__ */ e(O, { size: "4", children: r.text }) });
-}, Be = z(1, N("Label")), He = [
-  { tester: ae, renderer: de },
-  { tester: he, renderer: ge },
-  { tester: me, renderer: be },
-  { tester: Ce, renderer: ye },
-  { tester: ze, renderer: xe },
-  { tester: we, renderer: Te },
-  { tester: Ne, renderer: Fe },
-  { tester: De, renderer: $e },
-  { tester: Le, renderer: ke },
-  { tester: Ie, renderer: Se },
-  { tester: Be, renderer: Ve }
+  return u === !1 ? null : /* @__PURE__ */ e(f, { mb: "4", children: /* @__PURE__ */ e(M, { size: "4", children: r.text }) });
+}, Ge = T(1, F("Label")), Ze = [
+  { tester: be, renderer: ye },
+  { tester: Ce, renderer: ve },
+  { tester: Te, renderer: xe },
+  { tester: $e, renderer: Fe },
+  { tester: ke, renderer: De },
+  { tester: Re, renderer: Ie },
+  { tester: Ae, renderer: Le },
+  { tester: Ve, renderer: Se },
+  { tester: Pe, renderer: Be },
+  { tester: We, renderer: Oe },
+  { tester: qe, renderer: Me },
+  { tester: Ge, renderer: He }
 ];
 export {
-  pe as BooleanControl,
-  me as BooleanControlTester,
-  ke as CategorizationLayoutRenderer,
-  Le as CategorizationLayoutTester,
-  ve as DateControl,
-  ze as DateControlTester,
-  Se as FileControl,
-  Ie as FileControlTester,
-  $e as GroupLayoutRenderer,
-  De as GroupLayoutTester,
-  Fe as HorizontalLayoutRenderer,
-  Ne as HorizontalLayoutTester,
-  Ve as LabelRenderer,
-  Be as LabelTester,
-  ue as NumberControl,
-  he as NumberControlTester,
-  fe as SelectControl,
-  Ce as SelectControlTester,
-  se as TextControl,
-  ae as TextControlTester,
-  Te as VerticalLayoutRenderer,
-  we as VerticalLayoutTester,
-  He as radixRenderers
+  Me as ArrayControl,
+  qe as ArrayControlTester,
+  ze as BooleanControl,
+  Te as BooleanControlTester,
+  Be as CategorizationLayoutRenderer,
+  Pe as CategorizationLayoutTester,
+  Ne as DateControl,
+  ke as DateControlTester,
+  Oe as FileControl,
+  We as FileControlTester,
+  Se as GroupLayoutRenderer,
+  Ve as GroupLayoutTester,
+  Le as HorizontalLayoutRenderer,
+  Ae as HorizontalLayoutTester,
+  He as LabelRenderer,
+  Ge as LabelTester,
+  fe as NumberControl,
+  Ce as NumberControlTester,
+  we as SelectControl,
+  $e as SelectControlTester,
+  ge as TextControl,
+  be as TextControlTester,
+  Ie as VerticalLayoutRenderer,
+  Re as VerticalLayoutTester,
+  Ze as radixRenderers
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opennsw/jsonforms-renderers",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "main": "dist/renderers.cjs.js",
   "module": "dist/renderers.es.js",