musae 0.2.16 → 0.2.17

package/dist/__test__/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/avatar/avatar.js

@@ -6,10 +6,11 @@ import { Context } from './context.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
+import { AvatarClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 import { useImageLoader } from '@aiszlab/relax';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var _excluded = ["src", "alt", "shape", "size"];
 var styles = {

package/dist/components/avatar/group.js

@@ -2,10 +2,11 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useMemo, Children, cloneElement } from 'react';
 import { Context } from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
+import { AvatarClassToken } from '../../utils/class-name.js';
 import Popover from '../popover/popover.js';
 import Avatar from './avatar.js';
 import clsx from 'clsx';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var _Group = function Group(_ref) {
   var _children = _ref.children,
@@ -39,7 +40,7 @@ var _Group = function Group(_ref) {
     // got hidden nodes, show ellipse node
     if (hidden.length > 0) {
       visible.push( /*#__PURE__*/React.createElement(Popover, {
-        description: /*#__PURE__*/React.createElement(_Group, {
+        content: /*#__PURE__*/React.createElement(_Group, {
           max: Infinity
         }, hidden),
         key: "avatars-hidden",

package/dist/components/badge/badge.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { BadgeProps } from "./types";
-declare const Badge: ({ className, style, children, content, invisible, placement }: BadgeProps) => React.JSX.Element;
+declare const Badge: ({ className, style, children, content, invisible, placement, }: BadgeProps) => React.JSX.Element;
 export default Badge;

package/dist/components/badge/badge.js

@@ -1,7 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, BadgeClassToken } from '../../utils/class-name.js';
+import { BadgeClassToken } from '../../utils/class-name.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
@@ -9,6 +9,7 @@ import { sizes } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { isVoid } from '@aiszlab/relax';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   badge: {

package/dist/components/breadcrumb/breadcrumb.js

@@ -5,9 +5,10 @@ import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, BreadcrumbClassToken } from '../../utils/class-name.js';
+import { BreadcrumbClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 import Item from './item.js';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   breadcrumb: function breadcrumb(props) {

package/dist/components/breadcrumb/item.js

@@ -3,8 +3,9 @@ import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_module
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, BreadcrumbClassToken } from '../../utils/class-name.js';
+import { BreadcrumbClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   navigation: {

package/dist/components/button/button.js

@@ -1,7 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef } from 'react';
-import { ComponentToken, ButtonClassToken } from '../../utils/class-name.js';
+import { ButtonClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 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';
@@ -11,6 +11,7 @@ import { typography } from '../theme/theme.js';
 import { ColorToken } from '../../utils/colors.js';
 import { layer } from '../../utils/layer.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var _excluded = ["children", "className", "style", "color", "size", "variant", "shape", "disabled", "ripple", "type", "onClick", "prefix", "suffix"];
 var styles = {

package/dist/components/calendar/calendar.js

@@ -2,13 +2,14 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { useValue, useFocusedAt, useDateCells, useHeadCells } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
+import { CalendarClassToken } from '../../utils/class-name.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
 import Button from '../button/button.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
+import { ComponentToken } from '../../utils/component-token.js';
 import KeyboardDoubleArrowLeft from '../icon/icons/hardware/keyboard-double-arrow-left.js';
 import KeyboardDoubleArrowRight from '../icon/icons/hardware/keyboard-double-arrow-right.js';
 import KeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.js';

package/dist/components/calendar/hooks.js

@@ -4,7 +4,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import dayjs from 'dayjs';
 import React, { useMemo, useCallback } from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
+import { CalendarClassToken } from '../../utils/class-name.js';
 import { toArray, useControlledState } from '@aiszlab/relax';
 import { Timespan } from '../../utils/timespan.js';
 import clsx from 'clsx';
@@ -13,6 +13,7 @@ import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import Button from '../button/button.js';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   cell: {

package/dist/components/cascader/cascader.js

@@ -7,8 +7,9 @@ import Tag from '../tag/tag.js';
 import { useOptions, useValue } from './hooks.js';
 import Menu from '../menu/menu.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, CascaderClassToken } from '../../utils/class-name.js';
+import { CascaderClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var _excluded = ["mode", "separator", "options", "complex"];
 var Cascader = function Cascader(_ref) {

package/dist/components/checkbox/checkbox.js

@@ -4,12 +4,13 @@ import React, { useContext, useMemo } from 'react';
 import { useControlledState, useEvent } from '@aiszlab/relax';
 import Context from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, CheckboxClassToken } from '../../utils/class-name.js';
+import { CheckboxClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 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 { typography } from '../theme/theme.js';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   checkbox: {

package/dist/components/clock/clock.js

@@ -2,11 +2,12 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, ClockClassToken } from '../../utils/class-name.js';
+import { ClockClassToken } from '../../utils/class-name.js';
 import { TimeUnit } from './types.js';
 import Column from './column.js';
 import clsx from 'clsx';
 import Divider from '../divider/divider.js';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var Clock = function Clock(_ref) {
   var value = _ref.value,

package/dist/components/clock/column.js

@@ -2,12 +2,13 @@ import React, { forwardRef, useRef, useCallback, useImperativeHandle, useEffect,
 import { useTimeUnit } from './hooks.js';
 import Menu from '../menu/menu.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, ClockClassToken } from '../../utils/class-name.js';
+import { ClockClassToken } from '../../utils/class-name.js';
 import { isVoid } from '@aiszlab/relax';
 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 clsx from 'clsx';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   menu: function menu(props) {

package/dist/components/collapse/collapse.js

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, CollapseClassToken } from '../../utils/class-name.js';
+import { CollapseClassToken } from '../../utils/class-name.js';
 import CollapseItem from './item.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
@@ -10,6 +10,7 @@ import { useActiveKeys } from './hooks.js';
 import { Context } from './context.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   collapse: function collapse(props) {

package/dist/components/collapse/item.js

@@ -4,7 +4,7 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useContext } from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, CollapseClassToken } from '../../utils/class-name.js';
+import { CollapseClassToken } from '../../utils/class-name.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useUpdateEffect, useEvent } from '@aiszlab/relax';
 import { useAnimate } from 'framer-motion';
@@ -13,6 +13,7 @@ import { Context } from './context.js';
 import { useExpandable } from '../../hooks/use-expandable.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
+import { ComponentToken } from '../../utils/component-token.js';
 import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.js';
 
 var styles = {

package/dist/components/config/provider.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ConfigProps } from "./types";
-declare const ConfigProvider: (props: ConfigProps) => React.JSX.Element;
+declare const ConfigProvider: ({ children, prefix, locale: _locale }: ConfigProps) => React.JSX.Element;
 export default ConfigProvider;

package/dist/components/config/provider.js

@@ -2,21 +2,32 @@ import React, { useRef, useMemo } from 'react';
 import Context from './context.js';
 import Holder from '../notification/holder.js';
 import { DEFAULT_CLASS_NAMES, addPrefix, CLASS_NAMES } from '../../utils/class-name.js';
+import { LocaleContext } from '../../locale/context.js';
+import DEFAULT_LOCALE from '../../locale/locales/zh_CN.js';
+import deepmerge from 'deepmerge';
 
-var ConfigProvider = function ConfigProvider(props) {
+var ConfigProvider = function ConfigProvider(_ref) {
+  var children = _ref.children,
+    prefix = _ref.prefix,
+    _locale = _ref.locale;
   var notifierRef = useRef(null);
   var classNames = useMemo(function () {
-    if (!props.prefix) return DEFAULT_CLASS_NAMES;
-    return addPrefix(CLASS_NAMES, props.prefix);
-  }, [props.prefix]);
+    if (!prefix) return DEFAULT_CLASS_NAMES;
+    return addPrefix(CLASS_NAMES, prefix);
+  }, [prefix]);
+  var locale = useMemo(function () {
+    return deepmerge(DEFAULT_LOCALE, _locale !== null && _locale !== void 0 ? _locale : {});
+  }, [_locale]);
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: {
       notifier: notifierRef,
       classNames: classNames
     }
-  }, props.children, /*#__PURE__*/React.createElement(Holder, {
+  }, /*#__PURE__*/React.createElement(LocaleContext.Provider, {
+    value: locale
+  }, children, /*#__PURE__*/React.createElement(Holder, {
     ref: notifierRef
-  }));
+  })));
 };
 var ConfigProvider$1 = ConfigProvider;
 

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

@@ -1,6 +1,7 @@
 import type { ReactNode, RefObject } from "react";
 import type { CLASS_NAMES } from "../../utils/class-name";
 import type { HolderRef } from "../notification/types";
+import type { Locale } from "../../locale";
 export type ClassNames = typeof CLASS_NAMES;
 /**
  * @description
@@ -37,4 +38,9 @@ export interface ConfigProps {
      * prefix
      */
     prefix?: string;
+    /**
+     * @description
+     * locale
+     */
+    locale?: Locale;
 }

package/dist/components/date-picker/date-picker.js

@@ -3,10 +3,11 @@ import Picker from '../picker/picker.js';
 import Calendar from '../calendar/calendar.js';
 import { useValue } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, DatePickerClassToken } from '../../utils/class-name.js';
+import { DatePickerClassToken } from '../../utils/class-name.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { styles } from '../input/input.js';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var DatePicker = function DatePicker(props$1) {
   var _value$format;

package/dist/components/date-range-picker/date-range-picker.js

@@ -4,8 +4,9 @@ import Picker from '../picker/picker.js';
 import { useValue } from './hooks.js';
 import Calendar from '../calendar/calendar.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, DateRangePickerClassToken } from '../../utils/class-name.js';
+import { DateRangePickerClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
+import { ComponentToken } from '../../utils/component-token.js';
 import SwapHoriz from '../icon/icons/action/swap-horiz.js';
 
 var DateRangePicker = function DateRangePicker(props) {

package/dist/components/dialog/hooks.js

@@ -2,6 +2,8 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useMemo } from 'react';
 import Space from '../space/space.js';
 import Button from '../button/button.js';
+import { useLocale } from '../../locale/use-locale.js';
+import { ComponentToken } from '../../utils/component-token.js';
 
 /**
  * @description
@@ -12,16 +14,19 @@ var useFooter = function useFooter(_ref) {
     footer = _ref2[0],
     onConfirm = _ref2[1],
     onClose = _ref2[2];
+  var _useLocale = useLocale(ComponentToken.Dialog),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
   return useMemo(function () {
     return footer !== null && footer !== void 0 ? footer : ( /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
       onClick: onClose,
       color: "secondary",
       variant: "text"
-    }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    }, locale.confirm), /*#__PURE__*/React.createElement(Button, {
       onClick: onConfirm,
       variant: "text"
-    }, "\u786E\u8BA4")));
-  }, [footer, onConfirm, onClose]);
+    }, locale.cancel)));
+  }, [footer, onConfirm, onClose, locale]);
 };
 
 export { useFooter };

