bj-web-components 0.2.27 → 0.2.28

package/dist/web/FileCard/FileCard.js

@@ -1 +1,157 @@
-"use strict";const e=require("react/jsx-runtime"),h=require("react");;/* empty css               */const _={pdf:{color:"#F54A45",label:"PDF"},image:{color:"#00AAFF",label:"IMG"},doc:{color:"#3B64FC",label:"DOC"},docx:{color:"#3B64FC",label:"DOC"},xls:{color:"#1D9B4C",label:"XLS"},xlsx:{color:"#1D9B4C",label:"XLS"},ppt:{color:"#DF4023",label:"PPT"},pptx:{color:"#DF4023",label:"PPT"},zip:{color:"#7B5EA7",label:"ZIP"},rar:{color:"#7B5EA7",label:"RAR"},txt:{color:"#8C8C8C",label:"TXT"},other:{color:"#1677FF",label:"FILE"}};function C({fileType:r,fileUrl:l,fileName:s}){if(r==="image"&&l)return e.jsx("img",{src:l,alt:s,className:"file-card__image-thumb"});const{color:t,label:a}=_[r];return e.jsxs("svg",{width:"88",height:"88",viewBox:"0 0 88 88",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("rect",{x:"14",y:"8",width:"50",height:"62",rx:"4",fill:"#F5F5F5"}),e.jsx("path",{d:"M50 8L64 22H50V8Z",fill:"#E2E2E2"}),e.jsx("rect",{x:"20",y:"30",width:"30",height:"4",rx:"2",fill:"#E2E2E2"}),e.jsx("rect",{x:"20",y:"40",width:"30",height:"4",rx:"2",fill:"#E2E2E2"}),e.jsx("rect",{x:"20",y:"50",width:"20",height:"4",rx:"2",fill:"#E2E2E2"}),e.jsx("rect",{x:"42",y:"52",width:"32",height:"28",rx:"4",fill:t}),e.jsx("rect",{x:"42",y:"52",width:"4",height:"28",rx:"2",fill:"rgba(255,255,255,0.25)"}),e.jsx("rect",{x:"42",y:"76",width:"32",height:"4",rx:"2",fill:"rgba(0,0,0,0.15)"}),e.jsx("text",{x:"58",y:"71",textAnchor:"middle",fill:"white",fontSize:"9",fontWeight:"700",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",letterSpacing:"0.3",children:a})]})}function u(){return e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",children:[e.jsx("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("circle",{cx:"12",cy:"12",r:"3",stroke:"currentColor",strokeWidth:"2"})]})}function f(){return e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",children:[e.jsx("polyline",{points:"3,6 5,6 21,6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("path",{d:"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("path",{d:"M10 11v6M14 11v6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("path",{d:"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]})}function j({fileName:r,onRename:l}){const[s,t]=h.useState(!1),[a,o]=h.useState(r),n=h.useRef(null);h.useEffect(()=>{var i,x;s&&(o(r),(i=n.current)==null||i.focus(),(x=n.current)==null||x.select())},[s,r]);const d=async()=>{const i=a.trim();i&&i!==r&&await(l==null?void 0:l(i)),t(!1)},c=()=>t(!1),p=i=>{i.key==="Enter"&&!i.shiftKey&&(i.preventDefault(),d()),i.key==="Escape"&&c()},g=()=>{d()},k=()=>{l&&t(!0)};return s?e.jsx("div",{className:"file-card__name-area file-card__name-area--editing",children:e.jsx("textarea",{ref:n,className:"file-card__edit-input",value:a,onChange:i=>o(i.target.value),onKeyDown:p,onBlur:g,rows:2,style:{height:"42px"}})}):e.jsx("div",{className:"file-card__name-area",onDoubleClick:k,children:e.jsx("span",{className:"file-card__filename",title:r,children:r})})}function b({fileName:r,onDelete:l,onRename:s,onPreview:t,className:a,style:o}){return e.jsxs("div",{className:`file-card file-card--pdf ${a||""}`,style:o,children:[e.jsxs("div",{className:"file-card__pdf-preview",onClick:t,children:[(t||l)&&e.jsxs("div",{className:"file-card__overlay",children:[t&&e.jsx("button",{className:"file-card__overlay-btn",onClick:n=>{n.stopPropagation(),t()},children:e.jsx(u,{})}),l&&e.jsx("button",{className:"file-card__overlay-btn",onClick:n=>{n.stopPropagation(),l()},children:e.jsx(f,{})})]}),e.jsx("div",{className:"file-card__pdf-label",children:e.jsx("span",{children:"PDF"})})]}),e.jsx(j,{fileName:r,onRename:s})]})}function y({fileName:r,fileType:l,fileUrl:s,onDelete:t,onRename:a,onPreview:o,className:n,style:d}){return e.jsxs("div",{className:`file-card file-card--other ${n||""}`,style:d,children:[e.jsxs("div",{className:"file-card__other-preview",onClick:o,children:[(o||t)&&e.jsxs("div",{className:"file-card__overlay",children:[o&&e.jsx("button",{className:"file-card__overlay-btn",onClick:c=>{c.stopPropagation(),o()},children:e.jsx(u,{})}),t&&e.jsx("button",{className:"file-card__overlay-btn",onClick:c=>{c.stopPropagation(),t()},children:e.jsx(f,{})})]}),e.jsx(C,{fileType:l,fileUrl:s,fileName:r})]}),e.jsx(j,{fileName:r,onRename:a})]})}function m(r){return r.fileType==="pdf"?e.jsx(b,{...r}):e.jsx(y,{...r})}module.exports=m;
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+;/* empty css               */
+const FILE_TYPE_CONFIG = {
+  pdf: { color: "#F54A45", label: "PDF" },
+  image: { color: "#00AAFF", label: "IMG" },
+  doc: { color: "#3B64FC", label: "DOC" },
+  docx: { color: "#3B64FC", label: "DOC" },
+  xls: { color: "#1D9B4C", label: "XLS" },
+  xlsx: { color: "#1D9B4C", label: "XLS" },
+  ppt: { color: "#DF4023", label: "PPT" },
+  pptx: { color: "#DF4023", label: "PPT" },
+  zip: { color: "#7B5EA7", label: "ZIP" },
+  rar: { color: "#7B5EA7", label: "RAR" },
+  txt: { color: "#8C8C8C", label: "TXT" },
+  other: { color: "#1677FF", label: "FILE" }
+};
+function FileIcon({ fileType, fileUrl, fileName }) {
+  if (fileType === "image" && fileUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: fileUrl, alt: fileName, className: "file-card__image-thumb" });
+  }
+  const { color, label } = FILE_TYPE_CONFIG[fileType];
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "88", height: "88", viewBox: "0 0 88 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "8", width: "50", height: "62", rx: "4", fill: "#F5F5F5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M50 8L64 22H50V8Z", fill: "#E2E2E2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "20", y: "30", width: "30", height: "4", rx: "2", fill: "#E2E2E2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "20", y: "40", width: "30", height: "4", rx: "2", fill: "#E2E2E2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "20", y: "50", width: "20", height: "4", rx: "2", fill: "#E2E2E2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "42", y: "52", width: "32", height: "28", rx: "4", fill: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "42", y: "52", width: "4", height: "28", rx: "2", fill: "rgba(255,255,255,0.25)" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "42", y: "76", width: "32", height: "4", rx: "2", fill: "rgba(0,0,0,0.15)" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: "58",
+        y: "71",
+        textAnchor: "middle",
+        fill: "white",
+        fontSize: "9",
+        fontWeight: "700",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        letterSpacing: "0.3",
+        children: label
+      }
+    )
+  ] });
+}
+function IconEye() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3", stroke: "currentColor", strokeWidth: "2" })
+  ] });
+}
+function IconTrash() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3,6 5,6 21,6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 11v6M14 11v6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+function NameRow({ fileName, onRename }) {
+  const [editing, setEditing] = react.useState(false);
+  const [editValue, setEditValue] = react.useState(fileName);
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
+    var _a, _b;
+    if (editing) {
+      setEditValue(fileName);
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+      (_b = inputRef.current) == null ? void 0 : _b.select();
+    }
+  }, [editing, fileName]);
+  const handleConfirm = async () => {
+    const trimmed = editValue.trim();
+    if (trimmed && trimmed !== fileName) {
+      await (onRename == null ? void 0 : onRename(trimmed));
+    }
+    setEditing(false);
+  };
+  const handleCancel = () => setEditing(false);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleConfirm();
+    }
+    if (e.key === "Escape") handleCancel();
+  };
+  const handleBlur = () => {
+    handleConfirm();
+  };
+  const handleDoubleClick = () => {
+    if (onRename) {
+      setEditing(true);
+    }
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "file-card__name-area file-card__name-area--editing", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref: inputRef,
+        className: "file-card__edit-input",
+        value: editValue,
+        onChange: (e) => setEditValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        rows: 2,
+        style: { height: "42px" }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "file-card__name-area", onDoubleClick: handleDoubleClick, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "file-card__filename", title: fileName, children: fileName }) });
+}
+function PdfCard({ fileName, onDelete, onRename, onPreview, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `file-card file-card--pdf ${className || ""}`, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "file-card__pdf-preview", onClick: onPreview, children: [
+      (onPreview || onDelete) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "file-card__overlay", children: [
+        onPreview && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "file-card__overlay-btn", onClick: (e) => {
+          e.stopPropagation();
+          onPreview();
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(IconEye, {}) }),
+        onDelete && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "file-card__overlay-btn", onClick: (e) => {
+          e.stopPropagation();
+          onDelete();
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(IconTrash, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "file-card__pdf-label", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "PDF" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(NameRow, { fileName, onRename })
+  ] });
+}
+function OtherCard({ fileName, fileType, fileUrl, onDelete, onRename, onPreview, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `file-card file-card--other ${className || ""}`, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "file-card__other-preview", onClick: onPreview, children: [
+      (onPreview || onDelete) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "file-card__overlay", children: [
+        onPreview && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "file-card__overlay-btn", onClick: (e) => {
+          e.stopPropagation();
+          onPreview();
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(IconEye, {}) }),
+        onDelete && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "file-card__overlay-btn", onClick: (e) => {
+          e.stopPropagation();
+          onDelete();
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(IconTrash, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { fileType, fileUrl, fileName })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(NameRow, { fileName, onRename })
+  ] });
+}
+function FileCard(props) {
+  if (props.fileType === "pdf") {
+    return /* @__PURE__ */ jsxRuntime.jsx(PdfCard, { ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(OtherCard, { ...props });
+}
+module.exports = FileCard;

package/dist/web/FileCard/FileCard.mjs

@@ -1,7 +1,7 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { useState as u, useRef as m, useEffect as b } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
 /* empty css               */
-const y = {
+const FILE_TYPE_CONFIG = {
   pdf: { color: "#F54A45", label: "PDF" },
   image: { color: "#00AAFF", label: "IMG" },
   doc: { color: "#3B64FC", label: "DOC" },
@@ -15,20 +15,21 @@ const y = {
   txt: { color: "#8C8C8C", label: "TXT" },
   other: { color: "#1677FF", label: "FILE" }
 };
-function v({ fileType: r, fileUrl: l, fileName: o }) {
-  if (r === "image" && l)
-    return /* @__PURE__ */ e("img", { src: l, alt: o, className: "file-card__image-thumb" });
-  const { color: t, label: s } = y[r];
-  return /* @__PURE__ */ c("svg", { width: "88", height: "88", viewBox: "0 0 88 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ e("rect", { x: "14", y: "8", width: "50", height: "62", rx: "4", fill: "#F5F5F5" }),
-    /* @__PURE__ */ e("path", { d: "M50 8L64 22H50V8Z", fill: "#E2E2E2" }),
-    /* @__PURE__ */ e("rect", { x: "20", y: "30", width: "30", height: "4", rx: "2", fill: "#E2E2E2" }),
-    /* @__PURE__ */ e("rect", { x: "20", y: "40", width: "30", height: "4", rx: "2", fill: "#E2E2E2" }),
-    /* @__PURE__ */ e("rect", { x: "20", y: "50", width: "20", height: "4", rx: "2", fill: "#E2E2E2" }),
-    /* @__PURE__ */ e("rect", { x: "42", y: "52", width: "32", height: "28", rx: "4", fill: t }),
-    /* @__PURE__ */ e("rect", { x: "42", y: "52", width: "4", height: "28", rx: "2", fill: "rgba(255,255,255,0.25)" }),
-    /* @__PURE__ */ e("rect", { x: "42", y: "76", width: "32", height: "4", rx: "2", fill: "rgba(0,0,0,0.15)" }),
-    /* @__PURE__ */ e(
+function FileIcon({ fileType, fileUrl, fileName }) {
+  if (fileType === "image" && fileUrl) {
+    return /* @__PURE__ */ jsx("img", { src: fileUrl, alt: fileName, className: "file-card__image-thumb" });
+  }
+  const { color, label } = FILE_TYPE_CONFIG[fileType];
+  return /* @__PURE__ */ jsxs("svg", { width: "88", height: "88", viewBox: "0 0 88 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "8", width: "50", height: "62", rx: "4", fill: "#F5F5F5" }),
+    /* @__PURE__ */ jsx("path", { d: "M50 8L64 22H50V8Z", fill: "#E2E2E2" }),
+    /* @__PURE__ */ jsx("rect", { x: "20", y: "30", width: "30", height: "4", rx: "2", fill: "#E2E2E2" }),
+    /* @__PURE__ */ jsx("rect", { x: "20", y: "40", width: "30", height: "4", rx: "2", fill: "#E2E2E2" }),
+    /* @__PURE__ */ jsx("rect", { x: "20", y: "50", width: "20", height: "4", rx: "2", fill: "#E2E2E2" }),
+    /* @__PURE__ */ jsx("rect", { x: "42", y: "52", width: "32", height: "28", rx: "4", fill: color }),
+    /* @__PURE__ */ jsx("rect", { x: "42", y: "52", width: "4", height: "28", rx: "2", fill: "rgba(255,255,255,0.25)" }),
+    /* @__PURE__ */ jsx("rect", { x: "42", y: "76", width: "32", height: "4", rx: "2", fill: "rgba(0,0,0,0.15)" }),
+    /* @__PURE__ */ jsx(
       "text",
       {
         x: "58",
@@ -39,90 +40,119 @@ function v({ fileType: r, fileUrl: l, fileName: o }) {
         fontWeight: "700",
         fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
         letterSpacing: "0.3",
-        children: s
+        children: label
       }
     )
   ] });
 }
-function p() {
-  return /* @__PURE__ */ c("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ e("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "3", stroke: "currentColor", strokeWidth: "2" })
+function IconEye() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3", stroke: "currentColor", strokeWidth: "2" })
   ] });
 }
-function g() {
-  return /* @__PURE__ */ c("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ e("polyline", { points: "3,6 5,6 21,6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ e("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ e("path", { d: "M10 11v6M14 11v6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ e("path", { d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+function IconTrash() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "3,6 5,6 21,6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 11v6M14 11v6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 }
-function k({ fileName: r, onRename: l }) {
-  const [o, t] = u(!1), [s, a] = u(r), n = m(null);
-  b(() => {
-    var i, f;
-    o && (a(r), (i = n.current) == null || i.focus(), (f = n.current) == null || f.select());
-  }, [o, r]);
-  const h = async () => {
-    const i = s.trim();
-    i && i !== r && await (l == null ? void 0 : l(i)), t(!1);
-  }, d = () => t(!1), x = (i) => {
-    i.key === "Enter" && !i.shiftKey && (i.preventDefault(), h()), i.key === "Escape" && d();
-  }, _ = () => {
-    h();
-  }, C = () => {
-    l && t(!0);
+function NameRow({ fileName, onRename }) {
+  const [editing, setEditing] = useState(false);
+  const [editValue, setEditValue] = useState(fileName);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    var _a, _b;
+    if (editing) {
+      setEditValue(fileName);
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+      (_b = inputRef.current) == null ? void 0 : _b.select();
+    }
+  }, [editing, fileName]);
+  const handleConfirm = async () => {
+    const trimmed = editValue.trim();
+    if (trimmed && trimmed !== fileName) {
+      await (onRename == null ? void 0 : onRename(trimmed));
+    }
+    setEditing(false);
+  };
+  const handleCancel = () => setEditing(false);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleConfirm();
+    }
+    if (e.key === "Escape") handleCancel();
   };
-  return o ? /* @__PURE__ */ e("div", { className: "file-card__name-area file-card__name-area--editing", children: /* @__PURE__ */ e(
-    "textarea",
-    {
-      ref: n,
-      className: "file-card__edit-input",
-      value: s,
-      onChange: (i) => a(i.target.value),
-      onKeyDown: x,
-      onBlur: _,
-      rows: 2,
-      style: { height: "42px" }
+  const handleBlur = () => {
+    handleConfirm();
+  };
+  const handleDoubleClick = () => {
+    if (onRename) {
+      setEditing(true);
     }
-  ) }) : /* @__PURE__ */ e("div", { className: "file-card__name-area", onDoubleClick: C, children: /* @__PURE__ */ e("span", { className: "file-card__filename", title: r, children: r }) });
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsx("div", { className: "file-card__name-area file-card__name-area--editing", children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: inputRef,
+        className: "file-card__edit-input",
+        value: editValue,
+        onChange: (e) => setEditValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        rows: 2,
+        style: { height: "42px" }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "file-card__name-area", onDoubleClick: handleDoubleClick, children: /* @__PURE__ */ jsx("span", { className: "file-card__filename", title: fileName, children: fileName }) });
 }
-function E({ fileName: r, onDelete: l, onRename: o, onPreview: t, className: s, style: a }) {
-  return /* @__PURE__ */ c("div", { className: `file-card file-card--pdf ${s || ""}`, style: a, children: [
-    /* @__PURE__ */ c("div", { className: "file-card__pdf-preview", onClick: t, children: [
-      (t || l) && /* @__PURE__ */ c("div", { className: "file-card__overlay", children: [
-        t && /* @__PURE__ */ e("button", { className: "file-card__overlay-btn", onClick: (n) => {
-          n.stopPropagation(), t();
-        }, children: /* @__PURE__ */ e(p, {}) }),
-        l && /* @__PURE__ */ e("button", { className: "file-card__overlay-btn", onClick: (n) => {
-          n.stopPropagation(), l();
-        }, children: /* @__PURE__ */ e(g, {}) })
+function PdfCard({ fileName, onDelete, onRename, onPreview, className, style }) {
+  return /* @__PURE__ */ jsxs("div", { className: `file-card file-card--pdf ${className || ""}`, style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "file-card__pdf-preview", onClick: onPreview, children: [
+      (onPreview || onDelete) && /* @__PURE__ */ jsxs("div", { className: "file-card__overlay", children: [
+        onPreview && /* @__PURE__ */ jsx("button", { className: "file-card__overlay-btn", onClick: (e) => {
+          e.stopPropagation();
+          onPreview();
+        }, children: /* @__PURE__ */ jsx(IconEye, {}) }),
+        onDelete && /* @__PURE__ */ jsx("button", { className: "file-card__overlay-btn", onClick: (e) => {
+          e.stopPropagation();
+          onDelete();
+        }, children: /* @__PURE__ */ jsx(IconTrash, {}) })
       ] }),
-      /* @__PURE__ */ e("div", { className: "file-card__pdf-label", children: /* @__PURE__ */ e("span", { children: "PDF" }) })
+      /* @__PURE__ */ jsx("div", { className: "file-card__pdf-label", children: /* @__PURE__ */ jsx("span", { children: "PDF" }) })
     ] }),
-    /* @__PURE__ */ e(k, { fileName: r, onRename: o })
+    /* @__PURE__ */ jsx(NameRow, { fileName, onRename })
   ] });
 }
-function F({ fileName: r, fileType: l, fileUrl: o, onDelete: t, onRename: s, onPreview: a, className: n, style: h }) {
-  return /* @__PURE__ */ c("div", { className: `file-card file-card--other ${n || ""}`, style: h, children: [
-    /* @__PURE__ */ c("div", { className: "file-card__other-preview", onClick: a, children: [
-      (a || t) && /* @__PURE__ */ c("div", { className: "file-card__overlay", children: [
-        a && /* @__PURE__ */ e("button", { className: "file-card__overlay-btn", onClick: (d) => {
-          d.stopPropagation(), a();
-        }, children: /* @__PURE__ */ e(p, {}) }),
-        t && /* @__PURE__ */ e("button", { className: "file-card__overlay-btn", onClick: (d) => {
-          d.stopPropagation(), t();
-        }, children: /* @__PURE__ */ e(g, {}) })
+function OtherCard({ fileName, fileType, fileUrl, onDelete, onRename, onPreview, className, style }) {
+  return /* @__PURE__ */ jsxs("div", { className: `file-card file-card--other ${className || ""}`, style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "file-card__other-preview", onClick: onPreview, children: [
+      (onPreview || onDelete) && /* @__PURE__ */ jsxs("div", { className: "file-card__overlay", children: [
+        onPreview && /* @__PURE__ */ jsx("button", { className: "file-card__overlay-btn", onClick: (e) => {
+          e.stopPropagation();
+          onPreview();
+        }, children: /* @__PURE__ */ jsx(IconEye, {}) }),
+        onDelete && /* @__PURE__ */ jsx("button", { className: "file-card__overlay-btn", onClick: (e) => {
+          e.stopPropagation();
+          onDelete();
+        }, children: /* @__PURE__ */ jsx(IconTrash, {}) })
       ] }),
-      /* @__PURE__ */ e(v, { fileType: l, fileUrl: o, fileName: r })
+      /* @__PURE__ */ jsx(FileIcon, { fileType, fileUrl, fileName })
     ] }),
-    /* @__PURE__ */ e(k, { fileName: r, onRename: s })
+    /* @__PURE__ */ jsx(NameRow, { fileName, onRename })
   ] });
 }
-function N(r) {
-  return r.fileType === "pdf" ? /* @__PURE__ */ e(E, { ...r }) : /* @__PURE__ */ e(F, { ...r });
+function FileCard(props) {
+  if (props.fileType === "pdf") {
+    return /* @__PURE__ */ jsx(PdfCard, { ...props });
+  }
+  return /* @__PURE__ */ jsx(OtherCard, { ...props });
 }
 export {
-  N as default
+  FileCard as default
 };

package/dist/web/Icon/Icon.js

@@ -1 +1,9 @@
-"use strict";const s=require("react/jsx-runtime");;/* empty css           */const n=({type:r,style:i,onClick:u,className:e,...c})=>{const t=e?`bu-icon ${e}`:"bu-icon";return s.jsx("svg",{style:i,className:t,"aria-hidden":"true",onClick:u,...c,children:s.jsx("use",{xlinkHref:`#${r}`})})};n.displayName="BuIcon";module.exports=n;
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css           */
+const BuIcon = ({ type, style, onClick, className, ...rest }) => {
+  const cls = className ? `bu-icon ${className}` : "bu-icon";
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { style, className: cls, "aria-hidden": "true", onClick, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("use", { xlinkHref: `#${type}` }) });
+};
+BuIcon.displayName = "BuIcon";
+module.exports = BuIcon;

package/dist/web/Icon/Icon.mjs

@@ -1,10 +1,10 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 /* empty css           */
-const t = ({ type: r, style: e, onClick: i, className: n, ...c }) => {
-  const s = n ? `bu-icon ${n}` : "bu-icon";
-  return /* @__PURE__ */ o("svg", { style: e, className: s, "aria-hidden": "true", onClick: i, ...c, children: /* @__PURE__ */ o("use", { xlinkHref: `#${r}` }) });
+const BuIcon = ({ type, style, onClick, className, ...rest }) => {
+  const cls = className ? `bu-icon ${className}` : "bu-icon";
+  return /* @__PURE__ */ jsx("svg", { style, className: cls, "aria-hidden": "true", onClick, ...rest, children: /* @__PURE__ */ jsx("use", { xlinkHref: `#${type}` }) });
 };
-t.displayName = "BuIcon";
+BuIcon.displayName = "BuIcon";
 export {
-  t as default
+  BuIcon as default
 };