@canlooks/can-ui 0.0.21 → 0.0.23

package/dist/cjs/utils/style.js

@@ -8,12 +8,12 @@ exports.colorTransfer = colorTransfer;
 exports.useColor = useColor;
 exports.useTouchRipple = useTouchRipple;
 exports.responsiveVariables = responsiveVariables;
-exports.responsiveValue = responsiveValue;
+exports.toResponsiveValue = toResponsiveValue;
 exports.useResponsiveValue = useResponsiveValue;
 exports.useStatusColor = useStatusColor;
 const tslib_1 = require("tslib");
 const react_1 = require("react");
-const app_1 = require("../components/app");
+const theme_1 = require("../components/theme");
 const utils_1 = require("./utils");
 const color_1 = tslib_1.__importDefault(require("color"));
 /**
@@ -42,7 +42,7 @@ function defineClasses(prefixName, names) {
  */
 function defineCss(callback) {
     return () => {
-        const theme = (0, app_1.useTheme)();
+        const theme = (0, theme_1.useTheme)();
         return (0, react_1.useMemo)(() => callback(theme), [theme]);
     };
 }
@@ -52,7 +52,7 @@ function defineCss(callback) {
  * @param deps
  */
 function useCss(callback, deps) {
-    const theme = (0, app_1.useTheme)();
+    const theme = (0, theme_1.useTheme)();
     return (0, react_1.useMemo)(() => callback(theme), [...deps || [], theme]);
 }
 /**
@@ -61,16 +61,20 @@ function useCss(callback, deps) {
  * @param theme
  */
 function colorTransfer(colorPropsValue, theme) {
-    const { colors, text, divider } = theme;
-    return colors[colorPropsValue]
-        || {
-            text: text.secondary,
-            disabled: text.disabled,
-            placeholder: text.placeholder,
-            inverse: text.inverse,
-            divider
-        }[colorPropsValue]
-        || colorPropsValue;
+    const { colors, text } = theme;
+    if (colorPropsValue in colors) {
+        return colors[colorPropsValue].main;
+    }
+    if (colorPropsValue.startsWith('text')) {
+        if (colorPropsValue === 'text') {
+            return text.primary;
+        }
+        const [, member] = colorPropsValue.split('.');
+        if (member in text) {
+            return text[member];
+        }
+    }
+    return colorPropsValue;
 }
 /**
  * 将useCss()与colorTransfer()方法结合封装
@@ -86,8 +90,10 @@ function useColor(colorPropsValue) {
  * @param colorPropsValue
  */
 function useTouchRipple(colorPropsValue) {
-    const theme = (0, app_1.useTheme)();
-    const outlineColor = (0, color_1.default)(useColor(colorPropsValue)).alpha(.6).string();
+    const theme = (0, theme_1.useTheme)();
+    const outlineColor = (0, react_1.useMemo)(() => {
+        return (0, color_1.default)(colorTransfer(colorPropsValue, theme)).alpha(.6).string();
+    }, [colorPropsValue, theme]);
     return (element) => {
         typeof element.animate === 'function' && element.animate([
             {
@@ -96,7 +102,7 @@ function useTouchRipple(colorPropsValue) {
                 outlineColor
             },
             {
-                outlineWidth: theme.spacing[2] + 'px',
+                outlineWidth: '6px',
                 outlineStyle: 'solid',
                 outlineColor: 'transparent'
             },
@@ -108,36 +114,44 @@ function useTouchRipple(colorPropsValue) {
 }
 /**
  * 生成响应式样式
+ * @param theme
  * @param callback
  */
-function responsiveVariables(callback) {
+function responsiveVariables(theme, callback) {
+    const { breakpoints } = theme;
     let ret = '';
-    for (const k in app_1.breakpoints) {
-        const v = app_1.breakpoints[k];
-        ret += `
-            ${v ? `@media (min-width: ${v}px) {` : ''}
-                ${callback(k) || ''}
-            ${v ? '}' : ''}
-        `;
+    for (const k in breakpoints) {
+        const px = breakpoints[k];
+        if (px) {
+            ret += `
+                @media (min-width: ${px}px) {
+                    ${callback(k, px) || ''}
+                }                
+            `;
+        }
+        else {
+            ret += callback(k, px) || '';
+        }
     }
     return ret;
 }
-function responsiveValue(prop) {
+function toResponsiveValue(prop) {
     if ((0, utils_1.isUnset)(prop)) {
         return;
     }
     return typeof prop === 'object' ? prop : { xs: prop };
 }
 /**
- * 使用hooks监听响应式值的变化
+ * 使用hooks监听响应式值的变化，通常用于css不能满足需求的情况
  * @param prop
  */
 function useResponsiveValue(prop) {
-    const responsiveObj = responsiveValue(prop);
+    const responsiveObj = toResponsiveValue(prop);
+    const { breakpoints } = (0, theme_1.useTheme)();
     const fn = () => {
         let maxBreakpoint = 'xs';
-        for (const k in app_1.breakpoints) {
-            if (window.innerWidth < app_1.breakpoints[k]) {
+        for (const k in breakpoints) {
+            if (window.innerWidth < breakpoints[k]) {
                 break;
             }
             if (k in responsiveObj) {
@@ -163,9 +177,12 @@ function useResponsiveValue(prop) {
  * @param status
  */
 function useStatusColor(status = 'unknown') {
-    const { colors, text } = (0, app_1.useTheme)();
-    return status === 'unknown' ? text.disabled
-        : colors[status === 'info' ? 'primary'
-            : status === 'confirm' ? 'warning'
-                : status];
+    const { colors, text } = (0, theme_1.useTheme)();
+    if (status === 'unknown') {
+        return text.disabled;
+    }
+    if (status === 'confirm') {
+        status = 'warning';
+    }
+    return colors[status].main;
 }

package/dist/cjs/utils/tree.d.ts

@@ -1,4 +1,4 @@
-import { Id, Obj } from '../../types';
+import { Id, Obj } from '../types';
 /**
  * ------------------------------------------------------------------------
  * 统一处理树形搜索
@@ -20,7 +20,7 @@ export declare function useTreeSearch<N extends Obj, V extends Id = Id>({ nodes,
     expandedSet: Set<V>;
     setInnerExpanded: import("react").Dispatch<import("react").SetStateAction<V[]>>;
     toggleExpanded: (value: V) => void;
-    innerSearchValue: import("react").MutableRefObject<string>;
+    innerSearchValue: import("react").RefObject<string>;
     deferredSearchValue: string;
     setInnerSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
     filteredTreeData: N[] | undefined;

package/dist/cjs/utils/utils.d.ts

@@ -1,5 +1,5 @@
-import { MutableRefObject, Ref, ReactNode } from 'react';
-import { Id } from '../../types';
+import { RefObject, Ref, ReactNode } from 'react';
+import { Id } from '../types';
 /**
  * 生成最简易的随机ID
  * @param namespace
@@ -61,7 +61,7 @@ export declare function nextTick(callback?: () => void): Promise<void>;
  * 克隆Ref
  * @param refs
  */
-export declare function cloneRef<T>(...refs: (Ref<T> | MutableRefObject<T | null> | undefined)[]): (r: T | null) => void;
+export declare function cloneRef<T>(...refs: (Ref<T> | RefObject<T | null> | undefined)[]): (r: T | null) => void;
 /**
  * 判断变量是否为undefined或null
  * @param it
@@ -83,7 +83,7 @@ export declare function getPromiseState(promise: Promise<any>): Promise<'pending
  * @param callback
  * @param seperator
  */
-export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, seperator?: ReactNode): (string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined)[];
+export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, seperator?: ReactNode): (string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined)[];
 /**
  * 修复数字输入框的值，包括最大值最小值限制，以及小数点精度
  * @param value

package/dist/cjs/utils/utils.js

@@ -126,7 +126,7 @@ function mergeDeep(target, ...sources) {
         if (source && typeof source === 'object') {
             for (const k in source) {
                 const v = source[k];
-                if (v && typeof v === 'object') {
+                if (typeof v === 'object' && v) {
                     target[k] ||= Array.isArray(v) ? [] : {};
                     mergeDeep(target[k], v);
                 }

package/dist/esm/components/accordion/accordion.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DIVProps, Size } from '../../../types';
+import { DIVProps, Size } from '../../types';
 export interface AccordionProps extends Omit<DIVProps, 'title' | 'prefix'> {
     size?: Size;
     title?: ReactNode;
@@ -12,4 +12,4 @@ export interface AccordionProps extends Omit<DIVProps, 'title' | 'prefix'> {
     readOnly?: boolean;
     disabled?: boolean;
 }
-export declare const Accordion: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded, expanded, onExpandedChange, readOnly, disabled, ...props }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/accordion/accordion.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { classes, style } from './accordion.style';
 import { classnames, useControlled } from '../../utils';
 import { CaretRightOutlined } from '@ant-design/icons';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { Collapse } from '../transitionBase';
-export const Accordion = forwardRef(({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }, ref) => {
+export function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
     const theme = useTheme();
     size ??= theme.size;
     const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded, onExpandedChange);
@@ -21,6 +20,6 @@ export const Accordion = forwardRef(({ size, title, prefix, suffix, expandIcon,
         }
         return expandIcon;
     };
-    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsxs("div", { className: classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.title, children: title }), !!suffix && _jsx("div", { className: classes.suffix, children: suffix })] }), !!props.children &&
+    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsxs("div", { className: classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.title, children: title }), !!suffix && _jsx("div", { className: classes.suffix, children: suffix })] }), !!props.children &&
                 _jsx(Collapse, { in: innerExpanded.current, children: _jsx("div", { className: classes.content, children: props.children }) })] }));
-});
+}

package/dist/esm/components/accordion/accordion.style.d.ts

@@ -2,9 +2,9 @@ export declare const classes: {
     title: string;
     content: string;
     prefix: string;
-    titleRow: string;
     suffix: string;
     expandIcon: string;
+    titleRow: string;
 } & {
     root: string;
 };

package/dist/esm/components/accordion/accordion.style.js

@@ -11,7 +11,7 @@ export const classes = defineClasses('accordion', [
 export const style = defineCss(({ divider, borderRadius, background, spacing, text, gray, easing }) => css `
     border: 1px solid ${divider};
     border-radius: ${borderRadius}px;
-    background-color: ${background.card};
+    background-color: ${background.content};
     transition: margin .2s ${easing.easeOut};
 
     .${classes.titleRow} {

package/dist/esm/components/actionSheet/actionSheet.d.ts

@@ -1,16 +1,16 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { OverlayBaseProps } from '../overlayBase';
 import { TransitionBaseProps } from '../transitionBase';
 import { MenuItemProps } from '../menuItem';
-import { Obj } from '../../../types';
+import { Obj } from '../../types';
 export type ActionSheetCloseReason = 'escape' | 'canceled' | 'confirmed' | 'maskClicked' | 'action';
 export interface ActionSheetProps<A extends MenuItemProps & Obj> extends Omit<OverlayBaseProps, 'title'> {
     title?: ReactNode;
     actions?: A[];
     placement?: 'top' | 'bottom';
-    /** 是否可通过点击遮罩层关闭对话框，@default false */
+    /** 是否可通过点击遮罩层关闭对话框，默认为`false` */
     maskClosable?: boolean;
-    /** 是否可通过键盘的【ESC】键关闭对话框，@default true */
+    /** 是否可通过键盘的【ESC】键关闭对话框，默认为`true` */
     escapeClosable?: boolean;
     /** 点击选项 */
     onAction?(action: A): void;
@@ -19,11 +19,11 @@ export interface ActionSheetProps<A extends MenuItemProps & Obj> extends Omit<Ov
     defaultOpen?: boolean;
     open?: boolean;
     onClose?(reason: ActionSheetCloseReason): void;
-    /** 是否显示确定按钮，@default false */
+    /** 是否显示确定按钮，默认为`false` */
     showConfirm?: boolean;
     confirmText?: ReactNode;
     confirmProps?: MenuItemProps;
-    /** 是否显示取消按钮，@default true */
+    /** 是否显示取消按钮，默认为`true` */
     showCancel?: boolean;
     cancelText?: ReactNode;
     cancelProps?: MenuItemProps;

package/dist/esm/components/actionSheet/actionSheet.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classes, style } from './actionSheet.style';
 import { classnames, cloneRef, useControlled, useEscapeClosable } from '../../utils';
 import { OverlayBase } from '../overlayBase';
@@ -9,7 +9,7 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-export const ActionSheet = memo(forwardRef(({ title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }, ref) => {
+export const ActionSheet = memo(({ ref, title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }) => {
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
@@ -37,4 +37,4 @@ export const ActionSheet = memo(forwardRef(({ title, actions, placement = 'botto
                                     close('action');
                                 } }, i))] }), showCancel &&
                     _jsx("div", { className: classes.card, children: _jsx(MenuItem, { color: "error", emphasized: true, size: "large", label: cancelText, ...cancelProps, onClick: cancelHandler }) })] }) }));
-}));
+});

package/dist/esm/components/actionSheet/actionSheet.style.d.ts

@@ -1,8 +1,8 @@
 export declare const classes: {
-    card: string;
     title: string;
-    sheet: string;
     action: string;
+    sheet: string;
+    card: string;
 } & {
     root: string;
 };

package/dist/esm/components/actionSheet/actionSheet.style.js

@@ -28,7 +28,7 @@ export const style = defineCss(({ spacing, background, boxShadow, borderRadius,
 
     .${classes.card} {
         text-align: center;
-        background-color: ${background.card};
+        background-color: ${background.content};
         box-shadow: ${boxShadow[1]};
         border-radius: ${borderRadius}px;
         overflow: hidden;

package/dist/esm/components/alert/alert.d.ts

@@ -1,18 +1,19 @@
-import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Status } from '../../../types';
+import React, { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps, Status } from '../../types';
 export interface AlertProps extends Omit<DIVProps, 'title' | 'prefix' | 'children'> {
     variant?: 'filled' | 'outlined' | 'standard';
     status?: Status;
     color?: ColorPropsValue;
-    /** @default true */
+    /** 是否显示图标，默认为`true` */
     showIcon?: boolean;
     icon?: ReactNode;
     title?: ReactNode;
     description?: ReactNode;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    /** 是否显示关闭按钮 */
     closable?: boolean;
     onClose?: React.MouseEventHandler<HTMLButtonElement>;
     loading?: boolean;
 }
-export declare const Alert: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Alert: React.MemoExoticComponent<({ variant, status, color, showIcon, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }: AlertProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/alert/alert.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classnames } from '../../utils';
 import { classes, useStyle } from './alert.style';
 import { statusMapToIcon } from '../status';
 import { Button } from '../button';
 import { CloseOutlined } from '@ant-design/icons';
 import { Skeleton } from '../skeleton';
-export const Alert = memo(forwardRef(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }, ref) => {
+export const Alert = memo(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }) => {
     const Icon = statusMapToIcon[status];
-    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, children: [showIcon &&
+    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, children: [showIcon &&
                 _jsx("div", { className: classes.icon, children: loading
                         ? _jsx(Skeleton, { variant: "circular" })
                         : icon ?? _jsx(Icon, {}) }), !loading && !!prefix &&
@@ -20,4 +20,4 @@ export const Alert = memo(forwardRef(({ variant = 'standard', status = 'error',
                             : description })] }), !loading && !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix }), closable &&
                 _jsx(Button, { className: classes.close, variant: "text", shape: "circular", color: variant === 'filled' ? '#fff' : 'text', onClick: onClose, disabled: loading, children: _jsx(CloseOutlined, {}) })] }));
-}));
+});

