@choco-vanille/ui 1.15.1 → 1.17.0

package/dist/components/forms/image-picker/hooks/useImagePicker.hook.js

@@ -0,0 +1,132 @@
+import { useRef as X, useState as i, useEffect as F, useCallback as r } from "react";
+import { IMAGE_PICKER_MOBILE_LABELS as Y, IMAGE_PICKER_DEFAULT_LABELS as Z, IMAGE_PICKER_DEFAULT_ACCEPT as $ } from "../constants/imagePickerDefaults.const.js";
+import { isImagePickerFile as x, syncImagePickerInput as a, acceptsImagePickerFile as ee, hasImagePickerFiles as T } from "../utils/imagePicker.utils.js";
+const oe = ({
+  value: R,
+  defaultValue: k = null,
+  onValueChange: U,
+  accept: C = $,
+  maxSize: c,
+  onValidationError: I,
+  disabled: m = !1,
+  disableChange: _ = !1,
+  disableRemove: b = !1,
+  isMobile: y = !1,
+  labels: A,
+  crop: E = !1
+}) => {
+  const s = X(null), [O, j] = i(k), [M, h] = i(), [P, l] = i(), [w, f] = i(!1), [B, u] = i(), L = R !== void 0, n = L ? R : O, G = n !== null, o = m || _, v = m || b, D = {
+    ...y ? Y : Z,
+    ...A
+  }, K = typeof n == "string" ? n : M, V = P ? D[P] : void 0;
+  F(() => {
+    if (!x(n) || typeof URL > "u" || typeof URL.createObjectURL != "function") {
+      h(void 0);
+      return;
+    }
+    const e = URL.createObjectURL(n);
+    return h(e), () => {
+      typeof URL.revokeObjectURL == "function" && URL.revokeObjectURL(e);
+    };
+  }, [n]), F(() => {
+    a(s.current, n);
+  }, [n]);
+  const d = r(
+    (e) => {
+      L || j(e), U?.(e);
+    },
+    [L, U]
+  ), N = r(() => {
+    o || s.current?.click();
+  }, [o]), p = r(
+    (e) => {
+      l(void 0), a(s.current, e), d(e);
+    },
+    [d]
+  ), g = r(
+    (e) => {
+      if (o)
+        return;
+      let t;
+      if (ee(e, C) ? c !== void 0 && e.size > c && (t = "maxSize") : t = "invalidType", t) {
+        l(t), a(s.current, n), I?.(
+          t === "maxSize" ? { reason: t, file: e, maxSize: c } : { reason: t, file: e }
+        );
+        return;
+      }
+      if (l(void 0), E) {
+        a(s.current, n), u(e);
+        return;
+      }
+      p(e);
+    },
+    [
+      C,
+      p,
+      E,
+      n,
+      o,
+      c,
+      I
+    ]
+  ), S = r(
+    (e) => {
+      const t = e.target.files?.[0];
+      t && g(t);
+    },
+    [g]
+  ), q = r(
+    (e) => {
+      T(e) && (e.preventDefault(), e.dataTransfer.dropEffect = o ? "none" : "copy", o || f(!0));
+    },
+    [o]
+  ), z = r(
+    (e) => {
+      if (e.target !== e.currentTarget)
+        return;
+      const t = e.relatedTarget;
+      typeof Node < "u" && t instanceof Node && e.currentTarget.contains(t) || f(!1);
+    },
+    []
+  ), H = r(
+    (e) => {
+      if (!T(e) || (e.preventDefault(), f(!1), o))
+        return;
+      const t = e.dataTransfer.files?.[0];
+      t && g(t);
+    },
+    [g, o]
+  ), J = r(() => {
+    v || (u(void 0), l(void 0), f(!1), d(null), s.current && (s.current.value = ""));
+  }, [v, d]), Q = r(() => {
+    u(void 0), a(s.current, n);
+  }, [n]), W = r(
+    (e) => {
+      u(void 0), p(e);
+    },
+    [p]
+  );
+  return {
+    inputRef: s,
+    previewUrl: K,
+    resolvedLabels: D,
+    validationMessage: V,
+    hasValue: G,
+    isChangeDisabled: o,
+    isRemoveDisabled: v,
+    isDragging: w,
+    pendingCropFile: B,
+    handleOpen: N,
+    handleInputChange: S,
+    handleDragOver: q,
+    handleDragLeave: z,
+    handleDrop: H,
+    handleClear: J,
+    handleCropCancel: Q,
+    handleCropConfirm: W
+  };
+};
+export {
+  oe as useImagePicker
+};
+//# sourceMappingURL=useImagePicker.hook.js.map

