bj-web-components 0.2.26 → 0.2.28

package/dist/web/Dropdown/BDropdown.mjs

@@ -0,0 +1,186 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import BInput from "../BasicInput/BInput.mjs";
+import { BCheckBox as CompoundBCheckBox } from "../CheckBox/index.mjs";
+import BuIcon from "../Icon/Icon.mjs";
+import BOverlayScrollbar from "../OverlayScrollbar/BOverlayScrollbar.mjs";
+/* empty css                       */
+import BTooltip from "../Tooltip/ContentTooltip.mjs";
+import "../Tooltip/TooltipWrapper.mjs";
+import defaultEmptyImage from "../ProductField/no_data_light.svg.mjs";
+/* empty css                */
+function classNames(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function getOptionText(option) {
+  return typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : String(option.value);
+}
+function TruncatedOptionLabel({ option }) {
+  const labelRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [anchorRect, setAnchorRect] = useState(null);
+  const isTextLabel = typeof option.label === "string" || typeof option.label === "number";
+  const label = isTextLabel ? String(option.label) : option.label;
+  function handleMouseEnter() {
+    const element = labelRef.current;
+    if (isTextLabel && element && element.scrollWidth > element.clientWidth) {
+      setAnchorRect(element.getBoundingClientRect());
+      setVisible(true);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: labelRef,
+      className: "bj-dropdown__option-label",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: () => setVisible(false),
+      children: [
+        label,
+        visible && anchorRect && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "bj-dropdown__option-tooltip-anchor",
+              style: {
+                position: "fixed",
+                top: anchorRect.top,
+                left: anchorRect.left,
+                width: anchorRect.width,
+                height: anchorRect.height
+              },
+              children: /* @__PURE__ */ jsx(BTooltip, { className: "bj-dropdown__option-tooltip", content: label, placement: "top" })
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+function DefaultOptionContent({ option, doubleLine }) {
+  if (!doubleLine) return /* @__PURE__ */ jsx(TruncatedOptionLabel, { option });
+  return /* @__PURE__ */ jsxs("span", { className: "bj-dropdown__option-content", children: [
+    /* @__PURE__ */ jsx(TruncatedOptionLabel, { option }),
+    option.description !== void 0 && /* @__PURE__ */ jsx("span", { className: "bj-dropdown__option-description", children: option.description })
+  ] });
+}
+function BDropdown({
+  className,
+  style,
+  options,
+  value,
+  defaultValue = [],
+  multiple = false,
+  optionMode = "single-line",
+  searchable = false,
+  searchValue,
+  searchPlaceholder = "搜索",
+  onSearch,
+  filterOption = true,
+  emptyText,
+  labels,
+  t = (text) => text,
+  optionRender,
+  onChange,
+  footer = true,
+  showReset = true,
+  showConfirm = true,
+  resetText = t("重置"),
+  confirmText = t("确定"),
+  onReset,
+  onConfirm
+}) {
+  const dropdownRef = useRef(null);
+  const optionsRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [internalSearchValue, setInternalSearchValue] = useState("");
+  const selectedValue = value ?? internalValue;
+  const isMultiple = multiple === true;
+  const isDoubleLine = optionMode === "double-line";
+  const currentSearchValue = searchValue ?? internalSearchValue;
+  const resolvedEmptyText = emptyText ?? (labels == null ? void 0 : labels.emptyText) ?? t("暂无结果");
+  const visibleOptions = !onSearch && filterOption !== false && currentSearchValue ? options.filter((option) => typeof filterOption === "function" ? filterOption(currentSearchValue, option) : getOptionText(option).toLocaleLowerCase().includes(currentSearchValue.toLocaleLowerCase())) : options;
+  function updateValue(nextValue, option) {
+    if (value === void 0) {
+      setInternalValue(nextValue);
+    }
+    onChange == null ? void 0 : onChange(nextValue, option);
+  }
+  function handleSearch(nextSearchValue) {
+    if (searchValue === void 0) {
+      setInternalSearchValue(nextSearchValue);
+    }
+    onSearch == null ? void 0 : onSearch(nextSearchValue);
+  }
+  function handleOptionChange(option) {
+    if (option.disabled) return;
+    const nextValue = isMultiple ? selectedValue.includes(option.value) ? selectedValue.filter((item) => item !== option.value) : [...selectedValue, option.value] : [option.value];
+    updateValue(nextValue, option);
+  }
+  function handleReset() {
+    if (value === void 0) {
+      setInternalValue([]);
+    }
+    onReset == null ? void 0 : onReset();
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: classNames("bj-dropdown", isDoubleLine && "bj-dropdown--double-line", !isMultiple && "bj-dropdown--single", className), role: "dialog", style, children: [
+    searchable && /* @__PURE__ */ jsx("div", { className: "bj-dropdown__search", children: /* @__PURE__ */ jsx(
+      BInput,
+      {
+        "aria-label": "搜索选项",
+        allowClear: { clearIcon: /* @__PURE__ */ jsx(BuIcon, { className: "bj-dropdown__search-clear-icon", type: "icon-a-guanbixi" }) },
+        onChange: (event) => handleSearch(event.target.value),
+        onClear: () => handleSearch(""),
+        placeholder: searchPlaceholder,
+        prefix: /* @__PURE__ */ jsx(BuIcon, { type: "icon-a-sousuoxi" }),
+        inputMode: "search",
+        role: "searchbox",
+        type: "text",
+        value: currentSearchValue
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { ref: optionsRef, className: classNames("bj-dropdown__options", "bj-overlay-scrollbar-hidden", visibleOptions.length === 0 && "bj-dropdown__options--empty", !isMultiple && "bj-dropdown__options--single"), children: [
+      visibleOptions.map((option) => isMultiple ? /* @__PURE__ */ jsx(
+        CompoundBCheckBox,
+        {
+          checked: selectedValue.includes(option.value),
+          className: classNames("bj-dropdown__option", isDoubleLine && option.description !== void 0 && "bj-dropdown__option--double-line"),
+          disabled: option.disabled,
+          onChange: () => handleOptionChange(option),
+          skipGroup: true,
+          variant: "white",
+          children: optionRender ? optionRender(option) : /* @__PURE__ */ jsx(DefaultOptionContent, { doubleLine: isDoubleLine && option.description !== void 0, option })
+        },
+        String(option.value)
+      ) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          "aria-pressed": selectedValue.includes(option.value),
+          className: classNames("bj-dropdown__option", "bj-dropdown__option--single", isDoubleLine && option.description !== void 0 && "bj-dropdown__option--double-line", selectedValue.includes(option.value) && "bj-dropdown__option--selected"),
+          disabled: option.disabled,
+          onClick: () => handleOptionChange(option),
+          type: "button",
+          children: [
+            optionRender ? /* @__PURE__ */ jsx("span", { className: "bj-dropdown__option-label", children: optionRender(option) }) : /* @__PURE__ */ jsx(DefaultOptionContent, { doubleLine: isDoubleLine && option.description !== void 0, option }),
+            selectedValue.includes(option.value) && /* @__PURE__ */ jsx(BuIcon, { className: "bj-dropdown__option-icon", type: "icon-a-dagouxi" })
+          ]
+        },
+        String(option.value)
+      )),
+      visibleOptions.length === 0 && /* @__PURE__ */ jsxs("div", { className: "bj-dropdown__empty", children: [
+        /* @__PURE__ */ jsx("img", { alt: "", className: "bj-dropdown__empty-image", src: defaultEmptyImage }),
+        /* @__PURE__ */ jsx("span", { className: "bj-dropdown__empty-text", children: resolvedEmptyText })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(BOverlayScrollbar, { containerRef: dropdownRef, gap: 2, size: 2, targetRef: optionsRef }),
+    footer !== false && (footer !== true ? footer : /* @__PURE__ */ jsxs("div", { className: classNames("bj-dropdown__actions", !isMultiple && "bj-dropdown__actions--single"), children: [
+      showReset && /* @__PURE__ */ jsx("button", { onClick: handleReset, type: "button", children: resetText }),
+      isMultiple && showConfirm && /* @__PURE__ */ jsx("button", { onClick: () => onConfirm == null ? void 0 : onConfirm(selectedValue), type: "button", children: confirmText })
+    ] }))
+  ] });
+}
+export {
+  BDropdown
+};

package/dist/web/EmptyInputBox/EmptyInputBox.js

@@ -0,0 +1,77 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+;/* empty css                    */
+function DeleteIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.1667 5.3335C15.1792 5.3335 16 6.15431 16 7.16683V8.00016H19C19.2761 8.00016 19.5 8.22402 19.5 8.50016C19.5 8.7763 19.2761 9.00016 19 9.00016H17.3333V16.8335C17.3333 17.846 16.5125 18.6668 15.5 18.6668H8.5C7.48748 18.6668 6.66667 17.846 6.66667 16.8335V9.00016H5C4.72386 9.00016 4.5 8.7763 4.5 8.50016C4.5 8.22402 4.72386 8.00016 5 8.00016H8V7.16683C8 6.15431 8.82081 5.3335 9.83333 5.3335H14.1667ZM7.66667 16.8335C7.66667 17.2937 8.03976 17.6668 8.5 17.6668H15.5C15.9602 17.6668 16.3333 17.2937 16.3333 16.8335V9.00016H7.66667V16.8335ZM10.5 11.3335C10.7761 11.3335 11 11.5574 11 11.8335V15.0002C11 15.2763 10.7761 15.5002 10.5 15.5002C10.2239 15.5002 10 15.2763 10 15.0002V11.8335C10 11.5574 10.2239 11.3335 10.5 11.3335ZM13.5 11.3335C13.7761 11.3335 14 11.5574 14 11.8335V15.0002C14 15.2763 13.7761 15.5002 13.5 15.5002C13.2239 15.5002 13 15.2763 13 15.0002V11.8335C13 11.5574 13.2239 11.3335 13.5 11.3335ZM9.83333 6.3335C9.3731 6.3335 9 6.70659 9 7.16683V8.00016H15V7.16683C15 6.70659 14.6269 6.3335 14.1667 6.3335H9.83333Z", fill: "currentColor" }) });
+}
+const BuEmptyInputBox = react.forwardRef(
+  function BuEmptyInputBox2({
+    mode = "single",
+    activeLang = "zh",
+    onLangChange,
+    value = "",
+    onChange,
+    placeholder,
+    maxLength,
+    error = false,
+    disabled,
+    onDelete,
+    labels,
+    id,
+    className,
+    style
+  }, ref) {
+    const zhLabel = (labels == null ? void 0 : labels.zh) ?? "中文";
+    const enLabel = (labels == null ? void 0 : labels.en) ?? "EN";
+    const hasBilingual = mode === "bilingual";
+    const hasDelete = !!onDelete;
+    const boxCls = [
+      "bu-eib__box",
+      hasBilingual && hasDelete && "bu-eib__box--actions-both",
+      hasBilingual && !hasDelete && "bu-eib__box--actions-toggle",
+      !hasBilingual && hasDelete && "bu-eib__box--actions-delete",
+      error && "bu-eib__box--error",
+      disabled && "bu-eib__box--disabled"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["bu-eib", className].filter(Boolean).join(" "), style, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: boxCls, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          id,
+          className: "bu-eib__field",
+          value,
+          onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+          placeholder,
+          maxLength,
+          disabled
+        }
+      ),
+      (hasBilingual || hasDelete) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-eib__actions", children: [
+        hasBilingual && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-eib__lang-toggle", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: `bu-eib__lang-btn${activeLang === "zh" ? " bu-eib__lang-btn--active" : ""}`,
+              onClick: () => onLangChange == null ? void 0 : onLangChange("zh"),
+              children: zhLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: `bu-eib__lang-btn${activeLang === "en" ? " bu-eib__lang-btn--active" : ""}`,
+              onClick: () => onLangChange == null ? void 0 : onLangChange("en"),
+              children: enLabel
+            }
+          )
+        ] }),
+        hasDelete && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bu-eib__delete", onClick: onDelete, children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {}) })
+      ] })
+    ] }) });
+  }
+);
+module.exports = BuEmptyInputBox;

