musae 0.2.26 → 0.3.0

package/dist/components/checkbox/checkbox.cjs

@@ -0,0 +1,88 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var context = require('./context.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var theme = require('../theme/theme.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var styles = require('./styles.cjs');
+
+var Checkbox = function Checkbox(_ref) {
+  var value = _ref.value,
+    className$1 = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    checked = _ref.checked;
+  var contextValue = React.useContext(context.default);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Checkbox);
+  var theme$1 = hooks.useTheme();
+  var isDisabled = React.useMemo(function () {
+    var _contextValue$isDisab;
+    return (_contextValue$isDisab = contextValue === null || contextValue === void 0 ? void 0 : contextValue.isDisabled) !== null && _contextValue$isDisab !== void 0 ? _contextValue$isDisab : disabled;
+  }, [contextValue, disabled]);
+  var _useControlledState = relax.useControlledState(checked, {
+      defaultState: false
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    _isChecked = _useControlledState2[0],
+    _setIsChecked = _useControlledState2[1];
+  // check current checkbox is checked
+  // if there is context value, use context value
+  // else use controlled state
+  var isChecked = React.useMemo(function () {
+    if (!contextValue || !value) {
+      return _isChecked;
+    }
+    return contextValue.value.has(value);
+  }, [_isChecked, contextValue, value]);
+  // change handler
+  // if there is context value, just notify context
+  // else change the controlled state
+  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));
+    _setIsChecked(checked);
+    onChange === null || onChange === void 0 || onChange(event);
+  });
+  var styled = {
+    checkbox: stylex.default.props(styles.default.checkbox["default"], isDisabled && styles.default.checkbox.disabled, styles.default.checkbox.variables({
+      primaryColor: theme$1.colors[colors.ColorToken.Primary],
+      onPrimaryColor: theme$1.colors[colors.ColorToken.OnPrimary],
+      outlineColor: theme$1.colors[colors.ColorToken.Outline]
+    })),
+    trigger: stylex.default.props(styles.default.trigger["default"], isChecked && styles.default.trigger.checked, isDisabled && styles.default.trigger.disabled({
+      backgroundColor: theme$1.colors[colors.ColorToken.OnSurface],
+      color: theme$1.colors[colors.ColorToken.OnPrimary]
+    }), !isChecked && styles.default.trigger.unchecked),
+    label: stylex.default.props(styles.default.label["default"], theme.typography.label.small)
+  };
+  return /*#__PURE__*/React.createElement("label", {
+    className: relax.clsx(classNames[className.CheckboxClassToken.Checkbox], className$1, styled.checkbox.className),
+    style: _objectSpread(_objectSpread({}, styled.checkbox.style), style)
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    className: styled.trigger.className,
+    style: styled.trigger.style,
+    checked: isChecked,
+    "aria-checked": isChecked,
+    disabled: isDisabled,
+    onChange: change
+  }), children && (/*#__PURE__*/React.createElement("span", {
+    className: styled.label.className,
+    style: styled.label.style
+  }, children)));
+};
+
+exports.styles = styles.default;
+exports.default = Checkbox;

package/dist/components/checkbox/{checkbox.js → checkbox.mjs}

@@ -2,15 +2,15 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useContext, useMemo } from 'react';
 import { useControlledState, useEvent, clsx } from '@aiszlab/relax';