package/dist/components/forms/image-picker/hooks/useImagePicker.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImagePicker.hook.js","sources":["../../../../../src/components/forms/image-picker/hooks/useImagePicker.hook.ts"],"sourcesContent":["import {\r\n    useCallback,\r\n    useEffect,\r\n    useRef,\r\n    useState,\r\n    type ChangeEvent,\r\n    type DragEvent,\r\n} from 'react'\r\n\r\nimport {\r\n    IMAGE_PICKER_DEFAULT_ACCEPT,\r\n    IMAGE_PICKER_DEFAULT_LABELS,\r\n    IMAGE_PICKER_MOBILE_LABELS,\r\n} from '@components/forms/image-picker/constants/imagePickerDefaults.const.ts'\r\nimport type {\r\n    UseImagePickerOptions,\r\n    UseImagePickerReturn,\r\n} from '@components/forms/image-picker/hooks/types'\r\nimport type {\r\n    ImagePickerValidationReason,\r\n    ImagePickerValue,\r\n} from '@components/forms/image-picker/types/ImagePicker.types.ts'\r\nimport {\r\n    acceptsImagePickerFile,\r\n    hasImagePickerFiles,\r\n    isImagePickerFile,\r\n    syncImagePickerInput,\r\n} from '@components/forms/image-picker/utils/imagePicker.utils.ts'\r\n\r\n/**\r\n * Manages value state and browser interactions for ImagePicker.\r\n *\r\n * Supports controlled and uncontrolled values, local preview URLs, native\r\n * input synchronization, file validation, chooser opening, drag and drop, and\r\n * removal. When cropping is enabled, accepted files wait in a pending state\r\n * until the crop dialog confirms them. The returned handlers are ready to pass\r\n * to the ImagePicker subcomponents.\r\n */\r\nexport const useImagePicker = ({\r\n    value,\r\n    defaultValue = null,\r\n    onValueChange,\r\n    accept = IMAGE_PICKER_DEFAULT_ACCEPT,\r\n    maxSize,\r\n    onValidationError,\r\n    disabled = false,\r\n    disableChange = false,\r\n    disableRemove = false,\r\n    isMobile = false,\r\n    labels,\r\n    crop = false,\r\n}: UseImagePickerOptions): UseImagePickerReturn => {\r\n    const inputRef = useRef<HTMLInputElement>(null)\r\n    const [uncontrolledValue, setUncontrolledValue] =\r\n        useState<ImagePickerValue>(defaultValue)\r\n    const [filePreviewUrl, setFilePreviewUrl] = useState<string>()\r\n    const [validationReason, setValidationReason] =\r\n        useState<ImagePickerValidationReason>()\r\n    const [isDragging, setIsDragging] = useState(false)\r\n    const [pendingCropFile, setPendingCropFile] = useState<File>()\r\n\r\n    const isControlled = value !== undefined\r\n    const currentValue = isControlled ? value : uncontrolledValue\r\n    const hasValue = currentValue !== null\r\n    const isChangeDisabled = disabled || disableChange\r\n    const isRemoveDisabled = disabled || disableRemove\r\n    const resolvedLabels = {\r\n        ...(isMobile ? IMAGE_PICKER_MOBILE_LABELS : IMAGE_PICKER_DEFAULT_LABELS),\r\n        ...labels,\r\n    }\r\n    const previewUrl = typeof currentValue === 'string'\r\n        ? currentValue\r\n        : filePreviewUrl\r\n    const validationMessage = validationReason\r\n        ? resolvedLabels[validationReason]\r\n        : undefined\r\n\r\n    useEffect(() => {\r\n        if (\r\n            !isImagePickerFile(currentValue) ||\r\n            typeof URL === 'undefined' ||\r\n            typeof URL.createObjectURL !== 'function'\r\n        ) {\r\n            setFilePreviewUrl(undefined)\r\n            return\r\n        }\r\n\r\n        const objectUrl = URL.createObjectURL(currentValue)\r\n        setFilePreviewUrl(objectUrl)\r\n\r\n        return () => {\r\n            if (typeof URL.revokeObjectURL === 'function') {\r\n                URL.revokeObjectURL(objectUrl)\r\n            }\r\n        }\r\n    }, [currentValue])\r\n\r\n    useEffect(() => {\r\n        syncImagePickerInput(inputRef.current, currentValue)\r\n    }, [currentValue])\r\n\r\n    const updateValue = useCallback(\r\n        (nextValue: ImagePickerValue) => {\r\n            if (!isControlled) {\r\n                setUncontrolledValue(nextValue)\r\n            }\r\n            onValueChange?.(nextValue)\r\n        },\r\n        [isControlled, onValueChange],\r\n    )\r\n\r\n    const handleOpen = useCallback(() => {\r\n        if (!isChangeDisabled) {\r\n            inputRef.current?.click()\r\n        }\r\n    }, [isChangeDisabled])\r\n\r\n    const commitFile = useCallback(\r\n        (file: File) => {\r\n            setValidationReason(undefined)\r\n            syncImagePickerInput(inputRef.current, file)\r\n            updateValue(file)\r\n        },\r\n        [updateValue],\r\n    )\r\n\r\n    const handleFile = useCallback(\r\n        (file: File) => {\r\n            if (isChangeDisabled) {\r\n                return\r\n            }\r\n\r\n            let reason: ImagePickerValidationReason | undefined\r\n\r\n            if (!acceptsImagePickerFile(file, accept)) {\r\n                reason = 'invalidType'\r\n            } else if (maxSize !== undefined && file.size > maxSize) {\r\n                reason = 'maxSize'\r\n            }\r\n\r\n            if (reason) {\r\n                setValidationReason(reason)\r\n                syncImagePickerInput(inputRef.current, currentValue)\r\n                onValidationError?.(\r\n                    reason === 'maxSize'\r\n                        ? { reason, file, maxSize }\r\n                        : { reason, file },\r\n                )\r\n                return\r\n            }\r\n\r\n            setValidationReason(undefined)\r\n            if (crop) {\r\n                syncImagePickerInput(inputRef.current, currentValue)\r\n                setPendingCropFile(file)\r\n                return\r\n            }\r\n\r\n            commitFile(file)\r\n        },\r\n        [\r\n            accept,\r\n            commitFile,\r\n            crop,\r\n            currentValue,\r\n            isChangeDisabled,\r\n            maxSize,\r\n            onValidationError,\r\n        ],\r\n    )\r\n\r\n    const handleInputChange = useCallback(\r\n        (event: ChangeEvent<HTMLInputElement>) => {\r\n            const file = event.target.files?.[0]\r\n            if (file) {\r\n                handleFile(file)\r\n            }\r\n        },\r\n        [handleFile],\r\n    )\r\n\r\n    const handleDragOver = useCallback(\r\n        (event: DragEvent<HTMLButtonElement>) => {\r\n            if (!hasImagePickerFiles(event)) {\r\n                return\r\n            }\r\n\r\n            event.preventDefault()\r\n            event.dataTransfer.dropEffect = isChangeDisabled ? 'none' : 'copy'\r\n            if (!isChangeDisabled) {\r\n                setIsDragging(true)\r\n            }\r\n        },\r\n        [isChangeDisabled],\r\n    )\r\n\r\n    const handleDragLeave = useCallback(\r\n        (event: DragEvent<HTMLButtonElement>) => {\r\n            if (event.target !== event.currentTarget) {\r\n                return\r\n            }\r\n\r\n            const relatedTarget = event.relatedTarget\r\n            if (\r\n                typeof Node !== 'undefined'\r\n                && relatedTarget instanceof Node\r\n                && event.currentTarget.contains(relatedTarget)\r\n            ) {\r\n                return\r\n            }\r\n\r\n            setIsDragging(false)\r\n        },\r\n        [],\r\n    )\r\n\r\n    const handleDrop = useCallback(\r\n        (event: DragEvent<HTMLButtonElement>) => {\r\n            if (!hasImagePickerFiles(event)) {\r\n                return\r\n            }\r\n\r\n            event.preventDefault()\r\n            setIsDragging(false)\r\n            if (isChangeDisabled) {\r\n                return\r\n            }\r\n\r\n            const file = event.dataTransfer.files?.[0]\r\n            if (file) {\r\n                handleFile(file)\r\n            }\r\n        },\r\n        [handleFile, isChangeDisabled],\r\n    )\r\n\r\n    const handleClear = useCallback(() => {\r\n        if (isRemoveDisabled) {\r\n            return\r\n        }\r\n\r\n        setPendingCropFile(undefined)\r\n        setValidationReason(undefined)\r\n        setIsDragging(false)\r\n        updateValue(null)\r\n        if (inputRef.current) {\r\n            inputRef.current.value = ''\r\n        }\r\n    }, [isRemoveDisabled, updateValue])\r\n\r\n    const handleCropCancel = useCallback(() => {\r\n        setPendingCropFile(undefined)\r\n        syncImagePickerInput(inputRef.current, currentValue)\r\n    }, [currentValue])\r\n\r\n    const handleCropConfirm = useCallback(\r\n        (file: File) => {\r\n            setPendingCropFile(undefined)\r\n            commitFile(file)\r\n        },\r\n        [commitFile],\r\n    )\r\n\r\n    return {\r\n        inputRef,\r\n        previewUrl,\r\n        resolvedLabels,\r\n        validationMessage,\r\n        hasValue,\r\n        isChangeDisabled,\r\n        isRemoveDisabled,\r\n        isDragging,\r\n        pendingCropFile,\r\n        handleOpen,\r\n        handleInputChange,\r\n        handleDragOver,\r\n        handleDragLeave,\r\n        handleDrop,\r\n        handleClear,\r\n        handleCropCancel,\r\n        handleCropConfirm,\r\n    }\r\n}\r\n"],"names":["useImagePicker","value","defaultValue","onValueChange","accept","IMAGE_PICKER_DEFAULT_ACCEPT","maxSize","onValidationError","disabled","disableChange","disableRemove","isMobile","labels","crop","inputRef","useRef","uncontrolledValue","setUncontrolledValue","useState","filePreviewUrl","setFilePreviewUrl","validationReason","setValidationReason","isDragging","setIsDragging","pendingCropFile","setPendingCropFile","isControlled","currentValue","hasValue","isChangeDisabled","isRemoveDisabled","resolvedLabels","IMAGE_PICKER_MOBILE_LABELS","IMAGE_PICKER_DEFAULT_LABELS","previewUrl","validationMessage","useEffect","isImagePickerFile","objectUrl","syncImagePickerInput","updateValue","useCallback","nextValue","handleOpen","commitFile","file","handleFile","reason","acceptsImagePickerFile","handleInputChange","event","handleDragOver","hasImagePickerFiles","handleDragLeave","relatedTarget","handleDrop","handleClear","handleCropCancel","handleCropConfirm"],"mappings":"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"}