package/dist/components/dialog/popup.js

@@ -6,7 +6,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React, { useRef, useEffect } from 'react';
 import { useFooter } from './hooks.js';
 import { useAnimate } from 'framer-motion';
-import { ComponentToken, DialogClassToken } from '../../utils/class-name.js';
+import { DialogClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 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';
@@ -14,6 +14,7 @@ import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
 import { useClosable } from '../../hooks/use-closable.js';
+import { ComponentToken } from '../../utils/component-token.js';
 import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.71_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 var _excluded = ["onClose", "open", "closable", "onClosed"];

package/dist/components/divider/divider.js

@@ -2,12 +2,13 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { useOffset } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, DividerClassToken } from '../../utils/class-name.js';
+import { DividerClassToken } from '../../utils/class-name.js';
 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 { typography } from '../theme/theme.js';
 import clsx from 'clsx';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   divider: {

package/dist/components/drawer/popup.js

@@ -6,7 +6,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React, { useRef, useEffect } from 'react';
 import { useAnimate } from 'framer-motion';
 import { PLACEMENTS } from './hooks.js';
-import { ComponentToken, DrawerClassToken } from '../../utils/class-name.js';
+import { DrawerClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 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';
@@ -14,6 +14,7 @@ import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 import { useClosable } from '../../hooks/use-closable.js';
+import { ComponentToken } from '../../utils/component-token.js';
 import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.71_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 var _excluded = ["open", "onClose", "placement", "closable", "onClosed", "size"];

package/dist/components/empty/empty.js

@@ -1,9 +1,12 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, EmptyClassToken } from '../../utils/class-name.js';
+import { EmptyClassToken } from '../../utils/class-name.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
+import { useLocale } from '../../locale/use-locale.js';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   label: {
@@ -17,6 +20,9 @@ var styles = {
  */
 var Empty = function Empty() {
   var classNames = useClassNames(ComponentToken.Empty);
+  var _useLocale = useLocale(ComponentToken.Empty),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
   var styled = {
     empty: {
       className: "musae-78zum5 musae-dt5ytf musae-6s0dn4 musae-nweklb musae-19s5fsp"
@@ -52,7 +58,7 @@ var Empty = function Empty() {
   })))), /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[EmptyClassToken.Description], styled.label.className),
     style: styled.label.style
-  }, "\u6682\u65E0\u6570\u636E"));
+  }, locale.placeholder));
 };
 var Empty$1 = Empty;
 

