musae 0.2.26 → 0.3.0

package/dist/components/tour/hooks.cjs

@@ -0,0 +1,47 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+/**
+ * @description
+ * use step
+ */
+var useStep = function useStep(_ref) {
+  var steps = _ref.steps,
+    open = _ref.open;
+  var _useCounter = relax.useCounter(0, {
+      min: 0,
+      max: steps.length - 1
+    }),
+    _useCounter2 = _slicedToArray(_useCounter, 2),
+    stepAt = _useCounter2[0],
+    _useCounter2$ = _useCounter2[1],
+    add = _useCounter2$.add,
+    subtract = _useCounter2$.subtract,
+    reset = _useCounter2$.reset;
+  var step = steps[stepAt];
+  var hasNext = stepAt < steps.length - 1;
+  var hasPrev = stepAt > 0;
+  var next = function next() {
+    add();
+  };
+  var prev = function prev() {
+    subtract();
+  };
+  React.useEffect(function () {
+    if (open) {
+      reset();
+      return;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return {
+    step: step,
+    hasNext: hasNext,
+    hasPrev: hasPrev,
+    next: next,
+    prev: prev
+  };
+};
+
+exports.useStep = useStep;

package/dist/components/tour/hooks.d.ts

@@ -1,4 +1,4 @@
-import type { TourStep } from "./types";
+import type { TourStep } from "musae/types/tour";
 /**
  * @description
  * use step

package/dist/components/tour/index.d.ts

@@ -1,4 +1,2 @@
 import Tour from "./tour";
-import type { TourStep } from "./types";
 export { Tour };
-export type { TourStep };

package/dist/components/tour/spotlight.cjs

@@ -0,0 +1,65 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var dom = require('@floating-ui/dom');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var Spotlight = function Spotlight(_ref) {
+  var _trigger = _ref.trigger,
+    _ref$padding = _slicedToArray(_ref.padding, 2),
+    paddingY = _ref$padding[0],
+    paddingX = _ref$padding[1];
+  var floatable = React.useRef(null);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Tour);
+  /// how to get trigger
+  var trigger = React.useMemo(function () {
+    if (relax.isFunction(_trigger)) return _trigger();
+    return _trigger !== null && _trigger !== void 0 ? _trigger : null;
+  }, [_trigger]);
+  /// auto update: calc trigger dom to get position
+  /// if trigger changed, re-relate
+  React.useEffect(function () {
+    var _floatable = floatable.current;
+    if (!trigger) return;
+    if (!_floatable) return;
+    var cleanup = dom.autoUpdate(trigger, _floatable, function () {
+      dom.computePosition(trigger, _floatable, {
+        placement: "bottom",
+        middleware: [dom.size({
+          apply: function apply(_ref2) {
+            var rects = _ref2.rects,
+              elements = _ref2.elements;
+            elements.floating.style.height = "".concat(rects.reference.height + paddingY * 2, "px");
+            elements.floating.style.width = "".concat(rects.reference.width + paddingX * 2, "px");
+          }
+        }), dom.offset(function (_ref3) {
+          var rects = _ref3.rects;
+          return -rects.reference.height / 2 - rects.floating.height / 2;
+        })]
+      }).then(function (_ref4) {
+        var x = _ref4.x,
+          y = _ref4.y;
+        _floatable.style.transform = "translate(".concat(x, "px, ").concat(y, "px)");
+      })["catch"](function () {
+        return null;
+      });
+    });
+    return function () {
+      cleanup();
+    };
+  }, [trigger, paddingY, paddingX]);
+  var styled = {
+    className: "musaex-1u5qhrl musaex-ok3b7d musaex-11xpdln musaex-13dflua musaex-1so62im"
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: floatable,
+    className: relax.clsx(classNames[className.TourClassToken.Spotlight], styled.className),
+    style: styled.style
+  });
+};
+
+exports.default = Spotlight;

package/dist/components/tour/spotlight.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { SpotlightProps } from "./types";
+import { SpotlightProps } from "musae/types/tour";
 declare const Spotlight: ({ trigger: _trigger, padding: [paddingY, paddingX] }: SpotlightProps) => React.JSX.Element;
 export default Spotlight;

package/dist/components/tour/{spotlight.js → spotlight.mjs}

@@ -2,9 +2,9 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useMemo, useEffect } from 'react';
 import { isFunction, clsx } from '@aiszlab/relax';
 import { autoUpdate, computePosition, size, offset } from '@floating-ui/dom';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TourClassToken } from '../../utils/class-name.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TourClassToken } from '../../utils/class-name.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var Spotlight = function Spotlight(_ref) {
   var _trigger = _ref.trigger,

package/dist/components/tour/tour.cjs

@@ -0,0 +1,171 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var portal = require('../portal/portal.cjs');
+var popper = require('../popper/popper.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var button = require('../button/button.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var space = require('../space/space.cjs');
+var theme = require('../theme/theme.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var hooks$1 = require('./hooks.cjs');
+var spotlight = require('./spotlight.cjs');
+var useGutters = require('../../hooks/use-gutters.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var useLocale = require('../../locale/use-locale.cjs');
+
+var styles = {
+  overlay: function overlay(props) {
+    return [{
+      position: "musaex-10l6tqk",
+      inset: "musaex-10a8y8t",
+      insetInline: null,
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      left: null,
+      right: null,
+      insetBlock: null,
+      top: null,
+      bottom: null,
+      mixBlendMode: "musaex-1dzd4em",
+      backgroundColor: "musaex-q1mx2j",
+      zIndex: "musaex-3s5p5",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+    }];
+  },
+  tour: function tour(props) {
+    return [{
+      backgroundColor: "musaex-q1mx2j",
+      boxShadow: "musaex-1bhjvst",
+      borderRadius: "musaex-ok3b7d",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      transition: "musaex-1ng1d19",
+      transitionBehavior: null,
+      transitionDelay: null,
+      transitionDuration: null,
+      transitionProperty: null,
+      transitionTimingFunction: null,
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+    }];
+  },
+  title: {
+    paddingInline: "musaex-y0sash",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingTop: "musaex-3v2l2l",
+    paddingBottom: "musaex-igxgg9",
+    $$css: true
+  },
+  description: {
+    paddingInline: "musaex-y0sash",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    $$css: true
+  }
+};
+var Tour = function Tour(_ref) {
+  var _ref$steps = _ref.steps,
+    steps = _ref$steps === void 0 ? [] : _ref$steps,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    onClose = _ref.onClose,
+    _ref$overlay = _ref.overlay,
+    overlay = _ref$overlay === void 0 ? true : _ref$overlay,
+    _ref$spotlightPadding = _ref.spotlightPadding,
+    spotlightPadding = _ref$spotlightPadding === void 0 ? 8 : _ref$spotlightPadding;
+  var theme$1 = hooks.useTheme();
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Tour);
+  var _useStep = hooks$1.useStep({
+      steps: steps,
+      open: open
+    }),
+    step = _useStep.step,
+    next = _useStep.next,
+    prev = _useStep.prev,
+    hasNext = _useStep.hasNext,
+    hasPrev = _useStep.hasPrev;
+  var paddings = useGutters.useGutters({
+    gutter: spotlightPadding
+  });
+  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Tour),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  var styled = {
+    overlay: stylex.default.props(styles.overlay({
+      backgroundColor: theme$1.colors[colors.ColorToken.SurfaceDim]
+    })),
+    tour: stylex.default.props(styles.tour({
+      backgroundColor: theme$1.colors[colors.ColorToken.OnPrimary]
+    })),
+    title: stylex.default.props(styles.title, theme.typography.title.medium),
+    description: stylex.default.props(styles.description, theme.typography.body.medium),
+    footer: {
+      className: "musaex-y0sash musaex-1vgzror musaex-1e84bdi"
+    }
+  };
+  /// close handler
+  var close = function close() {
+    onClose === null || onClose === void 0 || onClose();
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(portal.default, {
+    open: overlay && open,
+    destroyable: true,
+    lockable: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TourClassToken.Overlay], styled.overlay.className),
+    style: styled.overlay.style
+  }, /*#__PURE__*/React.createElement(spotlight.default, {
+    trigger: step.target,
+    padding: paddings
+  }))), /*#__PURE__*/React.createElement(popper.default, {
+    trigger: step.target,
+    open: open,
+    className: relax.clsx(classNames[className.TourClassToken.Tour], styled.tour.className),
+    style: styled.tour.style,
+    offset: paddings[0],
+    placement: "bottom",
+    overlay: overlay,
+    destroyable: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TourClassToken.Title], styled.title.className),
+    style: styled.title.style
+  }, step.title), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TourClassToken.Description], styled.description.className),
+    style: styled.description.style
+  }, step.description), /*#__PURE__*/React.createElement(space.default, {
+    gutter: 6,
+    className: relax.clsx(classNames[className.TourClassToken.Footer], styled.footer.className),
+    style: styled.footer.style
+  }, hasPrev && (/*#__PURE__*/React.createElement(button.Button, {
+    onClick: prev,
+    size: "small"
+  }, locale.prev)), hasNext && (/*#__PURE__*/React.createElement(button.Button, {
+    onClick: next,
+    size: "small"
+  }, locale.next)), !hasNext && (/*#__PURE__*/React.createElement(button.Button, {
+    onClick: close,
+    size: "small"
+  }, locale.finish)))));
+};
+
+exports.default = Tour;