package/dist/components/forms/image-picker/hooks/useImagePickerCrop.hook.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),v=require("../utils/imagePicker.utils.cjs"),S=({file:c,cropErrorLabel:t,onConfirm:u})=>{const[r,d]=e.useState(),[C,l]=e.useState({x:0,y:0}),[U,p]=e.useState(1),[a,f]=e.useState(),[n,i]=e.useState(!1),[g,s]=e.useState();e.useEffect(()=>{if(l({x:0,y:0}),p(1),f(void 0),s(void 0),typeof URL>"u"||typeof URL.createObjectURL!="function"){d(void 0),s(t);return}const o=URL.createObjectURL(c);return d(o),()=>{typeof URL.revokeObjectURL=="function"&&URL.revokeObjectURL(o)}},[t,c]);const k=e.useCallback((o,P)=>{f(P)},[]),m=e.useCallback(()=>{s(void 0)},[]),R=e.useCallback(()=>{s(t)},[t]),y=e.useCallback(async()=>{if(!r||!a||n)return;i(!0),s(void 0);let o;try{o=await v.createImagePickerCroppedFile(c,a)}catch{s(t),i(!1);return}i(!1),u(o)},[t,a,c,r,n,u]);return{imageUrl:r,crop:C,setCrop:l,zoom:U,setZoom:p,croppedAreaPixels:a,handleCropComplete:k,handleMediaLoaded:m,handleMediaError:R,isProcessing:n,cropError:g,handleConfirm:y}};exports.useImagePickerCrop=S;
+//# sourceMappingURL=useImagePickerCrop.hook.cjs.map

package/dist/components/forms/image-picker/hooks/useImagePickerCrop.hook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImagePickerCrop.hook.cjs","sources":["../../../../../src/components/forms/image-picker/hooks/useImagePickerCrop.hook.ts"],"sourcesContent":["import type { Area, Point } from 'react-easy-crop'\r\nimport { useCallback, useEffect, useState } from 'react'\r\n\r\nimport type {\r\n    UseImagePickerCropOptions,\r\n    UseImagePickerCropReturn,\r\n} from '@components/forms/image-picker/hooks/types'\r\nimport { createImagePickerCroppedFile } from '@components/forms/image-picker/utils/imagePicker.utils.ts'\r\n\r\n/**\r\n * Manages cropper state and turns a selected crop area into a local file.\r\n *\r\n * The hook does not update picker state itself. Its caller decides when the\r\n * generated file becomes the committed ImagePicker value.\r\n */\r\nexport const useImagePickerCrop = ({\r\n    file,\r\n    cropErrorLabel,\r\n    onConfirm,\r\n}: UseImagePickerCropOptions): UseImagePickerCropReturn => {\r\n    const [imageUrl, setImageUrl] = useState<string>()\r\n    const [crop, setCrop] = useState<Point>({ x: 0, y: 0 })\r\n    const [zoom, setZoom] = useState(1)\r\n    const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area>()\r\n    const [isProcessing, setIsProcessing] = useState(false)\r\n    const [cropError, setCropError] = useState<string>()\r\n\r\n    useEffect(() => {\r\n        setCrop({ x: 0, y: 0 })\r\n        setZoom(1)\r\n        setCroppedAreaPixels(undefined)\r\n        setCropError(undefined)\r\n\r\n        if (\r\n            typeof URL === 'undefined'\r\n            || typeof URL.createObjectURL !== 'function'\r\n        ) {\r\n            setImageUrl(undefined)\r\n            setCropError(cropErrorLabel)\r\n            return\r\n        }\r\n\r\n        const objectUrl = URL.createObjectURL(file)\r\n        setImageUrl(objectUrl)\r\n\r\n        return () => {\r\n            if (typeof URL.revokeObjectURL === 'function') {\r\n                URL.revokeObjectURL(objectUrl)\r\n            }\r\n        }\r\n    }, [cropErrorLabel, file])\r\n\r\n    const handleCropComplete = useCallback(\r\n        (_croppedArea: Area, nextCroppedAreaPixels: Area) => {\r\n            setCroppedAreaPixels(nextCroppedAreaPixels)\r\n        },\r\n        [],\r\n    )\r\n\r\n    const handleMediaLoaded = useCallback(() => {\r\n        setCropError(undefined)\r\n    }, [])\r\n\r\n    const handleMediaError = useCallback(() => {\r\n        setCropError(cropErrorLabel)\r\n    }, [cropErrorLabel])\r\n\r\n    const handleConfirm = useCallback(async () => {\r\n        if (!imageUrl || !croppedAreaPixels || isProcessing) {\r\n            return\r\n        }\r\n\r\n        setIsProcessing(true)\r\n        setCropError(undefined)\r\n\r\n        let croppedFile: File\r\n        try {\r\n            croppedFile = await createImagePickerCroppedFile(\r\n                file,\r\n                croppedAreaPixels,\r\n            )\r\n        } catch {\r\n            setCropError(cropErrorLabel)\r\n            setIsProcessing(false)\r\n            return\r\n        }\r\n\r\n        setIsProcessing(false)\r\n        onConfirm(croppedFile)\r\n    }, [\r\n        cropErrorLabel,\r\n        croppedAreaPixels,\r\n        file,\r\n        imageUrl,\r\n        isProcessing,\r\n        onConfirm,\r\n    ])\r\n\r\n    return {\r\n        imageUrl,\r\n        crop,\r\n        setCrop,\r\n        zoom,\r\n        setZoom,\r\n        croppedAreaPixels,\r\n        handleCropComplete,\r\n        handleMediaLoaded,\r\n        handleMediaError,\r\n        isProcessing,\r\n        cropError,\r\n        handleConfirm,\r\n    }\r\n}\r\n"],"names":["useImagePickerCrop","file","cropErrorLabel","onConfirm","imageUrl","setImageUrl","useState","crop","setCrop","zoom","setZoom","croppedAreaPixels","setCroppedAreaPixels","isProcessing","setIsProcessing","cropError","setCropError","useEffect","objectUrl","handleCropComplete","useCallback","_croppedArea","nextCroppedAreaPixels","handleMediaLoaded","handleMediaError","handleConfirm","croppedFile","createImagePickerCroppedFile"],"mappings":"qJAeaA,EAAqB,CAAC,CAC/B,KAAAC,EACA,eAAAC,EACA,UAAAC,CACJ,IAA2D,CACvD,KAAM,CAACC,EAAUC,CAAW,EAAIC,WAAA,EAC1B,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAAgB,CAAE,EAAG,EAAG,EAAG,EAAG,EAChD,CAACG,EAAMC,CAAO,EAAIJ,EAAAA,SAAS,CAAC,EAC5B,CAACK,EAAmBC,CAAoB,EAAIN,WAAA,EAC5C,CAACO,EAAcC,CAAe,EAAIR,EAAAA,SAAS,EAAK,EAChD,CAACS,EAAWC,CAAY,EAAIV,WAAA,EAElCW,EAAAA,UAAU,IAAM,CAMZ,GALAT,EAAQ,CAAE,EAAG,EAAG,EAAG,EAAG,EACtBE,EAAQ,CAAC,EACTE,EAAqB,MAAS,EAC9BI,EAAa,MAAS,EAGlB,OAAO,IAAQ,KACZ,OAAO,IAAI,iBAAoB,WACpC,CACEX,EAAY,MAAS,EACrBW,EAAad,CAAc,EAC3B,MACJ,CAEA,MAAMgB,EAAY,IAAI,gBAAgBjB,CAAI,EAC1C,OAAAI,EAAYa,CAAS,EAEd,IAAM,CACL,OAAO,IAAI,iBAAoB,YAC/B,IAAI,gBAAgBA,CAAS,CAErC,CACJ,EAAG,CAAChB,EAAgBD,CAAI,CAAC,EAEzB,MAAMkB,EAAqBC,EAAAA,YACvB,CAACC,EAAoBC,IAAgC,CACjDV,EAAqBU,CAAqB,CAC9C,EACA,CAAA,CAAC,EAGCC,EAAoBH,EAAAA,YAAY,IAAM,CACxCJ,EAAa,MAAS,CAC1B,EAAG,CAAA,CAAE,EAECQ,EAAmBJ,EAAAA,YAAY,IAAM,CACvCJ,EAAad,CAAc,CAC/B,EAAG,CAACA,CAAc,CAAC,EAEbuB,EAAgBL,EAAAA,YAAY,SAAY,CAC1C,GAAI,CAAChB,GAAY,CAACO,GAAqBE,EACnC,OAGJC,EAAgB,EAAI,EACpBE,EAAa,MAAS,EAEtB,IAAIU,EACJ,GAAI,CACAA,EAAc,MAAMC,EAAAA,6BAChB1B,EACAU,CAAA,CAER,MAAQ,CACJK,EAAad,CAAc,EAC3BY,EAAgB,EAAK,EACrB,MACJ,CAEAA,EAAgB,EAAK,EACrBX,EAAUuB,CAAW,CACzB,EAAG,CACCxB,EACAS,EACAV,EACAG,EACAS,EACAV,CAAA,CACH,EAED,MAAO,CACH,SAAAC,EACA,KAAAG,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,kBAAAC,EACA,mBAAAQ,EACA,kBAAAI,EACA,iBAAAC,EACA,aAAAX,EACA,UAAAE,EACA,cAAAU,CAAA,CAER"}

