@seed-design/stackflow 0.0.1-rc.1 → 0.0.1-rc.4

package/lib/plugin.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const AppScreen = require('./components/AppScreen/AppScreen.cjs');
+const GlobalInteraction = require('./primitive/GlobalInteraction/GlobalInteraction.cjs');
+
+const seedPlugin = (options) => () => ({
+  key: "seed-design",
+  wrapStack({ stack }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(AppScreen.AppScreenPropsProvider, { value: options, children: /* @__PURE__ */ jsxRuntime.jsx(GlobalInteraction.GlobalInteraction, { children: stack.render() }) });
+  }
+});
+
+exports.seedPlugin = seedPlugin;

package/lib/plugin.d.ts

@@ -1,4 +1,4 @@
-import type { StackflowReactPlugin } from "@stackflow/react";
+import { StackflowReactPlugin } from '@stackflow/react';
 export interface SeedPluginOptions {
     theme: "android" | "cupertino";
 }

package/lib/plugin.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { AppScreenPropsProvider } from './components/AppScreen/AppScreen.js';
+import { GlobalInteraction } from './primitive/GlobalInteraction/GlobalInteraction.js';
+
+const seedPlugin = (options) => () => ({
+  key: "seed-design",
+  wrapStack({ stack }) {
+    return /* @__PURE__ */ jsx(AppScreenPropsProvider, { value: options, children: /* @__PURE__ */ jsx(GlobalInteraction, { children: stack.render() }) });
+  }
+});
+
+export { seedPlugin };

package/lib/primitive/AppBar/AppBar.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactPrimitive = require('@seed-design/react-primitive');
+const React = require('react');
+const useAppBar = require('./useAppBar.cjs');
+const useAppBarContext = require('./useAppBarContext.cjs');
+const domUtils = require('@seed-design/dom-utils');
+const reactComposeRefs = require('@radix-ui/react-compose-refs');
+
+const AppBarRoot = React.forwardRef((props, ref) => {
+  const { ...otherProps } = props;
+  const api = useAppBar.useAppBar();
+  return /* @__PURE__ */ jsxRuntime.jsx(useAppBarContext.AppBarProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactPrimitive.Primitive.div,
+    {
+      ref: reactComposeRefs.composeRefs(api.refs.root, ref),
+      ...domUtils.mergeProps(api.rootProps, otherProps)
+    }
+  ) });
+});
+AppBarRoot.displayName = "AppBarRoot";
+const AppBarLeft = React.forwardRef((props, ref) => {
+  const { refs, stateProps } = useAppBarContext.useAppBarContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref: reactComposeRefs.composeRefs(refs.left, ref), ...domUtils.mergeProps(stateProps, props) });
+});
+AppBarLeft.displayName = "AppBarLeft";
+const AppBarRight = React.forwardRef((props, ref) => {
+  const { refs, stateProps } = useAppBarContext.useAppBarContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref: reactComposeRefs.composeRefs(refs.right, ref), ...domUtils.mergeProps(stateProps, props) });
+});
+AppBarRight.displayName = "AppBarRight";
+const AppBarMain = React.forwardRef((props, ref) => {
+  const { stateProps } = useAppBarContext.useAppBarContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, ...domUtils.mergeProps(stateProps, props) });
+});
+
+exports.AppBarLeft = AppBarLeft;
+exports.AppBarMain = AppBarMain;
+exports.AppBarRight = AppBarRight;
+exports.AppBarRoot = AppBarRoot;

package/lib/primitive/AppBar/AppBar.d.ts

@@ -1,14 +1,15 @@
-import { type PrimitiveProps } from "@seed-design/react-primitive";
-import { type UseAppBarProps } from "./useAppBar";
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { UseAppBarProps } from './useAppBar';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface AppBarRootProps extends PrimitiveProps, UseAppBarProps, React.HTMLAttributes<HTMLDivElement> {
 }
-export declare const AppBarRoot: import("react").ForwardRefExoticComponent<AppBarRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AppBarRoot: ForwardRefExoticComponent<AppBarRootProps & RefAttributes<HTMLDivElement>>;
 export interface AppBarLeftProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
 }
-export declare const AppBarLeft: import("react").ForwardRefExoticComponent<AppBarLeftProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AppBarLeft: ForwardRefExoticComponent<AppBarLeftProps & RefAttributes<HTMLDivElement>>;
 export interface AppBarRightProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
 }
