musae 0.3.2 → 0.3.5

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/theme/tokens.stylex.cjs

@@ -58,7 +58,14 @@ var sizes = {
   auto: "var(--musaex-1yg5bqe)",
   __themeName__: "musaex-qhz0mn"
 };
+var OPACITY = {
+  thin: 0.08,
+  medium: 0.12,
+  thick: 0.16,
+  thicker: 0.38
+};
 
+exports.OPACITY = OPACITY;
 exports.elevations = elevations;
 exports.sizes = sizes;
 exports.spacing = spacing;

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

@@ -90,11 +90,13 @@ export declare const positions: import("@stylexjs/stylex").VarGroup<Readonly<{
 }>, symbol>;
 /**
  * @description
- * layer
+ * opacity
  */
-export declare const layers: import("@stylexjs/stylex").VarGroup<Readonly<{
-    thin: string;
-    medium: string;
-    thick: string;
-    thicker: string;
+export type OpacityToken = "thin" | "medium" | "thick" | "thicker";
+export declare const OPACITY: Record<OpacityToken, number>;
+export declare const opacity: import("@stylexjs/stylex").VarGroup<Readonly<{
+    medium: number;
+    thin: number;
+    thick: number;
+    thicker: number;
 }>, symbol>;

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

@@ -58,5 +58,11 @@ var sizes = {
   auto: "var(--musaex-1yg5bqe)",
   __themeName__: "musaex-qhz0mn"
 };
+var OPACITY = {
+  thin: 0.08,
+  medium: 0.12,
+  thick: 0.16,
+  thicker: 0.38
+};
 
-export { elevations, sizes, spacing };
+export { OPACITY, elevations, sizes, spacing };

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;

package/dist/components/upload/upload.mjs

@@ -1,8 +1,12 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useMemo, cloneElement } from 'react';
 import { useEvent } from '@aiszlab/relax';
 import { Keyboard } from '../../utils/keyboard.mjs';
 import Uploadeds from './uploadeds.mjs';
+import { Button } from '../button/button.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var Upload = function Upload(_ref) {
   var _onClick = _ref.onClick,
@@ -10,9 +14,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 = useRef(null);
   var uploadedsRef = useRef(null);
+  var _useLocale = useLocale(ComponentToken.Upload),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    _locale = _useLocale2[0];
   // file upload
   var upload = useEvent(function (files) {
     files.forEach(function (file) {
@@ -20,7 +30,7 @@ var Upload = function Upload(_ref) {
       (_uploadedsRef$current = uploadedsRef.current) === null || _uploadedsRef$current === void 0 || _uploadedsRef$current.add(file);
     });
   });
-  var onChange = useEvent(function (e) {
+  var _onChange = useEvent(function (e) {
     var files = e.target.files;
     if (!files) return;
     upload(Array.from(files));
@@ -43,17 +53,28 @@ var Upload = function Upload(_ref) {
     upload(files);
   };
   var styled = {
+    upload: {
+      className: "musaex-78zum5 musaex-dt5ytf musaex-1lsrmdg"
+    },
     input: {
       className: "musaex-1s85apg"
     }
   };
   var children = useMemo(function () {
+    if (!_children) {
+      return /*#__PURE__*/React.createElement(Button, {
+        disabled: disabled
+      }, _locale.upload);
+    }
     // @ts-ignore
     return /*#__PURE__*/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,
@@ -61,17 +82,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, {
     ref: uploadedsRef,
+    value: value,
     uploader: uploader,
-    onError: onError
+    onError: onError,
+    onChange: onChange,
+    limit: limit
   }));
 };