musae 1.3.1-beta.2 → 1.3.1-beta.21

package/dist/components/textarea/textarea.cjs

@@ -4,8 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var styles = require('./styles.cjs');
 var React = require('react');
-var input = require('../input/input.cjs');
+var styles_stylex = require('../input/styles.stylex.cjs');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var relax = require('@aiszlab/relax');
 var useClassNames = require('../../hooks/use-class-names.cjs');
@@ -13,20 +14,6 @@ var className = require('@aiszlab/relax/class-name');
 var context = require('./context.cjs');
 var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 
-var styles = {
-  textarea: {
-    "default": {
-      k8WAf4: null,
-      kg3NbH: null,
-      kzqmXN: "musaex-92755x",
-      kVQacm: "musaex-b3r6kr",
-      $$css: true
-    },
-    unbordered: {
-      kGVxlE: "musaex-1gnnqk1",
-      $$css: true
-    }
-  }};
 var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
     value = _ref.value,
@@ -55,15 +42,8 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange === null || onChange === void 0 || onChange(event.target.value);
   });
   var styled = {
-    textarea: stylex.props(input.styles.inputor, styles.textarea["default"], invalid && input.styles.invalid, !border && styles.textarea.unbordered),
-    input: {
-      0: {
-        className: "musaex-qg7gut musaex-11owsmz musaex-81lxrv musaex-98rzlu musaex-jbqb8w musaex-tt52l0 musaex-ng3xce musaex-1a2a7pz"
-      },
-      1: {
-        className: "musaex-qg7gut musaex-11owsmz musaex-81lxrv musaex-98rzlu musaex-jbqb8w musaex-ng3xce musaex-1a2a7pz"
-      }
-    }[!!resize << 0]
+    textarea: stylex.props(styles_stylex.default.root.base, styles.default.textarea.base, invalid && styles_stylex.default.root.invalid, !border && styles.default.textarea.unbordered),
+    input: stylex.props(styles.default.input.base, resize && styles.default.input.resizable)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.textarea, className$1, styled.textarea.className),

package/dist/components/textarea/textarea.mjs

@@ -1,7 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React, { forwardRef, useId } from 'react';
-import { styles as styles$1 } from '../input/input.mjs';
+import styles$1 from '../input/styles.stylex.mjs';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useControlledState, useEvent } from '@aiszlab/relax';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
@@ -9,20 +10,6 @@ import { stringify } from '@aiszlab/relax/class-name';
 import { CLASS_NAMES } from './context.mjs';
 import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 
-var styles = {
-  textarea: {
-    "default": {
-      k8WAf4: null,
-      kg3NbH: null,
-      kzqmXN: "musaex-92755x",
-      kVQacm: "musaex-b3r6kr",
-      $$css: true
-    },
-    unbordered: {
-      kGVxlE: "musaex-1gnnqk1",
-      $$css: true
-    }
-  }};
 var Textarea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
     value = _ref.value,
@@ -51,15 +38,8 @@ var Textarea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange === null || onChange === void 0 || onChange(event.target.value);
   });
   var styled = {
-    textarea: props(styles$1.inputor, styles.textarea["default"], invalid && styles$1.invalid, !border && styles.textarea.unbordered),
-    input: {
-      0: {
-        className: "musaex-qg7gut musaex-11owsmz musaex-81lxrv musaex-98rzlu musaex-jbqb8w musaex-tt52l0 musaex-ng3xce musaex-1a2a7pz"
-      },
-      1: {
-        className: "musaex-qg7gut musaex-11owsmz musaex-81lxrv musaex-98rzlu musaex-jbqb8w musaex-ng3xce musaex-1a2a7pz"
-      }
-    }[!!resize << 0]
+    textarea: props(styles$1.root.base, styles.textarea.base, invalid && styles$1.root.invalid, !border && styles.textarea.unbordered),
+    input: props(styles.input.base, resize && styles.input.resizable)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.textarea, className, styled.textarea.className),

package/dist/components/theme/theme.cjs

@@ -139,12 +139,7 @@ var $label = {
  * @description scrollbar
  */
 var $scrollbar = {
-  "default": {
-    k5wCbM: "musaex-1597r2g",
-    k6w4Gs: "musaex-kesivb",
-    $$css: true
-  }
-};
+  };
 
 exports.$body = $body;
 exports.$display = $display;

package/dist/components/theme/theme.mjs