package/dist/components/tour/tour.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TourProps } from "./types";
+import type { TourProps } from "musae/types/tour";
 declare const Tour: ({ steps, open, onClose, overlay, spotlightPadding, }: TourProps) => React.JSX.Element;
 export default Tour;

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

@@ -1,21 +1,21 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React from 'react';
-import Portal from '../portal/portal.js';
-import Popper from '../popper/popper.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import Button from '../button/button.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import Space from '../space/space.js';
-import { typography } from '../theme/theme.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TourClassToken } from '../../utils/class-name.js';
+import Portal from '../portal/portal.mjs';
+import Popper from '../popper/popper.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { Button } from '../button/button.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import Space from '../space/space.mjs';
+import { typography } from '../theme/theme.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TourClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { useStep } from './hooks.js';
-import Spotlight from './spotlight.js';
-import { useGutters } from '../../hooks/use-gutters.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import { useLocale } from '../../locale/use-locale.js';
+import { useStep } from './hooks.mjs';
+import Spotlight from './spotlight.mjs';
+import { useGutters } from '../../hooks/use-gutters.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
 
 var styles = {
   overlay: function overlay(props) {
@@ -165,6 +165,5 @@ var Tour = function Tour(_ref) {
     size: "small"
   }, locale.finish)))));
 };
