musae 0.2.26 → 0.3.1

package/dist/components/waterfall/sequential.cjs

@@ -0,0 +1,73 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+
+var styles = {
+  column: function column(props) {
+    return [{
+      flex: "musaex-98rzlu",
+      flexGrow: null,
+      flexShrink: null,
+      flexBasis: null,
+      display: "musaex-78zum5",
+      flexDirection: "musaex-dt5ytf",
+      rowGap: "musaex-m8a6f2",
+      overflow: "musaex-ysyzu8",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    }, {
+      "--rowGap": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.rowGap)
+    }];
+  }
+};
+var Sequential = function Sequential(_ref) {
+  var children = _ref.children,
+    columns = _ref.columns,
+    className = _ref.className,
+    style = _ref.style,
+    rowGap = _ref.rowGap;
+  // group children into diff columns
+  // if current column do not has any child, mean this column is not need to render
+  var groupedColumns = React.useMemo(function () {
+    return children.reduce(function (_ref2, child) {
+      var _grouped$at;
+      var _ref3 = _slicedToArray(_ref2, 2),
+        grouped = _ref3[0],
+        addedIndex = _ref3[1];
+      (_grouped$at = grouped.at(addedIndex)) === null || _grouped$at === void 0 || _grouped$at.push(child);
+      var next = addedIndex + 1;
+      return [grouped, next >= columns ? 0 : next];
+    }, [Array.from({
+      length: columns
+    }, function () {
+      return [];
+    }), 0])[0].filter(function (column) {
+      return column.length > 0;
+    });
+  }, [children, columns]);
+  // convert column into react div node
+  // inject column styles
+  var _children = React.useMemo(function () {
+    var styled = stylex.default.props(styles.column({
+      rowGap: rowGap
+    }));
+    return groupedColumns.map(function (column, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styled.className,
+        style: styled.style,
+        key: index
+      }, column);
+    });
+  }, [groupedColumns, rowGap]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: style
+  }, _children);
+};
+
+exports.default = Sequential;