-export declare const AppBarRight: import("react").ForwardRefExoticComponent<AppBarRightProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AppBarRight: ForwardRefExoticComponent<AppBarRightProps & RefAttributes<HTMLDivElement>>;
 export interface AppBarMainProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
 }
-export declare const AppBarMain: import("react").ForwardRefExoticComponent<AppBarMainProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AppBarMain: ForwardRefExoticComponent<AppBarMainProps & RefAttributes<HTMLDivElement>>;

package/lib/primitive/AppBar/AppBar.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { Primitive } from '@seed-design/react-primitive';
+import { forwardRef } from 'react';
+import { useAppBar } from './useAppBar.js';
+import { useAppBarContext, AppBarProvider } from './useAppBarContext.js';
+import { mergeProps } from '@seed-design/dom-utils';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+
+const AppBarRoot = forwardRef((props, ref) => {
+  const { ...otherProps } = props;
+  const api = useAppBar();
+  return /* @__PURE__ */ jsx(AppBarProvider, { value: api, children: /* @__PURE__ */ jsx(
+    Primitive.div,
+    {
+      ref: composeRefs(api.refs.root, ref),
+      ...mergeProps(api.rootProps, otherProps)
+    }
+  ) });
+});
+AppBarRoot.displayName = "AppBarRoot";
+const AppBarLeft = forwardRef((props, ref) => {
+  const { refs, stateProps } = useAppBarContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref: composeRefs(refs.left, ref), ...mergeProps(stateProps, props) });
+});
+AppBarLeft.displayName = "AppBarLeft";
+const AppBarRight = forwardRef((props, ref) => {
+  const { refs, stateProps } = useAppBarContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref: composeRefs(refs.right, ref), ...mergeProps(stateProps, props) });
+});
+AppBarRight.displayName = "AppBarRight";
+const AppBarMain = forwardRef((props, ref) => {
+  const { stateProps } = useAppBarContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergeProps(stateProps, props) });
+});
+
+export { AppBarLeft, AppBarMain, AppBarRight, AppBarRoot };

package/lib/primitive/AppBar/AppBar.namespace.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const AppBar = require('./AppBar.cjs');
+
+
+
+exports.Left = AppBar.AppBarLeft;
+exports.Main = AppBar.AppBarMain;
+exports.Right = AppBar.AppBarRight;
+exports.Root = AppBar.AppBarRoot;

package/lib/primitive/AppBar/AppBar.namespace.d.ts

@@ -1 +1 @@
-export { AppBarRoot as Root, AppBarMain as Main, AppBarLeft as Left, AppBarRight as Right, type AppBarRootProps as RootProps, type AppBarMainProps as MainProps, type AppBarLeftProps as LeftProps, type AppBarRightProps as RightProps, } from "./AppBar";
+export { AppBarRoot as Root, AppBarMain as Main, AppBarLeft as Left, AppBarRight as Right, type AppBarRootProps as RootProps, type AppBarMainProps as MainProps, type AppBarLeftProps as LeftProps, type AppBarRightProps as RightProps, } from './AppBar';

package/lib/primitive/AppBar/AppBar.namespace.js

@@ -0,0 +1 @@
+export { AppBarLeft as Left, AppBarMain as Main, AppBarRight as Right, AppBarRoot as Root } from './AppBar.js';

package/lib/primitive/AppBar/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const AppBar = require('./AppBar.cjs');
+const AppBar_namespace = require('./AppBar.namespace.cjs');
+
+
+
+exports.AppBarLeft = AppBar.AppBarLeft;
+exports.AppBarMain = AppBar.AppBarMain;
+exports.AppBarRight = AppBar.AppBarRight;
+exports.AppBarRoot = AppBar.AppBarRoot;
+exports.AppBar = AppBar_namespace;

package/lib/primitive/AppBar/index.d.ts

@@ -1,2 +1,2 @@
-export { AppBarLeft, AppBarRight, AppBarRoot, AppBarMain, type AppBarLeftProps, type AppBarRightProps, type AppBarRootProps, type AppBarMainProps, } from "./AppBar";
-export * as AppBar from "./AppBar.namespace";
+export { AppBarLeft, AppBarRight, AppBarRoot, AppBarMain, type AppBarLeftProps, type AppBarRightProps, type AppBarRootProps, type AppBarMainProps, } from './AppBar';
+export * as AppBar from './AppBar.namespace';

