musae 1.0.0 → 1.0.2

package/dist/components/bench/hooks.cjs

@@ -110,7 +110,7 @@ var useMenuKeys = function useMenuKeys(_ref4) {
     expandedKeys = _useState2[0],
     setExpandedKeys = _useState2[1];
   var onExpandedKeysChange = React.useCallback(function (expandingKeys) {
-    setExpandedKeys(expandingKeys);
+    return setExpandedKeys(expandingKeys);
   }, [setExpandedKeys]);
   return {
     selectedKeys: selectedKeys,

package/dist/components/bench/hooks.mjs

@@ -108,7 +108,7 @@ var useMenuKeys = function useMenuKeys(_ref4) {
     expandedKeys = _useState2[0],
     setExpandedKeys = _useState2[1];
   var onExpandedKeysChange = useCallback(function (expandingKeys) {
-    setExpandedKeys(expandingKeys);
+    return setExpandedKeys(expandingKeys);
   }, [setExpandedKeys]);
   return {
     selectedKeys: selectedKeys,

package/dist/components/button/button.cjs

@@ -201,9 +201,8 @@ var styles = {
 /**
  * @author murukal
  *
- * @description
- * button
- * 1. diff from normal html button, this button is default type `button`, not `submit`
+ * @description button
+ * diff from normal html button, this button is default type `button`, not `submit`
  */
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,

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

@@ -3,9 +3,8 @@ import React from "react";
 /**
  * @author murukal
  *
- * @description
- * button
- * 1. diff from normal html button, this button is default type `button`, not `submit`
+ * @description button
+ * diff from normal html button, this button is default type `button`, not `submit`
  */
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/components/button/button.mjs

@@ -197,9 +197,8 @@ var styles = {
 /**
  * @author murukal
  *
- * @description
- * button
- * 1. diff from normal html button, this button is default type `button`, not `submit`
+ * @description button
+ * diff from normal html button, this button is default type `button`, not `submit`
  */
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/dist/components/checkbox/checkbox.cjs

@@ -19,6 +19,7 @@ var ripple = require('../ripple/ripple.cjs');
 var hooks$1 = require('../ripple/hooks.cjs');
 var color = require('@aiszlab/fuzzy/color');
 var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var dom = require('@aiszlab/relax/dom');
 
 var Checkbox = function Checkbox(_ref) {
   var _contextValue$isDisab;
@@ -28,7 +29,7 @@ var Checkbox = function Checkbox(_ref) {
     children = _ref.children,
     onChange = _ref.onChange,
     _ref$disabled = _ref.disabled,
-    _disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     checked = _ref.checked,
     _ref$indeterminate = _ref.indeterminate,
     indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
@@ -41,7 +42,7 @@ var Checkbox = function Checkbox(_ref) {
   var contextValue = React.useContext(context.default);
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var theme$1 = hooks.useTheme();
-  var isDisabled = (_contextValue$isDisab = contextValue === null || contextValue === void 0 ? void 0 : contextValue.isDisabled) !== null && _contextValue$isDisab !== void 0 ? _contextValue$isDisab : _disabled;
+  var isDisabled = (_contextValue$isDisab = contextValue === null || contextValue === void 0 ? void 0 : contextValue.isDisabled) !== null && _contextValue$isDisab !== void 0 ? _contextValue$isDisab : disabled;
   var _useRipple = hooks$1.useRipple({
       isDisabled: !ripple$1 || isDisabled
     }),
@@ -58,7 +59,7 @@ var Checkbox = function Checkbox(_ref) {
   // if there is context value, use context value
   // else use controlled state
   var isChecked = React.useMemo(function () {
-    if (!contextValue || !value) return _isChecked;
+    if (!contextValue || relax.isUndefined(value)) return _isChecked;
     return contextValue.value.has(value);
   }, [_isChecked, contextValue, value]);
   // change handler
@@ -67,22 +68,15 @@ var Checkbox = function Checkbox(_ref) {
   var change = relax.useEvent(function (event) {
     if (isDisabled) return;
     var checked = event.target.checked;
-    !!value && (contextValue === null || contextValue === void 0 ? void 0 : contextValue.change(value, checked));
+    if (!relax.isUndefined(value)) {
+      contextValue === null || contextValue === void 0 || contextValue.change(value, checked);
+    }
     _setIsChecked(checked);
     onChange === null || onChange === void 0 || onChange(event);
   });
-  var styled = {
-    checkbox: stylex.default.props(styles.default.checkbox["default"], styles.default.checkbox.medium, isDisabled && styles.default.checkbox.disabled),
-    layer: stylex.default.props(styles.default.layer["default"]["default"], ripple$1 && [styles.default.layer.rippleable["default"], (isChecked || indeterminate) && styles.default.layer.rippleable.checked, invalid && styles.default.layer.rippleable.invalid, isDisabled && styles.default.layer.rippleable.disabled]),
-    inputer: stylex.default.props(styles.default.inputer["default"]["default"], isDisabled && styles.default.inputer["default"].disabled, (isChecked || indeterminate) && [styles.default.inputer.checked["default"], isDisabled && styles.default.inputer.checked.disabled], invalid && [styles.default.inputer.invalid["default"], (isChecked || indeterminate) && styles.default.inputer.invalid.checked, isDisabled && styles.default.inputer.invalid.disabled]),
-    input: stylex.default.props(styles.default.input["default"]),
-    check: stylex.default.props(styles.default.check["default"]),
-    label: stylex.default.props(styles.default.label["default"], invalid && styles.default.label.invalid, theme.typography.label.small)
-  };
-  return /*#__PURE__*/React.createElement("label", {
-    className: className.stringify(classNames.check, className$1, styled.checkbox.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.checkbox.style), style), {}, {
-      // @ts-expect-error style vars
+  // style vars
+  var styleVars = React.useMemo(function () {
+    return {
       "--color-primary": theme$1.colors.primary,
       "--color-primary-opacity-08": color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin).toString(),
       "--color-primary-opacity-12": color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.medium).toString(),
@@ -98,7 +92,19 @@ var Checkbox = function Checkbox(_ref) {
       "--color-error-opacity-12": color.hexToRgba(theme$1.colors.error, tokens_stylex.OPACITY.medium).toString(),
       "--color-error-opacity-20": color.hexToRgba(theme$1.colors.error, tokens_stylex.OPACITY.thicker).toString(),
       "--color-on-error": theme$1.colors["on-error"]
-    }),
+    };
+  }, [theme$1]);
+  var styled = {
+    checkbox: stylex.default.props(styles.default.checkbox["default"], styles.default.checkbox.medium, isDisabled && styles.default.checkbox.disabled),
+    layer: stylex.default.props(styles.default.layer["default"]["default"], ripple$1 && [styles.default.layer.rippleable["default"], (isChecked || indeterminate) && styles.default.layer.rippleable.checked, invalid && styles.default.layer.rippleable.invalid, isDisabled && styles.default.layer.rippleable.disabled]),
+    inputer: stylex.default.props(styles.default.inputer["default"]["default"], isDisabled && styles.default.inputer["default"].disabled, (isChecked || indeterminate) && [styles.default.inputer.checked["default"], isDisabled && styles.default.inputer.checked.disabled], invalid && [styles.default.inputer.invalid["default"], (isChecked || indeterminate) && styles.default.inputer.invalid.checked, isDisabled && styles.default.inputer.invalid.disabled]),
+    input: stylex.default.props(styles.default.input["default"]),
+    check: stylex.default.props(styles.default.check["default"]),
+    label: stylex.default.props(theme.typography.label.small, styles.default.label["default"], invalid && styles.default.label.invalid)
+  };
+  return /*#__PURE__*/React.createElement("label", {
+    className: className.stringify(classNames.checkbox, className$1, styled.checkbox.className),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.checkbox.style), style), styleVars),
     "aria-checked": isChecked,
     "aria-disabled": isDisabled
   }, /*#__PURE__*/React.createElement("span", {
@@ -117,9 +123,7 @@ var Checkbox = function Checkbox(_ref) {
     onChange: change,
     "aria-checked": isChecked,
     "aria-disabled": isDisabled,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
+    onClick: dom.stopPropagation
   }), isChecked && /*#__PURE__*/React.createElement(check.default, {
     className: styled.check.className,
     style: styled.check.style

package/dist/components/checkbox/checkbox.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { CheckboxProps } from "../../types/checkbox";
 import styles from "./styles";
-declare const Checkbox: ({ value, className, style, children, onChange, disabled: _disabled, checked, indeterminate, ripple, invalid, defaultChecked, }: CheckboxProps) => React.JSX.Element;
+declare const Checkbox: ({ value, className, style, children, onChange, disabled, checked, indeterminate, ripple, invalid, defaultChecked, }: CheckboxProps) => React.JSX.Element;
 export default Checkbox;
 export { styles };

package/dist/components/checkbox/checkbox.mjs

@@ -1,7 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useContext, useMemo } from 'react';
-import { useControlledState, useEvent } from '@aiszlab/relax';
+import { useControlledState, isUndefined, useEvent } from '@aiszlab/relax';
 import Context, { CLASS_NAMES } from './context.mjs';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.10.1/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
@@ -15,6 +15,7 @@ import Ripple from '../ripple/ripple.mjs';
 import { useRipple } from '../ripple/hooks.mjs';
 import { hexToRgba } from '@aiszlab/fuzzy/color';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
+import { stopPropagation } from '@aiszlab/relax/dom';
 
 var Checkbox = function Checkbox(_ref) {
   var _contextValue$isDisab;
@@ -24,7 +25,7 @@ var Checkbox = function Checkbox(_ref) {
     children = _ref.children,
     onChange = _ref.onChange,
     _ref$disabled = _ref.disabled,
-    _disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     checked = _ref.checked,
     _ref$indeterminate = _ref.indeterminate,
     indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
@@ -37,7 +38,7 @@ var Checkbox = function Checkbox(_ref) {
   var contextValue = useContext(Context);
   var classNames = useClassNames(CLASS_NAMES);
   var theme = useTheme();
-  var isDisabled = (_contextValue$isDisab = contextValue === null || contextValue === void 0 ? void 0 : contextValue.isDisabled) !== null && _contextValue$isDisab !== void 0 ? _contextValue$isDisab : _disabled;
+  var isDisabled = (_contextValue$isDisab = contextValue === null || contextValue === void 0 ? void 0 : contextValue.isDisabled) !== null && _contextValue$isDisab !== void 0 ? _contextValue$isDisab : disabled;
   var _useRipple = useRipple({
       isDisabled: !ripple || isDisabled
     }),
@@ -54,7 +55,7 @@ var Checkbox = function Checkbox(_ref) {
   // if there is context value, use context value
   // else use controlled state
   var isChecked = useMemo(function () {
-    if (!contextValue || !value) return _isChecked;
+    if (!contextValue || isUndefined(value)) return _isChecked;
     return contextValue.value.has(value);
   }, [_isChecked, contextValue, value]);
   // change handler
@@ -63,22 +64,15 @@ var Checkbox = function Checkbox(_ref) {
   var change = useEvent(function (event) {
     if (isDisabled) return;
     var checked = event.target.checked;
-    !!value && (contextValue === null || contextValue === void 0 ? void 0 : contextValue.change(value, checked));
+    if (!isUndefined(value)) {
+      contextValue === null || contextValue === void 0 || contextValue.change(value, checked);
+    }
     _setIsChecked(checked);
     onChange === null || onChange === void 0 || onChange(event);
   });
-  var styled = {
-    checkbox: _stylex.props(styles.checkbox["default"], styles.checkbox.medium, isDisabled && styles.checkbox.disabled),
-    layer: _stylex.props(styles.layer["default"]["default"], ripple && [styles.layer.rippleable["default"], (isChecked || indeterminate) && styles.layer.rippleable.checked, invalid && styles.layer.rippleable.invalid, isDisabled && styles.layer.rippleable.disabled]),
-    inputer: _stylex.props(styles.inputer["default"]["default"], isDisabled && styles.inputer["default"].disabled, (isChecked || indeterminate) && [styles.inputer.checked["default"], isDisabled && styles.inputer.checked.disabled], invalid && [styles.inputer.invalid["default"], (isChecked || indeterminate) && styles.inputer.invalid.checked, isDisabled && styles.inputer.invalid.disabled]),
-    input: _stylex.props(styles.input["default"]),
-    check: _stylex.props(styles.check["default"]),
-    label: _stylex.props(styles.label["default"], invalid && styles.label.invalid, typography.label.small)
-  };
-  return /*#__PURE__*/React.createElement("label", {
-    className: stringify(classNames.check, className, styled.checkbox.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.checkbox.style), style), {}, {
-      // @ts-expect-error style vars
+  // style vars
+  var styleVars = useMemo(function () {
+    return {
       "--color-primary": theme.colors.primary,
       "--color-primary-opacity-08": hexToRgba(theme.colors.primary, OPACITY.thin).toString(),
       "--color-primary-opacity-12": hexToRgba(theme.colors.primary, OPACITY.medium).toString(),
@@ -94,7 +88,19 @@ var Checkbox = function Checkbox(_ref) {
       "--color-error-opacity-12": hexToRgba(theme.colors.error, OPACITY.medium).toString(),
       "--color-error-opacity-20": hexToRgba(theme.colors.error, OPACITY.thicker).toString(),
       "--color-on-error": theme.colors["on-error"]
-    }),
+    };
+  }, [theme]);
+  var styled = {
+    checkbox: _stylex.props(styles.checkbox["default"], styles.checkbox.medium, isDisabled && styles.checkbox.disabled),
+    layer: _stylex.props(styles.layer["default"]["default"], ripple && [styles.layer.rippleable["default"], (isChecked || indeterminate) && styles.layer.rippleable.checked, invalid && styles.layer.rippleable.invalid, isDisabled && styles.layer.rippleable.disabled]),
+    inputer: _stylex.props(styles.inputer["default"]["default"], isDisabled && styles.inputer["default"].disabled, (isChecked || indeterminate) && [styles.inputer.checked["default"], isDisabled && styles.inputer.checked.disabled], invalid && [styles.inputer.invalid["default"], (isChecked || indeterminate) && styles.inputer.invalid.checked, isDisabled && styles.inputer.invalid.disabled]),
+    input: _stylex.props(styles.input["default"]),
+    check: _stylex.props(styles.check["default"]),
+    label: _stylex.props(typography.label.small, styles.label["default"], invalid && styles.label.invalid)
+  };
+  return /*#__PURE__*/React.createElement("label", {
+    className: stringify(classNames.checkbox, className, styled.checkbox.className),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.checkbox.style), style), styleVars),
     "aria-checked": isChecked,
     "aria-disabled": isDisabled
   }, /*#__PURE__*/React.createElement("span", {
@@ -113,9 +119,7 @@ var Checkbox = function Checkbox(_ref) {
     onChange: change,
     "aria-checked": isChecked,
     "aria-disabled": isDisabled,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
+    onClick: stopPropagation
   }), isChecked && /*#__PURE__*/React.createElement(Check, {
     className: styled.check.className,
     style: styled.check.style

package/dist/components/checkbox/context.cjs

@@ -9,7 +9,7 @@ var React = require('react');
  * checkbox class names
  */
 var CLASS_NAMES = {
-  check: "checkbox",
+  checkbox: "checkbox",
   layer: "checkbox__layer",
   inputer: "checkbox__inputer",
   input: "checkbox__input",

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

@@ -4,7 +4,7 @@ import type { ContextValue } from "../../types/checkbox";
  * checkbox class names
  */
 export declare const CLASS_NAMES: {
-    check: string;
+    checkbox: string;
     layer: string;
     inputer: string;
     input: string;

package/dist/components/checkbox/context.mjs

@@ -5,7 +5,7 @@ import { createContext } from 'react';
  * checkbox class names
  */
 var CLASS_NAMES = {
-  check: "checkbox",
+  checkbox: "checkbox",
   layer: "checkbox__layer",
   inputer: "checkbox__inputer",
   input: "checkbox__input",

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

@@ -1,5 +1,5 @@
 import styles from "./styles";
-export declare const Checkbox: (({ value, className, style, children, onChange, disabled: _disabled, checked, indeterminate, ripple, invalid, defaultChecked, }: import("../../types/checkbox").CheckboxProps) => import("react").JSX.Element) & {
+export declare const Checkbox: (({ value, className, style, children, onChange, disabled, checked, indeterminate, ripple, invalid, defaultChecked, }: import("../../types/checkbox").CheckboxProps) => import("react").JSX.Element) & {
     Group: ({ value: controlledValue, children, onChange, disabled, }: import("../../types/checkbox").CheckboxGroupProps) => import("react").JSX.Element;
 };
 export { styles };

package/dist/components/clock/clock.cjs

@@ -10,7 +10,6 @@ var column = require('./column.cjs');
 var className = require('@aiszlab/relax/class-name');
 var divider = require('../divider/divider.cjs');
 var context = require('./context.cjs');
-var hooks = require('../theme/hooks.cjs');
 
 var Clock = function Clock(_ref) {
   var value = _ref.value,
@@ -22,17 +21,13 @@ var Clock = function Clock(_ref) {
     className: "musaex-78zum5 musaex-1m3v4wt musaex-5xj0sk"
   };
   var columns = ["hour", "minute", "second"];
-  var theme = hooks.useTheme();
   return /*#__PURE__*/React.createElement(context.Context.Provider, {
     value: {
       classNames: classNames
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.clock, className$1, styled.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), style), {}, {
-      // @ts-expect-error style vars
-      "--color-secondary": theme.colors.secondary
-    })
+    style: _objectSpread(_objectSpread({}, styled.style), style)
   }, columns.map(function (unit, index) {
     return [/*#__PURE__*/React.createElement(column.default, {
       unit: unit,

package/dist/components/clock/clock.mjs

@@ -6,7 +6,6 @@ import Column from './column.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import Divider from '../divider/divider.mjs';
 import { Context, CLASS_NAMES } from './context.mjs';
-import { useTheme } from '../theme/hooks.mjs';
 
 var Clock = function Clock(_ref) {
   var value = _ref.value,
@@ -18,17 +17,13 @@ var Clock = function Clock(_ref) {
     className: "musaex-78zum5 musaex-1m3v4wt musaex-5xj0sk"
   };
   var columns = ["hour", "minute", "second"];
-  var theme = useTheme();
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: {
       classNames: classNames
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.clock, className, styled.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), style), {}, {
-      // @ts-expect-error style vars
-      "--color-secondary": theme.colors.secondary
-    })
+    style: _objectSpread(_objectSpread({}, styled.style), style)
   }, columns.map(function (unit, index) {
     return [/*#__PURE__*/React.createElement(Column, {
       unit: unit,

package/dist/components/clock/column.cjs

@@ -2,19 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
 var menu = require('../menu/menu.cjs');
 var relax = require('@aiszlab/relax');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.10.1/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var hooks = require('../theme/hooks.cjs');
 var className = require('@aiszlab/relax/class-name');
 var context = require('./context.cjs');
+var theme = require('../theme/theme.cjs');
 
 var UNITS = {
   hour: 24,
   minute: 60,
   second: 60
 };
-var Column = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var styles = {
+  menu: {
+    overflowX: "musaex-6ikm8r",
+    overflowY: "musaex-10wlt62 musaex-r8ctv5",
+    width: "musaex-17vrh6f",
+    marginBlock: "musaex-1yke8k6",
+    marginTop: null,
+    marginBottom: null,
+    $$css: true
+  }
+};
+var Column = function Column(_ref) {
   var unit = _ref.unit,
     value = _ref.value,
     onChange = _ref.onChange;
@@ -22,24 +36,19 @@ var Column = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useContext = React.useContext(context.Context),
     classNames = _useContext.classNames;
   var menuRef = React.useRef(null);
-  hooks.useTheme();
+  var theme$1 = hooks.useTheme();
   var onClick = React.useCallback(function (key) {
     var _menuRef$current;
     onChange === null || onChange === void 0 || onChange(key);
     (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || _menuRef$current.scrollTo(key, 100);
   }, [onChange]);
-  React.useImperativeHandle(ref, function () {
-    return {};
-  }, []);
   React.useEffect(function () {
     var _menuRef$current2;
     if (relax.isVoid(value)) return;
-    (_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 || _menuRef$current2.scrollTo(value || 0, 100);
+    (_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 || _menuRef$current2.scrollTo(value !== null && value !== void 0 ? value : 0, 100);
   }, [value]);
   var styled = {
-    menu: {
-      className: "musaex-6ikm8r musaex-10wlt62 musaex-r8ctv5 musaex-17vrh6f musaex-1yke8k6 musaex-asoihx musaex-1uowca5 musaex-11y6kk5 musaex-jc8j51"
-    },
+    menu: stylex.default.props(theme.scrollbar["default"], styles.menu),
     item: {
       className: "musaex-17vrh6f musaex-78zum5 musaex-l56j7k"
     }
@@ -48,7 +57,10 @@ var Column = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     selectedKeys: value,
     ref: menuRef,
     className: className.stringify(styled.menu.className, classNames.column),
-    style: styled.menu.style,
+    style: _objectSpread(_objectSpread({}, styled.menu.style), {}, {
+      // @ts-expect-error style vars
+      "--color-scrollbar-thumb": theme$1.colors.secondary
+    }),
     items: Array.from(Array(timeUnit).keys()).map(function (step) {
       return {
         key: step,
@@ -59,6 +71,6 @@ var Column = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     onClick: onClick
   });
-});
+};
 
 exports.default = Column;

package/dist/components/clock/column.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { ColumnProps } from "../../types/clock";
-declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<{}>>;
+import type { ColumnProps } from "../../types/clock";
+declare const Column: ({ unit, value, onChange }: ColumnProps) => React.JSX.Element;
 export default Column;

package/dist/components/clock/column.mjs

@@ -1,16 +1,30 @@
-import React, { forwardRef, useContext, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import React, { useContext, useRef, useCallback, useEffect } from 'react';
 import Menu from '../menu/menu.mjs';
 import { isVoid } from '@aiszlab/relax';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.10.1/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { Context } from './context.mjs';
+import { scrollbar } from '../theme/theme.mjs';
 
 var UNITS = {
   hour: 24,
   minute: 60,
   second: 60
 };
-var Column = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var styles = {
+  menu: {
+    overflowX: "musaex-6ikm8r",
+    overflowY: "musaex-10wlt62 musaex-r8ctv5",
+    width: "musaex-17vrh6f",
+    marginBlock: "musaex-1yke8k6",
+    marginTop: null,
+    marginBottom: null,
+    $$css: true
+  }
+};
+var Column = function Column(_ref) {
   var unit = _ref.unit,
     value = _ref.value,
     onChange = _ref.onChange;
@@ -18,24 +32,19 @@ var Column = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useContext = useContext(Context),
     classNames = _useContext.classNames;
   var menuRef = useRef(null);
-  useTheme();
+  var theme = useTheme();
   var onClick = useCallback(function (key) {
     var _menuRef$current;
     onChange === null || onChange === void 0 || onChange(key);
     (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || _menuRef$current.scrollTo(key, 100);
   }, [onChange]);
-  useImperativeHandle(ref, function () {
-    return {};
-  }, []);
   useEffect(function () {
     var _menuRef$current2;
     if (isVoid(value)) return;
-    (_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 || _menuRef$current2.scrollTo(value || 0, 100);
+    (_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 || _menuRef$current2.scrollTo(value !== null && value !== void 0 ? value : 0, 100);
   }, [value]);
   var styled = {
-    menu: {
-      className: "musaex-6ikm8r musaex-10wlt62 musaex-r8ctv5 musaex-17vrh6f musaex-1yke8k6 musaex-asoihx musaex-1uowca5 musaex-11y6kk5 musaex-jc8j51"
-    },
+    menu: _stylex.props(scrollbar["default"], styles.menu),
     item: {
       className: "musaex-17vrh6f musaex-78zum5 musaex-l56j7k"
     }
@@ -44,7 +53,10 @@ var Column = /*#__PURE__*/forwardRef(function (_ref, ref) {
     selectedKeys: value,
     ref: menuRef,
     className: stringify(styled.menu.className, classNames.column),
-    style: styled.menu.style,
+    style: _objectSpread(_objectSpread({}, styled.menu.style), {}, {
+      // @ts-expect-error style vars
+      "--color-scrollbar-thumb": theme.colors.secondary
+    }),
     items: Array.from(Array(timeUnit).keys()).map(function (step) {
       return {
         key: step,
@@ -55,6 +67,6 @@ var Column = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }),
     onClick: onClick
   });
-});
+};
 
 export { Column as default };

package/dist/components/collapse/item.cjs

@@ -4,11 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.10.1/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var relax = require('@aiszlab/relax');
-var framerMotion = require('framer-motion');
 var context = require('./context.cjs');
 var useExpandable = require('../../hooks/use-expandable.cjs');
 var hooks = require('../theme/hooks.cjs');
@@ -103,12 +101,9 @@ var CollapseItem = function CollapseItem(_ref) {
     toggle = _useContext.toggle,
     classNames = _useContext.classNames;
   var isExpanded = activeKeys.has(value);
-  var _useAnimate = framerMotion.useAnimate(),
-    _useAnimate2 = _slicedToArray(_useAnimate, 2),
-    collapser = _useAnimate2[0],
-    animate = _useAnimate2[1];
   var theme$1 = hooks.useTheme();
   var _useExpandable = useExpandable.useExpandable(),
+    ref = _useExpandable.ref,
     expand = _useExpandable.expand,
     collapse = _useExpandable.collapse;
   relax.useUpdateEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -120,12 +115,12 @@ var CollapseItem = function CollapseItem(_ref) {
             break;
           }
           _context.next = 3;
-          return expand([collapser, animate]);
+          return expand();
         case 3:
           return _context.abrupt("return");
         case 4:
           _context.next = 6;
-          return collapse([collapser, animate]);
+          return collapse();
         case 6:
         case "end":
           return _context.stop();
@@ -157,7 +152,7 @@ var CollapseItem = function CollapseItem(_ref) {
     className: className.stringify(classNames.collapser, styled.collapser.className),
     style: styled.collapser.style
   }), label), /*#__PURE__*/React.createElement("div", {
-    ref: collapser,
+    ref: ref,
     className: className.stringify(classNames.panel, isExpanded && classNames.panelActive, styled.panel.className),
     style: styled.panel.style
   }, /*#__PURE__*/React.createElement("div", {

package/dist/components/collapse/item.mjs

@@ -1,10 +1,8 @@
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useContext } from 'react';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.10.1/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useUpdateEffect, useEvent } from '@aiszlab/relax';
-import { useAnimate } from 'framer-motion';
 import { Context } from './context.mjs';
 import { useExpandable } from '../../hooks/use-expandable.mjs';
 import { useTheme } from '../theme/hooks.mjs';
@@ -99,12 +97,9 @@ var CollapseItem = function CollapseItem(_ref) {
     toggle = _useContext.toggle,
     classNames = _useContext.classNames;
   var isExpanded = activeKeys.has(value);
-  var _useAnimate = useAnimate(),
-    _useAnimate2 = _slicedToArray(_useAnimate, 2),
-    collapser = _useAnimate2[0],
-    animate = _useAnimate2[1];
   var theme = useTheme();
   var _useExpandable = useExpandable(),
+    ref = _useExpandable.ref,
     expand = _useExpandable.expand,
     collapse = _useExpandable.collapse;
   useUpdateEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -116,12 +111,12 @@ var CollapseItem = function CollapseItem(_ref) {
             break;
           }
           _context.next = 3;
-          return expand([collapser, animate]);
+          return expand();
         case 3:
           return _context.abrupt("return");
         case 4:
           _context.next = 6;
-          return collapse([collapser, animate]);
+          return collapse();
         case 6:
         case "end":
           return _context.stop();
@@ -153,7 +148,7 @@ var CollapseItem = function CollapseItem(_ref) {
     className: stringify(classNames.collapser, styled.collapser.className),
     style: styled.collapser.style
   }), label), /*#__PURE__*/React.createElement("div", {
-    ref: collapser,
+    ref: ref,
     className: stringify(classNames.panel, isExpanded && classNames.panelActive, styled.panel.className),
     style: styled.panel.style
   }, /*#__PURE__*/React.createElement("div", {