musae 0.2.26 → 0.3.0

package/dist/components/time-picker/panel.cjs

@@ -0,0 +1,105 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var clock = require('../clock/clock.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var button = require('../button/button.cjs');
+var dayjs = require('dayjs');
+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 relax = require('@aiszlab/relax');
+var componentToken = require('../../utils/component-token.cjs');
+var useLocale = require('../../locale/use-locale.cjs');
+
+var styles = {
+  footer: function footer(props) {
+    return [{
+      borderTopWidth: "musaex-1el86qz",
+      borderTopStyle: "musaex-13fuv20",
+      borderTopColor: "musaex-is9nib",
+      display: "musaex-78zum5",
+      justifyContent: "musaex-1qughib",
+      alignItems: "musaex-6s0dn4",
+      paddingBlock: "musaex-1i37kmv",
+      paddingTop: null,
+      paddingBottom: null,
+      paddingInline: "musaex-1dhq86w",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      minHeight: "musaex-1p0x9m9",
+      $$css: true
+    }, {
+      "--borderTopColor": props.borderTopColor != null ? props.borderTopColor : "initial"
+    }];
+  }
+};
+var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.TimePicker);
+  var _useState = React.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var theme = hooks.useTheme();
+  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.TimePicker),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  React.useImperativeHandle(ref, function () {
+    return {
+      reset: function reset() {
+        if (!props.value) {
+          setValue(void 0);
+          return;
+        }
+        setValue([props.value.hour(), props.value.minute(), props.value.second()]);
+      }
+    };
+  });
+  var change = React.useCallback(function (value) {
+    setValue(value);
+  }, []);
+  var confirm = React.useCallback(function () {
+    var _props$onChange;
+    if (!value) return;
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, dayjs().hour(value[0]).minute(value[1]).second(value[2]));
+  }, [props, value]);
+  var reset = React.useCallback(function () {
+    var currentAt = dayjs();
+    setValue([currentAt.hour(), currentAt.minute(), currentAt.second()]);
+  }, []);
+  var styled = {
+    panel: {
+      className: "musaex-j3hrbk"
+    },
+    footer: stylex.default.props(styles.footer({
+      borderTopColor: theme.colors[colors.ColorToken.OutlineVariant]
+    }))
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TimePickerClassToken.Panel], styled.panel.className),
+    style: styled.panel.style
+  }, /*#__PURE__*/React.createElement(clock.default, {
+    value: value,
+    onChange: change
+  }), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TimePickerClassToken.PanelFooter], styled.footer.className),
+    style: styled.footer.style
+  }, /*#__PURE__*/React.createElement(button.Button, {
+    variant: "text",
+    size: "small",
+    color: "secondary",
+    onClick: reset
+  }, locale.now), /*#__PURE__*/React.createElement(button.Button, {
+    variant: "text",
+    size: "small",
+    color: "primary",
+    onClick: confirm,
+    disabled: !value
+  }, locale.confirm)));
+});
+
+exports.default = Panel;

package/dist/components/time-picker/{panel.js → panel.mjs}

@@ -1,16 +1,16 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { forwardRef, useState, useImperativeHandle, useCallback } from 'react';
-import Clock from '../clock/clock.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TimePickerClassToken } from '../../utils/class-name.js';
-import Button from '../button/button.js';
+import Clock from '../clock/clock.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TimePickerClassToken } from '../../utils/class-name.mjs';
+import { Button } from '../button/button.mjs';
 import dayjs from 'dayjs';
-import { props } 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 _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 { clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.js';
-import { useLocale } from '../../locale/use-locale.js';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
 
 var styles = {
   footer: function footer(props) {
@@ -36,7 +36,7 @@ var styles = {
     }];
   }
 };
