musae 0.4.2 → 0.5.0

package/dist/components/avatar/avatar.cjs

@@ -12,7 +12,7 @@ var theme = require('../theme/theme.cjs');
 var relax = require('@aiszlab/relax');
 var skeleton = require('../skeleton/skeleton.cjs');
 
-var _excluded = ["src", "alt", "shape", "size", "className", "style"];
+var _excluded = ["src", "alt", "shape", "size", "className", "style", "crossOrigin", "referrerPolicy"];
 var styles = {
   avatar: function avatar(props) {
     return [{
@@ -72,7 +72,7 @@ var styles = {
   },
   overlapping: function overlapping(props) {
     return [{
-      ":not(:first-child)_marginInlineStart": "musaex-3d5u6r",
+      ":not(:first-child)_marginInlineStart": "musaex-1bx1b4w",
       ":not(:first-child)_marginLeft": null,
       ":not(:first-child)_marginRight": null,
       borderColor: "musaex-eqt46j",
@@ -143,6 +143,8 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _size = _ref$size === void 0 ? "medium" : _ref$size,
     className$1 = _ref.className,
     style = _ref.style,
+    crossOrigin = _ref.crossOrigin,
+    referrerPolicy = _ref.referrerPolicy,
     props = _objectWithoutProperties(_ref, _excluded);
   var theme$1 = hooks.useTheme();
   var group = React.useContext(context.Context);
@@ -151,7 +153,9 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var shape = (_group$shape = group === null || group === void 0 ? void 0 : group.shape) !== null && _group$shape !== void 0 ? _group$shape : _shape;
   var classNames = useClassNames.useClassNames("avatar");
   var loadStatus = relax.useImageLoader({
-    src: src
+    src: src,
+    crossOrigin: crossOrigin,
+    referrerPolicy: referrerPolicy
   });
   var styled = {
     avatar: stylex.default.props(theme.typography.label[size], styles.avatar({
@@ -178,7 +182,9 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     src: src,
     alt: alt,
     className: styled.image.className,
-    style: styled.image.style
+    style: styled.image.style,
+    crossOrigin: crossOrigin,
+    referrerPolicy: referrerPolicy
   })), loadStatus !== "loaded" && (alt === null || alt === void 0 ? void 0 : alt.slice(0, 2).toUpperCase()));
 });
 

package/dist/components/avatar/avatar.d.ts

@@ -3,7 +3,7 @@ import React from "react";
  * @description
  * `Avatar`
  */
-declare const Avatar: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & {
+declare const Avatar: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & Pick<import("../../types/image").ImageProps, "crossOrigin" | "referrerPolicy"> & {
     src?: string;
     alt?: string;
     size?: "small" | "medium" | "large";

package/dist/components/avatar/avatar.mjs

@@ -10,7 +10,7 @@ import { typography } from '../theme/theme.mjs';
 import { useImageLoader, clsx } from '@aiszlab/relax';
 import Skeleton from '../skeleton/skeleton.mjs';
 
-var _excluded = ["src", "alt", "shape", "size", "className", "style"];
+var _excluded = ["src", "alt", "shape", "size", "className", "style", "crossOrigin", "referrerPolicy"];
 var styles = {
   avatar: function avatar(props) {
     return [{
@@ -70,7 +70,7 @@ var styles = {
   },
   overlapping: function overlapping(props) {
     return [{
-      ":not(:first-child)_marginInlineStart": "musaex-3d5u6r",
+      ":not(:first-child)_marginInlineStart": "musaex-1bx1b4w",
       ":not(:first-child)_marginLeft": null,
       ":not(:first-child)_marginRight": null,
       borderColor: "musaex-eqt46j",
@@ -141,6 +141,8 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _size = _ref$size === void 0 ? "medium" : _ref$size,
     className = _ref.className,
     style = _ref.style,
+    crossOrigin = _ref.crossOrigin,
+    referrerPolicy = _ref.referrerPolicy,
     props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var group = useContext(Context);
@@ -149,7 +151,9 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var shape = (_group$shape = group === null || group === void 0 ? void 0 : group.shape) !== null && _group$shape !== void 0 ? _group$shape : _shape;
   var classNames = useClassNames("avatar");
   var loadStatus = useImageLoader({
-    src: src
+    src: src,
+    crossOrigin: crossOrigin,
+    referrerPolicy: referrerPolicy
   });
   var styled = {
     avatar: _stylex.props(typography.label[size], styles.avatar({
@@ -176,7 +180,9 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     src: src,
     alt: alt,
     className: styled.image.className,
-    style: styled.image.style
+    style: styled.image.style,
+    crossOrigin: crossOrigin,
+    referrerPolicy: referrerPolicy
   })), loadStatus !== "loaded" && (alt === null || alt === void 0 ? void 0 : alt.slice(0, 2).toUpperCase()));
 });
 

package/dist/components/bench/bench.cjs

@@ -36,7 +36,7 @@ var styles = {
         paddingLeft: null,
         paddingEnd: null,
         paddingRight: null,
-        paddingBottom: "musaex-igxgg9",
+        paddingBottom: "musaex-z1jy5j",
         position: "musaex-7wzq59",
         height: "musaex-bmf846",
         top: "musaex-98oeat",
@@ -53,7 +53,7 @@ var styles = {
   header: {
     "default": function _default(props) {
       return [{
-        gap: "musaex-1lsrmdg",
+        gap: "musaex-4ttznp",
         rowGap: null,
         columnGap: null,
         boxShadow: "musaex-igitpm",

package/dist/components/bench/bench.mjs

@@ -34,7 +34,7 @@ var styles = {
         paddingLeft: null,
         paddingEnd: null,
         paddingRight: null,
-        paddingBottom: "musaex-igxgg9",
+        paddingBottom: "musaex-z1jy5j",
         position: "musaex-7wzq59",
         height: "musaex-bmf846",
         top: "musaex-98oeat",
@@ -51,7 +51,7 @@ var styles = {
   header: {
     "default": function _default(props) {
       return [{
-        gap: "musaex-1lsrmdg",
+        gap: "musaex-4ttznp",
         rowGap: null,
         columnGap: null,
         boxShadow: "musaex-igitpm",

package/dist/components/breadcrumb/item.cjs

@@ -19,7 +19,7 @@ var styles = {
     },
     link: function link(props) {
       return [{
-        paddingInline: "musaex-5pwv2j",
+        paddingInline: "musaex-1fpq7td",
         paddingStart: null,
         paddingLeft: null,
         paddingEnd: null,
@@ -46,7 +46,7 @@ var styles = {
   },
   separator: {
     "default": {
-      marginInline: "musaex-1sn0kb9",
+      marginInline: "musaex-f4wbcg",
       marginInlineStart: null,
       marginLeft: null,
       marginInlineEnd: null,

package/dist/components/breadcrumb/item.mjs

@@ -17,7 +17,7 @@ var styles = {
     },
     link: function link(props) {
       return [{
-        paddingInline: "musaex-5pwv2j",
+        paddingInline: "musaex-1fpq7td",
         paddingStart: null,
         paddingLeft: null,
         paddingEnd: null,
@@ -44,7 +44,7 @@ var styles = {
   },
   separator: {
     "default": {
-      marginInline: "musaex-1sn0kb9",
+      marginInline: "musaex-f4wbcg",
       marginInlineStart: null,
       marginLeft: null,
       marginInlineEnd: null,

package/dist/components/button/button.cjs

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var className = require('../../utils/class-name.cjs');
 var relax = require('@aiszlab/relax');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var tokens_stylex = require('../theme/tokens.stylex.cjs');
@@ -11,8 +10,9 @@ var hooks = require('../theme/hooks.cjs');
 var hooks$1 = require('./hooks.cjs');
 var ripple = require('../ripple/ripple.cjs');
 var theme = require('../theme/theme.cjs');
-var useClassNames = require('../../hooks/use-class-names.cjs');
 var color = require('@aiszlab/fuzzy/color');
+var useClassNames_component = require('../../hooks/use-class-names.component.cjs');
+var context = require('./context.cjs');
 
 var _excluded = ["children", "className", "style", "color", "size", "variant", "shape", "disabled", "ripple", "type", "onClick", "prefix", "suffix"];
 var styles = {
@@ -20,7 +20,7 @@ var styles = {
     display: "musaex-3nfvp2",
     alignItems: "musaex-6s0dn4",
     justifyContent: "musaex-l56j7k",
-    gap: "musaex-1lsrmdg",
+    gap: "musaex-4ttznp",
     rowGap: null,
     columnGap: null,
     transitionProperty: "musaex-fagghw",
@@ -43,6 +43,7 @@ var styles = {
     textOverflow: "musaex-lyipyv",
     cursor: "musaex-1ypdohk",
     fontFamily: "musaex-jb2p0i",
+    boxSizing: "musaex-9f619",
     $$css: true
   },
   ripple: {
@@ -50,16 +51,14 @@ var styles = {
     $$css: true
   },
   small: {
-    paddingBlock: "musaex-133qg4p",
+    paddingBlock: "musaex-pne1ww",
     paddingTop: null,
     paddingBottom: null,
-    paddingInline: "musaex-n18ftv",
+    paddingInline: "musaex-nd81q0",
     paddingStart: null,
     paddingLeft: null,
     paddingEnd: null,
     paddingRight: null,
-    minHeight: "musaex-1ite1z3",
-    minWidth: "musaex-8pi1lr",
     $$css: true
   },
   medium: {
@@ -71,44 +70,6 @@ var styles = {
     paddingLeft: null,
     paddingEnd: null,
     paddingRight: null,
-    minHeight: "musaex-1p0x9m9",
-    minWidth: "musaex-qt0gpg",
-    $$css: true
-  },
-  large: {
-    paddingBlock: "musaex-qhkzqn",
-    paddingTop: null,
-    paddingBottom: null,
-    paddingInline: "musaex-1mavw9y",
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    minHeight: "musaex-1fdzm4i",
-    minWidth: "musaex-sffz45",
-    $$css: true
-  },
-  circular: {
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    padding: null,
-    paddingInline: null,
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
-    aspectRatio: "musaex-1plog1",
-    justifyContent: "musaex-l56j7k",
     $$css: true
   },
   rounded: {
@@ -121,7 +82,6 @@ var styles = {
     borderTopRightRadius: null,
     borderBottomLeftRadius: null,
     borderBottomRightRadius: null,
-    minWidth: null,
     $$css: true
   },
   filled: function filled(props) {
@@ -224,7 +184,7 @@ var styles = {
  */
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-    className$1 = _ref.className,
+    className = _ref.className,
     style = _ref.style,
     _ref$color = _ref.color,
     color$1 = _ref$color === void 0 ? "primary" : _ref$color,
@@ -244,7 +204,6 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     prefix = _ref.prefix,
     suffix = _ref.suffix,
     props = _objectWithoutProperties(_ref, _excluded);
-  var classNames = useClassNames.useClassNames("button");
   var theme$1 = hooks.useTheme();
   var _useButton = hooks$1.useButton({
       onClick: _onClick
@@ -252,8 +211,9 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick = _useButton.onClick,
     clear = _useButton.clear,
     ripples = _useButton.ripples;
+  var classNames = useClassNames_component.useClassNames(context.CLASS_NAMES);
   var styled = {
-    button: stylex.default.props(styles.button, ripple$1 && styles.ripple, theme.typography.label[size],
+    button: stylex.default.props(styles.button, ripple$1 && styles.ripple,
     // size
     styles[size],
     // variant
@@ -274,13 +234,15 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       backgroundColor: variant === "filled" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.medium, "style") : "transparent",
       color: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, "style"),
       outlineColor: variant === "outlined" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, "style") : null
-    }))
+    }),
+    // text font
+    size === "small" && theme.typography.label.medium, size !== "small" && theme.typography.label.large)
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({
     onClick: onClick,
     ref: ref,
     disabled: disabled,
-    className: relax.clsx(classNames[className.ButtonClassToken.Button], className$1, styled.button.className),
+    className: relax.clsx(classNames.button, className, styled.button.className),
     style: _objectSpread(_objectSpread({}, styled.button.style), style),
     type: type
   }, props), prefix, children, suffix, ripple$1 && /*#__PURE__*/React.createElement(ripple.default, {
@@ -291,3 +253,4 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 exports.Button = Button;
 exports.default = Button;
+exports.styles = styles;

package/dist/components/button/button.d.ts

@@ -1,5 +1,81 @@
 import type { ButtonProps } from "musae/types/button";
 import React from "react";
+declare const styles: Readonly<{
+    readonly button: Readonly<{
+        readonly display: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly gap: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"gap", string>;
+        readonly transitionProperty: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"transitionProperty", "all">;
+        readonly transitionDuration: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"transitionDuration", "0.3s">;
+        readonly willChange: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"willChange", "background-color, color, box-shadow">;
+        readonly borderWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderWidth", string>;
+        readonly backgroundColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly overflow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"overflow", "hidden">;
+        readonly whiteSpace: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"whiteSpace", "nowrap">;
+        readonly textOverflow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"textOverflow", "ellipsis">;
+        readonly cursor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+        readonly fontFamily: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontFamily", "inherit">;
+        readonly boxSizing: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"boxSizing", "border-box">;
+    }>;
+    readonly ripple: Readonly<{
+        readonly position: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"position", "relative">;
+    }>;
+    readonly small: Readonly<{
+        readonly paddingBlock: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly medium: Readonly<{
+        readonly paddingBlock: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly rounded: Readonly<{
+        readonly borderRadius: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly filled: (props: {
+        backgroundColor: string;
+        color: string;
+    }) => readonly [Readonly<{
+        borderWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderWidth", string>;
+        backgroundColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", string>;
+        ":hover": import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<":hover", {
+            boxShadow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        }>;
+    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
+    readonly outlined: (props: {
+        color: string;
+        hoveredBackgroundColor: string;
+    }) => readonly [Readonly<{
+        borderWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderWidth", string>;
+        borderStyle: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderStyle", "solid">;
+        borderColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderColor", string>;
+        color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", string>;
+        ":hover": import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<":hover", {
+            backgroundColor: string;
+        }>;
+    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
+    readonly text: (props: {
+        color: string;
+        hoveredBackgroundColor: string;
+    }) => readonly [Readonly<{
+        color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", string>;
+        ":hover": import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<":hover", {
+            backgroundColor: string;
+        }>;
+    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
+    readonly disabled: (props: {
+        color: string;
+        backgroundColor: string;
+        outlineColor: string | null;
+    }) => readonly [Readonly<{
+        backgroundColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", string>;
+        cursor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"cursor", "not-allowed">;
+        boxShadow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"boxShadow", null>;
+        borderColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderColor", string | null>;
+    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
+}>;
 /**
  * @author murukal
  *
@@ -9,3 +85,4 @@ import React from "react";
  */
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;
+export { styles };

package/dist/components/button/button.mjs

@@ -1,7 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef } from 'react';
-import { ButtonClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
@@ -9,8 +8,9 @@ import { useTheme } from '../theme/hooks.mjs';
 import { useButton } from './hooks.mjs';
 import Ripple from '../ripple/ripple.mjs';
 import { typography } from '../theme/theme.mjs';
-import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { hexToRgba } from '@aiszlab/fuzzy/color';
+import { useClassNames } from '../../hooks/use-class-names.component.mjs';
+import { CLASS_NAMES } from './context.mjs';
 
 var _excluded = ["children", "className", "style", "color", "size", "variant", "shape", "disabled", "ripple", "type", "onClick", "prefix", "suffix"];
 var styles = {
@@ -18,7 +18,7 @@ var styles = {
     display: "musaex-3nfvp2",
     alignItems: "musaex-6s0dn4",
     justifyContent: "musaex-l56j7k",
-    gap: "musaex-1lsrmdg",
+    gap: "musaex-4ttznp",
     rowGap: null,
     columnGap: null,
     transitionProperty: "musaex-fagghw",
@@ -41,6 +41,7 @@ var styles = {
     textOverflow: "musaex-lyipyv",
     cursor: "musaex-1ypdohk",
     fontFamily: "musaex-jb2p0i",
+    boxSizing: "musaex-9f619",
     $$css: true
   },
   ripple: {
@@ -48,16 +49,14 @@ var styles = {
     $$css: true
   },
   small: {
-    paddingBlock: "musaex-133qg4p",
+    paddingBlock: "musaex-pne1ww",
     paddingTop: null,
     paddingBottom: null,
-    paddingInline: "musaex-n18ftv",
+    paddingInline: "musaex-nd81q0",
     paddingStart: null,
     paddingLeft: null,
     paddingEnd: null,
     paddingRight: null,
-    minHeight: "musaex-1ite1z3",
-    minWidth: "musaex-8pi1lr",
     $$css: true
   },
   medium: {
@@ -69,44 +68,6 @@ var styles = {
     paddingLeft: null,
     paddingEnd: null,
     paddingRight: null,
-    minHeight: "musaex-1p0x9m9",
-    minWidth: "musaex-qt0gpg",
-    $$css: true
-  },
-  large: {
-    paddingBlock: "musaex-qhkzqn",
-    paddingTop: null,
-    paddingBottom: null,
-    paddingInline: "musaex-1mavw9y",
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    minHeight: "musaex-1fdzm4i",
-    minWidth: "musaex-sffz45",
-    $$css: true
-  },
-  circular: {
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    padding: null,
-    paddingInline: null,
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
-    aspectRatio: "musaex-1plog1",
-    justifyContent: "musaex-l56j7k",
     $$css: true
   },
   rounded: {
@@ -119,7 +80,6 @@ var styles = {
     borderTopRightRadius: null,
     borderBottomLeftRadius: null,
     borderBottomRightRadius: null,
-    minWidth: null,
     $$css: true
   },
   filled: function filled(props) {
@@ -242,7 +202,6 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     prefix = _ref.prefix,
     suffix = _ref.suffix,
     props = _objectWithoutProperties(_ref, _excluded);
-  var classNames = useClassNames("button");
   var theme = useTheme();
   var _useButton = useButton({
       onClick: _onClick
@@ -250,8 +209,9 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick = _useButton.onClick,
     clear = _useButton.clear,
     ripples = _useButton.ripples;
+  var classNames = useClassNames(CLASS_NAMES);
   var styled = {
-    button: _stylex.props(styles.button, ripple && styles.ripple, typography.label[size],
+    button: _stylex.props(styles.button, ripple && styles.ripple,
     // size
     styles[size],
     // variant
@@ -272,13 +232,15 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       backgroundColor: variant === "filled" ? hexToRgba(theme.colors["on-surface"], OPACITY.medium, "style") : "transparent",
       color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, "style"),
       outlineColor: variant === "outlined" ? hexToRgba(theme.colors["on-surface"], OPACITY.thicker, "style") : null
-    }))
+    }),
+    // text font
+    size === "small" && typography.label.medium, size !== "small" && typography.label.large)
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({
     onClick: onClick,
     ref: ref,
     disabled: disabled,
-    className: clsx(classNames[ButtonClassToken.Button], className, styled.button.className),
+    className: clsx(classNames.button, className, styled.button.className),
     style: _objectSpread(_objectSpread({}, styled.button.style), style),
     type: type
   }, props), prefix, children, suffix, ripple && /*#__PURE__*/React.createElement(Ripple, {
@@ -287,4 +249,4 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-export { Button, Button as default };
+export { Button, Button as default, styles };

package/dist/components/button/context.cjs

@@ -0,0 +1,10 @@
+/**
+ * @description
+ * class names
+ */
+var CLASS_NAMES = {
+  button: "button",
+  leading: "button__leading"
+};
+
+exports.CLASS_NAMES = CLASS_NAMES;

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

@@ -0,0 +1,9 @@
+/**
+ * @description
+ * class names
+ */
+declare const CLASS_NAMES: {
+    button: string;
+    leading: string;
+};
+export { CLASS_NAMES };

package/dist/components/button/context.mjs

@@ -0,0 +1,10 @@
+/**
+ * @description
+ * class names
+ */
+var CLASS_NAMES = {
+  button: "button",
+  leading: "button__leading"
+};
+
+export { CLASS_NAMES };

package/dist/components/button/hooks.cjs

@@ -1,4 +1,3 @@
-var React = require('react');
 var relax = require('@aiszlab/relax');
 var hooks = require('../ripple/hooks.cjs');
 
@@ -6,17 +5,19 @@ var hooks = require('../ripple/hooks.cjs');
  * @description
  * hooks for button component
  */
-var useButton = function useButton(props) {
+var useButton = function useButton(_ref) {
+  var click = _ref.onClick;
   var _useRipple = hooks.useRipple(),
     ripples = _useRipple.ripples,
     add = _useRipple.add,
     clear = _useRipple.clear;
-  var ripple = React.useCallback(function (e) {
-    add(e);
-  }, [add]);
+  var onClick = relax.useEvent(function (event) {
+    click === null || click === void 0 || click(event);
+    add(event);
+  });
   return {
     ripples: ripples,
-    onClick: relax.chain(props.onClick, ripple),
+    onClick: onClick,
     clear: clear
   };
 };

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

@@ -4,8 +4,8 @@ import type { ButtonProps } from "musae/types/button";
  * @description
  * hooks for button component
  */
-export declare const useButton: (props: Pick<ButtonProps, "onClick">) => {
+export declare const useButton: ({ onClick: click }: Pick<ButtonProps, "onClick">) => {
     ripples: import("../../types/ripple").Ripple[];
-    onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
     clear: (key: import("react").Key) => void;
 };