-import Context from './context.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { CheckboxClassToken } 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 { typography } from '../theme/theme.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import styles from './styles.js';
+import Context from './context.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { CheckboxClassToken } from '../../utils/class-name.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { typography } from '../theme/theme.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import styles from './styles.mjs';
 
 var Checkbox = function Checkbox(_ref) {
   var value = _ref.value,
@@ -66,7 +66,7 @@ var Checkbox = function Checkbox(_ref) {
     label: _stylex.props(styles.label["default"], typography.label.small)
   };
   return /*#__PURE__*/React.createElement("label", {
-    className: clsx(styled.checkbox.className, className, classNames[CheckboxClassToken.Checkbox]),
+    className: clsx(classNames[CheckboxClassToken.Checkbox], className, styled.checkbox.className),
     style: _objectSpread(_objectSpread({}, styled.checkbox.style), style)
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",

package/dist/components/checkbox/context.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var Context = /*#__PURE__*/React.createContext(null);
+
+exports.default = Context;

package/dist/components/checkbox/group.cjs

@@ -0,0 +1,48 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var context = require('./context.cjs');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+
+var Group = function Group(_ref) {
+  var controlledValue = _ref.value,
+    children = _ref.children,
+    onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var _useControlledState = relax.useControlledState(controlledValue, {
+      defaultState: []
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    _value = _useControlledState2[0],
+    setValue = _useControlledState2[1];
+  var value = React.useMemo(function () {
+    return new Set(_value);
+  }, [_value]);
+  // change handler
+  var change = React.useCallback(function (key, isChecked) {
+    var checkedKeys = new Set(value);
+    if (isChecked) {
+      checkedKeys.add(key);
+    } else {
+      checkedKeys["delete"](key);
+    }
+    var _checkedKeys = Array.from(checkedKeys);
+    onChange === null || onChange === void 0 || onChange(_checkedKeys);
+    setValue(_checkedKeys);
+  }, [onChange, setValue, value]);
+  // context value
+  var contextValue = React.useMemo(function () {
+    return {
+      value: value,
+      change: change,
+      isDisabled: disabled
+    };
+  }, [value, change, disabled]);
+  return /*#__PURE__*/React.createElement(context.default.Provider, {
+    value: contextValue
+  }, children);
+};
+
+exports.default = Group;

package/dist/components/checkbox/{group.js → group.mjs}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import Context from './context.js';
+import Context from './context.mjs';
 import React, { useMemo, useCallback } from 'react';
 import { useControlledState } from '@aiszlab/relax';
 

package/dist/components/checkbox/index.cjs

@@ -0,0 +1,8 @@
+var checkbox = require('./checkbox.cjs');
+var group = require('./group.cjs');
+
+var Checkbox = Object.assign(checkbox.default, {
+  Group: group.default
+});
+
+exports.Checkbox = Checkbox;

package/dist/components/checkbox/{index.js → index.mjs}

@@ -1,5 +1,5 @@
-import Checkbox$1 from './checkbox.js';
-import Group from './group.js';
+import Checkbox$1 from './checkbox.mjs';
+import Group from './group.mjs';
 
 var Checkbox = Object.assign(Checkbox$1, {
   Group: Group

package/dist/components/checkbox/styles.cjs

@@ -0,0 +1,186 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  checkbox: {
+    "default": {
+      display: "musaex-3nfvp2",
+      alignItems: "musaex-6s0dn4",
+      cursor: "musaex-1ypdohk",
+      userSelect: "musaex-87ps6o",
+      $$css: true
+    },
+    disabled: {
+      opacity: "musaex-niy1rt",
+      cursor: "musaex-1h6gzvc",
+      $$css: true
+    },
+    variables: function variables(props) {
+      return [{
+        "--primary-color": "musaex-1w3qx2l",
+        "--on-primary-color": "musaex-1i66ttz",
+        "--outline-color": "musaex-1x71zss",
+        $$css: true
+      }, {
+        "----primary-color": props.primaryColor != null ? props.primaryColor : "initial",
+        "----on-primary-color": props.onPrimaryColor != null ? props.onPrimaryColor : "initial",
+        "----outline-color": props.outlineColor != null ? props.outlineColor : "initial"
+      }];
+    }
+  },
+  trigger: {
+    "default": {
+      margin: "musaex-p8vts",
+      marginInline: null,
+      marginInlineStart: null,
+      marginLeft: null,
+      marginInlineEnd: null,
+      marginRight: null,
+      marginBlock: null,
+      marginTop: null,
+      marginBottom: null,
+      visibility: "musaex-lshs6z",
+      cursor: "musaex-mper1u",
+      width: "musaex-v4a0uj",
+      height: "musaex-1i8ku4x",
+      position: "musaex-1n2onr6",
+      "::before_content": "musaex-1cpjm7i",
+      "::before_visibility": "musaex-11srvyv",
+      "::before_display": "musaex-1fhgk32",
+      "::before_verticalAlign": "musaex-1ujdksz",
+      "::before_boxSizing": "musaex-tql2tq",
+      "::before_width": "musaex-kr2xts",
+      "::before_height": "musaex-qmlfwa",
+      "::before_borderRadius": "musaex-1wbhtjp",
+      "::before_borderStartStartRadius": null,
+      "::before_borderStartEndRadius": null,
+      "::before_borderEndStartRadius": null,
+      "::before_borderEndEndRadius": null,
+      "::before_borderTopLeftRadius": null,
+      "::before_borderTopRightRadius": null,
+      "::before_borderBottomLeftRadius": null,
+      "::before_borderBottomRightRadius": null,
+      "::before_transitionProperty": "musaex-1ss7a8w",
+      "::before_transitionDuration": "musaex-uipqnc",
+      "::before_borderWidth": "musaex-1yqh4v7",
+      "::before_borderInlineWidth": null,
+      "::before_borderInlineStartWidth": null,
+      "::before_borderLeftWidth": null,
+      "::before_borderInlineEndWidth": null,
+      "::before_borderRightWidth": null,
+      "::before_borderBlockWidth": null,
+      "::before_borderTopWidth": null,
+      "::before_borderBottomWidth": null,
+      "::before_borderStyle": "musaex-1fo1fc9",
+      "::before_borderInlineStyle": null,
+      "::before_borderInlineStartStyle": null,
+      "::before_borderLeftStyle": null,
+      "::before_borderInlineEndStyle": null,
+      "::before_borderRightStyle": null,
+      "::before_borderBlockStyle": null,
+      "::before_borderTopStyle": null,
+      "::before_borderBottomStyle": null,
+      "::before_borderColor": "musaex-1k63plb",
+      "::before_borderInlineColor": null,
+      "::before_borderInlineStartColor": null,
+      "::before_borderLeftColor": null,
+      "::before_borderInlineEndColor": null,
+      "::before_borderRightColor": null,
+      "::before_borderBlockColor": null,
+      "::before_borderTopColor": null,
+      "::before_borderBottomColor": null,
+      $$css: true
+    },
+    checked: {
+      "::before_backgroundColor": "musaex-ietmgg",
+      "::before_borderColor": "musaex-12ogrmw",
+      "::before_borderInlineColor": null,
+      "::before_borderInlineStartColor": null,
+      "::before_borderLeftColor": null,
+      "::before_borderInlineEndColor": null,
+      "::before_borderRightColor": null,
+      "::before_borderBlockColor": null,
+      "::before_borderTopColor": null,
+      "::before_borderBottomColor": null,
+      "::after_content": "musaex-1s928wv",
+      "::after_position": "musaex-1j6awrg",
+      "::after_top": "musaex-10bb230",
+      "::after_insetInlineStart": "musaex-16tb1eb",
+      "::after_left": null,
+      "::after_right": null,
+      "::after_visibility": "musaex-170pinb",
+      "::after_boxSizing": "musaex-x38sju",
+      "::after_display": "musaex-hkezso",
+      "::after_width": "musaex-1iqjbot",
+      "::after_height": "musaex-zwhqw0",
+      "::after_transformOrigin": "musaex-8ihlwz",
+      "::after_transform": "musaex-bdtczv",
+      "::after_borderBottomWidth": "musaex-zwl9q7",
+      "::after_borderLeftWidth": "musaex-190en14",
+      "::after_borderInlineStartWidth": null,
+      "::after_borderInlineEndWidth": null,
+      "::after_borderStyle": "musaex-86avzo",
+      "::after_borderInlineStyle": null,
+      "::after_borderInlineStartStyle": null,
+      "::after_borderLeftStyle": null,
+      "::after_borderInlineEndStyle": null,
+      "::after_borderRightStyle": null,
+      "::after_borderBlockStyle": null,
+      "::after_borderTopStyle": null,
+      "::after_borderBottomStyle": null,
+      "::after_borderColor": "musaex-g7yeof",
+      "::after_borderInlineColor": null,
+      "::after_borderInlineStartColor": null,
+      "::after_borderLeftColor": null,
+      "::after_borderInlineEndColor": null,
+      "::after_borderRightColor": null,
+      "::after_borderBlockColor": null,
+      "::after_borderTopColor": null,
+      "::after_borderBottomColor": null,
+      $$css: true
+    },
+    disabled: function disabled(props) {
+      return [{
+        "::before_backgroundColor": "musaex-rr6jkh",
+        "::before_borderColor": "musaex-123gkgz",
+        "::before_borderInlineColor": null,
+        "::before_borderInlineStartColor": null,
+        "::before_borderLeftColor": null,
+        "::before_borderInlineEndColor": null,
+        "::before_borderRightColor": null,
+        "::before_borderBlockColor": null,
+        "::before_borderTopColor": null,
+        "::before_borderBottomColor": null,
+        "::after_borderColor": "musaex-3yd8hb",
+        "::after_borderInlineColor": null,
+        "::after_borderInlineStartColor": null,
+        "::after_borderLeftColor": null,
+        "::after_borderInlineEndColor": null,
+        "::after_borderRightColor": null,
+        "::after_borderBlockColor": null,
+        "::after_borderTopColor": null,
+        "::after_borderBottomColor": null,
+        $$css: true
+      }, {
+        "--1lrm08k": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--1il6zln": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--joftei": props.color != null ? props.color : "initial"
+      }];
+    },
+    unchecked: {
+      "::before_backgroundColor": null,
+      $$css: true
+    }
+  },
+  label: {
+    "default": {
+      paddingInline: "musaex-nd81q0",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      $$css: true
+    }
+  }
+};
+
+exports.default = styles;

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

@@ -4,6 +4,7 @@ declare const styles: {
             readonly display: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"display", "inline-flex">;
             readonly alignItems: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
             readonly cursor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+            readonly userSelect: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"userSelect", "none">;
         }>;
         readonly disabled: Readonly<{
             readonly opacity: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"opacity", string>;

package/dist/components/checkbox/{styles.js → styles.mjs}

@@ -4,6 +4,7 @@ var styles = {
       display: "musaex-3nfvp2",
       alignItems: "musaex-6s0dn4",
       cursor: "musaex-1ypdohk",
+      userSelect: "musaex-87ps6o",
       $$css: true
     },
     disabled: {

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

@@ -1,5 +1,5 @@
 import type { ChangeEvent, Key, ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 /**
  * @author murukal
  *

package/dist/components/clock/clock.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var types = require('./types.cjs');
+var column = require('./column.cjs');
+var relax = require('@aiszlab/relax');
+var divider = require('../divider/divider.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var Clock = function Clock(_ref) {
+  var value = _ref.value,
+    _onChange = _ref.onChange;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Clock);
+  var styled = {
+    className: "musaex-78zum5 musaex-1m3v4wt musaex-13bbkc7"
+  };
+  var columns = [types.TimeUnit.Hour, types.TimeUnit.Minute, types.TimeUnit.Second];
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.ClockClassToken.Clock], styled.className),
+    style: styled.style
+  }, columns.map(function (unit, index) {
+    return [/*#__PURE__*/React.createElement(column.default, {
+      unit: unit,
+      key: unit,
+      value: value === null || value === void 0 ? void 0 : value[index],
+      onChange: function onChange(_value) {
+        _onChange === null || _onChange === void 0 || _onChange(Object.values(_objectSpread(_objectSpread(_objectSpread({}, [0, 0, 0]), value), {}, _defineProperty({}, index, _value))));
+      }
+    }), index === columns.length - 1 ? null : (/*#__PURE__*/React.createElement(divider.default, {
+      orientation: "vertical",
+      key: "".concat(unit, "-divider")
+    }))];
+  }));
+};
+
+exports.default = Clock;

package/dist/components/clock/{clock.js → clock.mjs}

@@ -1,13 +1,13 @@
 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 { ClockClassToken } from '../../utils/class-name.js';
-import { TimeUnit } from './types.js';
-import Column from './column.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { ClockClassToken } from '../../utils/class-name.mjs';
+import { TimeUnit } from './types.mjs';
+import Column from './column.mjs';
 import { clsx } from '@aiszlab/relax';
-import Divider from '../divider/divider.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import Divider from '../divider/divider.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var Clock = function Clock(_ref) {
   var value = _ref.value,
@@ -34,6 +34,5 @@ var Clock = function Clock(_ref) {
     }))];
   }));
 };