@@ -137,11 +137,6 @@ var $label = {
  * @description scrollbar
  */
 var $scrollbar = {
-  "default": {
-    k5wCbM: "musaex-1597r2g",
-    k6w4Gs: "musaex-kesivb",
-    $$css: true
-  }
-};
+  };
 
 export { $body, $display, $headline, $label, $scrollbar, $title };

package/dist/components/theme/tokens.stylex.cjs

@@ -19,5 +19,13 @@ var OPACITY = {
   thickest: 0.38,
   heaviest: 0.9
 };
+/**
+ * @zh 响应式断点。`mobile` 匹配宽度 < 905px 的视口。
+ * @en Responsive breakpoints. `mobile` matches viewports narrower than 905px.
+ */
+var mediaQueries = {
+  mobile: "(max-width: 904px)"
+};
 
 exports.OPACITY = OPACITY;
+exports.mediaQueries = mediaQueries;

package/dist/components/theme/tokens.stylex.d.ts

@@ -7,16 +7,16 @@ import { ValueOf } from "@aiszlab/relax/types";
  * - xsmall/small/medium/large/xlarge: 旧版通用 token,保留以兼容
  */
 export declare const elevations: import("@stylexjs/stylex").VarGroup<Readonly<{
+    none: string;
+    medium: string;
+    small: string;
+    large: string;
     0: string;
     1: string;
-    none: string;
     2: string;
     3: string;
     4: string;
     xsmall: string;
-    small: string;
-    medium: string;
-    large: string;
     xlarge: string;
 }>, symbol>;
 /**
@@ -152,6 +152,20 @@ export declare const duration: import("@stylexjs/stylex").VarGroup<Readonly<{
  * @zh 响应式断点。`mobile` 匹配宽度 < 905px 的视口。
  * @en Responsive breakpoints. `mobile` matches viewports narrower than 905px.
  */
+export declare const mediaQueries: {
+    readonly mobile: "(max-width: 904px)";
+};
 export declare const breakpoints: {
     mobile: string;
 };
+/**
+ * @zh Material 3 Search View 尺寸
+ * @en Material 3 Search View dimensions
+ */
+export declare const searchViewSizes: import("@stylexjs/stylex").VarGroup<Readonly<{
+    minWidth: string;
+    maxWidth: string;
+    minHeight: string;
+    fullScreenHeaderHeight: string;
+    resultItemHeight: string;
+}>, symbol>;

package/dist/components/theme/tokens.stylex.mjs

@@ -17,5 +17,12 @@ var OPACITY = {
   thickest: 0.38,
   heaviest: 0.9
 };
+/**
+ * @zh 响应式断点。`mobile` 匹配宽度 < 905px 的视口。
+ * @en Responsive breakpoints. `mobile` matches viewports narrower than 905px.
+ */
+var mediaQueries = {
+  mobile: "(max-width: 904px)"
+};
 
-export { OPACITY };
+export { OPACITY, mediaQueries };

package/dist/components/time-picker/context.cjs

@@ -8,7 +8,6 @@ var React = require('react');
  */
 var CLASS_NAMES = {
   picker: "time-picker",
-  input: "time-picker__input",
   panel: "time-picker__panel",
   panelFooter: "time-picker__panel-footer"
 };

package/dist/components/time-picker/context.d.ts