package/dist/web/EmptyInputBox/EmptyInputBox.mjs

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+/* empty css                    */
+function DeleteIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M14.1667 5.3335C15.1792 5.3335 16 6.15431 16 7.16683V8.00016H19C19.2761 8.00016 19.5 8.22402 19.5 8.50016C19.5 8.7763 19.2761 9.00016 19 9.00016H17.3333V16.8335C17.3333 17.846 16.5125 18.6668 15.5 18.6668H8.5C7.48748 18.6668 6.66667 17.846 6.66667 16.8335V9.00016H5C4.72386 9.00016 4.5 8.7763 4.5 8.50016C4.5 8.22402 4.72386 8.00016 5 8.00016H8V7.16683C8 6.15431 8.82081 5.3335 9.83333 5.3335H14.1667ZM7.66667 16.8335C7.66667 17.2937 8.03976 17.6668 8.5 17.6668H15.5C15.9602 17.6668 16.3333 17.2937 16.3333 16.8335V9.00016H7.66667V16.8335ZM10.5 11.3335C10.7761 11.3335 11 11.5574 11 11.8335V15.0002C11 15.2763 10.7761 15.5002 10.5 15.5002C10.2239 15.5002 10 15.2763 10 15.0002V11.8335C10 11.5574 10.2239 11.3335 10.5 11.3335ZM13.5 11.3335C13.7761 11.3335 14 11.5574 14 11.8335V15.0002C14 15.2763 13.7761 15.5002 13.5 15.5002C13.2239 15.5002 13 15.2763 13 15.0002V11.8335C13 11.5574 13.2239 11.3335 13.5 11.3335ZM9.83333 6.3335C9.3731 6.3335 9 6.70659 9 7.16683V8.00016H15V7.16683C15 6.70659 14.6269 6.3335 14.1667 6.3335H9.83333Z", fill: "currentColor" }) });
+}
+const BuEmptyInputBox = forwardRef(
+  function BuEmptyInputBox2({
+    mode = "single",
+    activeLang = "zh",
+    onLangChange,
+    value = "",
+    onChange,
+    placeholder,
+    maxLength,
+    error = false,
+    disabled,
+    onDelete,
+    labels,
+    id,
+    className,
+    style
+  }, ref) {
+    const zhLabel = (labels == null ? void 0 : labels.zh) ?? "中文";
+    const enLabel = (labels == null ? void 0 : labels.en) ?? "EN";
+    const hasBilingual = mode === "bilingual";
+    const hasDelete = !!onDelete;
+    const boxCls = [
+      "bu-eib__box",
+      hasBilingual && hasDelete && "bu-eib__box--actions-both",
+      hasBilingual && !hasDelete && "bu-eib__box--actions-toggle",
+      !hasBilingual && hasDelete && "bu-eib__box--actions-delete",
+      error && "bu-eib__box--error",
+      disabled && "bu-eib__box--disabled"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { className: ["bu-eib", className].filter(Boolean).join(" "), style, children: /* @__PURE__ */ jsxs("div", { className: boxCls, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id,
+          className: "bu-eib__field",
+          value,
+          onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+          placeholder,
+          maxLength,
+          disabled
+        }
+      ),
+      (hasBilingual || hasDelete) && /* @__PURE__ */ jsxs("div", { className: "bu-eib__actions", children: [
+        hasBilingual && /* @__PURE__ */ jsxs("div", { className: "bu-eib__lang-toggle", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `bu-eib__lang-btn${activeLang === "zh" ? " bu-eib__lang-btn--active" : ""}`,
+              onClick: () => onLangChange == null ? void 0 : onLangChange("zh"),
+              children: zhLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `bu-eib__lang-btn${activeLang === "en" ? " bu-eib__lang-btn--active" : ""}`,
+              onClick: () => onLangChange == null ? void 0 : onLangChange("en"),
+              children: enLabel
+            }
+          )
+        ] }),
+        hasDelete && /* @__PURE__ */ jsx("button", { type: "button", className: "bu-eib__delete", onClick: onDelete, children: /* @__PURE__ */ jsx(DeleteIcon, {}) })
+      ] })
+    ] }) });
+  }
+);
+export {
+  BuEmptyInputBox as default
+};

package/dist/web/FileCard/FileCard.js

@@ -0,0 +1,157 @@
+"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

@@ -0,0 +1,158 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "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__ */ 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",
+        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__ */ 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 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 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();
+  };
+  const handleBlur = () => {
+    handleConfirm();
+  };
+  const handleDoubleClick = () => {
+    if (onRename) {
+      setEditing(true);
+    }
+  };
+  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 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__ */ jsx("div", { className: "file-card__pdf-label", children: /* @__PURE__ */ jsx("span", { children: "PDF" }) })
+    ] }),
+    /* @__PURE__ */ jsx(NameRow, { fileName, onRename })
+  ] });
+}
+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__ */ jsx(FileIcon, { fileType, fileUrl, fileName })
+    ] }),
+    /* @__PURE__ */ jsx(NameRow, { fileName, onRename })
+  ] });
+}
+function FileCard(props) {
+  if (props.fileType === "pdf") {
+    return /* @__PURE__ */ jsx(PdfCard, { ...props });
+  }
+  return /* @__PURE__ */ jsx(OtherCard, { ...props });
+}
+export {
+  FileCard as default
+};