musae 0.3.3 → 0.3.5

package/dist/components/switch/switch.cjs

@@ -11,6 +11,7 @@ var colors = require('../../utils/colors.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var componentToken = require('../../utils/component-token.cjs');
+var color = require('@aiszlab/fuzzy/color');
 var check = require('../icon/icons/navigation/check.cjs');
 var close = require('../icon/icons/navigation/close.cjs');
 
@@ -258,28 +259,28 @@ var Switch = function Switch(_ref) {
       backgroundColor: theme.colors[colors.ColorToken.SurfaceContainerHighest],
       color: theme.colors[colors.ColorToken.OnSurfaceVariant]
     }, disabled && {
-      borderColor: colors.toRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium),
-      backgroundColor: colors.toRgba(theme.colors[colors.ColorToken.SurfaceVariant], tokens_stylex.OPACITY.medium),
-      color: colors.toRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker)
+      borderColor: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium),
+      backgroundColor: color.hexToRgba(theme.colors[colors.ColorToken.SurfaceVariant], tokens_stylex.OPACITY.medium),
+      color: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker)
     })), isChecked && styles["switch"].checked(_objectSpread({
       backgroundColor: theme.colors[colors.ColorToken.Primary],
       color: theme.colors[colors.ColorToken.OnPrimary]
     }, disabled && {
-      backgroundColor: colors.toRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium),
+      backgroundColor: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium),
       color: theme.colors[colors.ColorToken.Surface]
     })), disabled && styles["switch"].disabled),
     slider: stylex.default.props(styles.slider.normal(_objectSpread({
       backgroundColor: theme.colors[colors.ColorToken.OnSurfaceVariant],
       color: theme.colors[colors.ColorToken.SurfaceContainerHighest]
     }, disabled && {
-      backgroundColor: colors.toRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker),
+      backgroundColor: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker),
       color: theme.colors[colors.ColorToken.SurfaceContainerHighest]
     })), icon && styles.slider.icon, disabled && styles.slider.disabled, isChecked && styles.slider.checked(_objectSpread({
       backgroundColor: theme.colors[colors.ColorToken.OnPrimary],
       color: theme.colors[colors.ColorToken.OnPrimaryContainer]
     }, disabled && {
       backgroundColor: theme.colors[colors.ColorToken.Surface],
-      color: colors.toRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker)
+      color: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker)
     }))),
     supporting: stylex.default.props(styles.supporting["default"], isChecked && styles.supporting.checked),
     leading: stylex.default.props(styles.supporting.child, styles.leading["default"], isChecked && styles.leading.checked),

package/dist/components/switch/switch.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { SwitchProps } from "./types";
+import type { SwitchProps } from "musae/types/switch";
 declare const Switch: ({ value, style, className, icon, checkedChildren, uncheckedChildren, disabled, onChange, }: SwitchProps) => React.JSX.Element;
 export default Switch;

package/dist/components/switch/switch.mjs

@@ -5,10 +5,11 @@ import { useControlledState, useEvent, clsx } from '@aiszlab/relax';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken, toRgba } from '../../utils/colors.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { SwitchClassToken } from '../../utils/class-name.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
+import { hexToRgba } from '@aiszlab/fuzzy/color';
 import Check from '../icon/icons/navigation/check.mjs';
 import Close from '../icon/icons/navigation/close.mjs';
 
@@ -256,28 +257,28 @@ var Switch = function Switch(_ref) {
       backgroundColor: theme.colors[ColorToken.SurfaceContainerHighest],
       color: theme.colors[ColorToken.OnSurfaceVariant]
     }, disabled && {
-      borderColor: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium),
-      backgroundColor: toRgba(theme.colors[ColorToken.SurfaceVariant], OPACITY.medium),
-      color: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker)
+      borderColor: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium),
+      backgroundColor: hexToRgba(theme.colors[ColorToken.SurfaceVariant], OPACITY.medium),
+      color: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker)
     })), isChecked && styles["switch"].checked(_objectSpread({
       backgroundColor: theme.colors[ColorToken.Primary],
       color: theme.colors[ColorToken.OnPrimary]
     }, disabled && {
-      backgroundColor: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium),
+      backgroundColor: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium),
       color: theme.colors[ColorToken.Surface]
     })), disabled && styles["switch"].disabled),
     slider: _stylex.props(styles.slider.normal(_objectSpread({
       backgroundColor: theme.colors[ColorToken.OnSurfaceVariant],
       color: theme.colors[ColorToken.SurfaceContainerHighest]
     }, disabled && {
-      backgroundColor: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker),
+      backgroundColor: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker),
       color: theme.colors[ColorToken.SurfaceContainerHighest]
     })), icon && styles.slider.icon, disabled && styles.slider.disabled, isChecked && styles.slider.checked(_objectSpread({
       backgroundColor: theme.colors[ColorToken.OnPrimary],
       color: theme.colors[ColorToken.OnPrimaryContainer]
     }, disabled && {
       backgroundColor: theme.colors[ColorToken.Surface],
-      color: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker)
+      color: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker)
     }))),
     supporting: _stylex.props(styles.supporting["default"], isChecked && styles.supporting.checked),
     leading: _stylex.props(styles.supporting.child, styles.leading["default"], isChecked && styles.leading.checked),

