@infinityfx/fluid 1.4.25 → 1.4.26

package/dist/components/input/drop-zone.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as e,jsxs as r,Fragment as o}from"react/jsx-runtime";import{useRef as n,useState as i}from"react";import a from"./button.js";import t from"../../hooks/use-input-props.js";import{combineClasses as l,classes as c,combineRefs as s}from"../../core/utils.js";import{createStyles as d}from"../../core/style.js";import{Icon as p}from"../../core/icons.js";import"../feedback/progress-bar.js";import"../feedback/circular-progress.js";import f from"../feedback/spinner.js";import m from"../feedback/halo.js";import"../feedback/indicator.js";import"../feedback/skeleton.js";const g=d("drop-zone",{".zone":{overflow:"hidden",position:"relative",display:"grid",backgroundColor:"var(--f-clr-fg-100)",border:"dashed 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-med)",transition:"background-color .25s, border-color .25s, color .25s",userSelect:"none",WebkitTapHighlightColor:"transparent"},'.zone[aria-disabled="false"]':{cursor:"pointer"},".zone.hovering":{backgroundColor:"var(--f-clr-primary-600)",borderColor:"var(--f-clr-primary-100)"},".zone.filled":{borderStyle:"solid"},".zone.error, .zone.rejected":{borderColor:"var(--f-clr-error-100)",color:"var(--f-clr-error-100)"},".zone.rejected":{backgroundColor:"var(--f-clr-error-400)"},".zone.disabled":{color:"var(--f-clr-grey-500)"},".container":{display:"flex",flexDirection:"column",gridArea:"1 / 1"},".preview":{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--f-clr-bg-100)",padding:"var(--f-spacing-med)",flexGrow:1},".footer":{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"var(--f-spacing-sml)",gap:"var(--f-spacing-sml)"},".text":{display:"flex",alignItems:"baseline",gap:"var(--f-spacing-xsm)"},".annotation":{paddingTop:"var(--f-spacing-xxs)",color:"var(--f-clr-grey-600)",fontSize:"var(--f-font-size-xsm)"},".icon":{paddingBottom:"var(--f-spacing-sml)"},".image":{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover",zIndex:1},".container.centered":{alignItems:"center",justifyContent:"center",textAlign:"center",padding:"var(--f-spacing-lrg)"},".input":{position:"absolute",opacity:0,pointerEvents:"none"}});function v(e,r){const o=r?r.split(","):[];return!o.length||o.some((r=>e.type.includes(r.trim().replace(/\/\*$/,""))))}function u({cc:d={},loading:u=!1,error:b,text:h="Drop files or click to browse",annotation:y,icon:x,previewImages:j=!1,previewImageUrl:k,inputRef:C,...z}){const N=l(g,d),w=n(null),[D,I]=i(!1),[T,E]=i(!1),[L,O]=i(null),[R,B]=t(z);function F(e){if(!w.current)return;const r=new DataTransfer;e&&r.items.add(e),O(e),w.current.files=r.files,w.current.dispatchEvent(new Event("change",{bubbles:!0}))}const S=!!(j&&L&&v(L,"image/*")),U=z.disabled||z.readOnly||u;return e(m,{color:"var(--f-clr-grey-300)",disabled:!!L||U,children:r("div",{...B,tabIndex:0,role:"button","aria-disabled":!!L||U,className:c(N.zone,D&&N.hovering,b&&N.error,T&&N.rejected,L&&N.filled,z.disabled&&N.disabled,z.className),onClick:e=>{z.onClick?.(e),L||U||!w.current||w.current.click()},onDragOver:e=>{z.onDragOver?.(e),e.preventDefault(),U||I(!0)},onDragLeave:e=>{z.onDragLeave?.(e),I(!1)},onDrop:e=>{if(z.onDrop?.(e),U)return;e.preventDefault(),I(!1);const r=e.dataTransfer.files[0];r&&!v(r,z.accept||"")?(E(!0),setTimeout((()=>E(!1)),250)):r&&F(r)},children:[u&&e("div",{className:c(N.container,N.centered),children:e(f,{})}),L&&!u&&e(o,{children:r("div",{className:N.container,children:[r("div",{className:N.preview,children:[e(p,{type:"file"}),S&&e("img",{src:k||URL.createObjectURL(L),className:N.image})]}),r("div",{className:N.footer,children:[r("div",{children:[e("div",{className:N.text,children:L.name}),e("div",{className:N.annotation,children:($=L.size,($/=1024)<1e3?`${$.toFixed(1)} KB`:`${($/1024).toFixed(1)} MB`)})]}),e(a,{compact:!0,variant:"minimal",disabled:U,onClick:()=>F(null),children:e(p,{type:"close"})})]})]})}),r("div",{style:L||u?{opacity:0,pointerEvents:"none"}:void 0,className:c(N.container,N.centered),children:[e("div",{className:N.icon,children:x||e(p,{type:"upload"})}),e("div",{className:N.text,children:h}),y&&e("div",{className:N.annotation,children:y})]}),e("input",{...R,ref:s(w,C),type:"file",disabled:z.disabled||u,"aria-invalid":!!b,className:N.input,onChange:e=>{z.onChange?.(e),O(e.target.files?.[0]||null)}})]})});var $}export{u as default};
+import{jsx as e,jsxs as r,Fragment as o}from"react/jsx-runtime";import{useRef as n,useState as i}from"react";import a from"./button.js";import t from"../../hooks/use-input-props.js";import{combineClasses as l,classes as c,combineRefs as s}from"../../core/utils.js";import{createStyles as d}from"../../core/style.js";import{Icon as p}from"../../core/icons.js";import"../feedback/progress-bar.js";import"../feedback/circular-progress.js";import f from"../feedback/spinner.js";import m from"../feedback/halo.js";import"../feedback/indicator.js";import"../feedback/skeleton.js";const g=d("drop-zone",{".zone":{overflow:"hidden",position:"relative",display:"grid",backgroundColor:"var(--f-clr-fg-100)",border:"dashed 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-med)",transition:"background-color .25s, border-color .25s, color .25s",userSelect:"none",WebkitTapHighlightColor:"transparent"},'.zone[aria-disabled="false"]':{cursor:"pointer"},".zone.hovering":{backgroundColor:"var(--f-clr-primary-600)",borderColor:"var(--f-clr-primary-100)"},".zone.filled":{borderStyle:"solid"},".zone.error, .zone.rejected":{borderColor:"var(--f-clr-error-100)",color:"var(--f-clr-error-100)"},".zone.rejected":{backgroundColor:"var(--f-clr-error-400)"},".zone.disabled":{color:"var(--f-clr-grey-500)"},".container":{display:"flex",flexDirection:"column",gridArea:"1 / 1"},".preview":{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--f-clr-bg-100)",padding:"var(--f-spacing-med)",flexGrow:1},".footer":{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"var(--f-spacing-sml)",gap:"var(--f-spacing-sml)"},".text":{display:"flex",alignItems:"baseline",gap:"var(--f-spacing-xsm)"},".annotation":{paddingTop:"var(--f-spacing-xxs)",color:"var(--f-clr-grey-600)",fontSize:"var(--f-font-size-xsm)"},".icon":{paddingBottom:"var(--f-spacing-sml)"},".image":{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover",zIndex:1},".container.centered":{alignItems:"center",justifyContent:"center",textAlign:"center",padding:"var(--f-spacing-lrg)"},".input":{position:"absolute",opacity:0,pointerEvents:"none"}});function v(e,r){const o=r?r.split(","):[];return!o.length||o.some((r=>e.type.includes(r.trim().replace(/\/\*$/,""))))}function u({cc:d={},loading:u=!1,error:b,text:h="Drop files or click to browse",annotation:y,icon:x,previewImages:j=!1,fallbackPreviewImage:k,inputRef:C,...z}){const N=l(g,d),w=n(null),[D,I]=i(!1),[T,E]=i(!1),[L,O]=i(null),[R,B]=t(z);function F(e){if(!w.current)return;const r=new DataTransfer;e&&r.items.add(e),O(e),w.current.files=r.files,w.current.dispatchEvent(new Event("change",{bubbles:!0}))}const S=!!(j&&L&&v(L,"image/*")),$=z.disabled||z.readOnly||u,A=L||j&&k;return e(m,{color:"var(--f-clr-grey-300)",disabled:!!L||$,children:r("div",{...B,tabIndex:0,role:"button","aria-disabled":!!L||$,className:c(N.zone,D&&N.hovering,b&&N.error,T&&N.rejected,A&&N.filled,z.disabled&&N.disabled,z.className),onClick:e=>{z.onClick?.(e),L||$||!w.current||w.current.click()},onDragOver:e=>{z.onDragOver?.(e),e.preventDefault(),$||I(!0)},onDragLeave:e=>{z.onDragLeave?.(e),I(!1)},onDrop:e=>{if(z.onDrop?.(e),$)return;e.preventDefault(),I(!1);const r=e.dataTransfer.files[0];r&&!v(r,z.accept||"")?(E(!0),setTimeout((()=>E(!1)),250)):r&&F(r)},children:[u&&e("div",{className:c(N.container,N.centered),children:e(f,{})}),A&&!u&&e(o,{children:r("div",{className:N.container,children:[r("div",{className:N.preview,children:[e(p,{type:"file"}),(S||k)&&e("img",{src:L?URL.createObjectURL(L):k,className:N.image})]}),L&&r("div",{className:N.footer,children:[r("div",{children:[e("div",{className:N.text,children:L.name}),e("div",{className:N.annotation,children:(U=L.size,(U/=1024)<1e3?`${U.toFixed(1)} KB`:`${(U/1024).toFixed(1)} MB`)})]}),e(a,{compact:!0,variant:"minimal",disabled:$,onClick:()=>F(null),children:e(p,{type:"close"})})]})]})}),r("div",{style:A||u?{opacity:0,pointerEvents:"none"}:void 0,className:c(N.container,N.centered),children:[e("div",{className:N.icon,children:x||e(p,{type:"upload"})}),e("div",{className:N.text,children:h}),y&&e("div",{className:N.annotation,children:y})]}),e("input",{...R,ref:s(w,C),type:"file",disabled:z.disabled||u,"aria-invalid":!!b,className:N.input,onChange:e=>{z.onChange?.(e),O(e.target.files?.[0]||null)}})]})});var U}export{u as default};
 //# sourceMappingURL=drop-zone.js.map