package/dist/components/waterfall/{sequential.js → sequential.mjs}

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useMemo } from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 
 var styles = {
   column: function column(props) {
@@ -51,7 +51,7 @@ var Sequential = function Sequential(_ref) {
   // convert column into react div node
   // inject column styles
   var _children = useMemo(function () {
-    var styled = props(styles.column({
+    var styled = _stylex.props(styles.column({
       rowGap: rowGap
     }));
     return groupedColumns.map(function (column, index) {

package/dist/components/waterfall/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 import { type Gutter } from "../../hooks/use-gutters";
 /**
  * @description

package/dist/components/waterfall/waterfall.cjs

@@ -0,0 +1,152 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var React = require('react');
+var hooks = require('./hooks.cjs');
+var useGutters = require('../../hooks/use-gutters.cjs');
+var relax = require('@aiszlab/relax');
+var sequential = require('./sequential.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  waterfall: function waterfall(props) {
+    return [{
+      width: "musaex-1k094eu",
+      display: "musaex-78zum5",
+      flexDirection: "musaex-1q0g3np",
+      flexWrap: "musaex-1a02dak",
+      alignContent: "musaex-8gbvx8",
+      height: "musaex-g7h5cd",
+      columnGap: "musaex-4rvf3u",
+      rowGap: "musaex-m8a6f2",
+      overflow: "musaex-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    }, {
+      "--columnGap": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.columnGap),
+      "--rowGap": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.rowGap)
+    }];
+  },
+  repainted: function repainted(props) {
+    return [{
+      flexDirection: "musaex-dt5ytf",
+      height: "musaex-1jwls1v",
+      $$css: true
+    }, {
+      "--height": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.maxHeight)
+    }];
+  },
+  item: function item(props) {
+    var _props$order, _props$order2;
+    return [{
+      order: "musaex-3x427e",
+      width: "musaex-17fnjtu",
+      height: "musaex-g7h5cd",
+      $$css: true
+    }, {
+      "--order": ((_props$order = props.order) !== null && _props$order !== void 0 ? _props$order : 1) != null ? (_props$order2 = props.order) !== null && _props$order2 !== void 0 ? _props$order2 : 1 : "initial",
+      "--width": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }("calc((100% - ".concat(props.columns - 1, " * ").concat(props.columnGap, "px) / ").concat(props.columns, ")"))
+    }];
+  }
+};
+var Waterfall = function Waterfall(_ref2) {
+  var _ref2$columns = _ref2.columns,
+    columns = _ref2$columns === void 0 ? 4 : _ref2$columns,
+    _ref2$gutter = _ref2.gutter,
+    gutter = _ref2$gutter === void 0 ? 8 : _ref2$gutter,
+    _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? [] : _ref2$children,
+    _ref2$sequential = _ref2.sequential,
+    sequential$1 = _ref2$sequential === void 0 ? false : _ref2$sequential,
+    className$1 = _ref2.className,
+    style = _ref2.style;
+  var _useGutters = useGutters.useGutters({
+      gutter: gutter
+    }),
+    _useGutters2 = _slicedToArray(_useGutters, 2),
+    columnGap = _useGutters2[0],
+    rowGap = _useGutters2[1];
+  var _useRepaint = hooks.useRepaint({
+      columns: columns,
+      rowGap: rowGap
+    }),
+    collect = _useRepaint.collect,
+    maxHeight = _useRepaint.maxHeight,
+    order = _useRepaint.order,
+    items = _useRepaint.items,
+    repaint = _useRepaint.repaint;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Waterfall);
+  var styled = stylex.default.props(styles.waterfall({
+    rowGap: rowGap,
+    columnGap: columnGap
+  }), !sequential$1 && maxHeight > 0 && styles.repainted({
+    maxHeight: maxHeight
+  }));
+  relax.useUpdateEffect(function () {
+    // no need to repaint when `sequential`
+    if (sequential$1) return;
+    repaint();
+  }, [rowGap]);
+  relax.useMounted(function () {
+    // no need to observer when `sequential`
+    if (sequential$1) return;
+    // observer be called when the component is mounted
+    // so in waterfall we use current time to first render
+    var resizer = new ResizeObserver(function () {
+      repaint();
+    });
+    Array.from(items.current.values()).forEach(function (node) {
+      if (!node) return;
+      resizer.observe(node);
+    });
+    return function () {
+      resizer.disconnect();
+    };
+  });
+  if (children.length === 0) return null;
+  // sequential waterfall
+  if (sequential$1) {
+    return /*#__PURE__*/React.createElement(sequential.default, {
+      columns: columns,
+      children: children,
+      rowGap: rowGap,
+      className: relax.clsx(classNames[className.WaterfallClassToken.Sequential], className$1, styled.className),
+      style: _objectSpread(_objectSpread({}, styled.style), style)
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.WaterfallClassToken.Waterfall], className$1, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }, children.map(function (item, index) {
+    var _stylex$props = stylex.default.props(styles.item({
+        columnGap: columnGap,
+        columns: columns,
+        order: order(index)
+      })),
+      className = _stylex$props.className,
+      style = _stylex$props.style;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: className,
+      style: style,
+      ref: function ref(_ref) {
+        collect(index, _ref);
+      }
+    }, item);
+  }));
+};
+
+exports.default = Waterfall;

package/dist/components/waterfall/{waterfall.js → waterfall.mjs}

@@ -1,14 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import React from 'react';
-import { useRepaint } from './hooks.js';
-import { useGutters } from '../../hooks/use-gutters.js';
+import { useRepaint } from './hooks.mjs';
+import { useGutters } from '../../hooks/use-gutters.mjs';
 import { useUpdateEffect, useMounted, clsx } from '@aiszlab/relax';
-import Sequential from './sequential.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { WaterfallClassToken } from '../../utils/class-name.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import Sequential from './sequential.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { WaterfallClassToken } from '../../utils/class-name.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   waterfall: function waterfall(props) {
@@ -87,7 +87,7 @@ var Waterfall = function Waterfall(_ref2) {
     items = _useRepaint.items,
     repaint = _useRepaint.repaint;
   var classNames = useClassNames(ComponentToken.Waterfall);
-  var styled = props(styles.waterfall({
+  var styled = _stylex.props(styles.waterfall({
     rowGap: rowGap,
     columnGap: columnGap
   }), !sequential && maxHeight > 0 && styles.repainted({
@@ -129,7 +129,7 @@ var Waterfall = function Waterfall(_ref2) {
     className: clsx(classNames[WaterfallClassToken.Waterfall], className, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style)
   }, children.map(function (item, index) {
-    var _stylex$props = props(styles.item({
+    var _stylex$props = _stylex.props(styles.item({
         columnGap: columnGap,
         columns: columns,
         order: order(index)
@@ -146,6 +146,5 @@ var Waterfall = function Waterfall(_ref2) {
     }, item);
   }));
 };
-var Waterfall$1 = Waterfall;
 
-export { Waterfall$1 as default };
+export { Waterfall as default };

package/dist/components/watermark/hooks.cjs

@@ -0,0 +1,154 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+var painter = function painter(_ref) {
+  var _width = _ref.width,
+    _height = _ref.height,
+    _ref$ratio = _ref.ratio,
+    ratio = _ref$ratio === void 0 ? 1 : _ref$ratio;
+  var canvas = document.createElement("canvas");
+  var ctx = canvas.getContext("2d");
+  var width = _width * ratio;
+  var height = _height * ratio;
+  canvas.setAttribute("width", "".concat(width, "px"));
+  canvas.setAttribute("height", "".concat(height, "px"));
+  ctx.save();
+  return {
+    ctx: ctx,
+    canvas: canvas,
+    width: width,
+    height: height
+  };
+};
+/**
+ * @description
+ * watermarks
+ */
+var useWatermarks = function useWatermarks() {
+  var _useState = React.useState(function () {
+      return new Map();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    watermarks = _useState2[0],
+    setWatermarks = _useState2[1];
+  /// isWatermarkElement
+  var isWatermarkElement = relax.useEvent(function (element) {
+    return Array.from(watermarks.values()).includes(element);
+  });
+  var isWatermarkRewritten = relax.useEvent(function (mutation) {
+    // check is watermark removed
+    var isWatermarkRemoved = mutation.removedNodes.length > 0 && Array.from(mutation.removedNodes).some(function (node) {
+      return isWatermarkElement(node);
+    });
+    if (isWatermarkRemoved) return true;
+    // check is watermark changed
+    var isWatermarkChanged = mutation.type === "attributes" && isWatermarkElement(mutation.target);
+    return isWatermarkChanged;
+  });
+  /// add
+  var add = relax.useEvent(function (container, dataURL, size) {
+    var _watermarks$get;
+    if (!container) return null;
+    var watermarkElement = (_watermarks$get = watermarks.get(container)) !== null && _watermarks$get !== void 0 ? _watermarks$get : document.createElement("div");
+    watermarkElement.style.backgroundImage = "url('".concat(dataURL, "')");
+    watermarkElement.style.backgroundSize = "".concat(Math.floor(size), "px");
+    watermarkElement.style.width = "100%";
+    watermarkElement.style.height = "100%";
+    watermarkElement.style.visibility = "visible";
+    watermarkElement.style.position = "absolute";
+    watermarkElement.style.insetInlineStart = "0";
+    watermarkElement.style.insetBlockStart = "0";
+    // Prevents using the browser `Hide Element` to hide watermarks
+    watermarkElement.removeAttribute("class");
+    // add as a child
+    if (watermarkElement.parentElement !== container) {
+      container.append(watermarkElement);
+    }
+    // add into state
+    if (!watermarks.has(container)) {
+      setWatermarks(function (prev) {
+        return new Map(prev).set(container, watermarkElement);
+      });
+    }
+    return watermarkElement;
+  });
+  /// remove
+  var remove = function remove(container) {
+    var watermarkElement = watermarks.get(container);
+    if (!watermarkElement) return;
+    // remove child
+    container.removeChild(watermarkElement);
+    // remove from state
+    setWatermarks(function (prev) {
+      var next = new Map(prev);
+      next["delete"](container);
+      return next;
+    });
+  };
+  return {
+    isWatermarkElement: isWatermarkElement,
+    add: add,
+    remove: remove,
+    isWatermarkRewritten: isWatermarkRewritten
+  };
+};
+/**
+ * @description
+ * create clips
+ */
+var useClips = function useClips() {
+  var draw = relax.useEvent(function (mark, _ref2) {
+    var width = _ref2.width,
+      height = _ref2.height,
+      ratio = _ref2.ratio,
+      fontStyle = _ref2.fontStyle,
+      fontWeight = _ref2.fontWeight,
+      _fontSize = _ref2.fontSize,
+      fontFamily = _ref2.fontFamily,
+      textAlign = _ref2.textAlign,
+      color = _ref2.color;
+    var marked = painter({
+      width: width,
+      height: height,
+      ratio: ratio
+    });
+    if (mark instanceof HTMLImageElement) {
+      marked.ctx.drawImage(mark, 0, 0, marked.width, marked.height);
+    } else {
+      var marks = relax.toArray(mark);
+      var fontSize = Number(_fontSize) * ratio;
+      marked.ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(fontSize, "px/").concat(height, "px ").concat(fontFamily);
+      marked.ctx.fillStyle = color;
+      marked.ctx.textBaseline = "top";
+      marked.ctx.textAlign = textAlign;
+      marks.forEach(function (_mark, index) {
+        marked.ctx.fillText(_mark, marked.width / 2, index * fontSize);
+      });
+    }
+    // ==================== Rotate ====================
+    var angle = Math.PI / 180 * Number(-30);
+    var maxSize = Math.max(width, height);
+    var squareMark = painter({
+      height: maxSize,
+      width: maxSize,
+      ratio: ratio
+    });
+    // Copy from `ctx` and rotate
+    squareMark.ctx.translate(squareMark.width / 2, squareMark.height / 2);
+    squareMark.ctx.rotate(angle);
+    if (marked.width > 0 && marked.height > 0) {
+      squareMark.ctx.drawImage(marked.canvas, -marked.width / 2, -marked.height / 2);
+    }
+    return {
+      dataURL: squareMark.canvas.toDataURL(),
+      size: Math.max(squareMark.width / ratio, squareMark.height / ratio)
+    };
+  });
+  return {
+    draw: draw
+  };
+};
+
+exports.useClips = useClips;
+exports.useWatermarks = useWatermarks;

package/dist/components/watermark/watermark.cjs

@@ -0,0 +1,86 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var hooks = require('./hooks.cjs');
+
+var Watermark = function Watermark(_ref) {
+  var children = _ref.children,
+    _mark = _ref.mark,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 120 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 64 : _ref$height,
+    _ref$font = _ref.font,
+    _ref$font2 = _ref$font === void 0 ? {} : _ref$font,
+    _ref$font2$color = _ref$font2.color,
+    color = _ref$font2$color === void 0 ? "rgba(0, 0, 0, 0.15)" : _ref$font2$color,
+    _ref$font2$fontSize = _ref$font2.fontSize,
+    fontSize = _ref$font2$fontSize === void 0 ? 16 : _ref$font2$fontSize,
+    _ref$font2$fontFamily = _ref$font2.fontFamily,
+    fontFamily = _ref$font2$fontFamily === void 0 ? "sans-serif" : _ref$font2$fontFamily,
+    _ref$font2$fontStyle = _ref$font2.fontStyle,
+    fontStyle = _ref$font2$fontStyle === void 0 ? "normal" : _ref$font2$fontStyle,
+    _ref$font2$fontWeight = _ref$font2.fontWeight,
+    fontWeight = _ref$font2$fontWeight === void 0 ? "normal" : _ref$font2$fontWeight,
+    _ref$font2$textAlign = _ref$font2.textAlign,
+    textAlign = _ref$font2$textAlign === void 0 ? "start" : _ref$font2$textAlign;
+  var watermarkRef = React.useRef(null);
+  var _useWatermarks = hooks.useWatermarks(),
+    add = _useWatermarks.add,
+    isWatermarkRewritten = _useWatermarks.isWatermarkRewritten;
+  var styled = {
+    watermark: {
+      className: "musaex-1n2onr6 musaex-b3r6kr"
+    },
+    marks: {
+      className: "musaex-1k094eu musaex-1xj1dsn"
+    }
+  };
+  var _useClips = hooks.useClips(),
+    draw = _useClips.draw;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    mark = _React$useState2[0],
+    setMark = _React$useState2[1];
+  var ratio = relax.useDevicePixelRatio();
+  var sync = relax.useRaf(function () {
+    var canvas = document.createElement("canvas");
+    var ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    setMark(draw(_mark, {
+      ratio: ratio,
+      width: width,
+      height: height,
+      color: color,
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      fontStyle: fontStyle,
+      fontWeight: fontWeight,
+      textAlign: textAlign
+    }));
+  });
+  relax.useMutateObserver(watermarkRef.current, function (mutations) {
+    mutations.forEach(function (mutation) {
+      if (!isWatermarkRewritten(mutation)) return;
+      sync();
+    });
+  });
+  React.useEffect(function () {
+    if (!mark) return;
+    add(watermarkRef.current, mark.dataURL, mark.size);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mark]);
+  React.useEffect(function () {
+    sync();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_mark, width, height, ratio, color, fontFamily, fontSize, fontStyle, fontWeight, textAlign]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.watermark.className,
+    style: styled.watermark.style,
+    ref: watermarkRef
+  }, children);
+};
+
+exports.default = Watermark;

package/dist/components/watermark/{watermark.js → watermark.mjs}

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useEffect } from 'react';
 import { useDevicePixelRatio, useRaf, useMutateObserver } from '@aiszlab/relax';
-import { useWatermarks, useClips } from './hooks.js';
+import { useWatermarks, useClips } from './hooks.mjs';
 
 var Watermark = function Watermark(_ref) {
   var children = _ref.children,
@@ -80,6 +80,5 @@ var Watermark = function Watermark(_ref) {
     ref: watermarkRef
   }, children);
 };
-var Watermark$1 = Watermark;
 
-export { Watermark$1 as default };
+export { Watermark as default };

package/dist/hooks/use-class-names.cjs

@@ -0,0 +1,12 @@
+var React = require('react');
+var context = require('../components/config/context.cjs');
+
+/**
+ * @description
+ * the component class names
+ */
+var useClassNames = function useClassNames(token) {
+  return React.useContext(context.default).classNames[token];
+};
+
+exports.useClassNames = useClassNames;

package/dist/hooks/use-class-names.d.ts

@@ -210,6 +210,7 @@ export declare const useClassNames: <T extends ComponentToken = ComponentToken>(
         0: string;
         1: string;
         2: string;
+        3: string;
     };
     38: {
         0: string;

package/dist/hooks/{use-class-names.js → use-class-names.mjs}

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import Context from '../components/config/context.js';
+import Context from '../components/config/context.mjs';
 
 /**
  * @description

package/dist/hooks/use-closable.cjs

@@ -0,0 +1,61 @@
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+var button = require('../components/button/button.cjs');
+var keyboard = require('../utils/keyboard.cjs');
+var close = require('../components/icon/icons/navigation/close.cjs');
+
+/**
+ * @description
+ * for dialog, close means some events or some elements
+ * in musae, we use a hook to handle this
+ *
+ * by default, closable may be different type, like `false` | ['esc'] | undefined
+ * resolve these types, we convert to `Set<Closable>`
+ */
+var useClosable = function useClosable(_ref) {
+  var onClose = _ref.onClose,
+    closable = _ref.closable;
+  // convert closable to enum sets
+  var triggers = React.useMemo(function () {
+    if (relax.isUndefined(closable) || closable === true) {
+      return new Set(["close", "esc", "overlay"]);
+    }
+    return new Set(closable || []);
+  }, [closable]);
+  // closer react element for dialog
+  var closer = React.useMemo(function () {
+    if (!triggers.has("close")) return null;
+    var styled = {
+      className: "musaex-167ikqz musaex-134unf5"
+    };
+    return /*#__PURE__*/React.createElement(button.Button, {
+      shape: "circular",
+      variant: "text",
+      prefix: /*#__PURE__*/React.createElement(close.default, null),
+      onClick: onClose,
+      className: styled.className,
+      style: _objectSpread(_objectSpread({}, styled.style), {}, {
+        position: "absolute"
+      }),
+      size: "small"
+    });
+  }, [triggers, onClose]);
+  /// overlay click callback
+  var onOverlayClick = relax.useEvent(function () {
+    if (!triggers.has("overlay")) return;
+    onClose === null || onClose === void 0 || onClose();
+  });
+  /// esc key press callback
+  var onKeyDown = relax.useEvent(function (e) {
+    if (e.key !== keyboard.Keyboard.Escape) return;
+    onClose === null || onClose === void 0 || onClose();
+  });
+  return {
+    closer: closer,
+    onOverlayClick: onOverlayClick,
+    onKeyDown: onKeyDown
+  };
+};
+
+exports.useClosable = useClosable;

package/dist/hooks/use-closable.d.ts

@@ -8,7 +8,7 @@ export type Closable = "esc" | "overlay" | "close";
  * by default, closable may be different type, like `false` | ['esc'] | undefined
  * resolve these types, we convert to `Set<Closable>`
  */
-export declare const useClosable: ({ onClose, closable }: {
+export declare const useClosable: ({ onClose, closable, }: {
     onClose?: VoidFunction;
     closable: boolean | Closable[];
 }) => {

package/dist/hooks/{use-closable.js → use-closable.mjs}

@@ -1,9 +1,9 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { isUndefined, useEvent } from '@aiszlab/relax';
 import React, { useMemo } from 'react';
-import Button from '../components/button/button.js';
-import { Keyboard } from '../utils/keyboard.js';
-import Close from '../components/icon/icons/navigation/close.js';
+import { Button } from '../components/button/button.mjs';
+import { Keyboard } from '../utils/keyboard.mjs';
+import Close from '../components/icon/icons/navigation/close.mjs';
 
 /**
  * @description