package/dist/components/forms/image-picker/hooks/useImagePickerCrop.hook.d.ts

@@ -0,0 +1,8 @@
+import { UseImagePickerCropOptions, UseImagePickerCropReturn } from './types';
+/**
+ * Manages cropper state and turns a selected crop area into a local file.
+ *
+ * The hook does not update picker state itself. Its caller decides when the
+ * generated file becomes the committed ImagePicker value.
+ */
+export declare const useImagePickerCrop: ({ file, cropErrorLabel, onConfirm, }: UseImagePickerCropOptions) => UseImagePickerCropReturn;

package/dist/components/forms/image-picker/hooks/useImagePickerCrop.hook.js

@@ -0,0 +1,69 @@
+import { useState as s, useEffect as j, useCallback as n } from "react";
+import { createImagePickerCroppedFile as k } from "../utils/imagePicker.utils.js";
+const I = ({
+  file: r,
+  cropErrorLabel: e,
+  onConfirm: p
+}) => {
+  const [i, f] = s(), [l, u] = s({ x: 0, y: 0 }), [R, U] = s(1), [c, m] = s(), [a, d] = s(!1), [C, t] = s();
+  j(() => {
+    if (u({ x: 0, y: 0 }), U(1), m(void 0), t(void 0), typeof URL > "u" || typeof URL.createObjectURL != "function") {
+      f(void 0), t(e);
+      return;
+    }
+    const o = URL.createObjectURL(r);
+    return f(o), () => {
+      typeof URL.revokeObjectURL == "function" && URL.revokeObjectURL(o);
+    };
+  }, [e, r]);
+  const v = n(
+    (o, h) => {
+      m(h);
+    },
+    []
+  ), y = n(() => {
+    t(void 0);
+  }, []), g = n(() => {
+    t(e);
+  }, [e]), P = n(async () => {
+    if (!i || !c || a)
+      return;
+    d(!0), t(void 0);
+    let o;
+    try {
+      o = await k(
+        r,
+        c
+      );
+    } catch {
+      t(e), d(!1);
+      return;
+    }
+    d(!1), p(o);
+  }, [
+    e,
+    c,
+    r,
+    i,
+    a,
+    p
+  ]);
+  return {
+    imageUrl: i,
+    crop: l,
+    setCrop: u,
+    zoom: R,
+    setZoom: U,
+    croppedAreaPixels: c,
+    handleCropComplete: v,
+    handleMediaLoaded: y,
+    handleMediaError: g,
+    isProcessing: a,
+    cropError: C,
+    handleConfirm: P
+  };
+};
+export {
+  I as useImagePickerCrop
+};
+//# sourceMappingURL=useImagePickerCrop.hook.js.map