-var Tour$1 = Tour;
 
-export { Tour$1 as default };
+export { Tour as default };

package/dist/components/transfer/context.cjs

@@ -0,0 +1,11 @@
+var React = require('react');
+
+/**
+ * @description
+ * transfer context
+ */
+var Context = /*#__PURE__*/React.createContext({
+  disabled: false
+});
+
+exports.Context = Context;

package/dist/components/transfer/hooks.cjs

@@ -0,0 +1,72 @@
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+
+/**
+ * @description
+ * options
+ */
+var useTransfer = function useTransfer(props) {
+  var _useControlledState = relax.useControlledState(props.value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    value = _useControlledState2[0],
+    setValue = _useControlledState2[1];
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    transferKeys = _useState2[0],
+    setTransferKeys = _useState2[1];
+  var _useState3 = React.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    untransferKeys = _useState4[0],
+    setUntransferKeys = _useState4[1];
+  var options = React.useMemo(function () {
+    return props.options.reduce(function (prev, item) {
+      return prev.set(item.value, item);
+    }, new Map());
+  }, [props.options]);
+  var _useMemo = React.useMemo(function () {
+      return (value !== null && value !== void 0 ? value : []).reduce(function (_ref, key) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          transferred = _ref2[0],
+          untransferred = _ref2[1];
+        if (untransferred.has(key)) {
+          transferred.set(key, untransferred.get(key));
+          untransferred["delete"](key);
+        }
+        return [transferred, untransferred];
+      }, [new Map(), new Map(options)]);
+    }, [options, value]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    transferred = _useMemo2[0],
+    untransferred = _useMemo2[1];
+  var transfer = React.useCallback(function () {
+    setValue(function () {
+      var prev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      return [].concat(_toConsumableArray(prev), _toConsumableArray(transferKeys));
+    });
+    setTransferKeys([]);
+  }, [transferKeys, setValue]);
+  var untransfer = React.useCallback(function () {
+    setValue(function () {
+      var prev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      return Array.from(untransferKeys.reduce(function (checkedKeys, unchecked) {
+        checkedKeys["delete"](unchecked);
+        return checkedKeys;
+      }, new Set(prev)));
+    });
+    setUntransferKeys([]);
+  }, [untransferKeys, setValue]);
+  return {
+    transferred: transferred,
+    untransferred: untransferred,
+    transfer: transfer,
+    untransfer: untransfer,
+    transferKeys: transferKeys,
+    untransferKeys: untransferKeys,
+    setTransferKeys: setTransferKeys,
+    setUntransferKeys: setUntransferKeys
+  };
+};
+
+exports.useTransfer = useTransfer;

package/dist/components/transfer/item.cjs

@@ -0,0 +1,27 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../checkbox/index.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var componentToken = require('../../utils/component-token.cjs');
+
+var Item = function Item(_ref) {
+  var value = _ref.value,
+    label = _ref.label;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Transfer);
+  var styled = {
+    item: {
+      className: "musaex-78zum5 musaex-6s0dn4 musaex-1dhq86w musaex-1i37kmv musaex-1lsrmdg"
+    }
+  };
+  return /*#__PURE__*/React.createElement("li", {
+    className: relax.clsx(classNames[className.TransferClassToken.Item], styled.item.className),
+    style: styled.item.style
+  }, /*#__PURE__*/React.createElement(index.Checkbox, {
+    value: value
+  }), label);
+};
+
+exports.default = Item;

