musae 0.2.26 → 0.3.0

package/dist/components/tag/tag.cjs

@@ -0,0 +1,123 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+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 theme = require('../theme/theme.cjs');
+var colors = require('../../utils/colors.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var close = require('../icon/icons/navigation/close.cjs');
+
+var styles = {
+  tag: function tag(props) {
+    return [{
+      backgroundColor: "musaex-q1mx2j",
+      color: "musaex-19dipnz",
+      display: "musaex-3nfvp2",
+      flexDirection: "musaex-1q0g3np",
+      alignItems: "musaex-6s0dn4",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
+    }];
+  },
+  small: {
+    paddingInline: "musaex-n18ftv",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: "musaex-1i37kmv",
+    paddingTop: null,
+    paddingBottom: null,
+    borderRadius: "musaex-1fioaya",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    gap: "musaex-90xh4w",
+    rowGap: null,
+    columnGap: null,
+    $$css: true
+  },
+  medium: {
+    paddingInline: "musaex-1dhq86w",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: "musaex-4bkepr",
+    paddingTop: null,
+    paddingBottom: null,
+    borderRadius: "musaex-18pg0zq",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    gap: "musaex-4ttznp",
+    rowGap: null,
+    columnGap: null,
+    $$css: true
+  },
+  large: {
+    paddingInline: "musaex-y0sash",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: "musaex-15v7278",
+    paddingTop: null,
+    paddingBottom: null,
+    borderRadius: "musaex-1u07kge",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    gap: "musaex-1lsrmdg",
+    rowGap: null,
+    columnGap: null,
+    $$css: true
+  }
+};
+var Tag = function Tag(_ref) {
+  var children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    className$1 = _ref.className,
+    style = _ref.style,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? false : _ref$closable,
+    onClose = _ref.onClose,
+    leading = _ref.leading;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Tag);
+  var theme$1 = hooks.useTheme();
+  var styled = stylex.default.props(theme.typography.label[size], styles.tag({
+    backgroundColor: theme$1.colors[colors.ColorToken.PrimaryContainer],
+    color: theme$1.colors[colors.ColorToken.OnPrimaryContainer]
+  }), styles[size]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: relax.clsx(classNames[className.TagClassToken.Tag], className$1, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }, leading, children, closable && /*#__PURE__*/React.createElement(close.default, {
+    onClick: onClose
+  }));
+};
+
+exports.default = Tag;

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