-var Clock$1 = Clock;
 
-export { Clock$1 as default };
+export { Clock as default };

package/dist/components/clock/column.cjs

@@ -0,0 +1,92 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hooks = require('./hooks.cjs');
+var menu = require('../menu/menu.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks$1 = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  menu: function menu(props) {
+    return [{
+      overflowX: "musaex-6ikm8r",
+      overflowY: "musaex-10wlt62 musaex-r8ctv5",
+      width: "musaex-yueg9c",
+      marginBlock: "musaex-7jmdrq",
+      marginTop: null,
+      marginBottom: null,
+      "::-webkit-scrollbar_width": "musaex-z31nut",
+      "::-webkit-scrollbar_backgroundColor": "musaex-1uowca5",
+      "::-webkit-scrollbar-thumb_borderRadius": "musaex-11y6kk5",
+      "::-webkit-scrollbar-thumb_borderStartStartRadius": null,
+      "::-webkit-scrollbar-thumb_borderStartEndRadius": null,
+      "::-webkit-scrollbar-thumb_borderEndStartRadius": null,
+      "::-webkit-scrollbar-thumb_borderEndEndRadius": null,
+      "::-webkit-scrollbar-thumb_borderTopLeftRadius": null,
+      "::-webkit-scrollbar-thumb_borderTopRightRadius": null,
+      "::-webkit-scrollbar-thumb_borderBottomLeftRadius": null,
+      "::-webkit-scrollbar-thumb_borderBottomRightRadius": null,
+      "::-webkit-scrollbar-thumb_backgroundColor": "musaex-1cj4lvr",
+      $$css: true
+    }, {
+      "--b44ld2": props.scrollbarThumbColor != null ? props.scrollbarThumbColor : "initial"
+    }];
+  }
+};
+var Column = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var unit = _ref.unit,
+    value = _ref.value,
+    onChange = _ref.onChange;
+  var timeUnit = hooks.useTimeUnit(unit);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Clock);
+  var menuRef = React.useRef(null);
+  var theme = hooks$1.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);
+  }, [value]);
+  var selectedKeys = React.useMemo(function () {
+    if (relax.isVoid(value)) return void 0;
+    return [value];
+  }, [value]);
+  var styled = {
+    menu: stylex.default.props(styles.menu({
+      scrollbarThumbColor: theme.colors[colors.ColorToken.Secondary],
+      outlineColor: theme.colors[colors.ColorToken.OutlineVariant]
+    })),
+    item: {
+      className: "musaex-yueg9c musaex-78zum5 musaex-l56j7k"
+    }
+  };
+  return /*#__PURE__*/React.createElement(menu.default, {
+    selectedKeys: selectedKeys,
+    ref: menuRef,
+    className: relax.clsx(styled.menu.className, classNames[className.ClockClassToken.Column]),
+    style: styled.menu.style,
+    items: Array.from(Array(timeUnit).keys()).map(function (step) {
+      return {
+        key: step,
+        label: step.toString().padStart(2, "0"),
+        className: styled.item.className,
+        style: styled.item.style
+      };
+    }),
+    onClick: onClick
+  });
+});
+
+exports.default = Column;

