@zonos/amino 7.0.1 → 8.0.0

package/components/drop-zone/DropZone.js

@@ -1 +1 @@
-"use strict";var e=require("react-dropzone"),r=require("../__amino__/TranslateAminoText.js"),t=require("../avatar/ImageAvatar.js"),s=require("../button/ButtonIcon.js"),i=require("../help-text/HelpText.js"),l=require("../spinner/Spinner.js"),n=require("../text/Text.js"),o=require("../thumbnail/Thumbnail.js"),a=require("../../icons/FileDuotoneIcon.js"),u=require("../../icons/FileUploadDuotoneIcon.js"),c=require("../../icons/RemoveCircleDuotoneIcon.js"),x=require("../../styles/constants/theme.js"),d=require("../../utils/cn.js"),j=require("../../utils/translations/__amino__/translateAminoText.js"),m=require("react/jsx-runtime");require("../translations/Translate.js"),require("../../utils/translations/_handleTranslateComponentText.js"),require("react"),require("../../utils/translations/AminoTranslationStore.js"),require("zod"),require("zustand"),require("../../utils/storage.js"),require("dayjs"),require("../../utils/translations/supportedLanguages.js"),require("../avatar/AvatarBase.js"),require("clsx"),require("tailwind-merge"),require("../button/Button.js"),require("class-variance-authority"),require("../button/RippleGroup.js"),require("framer-motion"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../_bundled/uuid-3rCaYaVz.js"),require("../button/useRipple.js"),require("../../utils/getTestId.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/translations/translate.js"),require("../../utils/translations/_handleTranslationVariables.js");exports.DropZone=({className:p,disabled:q=!1,dropzoneOptions:b,error:h=!1,helpText:T,instructionText:g,loading:f,loadingText:y,noIcon:v=!1,onRemoveFile:I,style:_,uploadedFiles:N})=>{const A=b.maxFiles||0,{getInputProps:C,getRootProps:D,open:z}=e.useDropzone({...b,disabled:q,noClick:!0,noKeyboard:!0}),w=0!==A&&N.length>=A,F=h?x.theme.danger:x.theme.borderColor;return m.jsx("div",{className:d.cn("flex flex-col gap-4",p),style:{..._,cursor:q?"not-allowed":"auto",opacity:q?x.theme.opacityDisabled:"1"},children:f?m.jsx("div",{className:"flex flex-col items-center rounded-xl border-2 border-dashed",style:{borderColor:F},children:m.jsxs("div",{className:"flex h-full w-full flex-col items-center justify-center gap-3 p-4 outline-none",children:[m.jsx(l.Spinner,{}),m.jsx(n.Text,{color:"gray800",type:"label",children:y||j.translateAminoText({text:"Uploading file(s)..."})})]})}):m.jsxs(m.Fragment,{children:[!w&&m.jsx("div",{className:"flex flex-col items-center rounded-xl border-2 border-dashed",style:{borderColor:F},children:m.jsxs("div",{className:"flex h-full w-full flex-col items-center justify-center gap-3 p-4 outline-none",...D(),role:void 0,children:[m.jsx("input",{...C()}),!v&&m.jsx(o.Thumbnail,{icon:m.jsx(u.FileUploadDuotoneIcon,{}),size:40}),m.jsxs("div",{className:"flex flex-col items-center gap-1",children:[m.jsx(n.Text,{type:"label",children:m.jsx(r.TranslateAminoText,{text:"[instructionText] or [browseText]",variables:{browseText:m.jsx("button",{className:"inline",disabled:q,onClick:z,type:"button",children:m.jsx(n.Text,{color:"blue600",type:"label",children:m.jsx(r.TranslateAminoText,{text:"browse --context: button text referencing browsing more files"})})}),instructionText:g||j.translateAminoText({text:"Drop your file(s) here"})}})}),m.jsx(i.HelpText,{error:h,helpText:T})]})]})}),!!N.length&&m.jsx("div",{className:"flex flex-col gap-1",children:N.map((e,r)=>m.jsxs("div",{className:"border-amino flex justify-start gap-3 rounded-xl border p-4",children:[e.imageUrl?m.jsx(t.ImageAvatar,{imageUrl:e.imageUrl,shape:"rounded"}):m.jsx(a.FileDuotoneIcon,{}),m.jsxs("div",{className:"flex flex-col",children:[m.jsx(n.Text,{color:"gray1000",type:"label",children:e.name}),e.size&&m.jsx(n.Text,{color:"gray700",type:"caption",children:e.size})]}),I&&m.jsx(s.ButtonIcon,{className:"ml-auto",icon:m.jsx(c.RemoveCircleDuotoneIcon,{size:20}),onClick:()=>I(r),variant:"text"})]},e.name))})]})})};
+"use strict";var e=require("react-dropzone"),r=require("../__amino__/TranslateAminoText.js"),s=require("../avatar/ImageAvatar.js"),t=require("../button/ButtonIcon.js"),i=require("../help-text/HelpText.js"),l=require("../spinner/Spinner.js"),n=require("../text/Text.js"),o=require("../thumbnail/Thumbnail.js"),a=require("../../icons/FileDuotoneIcon.js"),u=require("../../icons/FileUploadDuotoneIcon.js"),c=require("../../icons/RemoveCircleDuotoneIcon.js"),x=require("../../styles/constants/theme.js"),d=require("../../utils/cn.js"),j=require("../../utils/translations/__amino__/translateAminoText.js"),m=require("react/jsx-runtime");require("../translations/Translate.js"),require("../../utils/translations/_handleTranslateComponentText.js"),require("react"),require("../../utils/translations/AminoTranslationStore.js"),require("zod"),require("zustand"),require("../../utils/storage.js"),require("dayjs"),require("../../utils/translations/supportedLanguages.js"),require("../avatar/AvatarBase.js"),require("clsx"),require("tailwind-merge"),require("../button/Button.js"),require("class-variance-authority"),require("../button/RippleGroup.js"),require("framer-motion"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../_bundled/uuid-3rCaYaVz.js"),require("../button/useRipple.js"),require("../../utils/getTestId.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/translations/translate.js"),require("../../utils/translations/_handleTranslationVariables.js");exports.DropZone=({className:p,disabled:b=!1,dropzoneOptions:q,error:h=!1,helpText:T,instructionText:g,loading:f,loadingText:y,noIcon:v=!1,onRemoveFile:I,style:N,uploadedFiles:_})=>{const A=q.maxFiles||0,{getInputProps:C,getRootProps:D,open:z}=e.useDropzone({...q,noPaste:q.noPaste??!0,disabled:b,noClick:!0,noKeyboard:!0}),w=0!==A&&_.length>=A,F=h?x.theme.danger:x.theme.borderColor;return m.jsx("div",{className:d.cn("flex flex-col gap-4",p),style:{...N,cursor:b?"not-allowed":"auto",opacity:b?x.theme.opacityDisabled:"1"},children:f?m.jsx("div",{className:"flex flex-col items-center rounded-xl border-2 border-dashed",style:{borderColor:F},children:m.jsxs("div",{className:"flex h-full w-full flex-col items-center justify-center gap-3 p-4 outline-none",children:[m.jsx(l.Spinner,{}),m.jsx(n.Text,{color:"gray800",type:"label",children:y||j.translateAminoText({text:"Uploading file(s)..."})})]})}):m.jsxs(m.Fragment,{children:[!w&&m.jsx("div",{className:"flex flex-col items-center rounded-xl border-2 border-dashed",style:{borderColor:F},children:m.jsxs("div",{className:"flex h-full w-full flex-col items-center justify-center gap-3 p-4 outline-none",...D(),role:void 0,children:[m.jsx("input",{...C(),className:"absolute"}),!v&&m.jsx(o.Thumbnail,{icon:m.jsx(u.FileUploadDuotoneIcon,{}),size:40}),m.jsxs("div",{className:"flex flex-col items-center gap-1",children:[m.jsx(n.Text,{type:"label",children:m.jsx(r.TranslateAminoText,{text:"[instructionText] or [browseText]",variables:{browseText:m.jsx("button",{className:"inline",disabled:b,onClick:z,type:"button",children:m.jsx(n.Text,{color:"blue600",type:"label",children:m.jsx(r.TranslateAminoText,{text:"browse --context: button text referencing browsing more files"})})}),instructionText:g||j.translateAminoText({text:"Drop your file(s) here"})}})}),m.jsx(i.HelpText,{error:h,helpText:T})]})]})}),!!_.length&&m.jsx("div",{className:"flex flex-col gap-1",children:_.map((e,r)=>m.jsxs("div",{className:"border-amino flex justify-start gap-3 rounded-xl border p-4",children:[e.imageUrl?m.jsx(s.ImageAvatar,{imageUrl:e.imageUrl,shape:"rounded"}):m.jsx(a.FileDuotoneIcon,{}),m.jsxs("div",{className:"flex flex-col",children:[m.jsx(n.Text,{color:"gray1000",type:"label",children:e.name}),e.size&&m.jsx(n.Text,{color:"gray700",type:"caption",children:e.size})]}),I&&m.jsx(t.ButtonIcon,{className:"ml-auto",icon:m.jsx(c.RemoveCircleDuotoneIcon,{size:20}),onClick:()=>I(r),variant:"text"})]},e.name))})]})})};

package/components/file-upload/FileUpload.js

@@ -1 +1 @@
-"use strict";var e=require("react-dropzone"),r=require("../button/Button.js"),t=require("../button/ButtonIcon.js"),s=require("../text/Text.js"),i=require("../../icons/RemoveCircleDuotoneIcon.js"),n=require("../../styles/constants/theme.js"),o=require("../../utils/cn.js"),a=require("../../utils/translations/__amino__/translateAminoText.js"),l=require("../../utils/translations/AminoTranslationStore.js"),u=require("react/jsx-runtime");require("react"),require("class-variance-authority"),require("../button/RippleGroup.js"),require("framer-motion"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../_bundled/uuid-3rCaYaVz.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("clsx"),require("tailwind-merge"),require("../../utils/getTestId.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/translations/translate.js"),require("../../utils/translations/_handleTranslationVariables.js"),require("zod"),require("zustand"),require("../../utils/storage.js"),require("dayjs"),require("../../utils/translations/supportedLanguages.js");exports.FileUpload=({buttonActionText:c,className:d,disabled:x=!1,dropzoneOptions:j,error:p=!1,instructionText:m,loading:g,loadingText:q,onRemoveFile:b,style:h,uploadedFile:y})=>{const T=l.useCurrentLanguage(),f=c??a.translateAminoText({languageCode:T,text:"Browse --context: button text referencing browsing more files"}),C=m??a.translateAminoText({languageCode:T,text:"or drag your file here"}),v=q??a.translateAminoText({languageCode:T,text:"Uploading..."}),{getInputProps:_,getRootProps:z,open:A}=e.useDropzone({...j,disabled:x,multiple:!1,noClick:!0,noKeyboard:!0}),I=()=>g?u.jsx(s.Text,{children:v}):y?(()=>{if(y){const{name:e,size:r}=y;return u.jsxs("div",{className:"flex items-center gap-1",children:[u.jsx(s.Text,{color:"gray1000",type:"label",children:e}),r&&u.jsx(s.Text,{color:"gray700",type:"caption",children:r})]})}return null})():u.jsx(s.Text,{color:"gray600",children:C});return u.jsxs("div",{className:o.cn("rounded-amino-10 border-amino flex justify-start border",d),style:{...h,borderColor:p?n.theme.danger:n.theme.borderColor,cursor:x?"not-allowed":"auto",opacity:x?n.theme.opacityDisabled:"1",padding:`${n.theme.space8} ${n.theme.space12}`},children:[u.jsxs("div",{className:"flex flex-col items-center justify-center text-center outline-none",...z(),children:[u.jsx("input",{..._()}),u.jsxs("div",{className:"flex items-center justify-start gap-3",children:[u.jsx(r.Button,{loading:g,onClick:A,spinnerColor:"black",children:f}),I()]})]}),b&&y&&u.jsx(t.ButtonIcon,{className:"ml-auto",icon:u.jsx(i.RemoveCircleDuotoneIcon,{size:20}),onClick:()=>b(),variant:"text"})]})};
+"use strict";var e=require("react-dropzone"),r=require("../button/Button.js"),t=require("../button/ButtonIcon.js"),s=require("../text/Text.js"),n=require("../../icons/RemoveCircleDuotoneIcon.js"),i=require("../../styles/constants/theme.js"),o=require("../../utils/cn.js"),a=require("../../utils/translations/__amino__/translateAminoText.js"),l=require("../../utils/translations/AminoTranslationStore.js"),u=require("react/jsx-runtime");require("react"),require("class-variance-authority"),require("../button/RippleGroup.js"),require("framer-motion"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../_bundled/uuid-3rCaYaVz.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("clsx"),require("tailwind-merge"),require("../../utils/getTestId.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/translations/translate.js"),require("../../utils/translations/_handleTranslationVariables.js"),require("zod"),require("zustand"),require("../../utils/storage.js"),require("dayjs"),require("../../utils/translations/supportedLanguages.js");exports.FileUpload=({buttonActionText:c,className:d,disabled:x=!1,dropzoneOptions:j,error:m=!1,instructionText:p,loading:g,loadingText:q,onRemoveFile:b,style:h,uploadedFile:y})=>{const T=l.useCurrentLanguage(),f=c??a.translateAminoText({languageCode:T,text:"Browse --context: button text referencing browsing more files"}),C=p??a.translateAminoText({languageCode:T,text:"or drag your file here"}),v=q??a.translateAminoText({languageCode:T,text:"Uploading..."}),{getInputProps:_,getRootProps:z,open:A}=e.useDropzone({...j,noPaste:j.noPaste??!0,disabled:x,multiple:!1,noClick:!0,noKeyboard:!0}),I=()=>g?u.jsx(s.Text,{children:v}):y?(()=>{if(y){const{name:e,size:r}=y;return u.jsxs("div",{className:"flex items-center gap-1",children:[u.jsx(s.Text,{color:"gray1000",type:"label",children:e}),r&&u.jsx(s.Text,{color:"gray700",type:"caption",children:r})]})}return null})():u.jsx(s.Text,{color:"gray600",children:C});return u.jsxs("div",{className:o.cn("rounded-amino-10 border-amino flex justify-start border",d),style:{...h,borderColor:m?i.theme.danger:i.theme.borderColor,cursor:x?"not-allowed":"auto",opacity:x?i.theme.opacityDisabled:"1",padding:`${i.theme.space8} ${i.theme.space12}`},children:[u.jsxs("div",{className:"flex flex-col items-center justify-center text-center outline-none",...z(),children:[u.jsx("input",{..._(),className:"absolute"}),u.jsxs("div",{className:"flex items-center justify-start gap-3",children:[u.jsx(r.Button,{loading:g,onClick:A,spinnerColor:"black",children:f}),I()]})]}),b&&y&&u.jsx(t.ButtonIcon,{className:"ml-auto",icon:u.jsx(n.RemoveCircleDuotoneIcon,{size:20}),onClick:()=>b(),variant:"text"})]})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "7.0.1",
+  "version": "8.0.0",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",
@@ -41,7 +41,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "fuse.js": "^7.5.0",
-    "react-dropzone": "^12.1.0",
+    "react-dropzone": "^20.1.4",
     "react-intersection-observer": "^11.0.1",
     "react-select": "^5.10.2",
     "sonner": "^2.0.7",

package/utils/hooks/useStorage.js

@@ -1 +1 @@
-"use strict";var e=require("react"),t=require("../storage.js");require("dayjs"),require("zod");const a=e=>t=>("local"===e&&window.addEventListener("storage",t),window.addEventListener(`amino:storage-${e}`,t),()=>{"local"===e&&window.removeEventListener("storage",t),window.removeEventListener(`amino:storage-${e}`,t)});exports.useStorage=({defaultValue:o,key:r,schema:s,type:l})=>{const n=e.useMemo(()=>a(l),[l]);e.useSyncExternalStore(n,()=>"local"===l?localStorage.getItem(r):sessionStorage.getItem(r),()=>JSON.stringify(o));const i=t.getStorageItem({key:r,schema:s,type:l})??null;return{setValue:e.useCallback(e=>t.setStorageItem({key:r,type:l,value:e}),[r,l]),value:i??o}},exports.useStorageWithLifetime=({defaultValue:o,key:r,lifetime:s,schema:l,type:n})=>{const i=e.useMemo(()=>a(n),[n]);e.useSyncExternalStore(i,()=>"local"===n?localStorage.getItem(r):sessionStorage.getItem(r),()=>JSON.stringify(o));const u=t.getShouldUpdateStorageItem({key:r,type:n})?null:t.getStorageItem({key:r,schema:l,type:n})??null;return{setValue:e.useCallback(e=>t.setStorageItemWithLifetime({key:r,lifetime:s,type:n,value:e}),[r,n,s]),value:u??o}};
+"use strict";var e=require("react"),t=require("../storage.js");require("dayjs"),require("zod");const a=e=>t=>("local"===e&&window.addEventListener("storage",t),window.addEventListener(`amino:storage-${e}`,t),()=>{"local"===e&&window.removeEventListener("storage",t),window.removeEventListener(`amino:storage-${e}`,t)});exports.useStorage=({defaultValue:r,key:s,schema:o,type:n})=>{const i=e.useMemo(()=>a(n),[n]);e.useSyncExternalStore(i,()=>t.getRawStorageItem({key:s,type:n}),()=>JSON.stringify(r));const l=t.getStorageItem({key:s,schema:o,type:n})??null;return{setValue:e.useCallback(e=>t.setStorageItem({key:s,type:n,value:e}),[s,n]),value:l??r}},exports.useStorageWithLifetime=({defaultValue:r,key:s,lifetime:o,schema:n,type:i})=>{const l=e.useMemo(()=>a(i),[i]);e.useSyncExternalStore(l,()=>t.getRawStorageItem({key:s,type:i}),()=>JSON.stringify(r));const u=t.getShouldUpdateStorageItem({key:s,type:i})?null:t.getStorageItem({key:s,schema:n,type:i})??null;return{setValue:e.useCallback(e=>t.setStorageItemWithLifetime({key:s,lifetime:o,type:i,value:e}),[s,i,o]),value:u??r}};

package/utils/storage.d.ts

@@ -12,8 +12,20 @@ export type StorageParams<Value, Key extends string = string> = {
 type SetParams<Value> = Omit<StorageParams<Value>, 'schema'> & {
     value: Value;
 };
+/** Read the raw string for a key, or `null` when storage is unavailable. */
+export declare const getRawStorageItem: ({ key, type, }: Pick<StorageParams<unknown>, 'key' | 'type'>) => string | null;
 export declare const getStorageItem: <Value>({ key, schema, type, }: StorageParams<Value>) => Value | null;
+/**
+ * Write a value and notify `useStorage` subscribers. When storage is
+ * unavailable or the write throws (e.g. `QuotaExceededError`), the write is
+ * skipped silently and no event fires; throws only on the server.
+ */
 export declare const setStorageItem: <Value>({ key, type, value, }: SetParams<Value>) => void;
+/**
+ * Write a value with an `_update_after` expiry (a falsy value removes both).
+ * Failures are skipped silently like `setStorageItem`; a write that fails
+ * partway drops both keys.
+ */
 export declare const setStorageItemWithLifetime: <Value>({ key, lifetime, type, value, }: SetParams<Value> & {
     lifetime: Dayjs;
 }) => void;

package/utils/storage.js

@@ -1 +1 @@
-"use strict";var e=require("dayjs"),t=require("zod");function s(e){return e&&e.__esModule?e:{default:e}}var o=s(e);const r="undefined"!=typeof window,n=({key:e,schema:t,type:s})=>{if(!r)return null;const o=("local"===s?window.localStorage:window.sessionStorage).getItem(e);if(!o)return null;try{const e=JSON.parse(o),s=t.safeParse(e);return s.success?s.data:null}catch{const e=t.safeParse(o);return e.success?e.data:null}};exports.getShouldUpdateStorageItem=({key:e,type:s})=>{const r=n({key:`${e}_update_after`,schema:t.z.string(),type:s});if("string"==typeof r){const e=o.default(r);return o.default().isAfter(e)}return!0},exports.getStorageItem=n,exports.setStorageItem=({key:e,type:t,value:s})=>{if(!r)throw new Error("Cannot set storage outside client");const o="session"===t?window.sessionStorage:window.localStorage,n="string"==typeof s?s:JSON.stringify(s);o.setItem(e,n),window.dispatchEvent(new Event(`amino:storage-${t}`))},exports.setStorageItemWithLifetime=({key:e,lifetime:t,type:s,value:o})=>{if(!r)throw new Error("Cannot set storage outside client");const n="session"===s?window.sessionStorage:window.localStorage,a="string"==typeof o?o:JSON.stringify(o);!!o?(n.setItem(e,a),n.setItem(`${e}_update_after`,t.format())):(n.removeItem(e),n.removeItem(`${e}_update_after`)),window.dispatchEvent(new Event(`amino:storage-${s}`))};
+"use strict";var e=require("dayjs"),t=require("zod");function r(e){return e&&e.__esModule?e:{default:e}}var n=r(e);const o="undefined"!=typeof window,s=e=>{if(!o)return null;try{return"local"===e?window.localStorage:window.sessionStorage}catch{return null}},a=({key:e,type:t})=>{try{return s(t)?.getItem(e)??null}catch{return null}},u=({key:e,schema:t,type:r})=>{const n=a({key:e,type:r});if(!n)return null;try{const e=JSON.parse(n),r=t.safeParse(e);return r.success?r.data:null}catch{const e=t.safeParse(n);return e.success?e.data:null}};exports.getRawStorageItem=a,exports.getShouldUpdateStorageItem=({key:e,type:r})=>{const o=u({key:`${e}_update_after`,schema:t.z.string(),type:r});if("string"==typeof o){const e=n.default(o);return n.default().isAfter(e)}return!0},exports.getStorageItem=u,exports.setStorageItem=({key:e,type:t,value:r})=>{if(!o)throw new Error("Cannot set storage outside client");const n=s(t);if(!n)return;const a="string"==typeof r?r:JSON.stringify(r);try{n.setItem(e,a)}catch{return}window.dispatchEvent(new Event(`amino:storage-${t}`))},exports.setStorageItemWithLifetime=({key:e,lifetime:t,type:r,value:n})=>{if(!o)throw new Error("Cannot set storage outside client");const a=s(r);if(!a)return;const u="string"==typeof n?n:JSON.stringify(n),i=!!n;let c=!1;try{i?(a.setItem(e,u),c=!0,a.setItem(`${e}_update_after`,t.format())):(a.removeItem(e),c=!0,a.removeItem(`${e}_update_after`))}catch{if(!c)return;try{a.removeItem(e),a.removeItem(`${e}_update_after`)}catch{}}window.dispatchEvent(new Event(`amino:storage-${r}`))};