@@ -1,14 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { clsx } from '@aiszlab/relax';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TagClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { typography } from '../theme/theme.js';
-import { ColorToken } from '../../utils/colors.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import Close from '../icon/icons/navigation/close.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TagClassToken } 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 { typography } from '../theme/theme.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import Close from '../icon/icons/navigation/close.mjs';
 
 var styles = {
   tag: function tag(props) {
@@ -106,7 +106,7 @@ var Tag = function Tag(_ref) {
     leading = _ref.leading;
   var classNames = useClassNames(ComponentToken.Tag);
   var theme = useTheme();
-  var styled = props(typography.label[size], styles.tag({
+  var styled = _stylex.props(typography.label[size], styles.tag({
     backgroundColor: theme.colors[ColorToken.PrimaryContainer],
     color: theme.colors[ColorToken.OnPrimaryContainer]
   }), styles[size]);
@@ -117,6 +117,5 @@ var Tag = function Tag(_ref) {
     onClick: onClose
   }));
 };
-var Tag$1 = Tag;
 
-export { Tag$1 as default };
+export { Tag as default };

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 type Size = "small" | "medium" | "large";
 /**
  * @description

package/dist/components/theme/hooks.cjs

@@ -0,0 +1,218 @@
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var colors = require('../../utils/colors.cjs');
+var relax = require('@aiszlab/relax');
+var styles = require('../../utils/styles.cjs');
+var rxjs = require('rxjs');
+
+var PALETTE = {
+  primary: {
+    "0": "#000",
+    "10": "#21005D",
+    "20": "#381E72",
+    "30": "#4F378B",
+    "40": "#6750A4",
+    "50": "#7F67BE",
+    "60": "#9A82DB",
+    "70": "#B69DF8",
+    "80": "#D0BCFF",
+    "90": "#EADDFF",
+    "95": "#F6EDFF",
+    "99": "#FFFBFE",
+    "100": "#FFF"
+  },
+  secondary: {
+    "0": "#000",
+    "10": "#1D192B",
+    "20": "#332D41",
+    "30": "#4A4458",
+    "40": "#625B71",
+    "50": "#7A7289",
+    "60": "#958DA5",
+    "70": "#B0A7C0",
+    "80": "#CCC2DC",
+    "90": "#E8DEF8",
+    "95": "#F6EDFF",
+    "99": "#FFFBFE",
+    "100": "#FFF"
+  },
+  tertiary: {
+    "0": "#000",
+    "10": "#31111D",
+    "20": "#492532",
+    "30": "#633B48",
+    "40": "#7D5260",
+    "50": "#986977",
+    "60": "#B58392",
+    "70": "#D29DAC",
+    "80": "#EFB8C8",
+    "90": "#FFD8E4",
+    "95": "#FFECF1",
+    "99": "#FFFBFA",
+    "100": "#FFF"
+  },
+  error: {
+    "0": "#000",
+    "10": "#410E0B",
+    "20": "#601410",
+    "30": "#8C1D18",
+    "40": "#B3261E",
+    "50": "#DC362E",
+    "60": "#E46962",
+    "70": "#EC928E",
+    "80": "#F2B8B5",
+    "90": "#F9DEDC",
+    "95": "#FCEEEE",
+    "99": "#FFFBF9",
+    "100": "#FFF"
+  },
+  neutral: {
+    "0": "#000",
+    "10": "#1D1B20",
+    "20": "#48464C",
+    "30": "#48464C",
+    "40": "#605D64",
+    "50": "#79767D",
+    "60": "#938F96",
+    "70": "#AEA9B1",
+    "80": "#CAC5CD",
+    "90": "#E6E0E9",
+    "95": "#F5EFF7",
+    "99": "#FFFBFE",
+    "100": "#FFF"
+  },
+  neutralVariant: {
+    "0": "#000",
+    "10": "#1D1A22",
+    "20": "#322F37",
+    "30": "#49454F",
+    "40": "#605D66",
+    "50": "#79747E",
+    "60": "#938F99",
+    "70": "#AEA9B4",
+    "80": "#CAC4D0",
+    "90": "#E7E0EC",
+    "95": "#F5EEFA",
+    "99": "#FFFBFE",
+    "100": "#FFF"
+  },
+  success: {
+    "0": "#36c450",
+    "100": "#34be4d"
+  },
+  warning: {
+    "0": "#ffce22",
+    "100": "#ffce22"
+  }
+};
+/**
+ * @description
+ * theme context
+ */
+var Context = /*#__PURE__*/React.createContext({
+  colors: colors.toColors(PALETTE, "light"),
+  mode: "light",
+  toggle: function toggle() {
+    return void 0;
+  }
+});
+/**
+ * @author murukal
+ *
+ * @description
+ * hook wrapper for emotion theme hook
+ * because emotion theme has the default value
+ * but the default value can not be changed
+ * set the preset theme for musae ui component
+ */
+var useTheme = function useTheme() {
+  return React.useContext(Context);
+};
+/**
+ * @description
+ * inject css names and styles into html element
+ * for animations
+ *
+ * u may ask: why add a single hook for this?
+ * i will answer: because i want to keep the code clean.
+ */
+var useSwitchable = function useSwitchable(_ref) {
+  var theme = _ref.theme;
+  var _useState = React.useState("light"),
+    _useState2 = _slicedToArray(_useState, 2),
+    mode = _useState2[0],
+    setMode = _useState2[1];
+  var isDark = mode === "dark";
+  var trigger = React.useRef(null);
+  var colors$1 = React.useMemo(function () {
+    return colors.toColors(theme.palette, mode);
+  }, [mode, theme.palette]);
+  var styled = {
+    "default": {
+      className: "musaex-ynce87 musaex-15342hd musaex-goest1 musaex-1sgbmat"
+    },
+    light: {
+      className: "musaex-19aimcq musaex-11ovs71 musaex-1cslmry"
+    },
+    dark: {
+      className: "musaex-ntwwlm musaex-jitcrl musaex-19v9tfi"
+    }
+  };
+  var repaint = relax.useEvent(function (_mode) {
+    var _document$documentEle, _document$documentEle2;
+    var _isDark = _mode === "dark";
+    (_document$documentEle = document.documentElement.classList).remove.apply(_document$documentEle, _toConsumableArray(styles.toClassList((_isDark ? styled.light : styled.dark).className)));
+    (_document$documentEle2 = document.documentElement.classList).add.apply(_document$documentEle2, _toConsumableArray(styles.toClassList(styled[_mode].className)));
+    document.documentElement.style.backgroundColor = _isDark ? theme.palette.neutral[0] : theme.palette.neutral[100];
+  });
+  relax.useMounted(function () {
+    var _document$documentEle3;
+    // set default class names
+    (_document$documentEle3 = document.documentElement.classList).add.apply(_document$documentEle3, _toConsumableArray(styles.toClassList(styled["default"].className)));
+    new rxjs.Observable(function (subscriber) {
+      trigger.current = subscriber;
+    }).pipe(rxjs.distinctUntilChanged()).subscribe(function (_mode) {
+      repaint(_mode);
+      setMode(_mode);
+    });
+  });
+  // dark, light mode switch
+  var toggle = relax.useEvent(function (event) {
+    var modeSwitchTo = isDark ? "light" : "dark";
+    // dom not support animation
+    if (!relax.isFunction(document.startViewTransition)) {
+      var _trigger$current;
+      (_trigger$current = trigger.current) === null || _trigger$current === void 0 || _trigger$current.next(modeSwitchTo);
+      return;
+    }
+    var animation = document.startViewTransition(function () {
+      var _trigger$current2;
+      (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(modeSwitchTo);
+    });
+    animation.ready.then(function () {
+      var _event$clientX, _event$clientY;
+      var x = (_event$clientX = event === null || event === void 0 ? void 0 : event.clientX) !== null && _event$clientX !== void 0 ? _event$clientX : 0;
+      var y = (_event$clientY = event === null || event === void 0 ? void 0 : event.clientY) !== null && _event$clientY !== void 0 ? _event$clientY : 0;
+      var radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
+      var clipPath = ["circle(0px at ".concat(x, "px ").concat(y, "px)"), "circle(".concat(radius, "px at ").concat(x, "px ").concat(y, "px)")];
+      document.documentElement.animate({
+        clipPath: isDark ? [].concat(clipPath).reverse() : clipPath
+      }, {
+        duration: 300,
+        easing: "ease-in",
+        pseudoElement: isDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
+      });
+    });
+  });
+  return {
+    mode: mode,
+    toggle: toggle,
+    colors: colors$1
+  };
+};
+
+exports.Context = Context;
+exports.PALETTE = PALETTE;
+exports.useSwitchable = useSwitchable;
+exports.useTheme = useTheme;

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

@@ -1,9 +1,9 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { createContext, useContext, useState, useRef, useMemo } from 'react';
-import { toColors } from '../../utils/colors.js';
+import { toColors } from '../../utils/colors.mjs';
 import { useEvent, useMounted, isFunction } from '@aiszlab/relax';
-import { toClassList } from '../../utils/styles.js';
+import { toClassList } from '../../utils/styles.mjs';
 import { Observable, distinctUntilChanged } from 'rxjs';
 
 var PALETTE = {

package/dist/components/theme/theme-provider.cjs

@@ -0,0 +1,36 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hooks = require('./hooks.cjs');
+var deepmerge = require('deepmerge');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * theme provider
+ * if user provider theme, we will merge it with presets theme
+ */
+var ThemeProvider = function ThemeProvider(props) {
+  var theme = React.useMemo(function () {
+    var _props$theme;
+    return deepmerge((_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : {}, {
+      palette: hooks.PALETTE
+    });
+  }, [props.theme]);
+  var _useSwitchable = hooks.useSwitchable({
+      theme: theme
+    }),
+    mode = _useSwitchable.mode,
+    toggle = _useSwitchable.toggle,
+    colors = _useSwitchable.colors;
+  return /*#__PURE__*/React.createElement(hooks.Context.Provider, {
+    value: {
+      colors: colors,
+      mode: mode,
+      toggle: toggle
+    }
+  }, props.children);
+};
+
+exports.default = ThemeProvider;

package/dist/components/theme/{theme-provider.js → theme-provider.mjs}

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { PALETTE, useSwitchable, Context } from './hooks.js';
+import { PALETTE, useSwitchable, Context } from './hooks.mjs';
 import deepmerge from 'deepmerge';
 
 /**
@@ -30,6 +30,5 @@ var ThemeProvider = function ThemeProvider(props) {
     }
   }, props.children);
 };
-var ThemeProvider$1 = ThemeProvider;
 
-export { ThemeProvider$1 as default };
+export { ThemeProvider as default };

package/dist/components/theme/theme.cjs

@@ -0,0 +1,145 @@
+/**
+ * @description
+ * typography - display
+ */
+var display = {
+  small: {
+    fontSize: "musaex-qozcyj",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-bzal7z",
+    letterSpacing: "musaex-djfh5p",
+    $$css: true
+  },
+  medium: {
+    fontSize: "musaex-ujqvrl",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-5agonf",
+    letterSpacing: "musaex-djfh5p",
+    $$css: true
+  },
+  large: {
+    fontSize: "musaex-8p9s6c",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-1kke7aa",
+    letterSpacing: "musaex-1uqs5or",
+    $$css: true
+  }
+};
+/**
+ * @description
+ * typography - headline
+ */
+var headline = {
+  small: {
+    fontSize: "musaex-1pvqxga",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-cgk4ki",
+    letterSpacing: "musaex-djfh5p",
+    $$css: true
+  },
+  medium: {
+    fontSize: "musaex-neq65o",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-1vy86p0",
+    letterSpacing: "musaex-djfh5p",
+    $$css: true
+  },
+  large: {
+    fontSize: "musaex-1s3cmhv",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-1cpheol",
+    letterSpacing: "musaex-djfh5p",
+    $$css: true
+  }
+};
+/**
+ * @description
+ * typography - title
+ */
+var title = {
+  small: {
+    fontSize: "musaex-if65rj",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-1fc57z9",
+    letterSpacing: "musaex-2xi6nx",
+    $$css: true
+  },
+  medium: {
+    fontSize: "musaex-1j61zf2",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-1o2sk6j",
+    letterSpacing: "musaex-t7o8hm",
+    $$css: true
+  },
+  large: {
+    fontSize: "musaex-1i1m3gp",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-gif2c7",
+    letterSpacing: "musaex-djfh5p",
+    $$css: true
+  }
+};
+/**
+ * @description
+ * typography - body
+ */
+var body = {
+  small: {
+    fontSize: "musaex-fifm61",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-1d3mw78",
+    letterSpacing: "musaex-1nkyu79",
+    $$css: true
+  },
+  medium: {
+    fontSize: "musaex-if65rj",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-1fc57z9",
+    letterSpacing: "musaex-1uqs5or",
+    $$css: true
+  },
+  large: {
+    fontSize: "musaex-1j61zf2",
+    fontWeight: "musaex-o1l8bm",
+    lineHeight: "musaex-1o2sk6j",
+    letterSpacing: "musaex-1ati076",
+    $$css: true
+  }
+};
+/**
+ * @description
+ * typography - label
+ */
+var label = {
+  small: {
+    fontSize: "musaex-1j6dyjg",
+    fontWeight: "musaex-k50ysn",
+    lineHeight: "musaex-1d3mw78",
+    letterSpacing: "musaex-1ati076",
+    $$css: true
+  },
+  medium: {
+    fontSize: "musaex-fifm61",
+    fontWeight: "musaex-k50ysn",
+    lineHeight: "musaex-1d3mw78",
+    letterSpacing: "musaex-1ati076",
+    $$css: true
+  },
+  large: {
+    fontSize: "musaex-if65rj",
+    fontWeight: "musaex-k50ysn",
+    lineHeight: "musaex-1fc57z9",
+    letterSpacing: "musaex-2xi6nx",
+    $$css: true
+  }
+};
+var typography = {
+  body: body,
+  label: label,
+  headline: headline,
+  display: display,
+  title: title
+};
+
+exports.headline = headline;
+exports.typography = typography;

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

@@ -0,0 +1,64 @@
+/**
+ * @description
+ * elevations
+ */
+var elevations = {
+  none: "var(--musaex-gmufu8)",
+  xsmall: "var(--musaex-15zostt)",
+  small: "var(--musaex-1trg6py)",
+  medium: "var(--musaex-4poz8g)",
+  large: "var(--musaex-1vq77kn)",
+  xlarge: "var(--musaex-1yt3x0a)",
+  __themeName__: "musaex-7eja5x"
+};
+/**
+ * @description
+ * spacing
+ */
+var spacing = {
+  none: "var(--musaex-1wblvyz)",
+  smallest: "var(--musaex-dojqt2)",
+  xxxsmall: "var(--musaex-1h5s2h0)",
+  xxsmall: "var(--musaex-qk2ac7)",
+  xsmall: "var(--musaex-h30iw9)",
+  small: "var(--musaex-vk5id6)",
+  medium: "var(--musaex-1ncxh3n)",
+  large: "var(--musaex-oohzsl)",
+  xlarge: "var(--musaex-1tzp6vk)",
+  xxlarge: "var(--musaex-15cw4i4)",
+  xxxlarge: "var(--musaex-1n7xs5j)",
+  auto: "var(--musaex-68a8pz)",
+  __themeName__: "musaex-r8i1cz"
+};
+/**
+ * @description
+ * sizes
+ */
+var sizes = {
+  none: "var(--musaex-1aj7t22)",
+  smallest: "var(--musaex-1ax7z96)",
+  xxxxxxsmall: "var(--musaex-jdzqnm)",
+  xxxxxsmall: "var(--musaex-1hydgie)",
+  xxxxsmall: "var(--musaex-fwu7zn)",
+  xxxsmall: "var(--musaex-1l9c3uf)",
+  xxsmall: "var(--musaex-cx2xv5)",
+  xsmall: "var(--musaex-rlgvtq)",
+  small: "var(--musaex-1qsoxbc)",
+  medium: "var(--musaex-16n5srz)",
+  large: "var(--musaex-wll1cf)",
+  xlarge: "var(--musaex-cftog7)",
+  xxlarge: "var(--musaex-laggmb)",
+  xxxlarge: "var(--musaex-xrqq76)",
+  xxxxlarge: "var(--musaex-1spnrok)",
+  xxxxxlarge: "var(--musaex-11uhodo)",
+  xxxxxxlarge: "var(--musaex-2h23ia)",
+  infinity: "var(--musaex-1rrllem)",
+  full: "var(--musaex-1qj6wod)",
+  half: "var(--musaex-70uu0v)",
+  auto: "var(--musaex-1yg5bqe)",
+  __themeName__: "musaex-qhz0mn"
+};
+
+exports.elevations = elevations;
+exports.sizes = sizes;
+exports.spacing = spacing;

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

@@ -0,0 +1,31 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var dayjs = require('dayjs');
+var React = require('react');
+
+/**
+ * @description
+ * value
+ */
+var useValue = function useValue(_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    valueInProps = _ref2[0],
+    pickerRef = _ref2[1];
+  var _useControlledState = relax.useControlledState(valueInProps, {
+      defaultState: dayjs()
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    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]);
+  return {
+    value: value,
+    onChange: onChange
+  };
+};
+
+exports.useValue = useValue;