package/dist/esm/components/alert/alert.style.d.ts

@@ -1,12 +1,12 @@
-import { ColorPropsValue } from '../../../types';
+import { ColorPropsValue } from '../../types';
 export declare const classes: {
     title: string;
     content: string;
-    prefix: string;
     icon: string;
+    prefix: string;
     close: string;
-    suffix: string;
     description: string;
+    suffix: string;
 } & {
     root: string;
 };

package/dist/esm/components/anchor/anchor.d.ts

@@ -3,7 +3,7 @@ type AnchorContextBaseProps = {
     scrollIntoViewOptions?: ScrollIntoViewOptions;
 };
 export interface AnchorContextProps extends AnchorContextBaseProps {
-    thesholds?: [number, number];
+    thresholds?: [number, number];
     container?: Element | (() => Element);
     children?: ReactNode;
 }
@@ -11,9 +11,9 @@ export interface AnchorContextType extends AnchorContextBaseProps {
     targets: Map<string, Element | null>;
     activeId: string | null;
 }
-export declare const anchorContext: import("react").Context<AnchorContextType>;
+export declare const InnerAnchorContext: import("react").Context<AnchorContextType>;
 export declare function useAnchorContext(): AnchorContextType;
-export declare function AnchorContext({ thesholds, container, children, ...props }: AnchorContextProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function AnchorContext({ thresholds, container, children, ...props }: AnchorContextProps): import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * 在链接按钮组件内使用
  * @param id
@@ -26,5 +26,5 @@ export declare function useAnchorLinkProps(id: string): {
  * 在需要滚动到的目标元素上使用
  * @param id
  */
-export declare function useAnchorTargetRef<T extends Element>(id: string): import("react").RefObject<T>;
+export declare function useAnchorTargetRef<T extends Element>(id: string): import("react").RefObject<T | null>;
 export {};

package/dist/esm/components/anchor/anchor.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useSync } from '../../utils';
-export const anchorContext = createContext({
+export const InnerAnchorContext = createContext({
     targets: new Map(),
     activeId: null
 });
 export function useAnchorContext() {
-    return useContext(anchorContext);
+    return useContext(InnerAnchorContext);
 }
-export function AnchorContext({ thesholds, container, children, ...props }) {
+export function AnchorContext({ thresholds, container, children, ...props }) {
     const targets = useRef(new Map());
     const [activeId, setActiveId] = useState(null);
-    const syncThresholds = useSync(thesholds);
+    const syncThresholds = useSync(thresholds);
     useEffect(() => {
         const containerEl = typeof container === 'function' ? container() : container;
         const scroll = () => {
@@ -52,7 +52,7 @@ export function AnchorContext({ thesholds, container, children, ...props }) {
             }
         };
     }, []);
-    return (_jsx(anchorContext.Provider, { value: useMemo(() => ({
+    return (_jsx(InnerAnchorContext, { value: useMemo(() => ({
             ...props,
             targets: targets.current,
             activeId

package/dist/esm/components/app/app.d.ts

@@ -1,24 +1,19 @@
-import { ReactElement, ReactNode } from 'react';
-import { DIVProps } from '../../../types';
-import { PartialTheme } from './theme';
+import { ReactElement } from 'react';
+import { DIVProps } from '../../types';
+import { ThemeProviderProps } from '../theme';
 import { AppDialogMethods } from './appDialog';
 import { AppMessageMethods } from './appMessage';
 import { AppNotificationMethods } from './appNotification';
 import { AppActionSheetMethods } from './appActionSheet';
-export interface AppProps extends DIVProps {
+export interface AppProps extends ThemeProviderProps, DIVProps {
     component?: any;
-    theme?: PartialTheme;
-    children?: ReactNode;
-    /** 尺寸是否占满父节点，@default true */
-    fullSize?: boolean;
-    /** 若页面受zoom样式影响，需要传入zoom值 */
-    zoom?: number;
+    /** 尺寸是否占满父节点，默认为`true` */
+    fill?: boolean;
 }
 export declare function useAppContext(): {
     dialog: AppDialogMethods;
     message: AppMessageMethods<import("../snackbarBase").SnackbarBaseProps>;
     notification: AppNotificationMethods<import("./appNotification").AppNotificationProps>;
-    zoom: number;
 };
 export declare const App: {
     (props: AppProps): ReactElement;
@@ -27,3 +22,4 @@ export declare const App: {
     notification: AppNotificationMethods;
     actionSheet: AppActionSheetMethods;
 };
+export declare function InnerApp({ component: Component, theme, children, fill, ...props }: AppProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/app/app.js

@@ -1,55 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { createContext, forwardRef, useContext, useEffect, useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { classnames } from '../../utils';
 import { classes, style } from './app.style';
+import { ThemeProvider } from '../theme';
 import { AppDialog, AppDialogMethods } from './appDialog';
 import { AppMessage, AppMessageMethods } from './appMessage';
 import { AppNotification, AppNotificationMethods } from './appNotification';
 import { AppActionSheet, AppActionSheetMethods } from './appActionSheet';
-import { themeContext, useThemeProvider } from './themeContext';
 import { css } from '@emotion/react';
-const appContext = createContext({
+const AppContext = createContext({
     dialog: new AppDialogMethods(),
     message: new AppMessageMethods(),
     notification: new AppNotificationMethods(),
-    zoom: 1
 });
 export function useAppContext() {
-    return useContext(appContext);
+    return useContext(AppContext);
 }
-export const App = forwardRef(({ component: Component = 'div', theme, children, fullSize = true, zoom = 1, ...props }, ref) => {
-    const themeValue = useThemeProvider(theme);
-    const { _isTop } = themeValue;
-    useEffect(() => {
-        if (_isTop) {
-            document.documentElement.style.colorScheme = themeValue.mode;
-        }
-    }, [_isTop]);
-    themeValue._isTop = false;
+export const App = (({ theme, ...props }) => {
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(InnerApp, { ...props }) }));
+});
+export function InnerApp({ component: Component = 'div', theme, children, fill = true, ...props }) {
     const appValue = useMemo(() => ({
         dialog: App.dialog = new AppDialogMethods(),
         message: App.message = new AppMessageMethods(),
         notification: App.notification = new AppNotificationMethods(),
         actionSheet: App.actionSheet = new AppActionSheetMethods(),
-        zoom
-    }), [zoom]);
-    return (_jsx(themeContext.Provider, { value: themeValue, children: _jsxs(appContext.Provider, { value: appValue, children: [Component
-                    ? _jsx(Component, { ...props, ref: ref, css: [
-                            style,
-                            css `
-                                font-size: ${themeValue.fontSize}px;
-                                color: ${themeValue.text.primary};
-                                background-color: ${themeValue.background.body};
-
-                                * {
-                                    font-family: ${themeValue.fontFamily};
-                                }
-                            `,
-                            fullSize && css `
-                                width: 100%;
-                                height: 100%;
-                                flex: 1;   
-                            `
-                        ], className: classnames(classes.root, props.className), children: children })
-                    : children, _jsx(AppDialog, { methods: appValue.dialog }), _jsx(AppMessage, { methods: appValue.message }), _jsx(AppNotification, { methods: appValue.notification }), _jsx(AppActionSheet, { methods: appValue.actionSheet })] }) }));
-});
+    }), []);
+    return (_jsxs(AppContext, { value: appValue, children: [Component
+                ? _jsx(Component, { ...props, css: [
+                        style,
+                        fill && css `
+                            width: 100%;
+                            height: 100%;
+                            flex: 1;
+                        `
+                    ], className: classnames(classes.root, props.className), children: children })
+                : children, _jsx(AppDialog, { methods: appValue.dialog }), _jsx(AppMessage, { methods: appValue.message }), _jsx(AppNotification, { methods: appValue.notification }), _jsx(AppActionSheet, { methods: appValue.actionSheet })] }));
+}

package/dist/esm/components/app/app.style.d.ts

@@ -1,4 +1,6 @@
+import { Theme } from '../theme';
 export declare const classes: {
     root: string;
 };
-export declare const style: import("@emotion/react").SerializedStyles;
+export declare const appStyleCallback: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/esm/components/app/app.style.js

@@ -1,12 +1,17 @@
 import { css } from '@emotion/react';
-import { defineClasses } from '../../utils';
+import { defineClasses, defineCss } from '../../utils';
 export const classes = defineClasses('app');
-export const style = css `
+export const appStyleCallback = (theme) => css `
     line-height: ${20 / 14};
     box-sizing: border-box;
+    font-size: ${theme.fontSize}px;
+    color: ${theme.text.primary};
+    background-color: ${theme.background.body};
+    zoom: ${theme.zoom};
 
     * {
         box-sizing: border-box;
+        font-family: ${theme.fontFamily};
     }
 
     svg.MuiSvgIcon-root {
@@ -19,3 +24,4 @@ export const style = css `
         display: inline-flex;
     }
 `;
+export const style = defineCss(appStyleCallback);

package/dist/esm/components/app/appActionSheet.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { ActionSheetProps } from '../actionSheet';
 import { MenuItemProps } from '../menuItem';
-import { Obj } from '../../../types';
+import { Obj } from '../../types';
 export interface AppActionSheetProps<A extends MenuItemProps & Obj> extends Omit<ActionSheetProps<A>, 'onAction' | 'onConfirm'> {
     onAction?(action: A, ...args: any[]): any;
     onConfirm?(...args: any[]): any;