musae 0.3.1 → 0.3.3

package/dist/components/pagination/item.cjs

@@ -1,7 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var types = require('./types.cjs');
 var button = require('../button/button.cjs');
 var keyboardArrowLeft = require('../icon/icons/hardware/keyboard-arrow-left.cjs');
 var keyboardArrowRight = require('../icon/icons/hardware/keyboard-arrow-right.cjs');
@@ -11,13 +10,13 @@ var keyboardDoubleArrowRight = require('../icon/icons/hardware/keyboard-double-a
 
 var Item = function Item(_ref) {
   var value = _ref.value,
-    onPageChange = _ref.onPageChange,
+    _onClick = _ref.onClick,
     add = _ref.add,
     subtract = _ref.subtract,
     checked = _ref.checked,
     hasNext = _ref.hasNext,
     hasPrev = _ref.hasPrev;
-  if (value === types.PaginationItemType.Prev) {
+  if (value === "prev") {
     return /*#__PURE__*/React.createElement(button.Button, {
       onClick: function onClick() {
         return subtract();
@@ -28,7 +27,7 @@ var Item = function Item(_ref) {
       disabled: !hasPrev
     }, /*#__PURE__*/React.createElement(keyboardArrowLeft.default, null));
   }
-  if (value === types.PaginationItemType.Next) {
+  if (value === "next") {
     return /*#__PURE__*/React.createElement(button.Button, {
       onClick: function onClick() {
         return add();
@@ -39,13 +38,14 @@ var Item = function Item(_ref) {
       disabled: !hasNext
     }, /*#__PURE__*/React.createElement(keyboardArrowRight.default, null));
   }
-  if (value === types.PaginationItemType.MorePrev || value === types.PaginationItemType.MoreNext) {
+  var isMorePrev = value === "more-prev";
+  var isMoreNext = value === "more-next";
+  if (isMorePrev || isMoreNext) {
     var styled = {
       more: {
         className: "musaex-1aldg33 musaex-1oew0n0"
       }
     };
-    var isNegative = value === types.PaginationItemType.MorePrev;
     return /*#__PURE__*/React.createElement(button.Button, {
       shape: "circular",
       variant: "text",
@@ -53,11 +53,11 @@ var Item = function Item(_ref) {
       className: styled.more.className,
       style: styled.more.style,
       onClick: function onClick() {
-        isNegative ? subtract(5) : add(5);
+        isMorePrev ? subtract(5) : add(5);
       }
     }, /*#__PURE__*/React.createElement(moreHoriz.default, {
       role: "separator"
-    }), /*#__PURE__*/React.createElement(isNegative ? keyboardDoubleArrowLeft.default : keyboardDoubleArrowRight.default, {
+    }), /*#__PURE__*/React.createElement(isMorePrev ? keyboardDoubleArrowLeft.default : keyboardDoubleArrowRight.default, {
       role: "button"
     }));
   }
@@ -66,7 +66,7 @@ var Item = function Item(_ref) {
     color: checked ? "primary" : "secondary",
     variant: checked ? "filled" : "text",
     onClick: function onClick() {
-      onPageChange(value);
+      _onClick(value);
     }
   }, value);
 };

package/dist/components/pagination/item.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { type PaginationItemProps } from "./types";
-declare const Item: ({ value, onPageChange, add, subtract, checked, hasNext, hasPrev }: PaginationItemProps) => React.JSX.Element;
+import type { PaginationItemProps } from "musae/types/pagination";
+declare const Item: ({ value, onClick, add, subtract, checked, hasNext, hasPrev, }: PaginationItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/pagination/item.mjs

@@ -1,5 +1,4 @@
 import React, { createElement } from 'react';
-import { PaginationItemType } from './types.mjs';
 import { Button } from '../button/button.mjs';
 import KeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.mjs';
 import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.mjs';
@@ -9,13 +8,13 @@ import KeyboardDoubleArrowRight from '../icon/icons/hardware/keyboard-double-arr
 
 var Item = function Item(_ref) {
   var value = _ref.value,
-    onPageChange = _ref.onPageChange,
+    _onClick = _ref.onClick,
     add = _ref.add,
     subtract = _ref.subtract,
     checked = _ref.checked,
     hasNext = _ref.hasNext,
     hasPrev = _ref.hasPrev;
-  if (value === PaginationItemType.Prev) {
+  if (value === "prev") {
     return /*#__PURE__*/React.createElement(Button, {
       onClick: function onClick() {
         return subtract();
@@ -26,7 +25,7 @@ var Item = function Item(_ref) {
       disabled: !hasPrev
     }, /*#__PURE__*/React.createElement(KeyboardArrowLeft, null));
   }
-  if (value === PaginationItemType.Next) {
+  if (value === "next") {
     return /*#__PURE__*/React.createElement(Button, {
       onClick: function onClick() {
         return add();
@@ -37,13 +36,14 @@ var Item = function Item(_ref) {
       disabled: !hasNext
     }, /*#__PURE__*/React.createElement(KeyboardArrowRight, null));
   }
-  if (value === PaginationItemType.MorePrev || value === PaginationItemType.MoreNext) {
+  var isMorePrev = value === "more-prev";
+  var isMoreNext = value === "more-next";
+  if (isMorePrev || isMoreNext) {
     var styled = {
       more: {
         className: "musaex-1aldg33 musaex-1oew0n0"
       }
     };
-    var isNegative = value === PaginationItemType.MorePrev;
     return /*#__PURE__*/React.createElement(Button, {
       shape: "circular",
       variant: "text",
@@ -51,11 +51,11 @@ var Item = function Item(_ref) {
       className: styled.more.className,
       style: styled.more.style,
       onClick: function onClick() {
-        isNegative ? subtract(5) : add(5);
+        isMorePrev ? subtract(5) : add(5);
       }
     }, /*#__PURE__*/React.createElement(MoreHoriz, {
       role: "separator"
-    }), /*#__PURE__*/createElement(isNegative ? KeyboardDoubleArrowLeft : KeyboardDoubleArrowRight, {
+    }), /*#__PURE__*/createElement(isMorePrev ? KeyboardDoubleArrowLeft : KeyboardDoubleArrowRight, {
       role: "button"
     }));
   }
@@ -64,7 +64,7 @@ var Item = function Item(_ref) {
     color: checked ? "primary" : "secondary",
     variant: checked ? "filled" : "text",
     onClick: function onClick() {
-      onPageChange(value);
+      _onClick(value);
     }
   }, value);
 };

package/dist/components/pagination/pagination.cjs

@@ -20,18 +20,28 @@ var Pagination = function Pagination(_ref) {
     boundaries = _ref$boundaries === void 0 ? 1 : _ref$boundaries,
     _pageSize = _ref.pageSize,
     _ref$pageSizes = _ref.pageSizes,
-    pageSizes = _ref$pageSizes === void 0 ? [10, 20, 50, 100] : _ref$pageSizes;
+    pageSizes = _ref$pageSizes === void 0 ? [10, 20, 50, 100] : _ref$pageSizes,
+    _at = _ref.at,
+    _onChange = _ref.onChange,
+    _onPageSizeChange = _ref.onPageSizeChange;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Pagination);
+  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Pagination),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
   var _usePagiantion = hooks.usePagiantion({
       boundaries: boundaries,
       pageSize: _pageSize,
       siblings: siblings,
-      total: total
+      total: total,
+      at: _at,
+      onChange: _onChange,
+      onPageSizeChange: _onPageSizeChange
     }),
     paginationItems = _usePagiantion.paginationItems,
     add = _usePagiantion.add,
     subtract = _usePagiantion.subtract,
-    changePage = _usePagiantion.changePage,
-    page = _usePagiantion.page,
+    onChange = _usePagiantion.onChange,
+    at = _usePagiantion.at,
     hasNext = _usePagiantion.hasNext,
     hasPrev = _usePagiantion.hasPrev,
     pageSize = _usePagiantion.pageSize,
@@ -44,10 +54,6 @@ var Pagination = function Pagination(_ref) {
       className: "musaex-78zum5 musaex-6s0dn4"
     }
   };
-  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Pagination);
-  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Pagination),
-    _useLocale2 = _slicedToArray(_useLocale, 1),
-    locale = _useLocale2[0];
   var sizeOptions = React.useMemo(function () {
     return Array.from(new Set(pageSizes)).map(function (size) {
       return {
@@ -69,8 +75,8 @@ var Pagination = function Pagination(_ref) {
       value: item$1,
       add: add,
       subtract: subtract,
-      onPageChange: changePage,
-      checked: page === item$1,
+      onClick: onChange,
+      checked: at === item$1,
       hasNext: hasNext,
       hasPrev: hasPrev
     }));

package/dist/components/pagination/pagination.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { PagiantionProps } from "./types";
-declare const Pagination: ({ total, siblings, boundaries, pageSize: _pageSize, pageSizes, }: PagiantionProps) => React.JSX.Element;
+import type { PagiantionProps } from "musae/types/pagination";
+declare const Pagination: ({ total, siblings, boundaries, pageSize: _pageSize, pageSizes, at: _at, onChange: _onChange, onPageSizeChange: _onPageSizeChange, }: PagiantionProps) => React.JSX.Element;
 export default Pagination;

package/dist/components/pagination/pagination.mjs

@@ -18,18 +18,28 @@ var Pagination = function Pagination(_ref) {
     boundaries = _ref$boundaries === void 0 ? 1 : _ref$boundaries,
     _pageSize = _ref.pageSize,
     _ref$pageSizes = _ref.pageSizes,
-    pageSizes = _ref$pageSizes === void 0 ? [10, 20, 50, 100] : _ref$pageSizes;
+    pageSizes = _ref$pageSizes === void 0 ? [10, 20, 50, 100] : _ref$pageSizes,
+    _at = _ref.at,
+    _onChange = _ref.onChange,
+    _onPageSizeChange = _ref.onPageSizeChange;
+  var classNames = useClassNames(ComponentToken.Pagination);
+  var _useLocale = useLocale(ComponentToken.Pagination),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
   var _usePagiantion = usePagiantion({
       boundaries: boundaries,
       pageSize: _pageSize,
       siblings: siblings,
-      total: total
+      total: total,
+      at: _at,
+      onChange: _onChange,
+      onPageSizeChange: _onPageSizeChange
     }),
     paginationItems = _usePagiantion.paginationItems,
     add = _usePagiantion.add,
     subtract = _usePagiantion.subtract,
-    changePage = _usePagiantion.changePage,
-    page = _usePagiantion.page,
+    onChange = _usePagiantion.onChange,
+    at = _usePagiantion.at,
     hasNext = _usePagiantion.hasNext,
     hasPrev = _usePagiantion.hasPrev,
     pageSize = _usePagiantion.pageSize,
@@ -42,10 +52,6 @@ var Pagination = function Pagination(_ref) {
       className: "musaex-78zum5 musaex-6s0dn4"
     }
   };
-  var classNames = useClassNames(ComponentToken.Pagination);
-  var _useLocale = useLocale(ComponentToken.Pagination),
-    _useLocale2 = _slicedToArray(_useLocale, 1),
-    locale = _useLocale2[0];
   var sizeOptions = useMemo(function () {
     return Array.from(new Set(pageSizes)).map(function (size) {
       return {
@@ -67,8 +73,8 @@ var Pagination = function Pagination(_ref) {
       value: item,
       add: add,
       subtract: subtract,
-      onPageChange: changePage,
-      checked: page === item,
+      onClick: onChange,
+      checked: at === item,
       hasNext: hasNext,
       hasPrev: hasPrev
     }));

package/dist/components/picker/context.d.ts

@@ -1,2 +1,2 @@
-import { ContextValue } from "../../types/picker";
+import type { ContextValue } from "musae/types/picker";
 export declare const Context: import("react").Context<ContextValue>;

package/dist/components/picker/picker.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { PickerProps, PickerRef } from "../../types/picker";
+import type { PickerProps, PickerRef } from "musae/types/picker";
 declare const Picker: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<PickerRef>>;
 export default Picker;

package/dist/components/popconfirm/popconfirm.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { PopconfirmProps, ChildProps } from "./types";
+import type { PopconfirmProps, ChildProps } from "musae/types/popconfirm";
 declare const Popconfirm: <P extends ChildProps<T>, T extends HTMLElement>({ content, title, onConfirm, onCancel, className, placement, children: _children, style, }: PopconfirmProps<P, T>) => React.JSX.Element;
 export default Popconfirm;

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

@@ -1,4 +1,4 @@
-import { type PopperRef } from "../popper";
+import type { PopperRef } from "musae/types/popper";
 type UsedIsOpen = [
     boolean,
     {

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

@@ -1,4 +1,4 @@
 import Popover from "./popover";
-import type { PopoverProps, PopoverRef } from "./types";
+import type { PopoverProps, PopoverRef } from "musae/types/popover";
 export { Popover };
 export type { PopoverProps, PopoverRef };

package/dist/components/popover/popover.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ChildProps, PopoverRef } from "./types";
+import type { ChildProps, PopoverRef } from "musae/types/popover";
 declare const Popover: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & {
     children: React.ReactElement<ChildProps<HTMLElement>, string | React.JSXElementConstructor<any>>;
     title?: React.ReactNode;

package/dist/components/popper/dropdown.cjs

@@ -35,9 +35,6 @@ var styles = {
         borderTopRightRadius: null,
         borderBottomLeftRadius: null,
         borderBottomRightRadius: null,
-        overflow: "musaex-ysyzu8",
-        overflowX: null,
-        overflowY: null,
         willChange: "musaex-19wnzia",
         $$css: true
       }, {

package/dist/components/popper/dropdown.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import type { PopperRef } from "./types";
-declare const Dropdown: React.ForwardRefExoticComponent<Omit<import("./types").PopperProps, "container" | "placement" | "portal"> & {
+import type { PopperRef } from "musae/types/popper";
+declare const Dropdown: React.ForwardRefExoticComponent<Omit<import("musae/types/popper").PopperProps, "container" | "placement" | "portal"> & {
     placement: import("@floating-ui/dom").Placement;
 } & React.RefAttributes<PopperRef>>;
 export default Dropdown;

package/dist/components/popper/dropdown.mjs

@@ -33,9 +33,6 @@ var styles = {
         borderTopRightRadius: null,
         borderBottomLeftRadius: null,
         borderBottomRightRadius: null,
-        overflow: "musaex-ysyzu8",
-        overflowX: null,
-        overflowY: null,
         willChange: "musaex-19wnzia",
         $$css: true
       }, {

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

@@ -1,4 +1,4 @@
-import type { DropdownProps, PopperProps } from "./types";
+import type { DropdownProps, PopperProps } from "musae/types/popper";
 /**
  * @description
  * offset converter

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

@@ -1,4 +1,2 @@
 import Popper from "./popper";
-import type { PopperRef } from "./types";
 export { Popper };
-export type { PopperRef };

package/dist/components/popper/popper.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { PopperProps, PopperRef } from "./types";
+import type { PopperProps, PopperRef } from "musae/types/popper";
 declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<PopperRef>>;
 export default Popper;

package/dist/components/portal/portal.d.ts

@@ -1,4 +1,4 @@
-import type { PortalProps } from "./types";
+import type { PortalProps } from "musae/types/portal";
 import { type FC } from "react";
 declare const Portal: FC<PortalProps>;
 export default Portal;

package/dist/components/progress/circular.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { CircularProps } from "./types";
+import { CircularProps } from "musae/types/progress";
 declare const Circular: ({ value: _value, className, style }: CircularProps) => React.JSX.Element;
 export default Circular;

package/dist/components/progress/linear.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { LinearProps } from "./types";
+import type { LinearProps } from "musae/types/progress";
 declare const Linear: ({ value: _value, className, style }: LinearProps) => React.JSX.Element;
 export default Linear;

package/dist/components/progress/progress.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { ProgressProps } from "./types";
+import type { ProgressProps } from "musae/types/progress";
 declare const Progress: ({ variant, value }: ProgressProps) => React.JSX.Element;
 export default Progress;

package/dist/components/quote/quote.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { QuoteProps } from "./types";
+import { QuoteProps } from "musae/types/quote";
 declare const Quote: ({ className, children, style }: QuoteProps) => React.JSX.Element;
 export default Quote;

package/dist/components/radio/context.d.ts

@@ -1,3 +1,3 @@
-import type { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/radio";
 declare const Context: import("react").Context<ContextValue | null>;
 export default Context;

package/dist/components/radio/group.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { RadioGroupProps } from "./types";
+import type { RadioGroupProps } from "musae/types/radio";
 declare const Group: ({ disabled, children, ...props }: RadioGroupProps) => React.JSX.Element;
 export default Group;

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

@@ -1,2 +1,2 @@
-import type { TypedRadio } from "./types";
+import type { TypedRadio } from "musae/types/radio";
 export declare const Radio: TypedRadio;

package/dist/components/radio/radio.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { RadioProps } from "./types";
+import type { RadioProps } from "musae/types/radio";
 declare const Radio: ({ children, value, checked, disabled, ...props }: RadioProps) => React.JSX.Element;
 export default Radio;

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

@@ -1,4 +1,4 @@
-import type { RateProps } from "./types";
+import type { RateProps } from "musae/types/rate";
 /**
  * @description
  * value hooks

package/dist/components/rate/rate.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { RateProps } from "./types";
+import type { RateProps } from "musae/types/rate";
 declare const Rate: ({ count, className, style, halfable, disabled, ...props }: RateProps) => React.JSX.Element;
 export default Rate;

package/dist/components/rate/star.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { StarProps } from "./types";
+import type { StarProps } from "musae/types/rate";
 declare const Star: ({ disabled, value, onEnter, at, onLeave, onClick }: StarProps) => React.JSX.Element;
 export default Star;

package/dist/components/rich-text-editor/dropdown.cjs

@@ -61,7 +61,7 @@ var Dropdown = function Dropdown(_ref) {
     return /*#__PURE__*/React.createElement(menu.default, {
       items: items,
       onClick: onClick,
-      selectedKeys: relax.toArray(value)
+      selectedKeys: value
     });
   }, [items, onClick, value]);
   return /*#__PURE__*/React.createElement(popover.default, {

package/dist/components/rich-text-editor/dropdown.d.ts

@@ -1,4 +1,4 @@
 import React, { type Key } from "react";
-import { DropdownProps } from "../../types/rich-text-editor";
+import type { DropdownProps } from "musae/types/rich-text-editor";
 declare const Dropdown: <T extends Key = React.Key>({ items: _items, value: _value, onChange, children, }: DropdownProps<T>) => React.JSX.Element;
 export default Dropdown;

package/dist/components/rich-text-editor/dropdown.mjs

@@ -59,7 +59,7 @@ var Dropdown = function Dropdown(_ref) {
     return /*#__PURE__*/React.createElement(Menu, {
       items: items,
       onClick: onClick,
-      selectedKeys: toArray(value)
+      selectedKeys: value
     });
   }, [items, onClick, value]);
   return /*#__PURE__*/React.createElement(Popover, {

package/dist/components/rich-text-editor/index.cjs

@@ -1,13 +1,31 @@
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
+var skeleton = require('../skeleton/skeleton.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var relax = require('@aiszlab/relax');
+var className = require('../../utils/class-name.cjs');
 
+var _excluded = ["className"];
 var _RichTextEditor = /*#__PURE__*/React.lazy(function () {
   return Promise.resolve().then(function () { return require('./rich-text-editor.cjs'); });
 });
-var RichTextEditor = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className$1 = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var styled = {
+    className: "musaex-h22aca musaex-1k094eu musaex-qwu505"
+  };
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.RichTextEditor);
   return /*#__PURE__*/React.createElement(React.Suspense, {
-    fallback: /*#__PURE__*/React.createElement("div", null, "Loading...")
+    fallback: /*#__PURE__*/React.createElement(skeleton.default, {
+      animation: true,
+      className: relax.clsx(classNames[className.RichTextEditorClassToken.Loading], styled.className),
+      style: styled.style
+    })
   }, /*#__PURE__*/React.createElement(_RichTextEditor, _objectSpread(_objectSpread({}, props), {}, {
+    className: relax.clsx(classNames[className.RichTextEditorClassToken.RichTextEditor], className$1),
     ref: ref
   })));
 });

package/dist/components/rich-text-editor/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { RichTextEditorRef } from "musae/types/rich-text-editor";
-declare const RichTextEditor: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "aria-placeholder"> & {
+declare const RichTextEditor: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "aria-placeholder"> & import("../../types/element").ComponentProps & {
     placeholder?: import("@lexical/react/LexicalContentEditable").Props["placeholder"];
     disabled?: boolean;
     defaultValue?: string;

package/dist/components/rich-text-editor/index.mjs

@@ -1,13 +1,31 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef, Suspense, createElement, lazy } from 'react';
+import Skeleton from '../skeleton/skeleton.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import { clsx } from '@aiszlab/relax';
+import { RichTextEditorClassToken } from '../../utils/class-name.mjs';
 
+var _excluded = ["className"];
 var _RichTextEditor = /*#__PURE__*/lazy(function () {
   return import('./rich-text-editor.mjs');
 });
-var RichTextEditor = /*#__PURE__*/forwardRef(function (props, ref) {
+var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var styled = {
+    className: "musaex-h22aca musaex-1k094eu musaex-qwu505"
+  };
+  var classNames = useClassNames(ComponentToken.RichTextEditor);
   return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: /*#__PURE__*/React.createElement("div", null, "Loading...")
+    fallback: /*#__PURE__*/React.createElement(Skeleton, {
+      animation: true,
+      className: clsx(classNames[RichTextEditorClassToken.Loading], styled.className),
+      style: styled.style
+    })
   }, /*#__PURE__*/createElement(_RichTextEditor, _objectSpread(_objectSpread({}, props), {}, {
+    className: clsx(classNames[RichTextEditorClassToken.RichTextEditor], className),
     ref: ref
   })));
 });

package/dist/components/rich-text-editor/plugins/controlled-state/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { Use } from "../../../../types/rich-text-editor";
+import type { Use } from "musae/types/rich-text-editor";
 interface Props {
     value?: string;
     onChange?: (value: string) => void;

package/dist/components/rich-text-editor/rich-text-editor.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
@@ -31,7 +32,7 @@ require('../checkbox/index.cjs');
 var markdown = require('@lexical/markdown');
 var styles$1 = require('../checkbox/styles.cjs');
 
-var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value"];
+var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value", "className", "style"];
 var styles = {
   shell: function shell(props) {
     return [{
@@ -81,7 +82,9 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     defaultValue = _ref.defaultValue,
     onChange = _ref.onChange;
     _ref.value;
-    var props = _objectWithoutProperties(_ref, _excluded);
+    var className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useIdentity = relax.useIdentity(),
     _useIdentity2 = _slicedToArray(_useIdentity, 1),
     id = _useIdentity2[0];
@@ -105,7 +108,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       codeBackgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainerHighest]
     })),
     editor: {
-      className: "musaex-1a2a7pz musaex-y0sash musaex-1vgzror musaex-igxgg9 musaex-1y06zzy"
+      className: "musaex-1a2a7pz musaex-y0sash musaex-1vgzror musaex-igxgg9 musaex-ktxt4i"
     },
     h1: stylex.default.props(theme.typography.display.large),
     h2: stylex.default.props(theme.typography.display.medium),
@@ -195,8 +198,8 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(LexicalComposer.LexicalComposer, {
     initialConfig: initialConfig
   }, /*#__PURE__*/React.createElement("div", {
-    className: styled.shell.className,
-    style: styled.shell.style
+    className: relax.clsx(className, styled.shell.className),
+    style: _objectSpread(_objectSpread({}, styled.shell.style), style)
   }, !disabled && /*#__PURE__*/React.createElement(index$1.default, null), /*#__PURE__*/React.createElement(LexicalRichTextPlugin.RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(LexicalContentEditable.ContentEditable, {
       className: styled.editor.className,

package/dist/components/rich-text-editor/rich-text-editor.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { RichTextEditorRef } from "musae/types/rich-text-editor";
-declare const RichTextEditor: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "aria-placeholder"> & {
+declare const RichTextEditor: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "aria-placeholder"> & import("../../types/element").ComponentProps & {
     placeholder?: import("@lexical/react/LexicalContentEditable").Props["placeholder"];
     disabled?: boolean;
     defaultValue?: string;