musae 0.5.4 → 0.5.6

package/dist/components/calendar/calendar.cjs

@@ -3,13 +3,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
 var hooks = require('./hooks.cjs');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var className$1 = require('../../utils/class-name.cjs');
+var useClassNames_component = require('../../hooks/use-class-names.component.cjs');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var theme = require('../theme/theme.cjs');
 var className = require('@aiszlab/relax/class-name');
 var hooks$1 = require('../theme/hooks.cjs');
 var iconButton = require('../icon-button/icon-button.cjs');
+var context = require('./context.cjs');
 var keyboardDoubleArrowLeft = require('../icon/icons/hardware/keyboard-double-arrow-left.cjs');
 var keyboardDoubleArrowRight = require('../icon/icons/hardware/keyboard-double-arrow-right.cjs');
 var keyboardArrowLeft = require('../icon/icons/hardware/keyboard-arrow-left.cjs');
@@ -34,11 +34,12 @@ var styles = {
   }
 };
 var Calendar = function Calendar(_ref) {
-  var className$2 = _ref.className,
+  var className$1 = _ref.className,
     style = _ref.style,
     value = _ref.value,
     _onClick = _ref.onClick,
     _focusedAt = _ref.focusedAt;
+  var classNames = useClassNames_component.useClassNames(context.CLASS_NAMES);
   var _useValue = hooks.useValue({
       onClick: _onClick,
       value: value
@@ -56,10 +57,12 @@ var Calendar = function Calendar(_ref) {
   var dateCells = hooks.useDateCells({
     timespan: timespan,
     focusedAt: focusedAt,
-    click: onClick
+    click: onClick,
+    classNames: classNames
+  });
+  var headCells = hooks.useHeadCells({
+    classNames: classNames
   });
-  var headCells = hooks.useHeadCells();
-  var classNames = useClassNames.useClassNames("calendar");
   var theme$1 = hooks$1.useTheme();
   var styled = {
     calendar: {
@@ -76,10 +79,10 @@ var Calendar = function Calendar(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: className.stringify(styled.calendar.className, className$2),
+    className: className.stringify(classNames.calendar, styled.calendar.className, className$1),
     style: _objectSpread(_objectSpread({}, styled.calendar.style), style)
   }, /*#__PURE__*/React.createElement("header", {
-    className: className.stringify(classNames[className$1.CalendarClassToken.Header], styled.header.className),
+    className: className.stringify(classNames.header, styled.header.className),
     style: styled.header.style
   }, /*#__PURE__*/React.createElement(iconButton.default, {
     variant: "text",
@@ -88,7 +91,7 @@ var Calendar = function Calendar(_ref) {
     variant: "text",
     onClick: toPrevMonth
   }, /*#__PURE__*/React.createElement(keyboardArrowLeft.default, null)), /*#__PURE__*/React.createElement("span", {
-    className: className.stringify(classNames[className$1.CalendarClassToken.Heading], styled.heading.className),
+    className: className.stringify(classNames.heading, styled.heading.className),
     style: styled.heading.style
   }, focusedAt.format("YYYY-MM")), /*#__PURE__*/React.createElement(iconButton.default, {
     variant: "text",

package/dist/components/calendar/calendar.mjs

@@ -1,13 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { useValue, useFocusedAt, useDateCells, useHeadCells } from './hooks.mjs';
-import { useClassNames } from '../../hooks/use-class-names.mjs';
-import { CalendarClassToken } from '../../utils/class-name.mjs';
+import { useClassNames } from '../../hooks/use-class-names.component.mjs';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { typography } from '../theme/theme.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { useTheme } from '../theme/hooks.mjs';
 import IconButton from '../icon-button/icon-button.mjs';
+import { CLASS_NAMES } from './context.mjs';
 import KeyboardDoubleArrowLeft from '../icon/icons/hardware/keyboard-double-arrow-left.mjs';
 import KeyboardDoubleArrowRight from '../icon/icons/hardware/keyboard-double-arrow-right.mjs';
 import KeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.mjs';
@@ -37,6 +37,7 @@ var Calendar = function Calendar(_ref) {
     value = _ref.value,
     _onClick = _ref.onClick,
     _focusedAt = _ref.focusedAt;
+  var classNames = useClassNames(CLASS_NAMES);
   var _useValue = useValue({
       onClick: _onClick,
       value: value
@@ -54,10 +55,12 @@ var Calendar = function Calendar(_ref) {
   var dateCells = useDateCells({
     timespan: timespan,
     focusedAt: focusedAt,
-    click: onClick
+    click: onClick,
+    classNames: classNames
+  });
+  var headCells = useHeadCells({
+    classNames: classNames
   });
-  var headCells = useHeadCells();
-  var classNames = useClassNames("calendar");
   var theme = useTheme();
   var styled = {
     calendar: {
@@ -74,10 +77,10 @@ var Calendar = function Calendar(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: stringify(styled.calendar.className, className),
+    className: stringify(classNames.calendar, styled.calendar.className, className),
     style: _objectSpread(_objectSpread({}, styled.calendar.style), style)
   }, /*#__PURE__*/React.createElement("header", {
-    className: stringify(classNames[CalendarClassToken.Header], styled.header.className),
+    className: stringify(classNames.header, styled.header.className),
     style: styled.header.style
   }, /*#__PURE__*/React.createElement(IconButton, {
     variant: "text",
@@ -86,7 +89,7 @@ var Calendar = function Calendar(_ref) {
     variant: "text",
     onClick: toPrevMonth
   }, /*#__PURE__*/React.createElement(KeyboardArrowLeft, null)), /*#__PURE__*/React.createElement("span", {
-    className: stringify(classNames[CalendarClassToken.Heading], styled.heading.className),
+    className: stringify(classNames.heading, styled.heading.className),
     style: styled.heading.style
   }, focusedAt.format("YYYY-MM")), /*#__PURE__*/React.createElement(IconButton, {
     variant: "text",

package/dist/components/calendar/context.cjs

@@ -0,0 +1,18 @@
+/**
+ * @description
+ * class names
+ */
+var CLASS_NAMES = {
+  calendar: "calendar",
+  header: "calendar__header",
+  heading: "calendar__heading",
+  headCell: "calendar__head-cell",
+  dateCell: "calendar__date-cell",
+  dateCellSelected: "calendar__date-cell--selected",
+  dateCellInRange: "calendar__date--in-range",
+  dateCellRangeFrom: "calendar__date--range-from",
+  dateCellRangeTo: "calendar__date--range-to",
+  date: "calendar__date"
+};
+
+exports.CLASS_NAMES = CLASS_NAMES;

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

@@ -0,0 +1,16 @@
+/**
+ * @description
+ * class names
+ */
+export declare const CLASS_NAMES: {
+    readonly calendar: "calendar";
+    readonly header: "calendar__header";
+    readonly heading: "calendar__heading";
+    readonly headCell: "calendar__head-cell";
+    readonly dateCell: "calendar__date-cell";
+    readonly dateCellSelected: "calendar__date-cell--selected";
+    readonly dateCellInRange: "calendar__date--in-range";
+    readonly dateCellRangeFrom: "calendar__date--range-from";
+    readonly dateCellRangeTo: "calendar__date--range-to";
+    readonly date: "calendar__date";
+};

package/dist/components/calendar/context.mjs

@@ -0,0 +1,18 @@
+/**
+ * @description
+ * class names
+ */
+var CLASS_NAMES = {
+  calendar: "calendar",
+  header: "calendar__header",
+  heading: "calendar__heading",
+  headCell: "calendar__head-cell",
+  dateCell: "calendar__date-cell",
+  dateCellSelected: "calendar__date-cell--selected",
+  dateCellInRange: "calendar__date--in-range",
+  dateCellRangeFrom: "calendar__date--range-from",
+  dateCellRangeTo: "calendar__date--range-to",
+  date: "calendar__date"
+};
+
+export { CLASS_NAMES };

package/dist/components/calendar/contribution.cjs

@@ -235,19 +235,24 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
   // how to get different levels
   // convert primary color into hsla color
   // use `s` change to get different levels
-  var _hexToHsla = color.hexToHsla(theme$1.colors.primary),
-    h = _hexToHsla[0];
-  var _levels = Array.from({
-    length: levels - 1
-  }).map(function (_, index) {
-    return gap * index;
-  });
-  var heatStep = Math.floor(100 / Math.max(_levels.length, 1));
-  var _heats = Array.from({
-    length: levels
-  }).map(function (_, index) {
-    return "hsl(".concat([h, index * heatStep + "%", "80%"].join(","), ")");
-  });
+  var heats = React.useMemo(function () {
+    var _hexToHsla = color.hexToHsla(theme$1.colors.primary),
+      h = _hexToHsla[0];
+    var _levels = Array.from({
+      length: levels - 1
+    }).map(function (_, index) {
+      return gap * index;
+    });
+    var heatStep = Math.min(Math.floor(100 / Math.max(_levels.length, 1)), 10);
+    return Array.from({
+      length: levels
+    }).map(function (_, index) {
+      if (index === 0) {
+        return "hsl(".concat(h, ", 0%, 80%)");
+      }
+      return "hsl(".concat([h, 100 - (levels - 1 - index) * heatStep + "%", "80%"].join(","), ")");
+    });
+  }, [theme$1.colors.primary, levels, gap]);
   return /*#__PURE__*/React.createElement("div", {
     className: styled.scrollable.className,
     style: styled.scrollable.style
@@ -291,8 +296,8 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
       length: columns
     }).map(function (_, column) {
       var _contributions$get;
-      var gap = column * 7 + weekday;
-      var _at = start.add(gap, "day");
+      // get cell date: `start` plus `x * 7 + y`
+      var _at = start.add(column * 7 + weekday, "day");
       if (column === 0 && _at.isBefore(from)) {
         return /*#__PURE__*/React.createElement("td", {
           key: column
@@ -305,14 +310,14 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
       }
       var date = _at.format(FORMAT);
       var count = (_contributions$get = _contributions.get(date)) !== null && _contributions$get !== void 0 ? _contributions$get : 0;
-      var levelAt = relax.clamp(Math.ceil(count / gap), 0, levels);
+      var levelAt = relax.clamp(Math.ceil(count / gap), 0, levels - 1);
       return /*#__PURE__*/React.createElement(tooltip.default, {
         key: column,
         title: relax.toFunction(locale.contribution)(count, date)
       }, /*#__PURE__*/React.createElement("td", {
         className: styled.cell.className,
         style: _objectSpread(_objectSpread({}, styled.cell.style), {}, {
-          backgroundColor: _heats[levelAt]
+          backgroundColor: heats[levelAt]
         })
       }));
     }));
@@ -322,7 +327,7 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styled.levels.className,
     style: styled.levels.style
-  }, /*#__PURE__*/React.createElement("span", null, locale.less), _heats.map(function (color) {
+  }, /*#__PURE__*/React.createElement("span", null, locale.less), heats.map(function (color) {
     return /*#__PURE__*/React.createElement("div", {
       className: styled.level.className,
       key: color,

package/dist/components/calendar/contribution.mjs

@@ -233,19 +233,24 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
   // how to get different levels
   // convert primary color into hsla color
   // use `s` change to get different levels
-  var _hexToHsla = hexToHsla(theme.colors.primary),
-    h = _hexToHsla[0];
-  var _levels = Array.from({
-    length: levels - 1
-  }).map(function (_, index) {
-    return gap * index;
-  });
-  var heatStep = Math.floor(100 / Math.max(_levels.length, 1));
-  var _heats = Array.from({
-    length: levels
-  }).map(function (_, index) {
-    return "hsl(".concat([h, index * heatStep + "%", "80%"].join(","), ")");
-  });
+  var heats = useMemo(function () {
+    var _hexToHsla = hexToHsla(theme.colors.primary),
+      h = _hexToHsla[0];
+    var _levels = Array.from({
+      length: levels - 1
+    }).map(function (_, index) {
+      return gap * index;
+    });
+    var heatStep = Math.min(Math.floor(100 / Math.max(_levels.length, 1)), 10);
+    return Array.from({
+      length: levels
+    }).map(function (_, index) {
+      if (index === 0) {
+        return "hsl(".concat(h, ", 0%, 80%)");
+      }
+      return "hsl(".concat([h, 100 - (levels - 1 - index) * heatStep + "%", "80%"].join(","), ")");
+    });
+  }, [theme.colors.primary, levels, gap]);
   return /*#__PURE__*/React.createElement("div", {
     className: styled.scrollable.className,
     style: styled.scrollable.style
@@ -289,8 +294,8 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
       length: columns
     }).map(function (_, column) {
       var _contributions$get;
-      var gap = column * 7 + weekday;
-      var _at = start.add(gap, "day");
+      // get cell date: `start` plus `x * 7 + y`
+      var _at = start.add(column * 7 + weekday, "day");
       if (column === 0 && _at.isBefore(from)) {
         return /*#__PURE__*/React.createElement("td", {
           key: column
@@ -303,14 +308,14 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
       }
       var date = _at.format(FORMAT);
       var count = (_contributions$get = _contributions.get(date)) !== null && _contributions$get !== void 0 ? _contributions$get : 0;
-      var levelAt = clamp(Math.ceil(count / gap), 0, levels);
+      var levelAt = clamp(Math.ceil(count / gap), 0, levels - 1);
       return /*#__PURE__*/React.createElement(Tooltip, {
         key: column,
         title: toFunction(locale.contribution)(count, date)
       }, /*#__PURE__*/React.createElement("td", {
         className: styled.cell.className,
         style: _objectSpread(_objectSpread({}, styled.cell.style), {}, {
-          backgroundColor: _heats[levelAt]
+          backgroundColor: heats[levelAt]
         })
       }));
     }));
@@ -320,7 +325,7 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styled.levels.className,
     style: styled.levels.style
-  }, /*#__PURE__*/React.createElement("span", null, locale.less), _heats.map(function (color) {
+  }, /*#__PURE__*/React.createElement("span", null, locale.less), heats.map(function (color) {
     return /*#__PURE__*/React.createElement("div", {
       className: styled.level.className,
       key: color,

package/dist/components/calendar/hooks.cjs

@@ -3,8 +3,6 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var dayjs = require('dayjs');
 var React = require('react');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var className$1 = require('../../utils/class-name.cjs');
 var relax = require('@aiszlab/relax');
 var timespan = require('../../utils/timespan.cjs');
 var className = require('@aiszlab/relax/class-name');
@@ -80,8 +78,8 @@ var styles = {
  * @description
  * head cells
  */
-var useHeadCells = function useHeadCells() {
-  var classNames = useClassNames.useClassNames("calendar");
+var useHeadCells = function useHeadCells(_ref) {
+  var classNames = _ref.classNames;
   var theme$1 = hooks.useTheme();
   return React.useMemo(function () {
     var _dayjs$Ls$dayjs$local;
@@ -91,7 +89,7 @@ var useHeadCells = function useHeadCells() {
     return (_dayjs$Ls$dayjs$local = dayjs.Ls[dayjs.locale()].weekdays) === null || _dayjs$Ls$dayjs$local === void 0 ? void 0 : _dayjs$Ls$dayjs$local.map(function (weekday, index) {
       return /*#__PURE__*/React.createElement("th", {
         key: index,
-        className: className.stringify(classNames[className$1.CalendarClassToken.HeadCell], styled.className),
+        className: className.stringify(classNames.headCell, styled.className),
         style: styled.style
       }, weekday.charAt(0));
     });
@@ -101,11 +99,11 @@ var useHeadCells = function useHeadCells() {
  * @description
  * dates
  */
-var useDateCells = function useDateCells(_ref) {
-  var timespan = _ref.timespan,
-    focusedAt = _ref.focusedAt,
-    click = _ref.click;
-  var classNames = useClassNames.useClassNames("calendar");
+var useDateCells = function useDateCells(_ref2) {
+  var timespan = _ref2.timespan,
+    focusedAt = _ref2.focusedAt,
+    click = _ref2.click,
+    classNames = _ref2.classNames;
   var theme$1 = hooks.useTheme();
   return React.useMemo(function () {
     var start = focusedAt.startOf("month");
@@ -133,14 +131,14 @@ var useDateCells = function useDateCells(_ref) {
       prev.at(prev.length - 1).push(/*#__PURE__*/React.createElement("td", {
         title: formatted,
         key: formatted,
-        className: className.stringify(classNames[className$1.CalendarClassToken.DateCell], _objectSpread(_defineProperty({}, classNames[className$1.CalendarClassToken.DateCellSelected], isSelected), timespan.isRange && _defineProperty(_defineProperty(_defineProperty({}, classNames[className$1.CalendarClassToken.DateCellInRange], isBetween), classNames[className$1.CalendarClassToken.DateCellRangeFrom], isFrom), classNames[className$1.CalendarClassToken.DateCellRangeTo], isTo)), styled.cell.className),
+        className: className.stringify(classNames.dateCell, _objectSpread(_defineProperty({}, classNames.dateCellSelected, isSelected), timespan.isRange && _defineProperty(_defineProperty(_defineProperty({}, classNames.dateCellInRange, isBetween), classNames.dateCellRangeFrom, isFrom), classNames.dateCellRangeTo, isTo)), styled.cell.className),
         style: styled.cell.style,
         "aria-selected": isSelected,
         "aria-hidden": isDisabled
       }, /*#__PURE__*/React.createElement(iconButton.default, {
         variant: isSelected ? "filled" : "text",
         color: isSelected ? "primary" : "secondary",
-        className: className.stringify(classNames[className$1.CalendarClassToken.Date], styled.trigger.className),
+        className: className.stringify(classNames.date, styled.trigger.className),
         style: styled.trigger.style,
         onClick: function onClick() {
           click(currentAt);
@@ -159,9 +157,9 @@ var useDateCells = function useDateCells(_ref) {
  * @description
  * time span
  */
-var useValue = function useValue(_ref3) {
-  var _click = _ref3.onClick,
-    value = _ref3.value;
+var useValue = function useValue(_ref4) {
+  var _click = _ref4.onClick,
+    value = _ref4.value;
   /// change handler
   var onClick = React.useCallback(function (_value) {
     _click === null || _click === void 0 || _click(_value);
@@ -186,8 +184,8 @@ var useValue = function useValue(_ref3) {
  * @description
  * point at
  */
-var useFocusedAt = function useFocusedAt(_ref4) {
-  var _focusedAt = _ref4.focusedAt;
+var useFocusedAt = function useFocusedAt(_ref5) {
+  var _focusedAt = _ref5.focusedAt;
   var _useControlledState = relax.useControlledState(_focusedAt, {
       defaultState: dayjs()
     }),

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

@@ -2,19 +2,23 @@ import dayjs, { type Dayjs } from "dayjs";
 import React from "react";
 import { Timespan } from "../../utils/timespan";
 import type { CalendarProps } from "musae/types/calendar";
+import type { CLASS_NAMES } from "./context";
 /**
  * @description
  * head cells
  */
-export declare const useHeadCells: () => React.JSX.Element[] | undefined;
+export declare const useHeadCells: ({ classNames }: {
+    classNames: typeof CLASS_NAMES;
+}) => React.JSX.Element[] | undefined;
 /**
  * @description
  * dates
  */
-export declare const useDateCells: ({ timespan, focusedAt, click, }: {
+export declare const useDateCells: ({ timespan, focusedAt, click, classNames, }: {
     timespan: Timespan;
     focusedAt: Dayjs;
     click: Required<CalendarProps>["onClick"];
+    classNames: typeof CLASS_NAMES;
 }) => React.JSX.Element[];
 /**
  * @description

package/dist/components/calendar/hooks.mjs

@@ -3,8 +3,6 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import dayjs from 'dayjs';
 import React, { useMemo, useCallback } from 'react';
-import { useClassNames } from '../../hooks/use-class-names.mjs';
-import { CalendarClassToken } from '../../utils/class-name.mjs';
 import { toArray, useControlledState } from '@aiszlab/relax';
 import { Timespan } from '../../utils/timespan.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
@@ -80,8 +78,8 @@ var styles = {
  * @description
  * head cells
  */
-var useHeadCells = function useHeadCells() {
-  var classNames = useClassNames("calendar");
+var useHeadCells = function useHeadCells(_ref) {
+  var classNames = _ref.classNames;
   var theme = useTheme();
   return useMemo(function () {
     var _dayjs$Ls$dayjs$local;
@@ -91,7 +89,7 @@ var useHeadCells = function useHeadCells() {
     return (_dayjs$Ls$dayjs$local = dayjs.Ls[dayjs.locale()].weekdays) === null || _dayjs$Ls$dayjs$local === void 0 ? void 0 : _dayjs$Ls$dayjs$local.map(function (weekday, index) {
       return /*#__PURE__*/React.createElement("th", {
         key: index,
-        className: stringify(classNames[CalendarClassToken.HeadCell], styled.className),
+        className: stringify(classNames.headCell, styled.className),
         style: styled.style
       }, weekday.charAt(0));
     });
@@ -101,11 +99,11 @@ var useHeadCells = function useHeadCells() {
  * @description
  * dates
  */
-var useDateCells = function useDateCells(_ref) {
-  var timespan = _ref.timespan,
-    focusedAt = _ref.focusedAt,
-    click = _ref.click;
-  var classNames = useClassNames("calendar");
+var useDateCells = function useDateCells(_ref2) {
+  var timespan = _ref2.timespan,
+    focusedAt = _ref2.focusedAt,
+    click = _ref2.click,
+    classNames = _ref2.classNames;
   var theme = useTheme();
   return useMemo(function () {
     var start = focusedAt.startOf("month");
@@ -133,14 +131,14 @@ var useDateCells = function useDateCells(_ref) {
       prev.at(prev.length - 1).push(/*#__PURE__*/React.createElement("td", {
         title: formatted,
         key: formatted,
-        className: stringify(classNames[CalendarClassToken.DateCell], _objectSpread(_defineProperty({}, classNames[CalendarClassToken.DateCellSelected], isSelected), timespan.isRange && _defineProperty(_defineProperty(_defineProperty({}, classNames[CalendarClassToken.DateCellInRange], isBetween), classNames[CalendarClassToken.DateCellRangeFrom], isFrom), classNames[CalendarClassToken.DateCellRangeTo], isTo)), styled.cell.className),
+        className: stringify(classNames.dateCell, _objectSpread(_defineProperty({}, classNames.dateCellSelected, isSelected), timespan.isRange && _defineProperty(_defineProperty(_defineProperty({}, classNames.dateCellInRange, isBetween), classNames.dateCellRangeFrom, isFrom), classNames.dateCellRangeTo, isTo)), styled.cell.className),
         style: styled.cell.style,
         "aria-selected": isSelected,
         "aria-hidden": isDisabled
       }, /*#__PURE__*/React.createElement(IconButton, {
         variant: isSelected ? "filled" : "text",
         color: isSelected ? "primary" : "secondary",
-        className: stringify(classNames[CalendarClassToken.Date], styled.trigger.className),
+        className: stringify(classNames.date, styled.trigger.className),
         style: styled.trigger.style,
         onClick: function onClick() {
           click(currentAt);
@@ -159,9 +157,9 @@ var useDateCells = function useDateCells(_ref) {
  * @description
  * time span
  */
-var useValue = function useValue(_ref3) {
-  var _click = _ref3.onClick,
-    value = _ref3.value;
+var useValue = function useValue(_ref4) {
+  var _click = _ref4.onClick,
+    value = _ref4.value;
   /// change handler
   var onClick = useCallback(function (_value) {
     _click === null || _click === void 0 || _click(_value);
@@ -186,8 +184,8 @@ var useValue = function useValue(_ref3) {
  * @description
  * point at
  */
-var useFocusedAt = function useFocusedAt(_ref4) {
-  var _focusedAt = _ref4.focusedAt;
+var useFocusedAt = function useFocusedAt(_ref5) {
+  var _focusedAt = _ref5.focusedAt;
   var _useControlledState = useControlledState(_focusedAt, {
       defaultState: dayjs()
     }),

package/dist/components/cascader/cascader.cjs

@@ -8,9 +8,9 @@ var picker = require('../picker/picker.cjs');
 var tag = require('../tag/tag.cjs');
 var hooks = require('./hooks.cjs');
 var menu = require('../menu/menu.cjs');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var className$1 = require('../../utils/class-name.cjs');
+var useClassNames_component = require('../../hooks/use-class-names.component.cjs');
 var className = require('@aiszlab/relax/class-name');
+var context = require('./context.cjs');
 
 var _excluded = ["mode", "separator", "options", "complex"];
 var Cascader = function Cascader(_ref) {
@@ -26,7 +26,7 @@ var Cascader = function Cascader(_ref) {
     var _ref$current;
     return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.close();
   }, []);
-  var classNames = useClassNames.useClassNames("cascader");
+  var classNames = useClassNames_component.useClassNames(context.CLASS_NAMES);
   var _useOptions = hooks.useOptions([options]),
     readableOptions = _useOptions.readableOptions,
     readablePaths = _useOptions.readablePaths,
@@ -64,7 +64,7 @@ var Cascader = function Cascader(_ref) {
       className: "musaex-78zum5 musaex-1l2v28y musaex-1sq4p16"
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: className.stringify(classNames[className$1.CascaderClassToken.Options], styled.className),
+      className: className.stringify(classNames.options, styled.className),
       style: styled.style
     }, [presetedMenuItems].concat(_toConsumableArray(additionalMenusItems)).map(function (menuItems, index) {
       return /*#__PURE__*/React.createElement(menu.default, {
@@ -77,7 +77,7 @@ var Cascader = function Cascader(_ref) {
   return /*#__PURE__*/React.createElement(picker.default, {
     ref: ref,
     pickable: menus,
-    className: classNames[className$1.CascaderClassToken.Cascader],
+    className: classNames.cascader,
     popupWidth: false
   }, inputed);
 };

package/dist/components/cascader/cascader.mjs

@@ -6,9 +6,9 @@ import Picker from '../picker/picker.mjs';
 import Tag from '../tag/tag.mjs';
 import { useOptions, useValue } from './hooks.mjs';
 import Menu from '../menu/menu.mjs';
-import { useClassNames } from '../../hooks/use-class-names.mjs';
-import { CascaderClassToken } from '../../utils/class-name.mjs';
+import { useClassNames } from '../../hooks/use-class-names.component.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
+import { CLASS_NAMES } from './context.mjs';
 
 var _excluded = ["mode", "separator", "options", "complex"];
 var Cascader = function Cascader(_ref) {
@@ -24,7 +24,7 @@ var Cascader = function Cascader(_ref) {
     var _ref$current;
     return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.close();
   }, []);
-  var classNames = useClassNames("cascader");
+  var classNames = useClassNames(CLASS_NAMES);
   var _useOptions = useOptions([options]),
     readableOptions = _useOptions.readableOptions,
     readablePaths = _useOptions.readablePaths,
@@ -62,7 +62,7 @@ var Cascader = function Cascader(_ref) {
       className: "musaex-78zum5 musaex-1l2v28y musaex-1sq4p16"
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: stringify(classNames[CascaderClassToken.Options], styled.className),
+      className: stringify(classNames.options, styled.className),
       style: styled.style
     }, [presetedMenuItems].concat(_toConsumableArray(additionalMenusItems)).map(function (menuItems, index) {
       return /*#__PURE__*/React.createElement(Menu, {
@@ -75,7 +75,7 @@ var Cascader = function Cascader(_ref) {
   return /*#__PURE__*/React.createElement(Picker, {
     ref: ref,
     pickable: menus,
-    className: classNames[CascaderClassToken.Cascader],
+    className: classNames.cascader,
     popupWidth: false
   }, inputed);
 };

package/dist/components/cascader/context.cjs

@@ -0,0 +1,10 @@
+/**
+ * @description
+ * class names
+ */
+var CLASS_NAMES = {
+  cascader: "cascader",
+  options: "cascader__options"
+};
+
+exports.CLASS_NAMES = CLASS_NAMES;

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

@@ -0,0 +1,8 @@
+/**
+ * @description
+ * class names
+ */
+export declare const CLASS_NAMES: {
+    readonly cascader: "cascader";
+    readonly options: "cascader__options";
+};

package/dist/components/cascader/context.mjs

@@ -0,0 +1,10 @@
+/**
+ * @description
+ * class names
+ */
+var CLASS_NAMES = {
+  cascader: "cascader",
+  options: "cascader__options"
+};
+
+export { CLASS_NAMES };