chore: remove stale asChild usage

apps/www/src/components/playground/popover-examples.tsx

@@ -8,57 +8,43 @@ export function PopoverExamples() {
     <PlaygroundLayout title='Popover'>
       <Flex gap='medium' wrap='wrap'>
         <Popover>
-          <Popover.Trigger asChild>
-            <Button>Top Popover</Button>
-          </Popover.Trigger>
+          <Popover.Trigger render={<Button />}>Top Popover</Popover.Trigger>
           <Popover.Content side='top'>
             <Text size='2'>Content appears above the trigger</Text>
           </Popover.Content>
         </Popover>
         <Popover>
-          <Popover.Trigger asChild>
-            <Button>Right Popover</Button>
-          </Popover.Trigger>
+          <Popover.Trigger render={<Button />}>Right Popover</Popover.Trigger>
           <Popover.Content side='right'>
             <Text size='2'>Content appears to the right</Text>
           </Popover.Content>
         </Popover>
         <Popover>
-          <Popover.Trigger asChild>
-            <Button>Bottom Popover</Button>
-          </Popover.Trigger>
+          <Popover.Trigger render={<Button />}>Bottom Popover</Popover.Trigger>
           <Popover.Content side='bottom'>
             <Text size='2'>Content appears below the trigger</Text>
           </Popover.Content>
         </Popover>
         <Popover>
-          <Popover.Trigger asChild>
-            <Button>Left Popover</Button>
-          </Popover.Trigger>
+          <Popover.Trigger render={<Button />}>Left Popover</Popover.Trigger>
           <Popover.Content side='left'>
             <Text size='2'>Content appears to the left</Text>
           </Popover.Content>
         </Popover>
         <Popover>
-          <Popover.Trigger asChild>
-            <Button>Center Aligned</Button>
-          </Popover.Trigger>
+          <Popover.Trigger render={<Button />}>Center Aligned</Popover.Trigger>
           <Popover.Content align='center'>
             <Text size='2'>Centered with the trigger</Text>
           </Popover.Content>
         </Popover>
         <Popover>
-          <Popover.Trigger asChild>
-            <Button>Start Aligned</Button>
-          </Popover.Trigger>
+          <Popover.Trigger render={<Button />}>Start Aligned</Popover.Trigger>
           <Popover.Content align='start'>
             <Text size='2'>Aligned to the start</Text>
           </Popover.Content>
         </Popover>
         <Popover>
-          <Popover.Trigger asChild>
-            <Button>End Aligned</Button>
-          </Popover.Trigger>
+          <Popover.Trigger render={<Button />}>End Aligned</Popover.Trigger>
           <Popover.Content align='end'>
             <Text size='2'>Aligned to the end</Text>
           </Popover.Content>

apps/www/src/components/popover-color-picker.tsx

@@ -1,21 +1,22 @@
-import { Button, Flex, Popover } from '@raystack/apsara';
-import { ColorPicker } from '@raystack/apsara';
+import { Button, ColorPicker, Flex, Popover } from '@raystack/apsara';
 import { useState } from 'react';
 
 export default function PopoverColorPicker() {
   const [color, setColor] = useState('#DA2929');
 
   return (
     <Popover>
-      <Popover.Trigger asChild>
-        <Button
-          style={{
-            width: 60,
-            height: 60,
-            background: color
-          }}
-        />
-      </Popover.Trigger>
+      <Popover.Trigger
+        render={
+          <Button
+            style={{
+              width: 60,
+              height: 60,
+              background: color
+            }}
+          />
+        }
+      />
       <Popover.Content>
         <ColorPicker
           value={color}

apps/www/src/content/docs/components/alert-dialog/props.ts

@@ -61,16 +61,26 @@ export interface AlertDialogDescriptionProps {
 }
 
 export interface AlertDialogTriggerProps {
-  /** Boolean to merge props onto child element */
-  asChild?: boolean;
+  /**
+   * Allows rendering as a different element.
+   * Accepts a React element or a function that receives props and returns an element.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?: React.ReactElement;
 
   /** Additional CSS class names */
   className?: string;
 }
 
 export interface AlertDialogCloseButtonProps {
-  /** Boolean to merge props onto child element */
-  asChild?: boolean;
+  /**
+   * Allows rendering as a different element.
+   * Accepts a React element or a function that receives props and returns an element.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?: React.ReactElement;
 
   /** Additional CSS class names */
   className?: string;

apps/www/src/content/docs/components/color-picker/demo.ts

@@ -48,15 +48,12 @@ export const popoverDemo = {
 
   return (
     <Popover>
-      <Popover.Trigger asChild>
-        <Button
-          style={{
+      <Popover.Trigger render={<Button style={{
             width: 60,
             height: 60,
             background: color
-          }}
+          }} />}
         />
-      </Popover.Trigger>
       <Popover.Content>
         <ColorPicker
           value={color}

apps/www/src/content/docs/components/dialog/props.ts

@@ -67,16 +67,26 @@ export interface DialogDescriptionProps {
 }
 
 export interface DialogTriggerProps {
-  /** Boolean to merge props onto child element */
-  asChild?: boolean;
+  /**
+   * Allows rendering as a different element.
+   * Accepts a React element or a function that receives props and returns an element.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?: React.ReactElement;
 
   /** Additional CSS class names */
   className?: string;
 }
 
 export interface DialogCloseButtonProps {
-  /** Boolean to merge props onto child element */
-  asChild?: boolean;
+  /**
+   * Allows rendering as a different element.
+   * Accepts a React element or a function that receives props and returns an element.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?: React.ReactElement;
 
   /** Additional CSS class names */
   className?: string;

apps/www/src/content/docs/components/popover/demo.ts

@@ -6,9 +6,7 @@ export const getCode = (props: any) => {
   const { children, ...rest } = props;
   return `
   <Popover>
-    <Popover.Trigger asChild>
-      <Button>Popover</Button>
-    </Popover.Trigger>
+    <Popover.Trigger render={<Button />}>Popover</Popover.Trigger>
     <Popover.Content${getPropsString(rest)}>
     ${children}
     </Popover.Content>
@@ -43,8 +41,8 @@ export const positionDemo = {
       name: 'Top',
       code: `
       <Popover>
-        <Popover.Trigger asChild>
-          <Button>Top Popover</Button>
+        <Popover.Trigger render={<Button />}>
+          Top Popover
         </Popover.Trigger>
         <Popover.Content side="top">
           <Text size="2">Content appears above the trigger</Text>
@@ -55,8 +53,8 @@ export const positionDemo = {
       name: 'Right',
       code: `
       <Popover>
-        <Popover.Trigger asChild>
-          <Button>Right Popover</Button>
+        <Popover.Trigger render={<Button />}>
+          Right Popover
         </Popover.Trigger>
         <Popover.Content side="right">
           <Text size="2">Content appears to the right</Text>
@@ -67,8 +65,8 @@ export const positionDemo = {
       name: 'Bottom',
       code: `
       <Popover>
-        <Popover.Trigger asChild>
-          <Button>Bottom Popover</Button>
+        <Popover.Trigger render={<Button />}>
+          Bottom Popover
         </Popover.Trigger>
         <Popover.Content side="bottom">
           <Text size="2">Content appears below the trigger</Text>
@@ -79,8 +77,8 @@ export const positionDemo = {
       name: 'Left',
       code: `
       <Popover>
-        <Popover.Trigger asChild>
-          <Button>Left Popover</Button>
+        <Popover.Trigger render={<Button />}>
+          Left Popover
         </Popover.Trigger>
         <Popover.Content side="left">
           <Text size="2">Content appears to the left</Text>
@@ -96,8 +94,8 @@ export const alignDemo = {
       name: 'Center',
       code: `
       <Popover>
-        <Popover.Trigger asChild>
-          <Button>Center Aligned</Button>
+        <Popover.Trigger render={<Button />}>
+          Center Aligned
         </Popover.Trigger>
         <Popover.Content align="center">
           <Text size="2">Centered with the trigger</Text>
@@ -108,8 +106,8 @@ export const alignDemo = {
       name: 'Start',
       code: `
       <Popover>
-        <Popover.Trigger asChild>
-          <Button>Start Aligned</Button>
+        <Popover.Trigger render={<Button />}>
+          Start Aligned
         </Popover.Trigger>
         <Popover.Content align="start">
           <Text size="2">Aligned to the start</Text>
@@ -120,8 +118,8 @@ export const alignDemo = {
       name: 'End',
       code: `
       <Popover>
-        <Popover.Trigger asChild>
-          <Button>End Aligned</Button>
+        <Popover.Trigger render={<Button />}>
+          End Aligned
         </Popover.Trigger>
         <Popover.Content align="end">
           <Text size="2">Aligned to the end</Text>

apps/www/src/content/docs/components/select/props.ts

@@ -78,22 +78,37 @@ export interface SelectGroupProps {
   /** Additional CSS class names */
   className?: string;
 
-  /** Boolean to merge props onto child element */
-  asChild?: boolean;
+  /**
+   * Allows rendering as a different element.
+   * Accepts a React element or a function that receives props and returns an element.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?: React.ReactElement;
 }
 
 export interface SelectLabelProps {
   /** Additional CSS class names */
   className?: string;
 
-  /** Boolean to merge props onto child element */
-  asChild?: boolean;
+  /**
+   * Allows rendering as a different element.
+   * Accepts a React element or a function that receives props and returns an element.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?: React.ReactElement;
 }
 
 export interface SelectSeparatorProps {
   /** Additional CSS class names */
   className?: string;
 
-  /** Boolean to merge props onto child element */
-  asChild?: boolean;
+  /**
+   * Allows rendering as a different element.
+   * Accepts a React element or a function that receives props and returns an element.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?: React.ReactElement;
 }

packages/raystack/components/data-table/components/display-settings.tsx

@@ -2,7 +2,7 @@
 
 import { MixerHorizontalIcon } from '@radix-ui/react-icons';
 
-import { ReactNode } from 'react';
+import { isValidElement, ReactNode } from 'react';
 import { Button } from '../../button';
 import { Flex } from '../../flex';
 import { Popover } from '../../popover';
@@ -85,7 +85,9 @@ export function DisplaySettings<TData, TValue>({
 
   return (
     <Popover>
-      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+      <Popover.Trigger
+        render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}
+      />
       <Popover.Content
         className={styles['display-popover-content']}
         align='end'