@ifhover/leaf-ui 0.0.0-stage → 0.5.0

package/dist/esm/browser/modules/image/viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/viewer.js","sources":["../../../../../src/image/viewer.tsx"],"sourcesContent":["import {\n  ChevronLeft,\n  ChevronRight,\n  Download,\n  ImageOff,\n  Maximize2,\n  Minimize2,\n  PanelBottom,\n  RotateCcw,\n  X,\n  ZoomIn,\n  ZoomOut,\n} from 'lucide-react';\nimport { type ReactNode, useEffect, useRef, useState } from 'react';\nimport Lightbox, {\n  type FullscreenRef,\n  useController,\n  useLightboxState,\n  useNavigationState,\n  type ZoomRef,\n} from 'yet-another-react-lightbox';\nimport Fullscreen from 'yet-another-react-lightbox/plugins/fullscreen';\nimport Zoom from 'yet-another-react-lightbox/plugins/zoom';\nimport { Loading } from '../loading';\nimport { motionDuration, useMotionEnabled } from '../shared/motion';\nimport { ScopedPortal } from '../shared/scoped-portal';\nimport { useText } from '../shared/use-text';\nimport type { ImagePreviewItem, ImagePreviewProps } from './image';\n\nexport function ImageViewer(props: ImagePreviewProps) {\n  return (\n    <ScopedPortal>\n      <Viewer {...props} />\n    </ScopedPortal>\n  );\n}\nfunction Control({\n  label,\n  children,\n  active,\n  disabled,\n  onClick,\n  className = '',\n}: {\n  label: string;\n  children: ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n  onClick: () => void;\n  className?: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className={`leaf-image-viewer__control ${className}`}\n      aria-label={label}\n      title={label}\n      aria-pressed={active}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n}\nfunction ViewerChrome({\n  items,\n  thumbnails,\n  downloadable,\n  zoomControl,\n  fullscreenControl,\n}: {\n  items: readonly ImagePreviewItem[];\n  thumbnails: boolean;\n  downloadable: boolean;\n  zoomControl: ZoomRef | null;\n  fullscreenControl: FullscreenRef | null;\n}) {\n  const t = useText();\n  const motion = useMotionEnabled();\n  const { currentIndex } = useLightboxState();\n  const { prev, next, close } = useController();\n  const { prevDisabled, nextDisabled } = useNavigationState();\n  const strip = useRef<HTMLFieldSetElement>(null);\n  const [showThumbs, setShowThumbs] = useState(thumbnails);\n  const [failedDownload, setFailedDownload] = useState(false);\n  const [downloading, setDownloading] = useState(false);\n  const item = items[currentIndex];\n  const hasThumbs = thumbnails && items.length > 1;\n  const zoom = zoomControl?.zoom ?? 1;\n  const fullscreen = fullscreenControl?.fullscreen ?? false;\n  const downloadUrl = typeof item?.download === 'string' ? item.download : item?.src;\n  useEffect(() => setShowThumbs(thumbnails), [thumbnails]);\n  useEffect(() => {\n    setFailedDownload(false);\n    if (!showThumbs) return;\n    const root = strip.current;\n    const selected = root?.querySelector<HTMLElement>(`[data-index=\"${currentIndex}\"]`);\n    if (root && selected)\n      root.scrollTo({\n        left: selected.offsetLeft - root.offsetLeft - (root.clientWidth - selected.clientWidth) / 2,\n        behavior: motion ? 'smooth' : 'auto',\n      });\n  }, [currentIndex, showThumbs, motion]);\n  const choose = (target: number) => {\n    const difference = target - currentIndex;\n    if (difference > 0) next({ count: difference });\n    else if (difference < 0) prev({ count: -difference });\n  };\n  const download = async () => {\n    if (!item || downloading) return;\n    setDownloading(true);\n    setFailedDownload(false);\n    try {\n      const address = typeof item.download === 'string' ? item.download : item.src;\n      const response = await fetch(address);\n      if (!response.ok) throw new Error('Download failed');\n      const url = URL.createObjectURL(await response.blob());\n      const anchor = document.createElement('a');\n      anchor.href = url;\n      anchor.download = item.downloadName || address.split(/[?#]/)[0]?.split('/').pop() || 'image';\n      anchor.click();\n      setTimeout(() => URL.revokeObjectURL(url), 1000);\n    } catch {\n      setFailedDownload(true);\n    } finally {\n      setDownloading(false);\n    }\n  };\n  return (\n    <div\n      className=\"leaf-image-viewer__chrome\"\n      data-thumbnails={(hasThumbs && showThumbs) || undefined}\n    >\n      <header className=\"leaf-image-viewer__header\">\n        <div className=\"leaf-image-viewer__title\">\n          <span>{item?.alt || t('图片预览', 'Image preview')}</span>\n          <span className=\"leaf-image-viewer__count\" aria-live=\"polite\">\n            {currentIndex + 1} / {items.length}\n          </span>\n        </div>\n        <div className=\"leaf-image-viewer__header-actions\">\n          {downloadable && item?.download !== false && (\n            <Control\n              label={t('下载图片', 'Download image')}\n              onClick={() => void download()}\n              disabled={downloading}\n            >\n              {downloading ? <Loading size=\"sm\" /> : <Download size={19} />}\n            </Control>\n          )}\n          <Control\n            label={\n              fullscreen ? t('退出全屏', 'Exit fullscreen') : t('进入全屏', 'Enter fullscreen')\n            }\n            disabled={!fullscreenControl || fullscreenControl.disabled}\n            onClick={() => (fullscreen ? fullscreenControl?.exit() : fullscreenControl?.enter())}\n          >\n            {fullscreen ? <Minimize2 size={19} /> : <Maximize2 size={19} />}\n          </Control>\n          <Control label={t('关闭预览', 'Close preview')} onClick={close}>\n            <X size={22} />\n          </Control>\n        </div>\n      </header>\n      {items.length > 1 && (\n        <>\n          <Control\n            className=\"leaf-image-viewer__previous\"\n            label={t('上一张', 'Previous image')}\n            disabled={prevDisabled}\n            onClick={() => prev()}\n          >\n            <ChevronLeft size={26} />\n          </Control>\n          <Control\n            className=\"leaf-image-viewer__next\"\n            label={t('下一张', 'Next image')}\n            disabled={nextDisabled}\n            onClick={() => next()}\n          >\n            <ChevronRight size={26} />\n          </Control>\n        </>\n      )}\n      <footer className=\"leaf-image-viewer__footer\">\n        {failedDownload && (\n          <p role=\"alert\" className=\"leaf-image-viewer__error\">\n            {t(\n              '下载失败，可在新窗口打开原图保存',\n              'Download failed. Open the original image to save it.',\n            )}{' '}\n            <a href={downloadUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n              {t('打开原图', 'Open original')}\n            </a>\n          </p>\n        )}\n        <div className=\"leaf-image-viewer__tools\">\n          <Control\n            label={t('缩小', 'Zoom out')}\n            disabled={!zoomControl || zoomControl.disabled || zoom <= 1}\n            onClick={() => zoomControl?.zoomOut()}\n          >\n            <ZoomOut size={18} />\n          </Control>\n          <button\n            type=\"button\"\n            className=\"leaf-image-viewer__zoom-level\"\n            onClick={() => zoomControl?.changeZoom(1)}\n            title={t('重置缩放', 'Reset zoom')}\n          >\n            {Math.round(zoom * 100)}%\n          </button>\n          <Control\n            label={t('放大', 'Zoom in')}\n            disabled={!zoomControl || zoomControl.disabled || zoom >= zoomControl.maxZoom}\n            onClick={() => zoomControl?.zoomIn()}\n          >\n            <ZoomIn size={18} />\n          </Control>\n          <Control\n            label={t('重置缩放', 'Reset zoom')}\n            disabled={zoom <= 1}\n            onClick={() => zoomControl?.changeZoom(1)}\n          >\n            <RotateCcw size={17} />\n          </Control>\n          {hasThumbs && (\n            <>\n              <span className=\"leaf-image-viewer__tool-separator\" />\n              <Control\n                label={t('显示缩略图', 'Show thumbnails')}\n                active={showThumbs}\n                onClick={() => setShowThumbs((value) => !value)}\n              >\n                <PanelBottom size={18} />\n              </Control>\n            </>\n          )}\n        </div>\n        {hasThumbs && showThumbs && (\n          <div className=\"leaf-image-viewer__gallery\">\n            <Control\n              label={t('向前滚动缩略图', 'Scroll thumbnails backward')}\n              onClick={() =>\n                strip.current?.scrollBy({\n                  left: -(strip.current.clientWidth * 0.7),\n                  behavior: motion ? 'smooth' : 'auto',\n                })\n              }\n            >\n              <ChevronLeft size={18} />\n            </Control>\n            <fieldset\n              className=\"leaf-image-viewer__thumbnails\"\n              ref={strip}\n              aria-label={t('图片列表', 'Image list')}\n            >\n              {items.map((image, target) => (\n                <button\n                  type=\"button\"\n                  // biome-ignore lint/suspicious/noArrayIndexKey: Stateless thumbnails may intentionally repeat the same source URL.\n                  key={`${image.src}-${target}`}\n                  className=\"leaf-image-viewer__thumbnail\"\n                  data-index={target}\n                  aria-current={currentIndex === target || undefined}\n                  aria-label={`${t('查看第', 'View image')} ${target + 1}${t('张图片', '')}${image.alt ? `: ${image.alt}` : ''}`}\n                  title={image.alt || String(target + 1)}\n                  tabIndex={currentIndex === target ? 0 : -1}\n                  onClick={() => choose(target)}\n                  onKeyDown={(event) => {\n                    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;\n                    event.preventDefault();\n                    event.stopPropagation();\n                    const position =\n                      event.key === 'Home'\n                        ? 0\n                        : event.key === 'End'\n                          ? items.length - 1\n                          : Math.max(\n                              0,\n                              Math.min(\n                                items.length - 1,\n                                target + (event.key === 'ArrowRight' ? 1 : -1),\n                              ),\n                            );\n                    choose(position);\n                    strip.current\n                      ?.querySelector<HTMLButtonElement>(`[data-index=\"${position}\"]`)\n                      ?.focus();\n                  }}\n                >\n                  <img\n                    src={image.thumbnailSrc ?? image.src}\n                    alt=\"\"\n                    loading=\"lazy\"\n                    draggable={false}\n                  />\n                  <span>{target + 1}</span>\n                </button>\n              ))}\n            </fieldset>\n            <Control\n              label={t('向后滚动缩略图', 'Scroll thumbnails forward')}\n              onClick={() =>\n                strip.current?.scrollBy({\n                  left: strip.current.clientWidth * 0.7,\n                  behavior: motion ? 'smooth' : 'auto',\n                })\n              }\n            >\n              <ChevronRight size={18} />\n            </Control>\n          </div>\n        )}\n      </footer>\n    </div>\n  );\n}\nfunction Viewer({\n  items,\n  open,\n  index = 0,\n  onClose,\n  onIndexChange,\n  thumbnails = true,\n  downloadable = false,\n}: ImagePreviewProps) {\n  const [root, setRoot] = useState<HTMLDivElement | null>(null);\n  const [zoomControl, setZoomControl] = useState<ZoomRef | null>(null);\n  const [fullscreenControl, setFullscreenControl] = useState<FullscreenRef | null>(null);\n  const [slides, setSlides] = useState(() => items.map((item) => ({ ...item })));\n  // A new array with the same images must not reset the carousel's navigation animation.\n  if (\n    items.length !== slides.length ||\n    items.some((item, position) => {\n      const slide = slides[position];\n      return (\n        !slide ||\n        item.src !== slide.src ||\n        item.alt !== slide.alt ||\n        item.width !== slide.width ||\n        item.height !== slide.height ||\n        item.thumbnailSrc !== slide.thumbnailSrc ||\n        item.download !== slide.download ||\n        item.downloadName !== slide.downloadName\n      );\n    })\n  ) {\n    setSlides(items.map((item) => ({ ...item })));\n  }\n  const t = useText();\n  const motion = useMotionEnabled();\n  const duration = root && motion ? motionDuration(root) : 0;\n  return (\n    <div ref={setRoot} className=\"leaf-image-viewer\">\n      {root && (\n        <Lightbox\n          open={open && items.length > 0}\n          close={onClose}\n          slides={slides}\n          index={Math.max(0, Math.min(index, items.length - 1))}\n          portal={{ root }}\n          plugins={[Zoom, Fullscreen]}\n          className=\"leaf-image-viewer__lightbox\"\n          carousel={{ finite: true, padding: 0, spacing: 24 }}\n          animation={{\n            fade: duration * 1.2,\n            swipe: duration * 1.6,\n            navigation: duration * 1.6,\n            zoom: duration,\n          }}\n          zoom={{ ref: setZoomControl, maxZoomPixelRatio: 3, scrollToZoom: true }}\n          fullscreen={{ ref: setFullscreenControl }}\n          controller={{ closeOnBackdropClick: true }}\n          toolbar={{ buttons: [] }}\n          render={{\n            buttonClose: () => null,\n            buttonPrev: () => null,\n            buttonNext: () => null,\n            buttonZoom: () => null,\n            buttonFullscreen: () => null,\n            iconLoading: () => <Loading />,\n            iconError: () => <ImageOff size={32} />,\n            controls: () => (\n              <ViewerChrome\n                items={items}\n                thumbnails={thumbnails}\n                downloadable={downloadable}\n                zoomControl={zoomControl}\n                fullscreenControl={fullscreenControl}\n              />\n            ),\n          }}\n          labels={{\n            Lightbox: t('图片预览', 'Image preview'),\n            'Photo gallery': t('图片列表', 'Image list'),\n            Slide: t('图片', 'Image'),\n            '{index} of {total}': t('第 {index} 张，共 {total} 张', '{index} of {total}'),\n            Close: t('关闭预览', 'Close preview'),\n          }}\n          on={{\n            view: ({ index: next }) => {\n              if (next !== index) onIndexChange?.(next);\n            },\n          }}\n          styles={{\n            root: {\n              '--yarl__color_backdrop': 'rgba(0,0,0,.92)',\n              zIndex: 'var(--leaf-z-index-modal)',\n            },\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["ImageViewer","props","ScopedPortal","Viewer","Control","label","children","active","disabled","onClick","className","ViewerChrome","items","thumbnails","downloadable","zoomControl","fullscreenControl","t","useText","motion","useMotionEnabled","currentIndex","useLightboxState","prev","next","close","useController","prevDisabled","nextDisabled","useNavigationState","strip","useRef","showThumbs","setShowThumbs","useState","failedDownload","setFailedDownload","downloading","setDownloading","item","hasThumbs","zoom","fullscreen","downloadUrl","useEffect","root","selected","choose","target","difference","download","address","response","fetch","Error","url","URL","anchor","document","setTimeout","undefined","Loading","Download","Minimize2","Maximize2","X","ChevronLeft","ChevronRight","ZoomOut","Math","ZoomIn","RotateCcw","value","PanelBottom","image","String","event","position","open","index","onClose","onIndexChange","setRoot","setZoomControl","setFullscreenControl","slides","setSlides","slide","duration","motionDuration","Lightbox","Zoom","Fullscreen","ImageOff"],"mappings":"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"}

package/dist/esm/browser/modules/imagecropper/crop.js

@@ -0,0 +1,37 @@
+"use client";
+async function cropImage(src, area, shape, type, quality, crossOrigin) {
+    const image = await new Promise((resolve, reject)=>{
+        const img = new window.Image();
+        if (crossOrigin) img.crossOrigin = crossOrigin;
+        img.onload = ()=>resolve(img);
+        img.onerror = ()=>reject(new Error('Unable to load image for export.'));
+        img.src = src;
+    });
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(area.width));
+    canvas.height = Math.max(1, Math.round(area.height));
+    const output = canvas.getContext('2d');
+    if (!output) throw new Error('Canvas is unavailable.');
+    if ('image/jpeg' === type) {
+        output.fillStyle = '#fff';
+        output.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    if ('round' === shape) {
+        output.beginPath();
+        output.ellipse(canvas.width / 2, canvas.height / 2, canvas.width / 2, canvas.height / 2, 0, 0, 2 * Math.PI);
+        output.clip();
+    }
+    output.imageSmoothingQuality = 'high';
+    output.drawImage(image, area.x, area.y, area.width, area.height, 0, 0, canvas.width, canvas.height);
+    const blob = await new Promise((resolve, reject)=>{
+        canvas.toBlob((value)=>value ? resolve(value) : reject(new Error('Image export failed.')), type, Math.max(0, Math.min(1, quality)));
+    });
+    return {
+        blob,
+        width: canvas.width,
+        height: canvas.height
+    };
+}
+export { cropImage };
+
+//# sourceMappingURL=crop.js.map

package/dist/esm/browser/modules/imagecropper/crop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imagecropper/crop.js","sources":["../../../../../src/imagecropper/crop.ts"],"sourcesContent":["import type { CropArea, ImageCropResult } from './imagecropper';\nexport async function cropImage(\n  src: string,\n  area: CropArea,\n  shape: 'rect' | 'round',\n  type: string,\n  quality: number,\n  crossOrigin?: 'anonymous' | 'use-credentials',\n): Promise<ImageCropResult> {\n  const image = await new Promise<HTMLImageElement>((resolve, reject) => {\n    const img = new window.Image();\n    if (crossOrigin) img.crossOrigin = crossOrigin;\n    img.onload = () => resolve(img);\n    img.onerror = () => reject(new Error('Unable to load image for export.'));\n    img.src = src;\n  });\n  const canvas = document.createElement('canvas');\n  canvas.width = Math.max(1, Math.round(area.width));\n  canvas.height = Math.max(1, Math.round(area.height));\n  const output = canvas.getContext('2d');\n  if (!output) throw new Error('Canvas is unavailable.');\n  if (type === 'image/jpeg') {\n    output.fillStyle = '#fff';\n    output.fillRect(0, 0, canvas.width, canvas.height);\n  }\n  if (shape === 'round') {\n    output.beginPath();\n    output.ellipse(\n      canvas.width / 2,\n      canvas.height / 2,\n      canvas.width / 2,\n      canvas.height / 2,\n      0,\n      0,\n      Math.PI * 2,\n    );\n    output.clip();\n  }\n  output.imageSmoothingQuality = 'high';\n  output.drawImage(\n    image,\n    area.x,\n    area.y,\n    area.width,\n    area.height,\n    0,\n    0,\n    canvas.width,\n    canvas.height,\n  );\n  const blob = await new Promise<Blob>((resolve, reject) => {\n    canvas.toBlob(\n      (value) => (value ? resolve(value) : reject(new Error('Image export failed.'))),\n      type,\n      Math.max(0, Math.min(1, quality)),\n    );\n  });\n  return { blob, width: canvas.width, height: canvas.height };\n}\n"],"names":["cropImage","src","area","shape","type","quality","crossOrigin","image","Promise","resolve","reject","img","window","Error","canvas","document","Math","output","blob","value"],"mappings":";AACO,eAAeA,UACpBC,GAAW,EACXC,IAAc,EACdC,KAAuB,EACvBC,IAAY,EACZC,OAAe,EACfC,WAA6C;IAE7C,MAAMC,QAAQ,MAAM,IAAIC,QAA0B,CAACC,SAASC;QAC1D,MAAMC,MAAM,IAAIC,OAAO,KAAK;QAC5B,IAAIN,aAAaK,IAAI,WAAW,GAAGL;QACnCK,IAAI,MAAM,GAAG,IAAMF,QAAQE;QAC3BA,IAAI,OAAO,GAAG,IAAMD,OAAO,IAAIG,MAAM;QACrCF,IAAI,GAAG,GAAGV;IACZ;IACA,MAAMa,SAASC,SAAS,aAAa,CAAC;IACtCD,OAAO,KAAK,GAAGE,KAAK,GAAG,CAAC,GAAGA,KAAK,KAAK,CAACd,KAAK,KAAK;IAChDY,OAAO,MAAM,GAAGE,KAAK,GAAG,CAAC,GAAGA,KAAK,KAAK,CAACd,KAAK,MAAM;IAClD,MAAMe,SAASH,OAAO,UAAU,CAAC;IACjC,IAAI,CAACG,QAAQ,MAAM,IAAIJ,MAAM;IAC7B,IAAIT,AAAS,iBAATA,MAAuB;QACzBa,OAAO,SAAS,GAAG;QACnBA,OAAO,QAAQ,CAAC,GAAG,GAAGH,OAAO,KAAK,EAAEA,OAAO,MAAM;IACnD;IACA,IAAIX,AAAU,YAAVA,OAAmB;QACrBc,OAAO,SAAS;QAChBA,OAAO,OAAO,CACZH,OAAO,KAAK,GAAG,GACfA,OAAO,MAAM,GAAG,GAChBA,OAAO,KAAK,GAAG,GACfA,OAAO,MAAM,GAAG,GAChB,GACA,GACAE,AAAU,IAAVA,KAAK,EAAE;QAETC,OAAO,IAAI;IACb;IACAA,OAAO,qBAAqB,GAAG;IAC/BA,OAAO,SAAS,CACdV,OACAL,KAAK,CAAC,EACNA,KAAK,CAAC,EACNA,KAAK,KAAK,EACVA,KAAK,MAAM,EACX,GACA,GACAY,OAAO,KAAK,EACZA,OAAO,MAAM;IAEf,MAAMI,OAAO,MAAM,IAAIV,QAAc,CAACC,SAASC;QAC7CI,OAAO,MAAM,CACX,CAACK,QAAWA,QAAQV,QAAQU,SAAST,OAAO,IAAIG,MAAM,0BACtDT,MACAY,KAAK,GAAG,CAAC,GAAGA,KAAK,GAAG,CAAC,GAAGX;IAE5B;IACA,OAAO;QAAEa;QAAM,OAAOJ,OAAO,KAAK;QAAE,QAAQA,OAAO,MAAM;IAAC;AAC5D"}

package/dist/esm/browser/modules/imagecropper/editor.js

@@ -0,0 +1,197 @@
+"use client";
+import '../../../styles/components/imagecropper.css';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Crop, ImageOff, RotateCcw } from "lucide-react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import react_image_crop, { centerCrop, makeAspectCrop } from "react-image-crop";
+import { Button } from "../button/index.js";
+import { Loading } from "../loading/index.js";
+import { useText } from "../shared/use-text.js";
+import { cropImage } from "./crop.js";
+const editor_CropEditor = /*#__PURE__*/ forwardRef(function({ src, aspect, shape = 'rect', minWidth = 24, minHeight = 24, disabled = false, showGrid = true, showActions = true, crossOrigin = 'anonymous', type = 'image/png', quality = 0.92, onChange, onExport, onError, extra, className: _className, style: _style, ...props }, ref) {
+    const t = useText();
+    const image = useRef(null);
+    const area = useRef(null);
+    const [crop, setCrop] = useState();
+    const [ready, setReady] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState('');
+    const [exportError, setExportError] = useState('');
+    const [dimensions, setDimensions] = useState(null);
+    const mounted = useRef(true);
+    const ratio = 'round' === shape ? 1 : aspect;
+    const update = (next)=>{
+        const node = image.current;
+        if (!node?.naturalWidth) return;
+        setCrop(next);
+        const pixels = {
+            x: node.naturalWidth * next.x / 100,
+            y: node.naturalHeight * next.y / 100,
+            width: node.naturalWidth * next.width / 100,
+            height: node.naturalHeight * next.height / 100
+        };
+        area.current = pixels;
+        setDimensions(pixels);
+        onChange?.(pixels);
+    };
+    const reset = ()=>{
+        const node = image.current;
+        if (!node?.naturalWidth) return;
+        setExportError('');
+        const next = ratio && ratio > 0 ? centerCrop(makeAspectCrop({
+            unit: '%',
+            width: 80
+        }, ratio, node.naturalWidth, node.naturalHeight), node.naturalWidth, node.naturalHeight) : {
+            unit: '%',
+            x: 10,
+            y: 10,
+            width: 80,
+            height: 80
+        };
+        update(next);
+    };
+    useEffect(()=>{
+        if (ready) reset();
+    }, [
+        ratio
+    ]);
+    useEffect(()=>{
+        mounted.current = true;
+        return ()=>{
+            mounted.current = false;
+        };
+    }, []);
+    const exportImage = async ()=>{
+        if (!ready || !area.current || error) throw new Error('Image is not ready.');
+        return cropImage(src, area.current, shape, type, quality, crossOrigin);
+    };
+    useImperativeHandle(ref, ()=>({
+            export: exportImage,
+            reset
+        }));
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "leaf-image-cropper__stage",
+                "data-disabled": disabled || void 0,
+                "data-ready": ready || void 0,
+                children: [
+                    /*#__PURE__*/ jsx(react_image_crop, {
+                        crop: crop,
+                        aspect: ratio && ratio > 0 ? ratio : void 0,
+                        circularCrop: 'round' === shape,
+                        disabled: disabled || !ready || Boolean(error),
+                        keepSelection: true,
+                        minWidth: minWidth,
+                        minHeight: minHeight,
+                        ruleOfThirds: showGrid,
+                        onChange: (_pixels, percent)=>update(percent),
+                        ariaLabels: {
+                            cropArea: t('裁剪区域，方向键移动，拖动边缘调整大小', 'Crop selection. Arrow keys move; drag edges to resize'),
+                            nwDragHandle: t('左上角', 'Top left'),
+                            nDragHandle: t('上边缘', 'Top edge'),
+                            neDragHandle: t('右上角', 'Top right'),
+                            eDragHandle: t('右边缘', 'Right edge'),
+                            seDragHandle: t('右下角', 'Bottom right'),
+                            sDragHandle: t('下边缘', 'Bottom edge'),
+                            swDragHandle: t('左下角', 'Bottom left'),
+                            wDragHandle: t('左边缘', 'Left edge')
+                        },
+                        children: /*#__PURE__*/ jsx("img", {
+                            ref: image,
+                            src: src,
+                            alt: t('待裁剪图片', 'Image to crop'),
+                            crossOrigin: crossOrigin,
+                            draggable: false,
+                            onLoad: ()=>{
+                                setReady(true);
+                                setError('');
+                                reset();
+                            },
+                            onError: ()=>{
+                                area.current = null;
+                                setReady(false);
+                                setError(t('图片加载失败', 'Image could not be loaded'));
+                                onError?.(new Error('Unable to load image.'));
+                            }
+                        })
+                    }),
+                    !ready && !error && /*#__PURE__*/ jsx("div", {
+                        className: "leaf-image-cropper__placeholder",
+                        children: /*#__PURE__*/ jsx(Loading, {})
+                    }),
+                    error && /*#__PURE__*/ jsx("div", {
+                        className: "leaf-image-cropper__placeholder",
+                        children: /*#__PURE__*/ jsx(ImageOff, {
+                            size: 28,
+                            "aria-hidden": "true"
+                        })
+                    }),
+                    ready && dimensions && /*#__PURE__*/ jsxs("output", {
+                        className: "leaf-image-cropper__dimensions",
+                        "aria-label": t('裁剪尺寸', 'Crop dimensions'),
+                        children: [
+                            Math.round(dimensions.width),
+                            " \xd7 ",
+                            Math.round(dimensions.height)
+                        ]
+                    })
+                ]
+            }),
+            showActions && /*#__PURE__*/ jsxs("div", {
+                className: "leaf-image-cropper__actions",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "leaf-image-cropper__hint",
+                        children: t('拖动选框移动 · 拖动边缘调整', 'Move the selection · Drag its edges to resize')
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        variant: "ghost",
+                        size: "sm",
+                        startIcon: /*#__PURE__*/ jsx(RotateCcw, {
+                            size: 15
+                        }),
+                        onClick: reset,
+                        disabled: !ready || disabled || busy,
+                        children: t('重置', 'Reset')
+                    }),
+                    onExport && /*#__PURE__*/ jsx(Button, {
+                        size: "sm",
+                        startIcon: /*#__PURE__*/ jsx(Crop, {
+                            size: 15
+                        }),
+                        disabled: !ready || disabled || Boolean(error),
+                        loading: busy,
+                        onClick: async ()=>{
+                            if (busy) return;
+                            setBusy(true);
+                            setExportError('');
+                            try {
+                                const result = await exportImage();
+                                if (mounted.current) onExport(result);
+                            } catch (reason) {
+                                if (mounted.current) {
+                                    setExportError(t('导出失败，请检查图片跨域权限', 'Export failed. Check image CORS permissions.'));
+                                    onError?.(reason instanceof Error ? reason : new Error(String(reason)));
+                                }
+                            } finally{
+                                if (mounted.current) setBusy(false);
+                            }
+                        },
+                        children: t('裁剪', 'Crop')
+                    }),
+                    extra
+                ]
+            }),
+            (error || exportError) && /*#__PURE__*/ jsx("p", {
+                role: "alert",
+                className: "leaf-image-cropper__error",
+                children: error || exportError
+            })
+        ]
+    });
+});
+export { editor_CropEditor as CropEditor };
+
+//# sourceMappingURL=editor.js.map