@@ -4,14 +4,12 @@
  */
 export declare const CLASS_NAMES: {
     picker: string;
-    input: string;
     panel: string;
     panelFooter: string;
 };
 export declare const Context: import("react").Context<{
     classNames: {
         picker: string;
-        input: string;
         panel: string;
         panelFooter: string;
     };

package/dist/components/time-picker/context.mjs

@@ -6,7 +6,6 @@ import { createContext } from 'react';
  */
 var CLASS_NAMES = {
   picker: "time-picker",
-  input: "time-picker__input",
   panel: "time-picker__panel",
   panelFooter: "time-picker__panel-footer"
 };

package/dist/components/time-picker/hooks.cjs

@@ -6,13 +6,12 @@ var dayjs = require('dayjs');
 var React = require('react');
 
 /**
- * @description
- * value
+ * @zh 管理时间选择值
+ * @en Manage the selected time value
  */
 var useValue = function useValue(_ref) {
-  var _ref2 = _slicedToArray(_ref, 2),
-    valueInProps = _ref2[0],
-    pickerRef = _ref2[1];
+  var _ref2 = _slicedToArray(_ref, 1),
+    valueInProps = _ref2[0];
   var _useControlledState = relax.useControlledState(valueInProps, {
       defaultState: dayjs()
     }),
@@ -20,10 +19,8 @@ var useValue = function useValue(_ref) {
     value = _useControlledState2[0],
     setValue = _useControlledState2[1];
   var onChange = React.useCallback(function (value) {
-    var _pickerRef$current;
     setValue(value);
-    (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || _pickerRef$current.close();
-  }, [setValue, pickerRef]);
+  }, [setValue]);
   return {
     value: value,
     onChange: onChange

package/dist/components/time-picker/hooks.d.ts

@@ -1,13 +1,10 @@
 import type { TimePickerProps } from "../../types/time-picker";
 import dayjs, { type Dayjs } from "dayjs";
-import { type RefObject } from "react";
-import type { PickerRef } from "../../types/picker";
-import type { Nullable } from "@aiszlab/relax/types";
 /**
- * @description
- * value
+ * @zh 管理时间选择值
+ * @en Manage the selected time value
  */
-export declare const useValue: ([valueInProps, pickerRef]: [TimePickerProps["value"], RefObject<Nullable<PickerRef>>]) => {
+export declare const useValue: ([valueInProps]: [TimePickerProps["value"]]) => {
     value: dayjs.Dayjs;
     onChange: (value: Dayjs) => void;
 };

package/dist/components/time-picker/hooks.mjs

@@ -4,13 +4,12 @@ import dayjs from 'dayjs';
 import { useCallback } from 'react';
 
 /**
- * @description
- * value
+ * @zh 管理时间选择值
+ * @en Manage the selected time value
  */
 var useValue = function useValue(_ref) {
-  var _ref2 = _slicedToArray(_ref, 2),
-    valueInProps = _ref2[0],
-    pickerRef = _ref2[1];
+  var _ref2 = _slicedToArray(_ref, 1),
+    valueInProps = _ref2[0];
   var _useControlledState = useControlledState(valueInProps, {
       defaultState: dayjs()
     }),
@@ -18,10 +17,8 @@ var useValue = function useValue(_ref) {
     value = _useControlledState2[0],
     setValue = _useControlledState2[1];
   var onChange = useCallback(function (value) {
-    var _pickerRef$current;
     setValue(value);
-    (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || _pickerRef$current.close();
-  }, [setValue, pickerRef]);
+  }, [setValue]);
   return {
     value: value,
     onChange: onChange

package/dist/components/time-picker/panel.cjs

@@ -4,10 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var styles = require('./styles.cjs');
 var React = require('react');
 var clock = require('../clock/clock.cjs');
 var button = require('../button/button.cjs');
 var dayjs = require('dayjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var className = require('@aiszlab/relax/class-name');
 var useLocale = require('../../locale/use-locale.cjs');
 var context = require('./context.cjs');
@@ -48,12 +50,8 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setValue([currentAt.hour(), currentAt.minute(), currentAt.second()]);
   }, []);
   var styled = {
-    panel: {
-      className: "musaex-15o2aup"
-    },
-    footer: {
-      className: "musaex-uvson1 musaex-13fuv20 musaex-6ogecl musaex-78zum5 musaex-1qughib musaex-6s0dn4 musaex-11owsmz musaex-81lxrv musaex-q100f9"
-    }
+    panel: stylex.props(styles.default.panel),
+    footer: stylex.props(styles.default.footer)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.panel, styled.panel.className),

package/dist/components/time-picker/panel.mjs

@@ -1,15 +1,17 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React, { forwardRef, useContext, useState, useImperativeHandle, useCallback } from 'react';
 import Clock from '../clock/clock.mjs';
 import { Button } from '../button/button.mjs';
 import dayjs from 'dayjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { useLocale } from '../../locale/use-locale.mjs';
 import { Context } from './context.mjs';
 import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 
-var Panel = /*#__PURE__*/forwardRef(function (props, ref) {
+var Panel = /*#__PURE__*/forwardRef(function (props$1, ref) {
   var _useContext = useContext(Context),
     classNames = _useContext.classNames;
   var _useState = useState(),
@@ -23,11 +25,11 @@ var Panel = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return {
       reset: function reset() {
-        if (!props.value) {
+        if (!props$1.value) {
           setValue(void 0);
           return;
         }
-        setValue([props.value.hour(), props.value.minute(), props.value.second()]);
+        setValue([props$1.value.hour(), props$1.value.minute(), props$1.value.second()]);
       }
     };
   });
@@ -37,19 +39,15 @@ var Panel = /*#__PURE__*/forwardRef(function (props, ref) {
   var confirm = useCallback(function () {
     var _props$onChange;
     if (!value) return;
-    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, dayjs().hour(value[0]).minute(value[1]).second(value[2]));
-  }, [props, value]);
+    (_props$onChange = props$1.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props$1, dayjs().hour(value[0]).minute(value[1]).second(value[2]));
+  }, [props$1, value]);
   var reset = useCallback(function () {
     var currentAt = dayjs();
     setValue([currentAt.hour(), currentAt.minute(), currentAt.second()]);
   }, []);
   var styled = {
-    panel: {
-      className: "musaex-15o2aup"
-    },
-    footer: {
-      className: "musaex-uvson1 musaex-13fuv20 musaex-6ogecl musaex-78zum5 musaex-1qughib musaex-6s0dn4 musaex-11owsmz musaex-81lxrv musaex-q100f9"
-    }
+    panel: props(styles.panel),
+    footer: props(styles.footer)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.panel, styled.panel.className),

package/dist/components/time-picker/styles.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  panel: {
+    kUOVxO: "musaex-15o2aup",
+    $$css: true
+  },
+  footer: {
+    kEafiO: "musaex-uvson1",
+    kPef9Z: "musaex-13fuv20",
+    kLZC3w: "musaex-6ogecl",
+    k1xSpc: "musaex-78zum5",
+    kjj79g: "musaex-1qughib",
+    kGNEyG: "musaex-6s0dn4",
+    k8WAf4: "musaex-11owsmz",
+    kg3NbH: "musaex-81lxrv",
+    kAzted: "musaex-q100f9",
+    $$css: true
+  }
+};
+
+exports.default = styles;

package/dist/components/time-picker/styles.d.ts

@@ -0,0 +1,17 @@
+declare const styles: Readonly<{
+    readonly panel: Readonly<{
+        readonly marginInline: import("@stylexjs/stylex").StyleXClassNameFor<"marginInline", string>;
+    }>;
+    readonly footer: Readonly<{
+        readonly borderTopWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopWidth", string>;
+        readonly borderTopStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopStyle", "solid">;
+        readonly borderTopColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopColor", "var(--color-outline-variant)">;
+        readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+        readonly justifyContent: import("@stylexjs/stylex").StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+        readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        readonly minHeight: import("@stylexjs/stylex").StyleXClassNameFor<"minHeight", string>;
+    }>;
+}>;
+export default styles;

package/dist/components/time-picker/styles.mjs

@@ -0,0 +1,20 @@
+var styles = {
+  panel: {
+    kUOVxO: "musaex-15o2aup",
+    $$css: true
+  },
+  footer: {
+    kEafiO: "musaex-uvson1",
+    kPef9Z: "musaex-13fuv20",
+    kLZC3w: "musaex-6ogecl",
+    k1xSpc: "musaex-78zum5",
+    kjj79g: "musaex-1qughib",
+    kGNEyG: "musaex-6s0dn4",
+    k8WAf4: "musaex-11owsmz",
+    kg3NbH: "musaex-81lxrv",
+    kAzted: "musaex-q100f9",
+    $$css: true
+  }
+};
+
+export { styles as default };

package/dist/components/time-picker/time-picker.cjs

@@ -10,7 +10,6 @@ var picker = require('../picker/picker.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var panel = require('./panel.cjs');
 var hooks = require('./hooks.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var relax = require('@aiszlab/relax');
 var input = require('../input/input.cjs');
 var className = require('@aiszlab/relax/class-name');
@@ -21,23 +20,10 @@ var TimePicker = function TimePicker(_ref) {
   var className$1 = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var pickerRef = React.useRef(null);
   var panelRef = React.useRef(null);
-  var _useValue = hooks.useValue([props.value, pickerRef]),
+  var _useValue = hooks.useValue([props.value]),
     value = _useValue.value,
-    onChange = _useValue.onChange;
-  // picked date
-  var picked = React.useMemo(function () {
-    var _$props = stylex.props(input.styles.input),
-      className$1 = _$props.className,
-      style = _$props.style;
-    return /*#__PURE__*/React.createElement("input", {
-      className: className.stringify(classNames.input, className$1),
-      style: style,
-      value: value.format("HH:mm:ss"),
-      readOnly: true
-    });
-  }, [value, classNames]);
+    _onChange = _useValue.onChange;
   var popperEntered = relax.useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
     var _panelRef$current;
     return _regenerator().w(function (_context) {
@@ -54,16 +40,32 @@ var TimePicker = function TimePicker(_ref) {
       classNames: classNames
     }
   }, /*#__PURE__*/React.createElement(picker.default, {
-    ref: pickerRef,
-    className: className.stringify(classNames.picker, className$1),
-    pickable: /*#__PURE__*/React.createElement(panel.default, {
-      value: value,
-      onChange: onChange,
-      ref: panelRef
-    }),
+    pickable: function pickable(_ref3) {
+      var close = _ref3.close;
+      return /*#__PURE__*/React.createElement(panel.default, {
+        value: value,
+        onChange: function onChange(value) {
+          _onChange(value);
+          close();
+        },
+        ref: panelRef
+      });
+    },
     popupWidth: false,
     onPopperEntered: popperEntered
-  }, picked));
+  }, function (_ref4) {
+    var close = _ref4.close,
+      toggle = _ref4.toggle,
+      triggerRef = _ref4.triggerRef;
+    return /*#__PURE__*/React.createElement(input.default, {
+      ref: triggerRef,
+      className: className.stringify(classNames.picker, className$1),
+      value: value.format("HH:mm:ss"),
+      onBlur: close,
+      onClick: toggle,
+      readOnly: true
+    });
+  }));
 };
 
 exports.default = TimePicker;

package/dist/components/time-picker/time-picker.mjs

@@ -1,39 +1,25 @@
 import _regenerator from '@babel/runtime/helpers/regenerator';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useRef, useMemo } from 'react';
+import React, { useRef } from 'react';
 import Picker from '../picker/picker.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import Panel from './panel.mjs';
 import { useValue } from './hooks.mjs';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useEvent } from '@aiszlab/relax';
-import { styles } from '../input/input.mjs';
+import Input from '../input/input.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { Context, CLASS_NAMES } from './context.mjs';
 
 var _excluded = ["className"];
 var TimePicker = function TimePicker(_ref) {
   var className = _ref.className,
-    props$1 = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames(CLASS_NAMES);
-  var pickerRef = useRef(null);
   var panelRef = useRef(null);
-  var _useValue = useValue([props$1.value, pickerRef]),
+  var _useValue = useValue([props.value]),
     value = _useValue.value,
-    onChange = _useValue.onChange;
-  // picked date
-  var picked = useMemo(function () {
-    var _$props = props(styles.input),
-      className = _$props.className,
-      style = _$props.style;
-    return /*#__PURE__*/React.createElement("input", {
-      className: stringify(classNames.input, className),
-      style: style,
-      value: value.format("HH:mm:ss"),
-      readOnly: true
-    });
-  }, [value, classNames]);
+    _onChange = _useValue.onChange;
   var popperEntered = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
     var _panelRef$current;
     return _regenerator().w(function (_context) {
@@ -50,16 +36,32 @@ var TimePicker = function TimePicker(_ref) {
       classNames: classNames
     }
   }, /*#__PURE__*/React.createElement(Picker, {
-    ref: pickerRef,
-    className: stringify(classNames.picker, className),
-    pickable: /*#__PURE__*/React.createElement(Panel, {
-      value: value,
-      onChange: onChange,
-      ref: panelRef
-    }),
+    pickable: function pickable(_ref3) {
+      var close = _ref3.close;
+      return /*#__PURE__*/React.createElement(Panel, {
+        value: value,
+        onChange: function onChange(value) {
+          _onChange(value);
+          close();
+        },
+        ref: panelRef
+      });
+    },
     popupWidth: false,
     onPopperEntered: popperEntered
-  }, picked));
+  }, function (_ref4) {
+    var close = _ref4.close,
+      toggle = _ref4.toggle,
+      triggerRef = _ref4.triggerRef;
+    return /*#__PURE__*/React.createElement(Input, {
+      ref: triggerRef,
+      className: stringify(classNames.picker, className),
+      value: value.format("HH:mm:ss"),
+      onBlur: close,
+      onClick: toggle,
+      readOnly: true
+    });
+  }));
 };
 
 export { TimePicker as default };