form-component-library-demo 1.0.0

package/dist/src/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react");c=s(c,1);let l=require("react/jsx-runtime"),u=require("lucide-react");var d=`field_library_token`,f=`field_library_user`,p=class{constructor({baseUrl:e,appId:t,onAuthError:n}){if(!e)throw Error(`baseUrl is required`);if(!t)throw Error(`appId is required`);if(this.baseUrl=e.replace(/\/+$/,``),this.appId=t,this.onAuthError=n,this.token=null,this.user=null,typeof window<`u`){this.token=localStorage.getItem(d);try{let e=localStorage.getItem(f);e&&(this.user=JSON.parse(e))}catch{this.user=null}}}setAuthErrorHandler(e){this.onAuthError=e}setToken(e){this.token=e,!(typeof window>`u`)&&(e?localStorage.setItem(d,e):(localStorage.removeItem(d),localStorage.removeItem(f),this.user=null))}getToken(){return this.token}async request(e,t,n,r={}){let i={"Content-Type":`application/json`,...r};return this.token&&(i.Authorization=`Bearer ${this.token}`),this.send(e,t,{headers:i,body:n===void 0?void 0:JSON.stringify(n)})}async requestForm(e,t){let n={};return this.token&&(n.Authorization=`Bearer ${this.token}`),this.send(`POST`,e,{headers:n,body:t})}async send(e,t,n){let r=await fetch(`${this.baseUrl}${t}`,{method:e,...n});if(r.status===401)throw this.setToken(null),this.onAuthError?.(),{status:401,message:`Unauthorized`};if(!r.ok){let e=r.statusText;try{let t=await r.json();t.error&&(e=t.error)}catch{}throw{status:r.status,message:e}}if(r.status!==204)return await r.json()}async login(e,t,n){let r=await this.request(`POST`,`/usr/login`,{email:e,password:t,...n?{org_id:Number(n)}:{}});return this.setToken(r.token),typeof window<`u`&&r.user&&(this.user=r.user,localStorage.setItem(f,JSON.stringify(r.user))),r}logout(){this.setToken(null)}async getMe(){let e=await this.request(`GET`,`/usr/app/${this.appId}/me`);return this.user&&(this.user={...this.user,...e},typeof window<`u`&&localStorage.setItem(f,JSON.stringify(this.user))),e}currentUser(){if(!this.token)return null;if(this.user)return this.user;try{let e=JSON.parse(atob(this.token.split(`.`)[1]));return{id:String(e.user_id??e.sub??``),org_id:String(e.org_id??``),name:e.name??``,email:e.email??``,mobile:String(e.mobile??e.mobile_number??e.phone??e.phone_number??e.user_mobile??``),roles:e.roles??[],groups:e.groups??[]}}catch{return null}}recordView(e,t={}){return this.request(`POST`,`/app/${this.appId}/view/recordview`,{rv_template_uid:e,...t.presetAlias?{preset_alias:t.presetAlias}:{},search_query:{page:t.page??1,limit:t.limit??50,sort_by:t.sortBy??``,sort_dir:t.sortDir??`desc`,search:t.search??``,filters:(t.filters??[]).map(e=>{let t={field_key:e.field_key,data_type:e.data_type??`character varying`};return e.values&&e.values.length>0?t.values=e.values:(t.value=e.value??``,t.value2=``),t})}})}detailView(e,t){return this.request(`GET`,`/app/${this.appId}/view/detailview/${e}?instance_id=${encodeURIComponent(String(t))}`)}audit(e){return this.request(`GET`,`/app/${this.appId}/view/audit?instance_id=${encodeURIComponent(String(e))}`)}aiDecisions(e){return this.request(`GET`,`/monitor/decisions?instance_id=${encodeURIComponent(String(e))}`).then(e=>e.decisions??[])}formSchema(e,t){return this.request(`POST`,`/app/${this.appId}/view/form-screens`,{activity_id:e,device_type:`desktop`,...t==null?{}:{instance_id:t}})}startInstance(e,t,n){return this.request(`POST`,`/app/${this.appId}/start`,{workflow_uuid:e,activity_id:t,data:n})}performActivity(e,t,n,r){return this.request(`POST`,`/app/${this.appId}/activity`,{workflow_uuid:e,instance_id:typeof t==`string`&&Number(t)||t,activity_id:n,data:r})}lookupRecords(e,t,n){return this.request(`POST`,`/app/${this.appId}/rdbms-templates/${t}/records`,{workflow_uuid:e,activity_id:n.activityId,field_id:n.fieldId,instance_id:n.instanceId||void 0,search:n.search??``,limit:n.limit??50,offset:0,form_data:n.formData??{}})}wfLookupRecords(e,t){return this.request(`POST`,`/app/${this.appId}/wf-lookup/records`,{workflow_uuid:e,activity_id:t.activityId,field_id:t.fieldId,form_data:t.formData??{},search:t.search??``,limit:t.limit??100,offset:t.offset??0})}datasetOptions(e,t){return this.request(`POST`,`/app/${this.appId}/dataset-options`,{workflow_uuid:e,activity_id:t.activityId,field_id:t.fieldId,instance_id:t.instanceId||void 0,search:t.search??``,limit:t.limit??200,offset:0,form_data:t.formData??{}})}getDatasets(){return this.request(`GET`,`/app/${this.appId}/datasets`)}getDataset(e){return this.request(`GET`,`/app/${this.appId}/datasets/${e}`)}createDataset(e){return this.request(`POST`,`/app/${this.appId}/datasets`,e)}updateDataset(e,t){return this.request(`PUT`,`/app/${this.appId}/datasets/${e}`,t)}fieldForm(e,t,n){let r=new FormData;return r.append(`file`,t),r.append(`workflow_uuid`,e),r.append(`activity_id`,n.activityId),r.append(`field_id`,n.fieldId),n.instanceId!=null&&r.append(`instance_id`,String(n.instanceId)),r}uploadFile(e,t,n){return this.requestForm(`/app/${this.appId}/upload`,this.fieldForm(e,t,n))}async extractOcr(e,t,n){if(t instanceof File||t instanceof Blob){let r=new FormData;return r.append(`file`,t),r.append(`store_file`,`true`),r.append(`workflow_uuid`,e),r.append(`activity_id`,n.activityId),r.append(`field_id`,n.fieldId),n.versionUuid&&r.append(`version_uuid`,n.versionUuid),n.instanceId!=null&&r.append(`instance_id`,String(n.instanceId)),this.requestForm(`/app/${this.appId}/ocr-extract`,r)}{let r={workflow_uuid:e,activity_id:n.activityId,field_id:n.fieldId,version_uuid:n.versionUuid,files:[t]};return n.instanceId!=null&&(r.instance_id=Number(n.instanceId)),{...await this.request(`POST`,`/app/${this.appId}/ocr-extract`,r),file:t}}}async getFilePreviewBlob(e){let t={};this.token&&(t.Authorization=`Bearer ${this.token}`);let n=await fetch(`${this.baseUrl}/app/${this.appId}/view/files/${e}/preview`,{method:`GET`,headers:t});if(n.status===401)throw this.setToken(null),this.onAuthError?.(),{status:401,message:`Unauthorized`};if(!n.ok)throw{status:n.status,message:`Failed to fetch preview`};return await n.blob()}},m={imagePreviewLoading:`_imagePreviewLoading_1rk84_1`,spinner:`_spinner_1rk84_10`,"zf-spin":`_zf-spin_1rk84_1`,spinnerSm:`_spinnerSm_1rk84_19`,imagePreviewError:`_imagePreviewError_1rk84_28`,imagePreview:`_imagePreview_1rk84_1`},h=(...e)=>e.filter(Boolean).join(` `);function g({file:e,client:t,className:n=``}){let[r,i]=(0,c.useState)(null),[a,o]=(0,c.useState)(!1),[s,u]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{let n=null,r=!0;async function a(){if(!e){r&&i(null);return}if(e instanceof File){n=URL.createObjectURL(e),r&&i(n);return}if(e.uuid){r&&o(!0);try{let a=await t.getFilePreviewBlob(e.uuid);n=URL.createObjectURL(a),r&&i(n)}catch(e){console.error(`Failed to load image preview:`,e),r&&u(!0)}finally{r&&o(!1)}}}return a(),()=>{r=!1,n&&URL.revokeObjectURL(n)}},[e,t]),a?(0,l.jsx)(`div`,{className:h(m.imagePreviewLoading,n),children:(0,l.jsx)(`div`,{className:h(m.spinner,m.spinnerSm)})}):s||!r?(0,l.jsx)(`div`,{className:h(m.imagePreviewError,n),children:s?`Preview failed`:`No preview`}):(0,l.jsx)(`img`,{src:r,alt:`Preview`,className:h(m.imagePreview,n)})}var _={fieldContainer:`_fieldContainer_rw765_2`,label:`_label_rw765_14`,fieldBody:`_fieldBody_rw765_20`,sizeSm:`_sizeSm_rw765_27`,dropzone:`_dropzone_rw765_27`,sizeMd:`_sizeMd_rw765_28`,sizeLg:`_sizeLg_rw765_29`,variantPrimary:`_variantPrimary_rw765_32`,dropzoneIcon:`_dropzoneIcon_rw765_34`,dropzoneText:`_dropzoneText_rw765_34`,variantSecondary:`_variantSecondary_rw765_36`,variantDanger:`_variantDanger_rw765_40`,dropzoneLoading:`_dropzoneLoading_rw765_58`,spinner:`_spinner_rw765_100`,"zf-spin":`_zf-spin_rw765_1`,spinnerSm:`_spinnerSm_rw765_114`,previewList:`_previewList_rw765_124`,previewCard:`_previewCard_rw765_131`,previewSizeSm:`_previewSizeSm_rw765_141`,previewSizeMd:`_previewSizeMd_rw765_142`,previewSizeLg:`_previewSizeLg_rw765_143`,documentPreview:`_documentPreview_rw765_145`,fileIcon:`_fileIcon_rw765_161`,documentName:`_documentName_rw765_168`,removeBtn:`_removeBtn_rw765_178`,retryBtnIcon:`_retryBtnIcon_rw765_198`,overlay:`_overlay_rw765_218`,extractedPanel:`_extractedPanel_rw765_230`,extractedTitle:`_extractedTitle_rw765_239`,extractedList:`_extractedList_rw765_246`,extractedItem:`_extractedItem_rw765_252`,extractedKey:`_extractedKey_rw765_263`,extractedVal:`_extractedVal_rw765_270`,hidden:`_hidden_rw765_282`,errorText:`_errorText_rw765_283`,btnSecondary:`_btnSecondary_rw765_284`},v=(...e)=>e.filter(Boolean).join(` `),y=e=>{let t=e.name||e.original_name||``,n=e.type||e.mime_type||``;return t.endsWith(`.pdf`)||n.includes(`pdf`)||t.match(/\.(doc|docx|txt)$/i)?(0,l.jsx)(u.FileText,{className:_.fileIcon}):(0,l.jsx)(u.File,{className:_.fileIcon})};function b({label:e,value:t,onChange:n,onExtracted:r,onProcess:i,fieldMap:a,showExtracted:o=!0,accept:s=`image/*,application/pdf`,variant:d=`primary`,size:f=`md`,previewSize:p=`md`,width:m=`full`,className:h=``}){let[b,x]=(0,c.useState)(!1),[S,C]=(0,c.useState)(null),[w,T]=(0,c.useState)(null),E=(0,c.useRef)(null),D=Array.isArray(t)?t:t?[t]:[],O=e=>{if(e.file&&n(e.file),e.extract_error)C(e.extract_error);else if(e.extracted){T(e.extracted);let t={...e.extracted};if(a){if(t={},Array.isArray(a))for(let[n,r]of Object.entries(e.extracted)){let e=a.find(e=>e.source===n||e.extractKey===n),i=e?e.target||e.fieldId:n;t[i]=r}else for(let[n,r]of Object.entries(e.extracted)){let e=a[n]||n;t[e]=r}}r&&r(t)}},k=async e=>{let t=e.target.files?.[0];if(t){x(!0),C(null),T(null);try{let e=await i(t);O(e)}catch(e){console.error(e),C(`OCR extraction failed`)}finally{x(!1),E.current&&(E.current.value=``)}}},A=async e=>{x(!0),C(null);try{let t=await i(e);O(t)}catch(e){console.error(e),C(`OCR extraction retry failed`)}finally{x(!1)}},j=e=>{let t=[...D];if(t.splice(e,1),n(t.length===0?null:t),t.length===0){if(w&&r){let e={};if(a){if(Array.isArray(a))for(let t of Object.keys(w)){let n=a.find(e=>e.source===t||e.extractKey===t),r=n?n.target||n.fieldId:t;e[r]=``}else for(let t of Object.keys(w)){let n=a[t]||t;e[n]=``}}else for(let t of Object.keys(w))e[t]=``;r(e)}T(null)}},M=e=>e instanceof File?e.type.startsWith(`image/`):e.mime_type?e.mime_type.startsWith(`image/`):e.original_name?/\.(jpg|jpeg|png|gif|webp)$/i.test(e.original_name):!1,N=m===`full`?{width:`100%`}:{width:m};return(0,l.jsxs)(`div`,{className:v(_.fieldContainer,_[`variant${d.charAt(0).toUpperCase()+d.slice(1)}`],_[`size${f.charAt(0).toUpperCase()+f.slice(1)}`],_[`previewSize${p.charAt(0).toUpperCase()+p.slice(1)}`],h),style:N,children:[(0,l.jsxs)(`label`,{className:_.label,children:[e,` (OCR)`]}),(0,l.jsxs)(`div`,{className:_.fieldBody,children:[D.length===0&&(0,l.jsxs)(`div`,{className:v(_.dropzone,b&&_.dropzoneLoading),onClick:()=>E.current?.click(),children:[(0,l.jsx)(`input`,{ref:E,type:`file`,onChange:k,disabled:b,accept:s,className:_.hidden}),b?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`div`,{className:v(_.spinner,_.spinnerSm,_.dropzoneIcon)}),(0,l.jsx)(`p`,{className:_.dropzoneText,children:`Extracting OCR data...`})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(u.FileUp,{className:_.dropzoneIcon}),(0,l.jsx)(`p`,{className:_.dropzoneText,children:`Drop a document to extract`})]})]}),D.length>0&&(0,l.jsx)(`div`,{className:_.previewList,children:D.map((e,t)=>(0,l.jsxs)(`div`,{className:_.previewCard,children:[M(e)?(0,l.jsx)(g,{file:e}):(0,l.jsxs)(`div`,{className:_.documentPreview,children:[y(e),(0,l.jsx)(`span`,{className:_.documentName,title:e.name||e.original_name,children:e.name||e.original_name||`Document`})]}),b&&(0,l.jsx)(`div`,{className:_.overlay,children:(0,l.jsx)(`div`,{className:_.spinner})}),!b&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`button`,{type:`button`,onClick:()=>A(e),className:_.retryBtnIcon,title:`Retry extraction`,children:(0,l.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`12`,height:`12`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,l.jsx)(`path`,{d:`M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`}),(0,l.jsx)(`path`,{d:`M3 3v5h5`}),(0,l.jsx)(`path`,{d:`M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16`}),(0,l.jsx)(`path`,{d:`M16 21v-5h5`})]})}),(0,l.jsx)(`button`,{type:`button`,onClick:()=>j(t),className:_.removeBtn,title:`Remove file`,children:(0,l.jsx)(u.X,{size:12,strokeWidth:3})})]})]},t))}),S&&(0,l.jsxs)(`div`,{className:_.fieldBody,children:[(0,l.jsx)(`p`,{className:_.errorText,children:S}),D.length>0&&!w&&(0,l.jsx)(`button`,{type:`button`,onClick:()=>A(D[0]),disabled:b,className:_.btnSecondary,style:{alignSelf:`flex-start`},children:b?`Retrying...`:`Retry Extraction`})]}),o&&w&&(0,l.jsxs)(`div`,{className:_.extractedPanel,children:[(0,l.jsx)(`p`,{className:_.extractedTitle,children:`Extracted Data`}),(0,l.jsx)(`div`,{className:_.extractedList,children:Object.entries(w).map(([e,t])=>(0,l.jsxs)(`div`,{className:_.extractedItem,children:[(0,l.jsx)(`span`,{className:_.extractedKey,children:e.replace(/_/g,` `)}),(0,l.jsx)(`span`,{className:_.extractedVal,children:String(t)})]},e))})]})]})]})}exports.ImagePreview=g,exports.OcrField=b,exports.ZinoClient=p;