package/dist/components/forms/image-picker/hooks/useImagePickerCrop.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImagePickerCrop.hook.js","sources":["../../../../../src/components/forms/image-picker/hooks/useImagePickerCrop.hook.ts"],"sourcesContent":["import type { Area, Point } from 'react-easy-crop'\r\nimport { useCallback, useEffect, useState } from 'react'\r\n\r\nimport type {\r\n    UseImagePickerCropOptions,\r\n    UseImagePickerCropReturn,\r\n} from '@components/forms/image-picker/hooks/types'\r\nimport { createImagePickerCroppedFile } from '@components/forms/image-picker/utils/imagePicker.utils.ts'\r\n\r\n/**\r\n * Manages cropper state and turns a selected crop area into a local file.\r\n *\r\n * The hook does not update picker state itself. Its caller decides when the\r\n * generated file becomes the committed ImagePicker value.\r\n */\r\nexport const useImagePickerCrop = ({\r\n    file,\r\n    cropErrorLabel,\r\n    onConfirm,\r\n}: UseImagePickerCropOptions): UseImagePickerCropReturn => {\r\n    const [imageUrl, setImageUrl] = useState<string>()\r\n    const [crop, setCrop] = useState<Point>({ x: 0, y: 0 })\r\n    const [zoom, setZoom] = useState(1)\r\n    const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area>()\r\n    const [isProcessing, setIsProcessing] = useState(false)\r\n    const [cropError, setCropError] = useState<string>()\r\n\r\n    useEffect(() => {\r\n        setCrop({ x: 0, y: 0 })\r\n        setZoom(1)\r\n        setCroppedAreaPixels(undefined)\r\n        setCropError(undefined)\r\n\r\n        if (\r\n            typeof URL === 'undefined'\r\n            || typeof URL.createObjectURL !== 'function'\r\n        ) {\r\n            setImageUrl(undefined)\r\n            setCropError(cropErrorLabel)\r\n            return\r\n        }\r\n\r\n        const objectUrl = URL.createObjectURL(file)\r\n        setImageUrl(objectUrl)\r\n\r\n        return () => {\r\n            if (typeof URL.revokeObjectURL === 'function') {\r\n                URL.revokeObjectURL(objectUrl)\r\n            }\r\n        }\r\n    }, [cropErrorLabel, file])\r\n\r\n    const handleCropComplete = useCallback(\r\n        (_croppedArea: Area, nextCroppedAreaPixels: Area) => {\r\n            setCroppedAreaPixels(nextCroppedAreaPixels)\r\n        },\r\n        [],\r\n    )\r\n\r\n    const handleMediaLoaded = useCallback(() => {\r\n        setCropError(undefined)\r\n    }, [])\r\n\r\n    const handleMediaError = useCallback(() => {\r\n        setCropError(cropErrorLabel)\r\n    }, [cropErrorLabel])\r\n\r\n    const handleConfirm = useCallback(async () => {\r\n        if (!imageUrl || !croppedAreaPixels || isProcessing) {\r\n            return\r\n        }\r\n\r\n        setIsProcessing(true)\r\n        setCropError(undefined)\r\n\r\n        let croppedFile: File\r\n        try {\r\n            croppedFile = await createImagePickerCroppedFile(\r\n                file,\r\n                croppedAreaPixels,\r\n            )\r\n        } catch {\r\n            setCropError(cropErrorLabel)\r\n            setIsProcessing(false)\r\n            return\r\n        }\r\n\r\n        setIsProcessing(false)\r\n        onConfirm(croppedFile)\r\n    }, [\r\n        cropErrorLabel,\r\n        croppedAreaPixels,\r\n        file,\r\n        imageUrl,\r\n        isProcessing,\r\n        onConfirm,\r\n    ])\r\n\r\n    return {\r\n        imageUrl,\r\n        crop,\r\n        setCrop,\r\n        zoom,\r\n        setZoom,\r\n        croppedAreaPixels,\r\n        handleCropComplete,\r\n        handleMediaLoaded,\r\n        handleMediaError,\r\n        isProcessing,\r\n        cropError,\r\n        handleConfirm,\r\n    }\r\n}\r\n"],"names":["useImagePickerCrop","file","cropErrorLabel","onConfirm","imageUrl","setImageUrl","useState","crop","setCrop","zoom","setZoom","croppedAreaPixels","setCroppedAreaPixels","isProcessing","setIsProcessing","cropError","setCropError","useEffect","objectUrl","handleCropComplete","useCallback","_croppedArea","nextCroppedAreaPixels","handleMediaLoaded","handleMediaError","handleConfirm","croppedFile","createImagePickerCroppedFile"],"mappings":";;AAeO,MAAMA,IAAqB,CAAC;AAAA,EAC/B,MAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AACJ,MAA2D;AACvD,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAA,GAC1B,CAACC,GAAMC,CAAO,IAAIF,EAAgB,EAAE,GAAG,GAAG,GAAG,GAAG,GAChD,CAACG,GAAMC,CAAO,IAAIJ,EAAS,CAAC,GAC5B,CAACK,GAAmBC,CAAoB,IAAIN,EAAA,GAC5C,CAACO,GAAcC,CAAe,IAAIR,EAAS,EAAK,GAChD,CAACS,GAAWC,CAAY,IAAIV,EAAA;AAElC,EAAAW,EAAU,MAAM;AAMZ,QALAT,EAAQ,EAAE,GAAG,GAAG,GAAG,GAAG,GACtBE,EAAQ,CAAC,GACTE,EAAqB,MAAS,GAC9BI,EAAa,MAAS,GAGlB,OAAO,MAAQ,OACZ,OAAO,IAAI,mBAAoB,YACpC;AACE,MAAAX,EAAY,MAAS,GACrBW,EAAad,CAAc;AAC3B;AAAA,IACJ;AAEA,UAAMgB,IAAY,IAAI,gBAAgBjB,CAAI;AAC1C,WAAAI,EAAYa,CAAS,GAEd,MAAM;AACT,MAAI,OAAO,IAAI,mBAAoB,cAC/B,IAAI,gBAAgBA,CAAS;AAAA,IAErC;AAAA,EACJ,GAAG,CAAChB,GAAgBD,CAAI,CAAC;AAEzB,QAAMkB,IAAqBC;AAAA,IACvB,CAACC,GAAoBC,MAAgC;AACjD,MAAAV,EAAqBU,CAAqB;AAAA,IAC9C;AAAA,IACA,CAAA;AAAA,EAAC,GAGCC,IAAoBH,EAAY,MAAM;AACxC,IAAAJ,EAAa,MAAS;AAAA,EAC1B,GAAG,CAAA,CAAE,GAECQ,IAAmBJ,EAAY,MAAM;AACvC,IAAAJ,EAAad,CAAc;AAAA,EAC/B,GAAG,CAACA,CAAc,CAAC,GAEbuB,IAAgBL,EAAY,YAAY;AAC1C,QAAI,CAAChB,KAAY,CAACO,KAAqBE;AACnC;AAGJ,IAAAC,EAAgB,EAAI,GACpBE,EAAa,MAAS;AAEtB,QAAIU;AACJ,QAAI;AACA,MAAAA,IAAc,MAAMC;AAAA,QAChB1B;AAAA,QACAU;AAAA,MAAA;AAAA,IAER,QAAQ;AACJ,MAAAK,EAAad,CAAc,GAC3BY,EAAgB,EAAK;AACrB;AAAA,IACJ;AAEA,IAAAA,EAAgB,EAAK,GACrBX,EAAUuB,CAAW;AAAA,EACzB,GAAG;AAAA,IACCxB;AAAA,IACAS;AAAA,IACAV;AAAA,IACAG;AAAA,IACAS;AAAA,IACAV;AAAA,EAAA,CACH;AAED,SAAO;AAAA,IACH,UAAAC;AAAA,IACA,MAAAG;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,oBAAAQ;AAAA,IACA,mBAAAI;AAAA,IACA,kBAAAC;AAAA,IACA,cAAAX;AAAA,IACA,WAAAE;AAAA,IACA,eAAAU;AAAA,EAAA;AAER;"}

package/dist/components/forms/image-picker/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ImagePicker } from './ImagePicker.tsx';
+export { IMAGE_PICKER_STYLES } from './styles/ImagePicker.css.ts';
+export type { ImagePickerProps } from './types/ImagePicker.props.ts';
+export type { ImagePickerLabels, ImagePickerObjectFit, ImagePickerShape, ImagePickerValidationError, ImagePickerValidationReason, ImagePickerValue, } from './types/ImagePicker.types.ts';

package/dist/components/forms/image-picker/styles/ImagePicker.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit34.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                 */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={root:"_8x2wlj1",wrapper:"_8x2wlj2",preview:e.createRuntimeFn({defaultClassName:"_8x2wlj3",variantClassNames:{shape:{square:"_8x2wlj4",rounded:"_8x2wlj5",circle:"_8x2wlj6"}},defaultVariants:{shape:"rounded"},compoundVariants:[]}),empty:"_8x2wlj7",emptyIcon:"_8x2wlj8",emptyText:"_8x2wlj9",image:"_8x2wlja",scrim:"_8x2wljb",scrimText:"_8x2wljc",removeButton:e.createRuntimeFn({defaultClassName:"_8x2wljd",variantClassNames:{shape:{square:"_8x2wlje",rounded:"_8x2wljf",circle:"_8x2wljg"}},defaultVariants:{shape:"rounded"},compoundVariants:[]}),actions:"_8x2wljh",visuallyHidden:"_8x2wlji",input:"_8x2wljj"};exports.IMAGE_PICKER_STYLES=a;
+//# sourceMappingURL=ImagePicker.css.cjs.map

package/dist/components/forms/image-picker/styles/ImagePicker.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePicker.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/image-picker/styles/ImagePicker.css.d.ts

@@ -0,0 +1,47 @@
+import { RuntimeFn } from '@vanilla-extract/recipes';
+export declare const IMAGE_PICKER_STYLES: {
+    root: string;
+    wrapper: string;
+    preview: RuntimeFn<{
+        shape: {
+            square: {
+                borderRadius: `var(--${string})`;
+            };
+            rounded: {
+                borderRadius: `var(--${string})`;
+            };
+            circle: {
+                borderRadius: `var(--${string})`;
+                aspectRatio: "1";
+                height: "auto";
+            };
+        };
+    }>;
+    empty: string;
+    emptyIcon: string;
+    emptyText: string;
+    image: string;
+    scrim: string;
+    scrimText: string;
+    removeButton: RuntimeFn<{
+        shape: {
+            square: {
+                top: `var(--${string})`;
+                right: `var(--${string})`;
+            };
+            rounded: {
+                top: `var(--${string})`;
+                right: `var(--${string})`;
+            };
+            circle: {
+                top: "7%";
+                right: "7%";
+                transform: "translate(35%, -35%)";
+                borderRadius: `var(--${string})`;
+            };
+        };
+    }>;
+    actions: string;
+    visuallyHidden: string;
+    input: string;
+};