-var Panel = /*#__PURE__*/forwardRef(function (props$1, ref) {
+var Panel = /*#__PURE__*/forwardRef(function (props, ref) {
   var classNames = useClassNames(ComponentToken.TimePicker);
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -49,11 +49,11 @@ var Panel = /*#__PURE__*/forwardRef(function (props$1, ref) {
   useImperativeHandle(ref, function () {
     return {
       reset: function reset() {
-        if (!props$1.value) {
+        if (!props.value) {
           setValue(void 0);
           return;
         }
-        setValue([props$1.value.hour(), props$1.value.minute(), props$1.value.second()]);
+        setValue([props.value.hour(), props.value.minute(), props.value.second()]);
       }
     };
   });
@@ -63,8 +63,8 @@ var Panel = /*#__PURE__*/forwardRef(function (props$1, ref) {
   var confirm = useCallback(function () {
     var _props$onChange;
     if (!value) return;
-    (_props$onChange = props$1.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props$1, dayjs().hour(value[0]).minute(value[1]).second(value[2]));
-  }, [props$1, value]);
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, dayjs().hour(value[0]).minute(value[1]).second(value[2]));
+  }, [props, value]);
   var reset = useCallback(function () {
     var currentAt = dayjs();
     setValue([currentAt.hour(), currentAt.minute(), currentAt.second()]);
@@ -73,7 +73,7 @@ var Panel = /*#__PURE__*/forwardRef(function (props$1, ref) {
     panel: {
       className: "musaex-j3hrbk"
     },
-    footer: props(styles.footer({
+    footer: _stylex.props(styles.footer({
       borderTopColor: theme.colors[ColorToken.OutlineVariant]
     }))
   };

package/dist/components/time-picker/time-picker.cjs

@@ -0,0 +1,64 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var picker = require('../picker/picker.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var panel = require('./panel.cjs');
+var hooks = require('./hooks.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var relax = require('@aiszlab/relax');
+var input = require('../input/input.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var _excluded = ["className"];
+var TimePicker = function TimePicker(_ref) {
+  var className$1 = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.TimePicker);
+  var pickerRef = React.useRef(null);
+  var panelRef = React.useRef(null);
+  var _useValue = hooks.useValue([props.value, pickerRef]),
+    value = _useValue.value,
+    onChange = _useValue.onChange;
+  /// picked date
+  var picked = React.useMemo(function () {
+    var _stylex$props = stylex.default.props(input.styles.input),
+      className$1 = _stylex$props.className,
+      style = _stylex$props.style;
+    return /*#__PURE__*/React.createElement("input", {
+      className: relax.clsx(classNames[className.TimePickerClassToken.Input], className$1),
+      style: style,
+      value: value.format("HH:mm:ss"),
+      readOnly: true
+    });
+  }, [value, classNames]);
+  var popperEntered = relax.useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _panelRef$current;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 || _panelRef$current.reset();
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  return /*#__PURE__*/React.createElement(picker.default, {
+    ref: pickerRef,
+    className: relax.clsx(classNames[className.TimePickerClassToken.Picker], className$1),
+    pickable: /*#__PURE__*/React.createElement(panel.default, {
+      value: value,
+      onChange: onChange,
+      ref: panelRef
+    }),
+    popupWidth: false,
+    onPopperEntered: popperEntered
+  }, picked);
+};
+
+exports.default = TimePicker;

package/dist/components/time-picker/{time-picker.js → time-picker.mjs}

@@ -2,29 +2,29 @@ import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useRef, useMemo } from 'react';
-import Picker from '../picker/picker.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TimePickerClassToken } from '../../utils/class-name.js';
-import Panel from './panel.js';
-import { useValue } from './hooks.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import Picker from '../picker/picker.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TimePickerClassToken } from '../../utils/class-name.mjs';
+import Panel from './panel.mjs';
+import { useValue } from './hooks.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { clsx, useEvent } from '@aiszlab/relax';
-import { styles } from '../input/input.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { styles } from '../input/input.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var _excluded = ["className"];
 var TimePicker = function TimePicker(_ref) {
   var className = _ref.className,
-    props$1 = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames(ComponentToken.TimePicker);
   var pickerRef = useRef(null);
   var panelRef = useRef(null);
-  var _useValue = useValue([props$1.value, pickerRef]),
+  var _useValue = useValue([props.value, pickerRef]),
     value = _useValue.value,
     onChange = _useValue.onChange;
   /// picked date
   var picked = useMemo(function () {
-    var _stylex$props = props(styles.input),
+    var _stylex$props = _stylex.props(styles.input),
       className = _stylex$props.className,
       style = _stylex$props.style;
     return /*#__PURE__*/React.createElement("input", {
@@ -58,6 +58,5 @@ var TimePicker = function TimePicker(_ref) {
     onPopperEntered: popperEntered
   }, picked);
 };
-var TimePicker$1 = TimePicker;
 
-export { TimePicker$1 as default };
+export { TimePicker as default };

package/dist/components/time-picker/types.d.ts

@@ -1,5 +1,5 @@
 import type { Dayjs } from "dayjs";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 /**
  * @description
  * time picker props

package/dist/components/timeline/context.cjs

@@ -0,0 +1,8 @@
+var React = require('react');
+
+var Context = /*#__PURE__*/React.createContext({
+  mode: "right",
+  max: 0
+});
+
+exports.Context = Context;

package/dist/components/timeline/item.cjs

@@ -0,0 +1,220 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var context = require('./context.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  item: {
+    "default": {
+      display: "musaex-rvj5dj",
+      justifyContent: "musaex-1nhvcw1",
+      gap: "musaex-1cnimdh",
+      rowGap: null,
+      columnGap: null,
+      overflow: "musaex-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      paddingBottom: "musaex-1feqyr7",
+      $$css: true
+    },
+    right: {
+      gridTemplateColumns: "musaex-1pmbctz",
+      gridTemplateAreas: "musaex-znaemz",
+      $$css: true
+    },
+    left: {
+      gridTemplateColumns: "musaex-52fmzj",
+      gridTemplateAreas: "musaex-196jfb2",
+      $$css: true
+    }
+  },
+  labeled: {
+    "default": {
+      gridTemplateColumns: "musaex-134kloy",
+      $$css: true
+    },
+    right: {
+      gridTemplateAreas: "musaex-1y7mvjm",
+      $$css: true
+    },
+    left: {
+      gridTemplateAreas: "musaex-hurxv4",
+      $$css: true
+    }
+  },
+  leading: {
+    "default": {
+      gridArea: "musaex-1kxrqrs",
+      gridRow: null,
+      gridRowStart: null,
+      gridRowEnd: null,
+      gridColumn: null,
+      gridColumnStart: null,
+      gridColumnEnd: null,
+      alignSelf: "musaex-qcrz7y",
+      $$css: true
+    },
+    tail: function tail(props) {
+      return [{
+        position: "musaex-1n2onr6",
+        "::after_content": "musaex-1s928wv",
+        "::after_position": "musaex-1j6awrg",
+        "::after_height": "musaex-1pqslh",
+        "::after_width": "musaex-1nvgkt6",
+        "::after_backgroundColor": "musaex-27d4w3",
+        "::after_top": "musaex-1srwf7z",
+        "::after_insetInlineStart": "musaex-mjsi9j",
+        "::after_left": null,
+        "::after_right": null,
+        $$css: true
+      }, {
+        "--15iyedw": props.color != null ? props.color : "initial"
+      }];
+    }
+  },
+  sign: {
+    "default": function _default(props) {
+      var _props$size, _props$size2;
+      return [{
+        display: "musaex-78zum5",
+        justifyContent: "musaex-l56j7k",
+        alignItems: "musaex-6s0dn4",
+        width: "musaex-17fnjtu",
+        height: "musaex-1jwls1v",
+        $$css: true
+      }, {
+        "--width": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }((_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : tokens_stylex.sizes.xsmall),
+        "--height": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }((_props$size2 = props.size) !== null && _props$size2 !== void 0 ? _props$size2 : tokens_stylex.sizes.xsmall)
+      }];
+    }
+  },
+  dot: {
+    "default": function _default(props) {
+      return [{
+        width: "musaex-ohro5l",
+        height: "musaex-lbog1g",
+        borderRadius: "musaex-z7qqyb",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        backgroundColor: "musaex-q1mx2j",
+        $$css: true
+      }, {
+        "--backgroundColor": props.color != null ? props.color : "initial"
+      }];
+    }
+  },
+  label: {
+    "default": {
+      gridArea: "musaex-xwd7sb",
+      gridRow: null,
+      gridRowStart: null,
+      gridRowEnd: null,
+      gridColumn: null,
+      gridColumnStart: null,
+      gridColumnEnd: null,
+      $$css: true
+    },
+    right: {
+      justifySelf: "musaex-15bdqvn",
+      $$css: true
+    },
+    left: {
+      justifySelf: "musaex-wldb3t",
+      $$css: true
+    }
+  },
+  description: {
+    "default": {
+      gridArea: "musaex-19tbii3",
+      gridRow: null,
+      gridRowStart: null,
+      gridRowEnd: null,
+      gridColumn: null,
+      gridColumnStart: null,
+      gridColumnEnd: null,
+      $$css: true
+    },
+    right: {
+      justifySelf: "musaex-wldb3t",
+      $$css: true
+    },
+    left: {
+      justifySelf: "musaex-15bdqvn",
+      $$css: true
+    }
+  }
+};
+var Item = function Item(_ref) {
+  var description = _ref.description,
+    label = _ref.label,
+    value = _ref.value,
+    dot = _ref.dot;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Timeline);
+  var _useContext = React.useContext(context.Context),
+    _mode = _useContext.mode,
+    max = _useContext.max,
+    size = _useContext.size;
+  var theme = hooks.useTheme();
+  var isLabeled = !!label;
+  var isMax = max === value;
+  // convert alternate mode to normal mode
+  var mode = React.useMemo(function () {
+    if (_mode === "alternate") {
+      return value % 2 === 1 ? "right" : "left";
+    }
+    return _mode;
+  }, [_mode, value]);
+  var styled = {
+    item: stylex.default.props(styles.item["default"], styles.item[mode], isLabeled && styles.labeled["default"], isLabeled && styles.labeled[mode]),
+    label: stylex.default.props(styles.label["default"], styles.label[mode]),
+    leading: stylex.default.props(styles.leading["default"], !isMax && styles.leading.tail({
+      color: theme.colors[colors.ColorToken.Primary]
+    })),
+    sign: stylex.default.props(styles.sign["default"]({
+      size: size
+    })),
+    dot: stylex.default.props(styles.dot["default"]({
+      color: theme.colors[colors.ColorToken.Primary]
+    })),
+    description: stylex.default.props(styles.description["default"], styles.description[mode])
+  };
+  return /*#__PURE__*/React.createElement("li", {
+    className: relax.clsx(classNames[className.TimelineClassToken.Item], styled.item.className),
+    style: styled.item.style
+  }, isLabeled && (/*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TimelineClassToken.Label], styled.label.className),
+    style: styled.label.style
+  }, label)), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TimelineClassToken.Leading], styled.leading.className),
+    style: styled.leading.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TimelineClassToken.Sign], styled.sign.className),
+    style: styled.sign.style
+  }, dot !== null && dot !== void 0 ? dot : (/*#__PURE__*/React.createElement("span", {
+    className: relax.clsx(classNames[className.TimelineClassToken.Dot], styled.dot.className),
+    style: styled.dot.style
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TimelineClassToken.Description], styled.description.className),
+    style: styled.description.style
+  }, description));
+};
+
+exports.default = Item;

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

@@ -1,13 +1,13 @@
 import React, { useContext, useMemo } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { Context } from './context.js';
-import { sizes } from '../theme/tokens.stylex.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TimelineClassToken } 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 { Context } from './context.mjs';
+import { sizes } from '../theme/tokens.stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TimelineClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   item: {

package/dist/components/timeline/timeline.cjs

@@ -0,0 +1,44 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var item = require('./item.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 componentToken = require('../../utils/component-token.cjs');
+
+var Timeline = function Timeline(_ref) {
+  var items = _ref.items,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "right" : _ref$mode,
+    size = _ref.size;
+  var styled = {
+    className: "musaex-78zum5 musaex-dt5ytf"
+  };
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Timeline);
+  var total = items.length;
+  var contextValue = React.useMemo(function () {
+    return {
+      mode: mode,
+      max: total - 1,
+      size: size
+    };
+  }, [mode, total, size]);
+  return /*#__PURE__*/React.createElement(context.Context.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("ol", {
+    className: relax.clsx(classNames[className.TimelineClassToken.Timeline], styled.className),
+    style: styled.style
+  }, items.map(function (item$1, index) {
+    return /*#__PURE__*/React.createElement(item.default, {
+      key: index,
+      value: index,
+      label: item$1.label,
+      description: item$1.description,
+      dot: item$1.dot
+    });
+  })));
+};
+
+exports.default = Timeline;

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

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
-import Item from './item.js';
-import { Context } from './context.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TimelineClassToken } from '../../utils/class-name.js';
+import Item from './item.mjs';
+import { Context } from './context.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TimelineClassToken } 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 Timeline = function Timeline(_ref) {
   var items = _ref.items,
@@ -38,6 +38,5 @@ var Timeline = function Timeline(_ref) {
     });
   })));
 };
-var Timeline$1 = Timeline;
 
-export { Timeline$1 as default };
+export { Timeline as default };

package/dist/components/tooltip/tooltip.cjs

@@ -0,0 +1,24 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var popover = require('../popover/popover.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 Tooltip = function Tooltip(_ref) {
+  var children = _ref.children,
+    className$1 = _ref.className,
+    style = _ref.style,
+    title = _ref.title;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Tooltip);
+  // `Tooltip` title is used into `Popover` content!!! not a bug!
+  return /*#__PURE__*/React.createElement(popover.default, {
+    content: title,
+    className: relax.clsx(classNames[className.TooltipClassToken.Tooltip], className$1),
+    style: style
+  }, children);
+};
+
+exports.default = Tooltip;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import Popover from '../popover/popover.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TooltipClassToken } from '../../utils/class-name.js';
+import Popover from '../popover/popover.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TooltipClassToken } 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 Tooltip = function Tooltip(_ref) {
   var children = _ref.children,
@@ -18,6 +18,5 @@ var Tooltip = function Tooltip(_ref) {
     style: style
   }, children);
 };
-var Tooltip$1 = Tooltip;
 
-export { Tooltip$1 as default };
+export { Tooltip as default };

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

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from "react";
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 /**
  * @description
  * tooltip props