package/dist/src/index.css

@@ -0,0 +1,2 @@
+:root{--zf-primary-color:#3b82f6;--zf-primary-hover:#2563eb;--zf-primary-bg-subtle:#3b82f605;--zf-primary-bg-hover:#3b82f614;--zf-secondary-color:#64748b;--zf-secondary-hover:#475569;--zf-secondary-bg-hover:#64748b14;--zf-danger-color:#ef4444;--zf-danger-hover:#dc2828;--zf-danger-bg:#fee2e2;--zf-danger-bg-hover:#ef444426;--zf-border-color:#e2e8f0;--zf-text-color:#0f172a;--zf-text-muted:#64748b;--zf-text-inverse:#fff;--zf-surface-bg:#fff;--zf-surface-subtle:#f1f5f9;--zf-surface-overlay:#ffffffb3;--zf-font-family:inherit;--zf-font-size-xs:.75rem;--zf-font-size-sm:.875rem;--zf-font-size-md:1rem;--zf-font-size-lg:1.125rem;--zf-font-weight-normal:400;--zf-font-weight-medium:500;--zf-font-weight-semibold:600;--zf-font-weight-bold:700;--zf-spacing-1:.25rem;--zf-spacing-1-5:.375rem;--zf-spacing-2:.5rem;--zf-spacing-3:.75rem;--zf-spacing-4:1rem;--zf-spacing-5:1.25rem;--zf-spacing-6:1.5rem;--zf-spacing-8:2rem;--zf-spacing-16:4rem;--zf-radius-sm:.25rem;--zf-radius-md:.375rem;--zf-radius:.5rem;--zf-radius-lg:.5rem;--zf-radius-full:9999px;--zf-shadow-sm:0 1px 2px 0 #0000000d;--zf-shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--zf-shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--zf-screen-sm:640px;--zf-screen-md:768px;--zf-screen-lg:1024px;--zf-screen-xl:1280px;--zf-z-base:1;--zf-z-overlay:10;--zf-z-modal:50;--zf-z-max:9999}._imagePreviewLoading_1rk84_1{background-color:var(--zf-surface-subtle);justify-content:center;align-items:center;width:100%;height:100%;display:flex}._spinner_1rk84_10{width:var(--zf-spacing-8);height:var(--zf-spacing-8);border:2px solid var(--zf-primary-color);border-radius:var(--zf-radius-full);border-top-color:#0000;animation:1s linear infinite _zf-spin_1rk84_1}._spinnerSm_1rk84_19{width:var(--zf-spacing-6);height:var(--zf-spacing-6)}@keyframes _zf-spin_1rk84_1{to{transform:rotate(360deg)}}._imagePreviewError_1rk84_28{background-color:var(--zf-danger-bg);color:var(--zf-danger-color);font-size:var(--zf-font-size-xs);text-align:center;padding:var(--zf-spacing-2);justify-content:center;align-items:center;width:100%;height:100%;display:flex}._imagePreview_1rk84_1{object-fit:cover;width:100%;height:100%}._fieldContainer_rw765_2{gap:var(--zf-spacing-2);font-family:var(--zf-font-family);box-sizing:border-box;flex-direction:column;display:flex}._fieldContainer_rw765_2 *{box-sizing:border-box}._label_rw765_14{font-size:var(--zf-font-size-sm);font-weight:var(--zf-font-weight-semibold);color:var(--zf-text-color)}._fieldBody_rw765_20{gap:var(--zf-spacing-3);flex-direction:column;display:flex}._sizeSm_rw765_27 ._dropzone_rw765_27{padding:var(--zf-spacing-4);min-height:auto}._sizeMd_rw765_28 ._dropzone_rw765_27{padding:var(--zf-spacing-8) var(--zf-spacing-6)}._sizeLg_rw765_29 ._dropzone_rw765_27{padding:var(--zf-spacing-16) var(--zf-spacing-8)}._variantPrimary_rw765_32 ._dropzone_rw765_27{border-color:var(--zf-primary-color);background-color:var(--zf-primary-bg-subtle)}._variantPrimary_rw765_32 ._dropzone_rw765_27:hover{border-color:var(--zf-primary-hover);background-color:var(--zf-primary-bg-hover)}._variantPrimary_rw765_32 ._dropzoneIcon_rw765_34,._variantPrimary_rw765_32 ._dropzoneText_rw765_34{color:var(--zf-primary-color)}._variantSecondary_rw765_36 ._dropzone_rw765_27{border-color:var(--zf-border-color);background-color:var(--zf-surface-subtle)}._variantSecondary_rw765_36 ._dropzone_rw765_27:hover{border-color:var(--zf-secondary-color);background-color:var(--zf-secondary-bg-hover)}._variantSecondary_rw765_36 ._dropzoneIcon_rw765_34{color:var(--zf-secondary-color)}._variantDanger_rw765_40 ._dropzone_rw765_27{border-color:var(--zf-danger-color);background-color:var(--zf-danger-bg)}._variantDanger_rw765_40 ._dropzone_rw765_27:hover{border-color:var(--zf-danger-hover);background-color:var(--zf-danger-bg-hover)}._variantDanger_rw765_40 ._dropzoneIcon_rw765_34,._variantDanger_rw765_40 ._dropzoneText_rw765_34{color:var(--zf-danger-color)}._dropzone_rw765_27{border:1px dashed var(--zf-border-color);border-radius:var(--zf-radius);text-align:center;cursor:pointer;background-color:#0000;flex-direction:column;justify-content:center;align-items:center;transition:all .2s;display:flex}._dropzoneLoading_rw765_58{opacity:.5;pointer-events:none}._dropzoneIcon_rw765_34{width:var(--zf-spacing-5);height:var(--zf-spacing-5);color:var(--zf-text-muted);margin-bottom:var(--zf-spacing-1-5);transition:color .2s}._dropzoneText_rw765_34{font-size:var(--zf-font-size-sm);font-weight:var(--zf-font-weight-medium);color:var(--zf-text-muted);margin:0;transition:color .2s}._variantPrimary_rw765_32 ._dropzone_rw765_27:hover:not(._dropzoneLoading_rw765_58){border-color:var(--zf-primary-color)}._variantPrimary_rw765_32 ._dropzone_rw765_27:hover:not(._dropzoneLoading_rw765_58) ._dropzoneIcon_rw765_34,._variantPrimary_rw765_32 ._dropzone_rw765_27:hover:not(._dropzoneLoading_rw765_58) ._dropzoneText_rw765_34{color:var(--zf-primary-color)}._variantSecondary_rw765_36 ._dropzone_rw765_27{border-color:var(--zf-secondary-color)}._variantSecondary_rw765_36 ._dropzone_rw765_27:hover:not(._dropzoneLoading_rw765_58){border-color:var(--zf-text-color)}._variantSecondary_rw765_36 ._dropzone_rw765_27:hover:not(._dropzoneLoading_rw765_58) ._dropzoneIcon_rw765_34,._variantSecondary_rw765_36 ._dropzone_rw765_27:hover:not(._dropzoneLoading_rw765_58) ._dropzoneText_rw765_34{color:var(--zf-text-color)}._spinner_rw765_100{width:var(--zf-spacing-8);height:var(--zf-spacing-8);border:2px solid var(--zf-primary-color);border-radius:var(--zf-radius-full);border-top-color:#0000;animation:1s linear infinite _zf-spin_rw765_1}._variantSecondary_rw765_36 ._spinner_rw765_100{border-color:var(--zf-secondary-color);border-top-color:#0000}._spinnerSm_rw765_114{width:var(--zf-spacing-6);height:var(--zf-spacing-6)}@keyframes _zf-spin_rw765_1{to{transform:rotate(360deg)}}._previewList_rw765_124{gap:var(--zf-spacing-3);margin-top:var(--zf-spacing-2);flex-wrap:wrap;display:flex}._previewCard_rw765_131{border-radius:var(--zf-radius);border:1px solid var(--zf-border-color);background-color:var(--zf-surface-bg);box-shadow:var(--zf-shadow-sm);flex-shrink:0;position:relative;overflow:hidden}._previewSizeSm_rw765_141 ._previewCard_rw765_131{width:4rem;height:4rem}._previewSizeMd_rw765_142 ._previewCard_rw765_131{width:9rem;height:9rem}._previewSizeLg_rw765_143 ._previewCard_rw765_131{width:12rem;height:12rem}._documentPreview_rw765_145{width:100%;height:100%;padding:var(--zf-spacing-2);font-size:var(--zf-font-size-xs);text-align:center;word-break:break-all;color:var(--zf-text-muted);background-color:var(--zf-surface-subtle);justify-content:center;align-items:center;gap:var(--zf-spacing-1-5);flex-direction:column;display:flex}._fileIcon_rw765_161{width:var(--zf-spacing-6);height:var(--zf-spacing-6);color:var(--zf-secondary-color);flex-shrink:0}._documentName_rw765_168{-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;width:100%;display:-webkit-box;overflow:hidden}._removeBtn_rw765_178{top:var(--zf-spacing-1);right:var(--zf-spacing-1);background-color:var(--zf-danger-color);color:var(--zf-text-inverse);border-radius:var(--zf-radius-full);width:var(--zf-spacing-6);height:var(--zf-spacing-6);cursor:pointer;box-shadow:var(--zf-shadow-sm);border:none;justify-content:center;align-items:center;padding:0;transition:background-color .2s;display:flex;position:absolute}._removeBtn_rw765_178:hover{background-color:var(--zf-danger-hover)}._retryBtnIcon_rw765_198{top:var(--zf-spacing-1);right:var(--zf-spacing-8);background-color:var(--zf-secondary-color);color:var(--zf-text-inverse);border-radius:var(--zf-radius-full);width:var(--zf-spacing-6);height:var(--zf-spacing-6);cursor:pointer;box-shadow:var(--zf-shadow-sm);border:none;justify-content:center;align-items:center;padding:0;transition:background-color .2s;display:flex;position:absolute}._retryBtnIcon_rw765_198:hover{background-color:var(--zf-secondary-hover)}._overlay_rw765_218{background-color:var(--zf-surface-overlay);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:var(--zf-z-overlay);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._extractedPanel_rw765_230{margin-top:var(--zf-spacing-3);padding:var(--zf-spacing-4);background-color:var(--zf-surface-bg);border-radius:var(--zf-radius);border:1px solid var(--zf-border-color);box-shadow:var(--zf-shadow-sm)}._extractedTitle_rw765_239{color:var(--zf-text-color);font-weight:var(--zf-font-weight-semibold);font-size:var(--zf-font-size-sm);margin:0 0 var(--zf-spacing-2) 0}._extractedList_rw765_246{gap:var(--zf-spacing-2);grid-template-columns:1fr;display:grid}._extractedItem_rw765_252{padding:var(--zf-spacing-1) 0;border-bottom:1px solid var(--zf-border-color);justify-content:space-between;align-items:center;display:flex}._extractedItem_rw765_252:last-child{border-bottom:none}._extractedKey_rw765_263{font-size:var(--zf-font-size-xs);font-weight:var(--zf-font-weight-semibold);color:var(--zf-text-muted);text-transform:uppercase}._extractedVal_rw765_270{font-size:var(--zf-font-size-sm);font-weight:var(--zf-font-weight-medium);color:var(--zf-text-color);text-align:right;white-space:nowrap;text-overflow:ellipsis;max-width:60%;overflow:hidden}._hidden_rw765_282{display:none}._errorText_rw765_283{color:var(--zf-danger-color);font-size:var(--zf-font-size-sm);font-weight:var(--zf-font-weight-medium);margin:0}._btnSecondary_rw765_284{font-size:var(--zf-font-size-xs);font-weight:var(--zf-font-weight-semibold);padding:var(--zf-spacing-1-5) var(--zf-spacing-3);background-color:var(--zf-surface-subtle);color:var(--zf-text-color);border:1px solid var(--zf-border-color);border-radius:var(--zf-radius-md);cursor:pointer;box-shadow:var(--zf-shadow-sm);transition:all .2s}._btnSecondary_rw765_284:hover:not(:disabled){background-color:var(--zf-border-color)}._btnSecondary_rw765_284:disabled{opacity:.5;cursor:not-allowed}
+/*$vite$:1*/

package/dist/src/index.js

@@ -0,0 +1,511 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { File as o, FileText as s, FileUp as c, X as l } from "lucide-react";
+//#region src/ZinoClient.js
+var u = "field_library_token", d = "field_library_user", f = class {
+	constructor({ baseUrl: e, appId: t, onAuthError: n }) {
+		if (!e) throw Error("baseUrl is required");
+		if (!t) throw Error("appId is required");
+		if (this.baseUrl = e.replace(/\/+$/, ""), this.appId = t, this.onAuthError = n, this.token = null, this.user = null, typeof window < "u") {
+			this.token = localStorage.getItem(u);
+			try {
+				let e = localStorage.getItem(d);
+				e && (this.user = JSON.parse(e));
+			} catch {
+				this.user = null;
+			}
+		}
+	}
+	setAuthErrorHandler(e) {
+		this.onAuthError = e;
+	}
+	setToken(e) {
+		this.token = e, !(typeof window > "u") && (e ? localStorage.setItem(u, e) : (localStorage.removeItem(u), localStorage.removeItem(d), this.user = null));
+	}
+	getToken() {
+		return this.token;
+	}
+	async request(e, t, n, r = {}) {
+		let i = {
+			"Content-Type": "application/json",
+			...r
+		};
+		return this.token && (i.Authorization = `Bearer ${this.token}`), this.send(e, t, {
+			headers: i,
+			body: n === void 0 ? void 0 : JSON.stringify(n)
+		});
+	}
+	async requestForm(e, t) {
+		let n = {};
+		return this.token && (n.Authorization = `Bearer ${this.token}`), this.send("POST", e, {
+			headers: n,
+			body: t
+		});
+	}
+	async send(e, t, n) {
+		let r = await fetch(`${this.baseUrl}${t}`, {
+			method: e,
+			...n
+		});
+		if (r.status === 401) throw this.setToken(null), this.onAuthError?.(), {
+			status: 401,
+			message: "Unauthorized"
+		};
+		if (!r.ok) {
+			let e = r.statusText;
+			try {
+				let t = await r.json();
+				t.error && (e = t.error);
+			} catch {}
+			throw {
+				status: r.status,
+				message: e
+			};
+		}
+		if (r.status !== 204) return await r.json();
+	}
+	async login(e, t, n) {
+		let r = await this.request("POST", "/usr/login", {
+			email: e,
+			password: t,
+			...n ? { org_id: Number(n) } : {}
+		});
+		return this.setToken(r.token), typeof window < "u" && r.user && (this.user = r.user, localStorage.setItem(d, JSON.stringify(r.user))), r;
+	}
+	logout() {
+		this.setToken(null);
+	}
+	async getMe() {
+		let e = await this.request("GET", `/usr/app/${this.appId}/me`);
+		return this.user && (this.user = {
+			...this.user,
+			...e
+		}, typeof window < "u" && localStorage.setItem(d, JSON.stringify(this.user))), e;
+	}
+	currentUser() {
+		if (!this.token) return null;
+		if (this.user) return this.user;
+		try {
+			let e = JSON.parse(atob(this.token.split(".")[1]));
+			return {
+				id: String(e.user_id ?? e.sub ?? ""),
+				org_id: String(e.org_id ?? ""),
+				name: e.name ?? "",
+				email: e.email ?? "",
+				mobile: String(e.mobile ?? e.mobile_number ?? e.phone ?? e.phone_number ?? e.user_mobile ?? ""),
+				roles: e.roles ?? [],
+				groups: e.groups ?? []
+			};
+		} catch {
+			return null;
+		}
+	}
+	recordView(e, t = {}) {
+		return this.request("POST", `/app/${this.appId}/view/recordview`, {
+			rv_template_uid: e,
+			...t.presetAlias ? { preset_alias: t.presetAlias } : {},
+			search_query: {
+				page: t.page ?? 1,
+				limit: t.limit ?? 50,
+				sort_by: t.sortBy ?? "",
+				sort_dir: t.sortDir ?? "desc",
+				search: t.search ?? "",
+				filters: (t.filters ?? []).map((e) => {
+					let t = {
+						field_key: e.field_key,
+						data_type: e.data_type ?? "character varying"
+					};
+					return e.values && e.values.length > 0 ? t.values = e.values : (t.value = e.value ?? "", t.value2 = ""), t;
+				})
+			}
+		});
+	}
+	detailView(e, t) {
+		return this.request("GET", `/app/${this.appId}/view/detailview/${e}?instance_id=${encodeURIComponent(String(t))}`);
+	}
+	audit(e) {
+		return this.request("GET", `/app/${this.appId}/view/audit?instance_id=${encodeURIComponent(String(e))}`);
+	}
+	aiDecisions(e) {
+		return this.request("GET", `/monitor/decisions?instance_id=${encodeURIComponent(String(e))}`).then((e) => e.decisions ?? []);
+	}
+	formSchema(e, t) {
+		return this.request("POST", `/app/${this.appId}/view/form-screens`, {
+			activity_id: e,
+			device_type: "desktop",
+			...t == null ? {} : { instance_id: t }
+		});
+	}
+	startInstance(e, t, n) {
+		return this.request("POST", `/app/${this.appId}/start`, {
+			workflow_uuid: e,
+			activity_id: t,
+			data: n
+		});
+	}
+	performActivity(e, t, n, r) {
+		return this.request("POST", `/app/${this.appId}/activity`, {
+			workflow_uuid: e,
+			instance_id: typeof t == "string" && Number(t) || t,
+			activity_id: n,
+			data: r
+		});
+	}
+	lookupRecords(e, t, n) {
+		return this.request("POST", `/app/${this.appId}/rdbms-templates/${t}/records`, {
+			workflow_uuid: e,
+			activity_id: n.activityId,
+			field_id: n.fieldId,
+			instance_id: n.instanceId || void 0,
+			search: n.search ?? "",
+			limit: n.limit ?? 50,
+			offset: 0,
+			form_data: n.formData ?? {}
+		});
+	}
+	wfLookupRecords(e, t) {
+		return this.request("POST", `/app/${this.appId}/wf-lookup/records`, {
+			workflow_uuid: e,
+			activity_id: t.activityId,
+			field_id: t.fieldId,
+			form_data: t.formData ?? {},
+			search: t.search ?? "",
+			limit: t.limit ?? 100,
+			offset: t.offset ?? 0
+		});
+	}
+	datasetOptions(e, t) {
+		return this.request("POST", `/app/${this.appId}/dataset-options`, {
+			workflow_uuid: e,
+			activity_id: t.activityId,
+			field_id: t.fieldId,
+			instance_id: t.instanceId || void 0,
+			search: t.search ?? "",
+			limit: t.limit ?? 200,
+			offset: 0,
+			form_data: t.formData ?? {}
+		});
+	}
+	getDatasets() {
+		return this.request("GET", `/app/${this.appId}/datasets`);
+	}
+	getDataset(e) {
+		return this.request("GET", `/app/${this.appId}/datasets/${e}`);
+	}
+	createDataset(e) {
+		return this.request("POST", `/app/${this.appId}/datasets`, e);
+	}
+	updateDataset(e, t) {
+		return this.request("PUT", `/app/${this.appId}/datasets/${e}`, t);
+	}
+	fieldForm(e, t, n) {
+		let r = new FormData();
+		return r.append("file", t), r.append("workflow_uuid", e), r.append("activity_id", n.activityId), r.append("field_id", n.fieldId), n.instanceId != null && r.append("instance_id", String(n.instanceId)), r;
+	}
+	uploadFile(e, t, n) {
+		return this.requestForm(`/app/${this.appId}/upload`, this.fieldForm(e, t, n));
+	}
+	async extractOcr(e, t, n) {
+		if (t instanceof File || t instanceof Blob) {
+			let r = new FormData();
+			return r.append("file", t), r.append("store_file", "true"), r.append("workflow_uuid", e), r.append("activity_id", n.activityId), r.append("field_id", n.fieldId), n.versionUuid && r.append("version_uuid", n.versionUuid), n.instanceId != null && r.append("instance_id", String(n.instanceId)), this.requestForm(`/app/${this.appId}/ocr-extract`, r);
+		}
+		{
+			let r = {
+				workflow_uuid: e,
+				activity_id: n.activityId,
+				field_id: n.fieldId,
+				version_uuid: n.versionUuid,
+				files: [t]
+			};
+			return n.instanceId != null && (r.instance_id = Number(n.instanceId)), {
+				...await this.request("POST", `/app/${this.appId}/ocr-extract`, r),
+				file: t
+			};
+		}
+	}
+	async getFilePreviewBlob(e) {
+		let t = {};
+		this.token && (t.Authorization = `Bearer ${this.token}`);
+		let n = await fetch(`${this.baseUrl}/app/${this.appId}/view/files/${e}/preview`, {
+			method: "GET",
+			headers: t
+		});
+		if (n.status === 401) throw this.setToken(null), this.onAuthError?.(), {
+			status: 401,
+			message: "Unauthorized"
+		};
+		if (!n.ok) throw {
+			status: n.status,
+			message: "Failed to fetch preview"
+		};
+		return await n.blob();
+	}
+}, p = {
+	imagePreviewLoading: "_imagePreviewLoading_1rk84_1",
+	spinner: "_spinner_1rk84_10",
+	"zf-spin": "_zf-spin_1rk84_1",
+	spinnerSm: "_spinnerSm_1rk84_19",
+	imagePreviewError: "_imagePreviewError_1rk84_28",
+	imagePreview: "_imagePreview_1rk84_1"
+}, m = (...e) => e.filter(Boolean).join(" ");
+function h({ file: t, client: r, className: a = "" }) {
+	let [o, s] = n(null), [c, l] = n(!1), [u, d] = n(!1);
+	return e(() => {
+		let e = null, n = !0;
+		async function i() {
+			if (!t) {
+				n && s(null);
+				return;
+			}
+			if (t instanceof File) {
+				e = URL.createObjectURL(t), n && s(e);
+				return;
+			}
+			if (t.uuid) {
+				n && l(!0);
+				try {
+					let i = await r.getFilePreviewBlob(t.uuid);
+					e = URL.createObjectURL(i), n && s(e);
+				} catch (e) {
+					console.error("Failed to load image preview:", e), n && d(!0);
+				} finally {
+					n && l(!1);
+				}
+			}
+		}
+		return i(), () => {
+			n = !1, e && URL.revokeObjectURL(e);
+		};
+	}, [t, r]), c ? /* @__PURE__ */ i("div", {
+		className: m(p.imagePreviewLoading, a),
+		children: /* @__PURE__ */ i("div", { className: m(p.spinner, p.spinnerSm) })
+	}) : u || !o ? /* @__PURE__ */ i("div", {
+		className: m(p.imagePreviewError, a),
+		children: u ? "Preview failed" : "No preview"
+	}) : /* @__PURE__ */ i("img", {
+		src: o,
+		alt: "Preview",
+		className: m(p.imagePreview, a)
+	});
+}
+var g = {
+	fieldContainer: "_fieldContainer_rw765_2",
+	label: "_label_rw765_14",
+	fieldBody: "_fieldBody_rw765_20",
+	sizeSm: "_sizeSm_rw765_27",
+	dropzone: "_dropzone_rw765_27",
+	sizeMd: "_sizeMd_rw765_28",
+	sizeLg: "_sizeLg_rw765_29",
+	variantPrimary: "_variantPrimary_rw765_32",
+	dropzoneIcon: "_dropzoneIcon_rw765_34",
+	dropzoneText: "_dropzoneText_rw765_34",
+	variantSecondary: "_variantSecondary_rw765_36",
+	variantDanger: "_variantDanger_rw765_40",
+	dropzoneLoading: "_dropzoneLoading_rw765_58",
+	spinner: "_spinner_rw765_100",
+	"zf-spin": "_zf-spin_rw765_1",
+	spinnerSm: "_spinnerSm_rw765_114",
+	previewList: "_previewList_rw765_124",
+	previewCard: "_previewCard_rw765_131",
+	previewSizeSm: "_previewSizeSm_rw765_141",
+	previewSizeMd: "_previewSizeMd_rw765_142",
+	previewSizeLg: "_previewSizeLg_rw765_143",
+	documentPreview: "_documentPreview_rw765_145",
+	fileIcon: "_fileIcon_rw765_161",
+	documentName: "_documentName_rw765_168",
+	removeBtn: "_removeBtn_rw765_178",
+	retryBtnIcon: "_retryBtnIcon_rw765_198",
+	overlay: "_overlay_rw765_218",
+	extractedPanel: "_extractedPanel_rw765_230",
+	extractedTitle: "_extractedTitle_rw765_239",
+	extractedList: "_extractedList_rw765_246",
+	extractedItem: "_extractedItem_rw765_252",
+	extractedKey: "_extractedKey_rw765_263",
+	extractedVal: "_extractedVal_rw765_270",
+	hidden: "_hidden_rw765_282",
+	errorText: "_errorText_rw765_283",
+	btnSecondary: "_btnSecondary_rw765_284"
+}, _ = (...e) => e.filter(Boolean).join(" "), v = (e) => {
+	let t = e.name || e.original_name || "", n = e.type || e.mime_type || "";
+	return t.endsWith(".pdf") || n.includes("pdf") || t.match(/\.(doc|docx|txt)$/i) ? /* @__PURE__ */ i(s, { className: g.fileIcon }) : /* @__PURE__ */ i(o, { className: g.fileIcon });
+};
+function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fieldMap: f, showExtracted: p = !0, accept: m = "image/*,application/pdf", variant: y = "primary", size: b = "md", previewSize: x = "md", width: S = "full", className: C = "" }) {
+	let [w, T] = n(!1), [E, D] = n(null), [O, k] = n(null), A = t(null), j = Array.isArray(o) ? o : o ? [o] : [], M = (e) => {
+		if (e.file && s(e.file), e.extract_error) D(e.extract_error);
+		else if (e.extracted) {
+			k(e.extracted);
+			let t = { ...e.extracted };
+			if (f) {
+				if (t = {}, Array.isArray(f)) for (let [n, r] of Object.entries(e.extracted)) {
+					let e = f.find((e) => e.source === n || e.extractKey === n), i = e ? e.target || e.fieldId : n;
+					t[i] = r;
+				}
+				else for (let [n, r] of Object.entries(e.extracted)) {
+					let e = f[n] || n;
+					t[e] = r;
+				}
+			}
+			u && u(t);
+		}
+	}, N = async (e) => {
+		let t = e.target.files?.[0];
+		if (t) {
+			T(!0), D(null), k(null);
+			try {
+				let e = await d(t);
+				M(e);
+			} catch (e) {
+				console.error(e), D("OCR extraction failed");
+			} finally {
+				T(!1), A.current && (A.current.value = "");
+			}
+		}
+	}, P = async (e) => {
+		T(!0), D(null);
+		try {
+			let t = await d(e);
+			M(t);
+		} catch (e) {
+			console.error(e), D("OCR extraction retry failed");
+		} finally {
+			T(!1);
+		}
+	}, F = (e) => {
+		let t = [...j];
+		if (t.splice(e, 1), s(t.length === 0 ? null : t), t.length === 0) {
+			if (O && u) {
+				let e = {};
+				if (f) {
+					if (Array.isArray(f)) for (let t of Object.keys(O)) {
+						let n = f.find((e) => e.source === t || e.extractKey === t), r = n ? n.target || n.fieldId : t;
+						e[r] = "";
+					}
+					else for (let t of Object.keys(O)) {
+						let n = f[t] || t;
+						e[n] = "";
+					}
+				} else for (let t of Object.keys(O)) e[t] = "";
+				u(e);
+			}
+			k(null);
+		}
+	}, I = (e) => e instanceof File ? e.type.startsWith("image/") : e.mime_type ? e.mime_type.startsWith("image/") : e.original_name ? /\.(jpg|jpeg|png|gif|webp)$/i.test(e.original_name) : !1, L = S === "full" ? { width: "100%" } : { width: S };
+	return /* @__PURE__ */ a("div", {
+		className: _(g.fieldContainer, g[`variant${y.charAt(0).toUpperCase() + y.slice(1)}`], g[`size${b.charAt(0).toUpperCase() + b.slice(1)}`], g[`previewSize${x.charAt(0).toUpperCase() + x.slice(1)}`], C),
+		style: L,
+		children: [/* @__PURE__ */ a("label", {
+			className: g.label,
+			children: [e, " (OCR)"]
+		}), /* @__PURE__ */ a("div", {
+			className: g.fieldBody,
+			children: [
+				j.length === 0 && /* @__PURE__ */ a("div", {
+					className: _(g.dropzone, w && g.dropzoneLoading),
+					onClick: () => A.current?.click(),
+					children: [/* @__PURE__ */ i("input", {
+						ref: A,
+						type: "file",
+						onChange: N,
+						disabled: w,
+						accept: m,
+						className: g.hidden
+					}), w ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { className: _(g.spinner, g.spinnerSm, g.dropzoneIcon) }), /* @__PURE__ */ i("p", {
+						className: g.dropzoneText,
+						children: "Extracting OCR data..."
+					})] }) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(c, { className: g.dropzoneIcon }), /* @__PURE__ */ i("p", {
+						className: g.dropzoneText,
+						children: "Drop a document to extract"
+					})] })]
+				}),
+				j.length > 0 && /* @__PURE__ */ i("div", {
+					className: g.previewList,
+					children: j.map((e, t) => /* @__PURE__ */ a("div", {
+						className: g.previewCard,
+						children: [
+							I(e) ? /* @__PURE__ */ i(h, { file: e }) : /* @__PURE__ */ a("div", {
+								className: g.documentPreview,
+								children: [v(e), /* @__PURE__ */ i("span", {
+									className: g.documentName,
+									title: e.name || e.original_name,
+									children: e.name || e.original_name || "Document"
+								})]
+							}),
+							w && /* @__PURE__ */ i("div", {
+								className: g.overlay,
+								children: /* @__PURE__ */ i("div", { className: g.spinner })
+							}),
+							!w && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("button", {
+								type: "button",
+								onClick: () => P(e),
+								className: g.retryBtnIcon,
+								title: "Retry extraction",
+								children: /* @__PURE__ */ a("svg", {
+									xmlns: "http://www.w3.org/2000/svg",
+									width: "12",
+									height: "12",
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									children: [
+										/* @__PURE__ */ i("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+										/* @__PURE__ */ i("path", { d: "M3 3v5h5" }),
+										/* @__PURE__ */ i("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }),
+										/* @__PURE__ */ i("path", { d: "M16 21v-5h5" })
+									]
+								})
+							}), /* @__PURE__ */ i("button", {
+								type: "button",
+								onClick: () => F(t),
+								className: g.removeBtn,
+								title: "Remove file",
+								children: /* @__PURE__ */ i(l, {
+									size: 12,
+									strokeWidth: 3
+								})
+							})] })
+						]
+					}, t))
+				}),
+				E && /* @__PURE__ */ a("div", {
+					className: g.fieldBody,
+					children: [/* @__PURE__ */ i("p", {
+						className: g.errorText,
+						children: E
+					}), j.length > 0 && !O && /* @__PURE__ */ i("button", {
+						type: "button",
+						onClick: () => P(j[0]),
+						disabled: w,
+						className: g.btnSecondary,
+						style: { alignSelf: "flex-start" },
+						children: w ? "Retrying..." : "Retry Extraction"
+					})]
+				}),
+				p && O && /* @__PURE__ */ a("div", {
+					className: g.extractedPanel,
+					children: [/* @__PURE__ */ i("p", {
+						className: g.extractedTitle,
+						children: "Extracted Data"
+					}), /* @__PURE__ */ i("div", {
+						className: g.extractedList,
+						children: Object.entries(O).map(([e, t]) => /* @__PURE__ */ a("div", {
+							className: g.extractedItem,
+							children: [/* @__PURE__ */ i("span", {
+								className: g.extractedKey,
+								children: e.replace(/_/g, " ")
+							}), /* @__PURE__ */ i("span", {
+								className: g.extractedVal,
+								children: String(t)
+							})]
+						}, e))
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { h as ImagePreview, y as OcrField, f as ZinoClient };

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "form-component-library-demo",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Zino Client API library for field and workflow management",
+  "main": "dist/src/index.cjs",
+  "module": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "keywords": [
+    "zino",
+    "client",
+    "api"
+  ],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.1.1",
+    "esbuild-css-modules-plugin": "^3.1.5",
+    "tsup": "^8.0.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.2.2"
+  },
+  "dependencies": {
+    "lucide-react": "^1.34.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "files": [
+    "dist"
+  ]
+}