package/dist/components/forms/image-picker/styles/ImagePicker.css.js

@@ -0,0 +1,8 @@
+import '../../../../ui-kit34.css';import '../../../../ui-kit.css';/* empty css                                            */
+/* empty css                               */
+import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
+var t = { root: "_8x2wlj1", wrapper: "_8x2wlj2", preview: a({ defaultClassName: "_8x2wlj3", variantClassNames: { shape: { square: "_8x2wlj4", rounded: "_8x2wlj5", circle: "_8x2wlj6" } }, defaultVariants: { shape: "rounded" }, compoundVariants: [] }), empty: "_8x2wlj7", emptyIcon: "_8x2wlj8", emptyText: "_8x2wlj9", image: "_8x2wlja", scrim: "_8x2wljb", scrimText: "_8x2wljc", removeButton: a({ defaultClassName: "_8x2wljd", variantClassNames: { shape: { square: "_8x2wlje", rounded: "_8x2wljf", circle: "_8x2wljg" } }, defaultVariants: { shape: "rounded" }, compoundVariants: [] }), actions: "_8x2wljh", visuallyHidden: "_8x2wlji", input: "_8x2wljj" };
+export {
+  t as IMAGE_PICKER_STYLES
+};
+//# sourceMappingURL=ImagePicker.css.js.map

package/dist/components/forms/image-picker/styles/ImagePicker.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePicker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/forms/image-picker/types/ImagePicker.props.d.ts

@@ -0,0 +1,81 @@
+import { CSSProperties, HTMLAttributes, RefAttributes } from 'react';
+import { IconComponent } from '../../../foundation/icon';
+import { ImagePickerLabels, ImagePickerObjectFit, ImagePickerShape, ImagePickerValidationError, ImagePickerValue } from './ImagePicker.types.ts';
+import type * as React from 'react';
+/**
+ * Props for the ImagePicker component.
+ *
+ * All other supported `HTMLAttributes<HTMLDivElement>` are forwarded to the
+ * root wrapper. Use `onValueChange` rather than a native `onChange` handler to
+ * observe image selection and removal.
+ */
+export type ImagePickerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'defaultValue'> & RefAttributes<HTMLDivElement> & {
+    /** The controlled image value. Use a URL for an existing image or a File for a newly selected image. */
+    value?: ImagePickerValue;
+    /** The initial image value for uncontrolled usage. @default null */
+    defaultValue?: ImagePickerValue;
+    /** Called whenever the selected image changes or is cleared. */
+    onValueChange?: (value: ImagePickerValue) => void;
+    /** Visible field label. Also names the picker button unless `aria-label` or `aria-labelledby` is provided. */
+    label?: string;
+    /** Alternative text of the image preview. Defaults to `label`, then `labels.selected`. */
+    alt?: string;
+    /** Helper text rendered below the picker. Hidden when `error` is provided. */
+    helperText?: string;
+    /** Error text rendered below the picker, takes precedence over validation feedback, and sets `aria-invalid`. */
+    error?: string;
+    /** Accepted file types passed to the native file input and used for file validation. @default 'image/*' */
+    accept?: string;
+    /** Maximum accepted file size in bytes. Files larger than this value are rejected. */
+    maxSize?: number;
+    /** Called when a file does not match `accept` or exceeds `maxSize`. */
+    onValidationError?: (error: ImagePickerValidationError) => void;
+    /** Disables opening the file picker, drag and drop, and all image actions. @default false */
+    disabled?: boolean;
+    /** Disables the choose/change action, native input, and drag and drop while leaving removal available. @default false */
+    disableChange?: boolean;
+    /** Disables the remove action while leaving choosing or changing the image available. @default false */
+    disableRemove?: boolean;
+    /** Marks the field as required. Native validation applies only while no image is selected. @default false */
+    required?: boolean;
+    /** Shows the remove action when an image is selected. @default true */
+    clearable?: boolean;
+    /**
+     * Touch-first layout: disables drag and drop and renders explicit, full-size
+     * action buttons below the preview instead of the hover overlay and the
+     * corner remove button. @default false
+     */
+    isMobile?: boolean;
+    /** Icon shown in the empty state. @default the bundled image-plus icon */
+    icon?: IconComponent;
+    /** Id applied to the native file input. An id is generated when omitted. */
+    inputId?: string;
+    /** Name applied to the native file input for native form submission. */
+    name?: string;
+    /** Native file-input capture hint. Leave unset to let users pick from their gallery. */
+    capture?: React.InputHTMLAttributes<HTMLInputElement>['capture'];
+    /** Localizable labels merged over the desktop or mobile defaults. */
+    labels?: Partial<ImagePickerLabels>;
+    /**
+     * Opens a crop editor for newly selected or dropped local files before
+     * committing them as the picker value. Existing URL values are not cropped.
+     * @default false
+     */
+    crop?: boolean;
+    /**
+     * Fixed aspect ratio used by the crop editor. Defaults to `1` for a
+     * circular picker, the numeric value represented by `aspectRatio` when
+     * provided, or `4 / 3`.
+     */
+    cropAspectRatio?: number;
+    /** CSS width of the picker wrapper. @default '100%' */
+    width?: CSSProperties['width'];
+    /** CSS height of the preview surface. Ignored when `shape` is `circle`. */
+    height?: CSSProperties['height'];
+    /** CSS aspect ratio of the preview surface. Ignored when `shape` is `circle`. */
+    aspectRatio?: CSSProperties['aspectRatio'];
+    /** Shape of the clickable preview. Use `circle` for profile pictures. @default 'rounded' */
+    shape?: ImagePickerShape;
+    /** Object-fit value applied to the image preview. @default 'cover' */
+    objectFit?: ImagePickerObjectFit;
+};

package/dist/components/forms/image-picker/types/ImagePicker.types.d.ts

@@ -0,0 +1,50 @@
+import { ImageObjectFit } from '../../../layout/image/types/Image.types.ts';
+import { IMAGE_PICKER_SHAPES } from '../constants/imagePickerShapes.const.ts';
+/** A remote image URL, a locally selected image file, or no image. */
+export type ImagePickerValue = File | string | null;
+/** Reasons why a selected or dropped file can be rejected before it becomes the value. */
+export type ImagePickerValidationReason = 'invalidType' | 'maxSize';
+/** Details passed to `onValidationError` when a file is rejected. */
+export type ImagePickerValidationError = {
+    /** The validation rule that rejected the file. */
+    reason: ImagePickerValidationReason;
+    /** The file that failed validation. */
+    file: File;
+    /** The configured byte limit when `reason` is `maxSize`. */
+    maxSize?: number;
+};
+/** Localizable text used by picker actions, crop controls, empty state, and validation feedback. */
+export type ImagePickerLabels = {
+    /** Label for the choose action when no image is selected. */
+    choose: string;
+    /** Label for the choose action when an image is already selected. */
+    change: string;
+    /** Label for the remove action. */
+    remove: string;
+    /** Title shown above the crop editor. @default 'Crop image' */
+    crop?: string;
+    /** Label for the action that discards the current crop. @default 'Cancel' */
+    cancel?: string;
+    /** Label for the action that applies the current crop. @default 'Apply crop' */
+    apply?: string;
+    /** Label for the crop zoom control. @default 'Zoom' */
+    zoom?: string;
+    /** Accessible label for the interactive crop area. @default 'Adjust crop' */
+    cropArea?: string;
+    /** Feedback shown when the selected crop cannot be generated. */
+    cropError?: string;
+    /** Instruction shown in the empty preview state. */
+    empty: string;
+    /** Fallback alternative text for a selected image. */
+    selected: string;
+    /** Validation message shown for an unsupported file type. */
+    invalidType: string;
+    /** Validation message shown when a file exceeds `maxSize`. */
+    maxSize: string;
+};
+/** Object-fit values supported by the image preview. */
+export type ImagePickerObjectFit = ImageObjectFit;
+/** Fully resolved labels used internally after defaults are merged. */
+export type ImagePickerResolvedLabels = Required<ImagePickerLabels>;
+/** Shape values supported by the clickable image dropzone. */
+export type ImagePickerShape = (typeof IMAGE_PICKER_SHAPES)[keyof typeof IMAGE_PICKER_SHAPES];