package/dist/components/clock/{column.js → column.mjs}

@@ -1,13 +1,13 @@
 import React, { forwardRef, useRef, useCallback, useImperativeHandle, useEffect, useMemo } from 'react';
-import { useTimeUnit } from './hooks.js';
-import Menu from '../menu/menu.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { ClockClassToken } from '../../utils/class-name.js';
+import { useTimeUnit } from './hooks.mjs';
+import Menu from '../menu/menu.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { ClockClassToken } from '../../utils/class-name.mjs';
 import { isVoid, clsx } 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 { ComponentToken } from '../../utils/component-token.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   menu: function menu(props) {
@@ -62,7 +62,7 @@ var Column = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return [value];
   }, [value]);
   var styled = {
-    menu: props(styles.menu({
+    menu: _stylex.props(styles.menu({
       scrollbarThumbColor: theme.colors[ColorToken.Secondary],
       outlineColor: theme.colors[ColorToken.OutlineVariant]
     })),

package/dist/components/clock/hooks.cjs

@@ -0,0 +1,12 @@
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var types = require('./types.cjs');
+
+var useTimeUnit = function useTimeUnit(unit) {
+  var units = React.useMemo(function () {
+    return _defineProperty(_defineProperty(_defineProperty({}, types.TimeUnit.Hour, 24), types.TimeUnit.Minute, 60), types.TimeUnit.Second, 60);
+  }, []);
+  return units[unit];
+};
+
+exports.useTimeUnit = useTimeUnit;

package/dist/components/clock/{hooks.js → hooks.mjs}

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { useMemo } from 'react';
-import { TimeUnit } from './types.js';
+import { TimeUnit } from './types.mjs';
 
 var useTimeUnit = function useTimeUnit(unit) {
   var units = useMemo(function () {

package/dist/components/clock/types.cjs

@@ -0,0 +1,6 @@
+exports.TimeUnit = void 0;
+(function (TimeUnit) {
+  TimeUnit["Hour"] = "hour";
+  TimeUnit["Minute"] = "minute";
+  TimeUnit["Second"] = "second";
+})(exports.TimeUnit || (exports.TimeUnit = {}));

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 export declare enum TimeUnit {
     Hour = "hour",
     Minute = "minute",