package/lib/primitive/AppBar/index.js

@@ -0,0 +1,3 @@
+export { AppBarLeft, AppBarMain, AppBarRight, AppBarRoot } from './AppBar.js';
+import * as AppBar_namespace from './AppBar.namespace.js';
+export { AppBar_namespace as AppBar };

package/lib/primitive/AppBar/useAppBar.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domUtils = require('@seed-design/dom-utils');
+const React = require('react');
+const useAppScreenContext = require('../AppScreen/useAppScreenContext.cjs');
+const useElementOffset = require('../private/useElementOffset.cjs');
+
+function useAppBar(_props) {
+  const { stateProps } = useAppScreenContext.useAppScreenContext();
+  const [root, rootRef] = React.useState(null);
+  const [left, leftRef] = React.useState(null);
+  const [right, rightRef] = React.useState(null);
+  const leftOffset = useElementOffset.useElementOffset(left);
+  const rightOffset = useElementOffset.useElementOffset(right);
+  const centeredTitlePaddingX = root ? `${Math.max(leftOffset?.fromLeft ?? 0, rightOffset?.fromRight ?? 0)}px` : "initial";
+  return React.useMemo(
+    () => ({
+      refs: {
+        root: rootRef,
+        left: leftRef,
+        right: rightRef
+      },
+      stateProps,
+      rootProps: domUtils.elementProps({
+        "data-part": "appBar",
+        ...stateProps,
+        style: {
+          "--centered-title-padding-x": centeredTitlePaddingX
+        }
+      })
+    }),
+    [stateProps, centeredTitlePaddingX]
+  );
+}
+
+exports.useAppBar = useAppBar;

package/lib/primitive/AppBar/useAppBar.d.ts