package/dist/components/forms/image-picker/types/index.d.ts

@@ -0,0 +1,2 @@
+export type { ImagePickerProps } from './ImagePicker.props.ts';
+export type { ImagePickerLabels, ImagePickerObjectFit, ImagePickerShape, ImagePickerValidationError, ImagePickerValidationReason, ImagePickerValue, } from './ImagePicker.types.ts';

package/dist/components/forms/image-picker/utils/imagePicker.utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=e=>typeof File<"u"&&e instanceof File,g=e=>{const t=e.dataTransfer;return Array.from(t?.types??[]).includes("Files")||!!t?.files?.length},h=e=>{if(typeof e=="number")return Number.isFinite(e)&&e>0?e:void 0;if(typeof e!="string")return;const t=Number(e.trim());if(Number.isFinite(t)&&t>0)return t;const r=e.split("/").map(n=>Number(n.trim()));if(!(r.length!==2||r.some(n=>!Number.isFinite(n)||n<=0)))return r[0]/r[1]},y=(e,t)=>{const r=t.split(",").map(i=>i.trim().toLowerCase()).filter(Boolean);if(r.length===0)return!0;const n=e.type.toLowerCase(),o=e.name.toLowerCase();return r.some(i=>i.startsWith(".")?o.endsWith(i):i.endsWith("/*")?n.startsWith(i.slice(0,-1)):n===i)},w=(e,t)=>{if(!e)return;if(!u(t)){e.value="";return}if(e.files?.[0]===t||(e.value="",typeof DataTransfer!="function"))return;const r=new DataTransfer;r.items.add(t),e.files=r.files},b=e=>new Promise((t,r)=>{const n=new Image;n.onload=()=>t(n),n.onerror=()=>r(new Error("The image could not be loaded.")),n.src=e}),p=async(e,t)=>{if(typeof document>"u"||typeof URL>"u"||typeof URL.createObjectURL!="function")throw new Error("Image cropping is not available in this environment.");const r=URL.createObjectURL(e);try{const n=await b(r),o=Math.max(1,Math.round(t.width)),i=Math.max(1,Math.round(t.height)),a=document.createElement("canvas");a.width=o,a.height=i;const s=a.getContext("2d");if(!s)throw new Error("The image crop canvas is not available.");s.drawImage(n,Math.round(t.x),Math.round(t.y),o,i,0,0,o,i);const c=e.type||"image/png",m=await new Promise((d,l)=>{a.toBlob(f=>{if(f){d(f);return}l(new Error("The cropped image could not be encoded."))},c)});return new File([m],e.name,{type:m.type||c,lastModified:e.lastModified})}finally{typeof URL.revokeObjectURL=="function"&&URL.revokeObjectURL(r)}};exports.acceptsImagePickerFile=y;exports.createImagePickerCroppedFile=p;exports.hasImagePickerFiles=g;exports.isImagePickerFile=u;exports.resolveImagePickerAspectRatio=h;exports.syncImagePickerInput=w;
+//# sourceMappingURL=imagePicker.utils.cjs.map