package/dist/types/src/components/input/drop-zone.d.ts

@@ -5,7 +5,7 @@ export type DropZoneSelectors = Selectors<'zone' | 'hovering' | 'filled' | 'erro
  *
  * @see {@link https://fluid.infinityfx.dev/docs/components/drop-zone}
  */
-export default function DropZone({ cc, loading, error, text, annotation, icon, previewImages, previewImageUrl, inputRef, ...props }: {
+export default function DropZone({ cc, loading, error, text, annotation, icon, previewImages, fallbackPreviewImage, inputRef, ...props }: {
     ref?: React.Ref<HTMLDivElement>;
     cc?: DropZoneSelectors;
     loading?: boolean;
@@ -20,11 +20,9 @@ export default function DropZone({ cc, loading, error, text, annotation, icon, p
      */
     previewImages?: boolean;
     /**
-     * Optional URL to an image to preview.
-     *
-     * If not provided will default to the currently selected file.
+     * Optional fallback image to show as a preview when no file is selected.
      */
-    previewImageUrl?: string;
+    fallbackPreviewImage?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 } & Omit<React.InputHTMLAttributes<HTMLDivElement>, 'defaultValue' | 'children' | 'onChange'>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@infinityfx/fluid",
-	"version": "1.4.25",
+	"version": "1.4.26",
 	"type": "module",
 	"description": "React UI library, using zero-runtime CSS-in-JS.",
 	"main": "dist/index.js",