feat(core): new share menu (#7838)

close AF-1224 AF-1216

![image](https://github.com/user-attachments/assets/204c408a-3dab-4068-86f6-e20abcfa863c)

packages/frontend/component/src/ui/tabs/index.ts

@@ -0,0 +1 @@
+export * from './tabs';

packages/frontend/component/src/ui/tabs/tabs.css.ts

@@ -0,0 +1,52 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const tabsRoot = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  gap: '8px',
+});
+
+export const tabsList = style({
+  display: 'flex',
+  gap: '12px',
+  boxSizing: 'border-box',
+  position: 'relative',
+  '::after': {
+    content: '""',
+    position: 'absolute',
+    bottom: '0px',
+    width: '100%',
+    height: '1px',
+    backgroundColor: cssVarV2('layer/border'),
+  },
+});
+
+export const tabsTrigger = style({
+  all: 'unset',
+  fontWeight: 500,
+  padding: '6px 4px',
+  cursor: 'pointer',
+  fontSize: cssVar('fontSm'),
+  color: cssVarV2('text/secondary'),
+  borderBottom: '2px solid transparent',
+  selectors: {
+    '&[data-state="active"]': {
+      color: cssVarV2('text/primary'),
+      borderColor: cssVarV2('button/primary'),
+    },
+  },
+});
+
+export const tabsContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+
+  selectors: {
+    '&[data-state="inactive"]': {
+      display: 'none',
+    },
+  },
+});

packages/frontend/component/src/ui/tabs/tabs.tsx

@@ -0,0 +1,80 @@
+import * as TabsGroup from '@radix-ui/react-tabs';
+import clsx from 'clsx';
+import { forwardRef, type RefAttributes } from 'react';
+
+import * as styles from './tabs.css';
+
+export const TabsRoot = forwardRef<
+  HTMLDivElement,
+  TabsGroup.TabsProps & RefAttributes<HTMLDivElement>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <TabsGroup.Root
+      {...props}
+      ref={ref}
+      className={clsx(className, styles.tabsRoot)}
+    >
+      {children}
+    </TabsGroup.Root>
+  );
+});
+
+TabsRoot.displayName = 'TabsRoot';
+
+export const TabsList = forwardRef<
+  HTMLDivElement,
+  TabsGroup.TabsListProps & RefAttributes<HTMLDivElement>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <TabsGroup.List
+      {...props}
+      ref={ref}
+      className={clsx(className, styles.tabsList)}
+    >
+      {children}
+    </TabsGroup.List>
+  );
+});
+
+TabsList.displayName = 'TabsList';
+
+export const TabsTrigger = forwardRef<
+  HTMLButtonElement,
+  TabsGroup.TabsTriggerProps & RefAttributes<HTMLButtonElement>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <TabsGroup.Trigger
+      {...props}
+      ref={ref}
+      className={clsx(className, styles.tabsTrigger)}
+    >
+      {children}
+    </TabsGroup.Trigger>
+  );
+});
+
+TabsTrigger.displayName = 'TabsTrigger';
+
+export const TabsContent = forwardRef<
+  HTMLDivElement,
+  TabsGroup.TabsContentProps & RefAttributes<HTMLDivElement>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <TabsGroup.Content
+      {...props}
+      ref={ref}
+      className={clsx(className, styles.tabsContent)}
+    >
+      {children}
+    </TabsGroup.Content>
+  );
+});
+
+TabsContent.displayName = 'TabsContent';
+
+export const Tabs = {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+};