package/dist/components/forms/image-picker/utils/imagePicker.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"imagePicker.utils.cjs","sources":["../../../../../src/components/forms/image-picker/utils/imagePicker.utils.ts"],"sourcesContent":["import type { CSSProperties, DragEvent } from 'react'\r\nimport type { Area } from 'react-easy-crop'\r\n\r\nimport type { ImagePickerValue } from '@components/forms/image-picker/types/ImagePicker.types.ts'\r\n\r\n/**\r\n * Checks whether a picker value is a locally selected file.\r\n *\r\n * @param value The current picker value to narrow.\r\n * @returns `true` when `value` is a `File`.\r\n */\r\nexport const isImagePickerFile = (\r\n    value: ImagePickerValue,\r\n): value is File =>\r\n    typeof File !== 'undefined' && value instanceof File\r\n\r\n/**\r\n * Checks whether a drag event contains files rather than unrelated data.\r\n *\r\n * @param event The drag event emitted by the preview button.\r\n * @returns `true` when the event advertises files or contains at least one file.\r\n */\r\nexport const hasImagePickerFiles = (event: DragEvent): boolean => {\r\n    const dataTransfer = event.dataTransfer\r\n    const types = Array.from(dataTransfer?.types ?? [])\r\n\r\n    return types.includes('Files') || Boolean(dataTransfer?.files?.length)\r\n}\r\n\r\n/**\r\n * Resolves a CSS aspect-ratio value to the numeric ratio required by the\r\n * cropper.\r\n *\r\n * @param aspectRatio The CSS ratio, such as `16 / 9`, or a numeric ratio.\r\n * @returns The positive numeric ratio, or `undefined` for non-fixed values.\r\n */\r\nexport const resolveImagePickerAspectRatio = (\r\n    aspectRatio: CSSProperties['aspectRatio'],\r\n): number | undefined => {\r\n    if (typeof aspectRatio === 'number') {\r\n        return Number.isFinite(aspectRatio) && aspectRatio > 0\r\n            ? aspectRatio\r\n            : undefined\r\n    }\r\n\r\n    if (typeof aspectRatio !== 'string') {\r\n        return undefined\r\n    }\r\n\r\n    const numericRatio = Number(aspectRatio.trim())\r\n    if (Number.isFinite(numericRatio) && numericRatio > 0) {\r\n        return numericRatio\r\n    }\r\n\r\n    const ratioParts = aspectRatio.split('/').map((part) => Number(part.trim()))\r\n    if (\r\n        ratioParts.length !== 2\r\n        || ratioParts.some((part) => !Number.isFinite(part) || part <= 0)\r\n    ) {\r\n        return undefined\r\n    }\r\n\r\n    return ratioParts[0] / ratioParts[1]\r\n}\r\n\r\n/**\r\n * Tests a file against a native-style comma-separated `accept` value.\r\n *\r\n * MIME types, MIME wildcards such as `image/*`, and file extensions are\r\n * supported. An empty `accept` value accepts every file.\r\n *\r\n * @param file The file to validate.\r\n * @param accept The comma-separated accepted MIME types or extensions.\r\n * @returns `true` when the file matches at least one accepted value.\r\n */\r\nexport const acceptsImagePickerFile = (\r\n    file: File,\r\n    accept: string,\r\n): boolean => {\r\n    const acceptedTypes = accept\r\n        .split(',')\r\n        .map((type) => type.trim().toLowerCase())\r\n        .filter(Boolean)\r\n\r\n    if (acceptedTypes.length === 0) {\r\n        return true\r\n    }\r\n\r\n    const fileType = file.type.toLowerCase()\r\n    const fileName = file.name.toLowerCase()\r\n\r\n    return acceptedTypes.some((acceptedType) => {\r\n        if (acceptedType.startsWith('.')) {\r\n            return fileName.endsWith(acceptedType)\r\n        }\r\n\r\n        if (acceptedType.endsWith('/*')) {\r\n            return fileType.startsWith(acceptedType.slice(0, -1))\r\n        }\r\n\r\n        return fileType === acceptedType\r\n    })\r\n}\r\n\r\n/**\r\n * Mirrors a local file value into the native file input so form submission and\r\n * validation stay consistent with the picker preview.\r\n *\r\n * URL and empty values clear the input. Local files are assigned through\r\n * `DataTransfer` when the browser supports it; unsupported environments leave\r\n * the input cleared.\r\n *\r\n * @param input The native file input to synchronize, if mounted.\r\n * @param value The current picker value.\r\n */\r\nexport const syncImagePickerInput = (\r\n    input: HTMLInputElement | null,\r\n    value: ImagePickerValue,\r\n) => {\r\n    if (!input) {\r\n        return\r\n    }\r\n\r\n    if (!isImagePickerFile(value)) {\r\n        input.value = ''\r\n        return\r\n    }\r\n\r\n    if (input.files?.[0] === value) {\r\n        return\r\n    }\r\n\r\n    input.value = ''\r\n\r\n    if (typeof DataTransfer !== 'function') {\r\n        return\r\n    }\r\n\r\n    const dataTransfer = new DataTransfer()\r\n    dataTransfer.items.add(value)\r\n    input.files = dataTransfer.files\r\n}\r\n\r\nconst loadImagePickerImage = (source: string): Promise<HTMLImageElement> =>\r\n    new Promise((resolve, reject) => {\r\n        const image = new Image()\r\n        image.onload = () => resolve(image)\r\n        image.onerror = () => reject(new Error('The image could not be loaded.'))\r\n        image.src = source\r\n    })\r\n\r\n/**\r\n * Renders a crop area into a new local image file.\r\n *\r\n * The crop coordinates emitted by `react-easy-crop` are already expressed in\r\n * the source image's natural pixels, so no additional scale conversion is\r\n * needed before drawing to the canvas.\r\n *\r\n * @param file The original local image file.\r\n * @param cropAreaPixels The selected crop rectangle in source-image pixels.\r\n * @returns A new file with the original name and image MIME type.\r\n * @throws When the browser cannot load the image, create a canvas context, or\r\n *         encode the cropped canvas.\r\n */\r\nexport const createImagePickerCroppedFile = async (\r\n    file: File,\r\n    cropAreaPixels: Area,\r\n): Promise<File> => {\r\n    if (\r\n        typeof document === 'undefined'\r\n        || typeof URL === 'undefined'\r\n        || typeof URL.createObjectURL !== 'function'\r\n    ) {\r\n        throw new Error('Image cropping is not available in this environment.')\r\n    }\r\n\r\n    const sourceUrl = URL.createObjectURL(file)\r\n\r\n    try {\r\n        const image = await loadImagePickerImage(sourceUrl)\r\n        const width = Math.max(1, Math.round(cropAreaPixels.width))\r\n        const height = Math.max(1, Math.round(cropAreaPixels.height))\r\n        const canvas = document.createElement('canvas')\r\n        canvas.width = width\r\n        canvas.height = height\r\n\r\n        const context = canvas.getContext('2d')\r\n        if (!context) {\r\n            throw new Error('The image crop canvas is not available.')\r\n        }\r\n\r\n        context.drawImage(\r\n            image,\r\n            Math.round(cropAreaPixels.x),\r\n            Math.round(cropAreaPixels.y),\r\n            width,\r\n            height,\r\n            0,\r\n            0,\r\n            width,\r\n            height,\r\n        )\r\n\r\n        const outputType = file.type || 'image/png'\r\n        const blob = await new Promise<Blob>((resolve, reject) => {\r\n            canvas.toBlob((result) => {\r\n                if (result) {\r\n                    resolve(result)\r\n                    return\r\n                }\r\n\r\n                reject(new Error('The cropped image could not be encoded.'))\r\n            }, outputType)\r\n        })\r\n\r\n        return new File([blob], file.name, {\r\n            type: blob.type || outputType,\r\n            lastModified: file.lastModified,\r\n        })\r\n    } finally {\r\n        if (typeof URL.revokeObjectURL === 'function') {\r\n            URL.revokeObjectURL(sourceUrl)\r\n        }\r\n    }\r\n}\r\n"],"names":["isImagePickerFile","value","hasImagePickerFiles","event","dataTransfer","resolveImagePickerAspectRatio","aspectRatio","numericRatio","ratioParts","part","acceptsImagePickerFile","file","accept","acceptedTypes","type","fileType","fileName","acceptedType","syncImagePickerInput","input","loadImagePickerImage","source","resolve","reject","image","createImagePickerCroppedFile","cropAreaPixels","sourceUrl","width","height","canvas","context","outputType","blob","result"],"mappings":"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"}

package/dist/components/forms/image-picker/utils/imagePicker.utils.d.ts

@@ -0,0 +1,62 @@
+import { CSSProperties, DragEvent } from 'react';
+import { Area } from 'react-easy-crop';
+import { ImagePickerValue } from '../types/ImagePicker.types.ts';
+/**
+ * Checks whether a picker value is a locally selected file.
+ *
+ * @param value The current picker value to narrow.
+ * @returns `true` when `value` is a `File`.
+ */
+export declare const isImagePickerFile: (value: ImagePickerValue) => value is File;
+/**
+ * Checks whether a drag event contains files rather than unrelated data.
+ *
+ * @param event The drag event emitted by the preview button.
+ * @returns `true` when the event advertises files or contains at least one file.
+ */
+export declare const hasImagePickerFiles: (event: DragEvent) => boolean;
+/**
+ * Resolves a CSS aspect-ratio value to the numeric ratio required by the
+ * cropper.
+ *
+ * @param aspectRatio The CSS ratio, such as `16 / 9`, or a numeric ratio.
+ * @returns The positive numeric ratio, or `undefined` for non-fixed values.
+ */
+export declare const resolveImagePickerAspectRatio: (aspectRatio: CSSProperties["aspectRatio"]) => number | undefined;
+/**
+ * Tests a file against a native-style comma-separated `accept` value.
+ *
+ * MIME types, MIME wildcards such as `image/*`, and file extensions are
+ * supported. An empty `accept` value accepts every file.
+ *
+ * @param file The file to validate.
+ * @param accept The comma-separated accepted MIME types or extensions.
+ * @returns `true` when the file matches at least one accepted value.
+ */
+export declare const acceptsImagePickerFile: (file: File, accept: string) => boolean;
+/**
+ * Mirrors a local file value into the native file input so form submission and
+ * validation stay consistent with the picker preview.
+ *
+ * URL and empty values clear the input. Local files are assigned through
+ * `DataTransfer` when the browser supports it; unsupported environments leave
+ * the input cleared.
+ *
+ * @param input The native file input to synchronize, if mounted.
+ * @param value The current picker value.
+ */
+export declare const syncImagePickerInput: (input: HTMLInputElement | null, value: ImagePickerValue) => void;
+/**
+ * Renders a crop area into a new local image file.
+ *
+ * The crop coordinates emitted by `react-easy-crop` are already expressed in
+ * the source image's natural pixels, so no additional scale conversion is
+ * needed before drawing to the canvas.
+ *
+ * @param file The original local image file.
+ * @param cropAreaPixels The selected crop rectangle in source-image pixels.
+ * @returns A new file with the original name and image MIME type.
+ * @throws When the browser cannot load the image, create a canvas context, or
+ *         encode the cropped canvas.
+ */
+export declare const createImagePickerCroppedFile: (file: File, cropAreaPixels: Area) => Promise<File>;