package/dist/components/form/field/error.js

@@ -1,13 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useEffect } from 'react';
-import { ComponentToken, FormClassToken } from '../../../utils/class-name.js';
+import { FormClassToken } from '../../../utils/class-name.js';
 import clsx from 'clsx';
 import { useAnimate, usePresence } from 'framer-motion';
 import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../../hooks/use-class-names.js';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';
+import { ComponentToken } from '../../../utils/component-token.js';
 
 var styles = {
   error: function error(props) {

package/dist/components/form/field/field.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React, { useMemo, cloneElement, isValidElement } from 'react';
 import { useController } from 'react-hook-form';
 import { chain, isRefable } from '@aiszlab/relax';
-import { ComponentToken, FormClassToken } from '../../../utils/class-name.js';
+import { FormClassToken } from '../../../utils/class-name.js';
 import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import Layout from './layout.js';
@@ -11,6 +11,7 @@ import Error from './error.js';
 import { AnimatePresence } from 'framer-motion';
 import { typography } from '../../theme/theme.js';
 import { useClassNames } from '../../../hooks/use-class-names.js';
+import { ComponentToken } from '../../../utils/component-token.js';
 
 var _excluded = ["required", "children"];
 var styles = {

package/dist/components/grid/col.js

@@ -1,9 +1,10 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, GridClassToken } from '../../utils/class-name.js';
+import { GridClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   col: function col(props) {

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

@@ -1,4 +1,4 @@
 export declare const Grid: {
-    Row: ({ align, children, gutter, justify, className, as: As, style }: import("./types").RowProps) => import("react").JSX.Element;
+    Row: ({ align, children, gutter, justify, className, as: As, style, }: import("./types").RowProps) => import("react").JSX.Element;
     Col: ({ children, className, span, as: As, style }: import("./types").ColProps) => import("react").JSX.Element;
 };

package/dist/components/grid/row.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { RowProps } from "./types";
-declare const Row: ({ align, children, gutter, justify, className, as: As, style }: RowProps) => React.JSX.Element;
+declare const Row: ({ align, children, gutter, justify, className, as: As, style, }: RowProps) => React.JSX.Element;
 export default Row;

package/dist/components/grid/row.js

@@ -2,10 +2,11 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, GridClassToken } from '../../utils/class-name.js';
+import { GridClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useGutters } from '../../hooks/use-gutters.js';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   row: function row(props) {

package/dist/components/highlight/highlight.js

@@ -1,11 +1,12 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { memo, useMemo } from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, HighlightClassToken } from '../../utils/class-name.js';
+import { HighlightClassToken } from '../../utils/class-name.js';
 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 clsx from 'clsx';
+import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   capture: function capture(props) {

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

@@ -0,0 +1,11 @@
+import { type MenuItem } from "../menu";
+import type { Locale, LocaleCode } from "../../locale/types";
+/**
+ * @description
+ * lazy load locales
+ */
+export declare const useLocales: () => {
+    locales: Map<LocaleCode, Locale>;
+    localeCode: LocaleCode;
+    selections: MenuItem[];
+};

package/dist/components/i18n-button/hooks.js

@@ -0,0 +1,78 @@
+import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useMemo } from 'react';
+import { useMounted } from '@aiszlab/relax';
+import { useLocale } from '../../locale/use-locale.js';
+import { ComponentToken } from '../../utils/component-token.js';
+
+/**
+ * @description
+ * lazy load locales
+ */
+var useLocales = function useLocales() {
+  var _useLocale = useLocale(ComponentToken.I18nButton),
+    _useLocale2 = _slicedToArray(_useLocale, 2),
+    locale = _useLocale2[0],
+    localeCode = _useLocale2[1];
+  var _useState = useState(new Map()),
+    _useState2 = _slicedToArray(_useState, 2),
+    locales = _useState2[0],
+    setLocales = _useState2[1];
+  useMounted( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _yield$import$catch;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.t0 = setLocales;
+          _context.t1 = Object;
+          _context.next = 4;
+          return import('../../locale/locales/index.js')["catch"](function () {
+            return null;
+          });
+        case 4:
+          _context.t3 = _yield$import$catch = _context.sent;
+          _context.t2 = _context.t3 !== null;
+          if (!_context.t2) {
+            _context.next = 8;
+            break;
+          }
+          _context.t2 = _yield$import$catch !== void 0;
+        case 8:
+          if (!_context.t2) {
+            _context.next = 12;
+            break;
+          }
+          _context.t4 = _yield$import$catch;
+          _context.next = 13;
+          break;
+        case 12:
+          _context.t4 = {};
+        case 13:
+          _context.t5 = _context.t4;
+          _context.t6 = _context.t1.values.call(_context.t1, _context.t5).reduce(function (prev, locale) {
+            return prev.set(locale.locale, locale);
+          }, new Map());
+          (0, _context.t0)(_context.t6);
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  var selections = useMemo(function () {
+    return Array.from(locales.keys()).map(function (key) {
+      return {
+        label: locale[key],
+        key: key
+      };
+    });
+  }, [locale, locales]);
+  return {
+    locales: locales,
+    localeCode: localeCode,
+    selections: selections
+  };
+};
+
+export { useLocales };