feat: add component PopoverAnchor

Author: Ohh-889

packages/ui/src/components/popover/PopoverAnchor.tsx

@@ -0,0 +1,24 @@
+import { Anchor } from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+import { popoverVariants } from './popover-varianst';
+import type { PopoverAnchorProps } from './types';
+
+const PopoverAnchor = (props: PopoverAnchorProps) => {
+  const { className, ...rest } = props;
+
+  const { anchor } = popoverVariants();
+
+  const mergedCls = cn(anchor(), className);
+
+  return (
+    <Anchor
+      className={mergedCls}
+      data-slot="combobox-anchor"
+      {...rest}
+    />
+  );
+};
+
+export default PopoverAnchor;

packages/ui/src/components/popover/popover-varianst.ts

@@ -5,6 +5,7 @@ export const popoverVariants = tv({
     size: 'md'
   },
   slots: {
+    anchor: 'w-full',
     arrow: 'w-1em h-0.5em fill-popover stroke-border',
     content: [
       `w-auto rounded-md border bg-popover  text-popover-foreground shadow-md outline-none z-50 will-change-transform`,

packages/ui/src/components/popover/types.ts

@@ -1,6 +1,7 @@
 import type {
   // eslint-disable-next-line sort/import-members
   PopoverPortalProps,
+  PopoverAnchorProps as _PopoverAnchorProps,
   PopoverArrowProps as _PopoverArrowProps,
   PopoverContentProps as _PopoverContentProps,
   PopoverProps as _PopoverProps
@@ -28,3 +29,5 @@ export type PopoverProps = _PopoverProps &
     showArrow?: boolean;
     trigger?: React.ReactNode;
   };
+
+export type PopoverAnchorProps = BaseNodeProps<_PopoverAnchorProps>;