package/dist/esm/browser/modules/imagecropper/editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imagecropper/editor.js","sources":["../../../../../src/imagecropper/editor.tsx"],"sourcesContent":["import { Crop, ImageOff, RotateCcw } from 'lucide-react';\nimport { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport ReactCrop, { centerCrop, makeAspectCrop, type PercentCrop } from 'react-image-crop';\nimport { Button } from '../button';\nimport { Loading } from '../loading';\nimport { useText } from '../shared/use-text';\nimport { cropImage } from './crop';\nimport type { CropArea, ImageCropperHandle, ImageCropperProps } from './imagecropper';\n\nexport const CropEditor = forwardRef<ImageCropperHandle, ImageCropperProps>(function CropEditor(\n  {\n    src,\n    aspect,\n    shape = 'rect',\n    minWidth = 24,\n    minHeight = 24,\n    disabled = false,\n    showGrid = true,\n    showActions = true,\n    crossOrigin = 'anonymous',\n    type = 'image/png',\n    quality = 0.92,\n    onChange,\n    onExport,\n    onError,\n    extra,\n    className: _className,\n    style: _style,\n    ...props\n  },\n  ref,\n) {\n  const t = useText();\n  const image = useRef<HTMLImageElement>(null);\n  const area = useRef<CropArea | null>(null);\n  const [crop, setCrop] = useState<PercentCrop>();\n  const [ready, setReady] = useState(false);\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState('');\n  const [exportError, setExportError] = useState('');\n  const [dimensions, setDimensions] = useState<CropArea | null>(null);\n  const mounted = useRef(true);\n  const ratio = shape === 'round' ? 1 : aspect;\n  const update = (next: PercentCrop) => {\n    const node = image.current;\n    if (!node?.naturalWidth) return;\n    setCrop(next);\n    const pixels = {\n      x: (node.naturalWidth * next.x) / 100,\n      y: (node.naturalHeight * next.y) / 100,\n      width: (node.naturalWidth * next.width) / 100,\n      height: (node.naturalHeight * next.height) / 100,\n    };\n    area.current = pixels;\n    setDimensions(pixels);\n    onChange?.(pixels);\n  };\n  const reset = () => {\n    const node = image.current;\n    if (!node?.naturalWidth) return;\n    setExportError('');\n    const next =\n      ratio && ratio > 0\n        ? centerCrop(\n            makeAspectCrop({ unit: '%', width: 80 }, ratio, node.naturalWidth, node.naturalHeight),\n            node.naturalWidth,\n            node.naturalHeight,\n          )\n        : { unit: '%' as const, x: 10, y: 10, width: 80, height: 80 };\n    update(next);\n  };\n  // biome-ignore lint/correctness/useExhaustiveDependencies: Ratio changes reset the selection; ordinary dragging must not reset it.\n  useEffect(() => {\n    if (ready) reset();\n  }, [ratio]);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const exportImage = async () => {\n    if (!ready || !area.current || error) throw new Error('Image is not ready.');\n    return cropImage(src, area.current, shape, type, quality, crossOrigin);\n  };\n  useImperativeHandle(ref, () => ({ export: exportImage, reset }));\n  return (\n    <div {...props}>\n      <div\n        className=\"leaf-image-cropper__stage\"\n        data-disabled={disabled || undefined}\n        data-ready={ready || undefined}\n      >\n        <ReactCrop\n          crop={crop}\n          aspect={ratio && ratio > 0 ? ratio : undefined}\n          circularCrop={shape === 'round'}\n          disabled={disabled || !ready || Boolean(error)}\n          keepSelection\n          minWidth={minWidth}\n          minHeight={minHeight}\n          ruleOfThirds={showGrid}\n          onChange={(_pixels, percent) => update(percent)}\n          ariaLabels={{\n            cropArea: t(\n              '裁剪区域，方向键移动，拖动边缘调整大小',\n              'Crop selection. Arrow keys move; drag edges to resize',\n            ),\n            nwDragHandle: t('左上角', 'Top left'),\n            nDragHandle: t('上边缘', 'Top edge'),\n            neDragHandle: t('右上角', 'Top right'),\n            eDragHandle: t('右边缘', 'Right edge'),\n            seDragHandle: t('右下角', 'Bottom right'),\n            sDragHandle: t('下边缘', 'Bottom edge'),\n            swDragHandle: t('左下角', 'Bottom left'),\n            wDragHandle: t('左边缘', 'Left edge'),\n          }}\n        >\n          <img\n            ref={image}\n            src={src}\n            alt={t('待裁剪图片', 'Image to crop')}\n            crossOrigin={crossOrigin}\n            draggable={false}\n            onLoad={() => {\n              setReady(true);\n              setError('');\n              reset();\n            }}\n            onError={() => {\n              area.current = null;\n              setReady(false);\n              setError(t('图片加载失败', 'Image could not be loaded'));\n              onError?.(new Error('Unable to load image.'));\n            }}\n          />\n        </ReactCrop>\n        {!ready && !error && (\n          <div className=\"leaf-image-cropper__placeholder\">\n            <Loading />\n          </div>\n        )}\n        {error && (\n          <div className=\"leaf-image-cropper__placeholder\">\n            <ImageOff size={28} aria-hidden=\"true\" />\n          </div>\n        )}\n        {ready && dimensions && (\n          <output\n            className=\"leaf-image-cropper__dimensions\"\n            aria-label={t('裁剪尺寸', 'Crop dimensions')}\n          >\n            {Math.round(dimensions.width)} × {Math.round(dimensions.height)}\n          </output>\n        )}\n      </div>\n      {showActions && (\n        <div className=\"leaf-image-cropper__actions\">\n          <span className=\"leaf-image-cropper__hint\">\n            {t('拖动选框移动 · 拖动边缘调整', 'Move the selection · Drag its edges to resize')}\n          </span>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            startIcon={<RotateCcw size={15} />}\n            onClick={reset}\n            disabled={!ready || disabled || busy}\n          >\n            {t('重置', 'Reset')}\n          </Button>\n          {onExport && (\n            <Button\n              size=\"sm\"\n              startIcon={<Crop size={15} />}\n              disabled={!ready || disabled || Boolean(error)}\n              loading={busy}\n              onClick={async () => {\n                if (busy) return;\n                setBusy(true);\n                setExportError('');\n                try {\n                  const result = await exportImage();\n                  if (mounted.current) onExport(result);\n                } catch (reason) {\n                  if (mounted.current) {\n                    setExportError(\n                      t(\n                        '导出失败，请检查图片跨域权限',\n                        'Export failed. Check image CORS permissions.',\n                      ),\n                    );\n                    onError?.(reason instanceof Error ? reason : new Error(String(reason)));\n                  }\n                } finally {\n                  if (mounted.current) setBusy(false);\n                }\n              }}\n            >\n              {t('裁剪', 'Crop')}\n            </Button>\n          )}\n          {extra}\n        </div>\n      )}\n      {(error || exportError) && (\n        <p role=\"alert\" className=\"leaf-image-cropper__error\">\n          {error || exportError}\n        </p>\n      )}\n    </div>\n  );\n});\n"],"names":["CropEditor","forwardRef","src","aspect","shape","minWidth","minHeight","disabled","showGrid","showActions","crossOrigin","type","quality","onChange","onExport","onError","extra","_className","_style","props","ref","t","useText","image","useRef","area","crop","setCrop","useState","ready","setReady","busy","setBusy","error","setError","exportError","setExportError","dimensions","setDimensions","mounted","ratio","update","next","node","pixels","reset","centerCrop","makeAspectCrop","useEffect","exportImage","Error","cropImage","useImperativeHandle","undefined","ReactCrop","Boolean","_pixels","percent","Loading","ImageOff","Math","Button","RotateCcw","Crop","result","reason","String"],"mappings":"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"}

package/dist/esm/browser/modules/imagecropper/imagecropper.js

@@ -0,0 +1,38 @@
+"use client";
+import '../../../styles/components/imagecropper.css';
+import { jsx } from "react/jsx-runtime";
+import { Suspense, forwardRef, lazy, useImperativeHandle, useRef } from "react";
+import { Loading } from "../loading/index.js";
+import { classes } from "../shared/classes.js";
+import { useClient } from "../shared/use-client.js";
+const Editor = /*#__PURE__*/ lazy(()=>import("./editor.js").then((module)=>({
+            default: module.CropEditor
+        })));
+const imagecropper_ImageCropper = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const editor = useRef(null);
+    const client = useClient();
+    useImperativeHandle(ref, ()=>({
+            export: ()=>editor.current?.export() ?? Promise.reject(new Error('Image cropper is loading.')),
+            reset: ()=>editor.current?.reset()
+        }), []);
+    return /*#__PURE__*/ jsx("div", {
+        className: classes('leaf-image-cropper', props.className),
+        style: props.style,
+        children: client ? /*#__PURE__*/ jsx(Suspense, {
+            fallback: /*#__PURE__*/ jsx("div", {
+                className: "leaf-image-cropper__stage",
+                children: /*#__PURE__*/ jsx(Loading, {})
+            }),
+            children: /*#__PURE__*/ jsx(Editor, {
+                ...props,
+                ref: editor
+            }, `${props.src}-${props.crossOrigin ?? 'anonymous'}`)
+        }) : /*#__PURE__*/ jsx("div", {
+            className: "leaf-image-cropper__stage",
+            children: /*#__PURE__*/ jsx(Loading, {})
+        })
+    });
+});
+export { imagecropper_ImageCropper as ImageCropper };
+
+//# sourceMappingURL=imagecropper.js.map

package/dist/esm/browser/modules/imagecropper/imagecropper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imagecropper/imagecropper.js","sources":["../../../../../src/imagecropper/imagecropper.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  lazy,\n  type ReactNode,\n  Suspense,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { Loading } from '../loading';\nimport { classes } from '../shared/classes';\nimport { useClient } from '../shared/use-client';\nexport interface CropArea {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\nexport interface ImageCropResult {\n  blob: Blob;\n  width: number;\n  height: number;\n}\nexport interface ImageCropperHandle {\n  export: () => Promise<ImageCropResult>;\n  reset: () => void;\n}\nexport interface ImageCropperProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onError'> {\n  src: string;\n  aspect?: number;\n  shape?: 'rect' | 'round';\n  minWidth?: number;\n  minHeight?: number;\n  disabled?: boolean;\n  showGrid?: boolean;\n  showActions?: boolean;\n  crossOrigin?: 'anonymous' | 'use-credentials';\n  type?: 'image/png' | 'image/jpeg' | 'image/webp';\n  quality?: number;\n  onChange?: (area: CropArea) => void;\n  onExport?: (result: ImageCropResult) => void;\n  onError?: (error: Error) => void;\n  extra?: ReactNode;\n}\nconst Editor = lazy(() => import('./editor').then((module) => ({ default: module.CropEditor })));\nexport const ImageCropper = forwardRef<ImageCropperHandle, ImageCropperProps>(\n  function ImageCropper(props, ref) {\n    const editor = useRef<ImageCropperHandle>(null);\n    const client = useClient();\n    useImperativeHandle(\n      ref,\n      () => ({\n        export: () =>\n          editor.current?.export() ?? Promise.reject(new Error('Image cropper is loading.')),\n        reset: () => editor.current?.reset(),\n      }),\n      [],\n    );\n    return (\n      <div className={classes('leaf-image-cropper', props.className)} style={props.style}>\n        {client ? (\n          <Suspense\n            fallback={\n              <div className=\"leaf-image-cropper__stage\">\n                <Loading />\n              </div>\n            }\n          >\n            <Editor\n              key={`${props.src}-${props.crossOrigin ?? 'anonymous'}`}\n              {...props}\n              ref={editor}\n            />\n          </Suspense>\n        ) : (\n          <div className=\"leaf-image-cropper__stage\">\n            <Loading />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["Editor","lazy","module","ImageCropper","forwardRef","props","ref","editor","useRef","client","useClient","useImperativeHandle","Promise","Error","classes","Suspense","Loading"],"mappings":";;;;;;;AA6CA,MAAMA,SAAS,WAAHA,GAAGC,KAAK,IAAM,MAAM,CAAC,eAAY,IAAI,CAAC,CAACC,SAAY;YAAE,SAASA,OAAO,UAAU;QAAC;AACrF,MAAMC,4BAAe,WAAHA,GAAGC,WAC1B,SAAsBC,KAAK,EAAEC,GAAG;IAC9B,MAAMC,SAASC,OAA2B;IAC1C,MAAMC,SAASC;IACfC,oBACEL,KACA,IAAO;YACL,QAAQ,IACNC,OAAO,OAAO,EAAE,YAAYK,QAAQ,MAAM,CAAC,IAAIC,MAAM;YACvD,OAAO,IAAMN,OAAO,OAAO,EAAE;QAC/B,IACA,EAAE;IAEJ,OAAO,WAAP,GACE,IAAC;QAAI,WAAWO,QAAQ,sBAAsBT,MAAM,SAAS;QAAG,OAAOA,MAAM,KAAK;kBAC/EI,SAAS,WAATA,GACC,IAACM,UAAQA;YACP,wBACE,IAAC;gBAAI,WAAU;0BACb,kBAACC,SAAOA,CAAAA;;sBAIZ,kBAAChB,QAAMA;gBAEJ,GAAGK,KAAK;gBACT,KAAKE;eAFA,GAAGF,MAAM,GAAG,CAAC,CAAC,EAAEA,MAAM,WAAW,IAAI,aAAa;2BAM3D,IAAC;YAAI,WAAU;sBACb,kBAACW,SAAOA,CAAAA;;;AAKlB"}

package/dist/esm/browser/modules/imagecropper/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { ImageCropper } from "./imagecropper.js";

package/dist/esm/browser/modules/index.js

@@ -0,0 +1,86 @@
+"use client";
+export { Alert } from "./alert/index.js";
+export { Affix, Anchor } from "./anchor/index.js";
+export { AppBar, BottomNavigation, Toolbar } from "./appbar/index.js";
+export { AutoComplete } from "./autocomplete/index.js";
+export { Avatar, AvatarGroup } from "./avatar/index.js";
+export { BackTop } from "./backtop/index.js";
+export { Badge } from "./badge/index.js";
+export { Breadcrumb } from "./breadcrumb/index.js";
+export { Button, ButtonGroup, SplitButton } from "./button/index.js";
+export { Calendar } from "./calendar/index.js";
+export { Card } from "./card/index.js";
+export { Carousel } from "./carousel/index.js";
+export { Cascader, mapCascaderOptions } from "./cascader/index.js";
+export { Checkbox, CheckboxGroup } from "./checkbox/index.js";
+export { Collapse } from "./collapse/index.js";
+export { ColorPicker, gradientString, parseGradient } from "./colorpicker/index.js";
+export { CommandPalette } from "./commandpalette/index.js";
+export { ConfigProvider } from "./config-provider/index.js";
+export { colorContrast, useBreakpoint, useSystemAppearance } from "./config-provider/helpers.js";
+export { ConfirmProvider, useConfirm } from "./confirm/index.js";
+export { DatePicker } from "./datepicker/index.js";
+export { DateRangePicker } from "./daterangepicker/index.js";
+export { DateTimePicker } from "./datetimepicker/index.js";
+export { Descriptions } from "./descriptions/index.js";
+export { Divider } from "./divider/index.js";
+export { Drawer } from "./drawer/index.js";
+export { Dropdown } from "./dropdown/index.js";
+export { Empty } from "./empty/index.js";
+export { ErrorBoundary } from "./errorboundary/index.js";
+export { FileList } from "./filelist/index.js";
+export { FAB, FloatButton, FloatButtonGroup } from "./floatbutton/index.js";
+export { Form, FormErrorSummary, FormField, FormGroup, FormList } from "./form/index.js";
+export { useFormValidation } from "./form/validation.js";
+export { Col, Grid, Row } from "./grid/index.js";
+export { Image, ImagePreview, ImagePreviewGroup } from "./image/index.js";
+export { ImageCropper } from "./imagecropper/index.js";
+export { InfiniteScroll } from "./infinitescroll/index.js";
+export { Input, InputGroup, InputSearch } from "./input/index.js";
+export { InputMask } from "./inputmask/index.js";
+export { InputNumber } from "./inputnumber/index.js";
+export { InputOTP } from "./inputotp/index.js";
+export { Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider } from "./layout/index.js";
+export { Loading } from "./loading/index.js";
+export { LoadingBar, LoadingBarProvider, useLoadingBar } from "./loadingbar/index.js";
+export { Masonry } from "./masonry/index.js";
+export { Mentions } from "./mentions/index.js";
+export { Menu } from "./menu/index.js";
+export { Message, MessageProvider, useMessage } from "./message/index.js";
+export { Modal } from "./modal/index.js";
+export { Notification, NotificationProvider, useNotification } from "./notification/index.js";
+export { Pagination } from "./pagination/index.js";
+export { Popconfirm } from "./popconfirm/index.js";
+export { Popover } from "./popover/index.js";
+export { Progress } from "./progress/index.js";
+export { QRCode } from "./qrcode/index.js";
+export { Radio, RadioGroup } from "./radio/index.js";
+export { Rate } from "./rate/index.js";
+export { Result } from "./result/index.js";
+export { ScrollArea } from "./scrollarea/index.js";
+export { Scrollbar } from "./scrollbar/index.js";
+export { Segmented } from "./segmented/index.js";
+export { Select } from "./select/index.js";
+export { SignaturePad } from "./signaturepad/index.js";
+export { Skeleton } from "./skeleton/index.js";
+export { Slider } from "./slider/index.js";
+export { Space } from "./space/index.js";
+export { ResizablePanels, Splitter } from "./splitter/index.js";
+export { Countdown, Statistic } from "./statistic/index.js";
+export { Steps } from "./steps/index.js";
+export { Switch } from "./switch/index.js";
+export { Table, TableBody, TableCaption, TableCell, TableColumnHeader, TableEmpty, TableError, TableFooter, TableHeader, TableLoading, TableRow } from "./table/index.js";
+export { Tabs } from "./tabs/index.js";
+export { CheckableTag, Tag, TagGroup } from "./tag/index.js";
+export { Textarea } from "./textarea/index.js";
+export { Timeline } from "./timeline/index.js";
+export { TimePicker } from "./timepicker/index.js";
+export { TimeRangePicker } from "./timerangepicker/index.js";
+export { Tooltip } from "./tooltip/index.js";
+export { Tour } from "./tour/index.js";
+export { Transfer } from "./transfer/index.js";
+export { Tree, moveTreeNode } from "./tree/index.js";
+export { TreeSelect } from "./treeselect/index.js";
+export { Link, Paragraph, Text, Title, Typography } from "./typography/index.js";
+export { Upload } from "./upload/index.js";
+export { VirtualList } from "./virtuallist/index.js";

package/dist/esm/browser/modules/infinitescroll/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { InfiniteScroll } from "./infinitescroll.js";

package/dist/esm/browser/modules/infinitescroll/infinitescroll.js

@@ -0,0 +1,141 @@
+"use client";
+import '../../../styles/components/infinitescroll.css';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../button/index.js";
+import { Loading } from "../loading/index.js";
+import { classes } from "../shared/classes.js";
+import { useText } from "../shared/use-text.js";
+function InfiniteScroll({ dataLength, hasMore, onLoadMore, target, threshold = 200, loader, endMessage, onError, className, children, ...props }) {
+    const t = useText();
+    const sentinel = useRef(null);
+    const controller = useRef(null);
+    const mounted = useRef(false);
+    const manualLoad = useRef(()=>{});
+    const [manual, setManual] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    const [retry, setRetry] = useState(0);
+    const requested = useRef(void 0);
+    const latest = useRef({
+        onLoadMore,
+        onError
+    });
+    latest.current = {
+        onLoadMore,
+        onError
+    };
+    useEffect(()=>{
+        mounted.current = true;
+        setLoading(false);
+        setManual("u" < typeof IntersectionObserver);
+        return ()=>{
+            mounted.current = false;
+            controller.current?.abort();
+            controller.current = null;
+            requested.current = void 0;
+        };
+    }, []);
+    useEffect(()=>{
+        if (!hasMore && controller.current) {
+            controller.current.abort();
+            controller.current = null;
+            setLoading(false);
+        }
+    }, [
+        hasMore
+    ]);
+    useEffect(()=>{
+        if (!hasMore || error || loading) return;
+        const element = sentinel.current;
+        if (!element) return;
+        let alive = true;
+        let root = target?.() ?? null;
+        if (!root) {
+            let parent = element.parentElement;
+            while(parent){
+                if (/(auto|scroll)/.test(getComputedStyle(parent).overflowY)) {
+                    root = parent;
+                    break;
+                }
+                parent = parent.parentElement;
+            }
+        }
+        const load = ()=>{
+            const key = `${dataLength}:${retry}`;
+            if (!alive || controller.current || requested.current === key) return;
+            requested.current = key;
+            const request = new AbortController();
+            controller.current = request;
+            setLoading(true);
+            Promise.resolve().then(()=>{
+                if (!request.signal.aborted) return latest.current.onLoadMore(request.signal);
+            }).catch((reason)=>{
+                if (mounted.current && !request.signal.aborted) {
+                    setError(true);
+                    latest.current.onError?.(reason);
+                }
+            }).finally(()=>{
+                if (controller.current === request) controller.current = null;
+                if (mounted.current && !request.signal.aborted) setLoading(false);
+            });
+        };
+        manualLoad.current = load;
+        const observer = "u" < typeof IntersectionObserver ? null : new IntersectionObserver((entries)=>{
+            if (entries.some((entry)=>entry.isIntersecting)) load();
+        }, {
+            root,
+            rootMargin: `${Math.max(0, threshold)}px`
+        });
+        observer?.observe(element);
+        return ()=>{
+            alive = false;
+            observer?.disconnect();
+        };
+    }, [
+        dataLength,
+        hasMore,
+        error,
+        retry,
+        target,
+        threshold,
+        loading
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        className: classes('leaf-infinite-scroll', className),
+        "aria-busy": loading,
+        children: [
+            children,
+            /*#__PURE__*/ jsx("div", {
+                ref: sentinel,
+                className: "leaf-infinite-scroll__sentinel"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "leaf-infinite-scroll__status",
+                "aria-live": "polite",
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "leaf-infinite-scroll__feedback",
+                    children: error ? /*#__PURE__*/ jsx(Button, {
+                        variant: "ghost",
+                        onClick: ()=>{
+                            setError(false);
+                            setRetry((value)=>value + 1);
+                        },
+                        children: t('加载失败，重试', 'Loading failed. Retry')
+                    }) : loading ? loader ?? /*#__PURE__*/ jsx(Loading, {
+                        size: "sm",
+                        tip: t('加载中', 'Loading')
+                    }) : hasMore ? manual ? /*#__PURE__*/ jsx(Button, {
+                        variant: "ghost",
+                        onClick: ()=>manualLoad.current(),
+                        children: t('加载更多', 'Load more')
+                    }) : null : endMessage ?? t('已加载全部内容', 'All items loaded')
+                }, error ? 'error' : loading ? 'loading' : hasMore ? manual ? 'manual' : 'idle' : 'end')
+            })
+        ]
+    });
+}
+export { InfiniteScroll };
+
+//# sourceMappingURL=infinitescroll.js.map