package/dist/components/transfer/{item.js → item.mjs}

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Checkbox } from '../checkbox/index.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TransferClassToken } from '../../utils/class-name.js';
+import { Checkbox } from '../checkbox/index.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TransferClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.js';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var Item = function Item(_ref) {
   var value = _ref.value,

package/dist/components/transfer/list.cjs

@@ -0,0 +1,132 @@
+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 hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var item = require('./item.cjs');
+var index = require('../checkbox/index.cjs');
+var context = require('./context.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var theme = require('../theme/theme.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var useLocale = require('../../locale/use-locale.cjs');
+
+var styles = {
+  list: function list(props) {
+    return [{
+      width: "musaex-1doc0eo",
+      height: "musaex-h22aca",
+      borderWidth: "musaex-bupo1m",
+      borderInlineWidth: null,
+      borderInlineStartWidth: null,
+      borderLeftWidth: null,
+      borderInlineEndWidth: null,
+      borderRightWidth: null,
+      borderBlockWidth: null,
+      borderTopWidth: null,
+      borderBottomWidth: null,
+      borderColor: "musaex-eqt46j",
+      borderInlineColor: null,
+      borderInlineStartColor: null,
+      borderLeftColor: null,
+      borderInlineEndColor: null,
+      borderRightColor: null,
+      borderBlockColor: null,
+      borderTopColor: null,
+      borderBottomColor: null,
+      borderStyle: "musaex-1y0btm7",
+      borderInlineStyle: null,
+      borderInlineStartStyle: null,
+      borderLeftStyle: null,
+      borderInlineEndStyle: null,
+      borderRightStyle: null,
+      borderBlockStyle: null,
+      borderTopStyle: null,
+      borderBottomStyle: null,
+      borderRadius: "musaex-qwu505",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      $$css: true
+    }, {
+      "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+    }];
+  },
+  header: function header(props) {
+    return [{
+      display: "musaex-78zum5",
+      alignItems: "musaex-6s0dn4",
+      paddingBlock: "musaex-15v7278",
+      paddingTop: null,
+      paddingBottom: null,
+      paddingInline: "musaex-1dhq86w",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      borderBottomWidth: "musaex-cql0v9",
+      borderBottomColor: "musaex-43481e",
+      borderBottomStyle: "musaex-1q0q8m5",
+      $$css: true
+    }, {
+      "--borderBottomColor": props.outlineColor != null ? props.outlineColor : "initial"
+    }];
+  }
+};
+var List = function List(_ref) {
+  var options = _ref.options,
+    title = _ref.title,
+    onChange = _ref.onChange,
+    value = _ref.value;
+  var theme$1 = hooks.useTheme();
+  var _useContext = React.useContext(context.Context),
+    disabled = _useContext.disabled;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Transfer);
+  var styled = {
+    list: stylex.default.props(styles.list({
+      outlineColor: theme$1.colors[colors.ColorToken.Outline]
+    })),
+    header: stylex.default.props(styles.header({
+      outlineColor: theme$1.colors[colors.ColorToken.Outline]
+    }), theme.typography.body.medium),
+    title: {
+      className: "musaex-b3r6kr musaex-p4054r musaex-1isitws"
+    }
+  };
+  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Transfer),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TransferClassToken.List], styled.list.className),
+    style: styled.list.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TransferClassToken.Header], styled.header.className),
+    style: styled.header.style
+  }, /*#__PURE__*/React.createElement("span", null, options.length, locale.unit), /*#__PURE__*/React.createElement("span", {
+    className: relax.clsx(classNames[className.TransferClassToken.Title], styled.title.className),
+    style: styled.title.style
+  }, title)), /*#__PURE__*/React.createElement(index.Checkbox.Group, {
+    value: value,
+    onChange: onChange,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: classNames[className.TransferClassToken.Body]
+  }, options.map(function (option) {
+    return /*#__PURE__*/React.createElement(item.default, {
+      key: option.value,
+      label: option.label,
+      value: option.value
+    });
+  }))));
+};
+
+exports.default = List;

package/dist/components/transfer/{list.js → list.mjs}

@@ -1,17 +1,17 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useContext } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import Item from './item.js';
-import { Checkbox } from '../checkbox/index.js';
-import { Context } from './context.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TransferClassToken } from '../../utils/class-name.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import Item from './item.mjs';
+import { Checkbox } from '../checkbox/index.mjs';
+import { Context } from './context.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TransferClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { typography } from '../theme/theme.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import { useLocale } from '../../locale/use-locale.js';
+import { typography } from '../theme/theme.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
 
 var styles = {
   list: function list(props) {