package/dist/components/table/body.cjs

@@ -76,7 +76,9 @@ var Body = function Body() {
   }));
   var rows = table.getRowModel().rows;
   var _isEmpty = relax.isEmpty(rows);
-  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(empty.default, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
+  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: table.getAllColumns().length
+  }, /*#__PURE__*/React.createElement(empty.default, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/React.createElement("tr", {
       key: row.id
     }, row.getVisibleCells().map(function (cell) {

package/dist/components/table/body.mjs

@@ -74,7 +74,9 @@ var Body = function Body() {
   }));
   var rows = table.getRowModel().rows;
   var _isEmpty = isEmpty(rows);
-  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Empty, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
+  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: table.getAllColumns().length
+  }, /*#__PURE__*/React.createElement(Empty, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/React.createElement("tr", {
       key: row.id
     }, row.getVisibleCells().map(function (cell) {

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

@@ -1,3 +1,3 @@
-import type { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/tabs";
 declare const Context: import("react").Context<ContextValue | null>;
 export default Context;

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

@@ -1,11 +1,11 @@
 import { type Key, type RefObject } from "react";
-import type { TabItem } from "./types";
+import type { TabItem } from "musae/types/tabs";
 import type { Partialable } from "@aiszlab/relax/types";
 /**
  * @description
  * use tab context
  */
-export declare const useTabsContext: () => import("./types").ContextValue;
+export declare const useTabsContext: () => import("musae/types/tabs").ContextValue;
 /**
  * @description
  * tabs

package/dist/components/tabs/navigation.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { type NavigationProps } from "./types";
+import { type NavigationProps } from "musae/types/tabs";
 declare const Navigation: ({ onChange }: NavigationProps) => React.JSX.Element;
 export default Navigation;

package/dist/components/tabs/panels.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { type PanelsProps } from "./types";
+import { type PanelsProps } from "musae/types/tabs";
 declare const Panels: ({ forceRender, destroyable, activatedKeys }: PanelsProps) => React.JSX.Element;
 export default Panels;

package/dist/components/tabs/tab.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TabItemProps } from "./types";
+import type { TabItemProps } from "musae/types/tabs";
 declare const Tab: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default Tab;

package/dist/components/tabs/tabs.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TabsProps } from "./types";
+import type { TabsProps } from "musae/types/tabs";
 declare const Tabs: ({ items, className, style, activeKey: _activeKey, defaultActiveKey, forceRender, destroyable, }: TabsProps) => React.JSX.Element | null;
 export default Tabs;

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TagProps } from "./types";
+import type { TagProps } from "musae/types/tag";
 declare const Tag: ({ children, size, className, style, closable, onClose, leading, }: TagProps) => React.JSX.Element;
 export default Tag;

package/dist/components/theme/hooks.cjs

@@ -8,7 +8,7 @@ var rxjs = require('rxjs');
 
 var PALETTE = {
   primary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#21005D",
     "20": "#381E72",
     "30": "#4F378B",
@@ -23,7 +23,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   secondary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D192B",
     "20": "#332D41",
     "30": "#4A4458",
@@ -38,7 +38,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   tertiary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#31111D",
     "20": "#492532",
     "30": "#633B48",
@@ -53,7 +53,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   error: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#410E0B",
     "20": "#601410",
     "30": "#8C1D18",
@@ -68,7 +68,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   neutral: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D1B20",
     "20": "#48464C",
     "30": "#48464C",
@@ -83,7 +83,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   neutralVariant: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D1A22",
     "20": "#322F37",
     "30": "#49454F",

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

@@ -1,5 +1,5 @@
 import { MouseEvent } from "react";
-import type { Palette, ContextValue, Theme, Mode } from "./types";
+import type { Palette, ContextValue, Theme, Mode } from "musae/types/theme";
 export declare const PALETTE: Readonly<Palette>;
 /**
  * @description

package/dist/components/theme/hooks.mjs

@@ -8,7 +8,7 @@ import { Observable, distinctUntilChanged } from 'rxjs';
 
 var PALETTE = {
   primary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#21005D",
     "20": "#381E72",
     "30": "#4F378B",
@@ -23,7 +23,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   secondary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D192B",
     "20": "#332D41",
     "30": "#4A4458",
@@ -38,7 +38,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   tertiary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#31111D",
     "20": "#492532",
     "30": "#633B48",
@@ -53,7 +53,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   error: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#410E0B",
     "20": "#601410",
     "30": "#8C1D18",
@@ -68,7 +68,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   neutral: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D1B20",
     "20": "#48464C",
     "30": "#48464C",
@@ -83,7 +83,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   neutralVariant: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D1A22",
     "20": "#322F37",
     "30": "#49454F",

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

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var hooks = require('./hooks.cjs');
-var deepmerge = require('deepmerge');
+var relax = require('@aiszlab/relax');
 
 /**
  * @author murukal
@@ -11,13 +11,19 @@ var deepmerge = require('deepmerge');
  * theme provider
  * if user provider theme, we will merge it with presets theme
  */
-var ThemeProvider = function ThemeProvider(props) {
+var ThemeProvider = function ThemeProvider(_ref) {
+  var _theme = _ref.theme,
+    children = _ref.children;
   var theme = React.useMemo(function () {
-    var _props$theme;
-    return deepmerge((_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : {}, {
+    if (!_theme) {
+      return {
+        palette: hooks.PALETTE
+      };
+    }
+    return relax.merge(_theme, {
       palette: hooks.PALETTE
     });
-  }, [props.theme]);
+  }, [_theme]);
   var _useSwitchable = hooks.useSwitchable({
       theme: theme
     }),
@@ -30,7 +36,7 @@ var ThemeProvider = function ThemeProvider(props) {
       mode: mode,
       toggle: toggle
     }
-  }, props.children);
+  }, children);
 };
 
 exports.default = ThemeProvider;

package/dist/components/theme/theme-provider.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { Props } from "./types";
+import type { Props } from "musae/types/theme";
 /**
  * @author murukal
  *
@@ -7,5 +7,5 @@ import type { Props } from "./types";
  * theme provider
  * if user provider theme, we will merge it with presets theme
  */
-declare const ThemeProvider: (props: Props) => React.JSX.Element;
+declare const ThemeProvider: ({ theme: _theme, children }: Props) => React.JSX.Element;
 export default ThemeProvider;

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { PALETTE, useSwitchable, Context } from './hooks.mjs';
-import deepmerge from 'deepmerge';
+import { merge } from '@aiszlab/relax';
 
 /**
  * @author murukal
@@ -9,13 +9,19 @@ import deepmerge from 'deepmerge';
  * theme provider
  * if user provider theme, we will merge it with presets theme
  */
-var ThemeProvider = function ThemeProvider(props) {
+var ThemeProvider = function ThemeProvider(_ref) {
+  var _theme = _ref.theme,
+    children = _ref.children;
   var theme = useMemo(function () {
-    var _props$theme;
-    return deepmerge((_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : {}, {
+    if (!_theme) {
+      return {
+        palette: PALETTE
+      };
+    }
+    return merge(_theme, {
       palette: PALETTE
     });
-  }, [props.theme]);
+  }, [_theme]);
   var _useSwitchable = useSwitchable({
       theme: theme
     }),
@@ -28,7 +34,7 @@ var ThemeProvider = function ThemeProvider(props) {
       mode: mode,
       toggle: toggle
     }
-  }, props.children);
+  }, children);
 };
 
 export { ThemeProvider as default };

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

@@ -1,4 +1,4 @@
-import type { TimePickerProps } from "./types";
+import type { TimePickerProps } from "musae/types/time-picker";
 import dayjs from "dayjs";
 import { type RefObject } from "react";
 import type { PickerRef } from "musae/types/picker";

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type { PanelProps, PanelRef } from "./types";
+import type { PanelProps, PanelRef } from "musae/types/time-picker";
 declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<PanelRef>>;
 export default Panel;

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TimePickerProps } from "./types";
+import type { TimePickerProps } from "musae/types/time-picker";
 declare const TimePicker: ({ className, ...props }: TimePickerProps) => React.JSX.Element;
 export default TimePicker;

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

@@ -1,2 +1,2 @@
-import { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/timeline";
 export declare const Context: import("react").Context<ContextValue>;

package/dist/components/timeline/item.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { TimelineItemProps } from "./types";
+import type { TimelineItemProps } from "musae/types/timeline";
 declare const Item: ({ description, label, value, dot }: TimelineItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/timeline/timeline.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TimelineProps } from "./types";
+import type { TimelineProps } from "musae/types/timeline";
 declare const Timeline: ({ items, mode, size }: TimelineProps) => React.JSX.Element;
 export default Timeline;

package/dist/components/tooltip/tooltip.d.ts

@@ -1,4 +1,4 @@
-import { TooltipProps } from "./types";
+import type { TooltipProps } from "musae/types/tooltip";
 import React from "react";
 declare const Tooltip: ({ children, className, style, title }: TooltipProps) => React.JSX.Element;
 export default Tooltip;

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

@@ -1,4 +1,4 @@
-import { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/transfer";
 /**
  * @description
  * transfer context

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

@@ -1,5 +1,5 @@
 import { type Key } from "react";
-import type { TransferOption } from "./types";
+import type { TransferOption } from "musae/types/transfer";
 /**
  * @description
  * options

package/dist/components/transfer/item.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TransferItemProps } from "./types";
+import type { TransferItemProps } from "musae/types/transfer";
 declare const Item: ({ value, label }: TransferItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/transfer/list.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TransferListProps } from "./types";
+import type { TransferListProps } from "musae/types/transfer";
 declare const List: ({ options, title, onChange, value }: TransferListProps) => React.JSX.Element;
 export default List;

package/dist/components/transfer/transfer.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TransferProps } from "./types";
+import type { TransferProps } from "musae/types/transfer";
 declare const Transfer: ({ options, value, titles, disabled, className, style, }: TransferProps) => React.JSX.Element;
 export default Transfer;

package/dist/components/upload/upload.cjs

@@ -1,10 +1,14 @@
 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 keyboard = require('../../utils/keyboard.cjs');
 var uploadeds = require('./uploadeds.cjs');
+var button = require('../button/button.cjs');
+var useLocale = require('../../locale/use-locale.cjs');
+var componentToken = require('../../utils/component-token.cjs');
 
 var Upload = function Upload(_ref) {
   var _onClick = _ref.onClick,
@@ -12,9 +16,15 @@ var Upload = function Upload(_ref) {
     multiple = _ref.multiple,
     _children = _ref.children,
     uploader = _ref.uploader,
-    onError = _ref.onError;
+    onError = _ref.onError,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    limit = _ref.limit;
   var inputRef = React.useRef(null);
   var uploadedsRef = React.useRef(null);
+  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Upload),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    _locale = _useLocale2[0];
   // file upload
   var upload = relax.useEvent(function (files) {
     files.forEach(function (file) {
@@ -22,7 +32,7 @@ var Upload = function Upload(_ref) {
       (_uploadedsRef$current = uploadedsRef.current) === null || _uploadedsRef$current === void 0 || _uploadedsRef$current.add(file);
     });
   });
-  var onChange = relax.useEvent(function (e) {
+  var _onChange = relax.useEvent(function (e) {
     var files = e.target.files;
     if (!files) return;
     upload(Array.from(files));
@@ -45,17 +55,28 @@ var Upload = function Upload(_ref) {
     upload(files);
   };
   var styled = {
+    upload: {
+      className: "musaex-78zum5 musaex-dt5ytf musaex-1lsrmdg"
+    },
     input: {
       className: "musaex-1s85apg"
     }
   };
   var children = React.useMemo(function () {
+    if (!_children) {
+      return /*#__PURE__*/React.createElement(button.Button, {
+        disabled: disabled
+      }, _locale.upload);
+    }
     // @ts-ignore
     return /*#__PURE__*/React.cloneElement(_children, {
       disabled: disabled
     });
-  }, [_children, disabled]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", _objectSpread({}, !disabled && {
+  }, [_children, disabled, _locale]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.upload.className,
+    style: styled.upload.style
+  }, /*#__PURE__*/React.createElement("div", _objectSpread({}, !disabled && {
     onClick: onClick,
     onKeyDown: onKeyDown,
     onDrop: onDrop,
@@ -63,17 +84,21 @@ var Upload = function Upload(_ref) {
   }), /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
     type: "file",
+    value: "",
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
     className: styled.input.className,
     style: styled.input.style,
     multiple: multiple,
-    onChange: onChange
+    onChange: _onChange
   }), children), /*#__PURE__*/React.createElement(uploadeds.default, {
     ref: uploadedsRef,
+    value: value,
     uploader: uploader,
-    onError: onError
+    onError: onError,
+    onChange: onChange,
+    limit: limit
   }));
 };
 

package/dist/components/upload/upload.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { UploadProps } from "./types";
-declare const Upload: ({ onClick: _onClick, disabled, multiple, children: _children, uploader, onError }: UploadProps) => React.JSX.Element;
+import type { UploadProps } from "musae/types/upload";
+declare const Upload: ({ onClick: _onClick, disabled, multiple, children: _children, uploader, onError, value, onChange, limit, }: UploadProps) => React.JSX.Element;
 export default Upload;