@@ -1,19 +1,20 @@
+import { Dispatch, SetStateAction, HTMLAttributes, CSSProperties, ReactNode, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, ReactEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, TransitionEventHandler } from 'react';
 export interface UseAppBarProps {
 }
 export type UseAppBarReturn = ReturnType<typeof useAppBar>;
 export declare function useAppBar(_props: UseAppBarProps): {
     refs: {
-        root: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
-        left: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
-        right: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+        root: Dispatch<SetStateAction<HTMLElement | null>>;
+        left: Dispatch<SetStateAction<HTMLElement | null>>;
+        right: Dispatch<SetStateAction<HTMLElement | null>>;
     };
-    stateProps: import("react").HTMLAttributes<HTMLElement>;
+    stateProps: HTMLAttributes<HTMLElement>;
     rootProps: {
         slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
+        style?: CSSProperties | undefined;
         title?: string | undefined | undefined;
         dir?: string | undefined | undefined;
-        children?: import("react").ReactNode;
+        children?: ReactNode;
         suppressHydrationWarning?: boolean | undefined | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -34,7 +35,7 @@ export declare function useAppBar(_props: UseAppBarProps): {
         tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
+        role?: AriaRole | undefined;
         about?: string | undefined | undefined;
         content?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
@@ -115,165 +116,165 @@ export declare function useAppBar(_props: UseAppBarProps): {
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined | undefined;
-        onCopy?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-        onCopyCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-        onCut?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-        onCutCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-        onPaste?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-        onPasteCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-        onCompositionEnd?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-        onCompositionStart?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-        onFocus?: import("react").FocusEventHandler<HTMLElement> | undefined;
-        onFocusCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
-        onBlur?: import("react").FocusEventHandler<HTMLElement> | undefined;
-        onBlurCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
-        onChange?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onChangeCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onBeforeInput?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onBeforeInputCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onInput?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onInputCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onReset?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onResetCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onSubmit?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onSubmitCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onInvalid?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onInvalidCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
-        onLoad?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onLoadCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onError?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onErrorCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onKeyDown?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-        onKeyPress?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-        onKeyUp?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-        onAbort?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onAbortCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onCanPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onCanPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onCanPlayThrough?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onDurationChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onEmptied?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onEmptiedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onEncrypted?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onEncryptedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onEnded?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onEndedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onLoadedData?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onLoadedMetadata?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onLoadStart?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onLoadStartCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onPause?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onPauseCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onPlaying?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onPlayingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onProgress?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onProgressCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onRateChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onRateChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onResize?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onResizeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onSeeked?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onSeekedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onSeeking?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onSeekingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onStalled?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onStalledCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onSuspend?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onSuspendCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onTimeUpdate?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onVolumeChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onWaiting?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onWaitingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onAuxClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onAuxClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onContextMenu?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onContextMenuCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onDoubleClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onDrag?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragEnd?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragEndCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragEnter?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragEnterCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragExit?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragExitCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragLeave?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragLeaveCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragOver?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragOverCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragStart?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDragStartCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDrop?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onDropCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-        onMouseDown?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onMouseDownCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onMouseEnter?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onMouseLeave?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onMouseMove?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onMouseOut?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onMouseOutCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onMouseOver?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onMouseOverCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onMouseUp?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onMouseUpCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onSelect?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onSelectCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-        onTouchCancel?: import("react").TouchEventHandler<HTMLElement> | undefined;
-        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-        onTouchEnd?: import("react").TouchEventHandler<HTMLElement> | undefined;
-        onTouchEndCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-        onTouchMove?: import("react").TouchEventHandler<HTMLElement> | undefined;
-        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-        onTouchStart?: import("react").TouchEventHandler<HTMLElement> | undefined;
-        onTouchStartCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-        onPointerDown?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerDownCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerMove?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerUp?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerUpCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerCancel?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerEnter?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerLeave?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerOver?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerOverCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerOut?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onPointerOutCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onGotPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onLostPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-        onScroll?: import("react").UIEventHandler<HTMLElement> | undefined;
-        onScrollCapture?: import("react").UIEventHandler<HTMLElement> | undefined;
-        onWheel?: import("react").WheelEventHandler<HTMLElement> | undefined;
-        onWheelCapture?: import("react").WheelEventHandler<HTMLElement> | undefined;
-        onAnimationStart?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-        onAnimationEnd?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-        onAnimationIteration?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-        onTransitionEnd?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+        onCopy?: ClipboardEventHandler<HTMLElement> | undefined;
+        onCopyCapture?: ClipboardEventHandler<HTMLElement> | undefined;
+        onCut?: ClipboardEventHandler<HTMLElement> | undefined;
+        onCutCapture?: ClipboardEventHandler<HTMLElement> | undefined;
+        onPaste?: ClipboardEventHandler<HTMLElement> | undefined;
+        onPasteCapture?: ClipboardEventHandler<HTMLElement> | undefined;
+        onCompositionEnd?: CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionEndCapture?: CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStart?: CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStartCapture?: CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdate?: CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement> | undefined;
+        onFocus?: FocusEventHandler<HTMLElement> | undefined;
+        onFocusCapture?: FocusEventHandler<HTMLElement> | undefined;
+        onBlur?: FocusEventHandler<HTMLElement> | undefined;
+        onBlurCapture?: FocusEventHandler<HTMLElement> | undefined;
+        onChange?: FormEventHandler<HTMLElement> | undefined;
+        onChangeCapture?: FormEventHandler<HTMLElement> | undefined;
+        onBeforeInput?: FormEventHandler<HTMLElement> | undefined;
+        onBeforeInputCapture?: FormEventHandler<HTMLElement> | undefined;
+        onInput?: FormEventHandler<HTMLElement> | undefined;
+        onInputCapture?: FormEventHandler<HTMLElement> | undefined;
+        onReset?: FormEventHandler<HTMLElement> | undefined;
+        onResetCapture?: FormEventHandler<HTMLElement> | undefined;
+        onSubmit?: FormEventHandler<HTMLElement> | undefined;
+        onSubmitCapture?: FormEventHandler<HTMLElement> | undefined;
+        onInvalid?: FormEventHandler<HTMLElement> | undefined;
+        onInvalidCapture?: FormEventHandler<HTMLElement> | undefined;
+        onLoad?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onError?: ReactEventHandler<HTMLElement> | undefined;
+        onErrorCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onKeyDown?: KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyDownCapture?: KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPress?: KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPressCapture?: KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUp?: KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUpCapture?: KeyboardEventHandler<HTMLElement> | undefined;
+        onAbort?: ReactEventHandler<HTMLElement> | undefined;
+        onAbortCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onCanPlay?: ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThrough?: ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThroughCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onDurationChange?: ReactEventHandler<HTMLElement> | undefined;
+        onDurationChangeCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onEmptied?: ReactEventHandler<HTMLElement> | undefined;
+        onEmptiedCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onEncrypted?: ReactEventHandler<HTMLElement> | undefined;
+        onEncryptedCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onEnded?: ReactEventHandler<HTMLElement> | undefined;
+        onEndedCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadedData?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadedDataCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadata?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadataCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadStart?: ReactEventHandler<HTMLElement> | undefined;
+        onLoadStartCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onPause?: ReactEventHandler<HTMLElement> | undefined;
+        onPauseCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onPlay?: ReactEventHandler<HTMLElement> | undefined;
+        onPlayCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onPlaying?: ReactEventHandler<HTMLElement> | undefined;
+        onPlayingCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onProgress?: ReactEventHandler<HTMLElement> | undefined;
+        onProgressCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onRateChange?: ReactEventHandler<HTMLElement> | undefined;
+        onRateChangeCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onResize?: ReactEventHandler<HTMLElement> | undefined;
+        onResizeCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onSeeked?: ReactEventHandler<HTMLElement> | undefined;
+        onSeekedCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onSeeking?: ReactEventHandler<HTMLElement> | undefined;
+        onSeekingCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onStalled?: ReactEventHandler<HTMLElement> | undefined;
+        onStalledCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onSuspend?: ReactEventHandler<HTMLElement> | undefined;
+        onSuspendCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdate?: ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdateCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChange?: ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChangeCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onWaiting?: ReactEventHandler<HTMLElement> | undefined;
+        onWaitingCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onAuxClick?: MouseEventHandler<HTMLElement> | undefined;
+        onAuxClickCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onClick?: MouseEventHandler<HTMLElement> | undefined;
+        onClickCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onContextMenu?: MouseEventHandler<HTMLElement> | undefined;
+        onContextMenuCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClick?: MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClickCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onDrag?: DragEventHandler<HTMLElement> | undefined;
+        onDragCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragEnd?: DragEventHandler<HTMLElement> | undefined;
+        onDragEndCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragEnter?: DragEventHandler<HTMLElement> | undefined;
+        onDragEnterCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragExit?: DragEventHandler<HTMLElement> | undefined;
+        onDragExitCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragLeave?: DragEventHandler<HTMLElement> | undefined;
+        onDragLeaveCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragOver?: DragEventHandler<HTMLElement> | undefined;
+        onDragOverCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDragStart?: DragEventHandler<HTMLElement> | undefined;
+        onDragStartCapture?: DragEventHandler<HTMLElement> | undefined;
+        onDrop?: DragEventHandler<HTMLElement> | undefined;
+        onDropCapture?: DragEventHandler<HTMLElement> | undefined;
+        onMouseDown?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseDownCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseEnter?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseLeave?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseMove?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseMoveCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseOut?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseOutCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseOver?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseOverCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseUp?: MouseEventHandler<HTMLElement> | undefined;
+        onMouseUpCapture?: MouseEventHandler<HTMLElement> | undefined;
+        onSelect?: ReactEventHandler<HTMLElement> | undefined;
+        onSelectCapture?: ReactEventHandler<HTMLElement> | undefined;
+        onTouchCancel?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchCancelCapture?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchEnd?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchEndCapture?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchMove?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchMoveCapture?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchStart?: TouchEventHandler<HTMLElement> | undefined;
+        onTouchStartCapture?: TouchEventHandler<HTMLElement> | undefined;
+        onPointerDown?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerDownCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerMove?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerMoveCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerUp?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerUpCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancel?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancelCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerEnter?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerLeave?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerOver?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerOverCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerOut?: PointerEventHandler<HTMLElement> | undefined;
+        onPointerOutCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement> | undefined;
+        onScroll?: UIEventHandler<HTMLElement> | undefined;
+        onScrollCapture?: UIEventHandler<HTMLElement> | undefined;
+        onWheel?: WheelEventHandler<HTMLElement> | undefined;
+        onWheelCapture?: WheelEventHandler<HTMLElement> | undefined;
+        onAnimationStart?: AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationStartCapture?: AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEnd?: AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEndCapture?: AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIteration?: AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIterationCapture?: AnimationEventHandler<HTMLElement> | undefined;
+        onTransitionEnd?: TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionEndCapture?: TransitionEventHandler<HTMLElement> | undefined;
     };
 };