@ifhover/leaf-ui 0.0.0-stage → 0.6.0

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

@@ -0,0 +1,362 @@
+"use client";
+import '../../../styles/foundation.css';
+import '../../../styles/components/filelist.css';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, CircleAlert, Clock3, Download, Eye, File, FileArchive, FileAudio2, FileCode2, FileImage, FileSpreadsheet, FileText, FileVideo2, Paperclip, Trash2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { ButtonControl } from "../button/button.js";
+import { useComponentProps } from "../config-provider/component-defaults.js";
+import { ImagePreviewControl } from "../image/image.js";
+import { ModalBase } from "../modal/modal.js";
+import { classes } from "../shared/classes.js";
+import { useListMotion } from "../shared/motion.js";
+import { useFormattedText } from "../shared/use-formatted-text.js";
+import { useText } from "../shared/use-text.js";
+import { fileExtension, fileKind, fileName, formatFileSize, safeFileUrl } from "./model.js";
+const icons = {
+    image: FileImage,
+    video: FileVideo2,
+    audio: FileAudio2,
+    document: FileText,
+    sheet: FileSpreadsheet,
+    archive: FileArchive,
+    code: FileCode2,
+    file: File
+};
+function FileVisual({ file, listType }) {
+    const kind = fileKind(file);
+    const Icon = icons[kind];
+    const url = safeFileUrl(file.url);
+    const [failedUrl, setFailedUrl] = useState();
+    const thumbnail = Boolean('text' !== listType && 'image' === kind && url && failedUrl !== url);
+    return /*#__PURE__*/ jsxs("span", {
+        className: "leaf-file-list__icon",
+        "data-kind": kind,
+        "data-extension": fileExtension(file),
+        "data-thumbnail": thumbnail || void 0,
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                size: 22
+            }),
+            thumbnail && /*#__PURE__*/ jsx("img", {
+                src: url,
+                alt: "",
+                loading: "lazy",
+                decoding: "async",
+                onError: ()=>setFailedUrl(url)
+            })
+        ]
+    });
+}
+function FileRow({ file, motionKey, disabled, listType, downloadable, previewable, removable, onDownload, onRemove, onPreview, renderActions }) {
+    const t = useText();
+    const format = useFormattedText();
+    const [removing, setRemoving] = useState(false);
+    const [removeError, setRemoveError] = useState('');
+    const pending = useRef(false);
+    const mounted = useRef(true);
+    useEffect(()=>{
+        mounted.current = true;
+        return ()=>{
+            mounted.current = false;
+        };
+    }, []);
+    const name = fileName(file);
+    const kind = fileKind(file);
+    const url = safeFileUrl(file.url);
+    const extension = fileExtension(file).toUpperCase();
+    const size = file.size ?? file.originFile?.size;
+    const formattedSize = void 0 === size ? '' : formatFileSize(size);
+    const percent = Number.isFinite(file.percent) ? Math.max(0, Math.min(100, file.percent ?? 0)) : 0;
+    const canPreview = previewable && url && [
+        'image',
+        'video',
+        'audio'
+    ].includes(kind);
+    const status = 'uploading' === file.status ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            t('fileList.uploading'),
+            " ",
+            /*#__PURE__*/ jsxs("span", {
+                children: [
+                    Math.round(percent),
+                    "%"
+                ]
+            })
+        ]
+    }) : 'done' === file.status ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Check, {
+                size: 13,
+                "aria-hidden": "true"
+            }),
+            t('fileList.uploadComplete')
+        ]
+    }) : 'error' === file.status ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(CircleAlert, {
+                size: 13,
+                "aria-hidden": "true"
+            }),
+            t('fileList.uploadFailed')
+        ]
+    }) : 'cancelled' === file.status ? t('fileList.cancelled') : 'ready' === file.status ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Clock3, {
+                size: 13,
+                "aria-hidden": "true"
+            }),
+            t('fileList.ready')
+        ]
+    }) : null;
+    const actions = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            canPreview && /*#__PURE__*/ jsx(ButtonControl, {
+                className: "leaf-file-list__action",
+                variant: "ghost",
+                size: "sm",
+                disabled: disabled,
+                startIcon: /*#__PURE__*/ jsx(Eye, {
+                    size: 16
+                }),
+                "aria-label": format('fileList.preview', {
+                    name
+                }),
+                title: t('common.preview'),
+                onClick: ()=>onPreview(file)
+            }),
+            downloadable && url && (onDownload ? /*#__PURE__*/ jsx(ButtonControl, {
+                className: "leaf-file-list__action",
+                variant: "ghost",
+                size: "sm",
+                disabled: disabled,
+                startIcon: /*#__PURE__*/ jsx(Download, {
+                    size: 16
+                }),
+                "aria-label": format('fileList.download', {
+                    name
+                }),
+                title: t('common.download'),
+                onClick: ()=>onDownload(file)
+            }) : /*#__PURE__*/ jsx("a", {
+                className: "leaf-file-list__action",
+                href: disabled ? void 0 : url,
+                download: name,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": format('fileList.download', {
+                    name
+                }),
+                title: t('common.download'),
+                "aria-disabled": disabled || void 0,
+                role: disabled ? 'link' : void 0,
+                tabIndex: disabled ? -1 : void 0,
+                children: /*#__PURE__*/ jsx(Download, {
+                    size: 16,
+                    "aria-hidden": "true"
+                })
+            })),
+            removable && onRemove && /*#__PURE__*/ jsx(ButtonControl, {
+                className: "leaf-file-list__action leaf-file-list__remove",
+                variant: "ghost",
+                size: "sm",
+                disabled: disabled,
+                loading: removing,
+                startIcon: /*#__PURE__*/ jsx(Trash2, {
+                    size: 16
+                }),
+                "aria-label": format('fileList.remove', {
+                    name
+                }),
+                title: t('common.remove'),
+                onClick: async ()=>{
+                    if (pending.current) return;
+                    pending.current = true;
+                    setRemoving(true);
+                    setRemoveError('');
+                    try {
+                        await onRemove(file);
+                    } catch (reason) {
+                        if (mounted.current) setRemoveError(reason instanceof Error ? reason.message : String(reason));
+                    } finally{
+                        pending.current = false;
+                        if (mounted.current) setRemoving(false);
+                    }
+                }
+            })
+        ]
+    });
+    const renderedActions = renderActions ? renderActions(file, actions) : actions;
+    return /*#__PURE__*/ jsxs("li", {
+        className: "leaf-file-list__item",
+        "data-status": file.status,
+        "data-motion-key": motionKey,
+        "aria-busy": 'uploading' === file.status || removing || void 0,
+        children: [
+            /*#__PURE__*/ jsx(FileVisual, {
+                file: file,
+                listType: listType
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "leaf-file-list__details",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "leaf-file-list__name",
+                        title: name,
+                        children: name
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "leaf-file-list__meta",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "leaf-file-list__type",
+                                children: extension || t('fileList.fileType')
+                            }),
+                            formattedSize && /*#__PURE__*/ jsx("span", {
+                                className: "leaf-file-list__size",
+                                children: formattedSize
+                            })
+                        ]
+                    })
+                ]
+            }),
+            status && /*#__PURE__*/ jsx("span", {
+                className: "leaf-file-list__status",
+                "data-status": file.status,
+                children: status
+            }),
+            'uploading' === file.status && /*#__PURE__*/ jsx("div", {
+                className: "leaf-file-list__progress",
+                role: "progressbar",
+                "aria-label": format('fileList.uploadProgress', {
+                    name
+                }),
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round(percent),
+                children: /*#__PURE__*/ jsx("span", {
+                    style: {
+                        width: `${percent}%`
+                    }
+                })
+            }),
+            (removeError || 'error' === file.status && file.error) && /*#__PURE__*/ jsx("p", {
+                className: "leaf-file-list__error",
+                role: removeError ? 'alert' : void 0,
+                children: removeError || file.error
+            }),
+            null !== renderedActions && false !== renderedActions && /*#__PURE__*/ jsx("div", {
+                className: "leaf-file-list__actions",
+                children: renderedActions
+            })
+        ]
+    });
+}
+function FileListControl({ items, downloadable = true, previewable = true, removable = false, onPreview, onDownload, onRemove, renderActions, emptyContent, disabled = false, listType = 'text', className, ...props }) {
+    const t = useText();
+    const root = useRef(null);
+    const occurrences = new Map();
+    const keys = items.map((file)=>{
+        const identity = file.uid ?? file.url ?? fileName(file);
+        const occurrence = occurrences.get(identity) ?? 0;
+        occurrences.set(identity, occurrence + 1);
+        return JSON.stringify([
+            identity,
+            occurrence
+        ]);
+    });
+    useListMotion(root, JSON.stringify(keys), '.leaf-file-list__item[data-motion-key]', listType);
+    const [preview, setPreview] = useState(null);
+    const selected = preview ? items.find((file)=>preview.uid ? file.uid === preview.uid : preview.url ? file.url === preview.url : file === preview) : void 0;
+    const images = items.filter((file)=>'image' === fileKind(file) && safeFileUrl(file.url));
+    const kind = selected ? fileKind(selected) : void 0;
+    const previewUrl = safeFileUrl(selected?.url);
+    const index = selected ? images.indexOf(selected) : -1;
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: root,
+        className: classes('leaf-file-list', `leaf-file-list--${listType}`, className),
+        "data-disabled": disabled || void 0,
+        children: [
+            items.length ? /*#__PURE__*/ jsx("ul", {
+                className: "leaf-file-list__items",
+                children: items.map((file, position)=>/*#__PURE__*/ jsx(FileRow, {
+                        motionKey: keys[position] ?? String(position),
+                        file: file,
+                        listType: listType,
+                        disabled: disabled,
+                        downloadable: downloadable,
+                        previewable: previewable,
+                        removable: removable,
+                        onDownload: onDownload,
+                        onRemove: onRemove,
+                        renderActions: renderActions,
+                        onPreview: (file)=>onPreview ? onPreview(file) : setPreview(file)
+                    }, keys[position]))
+            }) : /*#__PURE__*/ jsx("div", {
+                className: "leaf-file-list__empty",
+                children: emptyContent ?? /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(Paperclip, {
+                            size: 22,
+                            "aria-hidden": "true"
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            children: t('fileList.noFiles')
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(ImagePreviewControl, {
+                items: images.map((file)=>({
+                        src: safeFileUrl(file.url) ?? '',
+                        alt: fileName(file),
+                        downloadName: fileName(file)
+                    })),
+                open: Boolean(previewUrl && 'image' === kind && index >= 0),
+                index: Math.max(0, index),
+                onIndexChange: (next)=>setPreview(images[next] ?? null),
+                onClose: ()=>setPreview(null),
+                downloadable: downloadable && !disabled
+            }),
+            /*#__PURE__*/ jsxs(ModalBase, {
+                open: Boolean(previewUrl && ('video' === kind || 'audio' === kind)),
+                title: selected ? fileName(selected) : '',
+                footer: null,
+                width: 'audio' === kind ? 520 : 800,
+                onClose: ()=>setPreview(null),
+                className: "leaf-file-list__media-modal",
+                children: [
+                    previewUrl && 'video' === kind && /*#__PURE__*/ jsx("video", {
+                        controls: true,
+                        preload: "metadata",
+                        src: previewUrl,
+                        "aria-label": selected ? fileName(selected) : '',
+                        children: /*#__PURE__*/ jsx("track", {
+                            kind: "captions"
+                        })
+                    }, previewUrl),
+                    previewUrl && 'audio' === kind && /*#__PURE__*/ jsx("audio", {
+                        controls: true,
+                        preload: "metadata",
+                        src: previewUrl,
+                        "aria-label": selected ? fileName(selected) : '',
+                        children: /*#__PURE__*/ jsx("track", {
+                            kind: "captions"
+                        })
+                    }, previewUrl)
+                ]
+            })
+        ]
+    });
+}
+function FileList(rawProps) {
+    const props = useComponentProps('FileList', rawProps);
+    return /*#__PURE__*/ jsx(FileListControl, {
+        ...props
+    });
+}
+export { FileList, FileListControl };
+
+//# sourceMappingURL=filelist.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filelist/filelist.js","sources":["../../../../../src/filelist/filelist.tsx"],"sourcesContent":["import {\n  Check,\n  CircleAlert,\n  Clock3,\n  Download,\n  Eye,\n  File,\n  FileArchive,\n  FileAudio2,\n  FileCode2,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo2,\n  Paperclip,\n  Trash2,\n} from 'lucide-react';\nimport { type HTMLAttributes, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { ButtonControl } from '../button/button';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { ImagePreviewControl as ImagePreview } from '../image/image';\nimport { ModalBase } from '../modal/modal';\nimport { classes } from '../shared/classes';\nimport { useListMotion } from '../shared/motion';\nimport { useFormattedText } from '../shared/use-formatted-text';\nimport { useText } from '../shared/use-text';\nimport { fileExtension, fileKind, fileName, formatFileSize, safeFileUrl } from './model';\n\nexport interface FileItem {\n  uid?: string;\n  url?: string;\n  name?: string;\n  size?: number;\n  type?: string;\n  status?: 'ready' | 'uploading' | 'done' | 'error' | 'cancelled';\n  percent?: number;\n  error?: string;\n  originFile?: globalThis.File;\n}\nexport interface FileListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onError'> {\n  items: readonly FileItem[];\n  downloadable?: boolean;\n  previewable?: boolean;\n  removable?: boolean;\n  onPreview?: (file: FileItem) => void;\n  onDownload?: (file: FileItem) => void;\n  onRemove?: (file: FileItem) => void | boolean | Promise<void> | Promise<boolean>;\n  renderActions?: (file: FileItem, actions: ReactNode) => ReactNode;\n  emptyContent?: ReactNode;\n  disabled?: boolean;\n  listType?: 'text' | 'picture' | 'picture-card';\n}\nconst icons = {\n  image: FileImage,\n  video: FileVideo2,\n  audio: FileAudio2,\n  document: FileText,\n  sheet: FileSpreadsheet,\n  archive: FileArchive,\n  code: FileCode2,\n  file: File,\n};\n\nfunction FileVisual({ file, listType }: { file: FileItem; listType: FileListProps['listType'] }) {\n  const kind = fileKind(file);\n  const Icon = icons[kind];\n  const url = safeFileUrl(file.url);\n  const [failedUrl, setFailedUrl] = useState<string>();\n  const thumbnail = Boolean(listType !== 'text' && kind === 'image' && url && failedUrl !== url);\n  return (\n    <span\n      className=\"leaf-file-list__icon\"\n      data-kind={kind}\n      data-extension={fileExtension(file)}\n      data-thumbnail={thumbnail || undefined}\n      aria-hidden=\"true\"\n    >\n      <Icon size={22} />\n      {thumbnail && (\n        <img src={url} alt=\"\" loading=\"lazy\" decoding=\"async\" onError={() => setFailedUrl(url)} />\n      )}\n    </span>\n  );\n}\n\ninterface FileRowProps\n  extends Pick<\n    FileListProps,\n    'downloadable' | 'previewable' | 'removable' | 'onDownload' | 'onRemove' | 'renderActions'\n  > {\n  file: FileItem;\n  motionKey: string;\n  disabled: boolean;\n  listType: FileListProps['listType'];\n  onPreview: (file: FileItem) => void;\n}\nfunction FileRow({\n  file,\n  motionKey,\n  disabled,\n  listType,\n  downloadable,\n  previewable,\n  removable,\n  onDownload,\n  onRemove,\n  onPreview,\n  renderActions,\n}: FileRowProps) {\n  const t = useText();\n  const format = useFormattedText();\n  const [removing, setRemoving] = useState(false);\n  const [removeError, setRemoveError] = useState('');\n  const pending = useRef(false);\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const name = fileName(file);\n  const kind = fileKind(file);\n  const url = safeFileUrl(file.url);\n  const extension = fileExtension(file).toUpperCase();\n  const size = file.size ?? file.originFile?.size;\n  const formattedSize = size === undefined ? '' : formatFileSize(size);\n  const percent = Number.isFinite(file.percent) ? Math.max(0, Math.min(100, file.percent ?? 0)) : 0;\n  const canPreview = previewable && url && ['image', 'video', 'audio'].includes(kind);\n  const status =\n    file.status === 'uploading' ? (\n      <>\n        {t('fileList.uploading')} <span>{Math.round(percent)}%</span>\n      </>\n    ) : file.status === 'done' ? (\n      <>\n        <Check size={13} aria-hidden=\"true\" />\n        {t('fileList.uploadComplete')}\n      </>\n    ) : file.status === 'error' ? (\n      <>\n        <CircleAlert size={13} aria-hidden=\"true\" />\n        {t('fileList.uploadFailed')}\n      </>\n    ) : file.status === 'cancelled' ? (\n      t('fileList.cancelled')\n    ) : file.status === 'ready' ? (\n      <>\n        <Clock3 size={13} aria-hidden=\"true\" />\n        {t('fileList.ready')}\n      </>\n    ) : null;\n  const actions = (\n    <>\n      {canPreview && (\n        <ButtonControl\n          className=\"leaf-file-list__action\"\n          variant=\"ghost\"\n          size=\"sm\"\n          disabled={disabled}\n          startIcon={<Eye size={16} />}\n          aria-label={format('fileList.preview', { name })}\n          title={t('common.preview')}\n          onClick={() => onPreview(file)}\n        />\n      )}\n      {downloadable &&\n        url &&\n        (onDownload ? (\n          <ButtonControl\n            className=\"leaf-file-list__action\"\n            variant=\"ghost\"\n            size=\"sm\"\n            disabled={disabled}\n            startIcon={<Download size={16} />}\n            aria-label={format('fileList.download', { name })}\n            title={t('common.download')}\n            onClick={() => onDownload(file)}\n          />\n        ) : (\n          <a\n            className=\"leaf-file-list__action\"\n            href={disabled ? undefined : url}\n            download={name}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            aria-label={format('fileList.download', { name })}\n            title={t('common.download')}\n            aria-disabled={disabled || undefined}\n            role={disabled ? 'link' : undefined}\n            tabIndex={disabled ? -1 : undefined}\n          >\n            <Download size={16} aria-hidden=\"true\" />\n          </a>\n        ))}\n      {removable && onRemove && (\n        <ButtonControl\n          className=\"leaf-file-list__action leaf-file-list__remove\"\n          variant=\"ghost\"\n          size=\"sm\"\n          disabled={disabled}\n          loading={removing}\n          startIcon={<Trash2 size={16} />}\n          aria-label={format('fileList.remove', { name })}\n          title={t('common.remove')}\n          onClick={async () => {\n            if (pending.current) return;\n            pending.current = true;\n            setRemoving(true);\n            setRemoveError('');\n            try {\n              await onRemove(file);\n            } catch (reason) {\n              if (mounted.current)\n                setRemoveError(reason instanceof Error ? reason.message : String(reason));\n            } finally {\n              pending.current = false;\n              if (mounted.current) setRemoving(false);\n            }\n          }}\n        />\n      )}\n    </>\n  );\n  const renderedActions = renderActions ? renderActions(file, actions) : actions;\n  return (\n    <li\n      className=\"leaf-file-list__item\"\n      data-status={file.status}\n      data-motion-key={motionKey}\n      aria-busy={file.status === 'uploading' || removing || undefined}\n    >\n      <FileVisual file={file} listType={listType} />\n      <div className=\"leaf-file-list__details\">\n        <span className=\"leaf-file-list__name\" title={name}>\n          {name}\n        </span>\n        <div className=\"leaf-file-list__meta\">\n          <span className=\"leaf-file-list__type\">{extension || t('fileList.fileType')}</span>\n          {formattedSize && <span className=\"leaf-file-list__size\">{formattedSize}</span>}\n        </div>\n      </div>\n      {status && (\n        <span className=\"leaf-file-list__status\" data-status={file.status}>\n          {status}\n        </span>\n      )}\n      {file.status === 'uploading' && (\n        <div\n          className=\"leaf-file-list__progress\"\n          role=\"progressbar\"\n          aria-label={format('fileList.uploadProgress', { name })}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={Math.round(percent)}\n        >\n          <span style={{ width: `${percent}%` }} />\n        </div>\n      )}\n      {(removeError || (file.status === 'error' && file.error)) && (\n        <p className=\"leaf-file-list__error\" role={removeError ? 'alert' : undefined}>\n          {removeError || file.error}\n        </p>\n      )}\n      {renderedActions !== null && renderedActions !== false && (\n        <div className=\"leaf-file-list__actions\">{renderedActions}</div>\n      )}\n    </li>\n  );\n}\n\nexport function FileListControl({\n  items,\n  downloadable = true,\n  previewable = true,\n  removable = false,\n  onPreview,\n  onDownload,\n  onRemove,\n  renderActions,\n  emptyContent,\n  disabled = false,\n  listType = 'text',\n  className,\n  ...props\n}: FileListProps) {\n  const t = useText();\n  const root = useRef<HTMLDivElement>(null);\n  const occurrences = new Map<string, number>();\n  const keys = items.map((file) => {\n    const identity = file.uid ?? file.url ?? fileName(file);\n    const occurrence = occurrences.get(identity) ?? 0;\n    occurrences.set(identity, occurrence + 1);\n    return JSON.stringify([identity, occurrence]);\n  });\n  useListMotion(root, JSON.stringify(keys), '.leaf-file-list__item[data-motion-key]', listType);\n  const [preview, setPreview] = useState<FileItem | null>(null);\n  const selected = preview\n    ? items.find((file) =>\n        preview.uid\n          ? file.uid === preview.uid\n          : preview.url\n            ? file.url === preview.url\n            : file === preview,\n      )\n    : undefined;\n  const images = items.filter((file) => fileKind(file) === 'image' && safeFileUrl(file.url));\n  const kind = selected ? fileKind(selected) : undefined;\n  const previewUrl = safeFileUrl(selected?.url);\n  const index = selected ? images.indexOf(selected) : -1;\n  return (\n    <div\n      {...props}\n      ref={root}\n      className={classes('leaf-file-list', `leaf-file-list--${listType}`, className)}\n      data-disabled={disabled || undefined}\n    >\n      {items.length ? (\n        <ul className=\"leaf-file-list__items\">\n          {items.map((file, position) => (\n            <FileRow\n              key={keys[position]}\n              motionKey={keys[position] ?? String(position)}\n              file={file}\n              listType={listType}\n              disabled={disabled}\n              downloadable={downloadable}\n              previewable={previewable}\n              removable={removable}\n              onDownload={onDownload}\n              onRemove={onRemove}\n              renderActions={renderActions}\n              onPreview={(file) => (onPreview ? onPreview(file) : setPreview(file))}\n            />\n          ))}\n        </ul>\n      ) : (\n        <div className=\"leaf-file-list__empty\">\n          {emptyContent ?? (\n            <>\n              <Paperclip size={22} aria-hidden=\"true\" />\n              <span>{t('fileList.noFiles')}</span>\n            </>\n          )}\n        </div>\n      )}\n      <ImagePreview\n        items={images.map((file) => ({\n          src: safeFileUrl(file.url) ?? '',\n          alt: fileName(file),\n          downloadName: fileName(file),\n        }))}\n        open={Boolean(previewUrl && kind === 'image' && index >= 0)}\n        index={Math.max(0, index)}\n        onIndexChange={(next) => setPreview(images[next] ?? null)}\n        onClose={() => setPreview(null)}\n        downloadable={downloadable && !disabled}\n      />\n      <ModalBase\n        open={Boolean(previewUrl && (kind === 'video' || kind === 'audio'))}\n        title={selected ? fileName(selected) : ''}\n        footer={null}\n        width={kind === 'audio' ? 520 : 800}\n        onClose={() => setPreview(null)}\n        className=\"leaf-file-list__media-modal\"\n      >\n        {previewUrl && kind === 'video' && (\n          <video\n            key={previewUrl}\n            controls\n            preload=\"metadata\"\n            src={previewUrl}\n            aria-label={selected ? fileName(selected) : ''}\n          >\n            <track kind=\"captions\" />\n          </video>\n        )}\n        {previewUrl && kind === 'audio' && (\n          <audio\n            key={previewUrl}\n            controls\n            preload=\"metadata\"\n            src={previewUrl}\n            aria-label={selected ? fileName(selected) : ''}\n          >\n            <track kind=\"captions\" />\n          </audio>\n        )}\n      </ModalBase>\n    </div>\n  );\n}\n\nexport function FileList(rawProps: FileListProps) {\n  const props = useComponentProps('FileList', rawProps);\n  return <FileListControl {...props} />;\n}\n"],"names":["icons","FileImage","FileVideo2","FileAudio2","FileText","FileSpreadsheet","FileArchive","FileCode2","File","FileVisual","file","listType","kind","fileKind","Icon","url","safeFileUrl","failedUrl","setFailedUrl","useState","thumbnail","Boolean","fileExtension","undefined","FileRow","motionKey","disabled","downloadable","previewable","removable","onDownload","onRemove","onPreview","renderActions","t","useText","format","useFormattedText","removing","setRemoving","removeError","setRemoveError","pending","useRef","mounted","useEffect","name","fileName","extension","size","formattedSize","formatFileSize","percent","Number","Math","canPreview","status","Check","CircleAlert","Clock3","actions","ButtonControl","Eye","Download","Trash2","reason","Error","String","renderedActions","FileListControl","items","emptyContent","className","props","root","occurrences","Map","keys","identity","occurrence","JSON","useListMotion","preview","setPreview","selected","images","previewUrl","index","classes","position","Paperclip","ImagePreview","next","ModalBase","FileList","rawProps","useComponentProps"],"mappings":"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"}

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

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

package/dist/esm/browser/modules/filelist/model.js

@@ -0,0 +1,108 @@
+"use client";
+function fileName(file) {
+    if (file.name) return file.name;
+    if (file.originFile?.name) return file.originFile.name;
+    const name = file.url?.split(/[?#]/)[0]?.split('/').pop();
+    if (!name) return 'File';
+    try {
+        return decodeURIComponent(name);
+    } catch  {
+        return name;
+    }
+}
+function fileExtension(file) {
+    const name = fileName(file);
+    return name.includes('.') ? name.split('.').pop()?.toLowerCase() ?? '' : '';
+}
+function fileKind(file) {
+    const type = file.type ?? file.originFile?.type ?? '';
+    const extension = fileExtension(file);
+    if (/^image\/(png|jpeg|webp|gif|avif|bmp|svg\+xml)$/.test(type) || [
+        'png',
+        'jpg',
+        'jpeg',
+        'webp',
+        'gif',
+        'avif',
+        'bmp',
+        'svg'
+    ].includes(extension)) return 'image';
+    if ([
+        'video/mp4',
+        'video/webm',
+        'video/ogg'
+    ].includes(type) || [
+        'mp4',
+        'webm',
+        'ogv',
+        'mov'
+    ].includes(extension)) return 'video';
+    if (/^audio\//.test(type) || [
+        'mp3',
+        'wav',
+        'ogg',
+        'm4a',
+        'aac',
+        'flac'
+    ].includes(extension)) return 'audio';
+    if ([
+        'pdf',
+        'doc',
+        'docx',
+        'rtf',
+        'txt',
+        'md',
+        'odt',
+        'ppt',
+        'pptx'
+    ].includes(extension)) return 'document';
+    if ([
+        'xls',
+        'xlsx',
+        'csv',
+        'ods'
+    ].includes(extension)) return 'sheet';
+    if ([
+        'zip',
+        'rar',
+        '7z',
+        'tar',
+        'gz'
+    ].includes(extension)) return 'archive';
+    if ([
+        'js',
+        'jsx',
+        'ts',
+        'tsx',
+        'json',
+        'html',
+        'css',
+        'scss',
+        'xml',
+        'yml',
+        'yaml',
+        'py',
+        'java',
+        'go'
+    ].includes(extension)) return 'code';
+    return 'file';
+}
+function safeFileUrl(url) {
+    if (!url || /^\s*(?:javascript|vbscript|data):/i.test(url)) return;
+    return url;
+}
+function formatFileSize(size) {
+    if (!Number.isFinite(size) || size < 0) return '';
+    const units = [
+        'B',
+        'KB',
+        'MB',
+        'GB',
+        'TB'
+    ];
+    const index = size ? Math.max(0, Math.min(4, Math.floor(Math.log(size) / Math.log(1024)))) : 0;
+    return `${Number((size / 1024 ** index).toFixed(index ? 1 : 0))} ${units[Math.max(0, index)]}`;
+}
+export { fileExtension, fileKind, fileName, formatFileSize, safeFileUrl };
+
+//# sourceMappingURL=model.js.map

package/dist/esm/browser/modules/filelist/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filelist/model.js","sources":["../../../../../src/filelist/model.ts"],"sourcesContent":["import type { FileItem } from './filelist';\nexport function fileName(file: FileItem): string {\n  if (file.name) return file.name;\n  if (file.originFile?.name) return file.originFile.name;\n  const name = file.url?.split(/[?#]/)[0]?.split('/').pop();\n  if (!name) return 'File';\n  try {\n    return decodeURIComponent(name);\n  } catch {\n    return name;\n  }\n}\nexport function fileExtension(file: FileItem): string {\n  const name = fileName(file);\n  return name.includes('.') ? (name.split('.').pop()?.toLowerCase() ?? '') : '';\n}\nexport function fileKind(\n  file: FileItem,\n): 'image' | 'video' | 'audio' | 'document' | 'sheet' | 'archive' | 'code' | 'file' {\n  const type = file.type ?? file.originFile?.type ?? '';\n  const extension = fileExtension(file);\n  if (\n    /^image\\/(png|jpeg|webp|gif|avif|bmp|svg\\+xml)$/.test(type) ||\n    ['png', 'jpg', 'jpeg', 'webp', 'gif', 'avif', 'bmp', 'svg'].includes(extension)\n  )\n    return 'image';\n  if (\n    ['video/mp4', 'video/webm', 'video/ogg'].includes(type) ||\n    ['mp4', 'webm', 'ogv', 'mov'].includes(extension)\n  )\n    return 'video';\n  if (/^audio\\//.test(type) || ['mp3', 'wav', 'ogg', 'm4a', 'aac', 'flac'].includes(extension))\n    return 'audio';\n  if (['pdf', 'doc', 'docx', 'rtf', 'txt', 'md', 'odt', 'ppt', 'pptx'].includes(extension))\n    return 'document';\n  if (['xls', 'xlsx', 'csv', 'ods'].includes(extension)) return 'sheet';\n  if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) return 'archive';\n  if (\n    [\n      'js',\n      'jsx',\n      'ts',\n      'tsx',\n      'json',\n      'html',\n      'css',\n      'scss',\n      'xml',\n      'yml',\n      'yaml',\n      'py',\n      'java',\n      'go',\n    ].includes(extension)\n  )\n    return 'code';\n  return 'file';\n}\nexport function safeFileUrl(url?: string): string | undefined {\n  if (!url || /^\\s*(?:javascript|vbscript|data):/i.test(url)) return undefined;\n  return url;\n}\nexport function formatFileSize(size: number): string {\n  if (!Number.isFinite(size) || size < 0) return '';\n  const units = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const index = size ? Math.max(0, Math.min(4, Math.floor(Math.log(size) / Math.log(1024)))) : 0;\n  return `${Number((size / 1024 ** index).toFixed(index ? 1 : 0))} ${units[Math.max(0, index)]}`;\n}\n"],"names":["fileName","file","name","decodeURIComponent","fileExtension","fileKind","type","extension","safeFileUrl","url","formatFileSize","size","Number","units","index","Math"],"mappings":";AACO,SAASA,SAASC,IAAc;IACrC,IAAIA,KAAK,IAAI,EAAE,OAAOA,KAAK,IAAI;IAC/B,IAAIA,KAAK,UAAU,EAAE,MAAM,OAAOA,KAAK,UAAU,CAAC,IAAI;IACtD,MAAMC,OAAOD,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC,EAAE,EAAE,MAAM,KAAK;IACpD,IAAI,CAACC,MAAM,OAAO;IAClB,IAAI;QACF,OAAOC,mBAAmBD;IAC5B,EAAE,OAAM;QACN,OAAOA;IACT;AACF;AACO,SAASE,cAAcH,IAAc;IAC1C,MAAMC,OAAOF,SAASC;IACtB,OAAOC,KAAK,QAAQ,CAAC,OAAQA,KAAK,KAAK,CAAC,KAAK,GAAG,IAAI,iBAAiB,KAAM;AAC7E;AACO,SAASG,SACdJ,IAAc;IAEd,MAAMK,OAAOL,KAAK,IAAI,IAAIA,KAAK,UAAU,EAAE,QAAQ;IACnD,MAAMM,YAAYH,cAAcH;IAChC,IACE,iDAAiD,IAAI,CAACK,SACtD;QAAC;QAAO;QAAO;QAAQ;QAAQ;QAAO;QAAQ;QAAO;KAAM,CAAC,QAAQ,CAACC,YAErE,OAAO;IACT,IACE;QAAC;QAAa;QAAc;KAAY,CAAC,QAAQ,CAACD,SAClD;QAAC;QAAO;QAAQ;QAAO;KAAM,CAAC,QAAQ,CAACC,YAEvC,OAAO;IACT,IAAI,WAAW,IAAI,CAACD,SAAS;QAAC;QAAO;QAAO;QAAO;QAAO;QAAO;KAAO,CAAC,QAAQ,CAACC,YAChF,OAAO;IACT,IAAI;QAAC;QAAO;QAAO;QAAQ;QAAO;QAAO;QAAM;QAAO;QAAO;KAAO,CAAC,QAAQ,CAACA,YAC5E,OAAO;IACT,IAAI;QAAC;QAAO;QAAQ;QAAO;KAAM,CAAC,QAAQ,CAACA,YAAY,OAAO;IAC9D,IAAI;QAAC;QAAO;QAAO;QAAM;QAAO;KAAK,CAAC,QAAQ,CAACA,YAAY,OAAO;IAClE,IACE;QACE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CAAC,QAAQ,CAACA,YAEX,OAAO;IACT,OAAO;AACT;AACO,SAASC,YAAYC,GAAY;IACtC,IAAI,CAACA,OAAO,qCAAqC,IAAI,CAACA,MAAM;IAC5D,OAAOA;AACT;AACO,SAASC,eAAeC,IAAY;IACzC,IAAI,CAACC,OAAO,QAAQ,CAACD,SAASA,OAAO,GAAG,OAAO;IAC/C,MAAME,QAAQ;QAAC;QAAK;QAAM;QAAM;QAAM;KAAK;IAC3C,MAAMC,QAAQH,OAAOI,KAAK,GAAG,CAAC,GAAGA,KAAK,GAAG,CAAC,GAAGA,KAAK,KAAK,CAACA,KAAK,GAAG,CAACJ,QAAQI,KAAK,GAAG,CAAC,WAAW;IAC7F,OAAO,GAAGH,OAAQD,AAAAA,CAAAA,OAAO,QAAQG,KAAI,EAAG,OAAO,CAACA,QAAQ,IAAI,IAAI,CAAC,EAAED,KAAK,CAACE,KAAK,GAAG,CAAC,GAAGD,OAAO,EAAE;AAChG"}

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

@@ -0,0 +1,38 @@
+"use client";
+import '../../../styles/foundation.css';
+import '../../../styles/components/flex.css';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
+import { classes } from "../shared/classes.js";
+function gapValue(value) {
+    if ('number' == typeof value) return `${value}px`;
+    const sizes = {
+        sm: 8,
+        md: 16,
+        lg: 24
+    };
+    if ('sm' === value || 'md' === value || 'lg' === value) return `var(--leaf-spacing-${value}, ${sizes[value]}px)`;
+    return value;
+}
+const flex_Flex = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const { direction = 'row', gap = 0, align = 'stretch', justify = 'start', wrap = false, inline = false, className, style, ...props } = useComponentProps('Flex', rawProps);
+    const layout = {
+        display: inline ? 'inline-flex' : 'flex',
+        flexDirection: direction,
+        gap: 'object' == typeof gap ? gap.map(gapValue).join(' ') : gapValue(gap),
+        alignItems: 'start' === align ? 'flex-start' : 'end' === align ? 'flex-end' : align,
+        justifyContent: 'start' === justify ? 'flex-start' : 'end' === justify ? 'flex-end' : justify,
+        flexWrap: 'boolean' == typeof wrap ? wrap ? 'wrap' : 'nowrap' : wrap,
+        ...style
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        className: classes('leaf-flex', className),
+        style: layout
+    });
+});
+export { flex_Flex as Flex };
+
+//# sourceMappingURL=flex.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flex/flex.js","sources":["../../../../../src/flex/flex.tsx"],"sourcesContent":["import { type CSSProperties, forwardRef, type HTMLAttributes } from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { classes } from '../shared/classes';\n\nexport type FlexGap = number | string;\n\nexport interface FlexProps extends HTMLAttributes<HTMLDivElement> {\n  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  gap?: FlexGap | readonly [FlexGap, FlexGap];\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';\n  wrap?: boolean | 'nowrap' | 'wrap' | 'wrap-reverse';\n  inline?: boolean;\n}\n\nfunction gapValue(value: FlexGap) {\n  if (typeof value === 'number') return `${value}px`;\n  const sizes = { sm: 8, md: 16, lg: 24 };\n  if (value === 'sm' || value === 'md' || value === 'lg')\n    return `var(--leaf-spacing-${value}, ${sizes[value]}px)`;\n  return value;\n}\n\n/** Lay out direct children without adding item wrappers. */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(rawProps: FlexProps, ref) {\n  const {\n    direction = 'row',\n    gap = 0,\n    align = 'stretch',\n    justify = 'start',\n    wrap = false,\n    inline = false,\n    className,\n    style,\n    ...props\n  } = useComponentProps('Flex', rawProps);\n  const layout: CSSProperties = {\n    display: inline ? 'inline-flex' : 'flex',\n    flexDirection: direction,\n    gap: typeof gap === 'object' ? gap.map(gapValue).join(' ') : gapValue(gap),\n    alignItems: align === 'start' ? 'flex-start' : align === 'end' ? 'flex-end' : align,\n    justifyContent: justify === 'start' ? 'flex-start' : justify === 'end' ? 'flex-end' : justify,\n    flexWrap: typeof wrap === 'boolean' ? (wrap ? 'wrap' : 'nowrap') : wrap,\n    ...style,\n  };\n  return <div {...props} ref={ref} className={classes('leaf-flex', className)} style={layout} />;\n});\n"],"names":["gapValue","value","sizes","Flex","forwardRef","rawProps","ref","direction","gap","align","justify","wrap","inline","className","style","props","useComponentProps","layout","classes"],"mappings":";;;;;;;AAeA,SAASA,SAASC,KAAc;IAC9B,IAAI,AAAiB,YAAjB,OAAOA,OAAoB,OAAO,GAAGA,MAAM,EAAE,CAAC;IAClD,MAAMC,QAAQ;QAAE,IAAI;QAAG,IAAI;QAAI,IAAI;IAAG;IACtC,IAAID,AAAU,SAAVA,SAAkBA,AAAU,SAAVA,SAAkBA,AAAU,SAAVA,OACtC,OAAO,CAAC,mBAAmB,EAAEA,MAAM,EAAE,EAAEC,KAAK,CAACD,MAAM,CAAC,GAAG,CAAC;IAC1D,OAAOA;AACT;AAGO,MAAME,YAAO,WAAHA,GAAGC,WAAsC,SAAcC,QAAmB,EAAEC,GAAG;IAC9F,MAAM,EACJC,YAAY,KAAK,EACjBC,MAAM,CAAC,EACPC,QAAQ,SAAS,EACjBC,UAAU,OAAO,EACjBC,OAAO,KAAK,EACZC,SAAS,KAAK,EACdC,SAAS,EACTC,KAAK,EACL,GAAGC,OACJ,GAAGC,kBAAkB,QAAQX;IAC9B,MAAMY,SAAwB;QAC5B,SAASL,SAAS,gBAAgB;QAClC,eAAeL;QACf,KAAK,AAAe,YAAf,OAAOC,MAAmBA,IAAI,GAAG,CAACR,UAAU,IAAI,CAAC,OAAOA,SAASQ;QACtE,YAAYC,AAAU,YAAVA,QAAoB,eAAeA,AAAU,UAAVA,QAAkB,aAAaA;QAC9E,gBAAgBC,AAAY,YAAZA,UAAsB,eAAeA,AAAY,UAAZA,UAAoB,aAAaA;QACtF,UAAU,AAAgB,aAAhB,OAAOC,OAAsBA,OAAO,SAAS,WAAYA;QACnE,GAAGG,KAAK;IACV;IACA,OAAO,WAAP,GAAO,IAAC;QAAK,GAAGC,KAAK;QAAE,KAAKT;QAAK,WAAWY,QAAQ,aAAaL;QAAY,OAAOI;;AACtF"}

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

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