feat: popover demo

src/Popover/demo/basic.tsx

@@ -0,0 +1,10 @@
+import { Popover } from 'zens';
+
+export default () => {
+
+  return (
+    <Popover title='Popover'>
+      actions
+    </Popover>
+  );
+};

src/Popover/index.md

@@ -0,0 +1,15 @@
+---
+title: Popover 弹出
+nav:
+  title: 组件
+  order: 2
+group:
+  title: 反馈
+  order: 1
+---
+
+# Popover 弹出
+
+### 基本用法
+
+<code src="./demo/basic.tsx"></code>

src/Popover/index.tsx

@@ -1,37 +1,49 @@
 // @ts-nocheck
-import type { PopoverProps as AkPopoverProps, PopoverProviderProps } from '@ariakit/react'
-import { PopoverArrow, PopoverProvider, PopoverDisclosure, PopoverHeading } from '@ariakit/react'
-import { PopoverWrapper } from './PopoverWrapper'
-import { Box } from '../Box'
+import type { PopoverProps as AkPopoverProps, PopoverProviderProps } from '@ariakit/react';
+import { PopoverDisclosure, PopoverProvider } from '@ariakit/react';
+import { Box } from '../Box';
+import { PopoverArrow, PopoverHeading, PopoverWrapper } from './styles';
 
 type PopoverOptions = Pick<PopoverProviderProps, 'placement' | 'open'> &
-  Pick<AkPopoverProps, 'onClose'>
+  Pick<AkPopoverProps, 'onClose'>;
 
 interface PopoverProps extends BaseComponentProps, PopoverOptions {
-  arrow?: boolean
-  title?: string
-  customContent?: React.ReactNode
-  placement?: PopoverProviderProps['placement']
-  children?: BaseComponentProps['children']
+  arrow?: boolean;
+  title?: string;
+  customContent?: React.ReactNode;
+  toggleOnClick?: boolean;
+  placement?: PopoverProviderProps['placement'];
+  children?: BaseComponentProps['children'];
 }
 
 const Popover: React.FC<PopoverProps> = (props) => {
-  const { arrow = true, title, children, customContent, placement, ...rest } = props
+  const {
+    arrow = true,
+    title,
+    toggleOnClick = true,
+    children,
+    customContent,
+    placement,
+    ...rest
+  } = props;
 
   return (
     <PopoverProvider placement={placement}>
-      <PopoverDisclosure toggleOnClick={false} render={(p) => <Box style={{ display: 'inline-block' }} {...p} />}>
+      <PopoverDisclosure
+        toggleOnClick={toggleOnClick}
+        render={(p) => <Box style={{ display: 'inline-block' }} {...p} />}
+      >
         {children}
       </PopoverDisclosure>
       <PopoverWrapper render={<Box />} {...rest}>
         {arrow ? (
-          <PopoverArrow style={{ width: '18px', height: '18px' }} className='arrow' />
+          <PopoverArrow />
         ) : null}
-        {title ? <PopoverHeading className='heading'>{title}</PopoverHeading> : null}
+        {title ? <PopoverHeading>{title}</PopoverHeading> : null}
         {customContent}
       </PopoverWrapper>
     </PopoverProvider>
-  )
-}
+  );
+};
 
-export default Popover
+export default Popover;

src/Popover/styles.tsx

@@ -0,0 +1,32 @@
+import * as Ariakit from '@ariakit/react';
+import type { IStyledComponent } from 'styled-components';
+import styled from 'styled-components';
+
+export const PopoverWrapper: IStyledComponent<'web', typeof Ariakit.Popover> = styled(
+  Ariakit.Popover,
+)`
+  display: flex;
+  max-width: min(calc(100vw - 16px), 320px);
+  flex-direction: column;
+  border-radius: ${(props) => props.theme.smallBorderRadius};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${(props) => props.theme.borderColor};
+  background-color: ${(props) => props.theme.bgColor};
+  padding: ${(props) => props.theme.spaceXs};
+  color: ${(props) => props.theme.primaryFontColor};
+  outline: none;
+`;
+
+export const PopoverArrow = styled(Ariakit.PopoverArrow)`
+  font-size: 18px !important;
+  stroke: ${(props) => props.theme.borderColor} !important;
+  fill: ${(props) => props.theme.bgColor} !important;
+  stroke-width: 4 !important;
+`;
+
+export const PopoverHeading = styled(Ariakit.PopoverHeading)`
+  font-size: ${(props) => props.theme.fontBase};
+  font-weight: 'bold';
+  margin: ${(props) => props.theme.spaceXs} 0;
+`;